@webority-technologies/mobile 0.0.21 → 0.0.23

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

@@ -4,6 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { createAnimatedValue, fontFor, setNativeValue, useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
+import { useReducedMotion } from "../../hooks/index.js";
 import { FieldBase, resolveFieldSize, resolveFieldTextStyle, resolveVariantColors } from "../FieldBase/FieldBase.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // FieldBase carries every dimension except `multilineMinHeight` — Input owns
@@ -79,26 +80,31 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Floating label animation
   useEffect(() => {
-    Animated.timing(labelAnim, {
+    const anim = Animated.timing(labelAnim, {
       toValue: shouldFloat ? 1 : 0,
       duration: theme.motion.duration.fast,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
-    }).start();
+    });
+    anim.start();
+    return () => anim.stop();
   }, [shouldFloat, labelAnim, theme.motion.duration.fast, theme.motion.easing.standard]);
 
   // Helper / error fade
   useEffect(() => {
-    Animated.timing(messageAnim, {
+    const anim = Animated.timing(messageAnim, {
       toValue: hasError || Boolean(helperText) ? 1 : 0,
-      duration: 150,
+      duration: theme.motion.duration.fast,
       easing: Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: true
-    }).start();
-  }, [hasError, helperText, messageAnim, theme.motion.easing.standard]);
+    });
+    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(() => {
@@ -106,33 +112,39 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
       prevErrorRef.current = hasError;
       return;
     }
+    let anim;
     if (hasError && !prevErrorRef.current) {
-      setNativeValue(shakeAnim, 0);
-      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
-      })]).start();
+      // 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;
-  }, [hasError, shakeAnim, shakeOnError]);
+    return () => anim?.stop();
+  }, [hasError, shakeAnim, shakeOnError, reduceMotion]);
   const handleFocus = useCallback(e => {
     setIsFocused(true);
     onFocus?.(e);

package/lib/module/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js

@@ -0,0 +1,98 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { findNodeHandle, Keyboard, Platform, ScrollView, TextInput } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A ScrollView that keeps the focused input visible above the keyboard — no
+ * native dependency. On keyboard show it pads the content by the keyboard
+ * height and scrolls the focused TextInput so its bottom sits `extraScrollHeight`
+ * above the keyboard, but only when it would otherwise be covered (so already-
+ * visible fields don't jump). The classic measure-and-scroll approach, in pure RN.
+ */
+const KeyboardAwareScrollView = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    extraScrollHeight = 24,
+    disabled = false,
+    contentContainerStyle,
+    onScroll,
+    onLayout,
+    ...rest
+  } = props;
+  const scrollRef = useRef(null);
+  const scrollYRef = useRef(0);
+  const viewportHeightRef = useRef(0);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const setRefs = useCallback(node => {
+    scrollRef.current = node;
+    if (typeof ref === 'function') ref(node);else if (ref) ref.current = node;
+  }, [ref]);
+  const scrollFocusedIntoView = useCallback(kbHeight => {
+    const scroll = scrollRef.current;
+    const scrollNode = scroll ? findNodeHandle(scroll) : null;
+    const stateApi = TextInput?.State;
+    const focused = stateApi?.currentlyFocusedInput?.();
+    if (!scroll || scrollNode == null || !focused?.measureLayout) return;
+    focused.measureLayout(scrollNode, (_left, top, _width, height) => {
+      const scrollY = scrollYRef.current;
+      const viewportH = viewportHeightRef.current;
+      if (viewportH <= 0) return;
+      const keyboardTop = viewportH - kbHeight - extraScrollHeight;
+      const fieldBottomInViewport = top - scrollY + height;
+      if (fieldBottomInViewport > keyboardTop) {
+        const delta = fieldBottomInViewport - keyboardTop;
+        scroll.scrollTo({
+          y: scrollY + delta,
+          animated: true
+        });
+      }
+    }, () => undefined);
+  }, [extraScrollHeight]);
+  useEffect(() => {
+    if (disabled) return undefined;
+    // iOS exposes the will* events (smoother); Android only fires did*.
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    let rafId;
+    const showSub = Keyboard.addListener(showEvent, e => {
+      const height = e.endCoordinates?.height ?? 0;
+      setKeyboardHeight(height);
+      // Wait a frame so the padding is applied before we scroll. Tracked so
+      // it can be cancelled on unmount (never runs against a torn-down tree).
+      if (rafId != null) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => scrollFocusedIntoView(height));
+    });
+    const hideSub = Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
+    return () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [disabled, scrollFocusedIntoView]);
+  const handleScroll = useCallback(e => {
+    scrollYRef.current = e.nativeEvent.contentOffset.y;
+    onScroll?.(e);
+  }, [onScroll]);
+  const handleLayout = useCallback(e => {
+    viewportHeightRef.current = e.nativeEvent.layout.height;
+    onLayout?.(e);
+  }, [onLayout]);
+  return /*#__PURE__*/_jsx(ScrollView, {
+    ref: setRefs,
+    onScroll: handleScroll,
+    onLayout: handleLayout,
+    scrollEventThrottle: 16,
+    keyboardShouldPersistTaps: "handled",
+    keyboardDismissMode: Platform.OS === 'ios' ? 'interactive' : 'on-drag',
+    contentContainerStyle: [contentContainerStyle, {
+      paddingBottom: keyboardHeight
+    }],
+    ...rest,
+    children: children
+  });
+});
+KeyboardAwareScrollView.displayName = 'KeyboardAwareScrollView';
+export { KeyboardAwareScrollView };
+export default KeyboardAwareScrollView;
+//# sourceMappingURL=KeyboardAwareScrollView.js.map

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

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

package/lib/module/components/KeyboardToolbar/KeyboardToolbar.js

@@ -0,0 +1,125 @@
+"use strict";
+
+import React, { useEffect, useState } from 'react';
+import { Keyboard, Platform, Pressable, StyleSheet, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { useOptionalFormContext } from "../../form/FormContext.js";
+import { Text } from "../Text/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const NavButton = ({
+  label,
+  accessibilityLabel,
+  onPress,
+  theme
+}) => /*#__PURE__*/_jsx(Pressable, {
+  onPress: onPress,
+  disabled: !onPress,
+  accessibilityRole: "button",
+  accessibilityLabel: accessibilityLabel,
+  hitSlop: 8,
+  style: {
+    paddingHorizontal: theme.spacing.sm,
+    opacity: onPress ? 1 : 0.4
+  },
+  children: /*#__PURE__*/_jsx(Text, {
+    variant: "h2",
+    color: onPress ? 'link' : 'disabled',
+    children: label
+  })
+});
+
+/**
+ * An accessory bar pinned just above the keyboard — pure RN, no native
+ * dependency. Shows a Done (dismiss) button and optional prev/next chevrons
+ * that, inside a `<Form>`, walk the registered field order. Render it at the
+ * screen root (a `flex: 1` ancestor) so its `bottom: keyboardHeight` offset
+ * lands it on top of the keyboard. Renders nothing while the keyboard is hidden.
+ */
+const KeyboardToolbar = props => {
+  const {
+    doneLabel = 'Done',
+    showNavigation,
+    onDone,
+    onNext,
+    onPrev,
+    leading,
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const form = useOptionalFormContext();
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const showSub = Keyboard.addListener(showEvent, e => setKeyboardHeight(e.endCoordinates?.height ?? 0));
+    const hideSub = Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+  if (keyboardHeight <= 0) return null;
+  const handleDone = onDone ?? (() => Keyboard.dismiss());
+  const handlePrev = onPrev ?? form?.focusPrev;
+  const handleNext = onNext ?? form?.focusNext;
+  const navEnabled = showNavigation ?? Boolean(handlePrev || handleNext);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    accessibilityRole: "toolbar",
+    style: [styles.bar, {
+      bottom: keyboardHeight,
+      backgroundColor: theme.colors.background.elevated,
+      borderTopColor: theme.colors.border.primary,
+      paddingHorizontal: theme.spacing.md
+    }, style],
+    children: [navEnabled ? /*#__PURE__*/_jsxs(View, {
+      style: styles.nav,
+      children: [/*#__PURE__*/_jsx(NavButton, {
+        label: "\u2039",
+        accessibilityLabel: "Previous field",
+        onPress: handlePrev,
+        theme: theme
+      }), /*#__PURE__*/_jsx(NavButton, {
+        label: "\u203A",
+        accessibilityLabel: "Next field",
+        onPress: handleNext,
+        theme: theme
+      })]
+    }) : /*#__PURE__*/_jsx(View, {}), leading, /*#__PURE__*/_jsx(View, {
+      style: styles.spacer
+    }), /*#__PURE__*/_jsx(Pressable, {
+      onPress: handleDone,
+      accessibilityRole: "button",
+      accessibilityLabel: doneLabel,
+      hitSlop: 8,
+      children: /*#__PURE__*/_jsx(Text, {
+        variant: "body",
+        weight: "semibold",
+        color: "link",
+        children: doneLabel
+      })
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    height: 44,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: StyleSheet.hairlineWidth
+  },
+  nav: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  spacer: {
+    flex: 1
+  }
+});
+export { KeyboardToolbar };
+export default KeyboardToolbar;
+//# sourceMappingURL=KeyboardToolbar.js.map

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

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

package/lib/module/components/Modal/Modal.js

@@ -39,6 +39,7 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
   const wasVisibleRef = useRef(false);
   const styles = useMemo(() => buildStyles(theme), [theme]);
   useEffect(() => {
+    const running = [];
     if (visible) {
       // Two Fabric quirks force this combination: backdrop View needs
       // `collapsable={false}` (see render) so flattening doesn't drop it,
@@ -46,21 +47,25 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
       // Animated.View that also sets backgroundColor inline renders as 0 on
       // RN 0.85 / Fabric / iOS, leaving the dim layer invisible. Single
       // 240ms tween — JS thread cost is negligible.
-      Animated.timing(backdropAnim, {
+      const backdrop = Animated.timing(backdropAnim, {
         toValue: 1,
         duration,
         useNativeDriver: false
-      }).start();
+      });
+      backdrop.start();
+      running.push(backdrop);
       if (presentation === 'bottom') {
-        Animated.spring(translateYAnim, {
+        const slide = Animated.spring(translateYAnim, {
           toValue: 0,
           damping: theme.motion.spring.gentle.damping,
           stiffness: theme.motion.spring.gentle.stiffness,
           mass: theme.motion.spring.gentle.mass,
           useNativeDriver: true
-        }).start();
+        });
+        slide.start();
+        running.push(slide);
       } else {
-        Animated.parallel([Animated.spring(scaleAnim, {
+        const enter = Animated.parallel([Animated.spring(scaleAnim, {
           toValue: 1,
           damping: theme.motion.spring.gentle.damping,
           stiffness: theme.motion.spring.gentle.stiffness,
@@ -70,7 +75,9 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
           toValue: 1,
           duration,
           useNativeDriver: true
-        })]).start();
+        })]);
+        enter.start();
+        running.push(enter);
       }
     } else {
       // backdropAnim is JS-driven (see note above) — reset directly so a
@@ -80,6 +87,10 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
       setNativeValue(opacityAnim, 0);
       setNativeValue(translateYAnim, screenHeight);
     }
+    // Stop in-flight tweens on unmount / visibility flip so an enter animation
+    // never resolves against a torn-down tree (fixes the jest async leak and
+    // the equivalent post-unmount work in the real app).
+    return () => running.forEach(animation => animation.stop());
   }, [visible, presentation, duration, backdropAnim, scaleAnim, opacityAnim, translateYAnim, screenHeight, theme.motion.spring.gentle.damping, theme.motion.spring.gentle.stiffness, theme.motion.spring.gentle.mass, scaleStartValue]);
 
   // Accessibility focus trap: when the modal opens, push screen-reader focus

package/lib/module/components/NumberInput/NumberInput.js

@@ -2,6 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { FieldBase, resolveFieldSize, resolveFieldTextStyle } from "../FieldBase/FieldBase.js";
@@ -43,6 +44,7 @@ const sanitizeTyped = (raw, allowDecimal) => {
 const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     value,
+    defaultValue,
     onChange,
     min = Number.NEGATIVE_INFINITY,
     max = Number.POSITIVE_INFINITY,
@@ -66,6 +68,11 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
     textInputProps,
     testID
   } = props;
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? props.min ?? 0,
+    onChange
+  });
   const theme = useTheme();
   const sizeTokens = resolveFieldSize(theme, size);
   const fieldText = resolveFieldTextStyle(theme, {
@@ -76,7 +83,7 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   const longPressInterval = theme.components.numberInput?.longPressIntervalMs ?? DEFAULT_LONG_PRESS_INTERVAL;
   const pressHaptic = theme.components.numberInput?.pressHaptic ?? false;
   const inputRef = useRef(null);
-  const [draft, setDraft] = useState(formatValue(value, allowDecimal, precision));
+  const [draft, setDraft] = useState(formatValue(current, allowDecimal, precision));
   const [editing, setEditing] = useState(false);
   const [focused, setFocused] = useState(false);
   const repeatTimeoutRef = useRef(null);
@@ -94,41 +101,41 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => clearRepeat, [clearRepeat]);
   useEffect(() => {
     if (!editing) {
-      setDraft(formatValue(value, allowDecimal, precision));
+      setDraft(formatValue(current, allowDecimal, precision));
     }
-  }, [value, allowDecimal, precision, editing]);
-  const atMin = value <= min;
-  const atMax = value >= max;
+  }, [current, allowDecimal, precision, editing]);
+  const atMin = current <= min;
+  const atMax = current >= max;
   const interactive = !disabled;
   const setExternal = useCallback(next => {
     const rounded = roundToPrecision(next, allowDecimal ? precision : 0);
     const clamped = clamp(rounded, min, max);
-    if (clamped !== value) {
-      onChange(clamped);
+    if (clamped !== current) {
+      setCurrent(clamped);
     }
-  }, [allowDecimal, max, min, onChange, precision, value]);
+  }, [allowDecimal, max, min, setCurrent, precision, current]);
   const decrement = useCallback(() => {
     if (!interactive || atMin) return;
     if (pressHaptic) triggerHaptic('impactLight');
-    setExternal(value - step);
-  }, [atMin, interactive, pressHaptic, setExternal, step, value]);
+    setExternal(current - step);
+  }, [atMin, interactive, pressHaptic, setExternal, step, current]);
   const increment = useCallback(() => {
     if (!interactive || atMax) return;
     if (pressHaptic) triggerHaptic('impactLight');
-    setExternal(value + step);
-  }, [atMax, interactive, pressHaptic, setExternal, step, value]);
+    setExternal(current + step);
+  }, [atMax, interactive, pressHaptic, setExternal, step, current]);
   React.useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
     blur: () => inputRef.current?.blur(),
     clear: () => {
       setDraft('');
       if (Number.isFinite(min) && min > 0) {
-        onChange(min);
+        setCurrent(min);
       } else {
-        onChange(0 < min ? min : 0 > max ? max : 0);
+        setCurrent(0 < min ? min : 0 > max ? max : 0);
       }
     }
-  }), [max, min, onChange]);
+  }), [max, min, setCurrent]);
   const startRepeating = useCallback(direction => {
     if (!interactive) return;
     clearRepeat();
@@ -148,27 +155,27 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
     const parsed = Number(cleaned);
     if (cleaned !== '' && cleaned !== '-' && cleaned !== '.' && Number.isFinite(parsed)) {
       if (parsed >= min && parsed <= max) {
-        if (parsed !== value) {
-          onChange(roundToPrecision(parsed, allowDecimal ? precision : 0));
+        if (parsed !== current) {
+          setCurrent(roundToPrecision(parsed, allowDecimal ? precision : 0));
         }
       }
     }
-  }, [allowDecimal, max, min, onChange, precision, value]);
+  }, [allowDecimal, max, min, setCurrent, precision, current]);
   const handleBlur = useCallback(() => {
     setEditing(false);
     setFocused(false);
     const parsed = Number(draft);
     if (draft === '' || !Number.isFinite(parsed)) {
-      setDraft(formatValue(value, allowDecimal, precision));
+      setDraft(formatValue(current, allowDecimal, precision));
       return;
     }
     const rounded = roundToPrecision(parsed, allowDecimal ? precision : 0);
     const clamped = clamp(rounded, min, max);
-    if (clamped !== value) {
-      onChange(clamped);
+    if (clamped !== current) {
+      setCurrent(clamped);
     }
     setDraft(formatValue(clamped, allowDecimal, precision));
-  }, [allowDecimal, draft, max, min, onChange, precision, value]);
+  }, [allowDecimal, draft, max, min, setCurrent, precision, current]);
   const handleFocus = useCallback(() => {
     setEditing(true);
     setFocused(true);
@@ -232,7 +239,7 @@ const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
         accessibilityRole: "adjustable",
         accessibilityLabel: accessibleInputLabel,
         accessibilityValue: {
-          now: Number.isFinite(value) ? value : 0
+          now: Number.isFinite(current) ? current : 0
         },
         accessibilityState: {
           disabled