@tamagui/sheet 1.112.4 → 1.112.6

package/dist/esm/SheetImplementationCustom.mjs

@@ -4,7 +4,6 @@ import { useComposedRefs } from "@tamagui/compose-refs";
 import { currentPlatform, isClient, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { getConfig, Stack, Theme, useConfiguration, useEvent, useThemeName } from "@tamagui/core";
 import { Portal } from "@tamagui/portal";
-import { useKeyboardVisible } from "@tamagui/use-keyboard-visible";
 import React from "react";
 import { Dimensions, Keyboard, PanResponder, View } from "react-native-web";
 import { ParentSheetContext, SheetInsideSheetContext } from "./contexts.mjs";
@@ -15,302 +14,302 @@ import { useSheetProviderProps } from "./useSheetProviderProps.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 let hiddenSize = 10000.1,
   sheetHiddenStyleSheet = null;
-const SheetImplementationCustom = React.forwardRef(function (props, forwardedRef) {
-  const parentSheet = React.useContext(ParentSheetContext),
-    {
-      animation,
-      animationConfig: animationConfigProp,
-      modal = !1,
-      zIndex = parentSheet.zIndex + 1,
-      moveOnKeyboardChange = !1,
-      unmountChildrenWhenHidden = !1,
-      portalProps,
-      containerComponent: ContainerComponent = React.Fragment
-    } = props,
-    keyboardIsVisible = useKeyboardVisible(),
-    state = useSheetOpenState(props),
-    [overlayComponent, setOverlayComponent] = React.useState(null),
-    providerProps = useSheetProviderProps(props, state, {
-      onOverlayComponent: setOverlayComponent
-    }),
-    {
-      frameSize,
-      setFrameSize,
-      snapPoints,
-      snapPointsMode,
-      hasFit,
-      position,
-      setPosition,
-      scrollBridge,
-      screenSize,
-      setMaxContentSize,
-      maxSnapPoint
-    } = providerProps,
-    {
-      open,
-      controller,
-      isHidden
-    } = state,
-    sheetRef = React.useRef(null),
-    ref = useComposedRefs(forwardedRef, sheetRef),
-    animationConfig = (() => {
-      const [animationProp, animationPropConfig] = animation ? Array.isArray(animation) ? animation : [animation] : [];
-      return animationConfigProp ?? (animationProp ? {
-        ...getConfig().animations.animations[animationProp],
-        ...animationPropConfig
-      } : null);
-    })(),
-    [isShowingInnerSheet, setIsShowingInnerSheet] = React.useState(!1),
-    shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet,
-    parentSheetContext = React.useContext(SheetInsideSheetContext),
-    onInnerSheet = React.useCallback(hasChild => {
-      setIsShowingInnerSheet(hasChild);
-    }, []),
-    positions = React.useMemo(() => snapPoints.map(point => getYPositions(snapPointsMode, point, screenSize, frameSize)), [screenSize, frameSize, snapPoints, snapPointsMode]),
-    {
-      animationDriver
-    } = useConfiguration(),
-    {
-      useAnimatedNumber,
-      useAnimatedNumberStyle,
-      useAnimatedNumberReaction
-    } = animationDriver,
-    AnimatedView = animationDriver.View ?? Stack;
-  useIsomorphicLayoutEffect(() => {
-    if (parentSheetContext && open) return parentSheetContext(!0), () => {
-      parentSheetContext(!1);
-    };
-  }, [parentSheetContext, open]);
-  const nextParentContext = React.useMemo(() => ({
-      zIndex
-    }), [zIndex]),
-    animatedNumber = useAnimatedNumber(hiddenSize),
-    at = React.useRef(hiddenSize);
-  useAnimatedNumberReaction({
-    value: animatedNumber,
-    hostRef: sheetRef
-  }, React.useCallback(value => {
-    at.current = value, scrollBridge.paneY = value;
-  }, [animationDriver]));
-  function stopSpring() {
-    animatedNumber.stop(), scrollBridge.onFinishAnimate && (scrollBridge.onFinishAnimate(), scrollBridge.onFinishAnimate = void 0);
-  }
-  const hasntMeasured = at.current === hiddenSize,
-    animateTo = useEvent(position2 => {
-      if (frameSize === 0) return;
-      let toValue = isHidden || position2 === -1 ? screenSize : positions[position2];
-      if (at.current !== toValue) {
-        if (at.current = toValue, stopSpring(), hasntMeasured || isHidden) {
-          animatedNumber.setValue(screenSize, {
-            type: "timing",
-            duration: 0
-          }, () => {
-            isHidden || (toValue = positions[position2], at.current = toValue, animatedNumber.setValue(toValue, {
-              type: "spring",
-              ...animationConfig
-            }));
-          });
-          return;
-        }
-        animatedNumber.setValue(toValue, {
-          type: "spring",
-          ...animationConfig
-        });
-      }
-    });
-  useIsomorphicLayoutEffect(() => {
-    screenSize && hasntMeasured && animatedNumber.setValue(screenSize, {
-      type: "timing",
-      duration: 0
-    });
-  }, [hasntMeasured, screenSize]), useIsomorphicLayoutEffect(() => {
-    !frameSize || !screenSize || isHidden || hasntMeasured && !open || animateTo(position);
-  }, [isHidden, frameSize, screenSize, open, position]);
-  const disableDrag = props.disableDrag ?? controller?.disableDrag,
-    themeName = useThemeName(),
-    [isDragging, setIsDragging] = React.useState(!1),
-    panResponder = React.useMemo(() => {
-      if (disableDrag || !frameSize || isShowingInnerSheet) return;
-      const minY = positions[0];
-      scrollBridge.paneMinY = minY;
-      let startY = at.current;
-      function setPanning(val) {
-        setIsDragging(val), isClient && (sheetHiddenStyleSheet || (sheetHiddenStyleSheet = document.createElement("style"), typeof document.head < "u" && document.head.appendChild(sheetHiddenStyleSheet)), val ? sheetHiddenStyleSheet.innerText = ":root * { user-select: none !important; -webkit-user-select: none !important; }" : sheetHiddenStyleSheet.innerText = "");
-      }
-      const release = ({
-          vy,
-          dragAt
-        }) => {
-          isExternalDrag = !1, previouslyScrolling = !1, setPanning(!1);
-          const end = dragAt + startY + frameSize * vy * 0.2;
-          let closestPoint = 0,
-            dist = Number.POSITIVE_INFINITY;
-          for (let i = 0; i < positions.length; i++) {
-            const position2 = positions[i],
-              curDist = end > position2 ? end - position2 : position2 - end;
-            curDist < dist && (dist = curDist, closestPoint = i);
+const relativeDimensionTo = isWeb ? "window" : "screen",
+  SheetImplementationCustom = React.forwardRef(function (props, forwardedRef) {
+    const parentSheet = React.useContext(ParentSheetContext),
+      {
+        animation,
+        animationConfig: animationConfigProp,
+        modal = !1,
+        zIndex = parentSheet.zIndex + 1,
+        moveOnKeyboardChange = !1,
+        unmountChildrenWhenHidden = !1,
+        portalProps,
+        containerComponent: ContainerComponent = React.Fragment
+      } = props,
+      state = useSheetOpenState(props),
+      [overlayComponent, setOverlayComponent] = React.useState(null),
+      providerProps = useSheetProviderProps(props, state, {
+        onOverlayComponent: setOverlayComponent
+      }),
+      {
+        frameSize,
+        setFrameSize,
+        snapPoints,
+        snapPointsMode,
+        hasFit,
+        position,
+        setPosition,
+        scrollBridge,
+        screenSize,
+        setMaxContentSize,
+        maxSnapPoint
+      } = providerProps,
+      {
+        open,
+        controller,
+        isHidden
+      } = state,
+      sheetRef = React.useRef(null),
+      ref = useComposedRefs(forwardedRef, sheetRef),
+      animationConfig = (() => {
+        const [animationProp, animationPropConfig] = animation ? Array.isArray(animation) ? animation : [animation] : [];
+        return animationConfigProp ?? (animationProp ? {
+          ...getConfig().animations.animations[animationProp],
+          ...animationPropConfig
+        } : null);
+      })(),
+      [isShowingInnerSheet, setIsShowingInnerSheet] = React.useState(!1),
+      shouldHideParentSheet = !isWeb && modal && isShowingInnerSheet,
+      parentSheetContext = React.useContext(SheetInsideSheetContext),
+      onInnerSheet = React.useCallback(hasChild => {
+        setIsShowingInnerSheet(hasChild);
+      }, []),
+      positions = React.useMemo(() => snapPoints.map(point => getYPositions(snapPointsMode, point, screenSize, frameSize)), [screenSize, frameSize, snapPoints, snapPointsMode]),
+      {
+        animationDriver
+      } = useConfiguration(),
+      {
+        useAnimatedNumber,
+        useAnimatedNumberStyle,
+        useAnimatedNumberReaction
+      } = animationDriver,
+      AnimatedView = animationDriver.View ?? Stack;
+    useIsomorphicLayoutEffect(() => {
+      if (parentSheetContext && open) return parentSheetContext(!0), () => {
+        parentSheetContext(!1);
+      };
+    }, [parentSheetContext, open]);
+    const nextParentContext = React.useMemo(() => ({
+        zIndex
+      }), [zIndex]),
+      animatedNumber = useAnimatedNumber(hiddenSize),
+      at = React.useRef(hiddenSize);
+    useAnimatedNumberReaction({
+      value: animatedNumber,
+      hostRef: sheetRef
+    }, React.useCallback(value => {
+      at.current = value, scrollBridge.paneY = value;
+    }, [animationDriver]));
+    function stopSpring() {
+      animatedNumber.stop(), scrollBridge.onFinishAnimate && (scrollBridge.onFinishAnimate(), scrollBridge.onFinishAnimate = void 0);
+    }
+    const hasntMeasured = at.current === hiddenSize,
+      animateTo = useEvent(position2 => {
+        if (frameSize === 0) return;
+        let toValue = isHidden || position2 === -1 ? screenSize : positions[position2];
+        if (at.current !== toValue) {
+          if (at.current = toValue, stopSpring(), hasntMeasured || isHidden) {
+            animatedNumber.setValue(screenSize, {
+              type: "timing",
+              duration: 0
+            }, () => {
+              isHidden || (toValue = positions[position2], at.current = toValue, animatedNumber.setValue(toValue, {
+                type: "spring",
+                ...animationConfig
+              }));
+            });
+            return;
           }
-          setPosition(closestPoint), animateTo(closestPoint);
-        },
-        finish = (_e, state2) => {
-          release({
-            vy: state2.vy,
-            dragAt: state2.dy
+          animatedNumber.setValue(toValue, {
+            type: "spring",
+            ...animationConfig
           });
-        };
-      let previouslyScrolling = !1;
-      const onMoveShouldSet = (e, {
-          dy
-        }) => {
-          if (e.target === providerProps.handleRef.current) return !0;
-          const isScrolled = scrollBridge.y !== 0,
-            isDraggingUp = dy < 0,
-            isNearTop = scrollBridge.paneY - 5 <= scrollBridge.paneMinY;
-          return isScrolled ? (previouslyScrolling = !0, !1) : isNearTop && !isScrolled && isDraggingUp && !isWeb ? !1 : Math.abs(dy) > 5;
-        },
-        grant = () => {
-          setPanning(!0), stopSpring(), startY = at.current;
-        };
-      let isExternalDrag = !1;
-      return scrollBridge.drag = dy => {
-        isExternalDrag || (isExternalDrag = !0, grant());
-        const to = dy + startY;
-        animatedNumber.setValue(resisted(to, minY), {
-          type: "direct"
-        });
-      }, scrollBridge.release = release, PanResponder.create({
-        onMoveShouldSetPanResponder: onMoveShouldSet,
-        onPanResponderGrant: grant,
-        onPanResponderMove: (_e, {
-          dy
-        }) => {
-          const toFull = dy + startY,
-            to = resisted(toFull, minY);
-          animatedNumber.setValue(to, {
+        }
+      });
+    useIsomorphicLayoutEffect(() => {
+      screenSize && hasntMeasured && animatedNumber.setValue(screenSize, {
+        type: "timing",
+        duration: 0
+      });
+    }, [hasntMeasured, screenSize]), useIsomorphicLayoutEffect(() => {
+      !frameSize || !screenSize || isHidden || hasntMeasured && !open || animateTo(position);
+    }, [isHidden, frameSize, screenSize, open, position]);
+    const disableDrag = props.disableDrag ?? controller?.disableDrag,
+      themeName = useThemeName(),
+      [isDragging, setIsDragging] = React.useState(!1),
+      panResponder = React.useMemo(() => {
+        if (disableDrag || !frameSize || isShowingInnerSheet) return;
+        const minY = positions[0];
+        scrollBridge.paneMinY = minY;
+        let startY = at.current;
+        function setPanning(val) {
+          setIsDragging(val), isClient && (sheetHiddenStyleSheet || (sheetHiddenStyleSheet = document.createElement("style"), typeof document.head < "u" && document.head.appendChild(sheetHiddenStyleSheet)), val ? sheetHiddenStyleSheet.innerText = ":root * { user-select: none !important; -webkit-user-select: none !important; }" : sheetHiddenStyleSheet.innerText = "");
+        }
+        const release = ({
+            vy,
+            dragAt
+          }) => {
+            isExternalDrag = !1, previouslyScrolling = !1, setPanning(!1);
+            const end = dragAt + startY + frameSize * vy * 0.2;
+            let closestPoint = 0,
+              dist = Number.POSITIVE_INFINITY;
+            for (let i = 0; i < positions.length; i++) {
+              const position2 = positions[i],
+                curDist = end > position2 ? end - position2 : position2 - end;
+              curDist < dist && (dist = curDist, closestPoint = i);
+            }
+            setPosition(closestPoint), animateTo(closestPoint);
+          },
+          finish = (_e, state2) => {
+            release({
+              vy: state2.vy,
+              dragAt: state2.dy
+            });
+          };
+        let previouslyScrolling = !1;
+        const onMoveShouldSet = (e, {
+            dy
+          }) => {
+            if (e.target === providerProps.handleRef.current) return !0;
+            const isScrolled = scrollBridge.y !== 0,
+              isDraggingUp = dy < 0,
+              isNearTop = scrollBridge.paneY - 5 <= scrollBridge.paneMinY;
+            return isScrolled ? (previouslyScrolling = !0, !1) : isNearTop && !isScrolled && isDraggingUp && !isWeb ? !1 : Math.abs(dy) > 5;
+          },
+          grant = () => {
+            setPanning(!0), stopSpring(), startY = at.current;
+          };
+        let isExternalDrag = !1;
+        return scrollBridge.drag = dy => {
+          isExternalDrag || (isExternalDrag = !0, grant());
+          const to = dy + startY;
+          animatedNumber.setValue(resisted(to, minY), {
             type: "direct"
           });
-        },
-        onPanResponderEnd: finish,
-        onPanResponderTerminate: finish,
-        onPanResponderRelease: finish
-      });
-    }, [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition]),
-    handleAnimationViewLayout = React.useCallback(e => {
-      const next = Math.min(e.nativeEvent?.layout.height, Dimensions.get("screen").height);
-      next && setFrameSize(next);
-    }, [keyboardIsVisible]),
-    handleMaxContentViewLayout = React.useCallback(e => {
-      const next = Math.min(e.nativeEvent?.layout.height, Dimensions.get("screen").height);
-      next && setMaxContentSize(next);
-    }, [keyboardIsVisible]),
-    animatedStyle = useAnimatedNumberStyle(animatedNumber, val => {
-      "worklet";
+        }, scrollBridge.release = release, PanResponder.create({
+          onMoveShouldSetPanResponder: onMoveShouldSet,
+          onPanResponderGrant: grant,
+          onPanResponderMove: (_e, {
+            dy
+          }) => {
+            const toFull = dy + startY,
+              to = resisted(toFull, minY);
+            animatedNumber.setValue(to, {
+              type: "direct"
+            });
+          },
+          onPanResponderEnd: finish,
+          onPanResponderTerminate: finish,
+          onPanResponderRelease: finish
+        });
+      }, [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition]),
+      handleAnimationViewLayout = React.useCallback(e => {
+        const next = Math.min(e.nativeEvent?.layout.height, Dimensions.get(relativeDimensionTo).height);
+        next && setFrameSize(next);
+      }, []),
+      handleMaxContentViewLayout = React.useCallback(e => {
+        const next = Math.min(e.nativeEvent?.layout.height, Dimensions.get(relativeDimensionTo).height);
+        next && setMaxContentSize(next);
+      }, []),
+      animatedStyle = useAnimatedNumberStyle(animatedNumber, val => {
+        "worklet";
 
-      return {
-        transform: [{
-          translateY: frameSize === 0 ? hiddenSize : val
-        }]
-      };
-    }),
-    sizeBeforeKeyboard = React.useRef(null);
-  React.useEffect(() => {
-    if (isWeb || !moveOnKeyboardChange) return;
-    const keyboardShowListener = Keyboard.addListener(currentPlatform === "ios" ? "keyboardWillShow" : "keyboardDidShow", e => {
-        sizeBeforeKeyboard.current === null && (sizeBeforeKeyboard.current = isHidden || position === -1 ? screenSize : positions[position], animatedNumber.setValue(Math.max(sizeBeforeKeyboard.current - e.endCoordinates.height, 0), {
-          type: "timing",
-          duration: 250
-        }));
+        return {
+          transform: [{
+            translateY: frameSize === 0 ? hiddenSize : val
+          }]
+        };
       }),
-      keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
-        sizeBeforeKeyboard.current !== null && (animatedNumber.setValue(sizeBeforeKeyboard.current, {
-          type: "timing",
-          duration: 250
-        }), sizeBeforeKeyboard.current = null);
-      });
-    return () => {
-      keyboardDidHideListener.remove(), keyboardShowListener.remove();
-    };
-  }, [moveOnKeyboardChange, positions, position, isHidden]);
-  const [opacity, setOpacity] = React.useState(open ? 1 : 0);
-  open && opacity === 0 && setOpacity(1), React.useEffect(() => {
-    if (!open) {
-      const tm = setTimeout(() => {
-        setOpacity(0);
-      }, 400);
+      sizeBeforeKeyboard = React.useRef(null);
+    React.useEffect(() => {
+      if (isWeb || !moveOnKeyboardChange) return;
+      const keyboardShowListener = Keyboard.addListener(currentPlatform === "ios" ? "keyboardWillShow" : "keyboardDidShow", e => {
+          sizeBeforeKeyboard.current === null && (sizeBeforeKeyboard.current = isHidden || position === -1 ? screenSize : positions[position], animatedNumber.setValue(Math.max(sizeBeforeKeyboard.current - e.endCoordinates.height, 0), {
+            type: "timing",
+            duration: 250
+          }));
+        }),
+        keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", () => {
+          sizeBeforeKeyboard.current !== null && (animatedNumber.setValue(sizeBeforeKeyboard.current, {
+            type: "timing",
+            duration: 250
+          }), sizeBeforeKeyboard.current = null);
+        });
       return () => {
-        clearTimeout(tm);
+        keyboardDidHideListener.remove(), keyboardShowListener.remove();
       };
-    }
-  }, [open]);
-  const forcedContentHeight = hasFit ? void 0 : snapPointsMode === "percent" ? `${maxSnapPoint}${isWeb ? "dvh" : "%"}` : maxSnapPoint,
-    contents = /* @__PURE__ */jsx(ParentSheetContext.Provider, {
-      value: nextParentContext,
-      children: /* @__PURE__ */jsxs(SheetProvider, {
-        ...providerProps,
-        children: [/* @__PURE__ */jsx(AnimatePresence, {
-          custom: {
-            open
-          },
-          children: shouldHideParentSheet || !open ? null : overlayComponent
-        }), snapPointsMode !== "percent" && /* @__PURE__ */jsx(View, {
-          style: {
-            opacity: 0,
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            pointerEvents: "none"
-          },
-          onLayout: handleMaxContentViewLayout
-        }), /* @__PURE__ */jsx(AnimatedView, {
-          ref,
-          ...panResponder?.panHandlers,
-          onLayout: handleAnimationViewLayout,
-          ...(!isDragging && {
-            // @ts-ignore for CSS driver this is necessary to attach the transition
-            animation
-          }),
-          disableClassName: !0,
-          style: [{
-            position: "absolute",
-            zIndex,
-            width: "100%",
-            height: forcedContentHeight,
-            minHeight: forcedContentHeight,
-            opacity,
-            ...((shouldHideParentSheet || !open) && {
+    }, [moveOnKeyboardChange, positions, position, isHidden]);
+    const [opacity, setOpacity] = React.useState(open ? 1 : 0);
+    open && opacity === 0 && setOpacity(1), React.useEffect(() => {
+      if (!open) {
+        const tm = setTimeout(() => {
+          setOpacity(0);
+        }, 400);
+        return () => {
+          clearTimeout(tm);
+        };
+      }
+    }, [open]);
+    const forcedContentHeight = hasFit ? void 0 : snapPointsMode === "percent" ? `${maxSnapPoint}${isWeb ? "dvh" : "%"}` : maxSnapPoint,
+      contents = /* @__PURE__ */jsx(ParentSheetContext.Provider, {
+        value: nextParentContext,
+        children: /* @__PURE__ */jsxs(SheetProvider, {
+          ...providerProps,
+          children: [/* @__PURE__ */jsx(AnimatePresence, {
+            custom: {
+              open
+            },
+            children: shouldHideParentSheet || !open ? null : overlayComponent
+          }), snapPointsMode !== "percent" && /* @__PURE__ */jsx(View, {
+            style: {
+              opacity: 0,
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
               pointerEvents: "none"
+            },
+            onLayout: handleMaxContentViewLayout
+          }), /* @__PURE__ */jsx(AnimatedView, {
+            ref,
+            ...panResponder?.panHandlers,
+            onLayout: handleAnimationViewLayout,
+            ...(!isDragging && {
+              // @ts-ignore for CSS driver this is necessary to attach the transition
+              animation
+            }),
+            disableClassName: !0,
+            style: [{
+              position: "absolute",
+              zIndex,
+              width: "100%",
+              height: forcedContentHeight,
+              minHeight: forcedContentHeight,
+              opacity,
+              ...((shouldHideParentSheet || !open) && {
+                pointerEvents: "none"
+              })
+            }, animatedStyle],
+            children: props.children
+          })]
+        })
+      }),
+      adaptContext = React.useContext(AdaptParentContext),
+      shouldMountChildren = !!(opacity || !unmountChildrenWhenHidden);
+    if (modal) {
+      const modalContents = /* @__PURE__ */jsx(Portal, {
+        zIndex,
+        ...portalProps,
+        children: shouldMountChildren && /* @__PURE__ */jsx(ContainerComponent, {
+          children: /* @__PURE__ */jsx(Theme, {
+            forceClassName: !0,
+            name: themeName,
+            children: /* @__PURE__ */jsx(AdaptParentContext.Provider, {
+              value: adaptContext,
+              children: contents
             })
-          }, animatedStyle],
-          children: props.children
-        })]
-      })
-    }),
-    adaptContext = React.useContext(AdaptParentContext),
-    shouldMountChildren = !!(opacity || !unmountChildrenWhenHidden);
-  if (modal) {
-    const modalContents = /* @__PURE__ */jsx(Portal, {
-      zIndex,
-      ...portalProps,
-      children: shouldMountChildren && /* @__PURE__ */jsx(ContainerComponent, {
-        children: /* @__PURE__ */jsx(Theme, {
-          forceClassName: !0,
-          name: themeName,
-          children: /* @__PURE__ */jsx(AdaptParentContext.Provider, {
-            value: adaptContext,
-            children: contents
           })
         })
-      })
-    });
-    return isWeb ? modalContents : /* @__PURE__ */jsx(SheetInsideSheetContext.Provider, {
-      value: onInnerSheet,
-      children: modalContents
-    });
-  }
-  return contents;
-});
+      });
+      return isWeb ? modalContents : /* @__PURE__ */jsx(SheetInsideSheetContext.Provider, {
+        value: onInnerSheet,
+        children: modalContents
+      });
+    }
+    return contents;
+  });
 function getYPositions(mode, point, screenSize, frameSize) {
   if (!screenSize || !frameSize) return 0;
   if (mode === "mixed") {