@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/collapse.js

@@ -5,7 +5,6 @@ import React, { useState, useContext, useRef, useEffect } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
-import { useResizeObserver } from '@rescui/use-resize-observer';
 import RightIcon from './_virtual/right.js';
 import PlusIcon from './_virtual/plus.js';
 import { collapseContext } from './context.js';
@@ -33,7 +32,7 @@ const ICON_STYLES = {
 };
 const Collapse = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
 (t0, ref) => {
-  const $ = c(71);
+  const $ = c(63);
   let borderBottomFromProps;
   let children;
   let className;
@@ -109,6 +108,7 @@ const Collapse = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
   }
 
   const [key] = useState(t2);
+  const [isAccordionConnected, setIsAccordionConnected] = useState(false);
   const theme = useThemeWithUndefined(themeFromProps);
   const {
     openedKey,
@@ -129,52 +129,69 @@ const Collapse = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
   const borderBottom = borderBottomFromProps ?? borderBottomFromContext ?? false;
   const disableLeftPadding = disableLeftPaddingFromProps ?? disableLeftPaddingFromContext ?? false;
   const openedClassName = openedClassnameFromProps ?? openedClassNameFromContext;
-  const resizeRef = useRef(null);
-  const [height, setHeight] = useState("initial");
+  const contentRef = useRef(null);
+  const [isAnimationEnabled, setIsAnimationEnabled] = useState(!isInAccordion);
+  const [shouldBeOpenedLocal, setShouldBeOpenedLocal] = useState(isDefaultOpened);
+  const shouldBeOpened = isAccordionConnected ? openedKey === key : shouldBeOpenedLocal;
   let t3;
+  let t4;
+
+  if ($[17] !== isAccordionConnected || $[18] !== isDefaultOpened || $[19] !== isInAccordion || $[20] !== isInControlledAccordion || $[21] !== key || $[22] !== setActiveKey) {
+    t3 = () => {
+      if (!isInAccordion) {
+        return;
+      }
+
+      if (!isAccordionConnected) {
+        if (!isInControlledAccordion && isDefaultOpened && setActiveKey) {
+          setActiveKey(key);
+        }
+
+        setIsAccordionConnected(true);
+        return;
+      }
 
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = entry => setHeight(entry.target.offsetHeight);
+      setIsAnimationEnabled(true);
+    };
 
-    $[17] = t3;
+    t4 = [isAccordionConnected, isInAccordion, isInControlledAccordion, isDefaultOpened, setActiveKey, key];
+    $[17] = isAccordionConnected;
+    $[18] = isDefaultOpened;
+    $[19] = isInAccordion;
+    $[20] = isInControlledAccordion;
+    $[21] = key;
+    $[22] = setActiveKey;
+    $[23] = t3;
+    $[24] = t4;
   } else {
-    t3 = $[17];
+    t3 = $[23];
+    t4 = $[24];
   }
 
-  useResizeObserver(resizeRef, t3);
-  const isHeightCalculated = height !== "initial";
-  const [shouldBeOpenedLocal, setShouldBeOpenedLocal] = useState(isDefaultOpened);
-  const shouldBeOpened = isInAccordion ? openedKey === key : shouldBeOpenedLocal;
-  const t4 = !isHeightCalculated;
+  useEffect(t3, t4);
   let t5;
 
-  if ($[18] !== shouldBeOpened || $[19] !== t4) {
+  if ($[25] !== shouldBeOpened) {
     t5 = {
       shouldBeOpened,
-      cancelAnimation: t4
+      contentRef
     };
-    $[18] = shouldBeOpened;
-    $[19] = t4;
-    $[20] = t5;
+    $[25] = shouldBeOpened;
+    $[26] = t5;
   } else {
-    t5 = $[20];
+    t5 = $[26];
   }
 
-  const {
-    contentRef,
-    isStartedClosing,
-    onAnimationEnd: handleTransitionEnd,
-    state: collapseState
-  } = useCollapseState(t5);
+  const collapseState = useCollapseState(t5);
   const isOpening = collapseState === COLLAPSE_STATES.OPENING;
   const isOpened = collapseState === COLLAPSE_STATES.OPEN;
-  const isClosing = collapseState === COLLAPSE_STATES.CLOSING_PREPARE || collapseState === COLLAPSE_STATES.CLOSING;
+  const isClosing = collapseState === COLLAPSE_STATES.CLOSING;
   const isClosed = collapseState === COLLAPSE_STATES.CLOSE;
   const isRightIcon = icon === "right-plus";
   const Icon = icon === "arrow" ? RightIcon : PlusIcon;
   let t6;
 
-  if ($[21] !== key || $[22] !== shouldBeOpened || $[23] !== toggleActiveKey) {
+  if ($[27] !== key || $[28] !== shouldBeOpened || $[29] !== toggleActiveKey) {
     t6 = () => {
       if (toggleActiveKey) {
         toggleActiveKey(key);
@@ -183,200 +200,142 @@ const Collapse = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
       setShouldBeOpenedLocal(!shouldBeOpened);
     };
 
-    $[21] = key;
-    $[22] = shouldBeOpened;
-    $[23] = toggleActiveKey;
-    $[24] = t6;
+    $[27] = key;
+    $[28] = shouldBeOpened;
+    $[29] = toggleActiveKey;
+    $[30] = t6;
   } else {
-    t6 = $[24];
+    t6 = $[30];
   }
 
   const toggleOpened = t6;
-  let t7;
-
-  if ($[25] !== isDefaultOpened || $[26] !== isInAccordion || $[27] !== isInControlledAccordion || $[28] !== key || $[29] !== setActiveKey) {
-    t7 = () => {
-      if (isInAccordion && !isInControlledAccordion && isDefaultOpened && setActiveKey) {
-        setActiveKey(key);
-      }
-    };
-
-    $[25] = isDefaultOpened;
-    $[26] = isInAccordion;
-    $[27] = isInControlledAccordion;
-    $[28] = key;
-    $[29] = setActiveKey;
-    $[30] = t7;
-  } else {
-    t7 = $[30];
-  }
-
-  let t8;
-
-  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = [];
-    $[31] = t8;
-  } else {
-    t8 = $[31];
-  }
-
-  useEffect(t7, t8);
-  const t9 = isOpening && styles.opening;
-  const t10 = isOpened && styles.opened;
-  const t11 = isClosing && !isStartedClosing && styles.closingTransition;
-  const t12 = isClosing && styles.closing;
-  const t13 = isClosed && styles.closed;
-  const t14 = !isClosed && openedClassName;
-  const t15 = SIZE_STYLES[size];
-  const t16 = MODE_STYLES[mode];
-  const t17 = ICON_STYLES[icon];
-  const t18 = borderBottom && styles.hasBorderBottom;
-  const t19 = disableLeftPadding && styles.disableLeftPadding;
-  const t20 = isRightIcon ? styles.rightIcon : styles.leftIcon;
-  const t21 = THEME_STYLES[theme];
-  let t22;
-
-  if ($[32] !== className || $[33] !== t10 || $[34] !== t11 || $[35] !== t12 || $[36] !== t13 || $[37] !== t14 || $[38] !== t15 || $[39] !== t16 || $[40] !== t17 || $[41] !== t18 || $[42] !== t19 || $[43] !== t20 || $[44] !== t21 || $[45] !== t9) {
-    t22 = cn(className, styles.main, t9, t10, t11, t12, t13, t14, t15, t16, t17, t18, t19, t20, t21);
-    $[32] = className;
-    $[33] = t10;
-    $[34] = t11;
-    $[35] = t12;
-    $[36] = t13;
-    $[37] = t14;
-    $[38] = t15;
-    $[39] = t16;
-    $[40] = t17;
-    $[41] = t18;
-    $[42] = t19;
-    $[43] = t20;
-    $[44] = t21;
-    $[45] = t9;
-    $[46] = t22;
+  const t7 = isAnimationEnabled && styles.animationEnabled;
+  const t8 = isOpening && styles.opening;
+  const t9 = isOpened && styles.opened;
+  const t10 = isClosing && styles.closing;
+  const t11 = isClosed && styles.closed;
+  const t12 = !isClosed && openedClassName;
+  const t13 = SIZE_STYLES[size];
+  const t14 = MODE_STYLES[mode];
+  const t15 = ICON_STYLES[icon];
+  const t16 = borderBottom && styles.hasBorderBottom;
+  const t17 = disableLeftPadding && styles.disableLeftPadding;
+  const t18 = isRightIcon ? styles.rightIcon : styles.leftIcon;
+  const t19 = THEME_STYLES[theme];
+  let t20;
+
+  if ($[31] !== className || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t15 || $[38] !== t16 || $[39] !== t17 || $[40] !== t18 || $[41] !== t19 || $[42] !== t7 || $[43] !== t8 || $[44] !== t9) {
+    t20 = cn(className, styles.main, t7, t8, t9, t10, t11, t12, t13, t14, t15, t16, t17, t18, t19);
+    $[31] = className;
+    $[32] = t10;
+    $[33] = t11;
+    $[34] = t12;
+    $[35] = t13;
+    $[36] = t14;
+    $[37] = t15;
+    $[38] = t16;
+    $[39] = t17;
+    $[40] = t18;
+    $[41] = t19;
+    $[42] = t7;
+    $[43] = t8;
+    $[44] = t9;
+    $[45] = t20;
   } else {
-    t22 = $[46];
+    t20 = $[45];
   }
 
-  let t23;
+  let t21;
 
-  if ($[47] !== Icon) {
-    t23 = /*#__PURE__*/React.createElement(Icon, {
+  if ($[46] !== Icon) {
+    t21 = /*#__PURE__*/React.createElement(Icon, {
       className: styles.icon,
       "data-render-all-sizes": true
     });
-    $[47] = Icon;
-    $[48] = t23;
+    $[46] = Icon;
+    $[47] = t21;
   } else {
-    t23 = $[48];
+    t21 = $[47];
   }
 
-  let t24;
+  let t22;
 
-  if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
-    t24 = cn(styles.title);
-    $[49] = t24;
+  if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+    t22 = cn(styles.title);
+    $[48] = t22;
   } else {
-    t24 = $[49];
+    t22 = $[48];
   }
 
-  let t25;
+  let t23;
 
-  if ($[50] !== title) {
-    t25 = /*#__PURE__*/React.createElement("span", {
-      className: t24,
+  if ($[49] !== title) {
+    t23 = /*#__PURE__*/React.createElement("span", {
+      className: t22,
       "data-rs-internal": "collapse__title"
     }, title);
-    $[50] = title;
-    $[51] = t25;
+    $[49] = title;
+    $[50] = t23;
   } else {
-    t25 = $[51];
+    t23 = $[50];
   }
 
-  let t26;
+  let t24;
 
-  if ($[52] !== t23 || $[53] !== t25 || $[54] !== toggleOpened) {
-    t26 = /*#__PURE__*/React.createElement("button", {
+  if ($[51] !== t21 || $[52] !== t23 || $[53] !== toggleOpened) {
+    t24 = /*#__PURE__*/React.createElement("button", {
       type: "button",
       "data-test": "collapse__button",
       "data-rs-internal": "collapse__button",
       className: styles.button,
       onClick: toggleOpened
-    }, t23, t25);
+    }, t21, t23);
+    $[51] = t21;
     $[52] = t23;
-    $[53] = t25;
-    $[54] = toggleOpened;
-    $[55] = t26;
+    $[53] = toggleOpened;
+    $[54] = t24;
   } else {
-    t26 = $[55];
+    t24 = $[54];
   }
 
-  const t27 = isOpening || isStartedClosing ? height : null;
-  let t28;
-
-  if ($[56] !== t27) {
-    t28 = {
-      height: t27
-    };
-    $[56] = t27;
-    $[57] = t28;
-  } else {
-    t28 = $[57];
-  }
-
-  let t29;
-
-  if ($[58] !== children) {
-    t29 = /*#__PURE__*/React.createElement("div", {
-      ref: resizeRef,
-      className: styles.innerWrapper
-    }, children);
-    $[58] = children;
-    $[59] = t29;
-  } else {
-    t29 = $[59];
-  }
-
-  let t30;
+  let t25;
 
-  if ($[60] !== contentRef || $[61] !== handleTransitionEnd || $[62] !== t28 || $[63] !== t29) {
-    t30 = /*#__PURE__*/React.createElement("div", {
+  if ($[55] !== children) {
+    t25 = /*#__PURE__*/React.createElement("div", {
       className: styles.content,
       "data-rs-internal": "collapse__content",
-      style: t28,
       ref: contentRef,
-      onTransitionEnd: handleTransitionEnd,
       tabIndex: -1
-    }, t29);
-    $[60] = contentRef;
-    $[61] = handleTransitionEnd;
-    $[62] = t28;
-    $[63] = t29;
-    $[64] = t30;
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.innerWrapper
+    }, children));
+    $[55] = children;
+    $[56] = t25;
   } else {
-    t30 = $[64];
+    t25 = $[56];
   }
 
-  let t31;
+  let t26;
 
-  if ($[65] !== ref || $[66] !== restProps || $[67] !== t22 || $[68] !== t26 || $[69] !== t30) {
-    t31 = /*#__PURE__*/React.createElement("div", _extends({
+  if ($[57] !== ref || $[58] !== restProps || $[59] !== t20 || $[60] !== t24 || $[61] !== t25) {
+    t26 = /*#__PURE__*/React.createElement("div", _extends({
       "data-test": "collapse"
     }, restProps, {
-      className: t22,
+      className: t20,
       "data-rs-internal": "collapse__collapse",
       ref: ref
-    }), t26, t30);
-    $[65] = ref;
-    $[66] = restProps;
-    $[67] = t22;
-    $[68] = t26;
-    $[69] = t30;
-    $[70] = t31;
+    }), t24, t25);
+    $[57] = ref;
+    $[58] = restProps;
+    $[59] = t20;
+    $[60] = t24;
+    $[61] = t25;
+    $[62] = t26;
   } else {
-    t31 = $[70];
+    t26 = $[62];
   }
 
-  return t31;
+  return t26;
 });
 Collapse.displayName = 'Collapse';
 Collapse.propTypes = {

package/lib/collapse.p.module.css.js

@@ -1,35 +1,35 @@
 var styles = {
-  "themeLight": "_themeLight_1t0qfuj_6",
-  "themeDark": "_themeDark_1t0qfuj_9",
-  "sizeS": "_sizeS_1t0qfuj_13",
-  "sizeM": "_sizeM_1t0qfuj_16",
-  "sizeL": "_sizeL_1t0qfuj_19",
-  "classic": "_classic_1t0qfuj_23",
-  "rock": "_rock_1t0qfuj_26",
-  "clear": "_clear_1t0qfuj_29",
-  "hasBorderBottom": "_hasBorderBottom_1t0qfuj_33",
-  "leftIcon": "_leftIcon_1t0qfuj_37",
-  "rightIcon": "_rightIcon_1t0qfuj_40",
-  "disableLeftPadding": "_disableLeftPadding_1t0qfuj_44",
-  "main": "_main_1t0qfuj_48",
-  "opening": "_opening_1t0qfuj_59",
-  "opened": "_opened_1t0qfuj_60",
-  "closing": "_closing_1t0qfuj_61",
-  "title": "_title_1t0qfuj_95",
-  "content": "_content_1t0qfuj_103",
-  "closed": "_closed_1t0qfuj_111",
-  "closingTransition": "_closingTransition_1t0qfuj_120",
-  "innerWrapper": "_innerWrapper_1t0qfuj_127",
-  "button": "_button_1t0qfuj_133",
-  "icon": "_icon_1t0qfuj_186",
-  "iconPlus": "_iconPlus_1t0qfuj_202",
-  "iconArrow": "_iconArrow_1t0qfuj_207",
-  "accordion": "_accordion_1t0qfuj_213",
-  "accordionGap0": "_accordionGap0_1t0qfuj_218",
-  "accordionGap8": "_accordionGap8_1t0qfuj_221",
-  "accordionGap12": "_accordionGap12_1t0qfuj_224",
-  "accordionGap16": "_accordionGap16_1t0qfuj_227",
-  "accordionGap24": "_accordionGap24_1t0qfuj_230",
-  "accordionGap32": "_accordionGap32_1t0qfuj_233"
+  "themeLight": "_themeLight_diwgr6_6",
+  "themeDark": "_themeDark_diwgr6_9",
+  "sizeS": "_sizeS_diwgr6_13",
+  "sizeM": "_sizeM_diwgr6_16",
+  "sizeL": "_sizeL_diwgr6_19",
+  "classic": "_classic_diwgr6_23",
+  "rock": "_rock_diwgr6_26",
+  "clear": "_clear_diwgr6_29",
+  "hasBorderBottom": "_hasBorderBottom_diwgr6_33",
+  "leftIcon": "_leftIcon_diwgr6_37",
+  "rightIcon": "_rightIcon_diwgr6_40",
+  "disableLeftPadding": "_disableLeftPadding_diwgr6_44",
+  "main": "_main_diwgr6_48",
+  "opening": "_opening_diwgr6_59",
+  "opened": "_opened_diwgr6_60",
+  "closing": "_closing_diwgr6_61",
+  "title": "_title_diwgr6_95",
+  "content": "_content_diwgr6_103",
+  "animationEnabled": "_animationEnabled_diwgr6_115",
+  "closed": "_closed_diwgr6_128",
+  "innerWrapper": "_innerWrapper_diwgr6_133",
+  "button": "_button_diwgr6_140",
+  "icon": "_icon_diwgr6_196",
+  "iconPlus": "_iconPlus_diwgr6_217",
+  "iconArrow": "_iconArrow_diwgr6_222",
+  "accordion": "_accordion_diwgr6_228",
+  "accordionGap0": "_accordionGap0_diwgr6_233",
+  "accordionGap8": "_accordionGap8_diwgr6_236",
+  "accordionGap12": "_accordionGap12_diwgr6_239",
+  "accordionGap16": "_accordionGap16_diwgr6_242",
+  "accordionGap24": "_accordionGap24_diwgr6_245",
+  "accordionGap32": "_accordionGap32_diwgr6_248"
 };
 export { styles as default };