@oxy.so/bloom 4.34.1 → 4.35.0

package/src/text-field/TextField.tsx

@@ -26,6 +26,11 @@ import {
   type TextStyleProp,
 } from '../styles';
 import { RiInformationFill } from '../icons/remix/RiInformationFill';
+import { RiEyeLine } from '../icons/remix/RiEyeLine';
+import { RiEyeOffLine } from '../icons/remix/RiEyeOffLine';
+import { GlyphButton } from '../button/GlyphButton';
+import { useMessages } from '../locale/messages';
+import { TEXT_FIELD_MESSAGES } from './messages';
 import { Text } from '../typography';
 import {
   SANS_FONT_FAMILY,
@@ -54,6 +59,7 @@ import type {
   TextFieldInputProps,
   TextFieldLabelProps,
   TextFieldProps,
+  TextFieldRevealLabels,
 } from './types';
 import { useInheritedControl } from '../control-surface';
 import { useFieldMembership } from '../field/membership';
@@ -352,10 +358,19 @@ export function TextFieldInput({
   inputRef,
   style,
   floatingLabel = false,
+  secureTextEntry,
+  revealable = false,
+  revealLabels,
+  locale,
   ...rest
 }: TextFieldInputProps) {
   const theme = useTheme();
   const invalidProp = invalidNew ?? isInvalid;
+  // Hidden until asked. Only a secure field can be revealed; for any other the
+  // prop is inert, so `secureTextEntry` passes through untouched.
+  const [revealed, setRevealed] = useState(false);
+  const canReveal = revealable && secureTextEntry === true;
+  const secure = secureTextEntry === true && !(canReveal && revealed);
   const onValueChange = onValueChangeProp ?? onChangeText;
   // Read directly rather than through `useTextFieldContext`: a missing root is
   // not an error here, it is the branch below.
@@ -401,6 +416,10 @@ export function TextFieldInput({
           inputRef={inputRef}
           onFocus={onFocus}
           onBlur={onBlur}
+          secureTextEntry={secureTextEntry}
+          revealable={revealable}
+          revealLabels={revealLabels}
+          locale={locale}
           {...rest}
         />
       </TextField>
@@ -446,6 +465,15 @@ export function TextFieldInput({
   // at all and this prop is the only name the control has.
   const accessibleName = field?.labelText ?? label;
   const webDisabled = IS_WEB && fieldDisabled ? ({ disabled: true } as Record<string, unknown>) : undefined;
+  const reveal = canReveal ? (
+    <RevealButton
+      revealed={revealed}
+      onToggle={() => setRevealed((current) => !current)}
+      invalid={invalid}
+      labels={revealLabels}
+      locale={locale}
+    />
+  ) : null;
 
   if (floatingLabel) {
     // The ids and the described-by still travel, so the error is announced —
@@ -454,20 +482,24 @@ export function TextFieldInput({
     // alternatives, not layers: use one or the other. `docs/field.mdx` says so
     // where a caller will read it.
     return (
-      <FloatingLabelInput
-        label={accessibleName}
-        value={value}
-        onValueChange={onValueChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        invalid={invalid}
-        refs={refs}
-        style={style}
-        {...rest}
-        {...fieldProps}
-        {...disabledProps}
-        {...webDisabled}
-      />
+      <>
+        <FloatingLabelInput
+          label={accessibleName}
+          value={value}
+          onValueChange={onValueChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          invalid={invalid}
+          refs={refs}
+          style={style}
+          {...rest}
+          {...fieldProps}
+          {...disabledProps}
+          {...webDisabled}
+          secureTextEntry={secure}
+        />
+        {reveal}
+      </>
     );
   }
 
@@ -539,14 +571,99 @@ export function TextFieldInput({
         placeholder={placeholder === null ? undefined : placeholder || label}
         placeholderTextColor={resolvePlaceholderColor(ctx.palette, state)}
         keyboardAppearance={theme.mode === 'light' ? 'light' : 'dark'}
+        secureTextEntry={secure}
         style={flattened}
       />
 
+      {reveal}
+
       <Chrome invalid={invalid} />
     </>
   );
 }
 
+/**
+ * The reveal button's box sits 4px inside the shell's height (28 in the 36px
+ * `md` shell, 24 in the 32px `sm`); its glyph is the 20px icon size, less
+ * where the box would crowd it (18 in 24).
+ */
+function revealGeometry(size: TextFieldSize): { box: number; glyph: number } {
+  const box = TEXT_FIELD_GEOMETRY[size].height - 8;
+  return { box, glyph: Math.min(TEXT_FIELD_ICON_SIZE, box - 6) };
+}
+
+/**
+ * Web: `preventDefault` on mousedown, so a pointer press never takes focus
+ * from the input. The click needs nothing here: react-native-web's
+ * `PressResponder` stops a pressable's click itself, so the shell's own
+ * click-to-focus never pulls a keyboard user off the button
+ * (`TextFieldRevealWeb.test.tsx` pins it).
+ */
+const KEEP_FOCUS_WHERE_IT_IS = IS_WEB
+  ? ({ onMouseDown: (event: { preventDefault: () => void }) => event.preventDefault() } as Record<string, unknown>)
+  : undefined;
+
+/**
+ * The eye / eye-off after a `revealable` secure input. It sits where a trailing
+ * `TextFieldIcon` would, its GLYPH on the icon's 8px gap and the shell's
+ * padding — the round hover wash reaches past both, into the padding.
+ *
+ * Focus stays in the input. On web the mousedown is cancelled, so the input
+ * never blurs (and a caller's `onBlur` validation never runs mid-typing); on
+ * native a tap on a sibling does not blur a `TextInput`, and if something did
+ * (a parent `ScrollView` handling the tap), the input is focused again. A
+ * keyboard user who tabbed to the button keeps focus on the button.
+ *
+ * Its state is its NAME ("Show password" ↔ "Hide password"), so it carries no
+ * `aria-pressed`: a toggle whose label also flips announces its state twice.
+ */
+function RevealButton({
+  revealed,
+  onToggle,
+  invalid,
+  labels,
+  locale,
+}: {
+  revealed: boolean;
+  onToggle: () => void;
+  /** The input's own invalid state, which may be set without the field's. */
+  invalid: boolean;
+  labels?: TextFieldRevealLabels;
+  locale?: string;
+}) {
+  const ctx = useTextFieldContext();
+  const { messages } = useMessages(TEXT_FIELD_MESSAGES, locale);
+  const inputWasFocused = useRef(false);
+  const { box: size, glyph } = revealGeometry(ctx.size);
+  const inset = (size - glyph) / 2;
+  const label = revealed ? (labels?.hide ?? messages.hidePassword) : (labels?.show ?? messages.showPassword);
+
+  return (
+    <View
+      style={[a.z_20, { marginLeft: TEXT_FIELD_TRAILING_GAP - inset, marginRight: -inset }]}
+      onTouchStart={() => {
+        inputWasFocused.current = ctx.inputRef.current?.isFocused() ?? false;
+      }}
+      {...KEEP_FOCUS_WHERE_IT_IS}>
+      <GlyphButton
+        size={size}
+        glyphSize={glyph}
+        icon={revealed ? RiEyeOffLine : RiEyeLine}
+        accessibilityLabel={label}
+        color={resolveIconColor(ctx.palette, { invalid, disabled: ctx.disabled })}
+        hoverColor={ctx.palette.text}
+        disabled={ctx.disabled}
+        onPress={() => {
+          onToggle();
+          const input = ctx.inputRef.current;
+          if (!IS_WEB && inputWasFocused.current && input && !input.isFocused()) input.focus();
+          inputWasFocused.current = false;
+        }}
+      />
+    </View>
+  );
+}
+
 /** Vertical band the floating label travels between rest (centered) and floated (top). */
 const FLOAT_TRAVEL = 11;
 /** Resting label size (matches the input text) vs. floated caption size. */
@@ -722,6 +839,7 @@ export function TextFieldLabel({
 }: TextFieldLabelProps) {
   const theme = useTheme();
   const palette = useTextFieldPalette();
+  const { messages } = useMessages(TEXT_FIELD_MESSAGES);
   return (
     <View
       style={[
@@ -734,7 +852,7 @@ export function TextFieldLabel({
         {children}
       </Text>
       {required ? (
-        <Text variant="body-medium" accessibilityLabel="required" style={{ color: palette.error }}>
+        <Text variant="body-medium" accessibilityLabel={messages.required} style={{ color: palette.error }}>
           *
         </Text>
       ) : null}

package/src/text-field/index.ts

@@ -14,4 +14,5 @@ export type {
   TextFieldHintProps,
   TextFieldIconProps,
   TextFieldSize,
+  TextFieldRevealLabels,
 } from './types';

package/src/text-field/messages.ts

@@ -0,0 +1,36 @@
+import type { MessageCatalog } from '../locale/messages';
+
+/**
+ * Every fixed string the text-field family draws or announces, in each Bloom
+ * language. A caller's `revealLabels` still wins over the reveal pair.
+ */
+export interface TextFieldMessages {
+  /** The reveal button's name while the value is hidden. */
+  showPassword: string;
+  /** The reveal button's name while the value is shown. */
+  hidePassword: string;
+  /** The name of `TextFieldLabel`'s `required` asterisk. */
+  required: string;
+}
+
+export const TEXT_FIELD_MESSAGES: MessageCatalog<TextFieldMessages> = {
+  en: { showPassword: 'Show password', hidePassword: 'Hide password', required: 'required' },
+  es: { showPassword: 'Mostrar contraseña', hidePassword: 'Ocultar contraseña', required: 'obligatorio' },
+  ca: { showPassword: 'Mostra la contrasenya', hidePassword: 'Amaga la contrasenya', required: 'obligatori' },
+  de: { showPassword: 'Passwort anzeigen', hidePassword: 'Passwort verbergen', required: 'erforderlich' },
+  fr: {
+    showPassword: 'Afficher le mot de passe',
+    hidePassword: 'Masquer le mot de passe',
+    required: 'obligatoire',
+  },
+  it: { showPassword: 'Mostra la password', hidePassword: 'Nascondi la password', required: 'obbligatorio' },
+  pt: { showPassword: 'Mostrar senha', hidePassword: 'Ocultar senha', required: 'obrigatório' },
+  ru: { showPassword: 'Показать пароль', hidePassword: 'Скрыть пароль', required: 'обязательно' },
+  tr: { showPassword: 'Şifreyi göster', hidePassword: 'Şifreyi gizle', required: 'zorunlu' },
+  ja: { showPassword: 'パスワードを表示', hidePassword: 'パスワードを非表示', required: '必須' },
+  zh: { showPassword: '显示密码', hidePassword: '隐藏密码', required: '必填' },
+  ar: { showPassword: 'إظهار كلمة المرور', hidePassword: 'إخفاء كلمة المرور', required: 'مطلوب' },
+  hi: { showPassword: 'पासवर्ड दिखाएँ', hidePassword: 'पासवर्ड छिपाएँ', required: 'आवश्यक' },
+  bn: { showPassword: 'পাসওয়ার্ড দেখান', hidePassword: 'পাসওয়ার্ড লুকান', required: 'আবশ্যক' },
+  id: { showPassword: 'Tampilkan kata sandi', hidePassword: 'Sembunyikan kata sandi', required: 'wajib' },
+};

package/src/text-field/types.ts

@@ -60,8 +60,27 @@ export type TextFieldInputProps = Omit<
    * identically. Respects reduced-motion (snaps instead of animating).
    */
   floatingLabel?: boolean;
+  /**
+   * With `secureTextEntry`, draw an eye / eye-off button after the input that
+   * shows and hides what was typed. It is named "Show password" / "Hide
+   * password" in the locale (`docs/locale.mdx`); `revealLabels` overrides
+   * either. Pressing it leaves focus in the input. Ignored without
+   * `secureTextEntry`.
+   */
+  revealable?: boolean;
+  /** Override the reveal button's names, one key at a time. */
+  revealLabels?: TextFieldRevealLabels;
+  /** Locale for the reveal button's names; defaults to the nearest `LocaleProvider`. */
+  locale?: string;
 };
 
+export interface TextFieldRevealLabels {
+  /** The name while the value is hidden. */
+  show?: string;
+  /** The name while the value is shown. */
+  hide?: string;
+}
+
 export type TextFieldLabelProps = React.PropsWithChildren<
   {
     nativeID?: string;