@webority-technologies/mobile-ui 0.0.1 → 0.0.3

package/lib/commonjs/components/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorBoundary = void 0;
+var _mobileCore = require("@webority-technologies/mobile-core");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../EmptyState/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const COMPONENT_STACK_LIMIT = 500;
+const DEFAULT_TITLE = 'Something went wrong';
+const DEFAULT_MESSAGE = 'An unexpected error occurred. Please try again.';
+const hasResetKeysChanged = (prev, next) => {
+  if (prev === next) {
+    return false;
+  }
+  if (!prev || !next || prev.length !== next.length) {
+    return true;
+  }
+  return prev.some((value, index) => value !== next[index]);
+};
+const DefaultFallback = ({
+  error,
+  reset,
+  title,
+  message,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const showRawError = typeof __DEV__ !== 'undefined' && __DEV__;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.root,
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.EmptyState, {
+      title: title ?? DEFAULT_TITLE,
+      description: message ?? DEFAULT_MESSAGE,
+      action: {
+        label: 'Try again',
+        onPress: reset,
+        testID: testID ? `${testID}-retry` : undefined
+      }
+    }), showRawError ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.devError,
+      testID: testID ? `${testID}-dev-error` : undefined,
+      children: error.message
+    }) : null]
+  });
+};
+const buildStyles = theme => _reactNative.StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.background.primary,
+    padding: theme.spacing.lg
+  },
+  devError: {
+    marginTop: theme.spacing.md,
+    color: theme.colors.error,
+    fontSize: theme.typography.fontSize.sm,
+    textAlign: 'center'
+  }
+});
+
+/**
+ * Catches render errors in its subtree and shows a themed fallback instead of
+ * a white screen. Mount this once near the navigation root per the fleet
+ * convention, and optionally again around any subtree that should recover
+ * independently (a single failed card should not blank the whole screen).
+ */
+class ErrorBoundary extends _react.default.Component {
+  state = {
+    error: null
+  };
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.error && hasResetKeysChanged(prevProps.resetKeys, this.props.resetKeys)) {
+      this.reset();
+    }
+  }
+  componentDidCatch(error, info) {
+    const componentStack = (info.componentStack ?? '').slice(0, COMPONENT_STACK_LIMIT);
+    _mobileCore.Logger.recordError(error, {
+      errorType: 'RenderError',
+      componentStack
+    });
+    try {
+      this.props.onError?.(error, {
+        componentStack
+      });
+    } catch (onErrorError) {
+      _mobileCore.Logger.error('[@webority-technologies/mobile-ui] ErrorBoundary onError threw; the boundary itself is unaffected.', onErrorError);
+    }
+  }
+  reset = () => {
+    this.setState({
+      error: null
+    });
+    this.props.onReset?.();
+  };
+  render() {
+    const {
+      error
+    } = this.state;
+    if (!error) {
+      return this.props.children;
+    }
+    const {
+      fallback,
+      title,
+      message,
+      testID
+    } = this.props;
+    if (fallback !== undefined) {
+      return typeof fallback === 'function' ? fallback(error, this.reset) : fallback;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultFallback, {
+      error: error,
+      reset: this.reset,
+      title: title,
+      message: message,
+      testID: testID
+    });
+  }
+}
+exports.ErrorBoundary = ErrorBoundary;
+//# sourceMappingURL=ErrorBoundary.js.map

package/lib/commonjs/components/ErrorBoundary/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ErrorBoundary", {
+  enumerable: true,
+  get: function () {
+    return _ErrorBoundary.ErrorBoundary;
+  }
+});
+Object.defineProperty(exports, "useErrorHandler", {
+  enumerable: true,
+  get: function () {
+    return _useErrorHandler.useErrorHandler;
+  }
+});
+Object.defineProperty(exports, "withErrorBoundary", {
+  enumerable: true,
+  get: function () {
+    return _withErrorBoundary.withErrorBoundary;
+  }
+});
+var _ErrorBoundary = require("./ErrorBoundary.js");
+var _useErrorHandler = require("./useErrorHandler.js");
+var _withErrorBoundary = require("./withErrorBoundary.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/ErrorBoundary/useErrorHandler.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useErrorHandler = void 0;
+var _react = require("react");
+/**
+ * Returns a stable callback for surfacing an error caught outside React's
+ * render/commit cycle (an async callback, a rejected promise, a native event
+ * handler) to the nearest ErrorBoundary. React only catches synchronous
+ * render errors on its own; re-throwing during a state update is the
+ * documented way to route an async error into that same path.
+ */
+const useErrorHandler = () => {
+  const [, setState] = (0, _react.useState)();
+  return (0, _react.useCallback)(error => {
+    setState(() => {
+      throw error instanceof Error ? error : new Error(String(error));
+    });
+  }, []);
+};
+exports.useErrorHandler = useErrorHandler;
+//# sourceMappingURL=useErrorHandler.js.map

package/lib/commonjs/components/ErrorBoundary/withErrorBoundary.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withErrorBoundary = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ErrorBoundary = require("./ErrorBoundary.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Wraps a component in an `ErrorBoundary`. Prefer this over hand-wrapping a
+ * screen at every call site when the same fallback/reset behaviour applies
+ * everywhere that component is rendered.
+ */
+const withErrorBoundary = (Component, boundaryProps) => {
+  const displayName = Component.displayName ?? Component.name ?? 'Component';
+  const Wrapped = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorBoundary.ErrorBoundary, {
+    ...boundaryProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      ...props
+    })
+  });
+  Wrapped.displayName = `withErrorBoundary(${displayName})`;
+  return Wrapped;
+};
+exports.withErrorBoundary = withErrorBoundary;
+//# sourceMappingURL=withErrorBoundary.js.map

package/lib/commonjs/components/FilePicker/FilePicker.js

@@ -610,7 +610,7 @@ const FilePicker = exports.FilePicker = /*#__PURE__*/(0, _react.forwardRef)((pro
       title: labels.sheetTitle,
       options: sources,
       labelOf: s => s.label,
-      valueOf: s => s.key,
+      getValue: s => s.key,
       disabledOf: () => false,
       descriptionOf: s => s.description,
       iconOf: s => s.icon,

package/lib/commonjs/components/FloatingActionButton/FloatingActionButton.js

@@ -395,7 +395,20 @@ const FloatingActionButtonGroup = props => {
         importantForAccessibility: "no",
         testID: testID ? `${testID}-backdrop` : undefined
       })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View
+    // The container is absolutely positioned and sized to the primary FAB,
+    // while the secondary actions sit ABOVE it via negative translateY, so
+    // they render outside their parent's bounds. Without box-none the
+    // container is itself a touch target across its box, and on Android a
+    // child drawn outside the parent's bounds does not receive touches at
+    // all. box-none makes the container transparent to touches while its
+    // children stay interactive, which is what an expanded menu needs.
+    //
+    // A consumer app carried this as a patch-package fix against two
+    // published versions rather than it landing here, which is how the
+    // library kept shipping the bug.
+    , {
+      pointerEvents: "box-none",
       style: [positionStyle, containerStyle],
       accessibilityRole: 'menu',
       testID: testID,

package/lib/commonjs/components/ImageGallery/ImageGallery.js

@@ -398,6 +398,15 @@ const ZoomableImage = ({
       savedScale.value = minScale;
       savedTranslateX.value = 0;
       savedTranslateY.value = 0;
+      // Mutation-tested equivalent under the jest reanimated mock (withSpring
+      // resolves synchronously to its target there): with this return removed,
+      // execution falls into `scale.value > maxScale` (always false, since
+      // minScale <= maxScale) and then `savedScale.value = scale.value`, which
+      // reads back the minScale just assigned above — same final state, so no
+      // jest assertion can distinguish the two. On a real device withSpring is
+      // asynchronous, so that fallthrough read could observe a stale
+      // mid-animation scale instead; kept as an explicit early return for that
+      // reason even though it isn't independently testable here.
       return;
     }
     if (scale.value > maxScale) {
@@ -560,6 +569,10 @@ const buildLightboxStyles = theme => _reactNative.StyleSheet.create({
     paddingHorizontal: 24
   },
   captionText: {
+    // Fixed white, not a theme token, and deliberately so: the lightbox is an
+    // always-dark surface (#000 backdrop with rgba scrims above), so it does
+    // not follow the colour scheme. `text.primary` would be dark ink on black
+    // in light mode. Do not "themify" this.
     color: '#FFFFFF',
     fontSize: 14,
     lineHeight: 20,

package/lib/commonjs/components/InlineSelect/InlineSelect.js

@@ -150,7 +150,7 @@ const InlineSelect = exports.InlineSelect = /*#__PURE__*/(0, _react.forwardRef)(
       accessibilityLabel: label ?? placeholder ?? 'Options',
       options: options,
       labelOf: labelOf,
-      valueOf: valueOf,
+      getValue: valueOf,
       disabledOf: disabledOf,
       descriptionOf: descriptionOf,
       iconOf: iconOf,

package/lib/commonjs/components/Input/Input.js

@@ -115,6 +115,12 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const shakeOnError = theme.components.input?.shakeOnError ?? false;
   const prevErrorRef = (0, _react.useRef)(hasError);
   (0, _react.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;

package/lib/commonjs/components/KeyboardAwareScrollView/KeyboardAwareScrollView.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.KeyboardAwareScrollView = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _index = require("../../theme/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -20,11 +22,20 @@ const KeyboardAwareScrollView = exports.KeyboardAwareScrollView = /*#__PURE__*/(
     children,
     extraScrollHeight = 24,
     disabled = false,
+    safeAreaEdges = ['bottom'],
+    refreshing = false,
+    onRefresh,
+    keyboardOpeningTime = 250,
+    viewIsInsideTabBar = false,
+    resetScrollToCoords,
     contentContainerStyle,
+    refreshControl,
     onScroll,
     onLayout,
     ...rest
   } = props;
+  const theme = (0, _index.useTheme)();
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const scrollRef = (0, _react.useRef)(null);
   const scrollYRef = (0, _react.useRef)(0);
   const viewportHeightRef = (0, _react.useRef)(0);
@@ -68,26 +79,35 @@ const KeyboardAwareScrollView = exports.KeyboardAwareScrollView = /*#__PURE__*/(
     // iOS exposes the will* events (smoother); Android only fires did*.
     const showEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
     const hideEvent = _reactNative.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-    let rafId;
+    let timeoutId;
     const showSub = _reactNative.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);
+      // Wait for the keyboard's own animation to (roughly) finish before
+      // scrolling, so we measure against the settled viewport. Tracked so
+      // it can be cancelled on unmount or a second show before it fires.
+      if (timeoutId != null) {
+        clearTimeout(timeoutId);
+      }
+      timeoutId = setTimeout(() => scrollFocusedIntoView(height), keyboardOpeningTime);
+    });
+    const hideSub = _reactNative.Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+      if (resetScrollToCoords) {
+        scrollRef.current?.scrollTo({
+          ...resetScrollToCoords,
+          animated: true
+        });
       }
-      rafId = requestAnimationFrame(() => scrollFocusedIntoView(height));
     });
-    const hideSub = _reactNative.Keyboard.addListener(hideEvent, () => setKeyboardHeight(0));
     return () => {
-      if (rafId != null) {
-        cancelAnimationFrame(rafId);
+      if (timeoutId != null) {
+        clearTimeout(timeoutId);
       }
       showSub.remove();
       hideSub.remove();
     };
-  }, [disabled, scrollFocusedIntoView]);
+  }, [disabled, scrollFocusedIntoView, keyboardOpeningTime, resetScrollToCoords]);
   const handleLayout = (0, _react.useCallback)(e => {
     viewportHeightRef.current = e.nativeEvent.layout.height;
     onLayout?.(e);
@@ -96,6 +116,36 @@ const KeyboardAwareScrollView = exports.KeyboardAwareScrollView = /*#__PURE__*/(
     scrollYRef.current = e.nativeEvent.contentOffset.y;
     onScroll?.(e);
   }, [onScroll]);
+
+  // Borrowed from the spacing scale because the theme has no tab-bar height
+  // token, and 3xl (48) is the closest honest value: a react-navigation bottom
+  // tab bar is 49pt on iOS and 56dp on Android before safe-area padding. If a
+  // dedicated token is ever added, this should use it rather than a scale step
+  // that happens to be about right.
+  const tabBarInset = viewIsInsideTabBar ? theme.spacing['3xl'] : 0;
+  const includesBottomSafeArea = safeAreaEdges.includes('bottom');
+  // Once the keyboard is up it already extends to the physical bottom of the
+  // screen (past the home-indicator safe area), so adding the bottom inset
+  // on top of the keyboard height would double-count that strip of space.
+  const bottomInset = keyboardHeight > 0 ? keyboardHeight : includesBottomSafeArea ? insets.bottom : 0;
+  const safeAreaPadding = {
+    paddingBottom: bottomInset + tabBarInset,
+    ...(safeAreaEdges.includes('top') ? {
+      paddingTop: insets.top
+    } : null),
+    ...(safeAreaEdges.includes('left') ? {
+      paddingLeft: insets.left
+    } : null),
+    ...(safeAreaEdges.includes('right') ? {
+      paddingRight: insets.right
+    } : null)
+  };
+  const resolvedRefreshControl = refreshControl ?? (onRefresh ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.RefreshControl, {
+    refreshing: refreshing,
+    onRefresh: onRefresh,
+    tintColor: theme.colors.primary,
+    colors: [theme.colors.primary]
+  }) : undefined);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
     ref: setRefs,
     onScroll: handleScroll,
@@ -103,9 +153,8 @@ const KeyboardAwareScrollView = exports.KeyboardAwareScrollView = /*#__PURE__*/(
     scrollEventThrottle: 16,
     keyboardShouldPersistTaps: "handled",
     keyboardDismissMode: _reactNative.Platform.OS === 'ios' ? 'interactive' : 'on-drag',
-    contentContainerStyle: [contentContainerStyle, {
-      paddingBottom: keyboardHeight
-    }],
+    contentContainerStyle: [contentContainerStyle, safeAreaPadding],
+    refreshControl: resolvedRefreshControl,
     ...rest,
     children: children
   });

package/lib/commonjs/components/LoaderOverlay/LoaderOverlay.js

@@ -0,0 +1,203 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLoader = exports.loader = exports.LoaderOverlay = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _useReducedMotion = require("../../hooks/useReducedMotion.js");
+var _index = require("../../theme/index.js");
+var _index2 = require("../Spinner/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DEFAULT_SHOW_DELAY_MS = 150;
+const DEFAULT_MIN_VISIBLE_MS = 400;
+let state = {
+  refCount: 0,
+  message: undefined
+};
+const listeners = new Set();
+const notify = () => {
+  for (const listener of listeners) {
+    listener();
+  }
+};
+const subscribe = listener => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+const getState = () => state;
+const show = message => {
+  state = {
+    refCount: state.refCount + 1,
+    message: message ?? state.message
+  };
+  notify();
+};
+const hide = () => {
+  if (state.refCount <= 0) {
+    return;
+  }
+  const refCount = state.refCount - 1;
+  state = {
+    refCount,
+    message: refCount === 0 ? undefined : state.message
+  };
+  notify();
+};
+const reset = () => {
+  if (state.refCount === 0 && state.message === undefined) {
+    return;
+  }
+  state = {
+    refCount: 0,
+    message: undefined
+  };
+  notify();
+};
+const isVisible = () => state.refCount > 0;
+const wrap = async (work, message) => {
+  show(message);
+  try {
+    return await (typeof work === 'function' ? work() : work);
+  } finally {
+    hide();
+  }
+};
+const loader = exports.loader = {
+  show,
+  hide,
+  wrap,
+  isVisible,
+  reset
+};
+const useLoader = () => loader;
+exports.useLoader = useLoader;
+const LoaderOverlay = ({
+  renderIndicator,
+  backdropColor,
+  showDelayMs = DEFAULT_SHOW_DELAY_MS,
+  minVisibleMs = DEFAULT_MIN_VISIBLE_MS,
+  testID
+}) => {
+  const theme = (0, _index.useTheme)();
+  const reducedMotion = (0, _useReducedMotion.useReducedMotion)();
+  const [snapshot, setSnapshot] = (0, _react.useState)(getState);
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const visibleRef = (0, _react.useRef)(false);
+  const showTimerRef = (0, _react.useRef)(null);
+  const hideTimerRef = (0, _react.useRef)(null);
+  const shownAtRef = (0, _react.useRef)(null);
+  const fade = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  (0, _react.useEffect)(() => subscribe(() => setSnapshot(getState())), []);
+  (0, _react.useEffect)(() => {
+    visibleRef.current = visible;
+  }, [visible]);
+  const active = snapshot.refCount > 0;
+  (0, _react.useEffect)(() => {
+    if (active) {
+      if (hideTimerRef.current !== null) {
+        clearTimeout(hideTimerRef.current);
+        hideTimerRef.current = null;
+      }
+      if (!visibleRef.current && showTimerRef.current === null) {
+        showTimerRef.current = setTimeout(() => {
+          showTimerRef.current = null;
+          shownAtRef.current = Date.now();
+          setVisible(true);
+        }, showDelayMs);
+      }
+      return;
+    }
+    if (showTimerRef.current !== null) {
+      clearTimeout(showTimerRef.current);
+      showTimerRef.current = null;
+      return;
+    }
+    if (visibleRef.current && hideTimerRef.current === null) {
+      const elapsed = shownAtRef.current !== null ? Date.now() - shownAtRef.current : minVisibleMs;
+      const remaining = Math.max(0, minVisibleMs - elapsed);
+      hideTimerRef.current = setTimeout(() => {
+        hideTimerRef.current = null;
+        shownAtRef.current = null;
+        setVisible(false);
+      }, remaining);
+    }
+  }, [active, showDelayMs, minVisibleMs]);
+  (0, _react.useEffect)(() => () => {
+    if (showTimerRef.current !== null) {
+      clearTimeout(showTimerRef.current);
+    }
+    if (hideTimerRef.current !== null) {
+      clearTimeout(hideTimerRef.current);
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      fade.setValue(0);
+      return;
+    }
+    if (reducedMotion) {
+      fade.setValue(1);
+      return;
+    }
+    _reactNative.Animated.timing(fade, {
+      toValue: 1,
+      duration: theme.motion.duration.normal,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: true
+    }).start();
+  }, [visible, reducedMotion, fade, theme]);
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      return;
+    }
+    const subscription = _reactNative.BackHandler.addEventListener('hardwareBackPress', () => true);
+    return () => {
+      subscription.remove();
+    };
+  }, [visible]);
+  const message = snapshot.message;
+  (0, _react.useEffect)(() => {
+    if (visible && message) {
+      _reactNative.AccessibilityInfo.announceForAccessibility(message);
+    }
+  }, [visible, message]);
+  const styles = (0, _react.useMemo)(() => buildStyles(), []);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    pointerEvents: "auto",
+    testID: testID,
+    accessible: true,
+    accessibilityViewIsModal: true,
+    accessibilityLiveRegion: "polite",
+    accessibilityLabel: message ?? 'Loading',
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    style: [styles.overlay, {
+      backgroundColor: backdropColor ?? theme.colors.background.overlay,
+      opacity: fade
+    }],
+    children: renderIndicator ? renderIndicator(message) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Spinner, {
+      size: "lg",
+      message: message
+    })
+  });
+};
+exports.LoaderOverlay = LoaderOverlay;
+const buildStyles = () => _reactNative.StyleSheet.create({
+  overlay: {
+    ..._reactNative.StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000
+  }
+});
+//# sourceMappingURL=LoaderOverlay.js.map

package/lib/commonjs/components/LoaderOverlay/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LoaderOverlay", {
+  enumerable: true,
+  get: function () {
+    return _LoaderOverlay.LoaderOverlay;
+  }
+});
+Object.defineProperty(exports, "loader", {
+  enumerable: true,
+  get: function () {
+    return _LoaderOverlay.loader;
+  }
+});
+Object.defineProperty(exports, "useLoader", {
+  enumerable: true,
+  get: function () {
+    return _LoaderOverlay.useLoader;
+  }
+});
+var _LoaderOverlay = require("./LoaderOverlay.js");
+//# sourceMappingURL=index.js.map