@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/src/DateInput/TouchDateField.tsx

@@ -38,6 +38,10 @@
  * 3. The title is the escape hatch. Tap it and the same box becomes a month
  *    wheel and a year wheel — a flick each to reach 2019 instead of forty.
  *
+ * Reset is chrome, so it sits in the header beside the arrows rather than in
+ * the footer: the footer is where the task ends, and an undo of equal weight
+ * beside Save is a mis-tap that throws away the date just chosen.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/DateInput/DateInput.tsx
  * - /packages/core/src/DateInput/DateInput.doc.mjs
@@ -71,7 +75,7 @@ import {useInputStatusIcon, useMergedRefs} from '../hooks';
 import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {Icon} from '../Icon';
 import {IconButton} from '../IconButton';
-import {useTranslator} from '../i18n';
+import {useLocale, useTranslator} from '../i18n';
 import {useInputGroup} from '../InputGroup';
 import {groupStyles} from '../InputGroup/groupStyles';
 import {stableClassName} from '../naming';
@@ -106,6 +110,7 @@ import {
   DATE_FORMAT_WEEKDAY_ONLY,
   type ISODateString,
 } from '../utils';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {normalizeDayOfWeek} from '../utils/dateTypes';
 import {MonthScroller, type MonthScrollerHandle} from './MonthScroller';
 import {MonthYearWheels} from './MonthYearWheels';
@@ -118,9 +123,8 @@ import {
 import {dateInputTouchSizes, dateInputTouchGeometry} from './tokens.stylex';
 
 /**
- * The comfortable minimum tap target on both iOS and Android. Applied as a
- * FLOOR under the size prop rather than replacing it: `size` still means what
- * it means, it just cannot produce a control a thumb misses.
+ * The comfortable minimum tap target on both iOS and Android, honoured by
+ * every target inside the sheet.
  */
 const TOUCH_TARGET = dateInputTouchSizes.daySize;
 
@@ -147,17 +151,14 @@ const sizeStyles = stylex.create({
   sm: {
     height: sizeVars['--size-element-sm'],
     minWidth: 180,
-    minBlockSize: {default: null, '@media (pointer: coarse)': TOUCH_TARGET},
   },
   md: {
     height: sizeVars['--size-element-md'],
     minWidth: 180,
-    minBlockSize: {default: null, '@media (pointer: coarse)': TOUCH_TARGET},
   },
   lg: {
     height: sizeVars['--size-element-lg'],
     minWidth: 180,
-    minBlockSize: {default: null, '@media (pointer: coarse)': TOUCH_TARGET},
   },
 });
 
@@ -282,7 +283,7 @@ const styles = stylex.create({
   /**
    * `Button`'s own sizes top out at 36px, which is fine for a mouse and short
    * of the 44px every other target in this sheet honours. Floor it on a
-   * coarse pointer, the same way the field and the day cells do.
+   * coarse pointer, the same way the day cells do.
    */
   monthArrow: {
     minBlockSize: {default: null, '@media (pointer: coarse)': TOUCH_TARGET},
@@ -297,6 +298,34 @@ const styles = stylex.create({
   monthArrowIcon: {
     display: 'inline-flex',
   },
+  /**
+   * Reset, past the arrows. It fades on their timing for their reason: the
+   * plate starts below the header, so the two of them are what the layer
+   * above cannot cover, and they have to leave together.
+   */
+  headerReset: {
+    display: 'flex',
+    alignItems: 'center',
+    transitionProperty: 'opacity, visibility',
+    transitionDuration: SWAP_DURATION,
+    transitionTimingFunction: 'linear',
+    '@media (prefers-reduced-motion: reduce)': {
+      transitionDuration: '0.01s',
+    },
+  },
+  headerResetHidden: {
+    visibility: 'hidden',
+    opacity: 0,
+    pointerEvents: 'none',
+  },
+  /**
+   * The same 44px floor the arrows take. `Button`'s `sm` is 32px, which is
+   * fine beside a mouse and short of what every other target in this sheet
+   * honours.
+   */
+  resetButton: {
+    minBlockSize: {default: null, '@media (pointer: coarse)': TOUCH_TARGET},
+  },
   /**
    * The month and year, and the toggle into the wheels. Leading, so it reads
    * first and sits on the same line as the day grid below it.
@@ -313,15 +342,7 @@ const styles = stylex.create({
     borderWidth: 0,
     borderStyle: 'none',
     borderRadius: radiusVars['--radius-element'],
-    backgroundColor: {
-      default: 'transparent',
-      '@media (hover: hover)': {
-        default: 'transparent',
-        ':hover:where(:not(:disabled,[aria-disabled="true"]))':
-          colorVars['--color-overlay-hover'],
-      },
-      ':active': colorVars['--color-overlay-pressed'],
-    },
+    backgroundColor: 'transparent',
     color: colorVars['--color-text-primary'],
     fontSize: typeScaleVars['--text-large-size'],
     fontWeight: fontWeightVars['--font-weight-semibold'],
@@ -330,9 +351,19 @@ const styles = stylex.create({
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
     whiteSpace: 'nowrap',
+    // The header now ends with Reset, so the title is the part that gives:
+    // it ellipses rather than pushing the corner off a narrow screen.
+    minInlineSize: 0,
+    overflow: 'hidden',
+  },
+  titleText: {
+    minInlineSize: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
   },
   titleChevron: {
     display: 'inline-flex',
+    flexShrink: 0,
     // The one part of the swap that keeps `--ease-standard`, because it is
     // the one part that travels: a rotation has a distance to cover, and
     // fast-out-slow-in is what that curve is for. Same duration as the
@@ -479,16 +510,14 @@ const styles = stylex.create({
   },
   /**
    * One footer action. Both occupy the same cell, and the wheels' one is a
-   * layer over the calendar's pair exactly as the panels above are. The row
+   * layer over the calendar's, exactly as the panels above are. The row
    * never changes height either way.
    */
   footerAction: {
     gridArea: '1 / 1',
-    // Side by side and equal: the calendar's cell holds Reset and Save, the
-    // wheels' holds one button. `1fr` each rather than content width, so
-    // neither label's length decides how the row is divided.
+    // One button per surface, filling the row: Save on the calendar, Done on
+    // the wheels.
     display: 'flex',
-    gap: spacingVars['--spacing-2'],
   },
   sheetBody: {
     // One inset on every edge. The block-start is the exception and has to
@@ -545,6 +574,7 @@ export function TouchDateField({
   ...rest
 }: DateInputProps) {
   const t = useTranslator();
+  const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
   const placeholder =
     placeholderFromProps ?? t('@astryx.dateInput.placeholder');
@@ -670,13 +700,15 @@ export function TouchDateField({
         plainDateFormat(
           {year: 1970, month: 1, day: 4 + ((weekStartsOn + offset) % 7)},
           DATE_FORMAT_WEEKDAY_ONLY,
+          locale,
         ),
       ),
-    [weekStartsOn],
+    [locale, weekStartsOn],
   );
   const monthYearLabel = plainDateFormat(
     {year, month, day: 1},
     DATE_FORMAT_MONTH_YEAR,
+    locale,
   );
 
   // Formats the committed value only. A function format is called with the ISO
@@ -686,7 +718,7 @@ export function TouchDateField({
     optimisticValue != null && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue)
       ? typeof format === 'function'
         ? format(optimisticValue)
-        : formatSharedDate(plainDateFromISO(optimisticValue), format)
+        : formatSharedDate(plainDateFromISO(optimisticValue), format, locale)
       : '';
 
   const fireChange = useCallback(
@@ -918,8 +950,12 @@ export function TouchDateField({
           // restyle the header button. Adding a target later is additive;
           // withdrawing one is not.
           data-title="month-year"
-          {...stylex.props(styles.title, focusOutlineStyles.focusVisible)}>
-          <span>{monthYearLabel}</span>
+          {...stylex.props(
+            styles.title,
+            interactionOverlayStyles.backgroundColor,
+            focusOutlineStyles.focusVisible,
+          )}>
+          <span {...stylex.props(styles.titleText)}>{monthYearLabel}</span>
           <Icon
             icon="chevronDown"
             size="sm"
@@ -983,6 +1019,27 @@ export function TouchDateField({
             }
           />
         </span>
+        {/* Reset, past the arrows, and gone with them on the wheels: the
+            wheels choose a month, and there is no date there to put back.
+            Hidden rather than unmounted, for the arrows' reason — the corner
+            keeps its size, so the header cannot change height mid-swap. */}
+        <span
+          data-action="reset"
+          inert={isWheelOpen ? true : undefined}
+          {...stylex.props(
+            styles.headerReset,
+            isWheelOpen && styles.headerResetHidden,
+          )}>
+          <Button
+            // ghost: a filled button up here would outrank the Save that
+            // finishes the task.
+            variant="ghost"
+            size="sm"
+            xstyle={styles.resetButton}
+            label={t('@astryx.dateInput.resetPicking')}
+            onClick={handleResetInSheet}
+          />
+        </span>
       </div>
 
       {/* Decorative: each day carries its weekday in its accessible name, so
@@ -1077,13 +1134,6 @@ export function TouchDateField({
             styles.panelBeneath,
             isWheelOpen && styles.panelBeneathHidden,
           )}>
-          <Button
-            variant="secondary"
-            size="md"
-            width="100%"
-            label={t('@astryx.dateInput.resetPicking')}
-            onClick={handleResetInSheet}
-          />
           <Button
             variant="primary"
             // md, not sm: it is the action a thumb reaches for, so it gets

package/src/DateInput/Wheel.tsx

@@ -28,6 +28,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/DateInput/TouchDateField.tsx
+ * - /packages/core/src/DateTimeInput/TouchDateTimeField.tsx
  * - /packages/core/src/DateInput/DateInput.doc.mjs
  * - /packages/core/src/DateInput/DateInputTouch.test.tsx
  */

package/src/DateInput/index.ts

@@ -14,6 +14,7 @@ export type {
   DateInputProps,
   DateInputSize,
   DateInputFormat,
+  DateInputNativePicker,
   DateInputStatus,
   DateInputStatusType,
 } from './DateInput';

package/src/DateInput/nativeDateSegments.ts

@@ -0,0 +1,127 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file nativeDateSegments.ts
+ * @input Uses the DOM only
+ * @output Exports hasEditableDateSegments, resetDateSegmentProbe
+ * @position Internal helper for NativeDateField; answers "can the user type
+ *   into this engine's `<input type="date">`?"
+ *
+ * `<input type="date">` is two different controls wearing one tag name: a
+ * single untypable run the OS picker drives (iOS, Android), or a row of
+ * editable `mm`/`dd`/`yyyy` fields (desktop engines). Hiding the first costs
+ * nothing; hiding the second hides what the user is editing.
+ *
+ * Neither obvious test tells them apart. The pointer is wrong on Chrome's
+ * touch simulator, a Windows tablet and a ChromeOS convertible, which report
+ * a coarse pointer while Blink still renders segments. And measured, iOS and
+ * Chromium BOTH accept every `-webkit-datetime-*` selector, so
+ * `CSS.supports('selector(...)')` only proves the parser knows the name. What
+ * separates them is which pseudo is a real box, so this measures that.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DateInput/NativeDateField.tsx (the caller)
+ * - /packages/core/src/DateInput/NativeDateField.test.tsx (tests)
+ */
+
+/** Marks the throwaway probe element for the probe stylesheet. */
+const PROBE_ATTR = 'data-astryx-date-probe';
+
+/** How much padding the probe adds, in px. Large enough to beat rounding. */
+const PROBE_PADDING = 100;
+
+type EngineKind = 'segmented' | 'picker-only' | 'unknown';
+
+let cachedEngine: EngineKind | null = null;
+
+/** Whether padding this pseudo-element moves the control's box. */
+function pseudoIsRealBox(
+  input: HTMLInputElement,
+  style: HTMLStyleElement,
+  pseudo: string,
+  baseWidth: number,
+): boolean {
+  style.textContent = `[${PROBE_ATTR}]${pseudo}{padding-inline-start:${PROBE_PADDING}px !important}`;
+  // Reading geometry flushes style and layout, so this already reflects it.
+  return input.getBoundingClientRect().width > baseWidth + PROBE_PADDING / 2;
+}
+
+/**
+ * Classifies the engine's date control. Cached: the answer is a build-time
+ * property of the browser, not of the field or the pointer in use.
+ */
+function probeEngine(): EngineKind {
+  if (cachedEngine !== null) {
+    return cachedEngine;
+  }
+  if (typeof document === 'undefined' || !document.body) {
+    return 'unknown';
+  }
+
+  const input = document.createElement('input');
+  input.setAttribute('type', 'date');
+  input.setAttribute(PROBE_ATTR, '');
+  // Off-screen, and immune to the page's own `input` rules: the probe reads a
+  // width DELTA, so anything pinning the width would swallow the signal.
+  input.style.cssText =
+    'position:fixed;top:-9999px;left:0;width:auto;min-width:0;max-width:none;' +
+    'padding:0;border:0;font-size:16px;box-sizing:content-box;';
+
+  const style = document.createElement('style');
+
+  let kind: EngineKind = 'unknown';
+  try {
+    document.body.appendChild(input);
+    document.head.appendChild(style);
+    const base = input.getBoundingClientRect().width;
+    if (pseudoIsRealBox(input, style, '::-webkit-datetime-edit', base)) {
+      // Chromium's editable field row, and WebKit's on macOS/GTK. Probe the
+      // container: the individual field pseudos overflow it rather than
+      // expand it, so they do not move the box even in Chromium.
+      kind = 'segmented';
+    } else if (
+      pseudoIsRealBox(input, style, '::-webkit-date-and-time-value', base)
+    ) {
+      // The single, untypable run iOS Safari and Chrome on Android paint.
+      kind = 'picker-only';
+    }
+  } catch {
+    // A hostile CSSOM leaves the answer unknown, resolved by the pointer.
+  } finally {
+    input.remove();
+    style.remove();
+  }
+
+  cachedEngine = kind;
+  return kind;
+}
+
+/**
+ * Whether the user can type into this engine's `<input type="date">`.
+ *
+ * Firefox exposes neither pseudo-element, so it — and any future engine —
+ * comes back `'unknown'` and the pointer breaks the tie. That is the right
+ * fallback precisely where the probe is blind: the pointer is wrong for
+ * Chromium because Blink's answer is fixed at build time and contradicts it,
+ * and an engine we cannot see is not in that position. It lands Firefox on
+ * the desktop (segmented) and on Android (picker-only) correctly.
+ *
+ * @param isTouchPointer Whether `(pointer: coarse)` matches.
+ * @internal Exported for tests.
+ */
+export function hasEditableDateSegments(isTouchPointer: boolean): boolean {
+  const engine = probeEngine();
+  return engine === 'unknown' ? !isTouchPointer : engine === 'segmented';
+}
+
+/**
+ * Drops the cached classification.
+ *
+ * @internal Exists for tests, which render against several engines in one
+ *   document.
+ */
+export function resetDateSegmentProbe(): void {
+  cachedEngine = null;
+}

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'DateRangeInput',
   displayName: 'Date Range Input',
   group: 'DateInput',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'daterangepicker',
     'daterange',
@@ -108,7 +108,7 @@ export const docs = {
       name: 'minRangeSpan',
       type: 'number',
       description:
-        'Minimum days a selected range must span, counting both endpoints (`2` forbids a single-day range). Once a start is picked, days closer than this are disabled. Defaults to 1 (same-day start and end allowed).',
+        'Minimum days a selected range must span, counting both endpoints (`2` forbids a single-day range). Once a start is picked, days closer than this are disabled. Clicking the start again commits a one-day range when allowed, or cancels the in-progress selection when the minimum is longer. Defaults to 1 (same-day start and end allowed).',
     },
     {
       name: 'presets',
@@ -328,7 +328,7 @@ export const docsDense = {
     maxRangeSpan:
       'max days a range may span, both endpoints counted (7 = a 7-day window); caps the window from the picked start. Selection-only; does not rewrite an over-wide value',
     minRangeSpan:
-      'min days a range must span, both endpoints counted (2 forbids a single-day range); default 1',
+      'min days a range must span, both endpoints counted (2 forbids a single-day range); repeated start click commits one day when allowed, otherwise cancels; default 1',
     presets: 'preset ranges as quick-select options',
     hasClear: 'clear button when range is set (default true)',
     placeholder: 'placeholder when empty',

package/src/DateRangeInput/DateRangeInput.test.tsx

@@ -27,6 +27,7 @@ import type {DateRange} from './DateRangeInput';
 import {Icon} from '../Icon';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
+import {InternationalizationProvider} from '../i18n';
 
 describe('DateRangeInput', () => {
   it('renders with label', () => {
@@ -72,6 +73,29 @@ describe('DateRangeInput', () => {
     expect(trigger.textContent).toMatch(/22/);
   });
 
+  it('updates the committed range display when provider locale changes', () => {
+    const range: DateRange = {
+      start: '2025-01-02',
+      end: '2025-01-05',
+    };
+    const renderDateRangeInput = (locale: 'en-US' | 'es-ES') => (
+      <InternationalizationProvider locale={locale}>
+        <DateRangeInput
+          label="Range"
+          value={range}
+          onChange={() => {}}
+          hasClear={false}
+        />
+      </InternationalizationProvider>
+    );
+    const {rerender} = render(renderDateRangeInput('en-US'));
+
+    expect(screen.getByText('Jan 2, 2025 – Jan 5, 2025')).toBeInTheDocument();
+
+    rerender(renderDateRangeInput('es-ES'));
+    expect(screen.getByText('2 ene 2025 – 5 ene 2025')).toBeInTheDocument();
+  });
+
   it('forwards ref to trigger button', () => {
     const ref = vi.fn();
     render(
@@ -730,6 +754,28 @@ describe('DateRangeInput range-span forwarding', () => {
   const dayButton = (iso: string): HTMLButtonElement | null =>
     document.querySelector<HTMLButtonElement>(`button[data-date="${iso}"]`);
 
+  it('allows selecting a one-day range when minRangeSpan is 1', () => {
+    const handleChange = vi.fn();
+    render(
+      <DateRangeInput
+        label="Reporting period"
+        value={null}
+        onChange={handleChange}
+        minRangeSpan={1}
+        numberOfMonths={1}
+      />,
+    );
+
+    fireEvent.click(getButton('Open calendar'));
+    fireEvent.click(dayButton('2026-01-10') as HTMLButtonElement);
+    fireEvent.click(dayButton('2026-01-10') as HTMLButtonElement);
+
+    expect(handleChange).toHaveBeenCalledWith({
+      start: '2026-01-10',
+      end: '2026-01-10',
+    });
+  });
+
   it('forwards maxRangeSpan so the window caps after a start is picked', () => {
     render(
       <DateRangeInput

package/src/DateRangeInput/DateRangeInput.tsx

@@ -16,14 +16,7 @@
  * - /packages/cli/assets/templates/blocks/components/DateRangeInput/ (showcase blocks)
  */
 
-import {
-  use,
-  useId,
-  useCallback,
-  useMemo,
-  useOptimistic,
-  useTransition,
-} from 'react';
+import {useId, useCallback, useMemo, useOptimistic, useTransition} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   plainDateFromISO,
@@ -72,7 +65,7 @@ import {useResolvedRequired} from '../hooks/useResolvedRequired';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
-import {useTranslator, InternationalizationContext} from '../i18n';
+import {useLocale, useTranslator} from '../i18n';
 import type {Locale} from '../i18n/types';
 
 export type {DateRange} from '../Calendar';
@@ -202,7 +195,7 @@ const sizeStyles = stylex.create({
   },
 });
 
-function formatRangeDisplay(range: DateRange | null, locale?: Locale): string {
+function formatRangeDisplay(range: DateRange | null, locale: Locale): string {
   if (!range) {
     return '';
   }
@@ -374,8 +367,10 @@ export interface DateRangeInputProps extends Omit<
    * Minimum number of days the selected range must span, counting both
    * endpoints — `minRangeSpan={2}` forbids a single-day range. Once a start
    * date is picked, days closer than this to it are disabled — except the
-   * start itself, which stays selectable as the active anchor. Defaults to 1
-   * (a same-day start and end is allowed).
+   * start itself, which stays selectable. Clicking the start again commits a
+   * one-day range when the minimum allows it; otherwise it cancels the
+   * in-progress selection so the start can be moved. Defaults to 1 (a
+   * same-day start and end is allowed).
    */
   minRangeSpan?: number;
 
@@ -491,8 +486,8 @@ export function DateRangeInput({
   ...rest
 }: DateRangeInputProps) {
   const t = useTranslator();
+  const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({isRequired, isOptional});
-  const {locale} = use(InternationalizationContext);
   const placeholder =
     placeholderFromProps ?? t('@astryx.dateRangeInput.placeholder');
   const size = useSize(sizeProp, 'md');