@astryxdesign/core 0.7.7-canary.550ff21 → 0.7.7-canary.58c5b8a

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,11 @@ import {
   durationVars,
 } from '../theme/tokens.stylex';
 import {focusOutlineStyles} from '../utils';
+import {
+  playReducedMotionDip,
+  reducedMotionFade,
+  type ReducedMotionDip,
+} from '../motion/reducedMotion';
 import {dateInputTouchSizes, dateInputTouchGeometry} from './tokens.stylex';
 import {useOwnScrollGesture} from './useOwnScrollGesture';
 import {usePointerDragScroll} from './usePointerDragScroll';
@@ -209,7 +219,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 +242,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 +328,94 @@ 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: the row they land
+  // 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<{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<ReducedMotionDip | null>(null);
+  // Synchronizes with the dip's animations: an unmounted wheel lands nothing.
+  useEffect(
+    () => () => {
+      pendingFadeRef.current = null;
+      dipRef.current?.cancel();
+      dipRef.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;
+      // A change that lands now replaces a pending landing. Its dip goes on
+      // and fades back in.
+      if (fadeTiming == null) {
+        pendingFadeRef.current = null;
+        scroller.scrollTo({top, behavior});
+        return;
+      }
+      if (fadeTiming.duration === 0 || typeof scroller.animate !== 'function') {
+        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;
+      }
+      // 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();
+      const landing = {top};
+      pendingFadeRef.current = landing;
+      dipRef.current = playReducedMotionDip(
+        scroller,
+        fadeTiming,
+        () => {
+          if (pendingFadeRef.current === landing) {
+            pendingFadeRef.current = null;
+            scroller.scrollTo({top: landing.top, behavior: 'auto'});
+          }
+        },
+        Number.isFinite(shown) ? shown : 1,
+      );
     },
     [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 +430,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 +449,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 +461,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 +478,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 +594,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',

package/src/DateRangeInput/DateRangeInput.tsx

@@ -88,6 +88,7 @@ import {
   useComponentTranslator,
 } from '../i18n/useComponentTranslator';
 import english from '../i18n/generated-english/DateRangeInput/DateRangeInput.generated';
+import {layerViewportInset} from '../Layer/layerViewportInset.stylex';
 
 registerEnglishFallback(english);
 
@@ -160,8 +161,28 @@ const styles = stylex.create({
   iconButtonDisabled: {
     cursor: 'default',
   },
+  // The popover content scrolls inside the layer's block cap, so a stacked
+  // calendar stays reachable on a short screen.
+  popoverScroll: {
+    overflowY: 'auto',
+    overscrollBehavior: 'contain',
+    maxBlockSize: stylex.firstThatWorks(
+      `calc(${layerViewportInset.maxBlockSize})`,
+      `calc(${layerViewportInset.maxBlockSizeFallback})`,
+    ),
+  },
+  // When the presets and a one-month calendar do not fit side by side, the
+  // row wraps and the presets stack above the calendar, in DOM order. The
+  // preset group draws a divider on its inline end and its block end. A
+  // negative margin moves each divider 1 border width past the group's margin
+  // box, and this row clips at its edges. Thus only the divider between the
+  // two parts shows: the inline-end one side by side, the block-end one when
+  // stacked. The row clips, not the scroller, so the overhang is never
+  // scrollable overflow.
   popoverLayout: {
     display: 'flex',
+    flexWrap: 'wrap',
+    overflow: 'clip',
   },
   presetSidebar: {
     display: 'flex',
@@ -171,8 +192,26 @@ const styles = stylex.create({
     borderInlineEndWidth: borderVars['--border-width'],
     borderInlineEndStyle: 'solid',
     borderInlineEndColor: colorVars['--color-border-emphasized'],
+    borderBlockEndWidth: borderVars['--border-width'],
+    borderBlockEndStyle: 'solid',
+    borderBlockEndColor: colorVars['--color-border-emphasized'],
+    marginInlineEnd: `calc(-1 * ${borderVars['--border-width']})`,
+    marginBlockEnd: `calc(-1 * ${borderVars['--border-width']})`,
+    // Alone on its line, the group fills the line, so its inline-end divider
+    // reaches the clipped edge.
+    flexGrow: 1,
     minWidth: 140,
   },
+  calendarPane: {
+    // Gives back the border width the preset group's margin takes, so the
+    // calendar keeps its side-by-side position.
+    marginInlineStart: borderVars['--border-width'],
+    // The row wraps on the calendar's one-month width, and the calendar then
+    // takes the free space, so its months sit in a row where they fit. The
+    // large factor keeps the preset group at its own width beside it.
+    flexBasis: 'min-content',
+    flexGrow: 1_000_000,
+  },
   presetButton: {
     display: 'block',
     width: '100%',
@@ -805,79 +844,86 @@ export function DateRangeInput({
         </VisuallyHidden>
       )}
       {popover.render(
-        <div {...stylex.props(styles.popoverLayout)}>
-          {presets && presets.length > 0 && (
-            <div
-              role="group"
-              aria-label={t('@astryx.dateRangeInput.presetDateRanges')}
-              {...mergeProps(
-                themeProps('date-range-input-presets'),
-                stylex.props(styles.presetSidebar),
-              )}>
-              {presets.map(preset => {
-                const presetRange = preset.getRange();
-                const isActive = isRangeEqual(value, presetRange);
-                const isPresetDisabled =
-                  isDisabled ||
-                  !isRangeWithinSpan(presetRange, maxRangeSpan, minRangeSpan) ||
-                  isDateDisabled(plainDateFromISO(presetRange.start)) ||
-                  isDateDisabled(plainDateFromISO(presetRange.end));
-                return (
-                  <button
-                    key={preset.label}
-                    type="button"
-                    // These presets are independent action buttons navigated by
-                    // Tab, not a single-tab-stop listbox — so they are a labeled
-                    // group of buttons, and the currently-applied preset is
-                    // marked with aria-current (not aria-selected, a listbox
-                    // concept that contradicted the Tab interaction) (forms-5).
-                    aria-current={isActive ? 'true' : undefined}
-                    // Focusable while disabled (AR3, spec:AST-085 FR1).
-                    aria-disabled={isPresetDisabled || undefined}
-                    aria-describedby={
-                      showsDisabledMessage
-                        ? disabledMessageTooltip.describedBy
-                        : undefined
-                    }
-                    onClick={() => {
-                      if (!isPresetDisabled) {
-                        handleRangeSelect(presetRange);
+        <div {...stylex.props(styles.popoverScroll)}>
+          <div {...stylex.props(styles.popoverLayout)}>
+            {presets && presets.length > 0 && (
+              <div
+                role="group"
+                aria-label={t('@astryx.dateRangeInput.presetDateRanges')}
+                {...mergeProps(
+                  themeProps('date-range-input-presets'),
+                  stylex.props(styles.presetSidebar),
+                )}>
+                {presets.map(preset => {
+                  const presetRange = preset.getRange();
+                  const isActive = isRangeEqual(value, presetRange);
+                  const isPresetDisabled =
+                    isDisabled ||
+                    !isRangeWithinSpan(
+                      presetRange,
+                      maxRangeSpan,
+                      minRangeSpan,
+                    ) ||
+                    isDateDisabled(plainDateFromISO(presetRange.start)) ||
+                    isDateDisabled(plainDateFromISO(presetRange.end));
+                  return (
+                    <button
+                      key={preset.label}
+                      type="button"
+                      // These presets are independent action buttons navigated by
+                      // Tab, not a single-tab-stop listbox — so they are a labeled
+                      // group of buttons, and the currently-applied preset is
+                      // marked with aria-current (not aria-selected, a listbox
+                      // concept that contradicted the Tab interaction) (forms-5).
+                      aria-current={isActive ? 'true' : undefined}
+                      // Focusable while disabled (AR3, spec:AST-085 FR1).
+                      aria-disabled={isPresetDisabled || undefined}
+                      aria-describedby={
+                        showsDisabledMessage
+                          ? disabledMessageTooltip.describedBy
+                          : undefined
                       }
-                    }}
-                    {...mergeProps(
-                      themeProps('date-range-input-preset', {
-                        selected: isActive ? 'selected' : null,
-                        disabled: isPresetDisabled ? 'disabled' : null,
-                      }),
-                      stylex.props(
-                        focusOutlineStyles.focusVisible,
-                        styles.presetButton,
-                        isActive && styles.presetButtonActive,
-                        isPresetDisabled && styles.presetButtonDisabled,
-                      ),
-                    )}>
-                    {preset.label}
-                  </button>
-                );
-              })}
-            </div>
-          )}
-          {/* The layer renders its children open or closed, so mount the
+                      onClick={() => {
+                        if (!isPresetDisabled) {
+                          handleRangeSelect(presetRange);
+                        }
+                      }}
+                      {...mergeProps(
+                        themeProps('date-range-input-preset', {
+                          selected: isActive ? 'selected' : null,
+                          disabled: isPresetDisabled ? 'disabled' : null,
+                        }),
+                        stylex.props(
+                          focusOutlineStyles.focusVisible,
+                          styles.presetButton,
+                          isActive && styles.presetButtonActive,
+                          isPresetDisabled && styles.presetButtonDisabled,
+                        ),
+                      )}>
+                      {preset.label}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+            {/* The layer renders its children open or closed, so mount the
               calendar only while it is open. */}
-          {popover.isOpen && (
-            <Calendar
-              mode="range"
-              value={optimisticValue}
-              onChange={handleRangeSelect}
-              min={min}
-              max={max}
-              dateConstraints={dateConstraints}
-              maxRangeSpan={maxRangeSpan}
-              minRangeSpan={minRangeSpan}
-              numberOfMonths={numberOfMonths}
-              weekStartsOn={weekStartsOn}
-            />
-          )}
+            {popover.isOpen && (
+              <Calendar
+                mode="range"
+                value={optimisticValue}
+                onChange={handleRangeSelect}
+                min={min}
+                max={max}
+                dateConstraints={dateConstraints}
+                maxRangeSpan={maxRangeSpan}
+                minRangeSpan={minRangeSpan}
+                numberOfMonths={numberOfMonths}
+                weekStartsOn={weekStartsOn}
+                xstyle={presets && presets.length > 0 && styles.calendarPane}
+              />
+            )}
+          </div>
         </div>,
         {placement: 'below', alignment: 'start'},
       )}

package/src/DateTimeInput/DateTimeInput.tsx

@@ -1143,12 +1143,18 @@ function PointerDateTimeField({
         if (!isEffectivelyDisabled) {
           popover.show({skipAutoFocus: true});
         }
-      } else if (e.key === 'Enter') {
+      } else if (
+        e.key === 'Enter' &&
+        (datePendingInput !== null || isEffectivelyDisabled)
+      ) {
+        // Typed text holds Enter back, or a form would submit the value from
+        // before the commit. A disabled or busy field must not submit its
+        // form either. Otherwise Enter keeps its default, as in any text field.
         e.preventDefault();
         commitDatePendingInput();
       }
     },
-    [popover, commitDatePendingInput, isEffectivelyDisabled],
+    [popover, commitDatePendingInput, isEffectivelyDisabled, datePendingInput],
   );
 
   // --- Time-option popover (#2727) ---