@webority-technologies/mobile 0.0.21 → 0.0.23

package/lib/commonjs/components/TimePicker/TimePicker.js

@@ -17,12 +17,12 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * TimePicker supports two modes:
  *
- * 1. Controlled-modal mode — pass `visible`, `onSelect`, `onClose`. The
+ * 1. Controlled-modal mode — pass `visible`, `onChange`, `onClose`. The
  *    component renders only the modal sheet and the caller owns open/close
  *    state plus its own trigger UI.
  * 2. Trigger mode — omit `visible`. The component renders a PickerTrigger
  *    field (label / value / placeholder / chevron / clear / helper / error)
- *    and manages its own modal open state. `onSelect` is still called on
+ *    and manages its own modal open state. `onChange` is still called on
  *    confirm.
  */
 
@@ -223,7 +223,7 @@ const TimePicker = props => {
   const {
     visible,
     value,
-    onSelect,
+    onChange,
     onClose,
     format = '12h',
     minuteStep = 1,
@@ -310,8 +310,9 @@ const TimePicker = props => {
   const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(40)).current;
   (0, _react.useEffect)(() => {
+    let anim;
     if (open) {
-      _reactNative.Animated.parallel([
+      anim = _reactNative.Animated.parallel([
       // Backdrop opacity uses JS driver — see Modal.tsx for the Fabric reason.
       _reactNative.Animated.timing(opacity, {
         toValue: 1,
@@ -324,11 +325,13 @@ const TimePicker = props => {
         stiffness: theme.motion.spring.snappy.stiffness,
         mass: theme.motion.spring.snappy.mass,
         useNativeDriver: true
-      })]).start();
+      })]);
+      anim.start();
     } else {
       opacity.setValue(0);
       (0, _index.setNativeValue)(translateY, 40);
     }
+    return () => anim?.stop();
   }, [open, opacity, translateY, theme.motion]);
   const announce = (0, _react.useCallback)(msg => {
     if (_reactNative.Platform.OS === 'ios' || _reactNative.Platform.OS === 'android') {
@@ -357,12 +360,12 @@ const TimePicker = props => {
     const hour24 = to24h(displayHour, period, format);
     const minute = minutes[minuteIndex] ?? 0;
     if (theme.components.timePicker?.haptic) (0, _hapticUtils.triggerHaptic)('notificationSuccess');
-    onSelect?.({
+    onChange?.({
       hour: hour24,
       minute
     });
     handleCloseModal();
-  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onSelect, handleCloseModal, theme.components.timePicker]);
+  }, [hours, hourIndex, periods, periodIndex, minutes, minuteIndex, format, onChange, handleCloseModal, theme.components.timePicker]);
   const summary = (0, _react.useMemo)(() => {
     const displayHour = hours[hourIndex] ?? 0;
     const minute = minutes[minuteIndex] ?? 0;

package/lib/commonjs/components/Toast/Toast.js

@@ -44,6 +44,18 @@ const Toast = ({
   const translateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const dismissedRef = (0, _react.useRef)(false);
+  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
+  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
+
+  // The stack offset rides on its own value so the enter spring (translateY)
+  // and the layout offset compose once instead of rebuilding a fresh
+  // `new Animated.Value` + `Animated.add` node on every render. setNativeValue
+  // keeps it in sync after the node has moved to the native driver.
+  const stackTranslateY = (0, _react.useRef)((0, _index.createAnimatedValue)(stackTranslate)).current;
+  (0, _react.useEffect)(() => {
+    (0, _index.setNativeValue)(stackTranslateY, stackTranslate);
+  }, [stackTranslate, stackTranslateY]);
+  const composedTranslateY = (0, _react.useMemo)(() => _reactNative.Animated.add(translateY, stackTranslateY), [translateY, stackTranslateY]);
   const dismiss = (animateOut = true) => {
     if (dismissedRef.current) return;
     dismissedRef.current = true;
@@ -62,7 +74,7 @@ const Toast = ({
     }
   };
   (0, _react.useEffect)(() => {
-    _reactNative.Animated.parallel([_reactNative.Animated.spring(translateY, {
+    const enter = _reactNative.Animated.parallel([_reactNative.Animated.spring(translateY, {
       toValue: 0,
       damping: enterSpringDamping,
       stiffness: enterSpringStiffness,
@@ -72,13 +84,17 @@ const Toast = ({
       toValue: 1,
       duration: theme.motion.duration.fast,
       useNativeDriver: true
-    })]).start();
+    })]);
+    enter.start();
     const duration = toast.duration ?? defaultDurationMs;
     if (duration > 0) {
       const timer = setTimeout(() => dismiss(true), duration);
-      return () => clearTimeout(timer);
+      return () => {
+        enter.stop();
+        clearTimeout(timer);
+      };
     }
-    return undefined;
+    return () => enter.stop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const panResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
@@ -113,11 +129,7 @@ const Toast = ({
         })]).start();
       }
     }
-  }),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
-  const stackTranslate = position === 'top' ? index * stackOffset : -index * stackOffset;
-  const stackScale = Math.max(1 - index * stackScaleStep, stackMinScale);
+  }), [translateX, opacity, swipeDismissThreshold, swipeVelocityThreshold, theme.motion.duration.fast, onDismiss, toast.id]);
   const handleActionPress = () => {
     toast.action?.onPress();
     dismiss(true);
@@ -157,7 +169,7 @@ const Toast = ({
       shadowColor: theme.shadows.md.shadowColor,
       opacity,
       transform: [{
-        translateY: _reactNative.Animated.add(translateY, new _reactNative.Animated.Value(stackTranslate))
+        translateY: composedTranslateY
       }, {
         translateX
       }, {

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -107,6 +107,7 @@ const Tooltip = props => {
         }
       };
     }
+    let anim;
     if (visible) {
       measureAnchor();
       const enterAnims = [_reactNative.Animated.timing(opacity, {
@@ -123,7 +124,8 @@ const Tooltip = props => {
           useNativeDriver: true
         }));
       }
-      _reactNative.Animated.parallel(enterAnims).start();
+      anim = _reactNative.Animated.parallel(enterAnims);
+      anim.start();
       if (trigger === 'press') {
         if (autoHideTimer.current) clearTimeout(autoHideTimer.current);
         autoHideTimer.current = setTimeout(() => {
@@ -143,13 +145,15 @@ const Tooltip = props => {
           useNativeDriver: true
         }));
       }
-      _reactNative.Animated.parallel(exitAnims).start();
+      anim = _reactNative.Animated.parallel(exitAnims);
+      anim.start();
       if (autoHideTimer.current) {
         clearTimeout(autoHideTimer.current);
         autoHideTimer.current = null;
       }
     }
     return () => {
+      anim?.stop();
       if (autoHideTimer.current) {
         clearTimeout(autoHideTimer.current);
         autoHideTimer.current = null;

package/lib/commonjs/components/index.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "AccordionGroup", {
 Object.defineProperty(exports, "AppBar", {
   enumerable: true,
   get: function () {
-    return _index19.AppBar;
+    return _index23.AppBar;
   }
 });
 Object.defineProperty(exports, "Avatar", {
@@ -57,6 +57,12 @@ Object.defineProperty(exports, "BottomSheet", {
     return _index6.BottomSheet;
   }
 });
+Object.defineProperty(exports, "Box", {
+  enumerable: true,
+  get: function () {
+    return _index8.Box;
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function () {
@@ -66,307 +72,349 @@ Object.defineProperty(exports, "Button", {
 Object.defineProperty(exports, "Card", {
   enumerable: true,
   get: function () {
-    return _index8.Card;
+    return _index10.Card;
   }
 });
 Object.defineProperty(exports, "Carousel", {
   enumerable: true,
   get: function () {
-    return _index9.Carousel;
+    return _index11.Carousel;
   }
 });
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
-    return _index0.Checkbox;
+    return _index12.Checkbox;
   }
 });
 Object.defineProperty(exports, "Chip", {
   enumerable: true,
   get: function () {
-    return _index1.Chip;
+    return _index13.Chip;
   }
 });
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
   get: function () {
-    return _index10.DatePicker;
+    return _index14.DatePicker;
   }
 });
 Object.defineProperty(exports, "DateRangePicker", {
   enumerable: true,
   get: function () {
-    return _index11.DateRangePicker;
+    return _index15.DateRangePicker;
   }
 });
 Object.defineProperty(exports, "Dialog", {
   enumerable: true,
   get: function () {
-    return _index12.Dialog;
+    return _index16.Dialog;
   }
 });
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
   get: function () {
-    return _index13.Divider;
+    return _index17.Divider;
   }
 });
 Object.defineProperty(exports, "Drawer", {
   enumerable: true,
   get: function () {
-    return _index14.Drawer;
+    return _index18.Drawer;
   }
 });
 Object.defineProperty(exports, "EmptyState", {
   enumerable: true,
   get: function () {
-    return _index15.EmptyState;
+    return _index19.EmptyState;
   }
 });
 Object.defineProperty(exports, "FloatingActionButton", {
   enumerable: true,
   get: function () {
-    return _index17.FloatingActionButton;
+    return _index21.FloatingActionButton;
   }
 });
 Object.defineProperty(exports, "FloatingActionButtonGroup", {
   enumerable: true,
   get: function () {
-    return _index17.FloatingActionButtonGroup;
+    return _index21.FloatingActionButtonGroup;
   }
 });
 Object.defineProperty(exports, "ForceUpdateDialog", {
   enumerable: true,
   get: function () {
-    return _index18.ForceUpdateDialog;
+    return _index22.ForceUpdateDialog;
   }
 });
 Object.defineProperty(exports, "FormField", {
   enumerable: true,
   get: function () {
-    return _index16.FormField;
+    return _index20.FormField;
   }
 });
 Object.defineProperty(exports, "ImageGallery", {
   enumerable: true,
   get: function () {
-    return _index20.ImageGallery;
+    return _index24.ImageGallery;
   }
 });
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function () {
-    return _index21.Input;
+    return _index25.Input;
+  }
+});
+Object.defineProperty(exports, "KeyboardAwareScrollView", {
+  enumerable: true,
+  get: function () {
+    return _index0.KeyboardAwareScrollView;
+  }
+});
+Object.defineProperty(exports, "KeyboardToolbar", {
+  enumerable: true,
+  get: function () {
+    return _index1.KeyboardToolbar;
   }
 });
 Object.defineProperty(exports, "ListItem", {
   enumerable: true,
   get: function () {
-    return _index22.ListItem;
+    return _index26.ListItem;
   }
 });
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function () {
-    return _index24.Modal;
+    return _index28.Modal;
   }
 });
 Object.defineProperty(exports, "NumberInput", {
   enumerable: true,
   get: function () {
-    return _index25.NumberInput;
+    return _index29.NumberInput;
   }
 });
 Object.defineProperty(exports, "OTPInput", {
   enumerable: true,
   get: function () {
-    return _index26.OTPInput;
+    return _index30.OTPInput;
   }
 });
 Object.defineProperty(exports, "PickerTrigger", {
   enumerable: true,
   get: function () {
-    return _index27.PickerTrigger;
+    return _index31.PickerTrigger;
   }
 });
 Object.defineProperty(exports, "ProgressBar", {
   enumerable: true,
   get: function () {
-    return _index28.ProgressBar;
+    return _index32.ProgressBar;
   }
 });
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () {
-    return _index29.Radio;
+    return _index33.Radio;
   }
 });
 Object.defineProperty(exports, "RadioGroup", {
   enumerable: true,
   get: function () {
-    return _index29.RadioGroup;
+    return _index33.RadioGroup;
   }
 });
 Object.defineProperty(exports, "Rating", {
   enumerable: true,
   get: function () {
-    return _index30.Rating;
+    return _index34.Rating;
+  }
+});
+Object.defineProperty(exports, "Row", {
+  enumerable: true,
+  get: function () {
+    return _index8.Row;
   }
 });
 Object.defineProperty(exports, "SearchBar", {
   enumerable: true,
   get: function () {
-    return _index31.SearchBar;
+    return _index35.SearchBar;
   }
 });
 Object.defineProperty(exports, "SegmentedControl", {
   enumerable: true,
   get: function () {
-    return _index32.SegmentedControl;
+    return _index36.SegmentedControl;
   }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function () {
-    return _index33.Select;
+    return _index37.Select;
   }
 });
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
   get: function () {
-    return _index35.Skeleton;
+    return _index39.Skeleton;
   }
 });
 Object.defineProperty(exports, "SkeletonCircle", {
   enumerable: true,
   get: function () {
-    return _index35.SkeletonCircle;
+    return _index39.SkeletonCircle;
   }
 });
 Object.defineProperty(exports, "SkeletonClockProvider", {
   enumerable: true,
   get: function () {
-    return _index35.SkeletonClockProvider;
+    return _index39.SkeletonClockProvider;
   }
 });
 Object.defineProperty(exports, "SkeletonContent", {
   enumerable: true,
   get: function () {
-    return _index35.SkeletonContent;
+    return _index39.SkeletonContent;
   }
 });
 Object.defineProperty(exports, "SkeletonList", {
   enumerable: true,
   get: function () {
-    return _index35.SkeletonList;
+    return _index39.SkeletonList;
   }
 });
 Object.defineProperty(exports, "SkeletonProvider", {
   enumerable: true,
   get: function () {
-    return _index35.SkeletonProvider;
+    return _index39.SkeletonProvider;
   }
 });
 Object.defineProperty(exports, "SkeletonSkip", {
   enumerable: true,
   get: function () {
-    return _index35.SkeletonSkip;
+    return _index39.SkeletonSkip;
   }
 });
 Object.defineProperty(exports, "SkeletonText", {
   enumerable: true,
   get: function () {
-    return _index35.SkeletonText;
+    return _index39.SkeletonText;
   }
 });
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function () {
-    return _index36.Slider;
+    return _index40.Slider;
+  }
+});
+Object.defineProperty(exports, "Spacer", {
+  enumerable: true,
+  get: function () {
+    return _index8.Spacer;
   }
 });
 Object.defineProperty(exports, "Spinner", {
   enumerable: true,
   get: function () {
-    return _index23.Spinner;
+    return _index27.Spinner;
+  }
+});
+Object.defineProperty(exports, "Stack", {
+  enumerable: true,
+  get: function () {
+    return _index8.Stack;
   }
 });
 Object.defineProperty(exports, "Stepper", {
   enumerable: true,
   get: function () {
-    return _index34.Stepper;
+    return _index38.Stepper;
   }
 });
 Object.defineProperty(exports, "Swipeable", {
   enumerable: true,
   get: function () {
-    return _index37.Swipeable;
+    return _index41.Swipeable;
   }
 });
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
   get: function () {
-    return _index38.Switch;
+    return _index42.Switch;
   }
 });
 Object.defineProperty(exports, "Tabs", {
   enumerable: true,
   get: function () {
-    return _index39.Tabs;
+    return _index43.Tabs;
+  }
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function () {
+    return _index9.Text;
   }
 });
 Object.defineProperty(exports, "TimePicker", {
   enumerable: true,
   get: function () {
-    return _index40.TimePicker;
+    return _index44.TimePicker;
   }
 });
 Object.defineProperty(exports, "Toast", {
   enumerable: true,
   get: function () {
-    return _index41.Toast;
+    return _index45.Toast;
   }
 });
 Object.defineProperty(exports, "ToastProvider", {
   enumerable: true,
   get: function () {
-    return _index41.ToastProvider;
+    return _index45.ToastProvider;
   }
 });
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
-    return _index42.Tooltip;
+    return _index46.Tooltip;
   }
 });
 Object.defineProperty(exports, "toast", {
   enumerable: true,
   get: function () {
-    return _index41.toast;
+    return _index45.toast;
+  }
+});
+Object.defineProperty(exports, "useBottomSheet", {
+  enumerable: true,
+  get: function () {
+    return _index6.useBottomSheet;
   }
 });
 Object.defineProperty(exports, "useReduceMotion", {
   enumerable: true,
   get: function () {
-    return _index35.useReduceMotion;
+    return _index39.useReduceMotion;
   }
 });
 Object.defineProperty(exports, "useSkeletonClock", {
   enumerable: true,
   get: function () {
-    return _index35.useSkeletonClock;
+    return _index39.useSkeletonClock;
   }
 });
 Object.defineProperty(exports, "useSkeletonDefaults", {
   enumerable: true,
   get: function () {
-    return _index35.useSkeletonDefaults;
+    return _index39.useSkeletonDefaults;
   }
 });
 Object.defineProperty(exports, "useToast", {
   enumerable: true,
   get: function () {
-    return _index41.useToast;
+    return _index45.useToast;
   }
 });
 var _index = require("./Accordion/index.js");
@@ -376,41 +424,45 @@ var _index4 = require("./Banner/index.js");
 var _index5 = require("./BottomNavigation/index.js");
 var _index6 = require("./BottomSheet/index.js");
 var _index7 = require("./Button/index.js");
-var _index8 = require("./Card/index.js");
-var _index9 = require("./Carousel/index.js");
-var _index0 = require("./Checkbox/index.js");
-var _index1 = require("./Chip/index.js");
-var _index10 = require("./DatePicker/index.js");
-var _index11 = require("./DateRangePicker/index.js");
-var _index12 = require("./Dialog/index.js");
-var _index13 = require("./Divider/index.js");
-var _index14 = require("./Drawer/index.js");
-var _index15 = require("./EmptyState/index.js");
-var _index16 = require("./FormField/index.js");
-var _index17 = require("./FloatingActionButton/index.js");
-var _index18 = require("./ForceUpdateDialog/index.js");
-var _index19 = require("./AppBar/index.js");
-var _index20 = require("./ImageGallery/index.js");
-var _index21 = require("./Input/index.js");
-var _index22 = require("./ListItem/index.js");
-var _index23 = require("./Spinner/index.js");
-var _index24 = require("./Modal/index.js");
-var _index25 = require("./NumberInput/index.js");
-var _index26 = require("./OTPInput/index.js");
-var _index27 = require("./PickerTrigger/index.js");
-var _index28 = require("./ProgressBar/index.js");
-var _index29 = require("./Radio/index.js");
-var _index30 = require("./Rating/index.js");
-var _index31 = require("./SearchBar/index.js");
-var _index32 = require("./SegmentedControl/index.js");
-var _index33 = require("./Select/index.js");
-var _index34 = require("./Stepper/index.js");
-var _index35 = require("./Skeleton/index.js");
-var _index36 = require("./Slider/index.js");
-var _index37 = require("./Swipeable/index.js");
-var _index38 = require("./Switch/index.js");
-var _index39 = require("./Tabs/index.js");
-var _index40 = require("./TimePicker/index.js");
-var _index41 = require("./Toast/index.js");
-var _index42 = require("./Tooltip/index.js");
+var _index8 = require("./Box/index.js");
+var _index9 = require("./Text/index.js");
+var _index0 = require("./KeyboardAwareScrollView/index.js");
+var _index1 = require("./KeyboardToolbar/index.js");
+var _index10 = require("./Card/index.js");
+var _index11 = require("./Carousel/index.js");
+var _index12 = require("./Checkbox/index.js");
+var _index13 = require("./Chip/index.js");
+var _index14 = require("./DatePicker/index.js");
+var _index15 = require("./DateRangePicker/index.js");
+var _index16 = require("./Dialog/index.js");
+var _index17 = require("./Divider/index.js");
+var _index18 = require("./Drawer/index.js");
+var _index19 = require("./EmptyState/index.js");
+var _index20 = require("./FormField/index.js");
+var _index21 = require("./FloatingActionButton/index.js");
+var _index22 = require("./ForceUpdateDialog/index.js");
+var _index23 = require("./AppBar/index.js");
+var _index24 = require("./ImageGallery/index.js");
+var _index25 = require("./Input/index.js");
+var _index26 = require("./ListItem/index.js");
+var _index27 = require("./Spinner/index.js");
+var _index28 = require("./Modal/index.js");
+var _index29 = require("./NumberInput/index.js");
+var _index30 = require("./OTPInput/index.js");
+var _index31 = require("./PickerTrigger/index.js");
+var _index32 = require("./ProgressBar/index.js");
+var _index33 = require("./Radio/index.js");
+var _index34 = require("./Rating/index.js");
+var _index35 = require("./SearchBar/index.js");
+var _index36 = require("./SegmentedControl/index.js");
+var _index37 = require("./Select/index.js");
+var _index38 = require("./Stepper/index.js");
+var _index39 = require("./Skeleton/index.js");
+var _index40 = require("./Slider/index.js");
+var _index41 = require("./Swipeable/index.js");
+var _index42 = require("./Switch/index.js");
+var _index43 = require("./Tabs/index.js");
+var _index44 = require("./TimePicker/index.js");
+var _index45 = require("./Toast/index.js");
+var _index46 = require("./Tooltip/index.js");
 //# sourceMappingURL=index.js.map