@oxy.so/bloom 4.30.1 → 4.32.0

package/src/date-picker/calendar-grid.ts

@@ -10,7 +10,7 @@
  * internal state. The time of day on an input is ignored.
  */
 
-import type { DateRange, WeekStart } from './types';
+import type { DateRange, DateRangePreset, WeekStart } from './types';
 
 const MS_PER_DAY = 86_400_000;
 
@@ -334,20 +334,22 @@ export function clampDate(date: Date, { minDate, maxDate }: DateConstraints): Da
   return startOfDay(date);
 }
 
-/** Quick-select presets, relative to `now`. */
-export function quickSelectPresets(now: Date = today()): { label: string; range: DateRange }[] {
+/** Quick-select presets, relative to `now`. `label` is the English default. */
+export function quickSelectPresets(
+  now: Date = today(),
+): { key: DateRangePreset; label: string; range: DateRange }[] {
   const lastMonth = addMonths(now, -1);
   const lastYear = new Date(now.getFullYear() - 1, now.getMonth(), 1);
   const yesterday = addDays(now, -1);
   return [
-    { label: 'Today', range: { start: now, end: now } },
-    { label: 'Yesterday', range: { start: yesterday, end: yesterday } },
-    { label: 'Last week', range: { start: addDays(now, -7), end: yesterday } },
-    { label: 'This month', range: { start: startOfMonth(now), end: endOfMonth(now) } },
-    { label: 'Last month', range: { start: startOfMonth(lastMonth), end: endOfMonth(lastMonth) } },
-    { label: 'This year', range: { start: startOfYear(now), end: endOfYear(now) } },
-    { label: 'Last year', range: { start: startOfYear(lastYear), end: endOfYear(lastYear) } },
-    { label: 'All time', range: { start: addMonths(now, -120), end: now } },
+    { key: 'today', label: 'Today', range: { start: now, end: now } },
+    { key: 'yesterday', label: 'Yesterday', range: { start: yesterday, end: yesterday } },
+    { key: 'lastWeek', label: 'Last week', range: { start: addDays(now, -7), end: yesterday } },
+    { key: 'thisMonth', label: 'This month', range: { start: startOfMonth(now), end: endOfMonth(now) } },
+    { key: 'lastMonth', label: 'Last month', range: { start: startOfMonth(lastMonth), end: endOfMonth(lastMonth) } },
+    { key: 'thisYear', label: 'This year', range: { start: startOfYear(now), end: endOfYear(now) } },
+    { key: 'lastYear', label: 'Last year', range: { start: startOfYear(lastYear), end: endOfYear(lastYear) } },
+    { key: 'allTime', label: 'All time', range: { start: addMonths(now, -120), end: now } },
   ];
 }
 

package/src/date-picker/index.ts

@@ -8,10 +8,14 @@ export { TimeField } from './TimeField';
 
 export type {
   CalendarConstraintProps,
+  CalendarLabels,
   CalendarProps,
+  DatePickerLabels,
   DatePickerProps,
   DateRange,
+  DateRangePickerLabels,
   DateRangePickerProps,
+  DateRangePreset,
   HourFormat,
   MeetingSchedulerDetails,
   MeetingSchedulerHost,

package/src/date-picker/types.ts

@@ -23,11 +23,23 @@ export interface CalendarConstraintProps {
   locale?: string;
 }
 
+/**
+ * Fixed strings of the month panels, overridable for localisation. Month and
+ * weekday names already follow `locale`; these are the rest.
+ */
+export interface CalendarLabels {
+  /** Names the previous-month chevron. Default `'Previous month'`. */
+  previousMonth?: string;
+  /** Names the next-month chevron. Default `'Next month'`. */
+  nextMonth?: string;
+}
+
 interface CalendarBaseProps extends CalendarConstraintProps {
   /** Month shown first. Defaults to the selected day's month, else today's. */
   defaultMonth?: Date;
   /** Names the calendar grid. Defaults to the month title. */
   accessibilityLabel?: string;
+  labels?: CalendarLabels;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
@@ -68,6 +80,40 @@ interface PickerBaseProps extends CalendarConstraintProps {
   testID?: string;
 }
 
+/** `DatePicker`'s fixed strings, overridable for localisation. */
+export interface DatePickerLabels extends CalendarLabels {
+  /** The footer's dismiss button. Default `'Cancel'`. */
+  cancel?: string;
+  /** The footer's commit button. Default `'Apply'`. */
+  apply?: string;
+}
+
+/** The quick-select column's rows, in the order they are drawn. */
+export type DateRangePreset =
+  | 'today'
+  | 'yesterday'
+  | 'lastWeek'
+  | 'thisMonth'
+  | 'lastMonth'
+  | 'thisYear'
+  | 'lastYear'
+  | 'allTime';
+
+/** `DateRangePicker`'s fixed strings, overridable for localisation. */
+export interface DateRangePickerLabels extends DatePickerLabels {
+  /**
+   * The footer pill. Receives the count so the app pluralises with its own
+   * i18n rules. Default `(n) => \`${n} day${n === 1 ? '' : 's'} selected\``.
+   */
+  daysSelected?: (days: number) => string;
+  /** Names the start-date chip. Default `'Start date'`. */
+  startDate?: string;
+  /** Names the end-date chip. Default `'End date'`. */
+  endDate?: string;
+  /** Quick-select rows; any left out keep their English text (`'Today'`, `'Last week'`, …). */
+  presets?: Partial<Record<DateRangePreset, string>>;
+}
+
 export interface DatePickerProps extends PickerBaseProps {
   /** Committed day (controlled). `null` for none. */
   value?: Date | null;
@@ -79,6 +125,8 @@ export interface DatePickerProps extends PickerBaseProps {
   placeholder?: string;
   /** Names the popup and its calendar. Defaults to `'Date'`. */
   accessibilityLabel?: string;
+  /** Footer buttons and month chevrons. */
+  labels?: DatePickerLabels;
 }
 
 export interface DateRangePickerProps extends PickerBaseProps {
@@ -94,6 +142,8 @@ export interface DateRangePickerProps extends PickerBaseProps {
   accessibilityLabel?: string;
   /** Show the quick-select column (Today, Last week, …). Defaults to `true`. */
   quickSelect?: boolean;
+  /** Footer buttons and pill, date chips, quick-select rows and month chevrons. */
+  labels?: DateRangePickerLabels;
 }
 
 /** The person the meeting is booked with. */
@@ -136,7 +186,7 @@ export type HourFormat = '12h' | '24h';
 export type MeetingSchedulerHourFormat = HourFormat;
 
 /** Fixed strings, overridable for localisation. */
-export interface MeetingSchedulerLabels {
+export interface MeetingSchedulerLabels extends CalendarLabels {
   /** Default `'Send meeting'`. */
   send?: string;
   /** Chip text before a time is picked. Default `'Select a time'`. */

package/src/input-otp/InputOtp.tsx

@@ -19,13 +19,14 @@ import {
   TEXT_FIELD_TRANSITION_MS,
 } from '../text-field/shared';
 import { TYPE_SCALE } from '../typography/scale';
-import type { InputOtpProps } from './types';
+import type { InputOtpProps, InputOtpType } from './types';
 import { useFieldMembership } from '../field/membership';
 
 /**
  * `InputOtp`: one box per digit, side by side, behaving as ONE value.
  *
- *   box     48 × 48, radius 10, 1px border, shadow-xs
+ *   box     48 × 48, radius 10, 1px border, shadow-xs; narrower (never
+ *           wider) when the row does not fit its container
  *   digit   mono, title-3-medium 18/26 500, centred, tabular numerals
  *   gap     8 between boxes, +12 before each `groupEvery` group
  *   focus   accent-500 border + 2px accent-500 ring (outside the border)
@@ -46,12 +47,19 @@ import { useFieldMembership } from '../field/membership';
  * Digits are monospace so the boxes stay optically even — in a proportional
  * face a `1` is visibly narrower than an `8`.
  *
+ * `type="alphanumeric"` is the same field for codes that carry letters: every
+ * character is upper-cased, anything outside `A`–`Z`/`0`–`9` is dropped (so a
+ * code printed as `ABCDE-12345` pastes whole), and the keyboard is a letters
+ * one with auto-capitalisation instead of the number pad.
+ *
  * Focus paints on EVERY focus, not only keyboard focus: a text input matches
  * `:focus-visible` on a pointer focus too, so the ring shows on click, and
  * state (not CSS) carries it here so native paints the same ring.
  */
 
-const DIGITS_ONLY = /\D/g;
+const NOT_DIGIT = /\D/g;
+/** Filtered BEFORE upper-casing: `'ß'.toUpperCase()` is `SS`, `'ı'` becomes `I`. */
+const NOT_ALPHANUMERIC = /[^A-Za-z0-9]/g;
 const BOX_SIZE = 48;
 const BOX_GAP = 8;
 const GROUP_GAP = 12;
@@ -141,7 +149,34 @@ export function resolveInputOtpBoxPaint(
   return { backgroundColor, borderColor, color, boxShadow };
 }
 
-const clean = (raw: string, length: number) => raw.replace(DIGITS_ONLY, '').slice(0, length);
+/** The characters `type` accepts, in order; everything else is dropped. Pure. */
+export function cleanInputOtpValue(raw: string, type: InputOtpType = 'numeric'): string {
+  return type === 'alphanumeric' ? raw.replace(NOT_ALPHANUMERIC, '').toUpperCase() : raw.replace(NOT_DIGIT, '');
+}
+
+const clean = (raw: string, length: number, type: InputOtpType) => cleanInputOtpValue(raw, type).slice(0, length);
+
+/**
+ * Keyboard and input hints per `type`. The one-time-code autofill hint is
+ * shared (below); only what the keyboard offers differs. Android has no
+ * `ascii-capable`, and its `visible-password` is the letters keyboard without
+ * suggestions or autocorrect — both of which would rewrite a code.
+ *
+ * Alphanumeric sets `inputMode` on web ONLY: React Native gives `inputMode`
+ * precedence over `keyboardType`, so `inputMode: 'text'` on native would open
+ * the ordinary keyboard instead of `ascii-capable` / `visible-password`.
+ */
+const KEYBOARD_PROPS: Record<InputOtpType, Record<string, unknown>> = {
+  numeric: { inputMode: 'numeric', keyboardType: 'number-pad' },
+  alphanumeric: {
+    ...(IS_WEB
+      ? { inputMode: 'text' }
+      : { keyboardType: Platform.OS === 'android' ? 'visible-password' : 'ascii-capable' }),
+    autoCapitalize: 'characters',
+    autoCorrect: false,
+    spellCheck: false,
+  },
+};
 
 const WEB_BOX_STYLE: TextStyle | undefined = IS_WEB
   ? ({
@@ -155,6 +190,7 @@ const WEB_BOX_STYLE: TextStyle | undefined = IS_WEB
 
 export function InputOtp({
   length = 6,
+  type = 'numeric',
   value,
   defaultValue = '',
   onChange,
@@ -186,21 +222,24 @@ export function InputOtp({
   const groupName = membership.accessibilityLabel ?? 'One-time code';
 
   const inputsRef = useRef<Array<TextInput | null>>([]);
-  const [internal, setInternal] = useState(() => clean(defaultValue, length));
+  const [internal, setInternal] = useState(() => clean(defaultValue, length, type));
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 
   const controlled = value !== undefined;
-  const code = clean(controlled ? value : internal, length);
+  const code = clean(controlled ? value : internal, length, type);
+  const unit = type === 'alphanumeric' ? 'Character' : 'Digit';
 
   const commit = useCallback(
     (next: string) => {
-      const cleaned = clean(next, length);
+      // `next` is already cleaned per character (a cleared box is a space
+      // placeholder, which `clean` drops along with anything else).
+      const cleaned = clean(next, length, type);
       if (!controlled) setInternal(cleaned);
       onChange?.(cleaned);
       if (cleaned.length === length) onComplete?.(cleaned);
     },
-    [controlled, length, onChange, onComplete],
+    [controlled, length, type, onChange, onComplete],
   );
 
   const focusBox = useCallback(
@@ -210,9 +249,9 @@ export function InputOtp({
     [length],
   );
 
-  /** Writes `digits` starting at `index`, which covers typing, paste and autofill. */
-  const writeFrom = (index: number, digits: string) => {
-    const incoming = digits.replace(DIGITS_ONLY, '');
+  /** Writes `text` starting at `index`, which covers typing, paste and autofill. */
+  const writeFrom = (index: number, text: string) => {
+    const incoming = cleanInputOtpValue(text, type);
     if (incoming === '') return;
     const chars = code.padEnd(length, ' ').split('');
     for (let offset = 0; offset < incoming.length && index + offset < length; offset += 1) {
@@ -281,16 +320,18 @@ export function InputOtp({
                 } as Record<string, unknown>)
               : {})}
             testID={testID ? `${testID}-${index}` : undefined}
-            // `text` with a numeric keyboard rather than a number input: a number
-            // input brings spinners, accepts `e` and `-`, and reports an empty
-            // value for anything it considers malformed.
-            inputMode="numeric"
-            keyboardType="number-pad"
+            // Numeric is `text` with a numeric keyboard rather than a number
+            // input: a number input brings spinners, accepts `e` and `-`, and
+            // reports an empty value for anything it considers malformed.
+            {...KEYBOARD_PROPS[type]}
             autoComplete={Platform.OS === 'android' ? 'sms-otp' : 'one-time-code'}
             textContentType="oneTimeCode"
             autoFocus={autoFocus && index === 0}
-            // Long enough to accept a full autofilled code in one box.
-            maxLength={length}
+            // Long enough to accept a full autofilled or pasted code in one box,
+            // separators included: a browser truncates a paste to `maxLength`
+            // BEFORE the change handler sees it, so `length` alone lost the
+            // last character of `ABCDE-12345`.
+            maxLength={length * 2}
             // Typing into a filled box must REPLACE its digit, so the digit is
             // selected on focus. Web's `selectTextOnFocus` does that. Android's
             // does not: it selects on the input's next layout, and focusing a box
@@ -300,7 +341,7 @@ export function InputOtp({
             selectTextOnFocus={IS_WEB}
             caretHidden={false}
             editable={!disabled}
-            accessibilityLabel={`Digit ${index + 1} of ${length}`}
+            accessibilityLabel={`${unit} ${index + 1} of ${length}`}
             aria-invalid={invalid || undefined}
             aria-disabled={disabled || undefined}
             value={digit === ' ' ? '' : digit}
@@ -315,6 +356,12 @@ export function InputOtp({
             style={[
               {
                 width: BOX_SIZE,
+                // A box shrinks (never grows) when the row is narrower than
+                // its natural width, so ten boxes still fit a phone. `minWidth`
+                // 0 is what lets it: a flex item's automatic minimum is its
+                // specified width, and an `<input>` would otherwise overflow.
+                flexShrink: 1,
+                minWidth: 0,
                 height: BOX_SIZE,
                 marginLeft: gapBefore ? GROUP_GAP : 0,
                 padding: 0,

package/src/input-otp/index.ts

@@ -1,2 +1,2 @@
-export { InputOtp } from './InputOtp';
-export type { InputOtpProps } from './types';
+export { InputOtp, cleanInputOtpValue } from './InputOtp';
+export type { InputOtpProps, InputOtpType } from './types';

package/src/input-otp/types.ts

@@ -1,9 +1,22 @@
 import type { ViewStyleProp } from '../styles';
 
+/**
+ * What a box accepts. `numeric` (the default) keeps digits only;
+ * `alphanumeric` upper-cases and keeps `A`–`Z` and `0`–`9`.
+ */
+export type InputOtpType = 'numeric' | 'alphanumeric';
+
 export interface InputOtpProps extends ViewStyleProp {
-  /** Number of digit boxes, default `6`. */
+  /** Number of boxes, default `6`. */
   length?: number;
-  /** Controlled value. Non-digits are dropped and longer strings truncated to `length`. */
+  /**
+   * `numeric` (default): digits only, number pad. `alphanumeric`: letters and
+   * digits, upper-cased, on a letters keyboard with auto-capitalisation.
+   * Anything else — a dash, a space — is dropped either way, so a pasted
+   * `ABCDE-12345` fills ten boxes.
+   */
+  type?: InputOtpType;
+  /** Controlled value. Characters the `type` does not accept are dropped and longer strings truncated to `length`. */
   value?: string;
   /** Initial value when uncontrolled. */
   defaultValue?: string;