@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/OTPInput/OTPInput.js

@@ -1,445 +1 @@
-"use strict";
-
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useControllableState, useReducedMotion } from "../../hooks/index.js";
-import { createAnimatedValue, fontFor, setNativeValue, useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { FieldBase } from "../FieldBase/FieldBase.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const sizeMap = {
-  sm: {
-    cell: 36,
-    fontSize: 16,
-    borderRadius: 8,
-    gap: 8
-  },
-  md: {
-    cell: 48,
-    fontSize: 20,
-    borderRadius: 10,
-    gap: 10
-  },
-  lg: {
-    cell: 56,
-    fontSize: 24,
-    borderRadius: 12,
-    gap: 12
-  }
-};
-const sanitizeChar = (input, kind) => {
-  if (!input) {
-    return '';
-  }
-  if (kind === 'number-pad') {
-    return input.replace(/\D/g, '');
-  }
-  return input;
-};
-const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    value,
-    defaultValue,
-    onChange,
-    onComplete,
-    length = 6,
-    keyboardType = 'number-pad',
-    autoFocus = false,
-    disabled = false,
-    error,
-    size = 'md',
-    secure = false,
-    haptic,
-    accessibilityLabel,
-    style,
-    cellStyle,
-    textStyle,
-    testID
-  } = props;
-  const [current, setCurrent] = useControllableState({
-    value,
-    defaultValue: defaultValue ?? '',
-    onChange
-  });
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = {
-    ...sizeMap[size],
-    ...(theme.components.otpInput?.[size] ?? {})
-  };
-  const inputsRef = useRef([]);
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-  const previousErrorRef = useRef(null);
-  const shake = useRef(createAnimatedValue(0)).current;
-  const underlinesMapRef = useRef(new Map());
-  const underlines = useMemo(() => {
-    const map = underlinesMapRef.current;
-    const out = [];
-    for (let i = 0; i < length; i += 1) {
-      let v = map.get(i);
-      if (!v) {
-        v = new Animated.Value(0);
-        map.set(i, v);
-      }
-      out.push(v);
-    }
-    // Trim stale entries beyond current length.
-    for (const key of Array.from(map.keys())) {
-      if (key >= length) {
-        map.delete(key);
-      }
-    }
-    return out;
-  }, [length]);
-  const previousFocusedIndexRef = useRef(-1);
-  const shakeOnError = theme.components.otpInput?.shakeOnError ?? false;
-  const reduceMotion = useReducedMotion();
-  const hasError = Boolean(error);
-  const errorMessage = typeof error === 'string' ? error : undefined;
-
-  // Shake on transition from no-error -> error. Skip on first mount even if
-  // error is initially true — there's no transition to animate.
-  useEffect(() => {
-    const isFirstRun = previousErrorRef.current === null;
-    let anim;
-    if (!isFirstRun && hasError && !previousErrorRef.current) {
-      if (haptic !== false) {
-        triggerHaptic('notificationError');
-      }
-      if (shakeOnError && !reduceMotion) {
-        setNativeValue(shake, 0);
-        anim = Animated.sequence([Animated.timing(shake, {
-          toValue: 1,
-          duration: theme.motion.duration.instant,
-          easing: Easing.linear,
-          useNativeDriver: true
-        }), Animated.timing(shake, {
-          toValue: -1,
-          duration: theme.motion.duration.instant,
-          easing: Easing.linear,
-          useNativeDriver: true
-        }), Animated.timing(shake, {
-          toValue: 1,
-          duration: theme.motion.duration.instant,
-          easing: Easing.linear,
-          useNativeDriver: true
-        }), Animated.timing(shake, {
-          toValue: 0,
-          duration: theme.motion.duration.instant,
-          easing: Easing.linear,
-          useNativeDriver: true
-        })]);
-        anim.start();
-      }
-    }
-    previousErrorRef.current = hasError;
-    return () => anim?.stop();
-  }, [hasError, shake, shakeOnError, haptic, reduceMotion, theme.motion.duration.instant]);
-
-  // Animate underline opacity for the focused cell. Skip on first mount
-  // (no prior focus state) — values are already at 0 and there's nothing to animate.
-  useEffect(() => {
-    const previous = previousFocusedIndexRef.current;
-    previousFocusedIndexRef.current = focusedIndex;
-    if (previous === focusedIndex) {
-      return;
-    }
-    // Equivalent-mutant note: this branch is unreachable, so removing it
-    // cannot change behaviour. Reaching here already proves
-    // `previous !== focusedIndex` (the check above returned otherwise), so
-    // `previous === -1 && focusedIndex === -1` — which requires them equal —
-    // can never be true.
-    if (previous === -1 && focusedIndex === -1) {
-      return;
-    }
-    const anims = [];
-    underlines.forEach((anim, idx) => {
-      const target = idx === focusedIndex ? 1 : 0;
-      // Only animate the cells whose target changed.
-      if (idx !== focusedIndex && idx !== previous) {
-        return;
-      }
-      const animation = Animated.timing(anim, {
-        toValue: target,
-        duration: theme.motion.duration.fast,
-        easing: Easing.bezier(...theme.motion.easing.standard),
-        useNativeDriver: true
-      });
-      animation.start();
-      anims.push(animation);
-    });
-    return () => anims.forEach(a => a.stop());
-  }, [focusedIndex, underlines, theme]);
-  const focusCell = useCallback(index => {
-    const target = inputsRef.current[index];
-    if (target) {
-      target.focus();
-    }
-  }, []);
-  useImperativeHandle(ref, () => ({
-    focus: () => focusCell(0),
-    blur: () => {
-      const current = inputsRef.current[focusedIndex >= 0 ? focusedIndex : 0];
-      current?.blur();
-    },
-    clear: () => {
-      setCurrent('');
-      focusCell(0);
-    }
-  }), [focusCell, focusedIndex, setCurrent]);
-  useEffect(() => {
-    if (autoFocus && !disabled) {
-      // Defer one frame so the inputs are mounted.
-      const timer = setTimeout(() => focusCell(0), 0);
-      return () => clearTimeout(timer);
-    }
-    return undefined;
-  }, [autoFocus, disabled, focusCell]);
-  const cells = useMemo(() => {
-    const arr = new Array(length).fill('');
-    for (let i = 0; i < Math.min(current.length, length); i += 1) {
-      arr[i] = current[i] ?? '';
-    }
-    return arr;
-  }, [current, length]);
-  const updateValue = useCallback(next => {
-    const trimmed = next.slice(0, length);
-    if (trimmed === current) {
-      return;
-    }
-    setCurrent(trimmed);
-    if (trimmed.length === length && onComplete) {
-      onComplete(trimmed);
-    }
-  }, [length, setCurrent, onComplete, current]);
-  const handleChangeText = useCallback((index, raw) => {
-    // Strip the ZWSP placeholder (used so iOS fires onKeyPress/Backspace on otherwise-empty cells).
-    const stripped = raw.replace(/\u200B/g, '');
-    const sanitized = sanitizeChar(stripped, keyboardType);
-    if (!sanitized) {
-      // Cell was cleared (delete / cut). Clear this cell and step focus back.
-      const chars = cells.slice();
-      const wasFilled = (chars[index] ?? '').length > 0;
-      chars[index] = '';
-      updateValue(chars.join('').slice(0, length));
-      if (!wasFilled && index > 0) {
-        // Empty cell + backspace → also clear and focus the previous cell.
-        const prev = cells.slice();
-        prev[index - 1] = '';
-        updateValue(prev.join(''));
-        focusCell(index - 1);
-      }
-      return;
-    }
-
-    // Fill cells from current index onward (handles paste of multi-char text).
-    // For single-character typing, this overwrites the current cell and advances.
-    const chars = cells.slice();
-    let writeIndex = index;
-    for (let i = 0; i < sanitized.length && writeIndex < length; i += 1) {
-      chars[writeIndex] = sanitized[i] ?? '';
-      writeIndex += 1;
-    }
-    const next = chars.join('').slice(0, length);
-    const previousLength = current.length;
-    updateValue(next);
-    if (next.length !== previousLength) {
-      const h = resolveHaptic(haptic, 'selection');
-      if (h) {
-        triggerHaptic(h);
-      }
-    }
-
-    // Move focus to the next empty cell or last cell.
-    const nextFocus = Math.min(writeIndex, length - 1);
-    if (writeIndex >= length) {
-      inputsRef.current[length - 1]?.blur();
-    } else {
-      focusCell(nextFocus);
-    }
-  }, [cells, focusCell, keyboardType, length, haptic, updateValue, current]);
-  const handleKeyPress = useCallback((index, e) => {
-    const key = e.nativeEvent.key;
-    if (key !== 'Backspace') {
-      return;
-    }
-    // Backspace on a non-empty cell — clear it. Backspace on an empty cell —
-    // step back and clear the previous cell. handleChangeText also covers the
-    // empty-cell case via the ZWSP placeholder, so this branch only matters
-    // when the platform fires onKeyPress without firing onChangeText.
-    const current = cells[index] ?? '';
-    if (current.length === 0) {
-      if (index > 0) {
-        const chars = cells.slice();
-        chars[index - 1] = '';
-        updateValue(chars.join(''));
-        focusCell(index - 1);
-      }
-    } else {
-      const chars = cells.slice();
-      chars[index] = '';
-      updateValue(chars.join(''));
-    }
-  }, [cells, focusCell, updateValue]);
-  const handleFocus = useCallback(index => {
-    setFocusedIndex(index);
-  }, []);
-  const handleBlur = useCallback(() => {
-    setFocusedIndex(-1);
-  }, []);
-  const handleContainerPress = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-    // Focus the first empty cell, else the last cell.
-    const firstEmpty = cells.findIndex(c => c === '');
-    focusCell(firstEmpty === -1 ? length - 1 : firstEmpty);
-  }, [cells, disabled, focusCell, length]);
-  const accessibleLabel = accessibilityLabel ?? `Enter ${length}-digit code`;
-  const translateX = shake.interpolate({
-    inputRange: [-1, 1],
-    outputRange: [-6, 6]
-  });
-  return /*#__PURE__*/_jsxs(View, {
-    style: style,
-    accessible: true,
-    accessibilityRole: "none",
-    accessibilityLabel: accessibleLabel,
-    accessibilityValue: {
-      text: value
-    },
-    accessibilityState: {
-      disabled
-    },
-    testID: testID,
-    children: [/*#__PURE__*/_jsx(Pressable, {
-      onPress: handleContainerPress,
-      disabled: disabled,
-      accessible: false,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.row, {
-          columnGap: sizeStyles.gap,
-          transform: [{
-            translateX
-          }]
-        }],
-        children: cells.map((char, index) => {
-          const isFocused = focusedIndex === index;
-          const isFilled = char.length > 0;
-          const underlineColor = hasError ? theme.colors.border.error : theme.colors.border.focus;
-          const underlineOpacity = underlines[index];
-          if (!underlineOpacity) {
-            return null;
-          }
-          const display = secure && isFilled ? '●' : char;
-          return /*#__PURE__*/_jsxs(View, {
-            style: styles.cellWrapper,
-            children: [/*#__PURE__*/_jsxs(FieldBase, {
-              size: size,
-              width: sizeStyles.cell,
-              height: sizeStyles.cell,
-              borderRadius: sizeStyles.borderRadius,
-              borderWidth: 1.5,
-              focused: isFocused,
-              error: hasError,
-              filled: isFilled,
-              disabled: disabled,
-              paddingHorizontal: 0,
-              paddingVertical: 0,
-              gap: 0,
-              style: cellStyle,
-              children: [/*#__PURE__*/_jsx(TextInput, {
-                ref: node => {
-                  inputsRef.current[index] = node;
-                }
-                // Always render at least the ZWSP placeholder so iOS keeps
-                // firing onChangeText/onKeyPress for Backspace on empty cells.
-                ,
-                value: (secure && isFilled ? '' : char) || '\u200B',
-                onChangeText: t => handleChangeText(index, t),
-                onKeyPress: e => handleKeyPress(index, e),
-                onFocus: () => handleFocus(index),
-                onBlur: handleBlur,
-                keyboardType: keyboardType,
-                editable: !disabled,
-                selectTextOnFocus: true,
-                caretHidden: isFilled
-                // Only the first cell accepts paste-like multi-char input
-                // (e.g., when SMS autofill or clipboard delivers the full code);
-                // every other cell is single-char so typing always overwrites.
-                ,
-                maxLength: index === 0 ? length : 2,
-                textContentType: index === 0 ? 'oneTimeCode' : 'none',
-                autoComplete: index === 0 ? 'sms-otp' : 'off',
-                importantForAutofill: index === 0 ? 'yes' : 'no',
-                style: [styles.input, {
-                  fontSize: sizeStyles.fontSize,
-                  color: theme.colors.text.primary,
-                  ...fontFor(theme, 'semibold')
-                }, textStyle]
-              }), secure && isFilled ? /*#__PURE__*/_jsx(View, {
-                pointerEvents: "none",
-                style: styles.maskOverlay,
-                children: /*#__PURE__*/_jsx(Text, {
-                  style: [{
-                    fontSize: sizeStyles.fontSize,
-                    color: theme.colors.text.primary,
-                    ...fontFor(theme, 'semibold')
-                  }, textStyle],
-                  children: display
-                })
-              }) : null]
-            }), /*#__PURE__*/_jsx(Animated.View, {
-              style: [styles.underline, {
-                backgroundColor: underlineColor,
-                opacity: underlineOpacity
-              }]
-            })]
-          }, `otp-cell-${index}`);
-        })
-      })
-    }), errorMessage ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.errorText, {
-        color: theme.colors.error,
-        fontSize: theme.typography.fontSize.sm
-      }],
-      accessibilityLiveRegion: "polite",
-      children: errorMessage
-    }) : null]
-  });
-});
-OTPInput.displayName = 'OTPInput';
-const buildStyles = _theme => StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  cellWrapper: {
-    alignItems: 'center'
-  },
-  input: {
-    width: '100%',
-    height: '100%',
-    textAlign: 'center',
-    padding: 0
-  },
-  maskOverlay: {
-    ...StyleSheet.absoluteFill,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  underline: {
-    marginTop: 4,
-    height: 2,
-    width: '60%',
-    borderRadius: 1,
-    ...smoothCorners
-  },
-  errorText: {
-    marginTop: 6
-  }
-});
-export { OTPInput };
-export default OTPInput;
-//# sourceMappingURL=OTPInput.js.map
+"use strict";import{forwardRef,useCallback,useEffect,useImperativeHandle,useMemo,useRef,useState}from"react";import{Animated,Easing,Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableState,useReducedMotion}from"../../hooks/index.js";import{createAnimatedValue,fontFor,setNativeValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{FieldBase}from"../FieldBase/FieldBase.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const sizeMap={sm:{cell:36,fontSize:16,borderRadius:8,gap:8},md:{cell:48,fontSize:20,borderRadius:10,gap:10},lg:{cell:56,fontSize:24,borderRadius:12,gap:12}},sanitizeChar=(e,t)=>e?"number-pad"===t?e.replace(/\D/g,""):e:"",OTPInput=forwardRef((e,t)=>{const{value:n,defaultValue:r,onChange:i,onComplete:s,length:o=6,keyboardType:a="number-pad",autoFocus:l=!1,autoFocusDelay:c=0,disabled:u=!1,error:d,size:m="md",secure:p=!1,haptic:f,accessibilityLabel:g,style:h,cellStyle:b,textStyle:y,testID:x}=e,[v,j]=useControllableState({value:n,defaultValue:r??"",onChange:i}),S=useTheme(),T=useMemo(()=>buildStyles(S),[S]),C={...sizeMap[m],...S.components.otpInput?.[m]??{}},R=useRef([]),[V,k]=useState(-1),w=useRef(null),z=useRef(createAnimatedValue(0)).current,E=useRef(new Map),I=useMemo(()=>{const e=E.current,t=[];for(let n=0;n<o;n+=1){let r=e.get(n);r||(r=new Animated.Value(0),e.set(n,r)),t.push(r)}for(const t of Array.from(e.keys()))t>=o&&e.delete(t);return t},[o]),A=useRef(-1),F=S.components.otpInput?.shakeOnError??!1,_=useReducedMotion(),H=Boolean(d),M="string"==typeof d?d:void 0;useEffect(()=>{let e;return null===w.current||!H||w.current||(!1!==f&&triggerHaptic("notificationError"),F&&!_&&(setNativeValue(z,0),e=Animated.sequence([Animated.timing(z,{toValue:1,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(z,{toValue:-1,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(z,{toValue:1,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0}),Animated.timing(z,{toValue:0,duration:S.motion.duration.instant,easing:Easing.linear,useNativeDriver:!0})]),e.start())),w.current=H,()=>e?.stop()},[H,z,F,f,_,S.motion.duration.instant]),useEffect(()=>{const e=A.current;if(A.current=V,e===V)return;if(-1===e&&-1===V)return;const t=[];return I.forEach((n,r)=>{const i=r===V?1:0;if(r!==V&&r!==e)return;const s=Animated.timing(n,{toValue:i,duration:S.motion.duration.fast,easing:Easing.bezier(...S.motion.easing.standard),useNativeDriver:!0});s.start(),t.push(s)}),()=>t.forEach(e=>e.stop())},[V,I,S]);const D=useCallback(e=>{const t=R.current[e];t&&t.focus()},[]);useImperativeHandle(t,()=>({focus:()=>D(0),blur:()=>{const e=R.current[V>=0?V:0];e?.blur()},clear:()=>{j(""),D(0)}}),[D,V,j]),useEffect(()=>{if(l&&!u){const e=setTimeout(()=>D(0),c);return()=>clearTimeout(e)}},[l,c,u,D]);const O=useMemo(()=>{const e=new Array(o).fill("");for(let t=0;t<Math.min(v.length,o);t+=1)e[t]=v[t]??"";return e},[v,o]),P=useCallback(e=>{const t=e.slice(0,o);t!==v&&(j(t),t.length===o&&s&&s(t))},[o,j,s,v]),B=useCallback((e,t)=>{const n=t.replace(/\u200B/g,""),r=sanitizeChar(n,a);if(!r){const t=O.slice(),n=(t[e]??"").length>0;if(t[e]="",P(t.join("").slice(0,o)),!n&&e>0){const t=O.slice();t[e-1]="",P(t.join("")),D(e-1)}return}const i=O[e]??"",s=i&&r.length>o&&r.startsWith(i)?r.slice(i.length):r;if(s.length>=o){const t=s.slice(0,o),n=v.length;if(P(t),t.length!==n){const e=resolveHaptic(f,"selection");e&&triggerHaptic(e)}return void R.current[e]?.blur()}const l=O.slice();let c=e;for(let e=0;e<r.length&&c<o;e+=1)l[c]=r[e]??"",c+=1;const u=l.join("").slice(0,o),d=v.length;if(P(u),u.length!==d){const e=resolveHaptic(f,"selection");e&&triggerHaptic(e)}const m=Math.min(c,o-1);c>=o?R.current[e]?.blur():D(m)},[O,D,a,o,f,P,v]),N=useCallback((e,t)=>{if("Backspace"!==t.nativeEvent.key)return;if(0===(O[e]??"").length){if(e>0){const t=O.slice();t[e-1]="",P(t.join("")),D(e-1)}}else{const t=O.slice();t[e]="",P(t.join(""))}},[O,D,P]),L=useCallback(e=>{k(e)},[]),W=useCallback(()=>{k(-1)},[]),$=useCallback(()=>{if(u)return;const e=O.findIndex(e=>""===e);D(-1===e?o-1:e)},[O,u,D,o]),q=g??`Enter ${o}-digit code`,G=z.interpolate({inputRange:[-1,1],outputRange:[-6,6]});return _jsxs(View,{style:h,accessible:!0,accessibilityRole:"none",accessibilityLabel:q,accessibilityValue:{text:n},accessibilityState:{disabled:u},testID:x,children:[_jsx(Pressable,{onPress:$,disabled:u,accessible:!1,children:_jsx(Animated.View,{style:[T.row,{columnGap:C.gap,transform:[{translateX:G}]}],children:O.map((e,t)=>{const n=V===t,r=e.length>0,i=H?S.colors.border.error:S.colors.border.focus,s=I[t];if(!s)return null;const l=p&&r?"●":e;return _jsxs(View,{style:T.cellWrapper,children:[_jsxs(FieldBase,{size:m,width:C.cell,height:C.cell,borderRadius:C.borderRadius,borderWidth:1.5,focused:n,error:H,filled:r,disabled:u,paddingHorizontal:0,paddingVertical:0,gap:0,style:b,children:[_jsx(TextInput,{ref:e=>{R.current[t]=e},value:(p&&r?"":e)||"​",onChangeText:e=>B(t,e),onKeyPress:e=>N(t,e),onFocus:()=>L(t),onBlur:W,keyboardType:a,editable:!u,selectTextOnFocus:!0,caretHidden:r,maxLength:o+1,textContentType:"oneTimeCode",autoComplete:0===t?"sms-otp":"off",importantForAutofill:0===t?"yes":"no",style:[T.input,{fontSize:C.fontSize,color:S.colors.text.primary,...fontFor(S,"semibold")},y]}),p&&r?_jsx(View,{pointerEvents:"none",style:T.maskOverlay,children:_jsx(Text,{style:[{fontSize:C.fontSize,color:S.colors.text.primary,...fontFor(S,"semibold")},y],children:l})}):null]}),_jsx(Animated.View,{style:[T.underline,{backgroundColor:i,opacity:s}]})]},`otp-cell-${t}`)})})}),M?_jsx(Text,{style:[T.errorText,{color:S.colors.error,fontSize:S.typography.fontSize.sm}],accessibilityLiveRegion:"polite",children:M}):null]})});OTPInput.displayName="OTPInput";const buildStyles=e=>StyleSheet.create({row:{flexDirection:"row",alignItems:"center"},cellWrapper:{alignItems:"center"},input:{width:"100%",height:"100%",textAlign:"center",padding:0},maskOverlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},underline:{marginTop:4,height:2,width:"60%",borderRadius:1,...smoothCorners},errorText:{marginTop:6}});export{OTPInput};export default OTPInput;

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

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