react-native-platform-components 1.4.0 → 1.6.0

package/src/web/TextField.tsx

@@ -0,0 +1,361 @@
+// web/TextField.tsx
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import { Pressable, Text, TextInput, View } from 'react-native';
+
+import type {
+  TextFieldChangeEvent,
+  TextFieldEvent,
+  TextFieldProps,
+  TextFieldRef,
+} from '../TextField';
+import { resolveSubmitBehavior } from '../submitBehavior';
+import { Icon } from './Icon';
+import { usePrimaryColor } from './shared';
+
+const ERROR_COLOR = '#B3261E';
+const MUTED_COLOR = 'rgba(128, 128, 128, 1)';
+const OUTLINE_COLOR = 'rgba(128, 128, 128, 0.5)';
+
+function textEvent(text: string): TextFieldEvent {
+  return { nativeEvent: { text } } as TextFieldEvent;
+}
+
+/**
+ * A text input with the TextField extras around it: a label above, prefix and
+ * suffix, icons, a clear button, a password toggle, and supporting, error and
+ * counter text below.
+ */
+export const TextField = forwardRef<TextFieldRef, TextFieldProps>(
+  function TextFieldComponent(props, ref): React.ReactElement {
+    const {
+      value,
+      defaultValue,
+      onChangeText,
+      onChange,
+      onFocus,
+      onBlur,
+      onSubmitEditing,
+      submitBehavior,
+      onSelectionChange,
+      selection,
+      label,
+      placeholder,
+      supportingText,
+      error,
+      prefix,
+      suffix,
+      leadingIcon,
+      trailingIcon,
+      onTrailingIconPress,
+      leadingIconTestID,
+      leadingIconAccessibilityLabel,
+      trailingIconTestID,
+      trailingIconAccessibilityLabel,
+      onPress,
+      activeColor,
+      outlineColor,
+      errorColor,
+      containerColor,
+      textColor,
+      placeholderTextColor,
+      maxFontSizeMultiplier,
+      textAlign,
+      minLines,
+      maxLines,
+      clearButtonMode = 'never',
+      passwordToggle,
+      showCharacterCount,
+      maxLength,
+      keyboardType,
+      returnKeyType,
+      autoCapitalize,
+      autoCorrect,
+      secureTextEntry,
+      multiline,
+      editable = true,
+      autoFocus,
+      selectTextOnFocus,
+      autoComplete,
+      keyboardAppearance,
+      textStyle,
+      accessibilityLabel,
+      ios,
+      android,
+      style,
+      testID,
+      ...viewProps
+    } = props;
+
+    const primary = usePrimaryColor();
+    const inputRef = useRef<React.ComponentRef<typeof TextInput> | null>(null);
+    const eventCount = useRef(0);
+    const [uncontrolledText, setUncontrolledText] = useState(
+      defaultValue ?? ''
+    );
+    const [focused, setFocused] = useState(false);
+    const [revealed, setRevealed] = useState(false);
+
+    const text = value ?? uncontrolledText;
+    const errorText = typeof error === 'string' ? error : undefined;
+    const invalid = error !== undefined && error !== false && error !== '';
+
+    const changeText = (next: string) => {
+      setUncontrolledText(next);
+      eventCount.current += 1;
+      onChangeText?.(next);
+      onChange?.({
+        nativeEvent: { text: next, eventCount: eventCount.current },
+      } as TextFieldChangeEvent);
+    };
+
+    useImperativeHandle(ref, () => ({
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+      clear: () => changeText(''),
+      isFocused: () => inputRef.current?.isFocused() ?? false,
+      setSelection: (start: number, end?: number) => {
+        // react-native-web's TextInput ref is the DOM input
+        const node = inputRef.current as unknown as {
+          setSelectionRange?: (start: number, end: number) => void;
+        } | null;
+        node?.setSelectionRange?.(start, end ?? start);
+      },
+    }));
+
+    // The keyboard toolbar and password rules are iOS only
+    const returnKey = resolveSubmitBehavior(submitBehavior, multiline);
+    // react-native-web submits a multi-line field only when it also blurs;
+    // Enter without Shift submits one that keeps focus
+    const submitsOnEnter = multiline && returnKey === 'submit';
+
+    const showClear =
+      editable &&
+      text.length > 0 &&
+      (clearButtonMode === 'always' ||
+        (clearButtonMode === 'while-editing' && focused) ||
+        (clearButtonMode === 'unless-editing' && !focused));
+
+    const errorTint = errorColor ?? ERROR_COLOR;
+    const accent = invalid
+      ? errorTint
+      : focused
+        ? (activeColor ?? primary)
+        : undefined;
+    // A read-only field with onPress acts as a button
+    const actsAsButton = !editable && onPress != null;
+    // A disabled Pressable marks every focusable descendant aria-disabled.
+    // Editable inputs need a neutral container, including their icon actions.
+    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-disabled
+    const FieldContainer = actsAsButton ? Pressable : View;
+    const lineHeight = (textStyle?.fontSize ?? 16) * 1.25;
+    const bottomText = errorText ?? supportingText;
+    const counter = showCharacterCount
+      ? maxLength !== undefined
+        ? `${text.length} / ${maxLength}`
+        : `${text.length}`
+      : undefined;
+
+    return (
+      <View {...viewProps} style={[{ gap: 4 }, style]}>
+        {label ? (
+          <Text style={{ fontSize: 13, color: accent ?? MUTED_COLOR }}>
+            {label}
+          </Text>
+        ) : null}
+        <FieldContainer
+          onPress={actsAsButton ? onPress : undefined}
+          accessibilityLabel={
+            actsAsButton ? (accessibilityLabel ?? label) : undefined
+          }
+          role={actsAsButton ? 'button' : undefined}
+          style={{
+            flexDirection: 'row',
+            alignItems: multiline ? 'flex-start' : 'center',
+            gap: 8,
+            minHeight: 40,
+            paddingHorizontal: 12,
+            borderWidth: 1,
+            borderRadius: 8,
+            borderColor: accent ?? outlineColor ?? OUTLINE_COLOR,
+            backgroundColor: containerColor,
+            opacity: editable || actsAsButton ? 1 : 0.6,
+            cursor: actsAsButton ? 'pointer' : undefined,
+          }}
+        >
+          <View
+            testID={leadingIconTestID}
+            accessibilityLabel={leadingIconAccessibilityLabel}
+          >
+            <Icon icon={leadingIcon} color={MUTED_COLOR} />
+          </View>
+          {prefix ? <Text style={{ color: MUTED_COLOR }}>{prefix}</Text> : null}
+          <TextInput
+            ref={inputRef}
+            testID={testID}
+            value={text}
+            onChangeText={changeText}
+            onFocus={() => {
+              setFocused(true);
+              onFocus?.(textEvent(text));
+            }}
+            onBlur={() => {
+              setFocused(false);
+              onBlur?.(textEvent(text));
+            }}
+            onSubmitEditing={
+              multiline && returnKey !== 'blurAndSubmit'
+                ? undefined
+                : () => onSubmitEditing?.(textEvent(text))
+            }
+            submitBehavior={returnKey}
+            blurOnSubmit={returnKey === 'blurAndSubmit'}
+            onKeyPress={
+              submitsOnEnter
+                ? (event) => {
+                    const { key, shiftKey } = event.nativeEvent as {
+                      key: string;
+                      shiftKey?: boolean;
+                    };
+                    if (key !== 'Enter' || shiftKey) return;
+                    event.preventDefault();
+                    onSubmitEditing?.(textEvent(text));
+                  }
+                : undefined
+            }
+            selection={
+              selection
+                ? {
+                    start: selection.start,
+                    end: selection.end ?? selection.start,
+                  }
+                : undefined
+            }
+            onSelectionChange={onSelectionChange}
+            placeholder={placeholder}
+            placeholderTextColor={placeholderTextColor}
+            maxLength={maxLength}
+            keyboardType={keyboardType}
+            returnKeyType={returnKeyType === 'none' ? undefined : returnKeyType}
+            autoCapitalize={autoCapitalize}
+            autoCorrect={autoCorrect}
+            secureTextEntry={secureTextEntry && !revealed}
+            multiline={multiline}
+            numberOfLines={multiline ? minLines : undefined}
+            editable={editable}
+            pointerEvents={actsAsButton ? 'none' : undefined}
+            tabIndex={actsAsButton ? -1 : undefined}
+            autoFocus={autoFocus}
+            selectTextOnFocus={selectTextOnFocus}
+            autoComplete={autoComplete}
+            accessibilityLabel={accessibilityLabel ?? label}
+            aria-invalid={invalid}
+            style={{
+              flex: 1,
+              minWidth: 0,
+              paddingVertical: 8,
+              maxHeight:
+                multiline && maxLines ? lineHeight * maxLines + 16 : undefined,
+              textAlign,
+              color: textColor,
+              fontSize: textStyle?.fontSize ?? 16,
+              fontFamily: textStyle?.fontFamily,
+              fontWeight: textStyle?.fontWeight,
+              fontStyle: textStyle?.fontStyle,
+              outlineWidth: 0,
+            }}
+          />
+          {suffix ? <Text style={{ color: MUTED_COLOR }}>{suffix}</Text> : null}
+          {showClear ? (
+            <FieldButton label="Clear text" onPress={() => changeText('')}>
+              ✕
+            </FieldButton>
+          ) : null}
+          {passwordToggle ? (
+            <FieldButton
+              label={revealed ? 'Hide password' : 'Show password'}
+              onPress={() => setRevealed((r) => !r)}
+            >
+              {revealed ? 'Hide' : 'Show'}
+            </FieldButton>
+          ) : null}
+          {trailingIcon ? (
+            onTrailingIconPress ? (
+              <Pressable
+                role="button"
+                testID={trailingIconTestID}
+                accessibilityLabel={trailingIconAccessibilityLabel}
+                onPress={onTrailingIconPress}
+                style={{ padding: 4 }}
+              >
+                <Icon icon={trailingIcon} color={MUTED_COLOR} />
+              </Pressable>
+            ) : (
+              <View
+                testID={trailingIconTestID}
+                accessibilityLabel={trailingIconAccessibilityLabel}
+              >
+                <Icon icon={trailingIcon} color={MUTED_COLOR} />
+              </View>
+            )
+          ) : null}
+        </FieldContainer>
+        {bottomText || counter ? (
+          <View style={{ flexDirection: 'row', gap: 8 }}>
+            <Text
+              style={{
+                flex: 1,
+                fontSize: 12,
+                color: errorText ? errorTint : MUTED_COLOR,
+              }}
+            >
+              {bottomText ?? ''}
+            </Text>
+            {counter ? (
+              <Text style={{ fontSize: 12, color: MUTED_COLOR }}>
+                {counter}
+              </Text>
+            ) : null}
+          </View>
+        ) : null}
+      </View>
+    );
+  }
+);
+
+function FieldButton({
+  label,
+  onPress,
+  children,
+}: {
+  label: string;
+  onPress: () => void;
+  children: React.ReactNode;
+}): React.ReactElement {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      // Keep focus in the input, so a clear button shown only while editing
+      // is still there when the click lands.
+      onMouseDown={(event) => event.preventDefault()}
+      onClick={onPress}
+      style={{
+        padding: '4px 6px',
+        border: 'none',
+        borderRadius: 4,
+        fontFamily: 'inherit',
+        fontSize: 13,
+        color: MUTED_COLOR,
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+      }}
+    >
+      {children}
+    </button>
+  );
+}

package/src/web/components.tsx

@@ -0,0 +1,71 @@
+import { withWebComponent } from './PlatformComponentsProvider';
+import type { WebComponents } from '../webComponents';
+import { Button as DefaultButton } from './Button';
+import { ButtonGroup as DefaultButtonGroup } from './ButtonGroup';
+import { SplitButton as DefaultSplitButton } from './SplitButton';
+import { DatePicker as DefaultDatePicker } from './DatePicker';
+import { DateRangePicker as DefaultDateRangePicker } from './DateRangePicker';
+import { FloatingActionButton as DefaultFloatingActionButton } from './FloatingActionButton';
+import { NavigationRail as DefaultNavigationRail } from './NavigationRail';
+import { SegmentedControl as DefaultSegmentedControl } from './SegmentedControl';
+import { SelectionMenu as DefaultSelectionMenu } from './SelectionMenu';
+import { TabBar as DefaultTabBar } from './TabBar';
+import { TextField as DefaultTextField } from './TextField';
+import {
+  ContextMenu as DefaultContextMenu,
+  FloatingToolbar as DefaultFloatingToolbar,
+  LiquidGlass as DefaultLiquidGlass,
+  LiquidGlassContainer as DefaultLiquidGlassContainer,
+} from './containers';
+
+// Explicit types keep published declarations tied to a resolvable type import.
+export const Button: WebComponents['Button'] = withWebComponent(
+  'Button',
+  DefaultButton
+);
+export const ButtonGroup: WebComponents['ButtonGroup'] = withWebComponent(
+  'ButtonGroup',
+  DefaultButtonGroup
+);
+export const SplitButton: WebComponents['SplitButton'] = withWebComponent(
+  'SplitButton',
+  DefaultSplitButton
+);
+export const DatePicker: WebComponents['DatePicker'] = withWebComponent(
+  'DatePicker',
+  DefaultDatePicker
+);
+export const DateRangePicker: WebComponents['DateRangePicker'] =
+  withWebComponent('DateRangePicker', DefaultDateRangePicker);
+export const FloatingActionButton: WebComponents['FloatingActionButton'] =
+  withWebComponent('FloatingActionButton', DefaultFloatingActionButton);
+export const NavigationRail: WebComponents['NavigationRail'] = withWebComponent(
+  'NavigationRail',
+  DefaultNavigationRail
+);
+export const SegmentedControl: WebComponents['SegmentedControl'] =
+  withWebComponent('SegmentedControl', DefaultSegmentedControl);
+export const SelectionMenu: WebComponents['SelectionMenu'] = withWebComponent(
+  'SelectionMenu',
+  DefaultSelectionMenu
+);
+export const TabBar: WebComponents['TabBar'] = withWebComponent(
+  'TabBar',
+  DefaultTabBar
+);
+export const TextField: WebComponents['TextField'] = withWebComponent(
+  'TextField',
+  DefaultTextField
+);
+export const ContextMenu: WebComponents['ContextMenu'] = withWebComponent(
+  'ContextMenu',
+  DefaultContextMenu
+);
+export const FloatingToolbar: WebComponents['FloatingToolbar'] =
+  withWebComponent('FloatingToolbar', DefaultFloatingToolbar);
+export const LiquidGlass: WebComponents['LiquidGlass'] = withWebComponent(
+  'LiquidGlass',
+  DefaultLiquidGlass
+);
+export const LiquidGlassContainer: WebComponents['LiquidGlassContainer'] =
+  withWebComponent('LiquidGlassContainer', DefaultLiquidGlassContainer);

package/src/web/containers.tsx

@@ -0,0 +1,130 @@
+// web/containers.tsx
+//
+// The components that wrap children: ContextMenu, FloatingToolbar,
+// LiquidGlass and LiquidGlassContainer. They keep their layout on web and
+// render their children.
+import React from 'react';
+import { View } from 'react-native';
+
+import type { ContextMenuProps } from '../ContextMenu';
+import type { FloatingToolbarProps } from '../FloatingToolbar';
+import type { LiquidGlassProps } from '../LiquidGlass';
+import type { LiquidGlassContainerProps } from '../LiquidGlassContainer';
+import { warnOnce } from './shared';
+
+/**
+ * Renders its children without a menu: browsers have no native menu to
+ * attach. Provide a web menu with a `.web.tsx` file in your app.
+ */
+export function ContextMenu(props: ContextMenuProps): React.ReactElement {
+  const {
+    title,
+    actions,
+    disabled,
+    trigger,
+    onPressAction,
+    onMenuOpen,
+    onMenuClose,
+    onPreviewPress,
+    ios,
+    android,
+    children,
+    ...viewProps
+  } = props;
+
+  warnOnce(
+    'ContextMenu',
+    'ContextMenu has no web implementation; its children render without a menu. ' +
+      'See https://jarx-concepts.github.io/react-native-platform-components/guides/web'
+  );
+
+  return <View {...viewProps}>{children}</View>;
+}
+
+/**
+ * A pill-shaped surface that lays out its children in a row or column. It
+ * doesn't follow a linked ScrollView (`scrollViewNativeID`, `hideOnScroll`).
+ */
+export function FloatingToolbar(
+  props: FloatingToolbarProps
+): React.ReactElement {
+  const {
+    orientation = 'horizontal',
+    color,
+    scrollViewNativeID,
+    hideOnScroll,
+    ios,
+    android,
+    children,
+    style,
+    ...viewProps
+  } = props;
+
+  return (
+    <View
+      {...viewProps}
+      style={[
+        {
+          flexDirection: orientation === 'vertical' ? 'column' : 'row',
+          alignItems: 'center',
+          alignSelf: 'flex-start',
+          gap: 4,
+          padding: 8,
+          borderRadius: 32,
+          backgroundColor: color ?? 'rgba(128, 128, 128, 0.16)',
+          // @ts-expect-error: react-native-web style
+          backdropFilter: 'blur(20px)',
+        },
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+/**
+ * A plain view: Liquid Glass is iOS 26 only, so `isLiquidGlassSupported` is
+ * `false` on web, as on Android.
+ */
+export function LiquidGlass(props: LiquidGlassProps): React.ReactElement {
+  const {
+    cornerRadius,
+    cornerStyle,
+    ios,
+    android,
+    children,
+    style,
+    ...viewProps
+  } = props;
+
+  // A capsule is fully rounded; concentric corners use cornerRadius
+  const radius =
+    cornerStyle === 'capsule'
+      ? 9999
+      : typeof cornerStyle === 'number'
+        ? cornerStyle
+        : cornerRadius;
+
+  return (
+    <View
+      {...viewProps}
+      style={[
+        radius ? { borderRadius: radius, overflow: 'hidden' } : null,
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+/** A plain view: glass only merges on iOS 26. */
+export function LiquidGlassContainer(
+  props: LiquidGlassContainerProps
+): React.ReactElement {
+  const { spacing, children, ...viewProps } = props;
+  return <View {...viewProps}>{children}</View>;
+}
+
+export const isLiquidGlassSupported = false;

package/src/web/dateInput.ts

@@ -0,0 +1,137 @@
+// web/dateInput.ts
+//
+// Conversions between `Date` and the value strings of the browser's date and
+// time inputs, in local time.
+import type { DatePickerMode } from '../DatePickerNativeComponent';
+
+/** The `<input type>`s the pickers use. */
+export type DateInputType = 'date' | 'time' | 'datetime-local' | 'month';
+
+/** The `<input type>` for a picker mode. */
+export function inputTypeForMode(
+  mode: DatePickerMode | undefined
+): DateInputType {
+  switch (mode) {
+    case 'time':
+    case 'countDownTimer':
+      return 'time';
+    case 'dateAndTime':
+      return 'datetime-local';
+    case 'yearAndMonth':
+      return 'month';
+    default:
+      return 'date';
+  }
+}
+
+const pad = (n: number, width = 2) => String(n).padStart(width, '0');
+
+/** Formats `date` as the value of an input of `type`; `''` for no date. */
+export function formatInputValue(
+  date: Date | null | undefined,
+  type: DateInputType
+): string {
+  if (!date || !Number.isFinite(date.getTime())) return '';
+  const month = `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}`;
+  const day = `${month}-${pad(date.getDate())}`;
+  const time = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  if (type === 'month') return month;
+  if (type === 'date') return day;
+  if (type === 'time') return time;
+  return `${day}T${time}`;
+}
+
+/**
+ * Parses an input value back into a `Date`. Parts the input doesn't show are
+ * kept from `base` (the time of day for a date input, the day for a time
+ * input); a month input gives the first of the month. Returns `null` for an
+ * empty or invalid value.
+ */
+export function parseInputValue(
+  value: string,
+  type: DateInputType,
+  base: Date | null | undefined
+): Date | null {
+  const hasBase = base && Number.isFinite(base.getTime());
+  const result = hasBase ? new Date(base.getTime()) : new Date();
+  if (!hasBase) result.setHours(0, 0, 0, 0);
+
+  if (type === 'month') {
+    const monthMatch = /^(\d{4,})-(\d{2})$/.exec(value);
+    if (!monthMatch) return null;
+    const year = Number(monthMatch[1]);
+    const month = Number(monthMatch[2]);
+    if (year < 1 || month < 1 || month > 12) return null;
+    result.setFullYear(year, month - 1, 1);
+    return Number.isFinite(result.getTime()) ? result : null;
+  }
+
+  const dayMatch =
+    type === 'date'
+      ? /^(\d{4,})-(\d{2})-(\d{2})$/.exec(value)
+      : /^(\d{4,})-(\d{2})-(\d{2})T\d{2}:\d{2}(?::\d{2})?$/.exec(value);
+  const timeMatch = /(?:^|T)(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(value);
+
+  if (type !== 'time') {
+    if (!dayMatch) return null;
+    const year = Number(dayMatch[1]);
+    const month = Number(dayMatch[2]);
+    const day = Number(dayMatch[3]);
+    if (year < 1 || month < 1 || month > 12 || day < 1 || day > 31) {
+      return null;
+    }
+    result.setFullYear(year, month - 1, day);
+    // Date setters normalize impossible dates (February 30 becomes March 2).
+    if (
+      result.getFullYear() !== year ||
+      result.getMonth() !== month - 1 ||
+      result.getDate() !== day
+    ) {
+      return null;
+    }
+  }
+  if (type !== 'date') {
+    if (!timeMatch) return null;
+    if (type === 'time' && !/^\d{2}:\d{2}(?::\d{2})?$/.test(value)) {
+      return null;
+    }
+    const hours = Number(timeMatch[1]);
+    const minutes = Number(timeMatch[2]);
+    const seconds = Number(timeMatch[3] ?? 0);
+    if (hours > 23 || minutes > 59 || seconds > 59) return null;
+    result.setHours(hours, minutes, seconds, 0);
+  }
+  return Number.isFinite(result.getTime()) ? result : null;
+}
+
+/** Compare only the date/time fields the input displays, like its min/max. */
+function inputValueNumber(date: Date, type: DateInputType): number {
+  if (type === 'month') return date.getFullYear() * 12 + date.getMonth();
+  if (type === 'time') return date.getHours() * 60 + date.getMinutes();
+  const result = new Date(date.getTime());
+  if (type === 'date') result.setHours(0, 0, 0, 0);
+  else result.setSeconds(0, 0);
+  return result.getTime();
+}
+
+/**
+ * Bounds also apply to typed values and the modal's initial selection. HTML
+ * inputs report constraint violations but don't prevent a button callback.
+ */
+export function isWithinInputBounds(
+  date: Date | null | undefined,
+  type: DateInputType,
+  minDate?: Date | null,
+  maxDate?: Date | null
+): date is Date {
+  if (!date || !Number.isFinite(date.getTime())) return false;
+  const value = inputValueNumber(date, type);
+  const min = minDate ? inputValueNumber(minDate, type) : NaN;
+  const max = maxDate ? inputValueNumber(maxDate, type) : NaN;
+  // Time inputs have a periodic domain: 23:00–01:00 spans midnight.
+  if (type === 'time' && min > max) return value >= min || value <= max;
+  return (
+    (!Number.isFinite(min) || value >= min) &&
+    (!Number.isFinite(max) || value <= max)
+  );
+}