@hanzogui/sheet 7.0.0 → 7.3.0

package/dist/cjs/SheetImplementationCustom.cjs

@@ -0,0 +1,589 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var SheetImplementationCustom_exports = {};
+__export(SheetImplementationCustom_exports, {
+  SheetImplementationCustom: () => SheetImplementationCustom
+});
+module.exports = __toCommonJS(SheetImplementationCustom_exports);
+require("@hanzogui/adapt");
+var import_animate_presence = require("@hanzogui/animate-presence");
+var import_compose_refs = require("@hanzogui/compose-refs");
+var import_constants = require("@hanzogui/constants");
+var import_core = require("@hanzogui/core");
+var import_native = require("@hanzogui/native");
+var import_portal = require("@hanzogui/portal");
+var import_react = __toESM(require("react"), 1);
+var import_react_native = require("react-native-web");
+var import_contexts = require("./contexts.cjs");
+var import_GestureDetectorWrapper = require("./GestureDetectorWrapper.cjs");
+var import_GestureSheetContext = require("./GestureSheetContext.cjs");
+var import_helpers = require("./helpers.cjs");
+var import_SheetContext = require("./SheetContext.cjs");
+var import_useGestureHandlerPan = require("./useGestureHandlerPan.cjs");
+var import_useKeyboardControllerSheet = require("./useKeyboardControllerSheet.cjs");
+var import_useSheetOpenState = require("./useSheetOpenState.cjs");
+var import_useSheetProviderProps = require("./useSheetProviderProps.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const hiddenSize = 10000.1;
+let _cachedSafeAreaTop;
+function getSafeAreaTopInset() {
+  if (_cachedSafeAreaTop !== void 0) return _cachedSafeAreaTop;
+  _cachedSafeAreaTop = (0, import_native.getSafeArea)().getInsets().top;
+  return _cachedSafeAreaTop;
+}
+let sheetHiddenStyleSheet = null;
+const relativeDimensionTo = import_constants.isWeb ? "window" : "screen";
+const SheetImplementationCustom = import_react.default.forwardRef(function SheetImplementationCustom2(props, forwardedRef) {
+  const parentSheet = import_react.default.useContext(import_contexts.ParentSheetContext);
+  const {
+    transition,
+    transitionConfig: transitionConfigProp,
+    modal = false,
+    zIndex = parentSheet.zIndex + 1,
+    moveOnKeyboardChange = false,
+    unmountChildrenWhenHidden = false,
+    portalProps,
+    containerComponent: ContainerComponent = import_react.default.Fragment,
+    onAnimationComplete
+  } = props;
+  const state = (0, import_useSheetOpenState.useSheetOpenState)(props);
+  const [overlayComponent, setOverlayComponent] = import_react.default.useState(null);
+  const providerProps = (0, import_useSheetProviderProps.useSheetProviderProps)(props, state, {
+    onOverlayComponent: setOverlayComponent
+  });
+  const {
+    frameSize,
+    setFrameSize,
+    snapPoints,
+    snapPointsMode,
+    hasFit,
+    position,
+    setPosition,
+    scrollBridge,
+    screenSize,
+    setMaxContentSize,
+    maxSnapPoint
+  } = providerProps;
+  const {
+    open,
+    controller,
+    isHidden
+  } = state;
+  const openRef = import_react.default.useRef(open);
+  openRef.current = open;
+  const sheetRef = import_react.default.useRef(void 0);
+  const ref = (0, import_compose_refs.useComposedRefs)(forwardedRef, sheetRef, providerProps.contentRef);
+  const {
+    animationDriver
+  } = (0, import_core.useConfiguration)();
+  if (!animationDriver) throw new Error(`Sheet requires an animation driver to be set`);
+  const transitionConfig = (() => {
+    if (transitionConfigProp) return transitionConfigProp;
+    const [animationProp, animationPropConfig] = !transition ? [] : Array.isArray(transition) ? transition : [transition];
+    if (animationProp && animationDriver.animations?.[animationProp]) return {
+      ...animationDriver.animations[animationProp],
+      ...animationPropConfig
+    };
+    return null;
+  })();
+  const [isShowingInnerSheet, setIsShowingInnerSheet] = import_react.default.useState(false);
+  const shouldHideParentSheet = !import_constants.isWeb && modal && isShowingInnerSheet && (0, import_portal.needsPortalRepropagation)();
+  const sheetInsideSheet = import_react.default.useContext(import_contexts.SheetInsideSheetContext);
+  const onInnerSheet = import_react.default.useCallback(hasChild => {
+    setIsShowingInnerSheet(hasChild);
+  }, []);
+  const stableFrameSize = import_react.default.useRef(frameSize);
+  import_react.default.useEffect(() => {
+    if (open && frameSize) stableFrameSize.current = frameSize;
+  }, [open, frameSize]);
+  const effectiveFrameSize = open ? frameSize : stableFrameSize.current || frameSize;
+  const positions = import_react.default.useMemo(() => snapPoints.map(point => getYPositions(snapPointsMode, point, screenSize, effectiveFrameSize)), [screenSize, effectiveFrameSize, snapPoints, snapPointsMode]);
+  const {
+    keyboardHeight,
+    isKeyboardVisible,
+    dismissKeyboard,
+    pauseKeyboardHandler,
+    flushPendingHide
+  } = (0, import_useKeyboardControllerSheet.useKeyboardControllerSheet)({
+    enabled: !import_constants.isWeb && Boolean(moveOnKeyboardChange)
+  });
+  const [isDragging, setIsDragging_] = import_react.default.useState(false);
+  const isDraggingRef = import_react.default.useRef(false);
+  const setIsDragging = import_react.default.useCallback(val => {
+    isDraggingRef.current = val;
+    pauseKeyboardHandler.current = val;
+    setIsDragging_(val);
+    if (!val) flushPendingHide();
+  }, [pauseKeyboardHandler, flushPendingHide]);
+  const activePositionsRef = import_react.default.useRef(positions);
+  const activePositions = import_react.default.useMemo(() => {
+    if (isDragging || isDraggingRef.current) return activePositionsRef.current;
+    let result;
+    if (!isKeyboardVisible || keyboardHeight <= 0) result = positions;else {
+      const safeAreaTop = import_constants.isWeb ? 0 : getSafeAreaTopInset();
+      result = positions.map(p => {
+        if (screenSize && p >= screenSize) return p;
+        return Math.max(safeAreaTop, p - keyboardHeight);
+      });
+    }
+    activePositionsRef.current = result;
+    return result;
+  }, [positions, isKeyboardVisible, keyboardHeight, screenSize, isDragging]);
+  const {
+    useAnimatedNumber,
+    useAnimatedNumberStyle,
+    useAnimatedNumberReaction
+  } = animationDriver;
+  const AnimatedView = animationDriver.View ?? import_core.View;
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    if (!(sheetInsideSheet && open)) return;
+    sheetInsideSheet(true);
+    return () => {
+      sheetInsideSheet(false);
+    };
+  }, [sheetInsideSheet, open]);
+  const nextParentContext = import_react.default.useMemo(() => ({
+    zIndex
+  }), [zIndex]);
+  const startPosition = (0, import_core.useDidFinishSSR)() && screenSize ? screenSize : hiddenSize;
+  const animatedNumber = useAnimatedNumber(startPosition);
+  const at = import_react.default.useRef(startPosition);
+  const hasntMeasured = at.current === hiddenSize;
+  const [disableAnimation, setDisableAnimation] = (0, import_react.useState)(hasntMeasured);
+  const skipAdaptAnimation = import_react.default.useRef(false);
+  if (controller?.skipNextAnimation) skipAdaptAnimation.current = true;
+  const hasScrollView = import_react.default.useRef(false);
+  const opacityFallbackTimer = import_react.default.useRef(null);
+  useAnimatedNumberReaction({
+    value: animatedNumber,
+    hostRef: sheetRef
+  }, import_react.default.useCallback(value => {
+    at.current = value;
+    scrollBridge.paneY = value;
+    const minY = activePositions[0];
+    const wasAtTop = scrollBridge.isAtTop;
+    const nowAtTop = value <= minY + 5;
+    if (wasAtTop !== nowAtTop) {
+      scrollBridge.isAtTop = nowAtTop;
+      if (nowAtTop) {
+        if (scrollBridge.y > 0) {
+          scrollBridge.forceScrollTo?.(0);
+          scrollBridge.y = 0;
+        }
+        scrollBridge.scrollLockY = void 0;
+        scrollBridge.setScrollEnabled?.(true);
+      } else {
+        scrollBridge.scrollLockY = 0;
+        scrollBridge.setScrollEnabled?.(false);
+      }
+    }
+  }, [animationDriver, activePositions]));
+  function stopSpring() {
+    animatedNumber.stop();
+    if (scrollBridge.onFinishAnimate) {
+      scrollBridge.onFinishAnimate();
+      scrollBridge.onFinishAnimate = void 0;
+    }
+  }
+  const animateTo = (0, import_core.useEvent)((position2, animationOverride) => {
+    if (frameSize === 0) return;
+    let toValue = isHidden || position2 === -1 ? screenSize : activePositions[position2];
+    if (at.current === toValue) return;
+    at.current = toValue;
+    stopSpring();
+    const isOpenAnimation = position2 !== -1 && !isHidden;
+    if (opacityFallbackTimer.current) {
+      clearTimeout(opacityFallbackTimer.current);
+      opacityFallbackTimer.current = null;
+    }
+    const animationCompleteCallback = () => {
+      if (opacityFallbackTimer.current) {
+        clearTimeout(opacityFallbackTimer.current);
+        opacityFallbackTimer.current = null;
+      }
+      if (!isOpenAnimation && !openRef.current) setOpacity(0);
+      onAnimationComplete?.({
+        open: isOpenAnimation
+      });
+      controller?.onAnimationComplete?.({
+        open: isOpenAnimation
+      });
+    };
+    if (!isOpenAnimation) opacityFallbackTimer.current = setTimeout(() => {
+      opacityFallbackTimer.current = null;
+      if (!openRef.current) setOpacity(0);
+    }, 1e3);
+    if (skipAdaptAnimation.current) {
+      skipAdaptAnimation.current = false;
+      animatedNumber.setValue(toValue, {
+        type: "timing",
+        duration: 0
+      }, animationCompleteCallback);
+      return;
+    }
+    animatedNumber.setValue(toValue, animationOverride || {
+      type: "spring",
+      ...transitionConfig
+    }, animationCompleteCallback);
+  });
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    if (hasntMeasured && screenSize && frameSize) {
+      at.current = screenSize;
+      animatedNumber.setValue(screenSize, {
+        type: "timing",
+        duration: 0
+      }, () => {
+        setTimeout(() => {
+          setDisableAnimation(false);
+        }, 10);
+      });
+      return;
+    }
+    if (disableAnimation) return;
+    if (!frameSize || !screenSize || isHidden || hasntMeasured && !open) return;
+    animateTo(position);
+    if (position === -1) {
+      scrollBridge.scrollLock = false;
+      scrollBridge.scrollStartY = -1;
+    }
+    if (open && position >= 0) {
+      const isTopPosition = position === 0;
+      scrollBridge.isAtTop = isTopPosition;
+      if (isTopPosition) {
+        scrollBridge.scrollLockY = void 0;
+        scrollBridge.setScrollEnabled?.(true);
+      } else {
+        scrollBridge.scrollLockY = 0;
+        scrollBridge.setScrollEnabled?.(false);
+      }
+    }
+  }, [hasntMeasured, disableAnimation, isHidden, frameSize, screenSize, open, position]);
+  const disableDrag = props.disableDrag ?? controller?.disableDrag;
+  (0, import_core.useThemeName)();
+  const [blockPan, setBlockPan] = import_react.default.useState(false);
+  const panResponder = import_react.default.useMemo(() => {
+    if (disableDrag) return;
+    if (!frameSize) return;
+    if (isShowingInnerSheet) return;
+    const minY = positions[0];
+    scrollBridge.paneMinY = minY;
+    let startY = at.current;
+    function setPanning(val) {
+      setIsDragging(val);
+      if (!sheetHiddenStyleSheet) {
+        sheetHiddenStyleSheet = document.createElement("style");
+        if (typeof document.head !== "undefined") document.head.appendChild(sheetHiddenStyleSheet);
+      }
+      if (!val) sheetHiddenStyleSheet.innerText = "";else sheetHiddenStyleSheet.innerText = ":root * { user-select: none !important; -webkit-user-select: none !important; }";
+    }
+    const release = ({
+      vy
+    }) => {
+      scrollBridge.setParentDragging(false);
+      if (scrollBridge.scrollLock) return;
+      isExternalDrag = false;
+      previouslyScrolling = false;
+      setPanning(false);
+      const end = at.current + frameSize * vy * .2;
+      let closestPoint = 0;
+      let dist = Number.POSITIVE_INFINITY;
+      for (let i = 0; i < positions.length; i++) {
+        const position2 = positions[i];
+        const curDist = end > position2 ? end - position2 : position2 - end;
+        if (curDist < dist) {
+          dist = curDist;
+          closestPoint = i;
+        }
+      }
+      setPosition(closestPoint);
+      animateTo(closestPoint);
+    };
+    const finish = (_e, state2) => {
+      release({
+        vy: state2.vy,
+        dragAt: state2.dy
+      });
+    };
+    let previouslyScrolling = false;
+    const onMoveShouldSet = (e, {
+      dy
+    }) => {
+      function getShouldSet() {
+        if (e.target === providerProps.handleRef.current) return true;
+        if (scrollBridge.hasScrollableContent === true) {
+          if (scrollBridge.scrollLock) return false;
+          const isScrolled = scrollBridge.y !== 0;
+          const isDraggingUp = dy < 0;
+          const isNearTop = scrollBridge.paneY - 5 <= scrollBridge.paneMinY;
+          if (isScrolled) return false;
+          if (isNearTop) {
+            if (hasScrollView.current && isDraggingUp) return false;
+          }
+        }
+        return Math.abs(dy) > 10;
+      }
+      const granted = getShouldSet();
+      if (granted) scrollBridge.setParentDragging(true);
+      return granted;
+    };
+    const grant = () => {
+      setPanning(true);
+      stopSpring();
+      startY = at.current;
+    };
+    let isExternalDrag = false;
+    scrollBridge.drag = dy => {
+      if (!isExternalDrag) {
+        isExternalDrag = true;
+        grant();
+      }
+      const to = dy + startY;
+      animatedNumber.setValue((0, import_helpers.resisted)(to, minY), {
+        type: "direct"
+      });
+    };
+    scrollBridge.release = release;
+    scrollBridge.snapToPosition = positionIndex => {
+      isExternalDrag = false;
+      setPanning(false);
+      setPosition(positionIndex);
+      animateTo(positionIndex);
+    };
+    return import_react_native.PanResponder.create({
+      onMoveShouldSetPanResponder: onMoveShouldSet,
+      onPanResponderGrant: grant,
+      onPanResponderMove: (_e, {
+        dy
+      }) => {
+        const toFull = dy + startY;
+        const to = (0, import_helpers.resisted)(toFull, minY);
+        if (to <= minY) scrollBridge.setParentDragging(false);else scrollBridge.setParentDragging(true);
+        animatedNumber.setValue(to, {
+          type: "direct"
+        });
+      },
+      onPanResponderEnd: finish,
+      onPanResponderTerminate: finish,
+      onPanResponderRelease: finish
+    });
+  }, [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition]);
+  import_react.default.useEffect(() => {
+    if (isDragging || isHidden || !open || disableAnimation) return;
+    if (!frameSize || !screenSize) return;
+    animateTo(position, {
+      type: "timing",
+      duration: 250
+    });
+  }, [isKeyboardVisible, keyboardHeight]);
+  const wasDragging = import_react.default.useRef(false);
+  import_react.default.useEffect(() => {
+    if (isDragging) {
+      wasDragging.current = true;
+      return;
+    }
+    if (!wasDragging.current) return;
+    wasDragging.current = false;
+    if (!frameSize || !screenSize || isHidden || !open) return;
+    animateTo(position);
+  }, [isDragging]);
+  import_react.default.useEffect(() => {
+    if (!open && isKeyboardVisible) dismissKeyboard();
+  }, [open]);
+  const {
+    panGesture,
+    panGestureRef,
+    gestureHandlerEnabled
+  } = (0, import_useGestureHandlerPan.useGestureHandlerPan)({
+    positions: activePositions,
+    frameSize,
+    setPosition,
+    animateTo,
+    stopSpring,
+    scrollBridge,
+    setIsDragging,
+    getCurrentPosition: () => at.current,
+    resisted: import_helpers.resisted,
+    disableDrag,
+    isShowingInnerSheet,
+    setAnimatedPosition: val => {
+      at.current = val;
+      animatedNumber.setValue(val, {
+        type: "direct"
+      });
+    },
+    pauseKeyboardHandler
+  });
+  const handleAnimationViewLayout = (0, import_core.useEvent)(e => {
+    if (!open && stableFrameSize.current !== 0) return;
+    const layoutHeight = e.nativeEvent?.layout.height;
+    const next = modal ? Math.min(layoutHeight, import_react_native.Dimensions.get(relativeDimensionTo).height) : layoutHeight;
+    if (!next) return;
+    setFrameSize(next);
+  });
+  const handleMaxContentViewLayout = import_react.default.useCallback(e => {
+    const next = Math.min(e.nativeEvent?.layout.height, import_react_native.Dimensions.get(relativeDimensionTo).height);
+    if (!next) return;
+    setMaxContentSize(next);
+  }, []);
+  const animatedStyle = useAnimatedNumberStyle(animatedNumber, import_react.default.useCallback(val => {
+    "worklet";
+
+    return {
+      transform: [{
+        translateY: frameSize === 0 ? hiddenSize : val
+      }]
+    };
+  }, [frameSize]));
+  const [opacity, setOpacity] = import_react.default.useState(open ? 1 : 0);
+  if (open && opacity === 0) {
+    setOpacity(1);
+    if (opacityFallbackTimer.current) {
+      clearTimeout(opacityFallbackTimer.current);
+      opacityFallbackTimer.current = null;
+    }
+  }
+  const forcedContentHeight = hasFit ? void 0 : snapPointsMode === "percent" ? `${maxSnapPoint}${import_constants.isWeb ? modal ? "dvh" : "%" : "%"}` : maxSnapPoint;
+  const setHasScrollView = import_react.default.useCallback(val => {
+    hasScrollView.current = val;
+  }, []);
+  let contents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_core.LayoutMeasurementController, {
+    disable: !open,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_contexts.ParentSheetContext.Provider, {
+      value: nextParentContext,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_SheetContext.SheetProvider, {
+        ...providerProps,
+        setHasScrollView,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_GestureSheetContext.GestureSheetProvider, {
+          isDragging,
+          blockPan,
+          setBlockPan,
+          panGesture,
+          panGestureRef,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
+            custom: {
+              open
+            },
+            children: shouldHideParentSheet || !open ? null : overlayComponent
+          }), snapPointsMode !== "percent" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
+            style: {
+              opacity: 0,
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              pointerEvents: "none"
+            },
+            onLayout: handleMaxContentViewLayout
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimatedView, {
+            ref,
+            onLayout: handleAnimationViewLayout,
+            transition: isDragging || disableAnimation ? null : transition,
+            disableClassName: true,
+            style: [{
+              position: "absolute",
+              zIndex,
+              width: "100%",
+              height: forcedContentHeight,
+              minHeight: forcedContentHeight,
+              opacity: !shouldHideParentSheet ? opacity : 0,
+              ...((shouldHideParentSheet || !open) && {
+                pointerEvents: "none"
+              })
+            }, animatedStyle],
+            children: gestureHandlerEnabled && panGesture ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GestureDetectorWrapper.GestureDetectorWrapper, {
+              gesture: panGesture,
+              style: {
+                flex: 1
+              },
+              children: props.children
+            }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
+              ...panResponder?.panHandlers,
+              style: {
+                flex: 1,
+                width: "100%",
+                height: "100%"
+              },
+              children: props.children
+            })
+          })]
+        })
+      })
+    })
+  });
+  const shouldMountChildren = unmountChildrenWhenHidden ? !!opacity : true;
+  if (modal) {
+    const modalContents = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_portal.Portal, {
+      stackZIndex: zIndex,
+      ...portalProps,
+      children: shouldMountChildren && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContainerComponent, {
+        children: contents
+      })
+    });
+    if (import_constants.isWeb) return modalContents;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_contexts.SheetInsideSheetContext.Provider, {
+      value: onInnerSheet,
+      children: modalContents
+    });
+  }
+  return contents;
+});
+function getYPositions(mode, point, screenSize, frameSize) {
+  if (!screenSize || !frameSize) return 0;
+  if (mode === "mixed") {
+    if (typeof point === "number") return screenSize - Math.min(screenSize, Math.max(0, point));
+    if (point === "fit") return screenSize - Math.min(screenSize, frameSize);
+    if (point.endsWith("%")) {
+      const pct2 = Math.min(100, Math.max(0, Number(point.slice(0, -1)))) / 100;
+      if (Number.isNaN(pct2)) {
+        console.warn("Invalid snapPoint percentage string");
+        return 0;
+      }
+      return Math.round(screenSize - pct2 * screenSize);
+    }
+    console.warn("Invalid snapPoint unknown value");
+    return 0;
+  }
+  if (mode === "fit") {
+    if (point === 0) return screenSize;
+    return screenSize - Math.min(screenSize, frameSize);
+  }
+  if (mode === "constant" && typeof point === "number") return screenSize - Math.min(screenSize, Math.max(0, point));
+  const pct = Math.min(100, Math.max(0, Number(point))) / 100;
+  if (Number.isNaN(pct)) {
+    console.warn("Invalid snapPoint percentage");
+    return 0;
+  }
+  return Math.round(screenSize - pct * screenSize);
+}