@lime-bundles/react 7.2.0 → 7.3.1

package/dist/index.js

@@ -3076,6 +3076,8 @@ function normalizeText2(str) {
   return str.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
 }
 var FILTERS_ALL2 = "__all__";
+var STEP_CASCADE_MS = 500;
+var AUTO_ADVANCE_HOLD_MS = 160;
 function MultiStepPicker({
   bundle,
   currency,
@@ -3099,6 +3101,8 @@ function MultiStepPicker({
   const closeBtnRef = useRef7(null);
   const listRef = useRef7(null);
   const mouseDownTarget = useRef7(null);
+  const cascadeTimer = useRef7(null);
+  const autoAdvanceTimer = useRef7(null);
   const [open, setOpen] = useState11(false);
   const [stepIndex, setStepIndex] = useState11(
     () => Math.max(0, Math.min(steps.length - 1, initialStep))
@@ -3134,6 +3138,14 @@ function MultiStepPicker({
     const id = requestAnimationFrame(() => setOpen(true));
     return () => cancelAnimationFrame(id);
   }, []);
+  useEffect14(() => {
+    return () => {
+      if (cascadeTimer.current !== null) clearTimeout(cascadeTimer.current);
+      if (autoAdvanceTimer.current !== null) {
+        clearTimeout(autoAdvanceTimer.current);
+      }
+    };
+  }, []);
   useScrollLock(true);
   useFocusTrap({
     active: true,
@@ -3155,8 +3167,43 @@ function MultiStepPicker({
     }
     return front.concat(back);
   }, [eligible, selectedAtLoad]);
+  const autoAdvance = wc.multiStepAutoAdvance === true;
+  const lastSeen = useRef7({ step: stepIndex, units: unitsInStep });
+  useEffect14(() => {
+    const prev = lastSeen.current;
+    lastSeen.current = { step: stepIndex, units: unitsInStep };
+    if (!autoAdvance || isLastStep || prev.step !== stepIndex) return;
+    if (unitsInStep <= prev.units) return;
+    if (stepHeadroom(step?.maxQuantity ?? null, unitsInStep) !== 0) return;
+    const from = stepIndex;
+    if (autoAdvanceTimer.current !== null) {
+      clearTimeout(autoAdvanceTimer.current);
+    }
+    autoAdvanceTimer.current = setTimeout(() => {
+      autoAdvanceTimer.current = null;
+      goToStep(from + 1);
+    }, AUTO_ADVANCE_HOLD_MS);
+  });
   function goToStep(i) {
     const clamped = Math.max(0, Math.min(steps.length - 1, i));
+    if (autoAdvanceTimer.current !== null) {
+      clearTimeout(autoAdvanceTimer.current);
+      autoAdvanceTimer.current = null;
+    }
+    const dialog = dialogRef.current;
+    if (dialog && clamped !== stepIndex) {
+      if (cascadeTimer.current !== null) clearTimeout(cascadeTimer.current);
+      dialog.removeAttribute("data-step-transition");
+      void dialog.offsetHeight;
+      dialog.setAttribute(
+        "data-step-transition",
+        clamped > stepIndex ? "forward" : "back"
+      );
+      cascadeTimer.current = setTimeout(() => {
+        cascadeTimer.current = null;
+        dialog.removeAttribute("data-step-transition");
+      }, STEP_CASCADE_MS);
+    }
     setStepIndex(clamped);
     setQuery("");
     setActiveType(FILTERS_ALL2);