@rescui/collapse 0.8.4-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10 → 0.8.4-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39

package/lib/use-collapse-state.js

@@ -1,192 +1,138 @@
 "use client";
 import { c } from 'react-compiler-runtime';
-import { useReducer, useRef, useLayoutEffect } from 'react';
+import { useState, useEffect, useLayoutEffect } from 'react';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+const getCollapseTransition = element => element.getAnimations().find(animation => animation.transitionProperty === 'grid-template-rows');
+
 var COLLAPSE_STATES;
 
 (function (COLLAPSE_STATES) {
   COLLAPSE_STATES["OPENING"] = "OPENING";
   COLLAPSE_STATES["OPEN"] = "OPEN";
-  COLLAPSE_STATES["CLOSING_PREPARE"] = "CLOSING_PREPARE";
   COLLAPSE_STATES["CLOSING"] = "CLOSING";
   COLLAPSE_STATES["CLOSE"] = "CLOSE";
 })(COLLAPSE_STATES || (COLLAPSE_STATES = {}));
 
-function forceLayoutRecalculation(element) {
-  'use no memo'; // eslint-disable-next-line no-unused-expressions
-
-  element.offsetHeight;
-}
-
-function getInitialState(_ref) {
-  let {
-    shouldBeOpened,
-    cancelAnimation
-  } = _ref;
-
-  if (!shouldBeOpened) {
-    return COLLAPSE_STATES.CLOSE;
-  }
-
-  return cancelAnimation ? COLLAPSE_STATES.OPEN : COLLAPSE_STATES.OPENING;
-}
-
-function getStateForTarget(state, shouldBeOpened, cancelAnimation) {
-  if (cancelAnimation) {
-    return shouldBeOpened ? COLLAPSE_STATES.OPEN : COLLAPSE_STATES.CLOSE;
-  }
-
+function getStateForTarget(state, shouldBeOpened) {
   if (shouldBeOpened) {
-    // Closing has not started visually yet, so there is nothing to animate back.
-    if (state === COLLAPSE_STATES.CLOSING_PREPARE) {
-      return COLLAPSE_STATES.OPEN;
-    }
-
     return state === COLLAPSE_STATES.OPEN || state === COLLAPSE_STATES.OPENING ? state : COLLAPSE_STATES.OPENING;
   }
 
-  if (state === COLLAPSE_STATES.CLOSE || state === COLLAPSE_STATES.CLOSING_PREPARE || state === COLLAPSE_STATES.CLOSING) {
+  if (state === COLLAPSE_STATES.CLOSE || state === COLLAPSE_STATES.CLOSING) {
     return state;
   }
 
-  return state === COLLAPSE_STATES.OPEN ? COLLAPSE_STATES.CLOSING_PREPARE : COLLAPSE_STATES.CLOSING;
-}
-
-function collapseReducer(state, action) {
-  switch (action.type) {
-    case 'TARGET_CHANGED':
-      return getStateForTarget(state, action.shouldBeOpened, action.cancelAnimation);
-
-    case 'CLOSING_READY':
-      return state === COLLAPSE_STATES.CLOSING_PREPARE ? COLLAPSE_STATES.CLOSING : state;
-
-    case 'TRANSITION_END':
-      if (action.shouldBeOpened && state === COLLAPSE_STATES.OPENING) {
-        return COLLAPSE_STATES.OPEN;
-      }
-
-      if (!action.shouldBeOpened && state === COLLAPSE_STATES.CLOSING) {
-        return COLLAPSE_STATES.CLOSE;
-      }
-
-      return state;
-
-    default:
-      return state;
-  }
+  return COLLAPSE_STATES.CLOSING;
 }
 
 function useCollapseState(t0) {
-  const $ = c(16);
+  const $ = c(5);
   const {
     shouldBeOpened,
-    cancelAnimation
+    contentRef
   } = t0;
+  const [state, setState] = useState(shouldBeOpened ? COLLAPSE_STATES.OPEN : COLLAPSE_STATES.CLOSE);
   let t1;
 
-  if ($[0] !== cancelAnimation || $[1] !== shouldBeOpened) {
-    t1 = {
-      shouldBeOpened,
-      cancelAnimation
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = expectedState => {
+      setState(currentState => {
+        if (currentState !== expectedState) {
+          return currentState;
+        }
+
+        if (expectedState === COLLAPSE_STATES.OPENING) {
+          return COLLAPSE_STATES.OPEN;
+        }
+
+        if (expectedState === COLLAPSE_STATES.CLOSING) {
+          return COLLAPSE_STATES.CLOSE;
+        }
+
+        return currentState;
+      });
     };
-    $[0] = cancelAnimation;
-    $[1] = shouldBeOpened;
-    $[2] = t1;
+
+    $[0] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[0];
   }
 
-  const [state, dispatch] = useReducer(collapseReducer, t1, getInitialState);
-  const contentRef = useRef(null);
+  const completeTransition = t1;
   let t2;
   let t3;
 
-  if ($[3] !== cancelAnimation || $[4] !== shouldBeOpened) {
+  if ($[1] !== contentRef || $[2] !== state) {
     t2 = () => {
-      dispatch({
-        type: "TARGET_CHANGED",
-        shouldBeOpened,
-        cancelAnimation
-      });
-    };
-
-    t3 = [shouldBeOpened, cancelAnimation];
-    $[3] = cancelAnimation;
-    $[4] = shouldBeOpened;
-    $[5] = t2;
-    $[6] = t3;
-  } else {
-    t2 = $[5];
-    t3 = $[6];
-  }
+      if (state !== COLLAPSE_STATES.OPENING && state !== COLLAPSE_STATES.CLOSING) {
+        return;
+      }
 
-  useLayoutEffect(t2, t3);
-  let t4;
-  let t5;
+      const contentElement = contentRef.current;
 
-  if ($[7] !== state) {
-    t4 = () => {
-      if (state !== COLLAPSE_STATES.CLOSING_PREPARE) {
+      if (!contentElement) {
         return;
       }
 
-      const frame = requestAnimationFrame(() => {
-        if (contentRef.current) {
-          forceLayoutRecalculation(contentRef.current);
+      let isCurrentPhase = true;
+
+      const completeCurrentPhase = () => {
+        if (isCurrentPhase) {
+          completeTransition(state);
         }
+      };
 
-        dispatch({
-          type: "CLOSING_READY"
-        });
-      });
-      return () => cancelAnimationFrame(frame);
-    };
+      const waitForCurrentTransition = previousTransition => {
+        if (!isCurrentPhase) {
+          return Promise.resolve();
+        }
 
-    t5 = [state];
-    $[7] = state;
-    $[8] = t4;
-    $[9] = t5;
-  } else {
-    t4 = $[8];
-    t5 = $[9];
-  }
+        const transition = getCollapseTransition(contentElement);
 
-  useLayoutEffect(t4, t5);
-  let t6;
+        if (!transition || transition === previousTransition) {
+          return Promise.resolve();
+        }
 
-  if ($[10] !== shouldBeOpened) {
-    t6 = () => {
-      dispatch({
-        type: "TRANSITION_END",
-        shouldBeOpened
-      });
+        return transition.finished.then(() => {
+          if (!isCurrentPhase) {
+            return Promise.resolve();
+          }
+
+          const replacementTransition = getCollapseTransition(contentElement);
+
+          if (replacementTransition && replacementTransition !== transition) {
+            return waitForCurrentTransition(transition);
+          }
+
+          return Promise.resolve();
+        }, () => waitForCurrentTransition(transition));
+      };
+
+      waitForCurrentTransition().then(completeCurrentPhase);
+      return () => {
+        isCurrentPhase = false;
+      };
     };
 
-    $[10] = shouldBeOpened;
-    $[11] = t6;
+    t3 = [completeTransition, contentRef, state];
+    $[1] = contentRef;
+    $[2] = state;
+    $[3] = t2;
+    $[4] = t3;
   } else {
-    t6 = $[11];
+    t2 = $[3];
+    t3 = $[4];
   }
 
-  const onAnimationEnd = t6;
-  const t7 = state === COLLAPSE_STATES.CLOSING_PREPARE;
-  let t8;
+  useIsomorphicLayoutEffect(t2, t3);
+  const stateForTarget = getStateForTarget(state, shouldBeOpened);
 
-  if ($[12] !== onAnimationEnd || $[13] !== state || $[14] !== t7) {
-    t8 = {
-      contentRef,
-      isStartedClosing: t7,
-      onAnimationEnd,
-      state
-    };
-    $[12] = onAnimationEnd;
-    $[13] = state;
-    $[14] = t7;
-    $[15] = t8;
-  } else {
-    t8 = $[15];
+  if (stateForTarget !== state) {
+    setState(stateForTarget);
   }
 
-  return t8;
+  return state;
 }
 
 export { COLLAPSE_STATES, useCollapseState };

package/lib/use-safe-id.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
-export declare function useFallbackId(): number;
+declare function useFallbackId(): number;
 export declare const useSafeId: typeof React.useId | typeof useFallbackId;
+export {};

package/lib/use-safe-id.js

@@ -7,4 +7,4 @@ function useFallbackId() {
 }
 
 const useSafeId = React.useId ?? useFallbackId;
-export { useFallbackId, useSafeId };
+export { useSafeId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/collapse",
-  "version": "0.8.4-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10+dbbefd7b8",
+  "version": "0.8.4-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39+8aaaed4be",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/use-resize-observer": "0.3.4-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10+dbbefd7b8",
     "classnames": "^2.2.6",
     "react-compiler-runtime": "^1.0.0"
   },
@@ -27,16 +26,16 @@
     "react": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
     "@rescui/scripts": "0.5.2",
-    "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
     "@rescui/visual-regression": "0.1.4",
     "@types/classnames": "^2.2.11"
   },
   "scripts": {
-    "build": "rescui-scripts build --react-compiler-target 17 && yarn run build-pcss-api",
+    "build": "rescui-scripts build && yarn run build-pcss-api",
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
+  "gitHead": "8aaaed4bee650c002b7f195438380b70c31cc5a4"
 }