@pisell/private-materials 6.12.371 → 6.12.373

package/es/pro/skuDetailModal/index.js

@@ -75,16 +75,6 @@ const getBodyScaleY = () => {
 	const matrix = new DOMMatrixReadOnly(transform);
 	return Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d) || 1;
 };
-const waitForModalEntranceFrame = () => {
-	if (typeof window === "undefined") return Promise.resolve();
-	return new Promise((resolve) => {
-		requestAnimationFrame(() => {
-			requestAnimationFrame(() => {
-				window.setTimeout(() => resolve(), 10);
-			});
-		});
-	});
-};
 const toValidDayjs = (value) => {
 	if (!value) return null;
 	const parsed = dayjs(value);
@@ -198,6 +188,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 	const inventory = useContext(SalesInventoryContext);
 	const [baseProductData, setProductData] = useState(null);
 	const [detailLoading, setDetailLoading] = useState(false);
+	const [modalEntered, setModalEntered] = useState(false);
+	const detailContentLoading = detailLoading || !modalEntered;
 	const [appearanceConfirmPending, setAppearanceConfirmPending] = useState(false);
 	const appearanceConfirmTaskRef = useRef(null);
 	const [note, setNote] = useState("");
@@ -514,7 +506,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 		updateSelectionFlowCanScrollDown(canScrollDown);
 	}, [resolveSelectionFlowScrollContainer, updateSelectionFlowCanScrollDown]);
 	useLayoutEffect(() => {
-		if (!open || !isMobile || detailLoading || !productData) {
+		if (!open || !isMobile || detailContentLoading || !productData) {
 			updateSelectionFlowCanScrollDown(false);
 			return;
 		}
@@ -564,7 +556,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 		};
 	}, [
 		currentStep,
-		detailLoading,
+		detailContentLoading,
 		isCustomSelectionFlow,
 		isKioskPlatform,
 		isMobile,
@@ -980,8 +972,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 			});
 		},
 		open: function() {
-			var _ref19 = _asyncToGenerator(function* (data) {
-				var _product_id, _selectionFlowService2, _noteDiagnosticsRef$c2, _product_id2, _enrichmentAbortRef$c2, _skuDetailConfig$enab, _skuDetailConfig$isSh, _skuDetailConfig$isSh2, _skuDetailConfig$isSh3, _skuDetailConfig$isSh4, _skuDetailConfig$isSh5, _skuDetailConfig$hide, _skuDetailConfig$isSh6, _skuDetailConfig$isSh7, _skuDetailConfig$isSh8, _skuDetailConfig$exte, _skuDetailConfig$useC, _skuDetailConfig$cust, _skuDetailConfig$isCa, _skuDetailConfig, _skuDetailConfig2, _data$bundle_group, _data$_extend, _data$_extend2, _data$discount_list, _ref17, _data$_extend3, _data$_extend4, _data$_extend5, _data$discount_list$f, _data$discount_list2, _ref18, _data$_extend$priceOv, _data$_extend7;
+			var _ref18 = _asyncToGenerator(function* (data) {
+				var _product_id, _selectionFlowService2, _noteDiagnosticsRef$c2, _product_id2, _enrichmentAbortRef$c2, _skuDetailConfig$enab, _skuDetailConfig$isSh, _skuDetailConfig$isSh2, _skuDetailConfig$isSh3, _skuDetailConfig$isSh4, _skuDetailConfig$isSh5, _skuDetailConfig$hide, _skuDetailConfig$isSh6, _skuDetailConfig$isSh7, _skuDetailConfig$isSh8, _skuDetailConfig$exte, _skuDetailConfig$useC, _skuDetailConfig$cust, _skuDetailConfig$isCa, _skuDetailConfig, _skuDetailConfig2, _data$bundle_group, _data$_extend, _data$_extend2, _data$discount_list, _ref16, _data$_extend3, _data$_extend4, _data$_extend5, _data$discount_list$f, _data$discount_list2, _ref17, _data$_extend$priceOv, _data$_extend7;
 				const shownLog = {
 					product_id: String((_product_id = data.product_id) !== null && _product_id !== void 0 ? _product_id : data.id),
 					mode: ((_selectionFlowService2 = data.selectionFlowServices) === null || _selectionFlowService2 === void 0 ? void 0 : _selectionFlowService2.selectionFlowMode) || ("date" in data && !("_extend" in data) ? "create" : "edit"),
@@ -1005,18 +997,12 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 				setInventorySelectorSnapshot(null);
 				flowDateHydrationVersionRef.current += 1;
 				const isCurrentOpenTask = () => openTaskIdRef.current === currentTaskId;
-				const showModalShellBeforeHydration = function() {
-					var _ref8 = _asyncToGenerator(function* () {
-						setProductData(null);
-						setDetailLoading(true);
-						setOpen(true);
-						yield waitForModalEntranceFrame();
-						return isCurrentOpenTask();
-					});
-					return function showModalShellBeforeHydration() {
-						return _ref8.apply(this, arguments);
-					};
-				}();
+				if (!open) setModalEntered(false);
+				const showModalShellBeforeHydration = () => {
+					setProductData(null);
+					setDetailLoading(true);
+					setOpen(true);
+				};
 				setCurrentStep(0);
 				lateQuantityReviewStepIndexRef.current = null;
 				lateQuantityRevalidationTaskRef.current = null;
@@ -1077,7 +1063,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 				};
 				setSkuDetailConfig(config);
 				if ("date" in data && !("_extend" in data)) {
-					var _data$is_eject2, _ref9, _ref10, _initialExtend$price, _data$productData2, _apiData$duration, _apiData$schedules, _apiData$scheduleIds, _apiData$extension_ty, _ref11, _variantData$variant_, _ref12, _variantData$variant, _apiData$option_group, _apiData$bundle_group, _apiData$product_reso, _apiData$holder_confi, _ref13, _data$initialQuantity, _initialExtend$price2, _initialExtend$total, _initialExtend$origin, _ref14, _initialExtend$note, _ref15, _is_eject, _ref16, _hydratedExtend$quant, _hydratedExtend$price;
+					var _data$is_eject2, _ref8, _ref9, _initialExtend$price, _data$productData2, _apiData$duration, _apiData$schedules, _apiData$scheduleIds, _apiData$extension_ty, _ref10, _variantData$variant_, _ref11, _variantData$variant, _apiData$option_group, _apiData$bundle_group, _apiData$product_reso, _apiData$holder_confi, _ref12, _data$initialQuantity, _initialExtend$price2, _initialExtend$total, _initialExtend$origin, _ref13, _initialExtend$note, _ref14, _is_eject, _ref15, _hydratedExtend$quant, _hydratedExtend$price;
 					logger === null || logger === void 0 || logger.addLog({
 						type: "info",
 						title: "sku_detail_modal_open_create",
@@ -1085,9 +1071,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 					});
 					openParamsRef.current = data;
 					const shouldOpenBeforeHydration = hasConfiguredSelectionFlow || Number((_data$is_eject2 = data.is_eject) !== null && _data$is_eject2 !== void 0 ? _data$is_eject2 : 0) === 1 || isWeighingProduct(data.productData);
-					if (shouldOpenBeforeHydration) {
-						if (!(yield showModalShellBeforeHydration())) return;
-					} else {
+					if (shouldOpenBeforeHydration) showModalShellBeforeHydration();
+					else {
 						setOpen(false);
 						setProductData(null);
 						setDetailLoading(false);
@@ -1108,7 +1093,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 					if ((config === null || config === void 0 ? void 0 : config.useCustomData) && (config === null || config === void 0 ? void 0 : config.customData)) apiData = _objectSpread2(_objectSpread2({}, apiData), (config === null || config === void 0 ? void 0 : config.customData) || {});
 					const initialCacheItem = data.initialCacheItem;
 					const initialExtend = (initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem._extend) || {};
-					const basePrice = Number((_ref9 = (_ref10 = (_initialExtend$price = initialExtend.price) !== null && _initialExtend$price !== void 0 ? _initialExtend$price : apiData === null || apiData === void 0 ? void 0 : apiData.price) !== null && _ref10 !== void 0 ? _ref10 : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.price) !== null && _ref9 !== void 0 ? _ref9 : 0);
+					const basePrice = Number((_ref8 = (_ref9 = (_initialExtend$price = initialExtend.price) !== null && _initialExtend$price !== void 0 ? _initialExtend$price : apiData === null || apiData === void 0 ? void 0 : apiData.price) !== null && _ref9 !== void 0 ? _ref9 : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.price) !== null && _ref8 !== void 0 ? _ref8 : 0);
 					let variantData = formatVariant(config, data === null || data === void 0 || (_data$productData2 = data.productData) === null || _data$productData2 === void 0 ? void 0 : _data$productData2.variant, apiData);
 					const initialSkuValue = resolveSkuValueCandidates([
 						initialExtend.skuValue,
@@ -1128,8 +1113,8 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 						schedules: (_apiData$schedules = apiData === null || apiData === void 0 ? void 0 : apiData.schedules) !== null && _apiData$schedules !== void 0 ? _apiData$schedules : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.schedules,
 						"schedule.ids": (_apiData$scheduleIds = apiData === null || apiData === void 0 ? void 0 : apiData["schedule.ids"]) !== null && _apiData$scheduleIds !== void 0 ? _apiData$scheduleIds : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem["schedule.ids"],
 						extension_type: (_apiData$extension_ty = apiData === null || apiData === void 0 ? void 0 : apiData.extension_type) !== null && _apiData$extension_ty !== void 0 ? _apiData$extension_ty : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.extension_type,
-						variant_group: (_ref11 = (_variantData$variant_ = variantData === null || variantData === void 0 ? void 0 : variantData.variant_group) !== null && _variantData$variant_ !== void 0 ? _variantData$variant_ : apiData === null || apiData === void 0 ? void 0 : apiData.variant_group) !== null && _ref11 !== void 0 ? _ref11 : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.variant_group,
-						variant: (_ref12 = (_variantData$variant = variantData === null || variantData === void 0 ? void 0 : variantData.variant) !== null && _variantData$variant !== void 0 ? _variantData$variant : apiData === null || apiData === void 0 ? void 0 : apiData.variant) !== null && _ref12 !== void 0 ? _ref12 : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.variant,
+						variant_group: (_ref10 = (_variantData$variant_ = variantData === null || variantData === void 0 ? void 0 : variantData.variant_group) !== null && _variantData$variant_ !== void 0 ? _variantData$variant_ : apiData === null || apiData === void 0 ? void 0 : apiData.variant_group) !== null && _ref10 !== void 0 ? _ref10 : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.variant_group,
+						variant: (_ref11 = (_variantData$variant = variantData === null || variantData === void 0 ? void 0 : variantData.variant) !== null && _variantData$variant !== void 0 ? _variantData$variant : apiData === null || apiData === void 0 ? void 0 : apiData.variant) !== null && _ref11 !== void 0 ? _ref11 : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.variant,
 						option_group: (_apiData$option_group = apiData === null || apiData === void 0 ? void 0 : apiData.option_group) !== null && _apiData$option_group !== void 0 ? _apiData$option_group : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.option_group,
 						bundle_group: (_apiData$bundle_group = apiData === null || apiData === void 0 ? void 0 : apiData.bundle_group) !== null && _apiData$bundle_group !== void 0 ? _apiData$bundle_group : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.bundle_group,
 						product_resource: (_apiData$product_reso = apiData === null || apiData === void 0 ? void 0 : apiData.product_resource) !== null && _apiData$product_reso !== void 0 ? _apiData$product_reso : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.product_resource
@@ -1137,11 +1122,11 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 						_data: _objectSpread2(_objectSpread2({}, (apiData === null || apiData === void 0 ? void 0 : apiData._data) || {}), (initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem._data) || {}),
 						_extend: _objectSpread2(_objectSpread2(_objectSpread2({}, (apiData === null || apiData === void 0 ? void 0 : apiData._extend) || {}), initialExtend), {}, {
 							product_name: resolveDisplayText(initialExtend.product_name || (apiData === null || apiData === void 0 ? void 0 : apiData.title) || (apiData === null || apiData === void 0 ? void 0 : apiData.product_name)),
-							quantity: (_ref13 = (_data$initialQuantity = data.initialQuantity) !== null && _data$initialQuantity !== void 0 ? _data$initialQuantity : initialExtend.quantity) !== null && _ref13 !== void 0 ? _ref13 : 1,
+							quantity: (_ref12 = (_data$initialQuantity = data.initialQuantity) !== null && _data$initialQuantity !== void 0 ? _data$initialQuantity : initialExtend.quantity) !== null && _ref12 !== void 0 ? _ref12 : 1,
 							price: (_initialExtend$price2 = initialExtend.price) !== null && _initialExtend$price2 !== void 0 ? _initialExtend$price2 : basePrice,
 							total: (_initialExtend$total = initialExtend.total) !== null && _initialExtend$total !== void 0 ? _initialExtend$total : basePrice,
 							origin_total: (_initialExtend$origin = initialExtend.origin_total) !== null && _initialExtend$origin !== void 0 ? _initialExtend$origin : basePrice,
-							note: (_ref14 = (_initialExtend$note = initialExtend.note) !== null && _initialExtend$note !== void 0 ? _initialExtend$note : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.note) !== null && _ref14 !== void 0 ? _ref14 : "",
+							note: (_ref13 = (_initialExtend$note = initialExtend.note) !== null && _initialExtend$note !== void 0 ? _initialExtend$note : initialCacheItem === null || initialCacheItem === void 0 ? void 0 : initialCacheItem.note) !== null && _ref13 !== void 0 ? _ref13 : "",
 							skuValue: initialSkuValue
 						})
 					});
@@ -1191,7 +1176,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 							return;
 						}
 					}
-					if (!(Number((_ref15 = (_is_eject = apiData === null || apiData === void 0 ? void 0 : apiData.is_eject) !== null && _is_eject !== void 0 ? _is_eject : data.is_eject) !== null && _ref15 !== void 0 ? _ref15 : 0) === 1 || Number(data.is_eject) === 1 && Boolean(resolveDetailAppearance(config, hydratedData)) || isWeighingProduct(apiData)) && !hasEffectiveSelectionFlow && !confirmDisabledRef.current) {
+					if (!(Number((_ref14 = (_is_eject = apiData === null || apiData === void 0 ? void 0 : apiData.is_eject) !== null && _is_eject !== void 0 ? _is_eject : data.is_eject) !== null && _ref14 !== void 0 ? _ref14 : 0) === 1 || Number(data.is_eject) === 1 && Boolean(resolveDetailAppearance(config, hydratedData)) || isWeighingProduct(apiData)) && !hasEffectiveSelectionFlow && !confirmDisabledRef.current) {
 						var _extend, _bookingState$booking2;
 						const stockResult = getStockValidationResult({
 							value: hydratedData === null || hydratedData === void 0 || (_extend = hydratedData._extend) === null || _extend === void 0 ? void 0 : _extend.skuValue,
@@ -1227,7 +1212,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 					setProductData(hydratedData);
 					const hydratedExtend = hydratedData._extend || {};
 					setNote(hydratedExtend.note || "");
-					setQuantity(isWeighingProduct(apiData) ? 1 : (_ref16 = (_hydratedExtend$quant = hydratedExtend.quantity) !== null && _hydratedExtend$quant !== void 0 ? _hydratedExtend$quant : apiData === null || apiData === void 0 ? void 0 : apiData.min_num_unit) !== null && _ref16 !== void 0 ? _ref16 : 1);
+					setQuantity(isWeighingProduct(apiData) ? 1 : (_ref15 = (_hydratedExtend$quant = hydratedExtend.quantity) !== null && _hydratedExtend$quant !== void 0 ? _hydratedExtend$quant : apiData === null || apiData === void 0 ? void 0 : apiData.min_num_unit) !== null && _ref15 !== void 0 ? _ref15 : 1);
 					setDiscounts(initialCacheItem ? (hydratedData.discount_list || []).filter((item) => item.type !== "product") : []);
 					setWeighingData(getWeighingValueFromProductSku(initialCacheItem) || initialExtend.weighing || null);
 					setSkuValue(initialSkuValue);
@@ -1254,7 +1239,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 				});
 				openParamsRef.current = null;
 				if ((Array.isArray(data === null || data === void 0 || (_skuDetailConfig = data.skuDetailConfig) === null || _skuDetailConfig === void 0 ? void 0 : _skuDetailConfig.steps) || typeof (data === null || data === void 0 || (_skuDetailConfig2 = data.skuDetailConfig) === null || _skuDetailConfig2 === void 0 ? void 0 : _skuDetailConfig2.resolveSteps) === "function") && process.env.NODE_ENV !== "production") console.warn("[SkuDetailModal] 自定义 steps 一期仅在 create 模式生效，edit 继续使用旧流程。");
-				if (!(yield showModalShellBeforeHydration())) return;
+				showModalShellBeforeHydration();
 				shownLog.dataSource = "local";
 				const _data = cloneDeep(data);
 				if ((_data === null || _data === void 0 ? void 0 : _data.is_bundle) && !(_data === null || _data === void 0 || (_data$bundle_group = _data.bundle_group) === null || _data$bundle_group === void 0 || (_data$bundle_group = _data$bundle_group[0]) === null || _data$bundle_group === void 0 || (_data$bundle_group = _data$bundle_group.bundle_item) === null || _data$bundle_group === void 0 ? void 0 : _data$bundle_group[0].title)) {
@@ -1302,7 +1287,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 				setNote((_data === null || _data === void 0 || (_data$_extend = _data._extend) === null || _data$_extend === void 0 ? void 0 : _data$_extend.note) || "");
 				setQuantity(isWeighingProduct(_data) ? 1 : (_data === null || _data === void 0 || (_data$_extend2 = _data._extend) === null || _data$_extend2 === void 0 ? void 0 : _data$_extend2.quantity) || 1);
 				setDiscounts((_data === null || _data === void 0 || (_data$discount_list = _data.discount_list) === null || _data$discount_list === void 0 ? void 0 : _data$discount_list.filter((item) => item.type !== "product")) || []);
-				setWeighingData(getWeighingValueFromProductSku(_data) || (_data === null || _data === void 0 || (_ref17 = _data._extend) === null || _ref17 === void 0 ? void 0 : _ref17.weighing) || null);
+				setWeighingData(getWeighingValueFromProductSku(_data) || (_data === null || _data === void 0 || (_ref16 = _data._extend) === null || _ref16 === void 0 ? void 0 : _ref16.weighing) || null);
 				const recordSkuValue = resolveSkuValueCandidates([
 					_data === null || _data === void 0 || (_data$_extend3 = _data._extend) === null || _data$_extend3 === void 0 ? void 0 : _data$_extend3._skuValue,
 					_data === null || _data === void 0 || (_data$_extend4 = _data._extend) === null || _data$_extend4 === void 0 ? void 0 : _data$_extend4.other,
@@ -1321,7 +1306,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 					var _data$_extend6;
 					discountListPriceOverride = new Decimal(_data === null || _data === void 0 || (_data$_extend6 = _data._extend) === null || _data$_extend6 === void 0 ? void 0 : _data$_extend6.origin_total).minus(new Decimal(discountListPriceOverride)).toNumber();
 				}
-				setPriceOverride((_ref18 = (_data$_extend$priceOv = _data === null || _data === void 0 || (_data$_extend7 = _data._extend) === null || _data$_extend7 === void 0 ? void 0 : _data$_extend7.priceOverride) !== null && _data$_extend$priceOv !== void 0 ? _data$_extend$priceOv : discountListPriceOverride) !== null && _ref18 !== void 0 ? _ref18 : null);
+				setPriceOverride((_ref17 = (_data$_extend$priceOv = _data === null || _data === void 0 || (_data$_extend7 = _data._extend) === null || _data$_extend7 === void 0 ? void 0 : _data$_extend7.priceOverride) !== null && _data$_extend$priceOv !== void 0 ? _data$_extend$priceOv : discountListPriceOverride) !== null && _ref17 !== void 0 ? _ref17 : null);
 				setShowPriceAdjustModal(false);
 				setDetailLoading(false);
 				const dataAny = _data;
@@ -1334,7 +1319,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 				});
 			});
 			return function open(_x7) {
-				return _ref19.apply(this, arguments);
+				return _ref18.apply(this, arguments);
 			};
 		}(),
 		close: () => {
@@ -1585,6 +1570,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 	const resetModalStateAfterClose = useCallback(() => {
 		var _noteDiagnosticsRef$c4;
 		(_noteDiagnosticsRef$c4 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c4 === void 0 || _noteDiagnosticsRef$c4.stop();
+		setModalEntered(false);
 		setProductData(null);
 		setDetailLoading(false);
 		setNote("");
@@ -1624,6 +1610,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 		setShowPriceAdjustModal(false);
 	};
 	const handleModalOpenChange = useCallback((nextOpen) => {
+		if (nextOpen) setModalEntered(true);
 		if (nextOpen && shownLogRef.current) {
 			const _shownLogRef$current = shownLogRef.current, { startedAt } = _shownLogRef$current, metadata = _objectWithoutProperties(_shownLogRef$current, _excluded);
 			shownLogRef.current = null;
@@ -1648,7 +1635,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 		onClose === null || onClose === void 0 || onClose();
 	};
 	const handleConfirm = function() {
-		var _ref20 = _asyncToGenerator(function* (flowDraft) {
+		var _ref19 = _asyncToGenerator(function* (flowDraft) {
 			var _noteDiagnosticsRef$c6, _bookingState$booking3, _selectionFlowRef$cur8, _selectionFlowService4;
 			(_noteDiagnosticsRef$c6 = noteDiagnosticsRef.current) === null || _noteDiagnosticsRef$c6 === void 0 || _noteDiagnosticsRef$c6.skuConfirm(note.length);
 			if (confirmDisabledRef.current) return false;
@@ -1892,7 +1879,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 			return false;
 		});
 		return function handleConfirm(_x8) {
-			return _ref20.apply(this, arguments);
+			return _ref19.apply(this, arguments);
 		};
 	}();
 	const handleStockAlertCancel = () => {
@@ -1901,7 +1888,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 		setStockAlertDontShowAgainChecked(false);
 	};
 	const handleStockAlertContinue = function() {
-		var _ref21 = _asyncToGenerator(function* () {
+		var _ref20 = _asyncToGenerator(function* () {
 			if (confirmDisabledRef.current) return;
 			const pendingData = pendingConfirmDataRef.current;
 			if (!pendingData) {
@@ -1921,7 +1908,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 			modalCloseAction();
 		});
 		return function handleStockAlertContinue() {
-			return _ref21.apply(this, arguments);
+			return _ref20.apply(this, arguments);
 		};
 	}();
 	const handleRemove = () => {
@@ -1975,7 +1962,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 	* - 使用双 RAF 等待 Weighing 子组件渲染完成后再滚动
 	*/
 	useEffect(() => {
-		if (!open) return;
+		if (!open || detailContentLoading) return;
 		if (isMobile) return;
 		if (!isWeighingProduct$1) return;
 		if (!productData) return;
@@ -1994,6 +1981,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 		};
 	}, [
 		open,
+		detailContentLoading,
 		isMobile,
 		isWeighingProduct$1,
 		productData === null || productData === void 0 ? void 0 : productData._id,
@@ -2128,7 +2116,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 		})) : null);
 	};
 	const handleEnrichmentRetry = function() {
-		var _ref22 = _asyncToGenerator(function* () {
+		var _ref21 = _asyncToGenerator(function* () {
 			if (!productData || enrichmentRetryingRef.current) return;
 			const taskId = openTaskIdRef.current;
 			enrichmentRetryingRef.current = true;
@@ -2146,7 +2134,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 			}
 		});
 		return function handleEnrichmentRetry() {
-			return _ref22.apply(this, arguments);
+			return _ref21.apply(this, arguments);
 		};
 	}();
 	const enrichmentRetryAction = /* @__PURE__ */ React.createElement(Button$1, {
@@ -2160,13 +2148,13 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 		value: quantity,
 		min: 1,
 		max: inventorySelection ? Math.max(1, inventorySelection.maxQuantity) : 99999,
-		disabled: appearanceConfirmPending || detailLoading || (inventorySelection === null || inventorySelection === void 0 ? void 0 : inventorySelection.maxQuantity) === 0,
+		disabled: appearanceConfirmPending || detailContentLoading || (inventorySelection === null || inventorySelection === void 0 ? void 0 : inventorySelection.maxQuantity) === 0,
 		enableInput: (inventorySelection === null || inventorySelection === void 0 ? void 0 : inventorySelection.maxQuantity) !== 0,
 		onChange: handleQuantityChange
 	}) : null;
 	const leftContent = (options = {}) => {
 		const { showTop = true, showBottom = true } = options;
-		if (detailLoading || !productData) {
+		if (detailContentLoading || !productData) {
 			if (!showTop) return null;
 			return /* @__PURE__ */ React.createElement("div", { className: "sku-detail-left" }, renderLoadingPanel());
 		}
@@ -2227,7 +2215,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 		})) : null);
 	};
 	const rightContent = () => {
-		if (detailLoading || !productData) return /* @__PURE__ */ React.createElement("div", { className: "sku-detail-right-content" }, renderLoadingPanel());
+		if (detailContentLoading || !productData) return /* @__PURE__ */ React.createElement("div", { className: "sku-detail-right-content" }, renderLoadingPanel());
 		if (isCustomSelectionFlow && selectionFlowInitialDraft) {
 			var _compiledSelectionFlo;
 			const showProductDetailsCollapsible = !detailAppearance && !!(skuDetailConfig === null || skuDetailConfig === void 0 ? void 0 : skuDetailConfig.isShowCollapsibleSections);
@@ -2464,7 +2452,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 		subtitle: productSubtitle,
 		cover: productData === null || productData === void 0 ? void 0 : productData.cover,
 		coverText,
-		loading: detailLoading || !productData,
+		loading: detailContentLoading || !productData,
 		pending: appearanceConfirmPending,
 		confirmDisabled: confirmDisabled || salesSettingsPending || inventoryQuantityBlocked || posAutoResolutionConfirmPending || Boolean(hasReachedBookingPriceStep && (selectionFlowBookingPricePending || selectionFlowBookingPriceError)),
 		unitPrice: isVirtualOnlySettlement ? renderVirtualSettlementUnitPrices() : productDetailPriceText,
@@ -2490,7 +2478,7 @@ const SkuDetailModal = ({ onConfirm, onRemove, onClose, resolveProductData, reso
 		removeControl: !isCreateMode && skuDetailConfig.isShowRemove !== false && onRemove && /* @__PURE__ */ React.createElement("button", {
 			type: "button",
 			className: "sku-detail-appearance__remove",
-			disabled: appearanceConfirmPending || detailLoading || isRemoveDisabled,
+			disabled: appearanceConfirmPending || detailContentLoading || isRemoveDisabled,
 			onClick: handleRemove
 		}, locales.getText("pisell2.text.sku.detail.modal.btn.remove")),
 		confirmLabel: isCreateMode && currentStep >= maxStepIndex ? locales.getText("pisell2.text.sku.detail.modal.btn.add.to.cart") : pcConfirmButtonText,
@@ -2613,16 +2601,16 @@ var skuDetailModal_default = withResponsive(ForwardedSkuDetailModal);
 * v2 主商品 source 单价（不含套餐子商品、不含单规格加价），供 _extend.price / transform 使用。
 */
 function getSourceUnitPrice(params) {
-	var _ref23, _ref24, _productData$base_pri, _productData$_extend3;
+	var _ref22, _ref23, _productData$base_pri, _productData$_extend3;
 	const { productData, skuValue } = params;
 	if (!productData) return 0;
-	let price = new Decimal((_ref23 = (_ref24 = (_productData$base_pri = productData === null || productData === void 0 ? void 0 : productData.base_price) !== null && _productData$base_pri !== void 0 ? _productData$base_pri : productData === null || productData === void 0 ? void 0 : productData.price) !== null && _ref24 !== void 0 ? _ref24 : productData === null || productData === void 0 || (_productData$_extend3 = productData._extend) === null || _productData$_extend3 === void 0 ? void 0 : _productData$_extend3.price) !== null && _ref23 !== void 0 ? _ref23 : 0);
+	let price = new Decimal((_ref22 = (_ref23 = (_productData$base_pri = productData === null || productData === void 0 ? void 0 : productData.base_price) !== null && _productData$base_pri !== void 0 ? _productData$base_pri : productData === null || productData === void 0 ? void 0 : productData.price) !== null && _ref23 !== void 0 ? _ref23 : productData === null || productData === void 0 || (_productData$_extend3 = productData._extend) === null || _productData$_extend3 === void 0 ? void 0 : _productData$_extend3.price) !== null && _ref22 !== void 0 ? _ref22 : 0);
 	if (skuValue === null || skuValue === void 0 ? void 0 : skuValue.product_variant_id) {
 		var _variant2;
 		const variantItem = productData === null || productData === void 0 || (_variant2 = productData.variant) === null || _variant2 === void 0 ? void 0 : _variant2.find((item) => Number(item === null || item === void 0 ? void 0 : item.id) === Number(skuValue.product_variant_id));
 		if (variantItem) {
-			var _ref25, _ref26, _variantItem$price;
-			price = new Decimal((_ref25 = (_ref26 = (_variantItem$price = variantItem === null || variantItem === void 0 ? void 0 : variantItem.price) !== null && _variantItem$price !== void 0 ? _variantItem$price : variantItem === null || variantItem === void 0 ? void 0 : variantItem.base_price) !== null && _ref26 !== void 0 ? _ref26 : variantItem === null || variantItem === void 0 ? void 0 : variantItem.original_price) !== null && _ref25 !== void 0 ? _ref25 : 0);
+			var _ref24, _ref25, _variantItem$price;
+			price = new Decimal((_ref24 = (_ref25 = (_variantItem$price = variantItem === null || variantItem === void 0 ? void 0 : variantItem.price) !== null && _variantItem$price !== void 0 ? _variantItem$price : variantItem === null || variantItem === void 0 ? void 0 : variantItem.base_price) !== null && _ref25 !== void 0 ? _ref25 : variantItem === null || variantItem === void 0 ? void 0 : variantItem.original_price) !== null && _ref24 !== void 0 ? _ref24 : 0);
 		}
 	}
 	return price.toNumber();
@@ -2633,16 +2621,16 @@ function getSourceUnitPrice(params) {
 * 计算规则与 booking/utils.ts 的 getProductTotalPrice 保持一致。
 */
 function getSelectedUnitPrice(params) {
-	var _ref27, _productData$base_pri2, _productData$_extend4;
+	var _ref26, _productData$base_pri2, _productData$_extend4;
 	const { productData, skuValue } = params;
 	if (!productData) return 0;
-	let price = new Decimal((_ref27 = (_productData$base_pri2 = productData === null || productData === void 0 ? void 0 : productData.base_price) !== null && _productData$base_pri2 !== void 0 ? _productData$base_pri2 : productData === null || productData === void 0 || (_productData$_extend4 = productData._extend) === null || _productData$_extend4 === void 0 ? void 0 : _productData$_extend4.price) !== null && _ref27 !== void 0 ? _ref27 : 0);
+	let price = new Decimal((_ref26 = (_productData$base_pri2 = productData === null || productData === void 0 ? void 0 : productData.base_price) !== null && _productData$base_pri2 !== void 0 ? _productData$base_pri2 : productData === null || productData === void 0 || (_productData$_extend4 = productData._extend) === null || _productData$_extend4 === void 0 ? void 0 : _productData$_extend4.price) !== null && _ref26 !== void 0 ? _ref26 : 0);
 	if (skuValue === null || skuValue === void 0 ? void 0 : skuValue.product_variant_id) {
 		var _variant3;
 		const variantItem = productData === null || productData === void 0 || (_variant3 = productData.variant) === null || _variant3 === void 0 ? void 0 : _variant3.find((item) => Number(item === null || item === void 0 ? void 0 : item.id) === Number(skuValue.product_variant_id));
 		if (variantItem) {
-			var _ref28, _variantItem$base_pri;
-			price = new Decimal((_ref28 = (_variantItem$base_pri = variantItem === null || variantItem === void 0 ? void 0 : variantItem.base_price) !== null && _variantItem$base_pri !== void 0 ? _variantItem$base_pri : variantItem === null || variantItem === void 0 ? void 0 : variantItem.original_price) !== null && _ref28 !== void 0 ? _ref28 : 0);
+			var _ref27, _variantItem$base_pri;
+			price = new Decimal((_ref27 = (_variantItem$base_pri = variantItem === null || variantItem === void 0 ? void 0 : variantItem.base_price) !== null && _variantItem$base_pri !== void 0 ? _variantItem$base_pri : variantItem === null || variantItem === void 0 ? void 0 : variantItem.original_price) !== null && _ref27 !== void 0 ? _ref27 : 0);
 		}
 	}
 	if (Array.isArray(skuValue === null || skuValue === void 0 ? void 0 : skuValue.bundle) && skuValue.bundle.length > 0) price = skuValue.bundle.reduce((accumulator, currentValue) => {
@@ -2651,8 +2639,8 @@ function getSelectedUnitPrice(params) {
 		return accumulator.add(currentPrice.mul(currentNum));
 	}, price);
 	if (Array.isArray(skuValue === null || skuValue === void 0 ? void 0 : skuValue.option) && skuValue.option.length > 0) price = skuValue.option.reduce((accumulator, currentValue) => {
-		var _ref29, _currentValue$origina;
-		const currentPrice = new Decimal((_ref29 = (_currentValue$origina = currentValue === null || currentValue === void 0 ? void 0 : currentValue.original_price) !== null && _currentValue$origina !== void 0 ? _currentValue$origina : currentValue === null || currentValue === void 0 ? void 0 : currentValue.price) !== null && _ref29 !== void 0 ? _ref29 : 0);
+		var _ref28, _currentValue$origina;
+		const currentPrice = new Decimal((_ref28 = (_currentValue$origina = currentValue === null || currentValue === void 0 ? void 0 : currentValue.original_price) !== null && _currentValue$origina !== void 0 ? _currentValue$origina : currentValue === null || currentValue === void 0 ? void 0 : currentValue.price) !== null && _ref28 !== void 0 ? _ref28 : 0);
 		const currentNum = new Decimal((currentValue === null || currentValue === void 0 ? void 0 : currentValue.num) || 0);
 		return accumulator.add(currentPrice.mul(currentNum));
 	}, price);
@@ -2673,8 +2661,8 @@ function getOtherFromSkuValue(params) {
 		var _variant4;
 		const variantItem = productData === null || productData === void 0 || (_variant4 = productData.variant) === null || _variant4 === void 0 ? void 0 : _variant4.find((item) => Number(item === null || item === void 0 ? void 0 : item.id) === Number(other.product_variant_id));
 		if (variantItem) {
-			var _ref30, _variantItem$price2;
-			other.price = Number((_ref30 = (_variantItem$price2 = variantItem === null || variantItem === void 0 ? void 0 : variantItem.price) !== null && _variantItem$price2 !== void 0 ? _variantItem$price2 : variantItem === null || variantItem === void 0 ? void 0 : variantItem.base_price) !== null && _ref30 !== void 0 ? _ref30 : 0);
+			var _ref29, _variantItem$price2;
+			other.price = Number((_ref29 = (_variantItem$price2 = variantItem === null || variantItem === void 0 ? void 0 : variantItem.price) !== null && _variantItem$price2 !== void 0 ? _variantItem$price2 : variantItem === null || variantItem === void 0 ? void 0 : variantItem.base_price) !== null && _ref29 !== void 0 ? _ref29 : 0);
 		}
 	}
 	return other;

package/lib/plus/salesSdk/utils/resolveLocalizedText.js

@@ -23,7 +23,7 @@ function resolveLocalizedText(value, translationOriginal, localeOverride) {
 		const locale = localeOverride || ((_locales$getLocale = _pisell_utils.locales.getLocale) === null || _locales$getLocale === void 0 ? void 0 : _locales$getLocale.call(_pisell_utils.locales)) || _pisell_utils.locales.locale || "en";
 		const normalized = ((_locales$formatLocale = _pisell_utils.locales.formatLocale) === null || _locales$formatLocale === void 0 ? void 0 : _locales$formatLocale.call(_pisell_utils.locales, locale)) || locale;
 		const record = value;
-		return record[normalized] || record[locale] || record.auto || record.default || record.original || record.en || record["zh-CN"] || record["zh-HK"] || record.ja || record.pt || record.kitchen || Object.keys(record).sort().map((key) => record[key]).find((text) => typeof text === "string" && text) || "";
+		return record[normalized] || record[locale] || record.original || record.default || record.auto || record.en || record["zh-CN"] || record["zh-HK"] || record.ja || record.pt || record.kitchen || Object.keys(record).sort().map((key) => record[key]).find((text) => typeof text === "string" && text) || "";
 	}
 	return String(value);
 }

package/lib/pro/compensatedPisellContainer/floatingLayer/index.js

@@ -1,6 +1,7 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
 const require_objectSpread2 = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
 const require_useScrollActivity = require("../../../hooks/useScrollActivity.js");
+const require_observeTransitions = require("./observeTransitions.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let antd = require("antd");
@@ -11,7 +12,6 @@ require("./index.less");
 //#region src/pro/compensatedPisellContainer/floatingLayer/index.tsx
 const prefixCls = "pisell-lowcode-floating-layer";
 const legacyDrawerPrefixCls = "pisell-lowcode-drawer";
-const motionDuration = 300;
 const ModalButton = antd.Button;
 const overlayBaseZIndex = 600;
 const overlayZIndexStep = 10;
@@ -75,35 +75,28 @@ const getFloatingLayoutState = (isLayoutChanging = false) => {
 		viewportSize: getViewportSize()
 	};
 };
-const isSameFloatingLayout = (prevLayout, nextLayout) => {
-	return Math.abs(prevLayout.bodyScale.x - nextLayout.bodyScale.x) < .001 && Math.abs(prevLayout.bodyScale.y - nextLayout.bodyScale.y) < .001 && prevLayout.viewportSize.width === nextLayout.viewportSize.width && prevLayout.viewportSize.height === nextLayout.viewportSize.height && prevLayout.isLayoutChanging === nextLayout.isLayoutChanging;
+const isSameFloatingGeometry = (prevLayout, nextLayout) => {
+	return Math.abs(prevLayout.bodyScale.x - nextLayout.bodyScale.x) < .001 && Math.abs(prevLayout.bodyScale.y - nextLayout.bodyScale.y) < .001 && prevLayout.viewportSize.width === nextLayout.viewportSize.width && prevLayout.viewportSize.height === nextLayout.viewportSize.height;
 };
 const useBodyScaleViewport = () => {
 	const [layoutState, setLayoutState] = (0, react.useState)(() => getFloatingLayoutState(false));
 	const updateFrameRef = (0, react.useRef)();
-	const settleTimerRef = (0, react.useRef)();
+	const settleFrameRef = (0, react.useRef)();
 	(0, react.useEffect)(() => {
 		var _window$visualViewpor;
 		if (typeof window === "undefined" || typeof document === "undefined") return;
-		const setNextLayout = (isLayoutChanging) => {
-			const nextLayout = getFloatingLayoutState(isLayoutChanging);
-			setLayoutState((prevLayout) => isSameFloatingLayout(prevLayout, nextLayout) ? prevLayout : nextLayout);
-		};
-		const markLayoutSettled = () => {
-			if (settleTimerRef.current) window.clearTimeout(settleTimerRef.current);
-			settleTimerRef.current = window.setTimeout(() => {
-				setNextLayout(false);
-			}, motionDuration);
+		const updateGeometry = () => {
+			const nextLayout = getFloatingLayoutState(true);
+			setLayoutState((prevLayout) => isSameFloatingGeometry(prevLayout, nextLayout) ? prevLayout : nextLayout);
 		};
 		const scheduleScaleViewportUpdate = () => {
 			if (updateFrameRef.current) window.cancelAnimationFrame(updateFrameRef.current);
 			updateFrameRef.current = window.requestAnimationFrame(() => {
 				updateFrameRef.current = void 0;
-				setNextLayout(true);
-				markLayoutSettled();
+				updateGeometry();
 			});
 		};
-		setNextLayout(false);
+		updateGeometry();
 		window.addEventListener("resize", scheduleScaleViewportUpdate);
 		(_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 || _window$visualViewpor.addEventListener("resize", scheduleScaleViewportUpdate);
 		const bodyObserver = new MutationObserver(scheduleScaleViewportUpdate);
@@ -114,12 +107,21 @@ const useBodyScaleViewport = () => {
 		return () => {
 			var _window$visualViewpor2;
 			if (updateFrameRef.current) window.cancelAnimationFrame(updateFrameRef.current);
-			if (settleTimerRef.current) window.clearTimeout(settleTimerRef.current);
 			window.removeEventListener("resize", scheduleScaleViewportUpdate);
 			(_window$visualViewpor2 = window.visualViewport) === null || _window$visualViewpor2 === void 0 || _window$visualViewpor2.removeEventListener("resize", scheduleScaleViewportUpdate);
 			bodyObserver.disconnect();
 		};
 	}, []);
+	(0, react.useLayoutEffect)(() => {
+		if (!layoutState.isLayoutChanging) return;
+		document.body.getBoundingClientRect();
+		settleFrameRef.current = requestAnimationFrame(() => {
+			setLayoutState((current) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, current), {}, { isLayoutChanging: false }));
+		});
+		return () => {
+			if (settleFrameRef.current !== void 0) cancelAnimationFrame(settleFrameRef.current);
+		};
+	}, [layoutState]);
 	return layoutState;
 };
 const getDefaultDrawerSize = (size) => {
@@ -236,7 +238,13 @@ const TransformFloatingLayer = (props) => {
 		shouldAutoHideHeaderFooter
 	]);
 	const [rendered, setRendered] = (0, react.useState)(mergedOpen);
-	const [motionOpen, setMotionOpen] = (0, react.useState)(mergedOpen);
+	const [motion, setMotion] = (0, react.useState)({
+		open: false,
+		id: 0
+	});
+	const motionOpen = motion.open;
+	const wrapperRef = (0, react.useRef)(null);
+	const maskRef = (0, react.useRef)(null);
 	const shouldRenderLayer = rendered || mergedOpen;
 	const skipCurrentEnterMotion = skipEnterMotion && mergedOpen;
 	const effectiveMotionOpen = skipCurrentEnterMotion ? true : motionOpen;
@@ -244,10 +252,16 @@ const TransformFloatingLayer = (props) => {
 	const overlayIdRef = (0, react.useRef)();
 	const autoZIndexRef = (0, react.useRef)();
 	const autoZIndexActiveRef = (0, react.useRef)(false);
-	const mountedRef = (0, react.useRef)(false);
-	const renderedRef = (0, react.useRef)(mergedOpen);
-	const motionFrameRef = (0, react.useRef)();
-	const motionTimerRef = (0, react.useRef)();
+	const hasOpenedRef = (0, react.useRef)(false);
+	const motionRunRef = (0, react.useRef)(0);
+	const motionOptionsRef = (0, react.useRef)({
+		afterOpenChange,
+		shouldDestroyOnClose
+	});
+	motionOptionsRef.current = {
+		afterOpenChange,
+		shouldDestroyOnClose
+	};
 	if (overlayIdRef.current === void 0) overlayIdRef.current = getNextOverlayId();
 	const overlayId = overlayIdRef.current;
 	const releaseAutoZIndex = () => {
@@ -263,50 +277,49 @@ const TransformFloatingLayer = (props) => {
 		autoZIndexActiveRef.current = true;
 	}
 	const mergedZIndex = (_ref = zIndex !== null && zIndex !== void 0 ? zIndex : autoZIndexRef.current) !== null && _ref !== void 0 ? _ref : overlayBaseZIndex;
-	const updateRendered = (nextRendered) => {
-		renderedRef.current = nextRendered;
-		setRendered(nextRendered);
-	};
 	const handleClose = (event) => {
 		const closeHandler = mode === "modal" ? onCancel || onClose : onClose || onCancel;
 		closeHandler === null || closeHandler === void 0 || closeHandler(event);
 	};
-	(0, react.useEffect)(() => {
+	(0, react.useEffect)(() => () => releaseAutoZIndex(), []);
+	(0, react.useLayoutEffect)(() => {
+		const id = ++motionRunRef.current;
+		let frame;
+		if (mergedOpen) {
+			hasOpenedRef.current = true;
+			setRendered(true);
+		}
+		if (mergedOpen && !skipEnterMotion && !motionOpen) {
+			var _wrapperRef$current, _maskRef$current;
+			(_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 || _wrapperRef$current.getBoundingClientRect();
+			(_maskRef$current = maskRef.current) === null || _maskRef$current === void 0 || _maskRef$current.getBoundingClientRect();
+			frame = requestAnimationFrame(() => {
+				frame = requestAnimationFrame(() => setMotion({
+					open: true,
+					id
+				}));
+			});
+		} else setMotion({
+			open: mergedOpen,
+			id
+		});
 		return () => {
-			if (motionFrameRef.current) window.cancelAnimationFrame(motionFrameRef.current);
-			if (motionTimerRef.current) window.clearTimeout(motionTimerRef.current);
-			releaseAutoZIndex();
+			++motionRunRef.current;
+			if (frame !== void 0) cancelAnimationFrame(frame);
 		};
-	}, []);
-	(0, react.useEffect)(() => {
-		if (typeof window === "undefined") return;
-		if (motionFrameRef.current) window.cancelAnimationFrame(motionFrameRef.current);
-		if (motionTimerRef.current) window.clearTimeout(motionTimerRef.current);
-		if (mergedOpen) if (renderedRef.current) setMotionOpen(true);
-		else {
-			updateRendered(true);
-			setMotionOpen(false);
-			motionFrameRef.current = window.requestAnimationFrame(() => {
-				setMotionOpen(true);
-			});
-		}
-		else setMotionOpen(false);
-		if (!mountedRef.current) {
-			mountedRef.current = true;
-			return;
-		}
-		motionTimerRef.current = window.setTimeout(() => {
-			afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(mergedOpen);
-			if (!mergedOpen) {
+	}, [mergedOpen, skipEnterMotion]);
+	(0, react.useLayoutEffect)(() => {
+		if (!hasOpenedRef.current || motion.id !== motionRunRef.current || motion.open !== mergedOpen) return;
+		return require_observeTransitions.observeTransitions([wrapperRef.current, maskRef.current].filter((element) => element !== null), () => {
+			var _motionOptionsRef$cur, _motionOptionsRef$cur2;
+			if (motion.id !== motionRunRef.current) return;
+			if (!motion.open) {
 				releaseAutoZIndex();
-				if (shouldDestroyOnClose) updateRendered(false);
+				if (motionOptionsRef.current.shouldDestroyOnClose) setRendered(false);
 			}
-		}, motionDuration);
-	}, [
-		afterOpenChange,
-		mergedOpen,
-		shouldDestroyOnClose
-	]);
+			(_motionOptionsRef$cur = (_motionOptionsRef$cur2 = motionOptionsRef.current).afterOpenChange) === null || _motionOptionsRef$cur === void 0 || _motionOptionsRef$cur.call(_motionOptionsRef$cur2, motion.open);
+		});
+	}, [motion, mergedOpen]);
 	(0, react.useEffect)(() => {
 		if (!mergedOpen || keyboard === false || typeof window === "undefined") return;
 		const handleKeyDown = (event) => {
@@ -413,12 +426,14 @@ const TransformFloatingLayer = (props) => {
 		className: (0, classnames.default)(`${prefixCls}-root`, `${prefixCls}-mode-${mode}`, `${prefixCls}-${centered && mode === "modal" ? "center" : placement}`, getLegacyDrawerRootClasses(mode, placement), rootClassName, wrapClassName, layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.root),
 		style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ zIndex: mergedZIndex }, rootScaleStyle), rootStyle), styles === null || styles === void 0 ? void 0 : styles.root)
 	}, mask ? /* @__PURE__ */ react.default.createElement("div", {
+		ref: maskRef,
 		className: (0, classnames.default)(`${prefixCls}-mask`, getLegacyDrawerClass(mode, "mask"), layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.mask),
 		style: maskStyle,
 		onClick: (event) => {
 			if (event.target === event.currentTarget && maskClosable) handleClose(event);
 		}
 	}) : null, /* @__PURE__ */ react.default.createElement("div", {
+		ref: wrapperRef,
 		className: (0, classnames.default)(`${prefixCls}-content-wrapper`, getLegacyDrawerWrapperClasses(mode), className, layerClassNames === null || layerClassNames === void 0 ? void 0 : layerClassNames.wrapper),
 		style: wrapperStyle
 	}, modalRender ? modalRender(contentNode) : contentNode)) : null;