rn-grid-date-time-picker 1.2.2 → 1.3.1

package/src/components/calendar/DayCell.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { isSameDay } from '../../core/calendarDate';
 import type { CalendarDate } from '../../core/types';
 import type { PickerStyles } from '../theme/styleKeys';
@@ -35,9 +35,10 @@ interface Props extends DayCellState {
 }
 
 /**
- * One day: today ring, selected fill, range band, greyed (not pressable) when
- * disabled, holiday colour. Only primitive-ish props change between renders, so
- * memo keeps typing and taps from redrawing all 42 cells.
+ * One day: today ring (faded when today is disabled), selected fill,
+ * range band, greyed (not pressable) when disabled, holiday colour. Only
+ * primitive-ish props change between renders, so memo keeps typing and taps
+ * from redrawing all 42 cells.
  */
 const DayCell: React.FC<Props> = ({
   date,
@@ -72,6 +73,12 @@ const DayCell: React.FC<Props> = ({
         : rangeRole === 'end'
           ? s.fillEnd
           : null;
+  // The today ring. On a greyed today it's faded, in the day's shape.
+  const ring = isToday && !filled;
+  const fadedRing = ring && isDisabled;
+  const dayRadius = fadedRing
+    ? StyleSheet.flatten(styles?.day)?.borderRadius
+    : undefined;
 
   return (
     <View style={s.cellWrap}>
@@ -87,7 +94,7 @@ const DayCell: React.FC<Props> = ({
         style={({ pressed }) => [
           s.day,
           styles?.day,
-          isToday && !filled && [s.today, styles?.today],
+          ring && !isDisabled && [s.today, styles?.today],
           filled && [s.selected, styles?.selected],
           rangeRole === 'start' && styles?.rangeStart,
           rangeRole === 'middle' && styles?.rangeMiddle,
@@ -98,6 +105,18 @@ const DayCell: React.FC<Props> = ({
           pressed && !isDisabled && !filled && [s.pressed, styles?.dayPressed],
         ]}
       >
+        {fadedRing ? (
+          <View
+            pointerEvents="none"
+            testID={testID ? `${testID}-today-ring` : undefined}
+            style={[
+              s.today,
+              styles?.today,
+              s.todayDisabledRing,
+              dayRadius !== undefined && { borderRadius: dayRadius },
+            ]}
+          />
+        ) : null}
         <Text
           maxFontSizeMultiplier={MAX_FONT_SCALE}
           style={[
@@ -107,7 +126,7 @@ const DayCell: React.FC<Props> = ({
             isHoliday &&
               showHolidays &&
               !filled && [s.holidayText, styles?.holidayText],
-            isToday && !filled && styles?.todayText,
+            ring && styles?.todayText,
             isDisabled && [s.disabledText, styles?.disabledText],
             filled && [s.selectedText, styles?.selectedText],
           ]}

package/src/components/calendar/calendarStyles.ts

@@ -97,6 +97,17 @@ const create = (t: ThemeTokens) =>
       color: t.mutedText,
     },
     today: { borderWidth: 1, borderColor: t.accent },
+    // A greyed today: its accent ring, faded. A layer of its own, so the fade
+    // leaves the day number as grey as the other greyed days.
+    todayDisabledRing: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      borderRadius: t.radius,
+      opacity: 0.4,
+    },
     selected: { backgroundColor: t.accent },
     selectedText: { color: t.onAccent, ...fontStyle(t, 'semiBold') },
     outsideText: { color: t.outsideText ?? t.mutedText },

package/src/components/container/PickerContainer.tsx

@@ -36,6 +36,7 @@ const PickerContainer: React.FC<PickerContainerProps> = ({
     fixedHeader: sheet?.fixedHeader,
     fixedFooter: sheet?.fixedFooter,
     fill: !renderSheet && sheet?.height !== undefined,
+    scrollProps: sheet?.scrollProps,
   });
 
   if (presentation === 'inline') {

package/src/components/container/PickerLayout.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Pressable, ScrollView, Text, View } from 'react-native';
-import type { PickerState, Slot } from '../types';
+import type { ScrollViewRef } from '../nativeTypes';
+import type { PickerState, SheetScrollProps, Slot } from '../types';
 import type { PickerStyles } from '../theme/styleKeys';
 import { buildContainerStyles } from './containerStyles';
 
@@ -27,6 +28,10 @@ export interface PickerLayoutProps {
   fixedFooter?: boolean;
   /** The sheet has a fixed height: the body fills it. */
   fill?: boolean;
+  /** Sheet only: passed to the body's ScrollView over its defaults. */
+  scrollProps?: SheetScrollProps;
+  /** Sheet only: the body's ScrollView. */
+  scrollRef?: React.Ref<ScrollViewRef>;
 }
 
 const renderSlot = (
@@ -58,6 +63,8 @@ export const buildPickerLayout = ({
   fixedHeader = true,
   fixedFooter = true,
   fill,
+  scrollProps,
+  scrollRef,
 }: PickerLayoutProps): { body: React.ReactNode; footer: React.ReactNode } => {
   const s = buildContainerStyles(state.tokens);
 
@@ -129,12 +136,14 @@ export const buildPickerLayout = ({
       {headerScrolls ? null : headerNode}
       {scrollBody ? (
         <ScrollView
+          ref={scrollRef}
           testID={testID ? `${testID}-scroll` : undefined}
           style={s.scroll}
           keyboardShouldPersistTaps="handled"
           nestedScrollEnabled
           bounces={false}
           showsVerticalScrollIndicator={false}
+          {...scrollProps}
         >
           {headerScrolls ? headerNode : null}
           {content}

package/src/components/field/ValueField.tsx

@@ -21,6 +21,7 @@ import FieldMessages from './FieldMessages';
 import {
   formatValueParts,
   formatValueText,
+  emptyFieldParts,
   placeholderText,
   segmentErrorText,
   type DateTextFormatter,
@@ -240,6 +241,20 @@ const ValueField: React.FC<ValueFieldProps> = (props) => {
     styles?.fieldText,
     disabled && [s.disabledText, styles?.fieldTextDisabled],
   ];
+  // The empty field's placeholder sets its date apart from its time the same way.
+  const separator = strings.dateTimeSeparator ?? ' ';
+  const emptyParts =
+    styles?.fieldDateText && type === 'datetime'
+      ? emptyFieldParts(placeholder, type, dateFormat, timeFormat, strings)
+      : null;
+  const placeholderSplit = emptyParts?.time ? emptyParts : null;
+  const placeholderStyle = [
+    s.text,
+    styles?.fieldText,
+    s.placeholder,
+    styles?.fieldPlaceholder,
+    disabled && s.disabledText,
+  ];
 
   const clear = () => {
     dispatch({ type: 'reset', value: null });
@@ -335,7 +350,7 @@ const ValueField: React.FC<ValueFieldProps> = (props) => {
             ellipsizeMode="clip"
             style={[valueStyle, s.textScrolled, styles?.fieldDateText]}
           >
-            {digits(`${parts.date}${strings.dateTimeSeparator ?? ' '}`)}
+            {digits(`${parts.date}${separator}`)}
           </Text>
           <Text numberOfLines={1} ellipsizeMode="clip" style={valueStyle}>
             {digits(parts.time)}
@@ -366,17 +381,21 @@ const ValueField: React.FC<ValueFieldProps> = (props) => {
             {digits(text)}
           </Text>
         </ScrollView>
+      ) : placeholderSplit ? (
+        <>
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="clip"
+            style={[placeholderStyle, s.textScrolled, styles?.fieldDateText]}
+          >
+            {`${placeholderSplit.date}${separator}`}
+          </Text>
+          <Text numberOfLines={1} ellipsizeMode="clip" style={placeholderStyle}>
+            {placeholderSplit.time}
+          </Text>
+        </>
       ) : (
-        <Text
-          numberOfLines={1}
-          style={[
-            s.text,
-            styles?.fieldText,
-            s.placeholder,
-            styles?.fieldPlaceholder,
-            disabled && s.disabledText,
-          ]}
-        >
+        <Text numberOfLines={1} style={placeholderStyle}>
           {placeholder ||
             placeholderText(type, dateFormat, timeFormat, strings)}
         </Text>

package/src/components/field/fieldText.ts

@@ -119,27 +119,70 @@ export const formatMultipleText = (
     )
     .join(', ');
 
-/** 'DD-MM-YYYY' or 'DD-MM-YYYY hh:mm AM', from the placeholder strings. */
-export const placeholderText = (
+/** { date: 'DD-MM-YYYY', time: 'hh:mm AM' } (time '' unless datetime), from the placeholder strings. */
+export const placeholderParts = (
   type: PickerType,
   dateFormat: string,
   timeFormat: TimeFormat,
   strings: PickerStrings = DEFAULT_STRINGS
-): string => {
+): { date: string; time: string } => {
   const parts: Record<string, string> = {
     dd: strings.placeholderDay,
     MM: strings.placeholderMonth,
     yyyy: strings.placeholderYear,
   };
   const date = dateFormat.replace(/yyyy|MM|dd/g, (t) => parts[t] ?? t);
-  if (type !== 'datetime') return date;
+  if (type !== 'datetime') return { date, time: '' };
   const time =
     timeFormat === '24h'
       ? `${strings.placeholderHour24}:${strings.placeholderMinute}`
       : `${strings.placeholderHour}:${strings.placeholderMinute} ${strings.am}`;
-  return `${date}${strings.dateTimeSeparator ?? ' '}${time}`;
+  return { date, time };
 };
 
+/** 'DD-MM-YYYY' or 'DD-MM-YYYY hh:mm AM', from the placeholder strings. */
+export const placeholderText = (
+  type: PickerType,
+  dateFormat: string,
+  timeFormat: TimeFormat,
+  strings: PickerStrings = DEFAULT_STRINGS
+): string => {
+  const { date, time } = placeholderParts(
+    type,
+    dateFormat,
+    timeFormat,
+    strings
+  );
+  return time ? `${date}${strings.dateTimeSeparator ?? ' '}${time}` : date;
+};
+
+/**
+ * A placeholder passed in, cut at the first date-time separator into the
+ * date and the time ('DD/MM/YYYY HH:MM' -> 'DD/MM/YYYY', 'HH:MM'). Text
+ * whose second part isn't a time (no ':'), like 'Pick a time', stays whole.
+ */
+export const splitPlaceholder = (
+  text: string,
+  separator: string
+): { date: string; time: string } => {
+  const at = separator ? text.indexOf(separator) : -1;
+  const time = at > 0 ? text.slice(at + separator.length) : '';
+  if (!time.includes(':')) return { date: text, time: '' };
+  return { date: text.slice(0, at), time };
+};
+
+/** The empty field's placeholder (the one passed in, else the built one) as date and time. */
+export const emptyFieldParts = (
+  placeholder: string | undefined,
+  type: PickerType,
+  dateFormat: string,
+  timeFormat: TimeFormat,
+  strings: PickerStrings = DEFAULT_STRINGS
+): { date: string; time: string } =>
+  placeholder
+    ? splitPlaceholder(placeholder, strings.dateTimeSeparator ?? ' ')
+    : placeholderParts(type, dateFormat, timeFormat, strings);
+
 const TIME_KEYS = ['hour', 'minute', 'period'];
 
 /** The message shown below the field for the first typed-input problem. */

package/src/components/hooks/useScrollToTime.ts

@@ -0,0 +1,99 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
+import type { ScrollViewRef, ViewRef } from '../nativeTypes';
+import { useReduceMotion } from './useReduceMotion';
+
+export interface ScrollToTime {
+  /** The sheet body's ScrollView. */
+  scrollRef: RefObject<ScrollViewRef | null>;
+  /** The time section. */
+  timeRef: RefObject<ViewRef | null>;
+  /** Called from the calendar tap that picks the date. */
+  request: () => void;
+}
+
+/** Rounding in the measured positions, in points. */
+const SLACK = 1;
+
+/**
+ * Scrolls `scroll` so `section` shows: just far enough to show all of it (its
+ * top, when it's taller than the view), or to the end of the content with
+ * `toEnd`. Nothing moves while it already shows in full.
+ */
+export const scrollSectionIntoView = (
+  scroll: ScrollViewRef,
+  section: ViewRef,
+  toEnd: boolean,
+  animated: boolean
+): void => {
+  scroll.measureInWindow((_vx, viewTop, _vw, viewHeight) => {
+    section.measureInWindow((_x, top, _w, height) => {
+      // Not laid out, or folded away.
+      if (!viewHeight || !height) return;
+      const fromTop = top - viewTop;
+      if (fromTop >= -SLACK && fromTop + height <= viewHeight + SLACK) return;
+      if (toEnd) {
+        scroll.scrollToEnd({ animated });
+        return;
+      }
+      // Where the section sits in the scrolled content.
+      const content = scroll.getInnerViewRef?.();
+      if (!content) return;
+      section.measureLayout(
+        content,
+        (_cx, y) => {
+          const target =
+            fromTop < 0 || height > viewHeight ? y : y + height - viewHeight;
+          scroll.scrollTo({ y: Math.max(0, target), animated });
+        },
+        () => {}
+      );
+    });
+  });
+};
+
+/**
+ * The sheet's scroll to the time section once a calendar tap picks the date.
+ * `request()` from the tap; the scroll runs after that render, when `ready`
+ * (the picked date is complete) holds for it. Refs go on the body's ScrollView
+ * and the time section; `outerRef` (an inline picker's own ScrollView, from
+ * the app) is scrolled instead when given. 'end' scrolls to the end of the
+ * body; false never scrolls.
+ */
+export const useScrollToTime = (
+  mode: boolean | 'end',
+  ready: boolean,
+  outerRef?: RefObject<ScrollViewRef | null>
+): ScrollToTime => {
+  const scrollRef = useRef<ScrollViewRef>(null);
+  const timeRef = useRef<ViewRef>(null);
+  const reduceMotion = useReduceMotion();
+  const [tapped, setTapped] = useState(0);
+  const on = useRef(mode !== false);
+  on.current = mode !== false;
+  const request = useCallback(() => {
+    if (on.current) setTapped((n) => n + 1);
+  }, []);
+  useEffect(() => {
+    if (!tapped || !ready || mode === false) return;
+    // A frame after the tap, on iOS and Android alike: the old architecture
+    // lays the tap's changes out after this effect, so measuring now could
+    // read the layout before them; and Android runs a scroll sent in the frame
+    // that grows the content (a per-date row showing) before it grows, so the
+    // scroll would stop short.
+    const frame = requestAnimationFrame(() => {
+      const scroll = outerRef?.current ?? scrollRef.current;
+      const section = timeRef.current;
+      if (scroll && section)
+        scrollSectionIntoView(scroll, section, mode === 'end', !reduceMotion);
+    });
+    return () => cancelAnimationFrame(frame);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- once per tap
+  }, [tapped]);
+  return { scrollRef, timeRef, request };
+};

package/src/components/nativeTypes.ts

@@ -1,5 +1,5 @@
 import type { ComponentRef } from 'react';
-import type { ScrollView, TextInput, TextInputProps } from 'react-native';
+import type { ScrollView, TextInput, TextInputProps, View } from 'react-native';
 
 /**
  * React Native types spelled so every supported version has them: 0.88 added
@@ -8,6 +8,7 @@ import type { ScrollView, TextInput, TextInputProps } from 'react-native';
  */
 export type TextInputRef = ComponentRef<typeof TextInput>;
 export type ScrollViewRef = ComponentRef<typeof ScrollView>;
+export type ViewRef = ComponentRef<typeof View>;
 export type KeyPressEvent = Parameters<
   NonNullable<TextInputProps['onKeyPress']>
 >[0];

package/src/components/theme/styleKeys.ts

@@ -27,7 +27,9 @@ export const STYLE_KEYS = [
   'fieldTextDisabled',
   /**
    * Sets the date of a single date-time value apart from its time, e.g.
-   * `{ minWidth: '50%' }` starts the time at the middle of the field.
+   * `{ minWidth: '50%' }` starts the time at the middle of the field. The empty
+   * field's placeholder does the same: a passed `placeholder` is cut at the
+   * first `strings.dateTimeSeparator` when what follows is a time ('HH:MM').
    */
   'fieldDateText',
   'fieldPlaceholder',

package/src/components/time/TypedTime.tsx

@@ -1,5 +1,5 @@
-import React, { useId } from 'react';
-import { Pressable, Text, TextInput, View } from 'react-native';
+import React, { useId, useRef } from 'react';
+import { Platform, Pressable, Text, TextInput, View } from 'react-native';
 import KeyboardAccessoryBar from '../field/KeyboardAccessoryBar';
 import type { TextInputRef } from '../nativeTypes';
 import type { TimeBounds } from '../../core/constraints';
@@ -64,9 +64,25 @@ const TypedTime: React.FC<Props> = ({
   const digits = useNumerals();
   const barId = useId();
   const s = buildTimeStyles(tokens);
+  const inputs = useRef<Partial<Record<TimeKey, TextInputRef | null>>>({});
+
+  // Android: a TextInput keeps any drag that starts on it, so the sheet can't
+  // scroll from a box. The boxes ignore touches and their wrapper takes them:
+  // a drag scrolls the sheet, a tap focuses the box (and brings the keyboard
+  // back). None of this changes with focus: flipping a box's touch handling
+  // as it gained focus made Android pass focus on to the next box, round and
+  // round. The wrapper is never focusable itself.
+  const passTouches = Platform.OS === 'android' && !disabled;
 
   const box = (key: TimeKey) => (
-    <View style={s.boxWrap}>
+    <Pressable
+      style={s.boxWrap}
+      accessible={false}
+      focusable={false}
+      disabled={!passTouches}
+      onPress={() => inputs.current[key]?.focus()}
+      testID={testID ? `${testID}-${key}-wrap` : undefined}
+    >
       <View
         style={[
           s.boxContainer,
@@ -75,9 +91,12 @@ const TypedTime: React.FC<Props> = ({
           hasError && [s.boxError, styles?.timeBoxError],
         ]}
       >
-        <View style={s.boxInner}>
+        <View style={s.boxInner} pointerEvents={passTouches ? 'none' : 'auto'}>
           <TextInput
-            ref={(r) => setRef(key, r)}
+            ref={(r) => {
+              inputs.current[key] = r;
+              setRef(key, r);
+            }}
             testID={testID ? `${testID}-${key}` : undefined}
             accessibilityLabel={
               key === 'hour' ? strings.a11yHour : strings.a11yMinute
@@ -114,7 +133,7 @@ const TypedTime: React.FC<Props> = ({
           <KeyboardAccessoryBar nativeID={`${barId}-${key}`} tokens={tokens} />
         </View>
       </View>
-    </View>
+    </Pressable>
   );
 
   return (

package/src/components/types.ts

@@ -1,8 +1,9 @@
 import type React from 'react';
-import type { StyleProp, TextStyle } from 'react-native';
+import type { ScrollViewProps, StyleProp, TextStyle } from 'react-native';
 import type { CalendarSystem } from '../core/calendarSystem';
 import type { Constraints, TimeBounds } from '../core/constraints';
 import type { Numerals } from '../core/numerals';
+import type { ScrollViewRef } from './nativeTypes';
 import type {
   CalendarDate,
   PickerType,
@@ -130,11 +131,40 @@ export interface SheetOptions {
   fieldPlaceholder?: string;
   /** The calendar icon at the end of that field, as on the on-screen field. Default false. */
   fieldIcon?: boolean;
+  /**
+   * "This date isn't available" above the calendar while the picked date (or a
+   * range's end) is a disabled day, e.g. a saved value the rules no longer
+   * allow. false hides it; Confirm stays off for that day. Default true;
+   * applies inline too.
+   */
+  showNotAllowedError?: boolean;
+  /**
+   * Passed to the sheet body's ScrollView, over the picker's own defaults, e.g.
+   * `{ showsVerticalScrollIndicator: true, persistentScrollbar: true }` to keep
+   * the scrollbar showing on Android (iOS shows it only while scrolling).
+   * Applies to the built-in sheet and to `renderSheet`.
+   */
+  scrollProps?: SheetScrollProps;
+  /**
+   * Date-time sheets: once a calendar tap picks the date (a range's end, a
+   * multiple picker's first date), the body scrolls the time section into view
+   * when it doesn't show in full. true: just far enough to show it; 'end': to
+   * the end of the body; false: no scroll. Default true. Applies to the
+   * built-in sheet and to `renderSheet`.
+   */
+  scrollToTime?: boolean | 'end';
 }
 
+/** ScrollView props a sheet's body takes (`sheet.scrollProps`). */
+export type SheetScrollProps = Omit<
+  ScrollViewProps,
+  'children' | 'style' | 'testID'
+>;
+
 /**
  * The second argument of `onChange` when the picker can show a Hijri calendar:
- * the calendar the date was picked in. The value itself is always Gregorian.
+ * the calendar the date was picked in, which is the tab on screen when it was
+ * saved. The value itself is always Gregorian.
  * The picker remembers it while mounted; to show a stored value back the same
  * way later, store this too and pass it as `dualDefaultTab` (dual) or
  * `calendarSystem`.
@@ -243,6 +273,13 @@ export interface DateTimePickerProps {
 
   // presentation
   presentation?: 'sheet' | 'inline';
+  /**
+   * Inline date-time pickers: your ScrollView around the picker. Once a
+   * calendar tap picks the date, it scrolls the time section into view, as
+   * `sheet.scrollToTime: true` does in the sheet. Without it an inline picker
+   * never scrolls.
+   */
+  scrollToTimeRef?: React.RefObject<ScrollViewRef | null>;
   visible?: boolean;
   onOpen?: () => void;
   onClose?: () => void;
@@ -336,9 +373,9 @@ export interface DateTimePickerProps {
   showToday?: boolean;
   /**
    * The calendar the grid uses: 'gregory', 'hijri' (Umm al-Qura), or 'dual':
-   * Gregorian and Hijri tabs, one calendar at a time. A day is shown selected
-   * only in the calendar it was picked in, and the field writes it in that
-   * calendar. With `calendarSwitch`, this is the one shown first. Default
+   * Gregorian and Hijri tabs, one calendar at a time. A selection shows in
+   * both tabs and is saved with the tab on screen, and the field writes it in
+   * that calendar. With `calendarSwitch`, this is the one shown first. Default
    * 'gregory'; anything Hijri falls back to 'gregory' when the platform has no
    * Hijri calendar.
    */
@@ -357,8 +394,21 @@ export interface DateTimePickerProps {
    * readers say. Default 'ar-SA' (Arabic).
    */
   hijriLocale?: string;
-  /** The tab a dual calendar opens on, each time it opens. Default 'gregory'. */
+  /**
+   * The tab a dual calendar opens on when it has no value. With a value, it
+   * opens on the tab that value was saved with (remembered while the picker is
+   * mounted; a value from outside counts as saved with this tab). Default
+   * 'gregory'.
+   */
   dualDefaultTab?: 'gregory' | 'hijri';
+  /**
+   * How the on-screen field writes the saved value. 'picked' (default): in the
+   * calendar it was picked in, so a Hijri pick shows Hijri text, digits and
+   * AM / PM. 'gregory': always in `dateFormat`, with `strings` and the
+   * Gregorian digits. The field inside the sheet and the time rows still
+   * follow the tab.
+   */
+  fieldCalendar?: 'picked' | 'gregory';
   /** Replaces the built-in calendar switch. */
   renderCalendarSwitch?: (p: CalendarSwitchRenderProps) => React.ReactNode;
   /** Any BCP-47 tag; decides names, the date order and the clock. Default: the device locale. */
@@ -380,8 +430,13 @@ export interface DateTimePickerProps {
   /** Default: from `locale`, else '12h'. */
   timeFormat?: TimeFormat;
   minuteStep?: number;
-  /** A newly picked day always gets this time (over a time typed first and over the current time). */
-  newDayTime?: Time;
+  /**
+   * The time a newly picked day gets (a saved time is kept). 'now' (default):
+   * the current time. A `Time`: always that time, over a time typed first.
+   * 'empty': none; the time boxes stay empty and Confirm (and 'instant'
+   * saving) waits until the user enters the time.
+   */
+  newDayTime?: Time | 'now' | 'empty';
   /**
    * Shows each time row's picked day under its label ('Start time',
    * 10-03-2026), as the field writes it. Nothing shows until the day is

package/src/core/draft.ts

@@ -53,7 +53,8 @@ export interface DraftOptions {
   zone: string;
   /** Turns saved strings into values and back. */
   adapter: ValueAdapter;
-  defaultTime?: Time;
+  /** Time for a newly picked day when none is given; null leaves it empty. Default DEFAULT_TIME. */
+  defaultTime?: Time | null;
   multiple?: {
     timeMode?: 'shared' | 'perDate';
     maxSelections?: number;
@@ -157,7 +158,9 @@ const timeForNewDay = (
   newDayTime?: Time | null
 ): Time | null => {
   if (opts.type !== 'datetime') return null;
-  return existing ?? newDayTime ?? opts.defaultTime ?? DEFAULT_TIME;
+  const fallback =
+    opts.defaultTime === undefined ? DEFAULT_TIME : opts.defaultTime;
+  return existing ?? newDayTime ?? fallback;
 };
 
 const withDay = (

package/src/index.tsx

@@ -68,6 +68,7 @@ export type {
   PickerState,
   SheetOptions,
   SheetRenderProps,
+  SheetScrollProps,
   SheetSize,
   Slot,
   TimeLabelRenderProps,