@papyrus-sdk/ui-react-native 0.2.27 → 0.2.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -27137,6 +27137,17 @@ var Viewer = ({
27137
27137
  },
27138
27138
  [scaledListLayoutMetrics]
27139
27139
  );
27140
+ const scrollToPendingTarget = (0, import_react5.useCallback)(
27141
+ (animated) => {
27142
+ const target = pendingScrollTargetRef.current;
27143
+ if (target === null || listRef.current === null) return;
27144
+ listRef.current.scrollToOffset({
27145
+ offset: Math.max(0, getFallbackOffsetForIndex(target.listIndex)),
27146
+ animated
27147
+ });
27148
+ },
27149
+ [getFallbackOffsetForIndex]
27150
+ );
27140
27151
  const restoreOrientationScrollOffset = (0, import_react5.useCallback)(() => {
27141
27152
  if (pendingOrientationRestoreWidthRef.current !== windowWidth || pageCount <= 0 || isSingle || isWebView) {
27142
27153
  return;
@@ -27167,6 +27178,11 @@ var Viewer = ({
27167
27178
  }
27168
27179
  restoreOrientationScrollOffset();
27169
27180
  }, [restoreOrientationScrollOffset, windowWidth]);
27181
+ (0, import_react5.useEffect)(() => {
27182
+ if (pendingScrollTargetRef.current !== null) {
27183
+ scrollToPendingTarget(false);
27184
+ }
27185
+ }, [layoutRevision, scrollToPendingTarget]);
27170
27186
  const getItemLayout = (0, import_react5.useCallback)(
27171
27187
  (_, index) => {
27172
27188
  if (scaledListLayoutMetrics.itemCount === 0) {
@@ -27237,15 +27253,12 @@ var Viewer = ({
27237
27253
  },
27238
27254
  "scrollToPageSignal.flatList"
27239
27255
  );
27240
- listRef.current?.scrollToIndex({
27241
- index: target.listIndex,
27242
- animated: true,
27243
- viewPosition: 0
27244
- });
27256
+ scrollToPendingTarget(true);
27245
27257
  }, [
27246
27258
  clearPendingScrollRetry,
27247
27259
  clearPendingScrollTarget,
27248
27260
  ensurePageDimensions,
27261
+ scrollToPendingTarget,
27249
27262
  scrollToPageSignal,
27250
27263
  pageCount,
27251
27264
  setDocumentStateTracked,
@@ -27637,9 +27650,11 @@ var Viewer = ({
27637
27650
  onLayout: () => {
27638
27651
  captureViewerFrame(listRef.current);
27639
27652
  restoreOrientationScrollOffset();
27653
+ scrollToPendingTarget(false);
27640
27654
  },
27641
27655
  onContentSizeChange: (_, height) => {
27642
27656
  viewerContentHeightRef.current = height;
27657
+ scrollToPendingTarget(false);
27643
27658
  },
27644
27659
  onScrollToIndexFailed: ({ index, averageItemLength }) => {
27645
27660
  const dataLength = isDouble ? rows.length : pages.length;
@@ -27861,25 +27876,73 @@ function NativeSheet({
27861
27876
  }) {
27862
27877
  const insets = usePapyrusSafeAreaInsets();
27863
27878
  const palette = getNativeSheetPalette(Boolean(isDark));
27879
+ const { height: windowHeight } = (0, import_react_native5.useWindowDimensions)();
27880
+ const [rendered, setRendered] = (0, import_react7.useState)(visible);
27881
+ const renderedRef = (0, import_react7.useRef)(visible);
27882
+ const motion = (0, import_react7.useRef)(new import_react_native5.Animated.Value(visible ? 0 : 1)).current;
27883
+ const backdropOpacity = (0, import_react7.useRef)(new import_react_native5.Animated.Value(visible ? 1 : 0)).current;
27884
+ (0, import_react7.useEffect)(() => {
27885
+ motion.stopAnimation();
27886
+ backdropOpacity.stopAnimation();
27887
+ if (visible) {
27888
+ renderedRef.current = true;
27889
+ setRendered(true);
27890
+ motion.setValue(1);
27891
+ backdropOpacity.setValue(0);
27892
+ import_react_native5.Animated.parallel([
27893
+ import_react_native5.Animated.spring(motion, {
27894
+ toValue: 0,
27895
+ damping: 22,
27896
+ stiffness: 220,
27897
+ mass: 0.8,
27898
+ useNativeDriver: true
27899
+ }),
27900
+ import_react_native5.Animated.timing(backdropOpacity, {
27901
+ toValue: 1,
27902
+ duration: 180,
27903
+ useNativeDriver: true
27904
+ })
27905
+ ]).start();
27906
+ return;
27907
+ }
27908
+ if (!renderedRef.current) return;
27909
+ import_react_native5.Animated.parallel([
27910
+ import_react_native5.Animated.timing(motion, {
27911
+ toValue: 1,
27912
+ duration: 180,
27913
+ useNativeDriver: true
27914
+ }),
27915
+ import_react_native5.Animated.timing(backdropOpacity, {
27916
+ toValue: 0,
27917
+ duration: 140,
27918
+ useNativeDriver: true
27919
+ })
27920
+ ]).start(({ finished }) => {
27921
+ if (!finished) return;
27922
+ renderedRef.current = false;
27923
+ setRendered(false);
27924
+ });
27925
+ }, [backdropOpacity, motion, visible]);
27926
+ if (!rendered) return null;
27864
27927
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
27865
27928
  import_react_native5.Modal,
27866
27929
  {
27867
- animationType: "fade",
27930
+ animationType: "none",
27868
27931
  transparent: true,
27869
- visible,
27932
+ visible: rendered,
27870
27933
  onRequestClose: onClose,
27871
27934
  children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: styles5.root, children: [
27872
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
27935
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.Animated.View, { style: [styles5.backdrop, { opacity: backdropOpacity }], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
27873
27936
  import_react_native5.Pressable,
27874
27937
  {
27875
27938
  accessibilityRole: "button",
27876
27939
  accessibilityLabel: closeAccessibilityLabel,
27877
- style: styles5.backdrop,
27940
+ style: import_react_native5.StyleSheet.absoluteFill,
27878
27941
  onPress: onClose
27879
27942
  }
27880
- ),
27943
+ ) }),
27881
27944
  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
27882
- import_react_native5.View,
27945
+ import_react_native5.Animated.View,
27883
27946
  {
27884
27947
  style: [
27885
27948
  styles5.sheet,
@@ -27890,7 +27953,17 @@ function NativeSheet({
27890
27953
  backgroundColor: palette.backgroundColor,
27891
27954
  borderTopColor: palette.borderColor
27892
27955
  },
27893
- sheetStyle
27956
+ sheetStyle,
27957
+ {
27958
+ transform: [
27959
+ {
27960
+ translateY: motion.interpolate({
27961
+ inputRange: [0, 1],
27962
+ outputRange: [0, windowHeight]
27963
+ })
27964
+ }
27965
+ ]
27966
+ }
27894
27967
  ],
27895
27968
  children: [
27896
27969
  showHeader ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native5.View, { style: styles5.header, children: [
@@ -32871,7 +32944,11 @@ function ReadingShell({
32871
32944
  setSearchResultsOpen(false);
32872
32945
  closeMobileDestination();
32873
32946
  },
32874
- onOpenResults: () => setSearchResultsOpen(true)
32947
+ onOpenResults: () => {
32948
+ import_react_native20.Keyboard.dismiss();
32949
+ setSearchResultsOpen(true);
32950
+ closeMobileDestination();
32951
+ }
32875
32952
  }
32876
32953
  ),
32877
32954
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(