@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/module/components/Input/Input.js

@@ -0,0 +1,587 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useReducedMotion } from "../../hooks/index.js";
+import { createAnimatedValue, fontFor, setNativeValue, useTheme } from "../../theme/index.js";
+import { mergeRefs, triggerHaptic } from "../../utils/index.js";
+import { defaultIcons } from "../AppIcon/defaultIcons.js";
+import { renderSlotIcon } from "../AppIcon/slotIcon.js";
+import { Button } from "../Button/index.js";
+import { FieldBase, FieldErrorGlyph, RequiredMark, RequiredPlaceholder, resolveFieldSize, resolveFieldTextStyle } from "../FieldBase/FieldBase.js";
+import { useFloatingLabel } from "../FieldBase/useFloatingLabel.js";
+
+/**
+ * What kind of field this is. One prop switches the whole behaviour set:
+ * - `'input'` (default): single-line text.
+ * - `'password'`: masked value, eye toggle in the trailing slot, no
+ *   auto-capitalisation or autocorrect.
+ * - `'textarea'`: multi-line, taller box, text anchored to the top. A
+ *   floating label rests on the first line and rises to the top edge like it
+ *   does on a single-line field.
+ */
+
+/** State handed to a `leftIcon` / `rightIcon` render function. */
+
+/** An icon name, `{ name, variant }`, a node, or a render function; see `SlotIcon`. */
+
+/**
+ * A button beside the field box, for a "Verify" / "Apply" / "Look up" action
+ * on what was typed. Drawn with the library Button at the box's own height,
+ * outlined by default; the label stays above the box and the helper or error
+ * below it, not the button.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// FieldBase carries every dimension except `multilineMinHeight` — Input owns
+// the multiline height ramp, so we keep a tiny per-size table for that one key.
+const multilineMinHeightMap = {
+  sm: 72,
+  md: 92,
+  lg: 110
+};
+const Input = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    label,
+    placeholder,
+    value,
+    onChangeText,
+    error,
+    helperText,
+    type = 'input',
+    secureTextEntry = false,
+    showPasswordToggle = false,
+    disabled = false,
+    multiline = false,
+    leftIcon,
+    rightIcon,
+    unit,
+    unitStyle,
+    action,
+    actionStyle,
+    size = 'md',
+    variant: variantProp,
+    labelMode: labelModeProp,
+    required = false,
+    maxLength,
+    showCounter = true,
+    textAlign,
+    format,
+    parse,
+    style,
+    containerStyle,
+    inputStyle,
+    labelStyle,
+    messageStyle,
+    borderRadius: borderRadiusProp,
+    onFocus,
+    onBlur,
+    accessibilityLabel,
+    testID,
+    editable,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const sizeTokens = resolveFieldSize(theme, size);
+  const multilineMinHeight = multilineMinHeightMap[size];
+  // A textarea sets its line height explicitly so FieldBase can centre the
+  // slots on the first line; single-line fields leave the platform default.
+  const textareaLineHeight = Math.round(sizeTokens.fontSize * 1.4);
+
+  // Resolution chain: caller prop → component-specific token
+  // (`components.input.defaultVariant`) → shared field-family token
+  // (`components.field.defaultVariant`) → library default. The middle step lets
+  // brands flip every input-style control (Input, Select, SearchBar, …) in one
+  // place; the per-component slot still wins when a brand needs a different
+  // default for Input specifically.
+  const variant = variantProp ?? theme.components.input?.defaultVariant ?? theme.components.field?.defaultVariant ?? 'outlined';
+  const labelMode = labelModeProp ?? theme.components.input?.defaultLabelMode ?? 'top';
+  const [isFocused, setIsFocused] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  // `type` is the switch; the React Native props and `showPasswordToggle`
+  // still work on their own so a plain `secureTextEntry` field stays masked
+  // without an eye and `multiline` alone still grows the box.
+  const isPassword = type === 'password' || showPasswordToggle || secureTextEntry;
+  const showToggle = type === 'password' || showPasswordToggle;
+  const isTextarea = type === 'textarea' || multiline;
+  // On a single-line field the platform's own line box leaves the glyphs
+  // about a point below the icon's centre (measured: 3px at 2.75x); a
+  // textarea's explicit line box centres them exactly, which reads as
+  // "higher" beside the same icon. This nudge pushes the textarea's text and
+  // resting label down by that same optical amount (1dp at sm/md, 2dp at lg)
+  // so both field types line up with the icon identically.
+  const textareaOpticalNudge = isTextarea ? Math.round(sizeTokens.fontSize * 0.1) : 0;
+  const hasValue = typeof value === 'string' && value.length > 0;
+  const hasError = typeof error === 'string' && error.length > 0;
+  const isEditable = !disabled && editable !== false;
+  const shouldFloat = isFocused || hasValue;
+
+  // The field's own handle on the TextInput, beside the consumer's ref: a
+  // tap anywhere on the box (padding, icon, gap) focuses the input, not
+  // only a tap on its text.
+  const inputRef = useRef(null);
+  const setInputRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+  const focusInput = useCallback(() => {
+    if (isEditable) {
+      inputRef.current?.focus();
+    }
+  }, [isEditable]);
+  // Floating label only when explicitly opted into via labelMode='float';
+  // labelMode='top' keeps the static label above the field. A textarea floats
+  // too: its label rests on the first line (the text is top-anchored) and
+  // rises to the top edge exactly like a single-line field's.
+  const showFloatingLabel = Boolean(label) && labelMode === 'float';
+
+  // Animations local to Input: floating label, shake, helper/error fade.
+  // Border + fill animations now live inside FieldBase.
+  const shakeAnim = useRef(createAnimatedValue(0)).current;
+  const messageAnim = useRef(createAnimatedValue(hasError || helperText ? 1 : 0)).current;
+
+  // Helper / error fade
+  useEffect(() => {
+    const anim = Animated.timing(messageAnim, {
+      toValue: hasError || helperText ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [hasError, helperText, messageAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
+
+  // Error shake — off by default; consumers opt in via
+  // theme.components.input.shakeOnError. The haptic ships with the shake.
+  const reduceMotion = useReducedMotion();
+  const shakeOnError = theme.components.input?.shakeOnError ?? false;
+  const prevErrorRef = useRef(hasError);
+  useEffect(() => {
+    // Equivalent-mutant note: removing this `return` cannot change behaviour.
+    // The line above it always sets `prevErrorRef.current = hasError` first,
+    // so falling through to the check below becomes `hasError &&
+    // !prevErrorRef.current` === `hasError && !hasError`, which is always
+    // false — the shake/haptic branch can never fire, and the redundant
+    // `prevErrorRef.current = hasError` reassignment at the bottom is a no-op.
+    if (!shakeOnError) {
+      prevErrorRef.current = hasError;
+      return;
+    }
+    let anim;
+    if (hasError && !prevErrorRef.current) {
+      // Reduce Motion: keep the error haptic, skip the shake.
+      if (!reduceMotion) {
+        setNativeValue(shakeAnim, 0);
+        anim = Animated.sequence([Animated.timing(shakeAnim, {
+          toValue: 1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: -1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: 1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: -1,
+          duration: 50,
+          useNativeDriver: true
+        }), Animated.timing(shakeAnim, {
+          toValue: 0,
+          duration: 100,
+          useNativeDriver: true
+        })]);
+        anim.start();
+      }
+      triggerHaptic('notificationError');
+    }
+    prevErrorRef.current = hasError;
+    return () => anim?.stop();
+  }, [hasError, shakeAnim, shakeOnError, reduceMotion]);
+  const handleFocus = useCallback(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = useCallback(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const togglePasswordVisibility = useCallback(() => {
+    triggerHaptic('selection');
+    setIsPasswordVisible(prev => !prev);
+  }, []);
+
+  // Bridge legacy Input fill-colour API (theme.components.input.fillColors[variant])
+  // onto FieldBase's FieldVariantTokens shape. Keeps consumer overrides working.
+  const fillOverrides = useMemo(() => {
+    const legacy = theme.components.input?.fillColors?.[variant];
+    if (!legacy) {
+      return undefined;
+    }
+    const overrides = {};
+    if (legacy.idleEmpty !== undefined) {
+      overrides.backgroundIdleEmpty = legacy.idleEmpty;
+    }
+    if (legacy.idleFilled !== undefined) {
+      overrides.backgroundIdleFilled = legacy.idleFilled;
+    }
+    if (legacy.focus !== undefined) {
+      overrides.backgroundFocused = legacy.focus;
+    }
+    if (legacy.error !== undefined) {
+      overrides.backgroundError = legacy.error;
+    }
+    if (legacy.disabled !== undefined) {
+      overrides.backgroundDisabled = legacy.disabled;
+    }
+    return Object.keys(overrides).length > 0 ? overrides : undefined;
+  }, [theme.components.input?.fillColors, variant]);
+
+  // Selection / caret / handle colour is the field palette's caret blue: the
+  // spec draws it a step stronger than the focus ring, so it is its own token
+  // rather than a read-back of the focused border.
+  const selectionColor = theme.colors.field.caret;
+  const borderRadiusOverride = borderRadiusProp ?? theme.components.input?.borderRadius;
+
+  // Floating label styles.
+  // The floated label must land straddling the top border for EVERY size, not
+  // just `lg`. The resting label sits at `top: paddingVertical`; RN scales a
+  // view around its own centre, so the floated centre = restingTop + labelH/2 +
+  // translateY. Taking labelH ≈ fontSize, translateY = -(paddingVertical +
+  // fontSize / 2) puts the floated centre on the box's top edge regardless of
+  // size. (A former constant -22 was tuned only for `lg`, where 14 + 16/2 = 22,
+  // and left `sm`/`md` floating above the border because their padding is
+  // smaller.)
+  // The floating label (position, notch, animation) is the field family's shared hook below.
+  // Single source of truth for label colour — used by BOTH static-top and
+  // floating modes. The spec keeps the label on its resting ink through focus
+  // AND error (the error state speaks through the ring and the message row,
+  // not the label); consumers can still opt into a focus tint via
+  // theme.components.input.tintLabelOnFocus.
+  const tintLabelOnFocus = theme.components.input?.tintLabelOnFocus ?? false;
+  const labelColor = isFocused && tintLabelOnFocus ? theme.colors.field.borderFocused : theme.colors.field.label;
+  const shakeTranslateX = shakeAnim.interpolate({
+    inputRange: [-1, 0, 1],
+    outputRange: [-6, 0, 6]
+  });
+
+  // The floating label tracks the value's horizontal alignment so
+  // `textAlign="right"` (amount fields) keeps label and text together.
+  // Centre uses `alignSelf` — Yoga aligns absolutely-positioned children by
+  // alignment props when the horizontal insets are left unset.
+  const hasTrailingSlot = Boolean(rightIcon) || Boolean(unit) || showToggle;
+  const isUnderline = variant === 'underline';
+  // Where the text starts when a leading icon is set: FieldBase lays out
+  // icon, hairline divider and content with its default gap between each.
+  const leadingOffset = leftIcon ? sizeTokens.iconSize + theme.spacing.md + 1 + theme.spacing.md : 0;
+  const floating = useFloatingLabel({
+    label,
+    enabled: showFloatingLabel,
+    floated: shouldFloat,
+    required,
+    variant,
+    sizeTokens,
+    leadingOffset,
+    trailingOffset: hasTrailingSlot ? sizeTokens.iconSize + theme.spacing.sm : 0,
+    textAlign,
+    paddingLeft: isUnderline ? 0 : sizeTokens.paddingHorizontal,
+    lineHeight: isTextarea ? textareaLineHeight : undefined,
+    restNudge: textareaOpticalNudge,
+    floatTrim: isTextarea ? 2 : 0,
+    color: labelColor,
+    style: labelStyle
+  });
+  const fieldText = resolveFieldTextStyle(theme, {
+    disabled
+  });
+  const inputTextColor = fieldText.color;
+  const placeholderTextColor = fieldText.placeholderColor;
+  // A required field with no label shows its marker after the placeholder
+  // ("Email *") and drops it with the placeholder once there is a value; the
+  // native placeholder is suppressed while the field draws its own.
+  const requiredPlaceholder = required && !label && !hasValue && typeof placeholder === 'string' && placeholder.length > 0;
+  const messageText = hasError ? error : helperText;
+  const counterText = showCounter && typeof maxLength === 'number' && typeof value === 'string' ? `${value.length} / ${maxLength}` : null;
+  const messageColor = hasError ? theme.colors.field.message : theme.colors.text.secondary;
+  const a11yLabel = accessibilityLabel ?? label ?? placeholder;
+
+  // Slot icons follow the field palette: grey at rest, dark while focused,
+  // dimmed while disabled (the spec's phone and eye glyphs across the five
+  // columns). Render-function icons receive the colour; plain nodes are the
+  // consumer's own.
+  const fieldPalette = theme.colors.field;
+  const iconColor = disabled ? fieldPalette.iconDisabled : isFocused ? fieldPalette.iconFocused : fieldPalette.icon;
+  const slotState = {
+    focused: isFocused,
+    disabled,
+    error: hasError,
+    color: iconColor,
+    size: sizeTokens.iconSize
+  };
+  const renderSlot = icon => renderSlotIcon(icon, slotState);
+  const trailing = (() => {
+    if (showToggle) {
+      const renderer = (isPasswordVisible ? theme.icons?.eyeOff : theme.icons?.eye) ?? (isPasswordVisible ? defaultIcons.eyeOff : defaultIcons.eye);
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: togglePasswordVisibility,
+        disabled: !isEditable,
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: isPasswordVisible ? 'Hide password' : 'Show password',
+        children: renderer({
+          size: sizeTokens.iconSize,
+          color: iconColor
+        })
+      });
+    }
+    const unitEl = unit ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.unit, {
+        fontSize: sizeTokens.fontSize,
+        color: placeholderTextColor
+      }, unitStyle],
+      children: unit
+    }) : null;
+    const iconEl = rightIcon ? /*#__PURE__*/_jsx(View, {
+      children: renderSlot(rightIcon)
+    }) : null;
+    if (unitEl && iconEl) {
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.trailingRow,
+        children: [unitEl, iconEl]
+      });
+    }
+    return unitEl ?? iconEl;
+  })();
+  const leading = leftIcon ? /*#__PURE__*/_jsx(View, {
+    children: renderSlot(leftIcon)
+  }) : null;
+
+  // The action button takes the field's own minHeight: the Button size
+  // ladder runs a couple of points shorter than the field ladder at every
+  // size, and the two must sit flush. A textarea's button hugs the top
+  // rather than stretching over the whole box.
+  const actionNode = action ? /*#__PURE__*/_jsx(Button, {
+    variant: action.variant ?? 'outline',
+    tone: action.tone ?? 'primary',
+    size: size,
+    title: action.label,
+    leftIcon: action.icon,
+    loading: action.loading,
+    disabled: disabled || action.disabled,
+    onPress: action.onPress,
+    pressAnimation: false,
+    testID: action.testID,
+    style: [styles.action, {
+      minHeight: sizeTokens.minHeight,
+      alignSelf: isTextarea ? 'flex-start' : 'stretch'
+    }, actionStyle]
+  }) : null;
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [styles.container, {
+      transform: [{
+        translateX: shakeTranslateX
+      }]
+    }, style],
+    children: [label && !showFloatingLabel ? /*#__PURE__*/_jsxs(Text, {
+      style: [styles.staticLabel, {
+        color: labelColor,
+        fontSize: sizeTokens.labelFontSize,
+        ...fontFor(theme, 'semibold'),
+        marginBottom: sizeTokens.labelGap
+      }, labelStyle],
+      children: [label, required ? /*#__PURE__*/_jsx(RequiredMark, {}) : null]
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: [styles.fieldRow, {
+        columnGap: theme.spacing.sm,
+        alignItems: isTextarea ? 'flex-start' : 'stretch'
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.fieldWrapper,
+        children: [/*#__PURE__*/_jsx(FieldBase, {
+          size: size,
+          variant: variant,
+          focused: isFocused,
+          disabled: disabled,
+          error: hasError,
+          filled: hasValue,
+          minHeight: isTextarea ? multilineMinHeight : undefined,
+          borderRadius: borderRadiusOverride,
+          fillOverrides: fillOverrides,
+          leading: leading,
+          leadingDivider: leftIcon != null,
+          paddingLeft: isUnderline ? 0 : undefined,
+          trailing: trailing,
+          slotAlign: isTextarea ? 'top' : 'center',
+          slotLineHeight: isTextarea ? textareaLineHeight : undefined,
+          topNotch: floating.topNotch,
+          onPress: focusInput,
+          pressFeedback: false,
+          style: containerStyle,
+          children: /*#__PURE__*/_jsxs(View, {
+            style: styles.inputWrap,
+            children: [/*#__PURE__*/_jsx(TextInput, {
+              ref: setInputRef,
+              style: [styles.input, {
+                color: inputTextColor,
+                fontSize: sizeTokens.fontSize,
+                ...fieldText.weightStyle,
+                // The spec's underline row starts its text flush with the rule.
+                paddingLeft: isUnderline ? 0 : undefined,
+                minHeight: isTextarea ? multilineMinHeight - sizeTokens.paddingVertical * 2 : undefined,
+                lineHeight: isTextarea ? textareaLineHeight : undefined,
+                paddingTop: isTextarea ? textareaOpticalNudge : undefined,
+                textAlignVertical: isTextarea ? 'top' : 'center'
+              }, inputStyle],
+              textAlign: textAlign,
+              placeholder: showFloatingLabel && !shouldFloat ? undefined : requiredPlaceholder ? undefined : placeholder,
+              placeholderTextColor: placeholderTextColor,
+              value: format && value != null ? format(value) : value,
+              onChangeText: text => {
+                if (!onChangeText) {
+                  return;
+                }
+                onChangeText(parse ? parse(text) : text);
+              },
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              editable: isEditable,
+              secureTextEntry: isPassword && !isPasswordVisible,
+              multiline: isTextarea,
+              autoCapitalize: isPassword ? 'none' : undefined,
+              autoCorrect: isPassword ? false : undefined,
+              maxLength: maxLength,
+              selectionColor: selectionColor,
+              accessibilityLabel: a11yLabel,
+              accessibilityState: {
+                disabled
+              },
+              testID: testID,
+              ...rest
+            }), requiredPlaceholder ? /*#__PURE__*/_jsx(RequiredPlaceholder, {
+              text: placeholder,
+              color: placeholderTextColor,
+              fontSize: sizeTokens.fontSize,
+              weightStyle: fieldText.weightStyle,
+              align: isTextarea ? 'top' : 'center',
+              paddingTop: isTextarea ? textareaOpticalNudge : undefined,
+              textAlign: textAlign
+            }) : null]
+          })
+        }), floating.node]
+      }), actionNode]
+    }), messageText || counterText ?
+    /*#__PURE__*/
+    // One footer row under the box: the helper / error message on the
+    // left, the character counter on the right, both at the message
+    // size and the same `messageGap` from the box. The counter used to
+    // render on its own line BELOW the message, so it sat a whole line
+    // lower than the helper text.
+    _jsxs(View, {
+      style: [styles.footerRow, {
+        marginTop: sizeTokens.messageGap
+      }],
+      children: [messageText ? /*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.messageRow, {
+          columnGap: theme.spacing.xs + 2,
+          opacity: messageAnim
+        }],
+        accessibilityLiveRegion: hasError ? 'polite' : 'none',
+        children: [hasError ? /*#__PURE__*/_jsx(FieldErrorGlyph, {
+          size: sizeTokens.messageFontSize,
+          color: messageColor
+        }) : null, /*#__PURE__*/_jsx(Text, {
+          style: [styles.messageText, {
+            color: messageColor,
+            fontSize: sizeTokens.messageFontSize,
+            ...fontFor(theme, 'normal')
+          }, messageStyle],
+          children: messageText
+        })]
+      }) : /*#__PURE__*/_jsx(View, {
+        style: styles.footerSpacer
+      }), counterText ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.counterText, {
+          color: theme.colors.text.tertiary,
+          fontSize: sizeTokens.messageFontSize,
+          ...fontFor(theme, 'normal')
+        }],
+        children: counterText
+      }) : null]
+    }) : null]
+  });
+});
+Input.displayName = 'Input';
+const buildStyles = _theme => StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  staticLabel: {
+    includeFontPadding: false
+  },
+  // Wraps FieldBase + the absolutely-positioned floating label so the label
+  // can sit over the field's top border without being clipped.
+  // The box and, when set, the action button side by side.
+  fieldRow: {
+    flexDirection: 'row'
+  },
+  // Takes the row; with an action button beside it, the rest of the row.
+  fieldWrapper: {
+    position: 'relative',
+    overflow: 'visible',
+    flex: 1
+  },
+  action: {
+    flexShrink: 0
+  },
+  input: {
+    flex: 1,
+    padding: 0,
+    margin: 0,
+    includeFontPadding: false
+  },
+  // Hosts the text input and, for a required field with no label, the
+  // placeholder-with-marker overlay drawn over it while the field is empty.
+  inputWrap: {
+    flex: 1,
+    alignSelf: 'stretch',
+    justifyContent: 'center'
+  },
+  unit: {
+    includeFontPadding: false
+  },
+  // Unit and trailing icon side by side, the same gap FieldBase leaves
+  // between its own slots.
+  trailingRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    columnGap: 8
+  },
+  // Footer under the box: message (or a spacer) on the left, counter on the
+  // right, one line, one `messageGap` from the box.
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    columnGap: 8
+  },
+  footerSpacer: {
+    flex: 1
+  },
+  messageRow: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  messageText: {
+    flexShrink: 1,
+    includeFontPadding: false
+  },
+  counterText: {
+    flexShrink: 0,
+    includeFontPadding: false
+  }
+});
+export { Input };
+export default Input;
+//# sourceMappingURL=Input.js.map

package/lib/module/components/Input/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, Input } from "./Input.js";
+//# sourceMappingURL=index.js.map