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

package/lib/collapse.js

@@ -1,5 +1,7 @@
 "use client";
-import React, { useRef, useContext, useState, useEffect } from 'react';
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
+import React, { useState, useContext, useRef, useEffect } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -7,13 +9,9 @@ import { useResizeObserver } from '@rescui/use-resize-observer';
 import RightIcon from './_virtual/right.js';
 import PlusIcon from './_virtual/plus.js';
 import { collapseContext } from './context.js';
-import { useCollapseState, COLLAPSE_STATES, useStartedClosing } from './use-collapse-state.js';
+import { useCollapseState, COLLAPSE_STATES } from './use-collapse-state.js';
+import { useSafeId } from './use-safe-id.js';
 import styles from './collapse.p.module.css.js';
-
-function getRandId() {
-  return Math.random().toString(36).substring(7);
-}
-
 const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
@@ -34,26 +32,83 @@ const ICON_STYLES = {
   arrow: styles.iconArrow
 };
 const Collapse = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
-(_ref, ref) => {
-  let {
-    children,
-    className,
-    openedClassName: openedClassnameFromProps,
-    size: sizeFromProps,
-    mode: modeFromProps,
-    icon: iconFromProps,
-    borderBottom: borderBottomFromProps,
-    disableLeftPadding: disableLeftPaddingFromProps,
-    title,
-    isDefaultOpened = false,
-    theme: themeFromProps,
-    itemKey,
-    ...restProps
-  } = _ref;
-  // using the trick from  https://github.com/Yaska/react-use-id-hook/
-  const {
-    current: key
-  } = useRef(itemKey ?? getRandId());
+(t0, ref) => {
+  const $ = c(71);
+  let borderBottomFromProps;
+  let children;
+  let className;
+  let disableLeftPaddingFromProps;
+  let iconFromProps;
+  let itemKey;
+  let modeFromProps;
+  let openedClassnameFromProps;
+  let restProps;
+  let sizeFromProps;
+  let t1;
+  let themeFromProps;
+  let title;
+
+  if ($[0] !== t0) {
+    ({
+      children,
+      className,
+      openedClassName: openedClassnameFromProps,
+      size: sizeFromProps,
+      mode: modeFromProps,
+      icon: iconFromProps,
+      borderBottom: borderBottomFromProps,
+      disableLeftPadding: disableLeftPaddingFromProps,
+      title,
+      isDefaultOpened: t1,
+      theme: themeFromProps,
+      itemKey,
+      ...restProps
+    } = t0);
+    $[0] = t0;
+    $[1] = borderBottomFromProps;
+    $[2] = children;
+    $[3] = className;
+    $[4] = disableLeftPaddingFromProps;
+    $[5] = iconFromProps;
+    $[6] = itemKey;
+    $[7] = modeFromProps;
+    $[8] = openedClassnameFromProps;
+    $[9] = restProps;
+    $[10] = sizeFromProps;
+    $[11] = t1;
+    $[12] = themeFromProps;
+    $[13] = title;
+  } else {
+    borderBottomFromProps = $[1];
+    children = $[2];
+    className = $[3];
+    disableLeftPaddingFromProps = $[4];
+    iconFromProps = $[5];
+    itemKey = $[6];
+    modeFromProps = $[7];
+    openedClassnameFromProps = $[8];
+    restProps = $[9];
+    sizeFromProps = $[10];
+    t1 = $[11];
+    themeFromProps = $[12];
+    title = $[13];
+  }
+
+  const isDefaultOpened = t1 === undefined ? false : t1;
+  const uniqueId = useSafeId();
+  let t2;
+
+  if ($[14] !== itemKey || $[15] !== uniqueId) {
+    t2 = () => itemKey ?? uniqueId;
+
+    $[14] = itemKey;
+    $[15] = uniqueId;
+    $[16] = t2;
+  } else {
+    t2 = $[16];
+  }
+
+  const [key] = useState(t2);
   const theme = useThemeWithUndefined(themeFromProps);
   const {
     openedKey,
@@ -68,92 +123,260 @@ const Collapse = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line comp
     disableLeftPadding: disableLeftPaddingFromContext,
     openedClassName: openedClassNameFromContext
   } = useContext(collapseContext);
-  const size = sizeFromProps ?? sizeFromContext ?? 'm';
-  const mode = modeFromProps ?? modeFromContext ?? 'classic';
-  const icon = iconFromProps ?? iconFromContext ?? 'left-plus';
+  const size = sizeFromProps ?? sizeFromContext ?? "m";
+  const mode = modeFromProps ?? modeFromContext ?? "classic";
+  const icon = iconFromProps ?? iconFromContext ?? "left-plus";
   const borderBottom = borderBottomFromProps ?? borderBottomFromContext ?? false;
   const disableLeftPadding = disableLeftPaddingFromProps ?? disableLeftPaddingFromContext ?? false;
-  const openedClassName = openedClassnameFromProps ?? openedClassNameFromContext; // height calculations
-
+  const openedClassName = openedClassnameFromProps ?? openedClassNameFromContext;
   const resizeRef = useRef(null);
-  const [height, setHeight] = useState('initial');
-  useResizeObserver(resizeRef, entry => setHeight(entry.target.offsetHeight));
-  const isHeightCalculated = height !== 'initial'; // this state is ignored in accordion
+  const [height, setHeight] = useState("initial");
+  let t3;
+
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = entry => setHeight(entry.target.offsetHeight);
+
+    $[17] = t3;
+  } else {
+    t3 = $[17];
+  }
 
-  const [shouldBeOpenedLocal, setShouldBeOpenedLocal] = useState(isDefaultOpened); // boolean state. ignores CLOSING and OPENING states
+  useResizeObserver(resizeRef, t3);
+  const isHeightCalculated = height !== "initial";
+  const [shouldBeOpenedLocal, setShouldBeOpenedLocal] = useState(isDefaultOpened);
+  const shouldBeOpened = isInAccordion ? openedKey === key : shouldBeOpenedLocal;
+  const t4 = !isHeightCalculated;
+  let t5;
 
-  const shouldBeOpened = isInAccordion ? openedKey === key : shouldBeOpenedLocal; // add CLOSING and OPENING states.
+  if ($[18] !== shouldBeOpened || $[19] !== t4) {
+    t5 = {
+      shouldBeOpened,
+      cancelAnimation: t4
+    };
+    $[18] = shouldBeOpened;
+    $[19] = t4;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
 
   const {
+    contentRef,
+    isStartedClosing,
     onAnimationEnd: handleTransitionEnd,
     state: collapseState
-  } = useCollapseState({
-    shouldBeOpened,
-    // because how css transitions work, we shouldn't use OPENING and CLOSING states while height still calculating
-    // it also allows us to skip animation on the first renders
-    cancelAnimation: !isHeightCalculated
-  });
+  } = useCollapseState(t5);
   const isOpening = collapseState === COLLAPSE_STATES.OPENING;
   const isOpened = collapseState === COLLAPSE_STATES.OPEN;
-  const isClosing = collapseState === COLLAPSE_STATES.CLOSING;
+  const isClosing = collapseState === COLLAPSE_STATES.CLOSING_PREPARE || collapseState === COLLAPSE_STATES.CLOSING;
   const isClosed = collapseState === COLLAPSE_STATES.CLOSE;
-  const {
-    isStartedClosing,
-    contentRef
-  } = useStartedClosing(collapseState);
-  const isRightIcon = icon === 'right-plus';
-  const Icon = icon === 'arrow' ? RightIcon : PlusIcon;
-
-  const toggleOpened = () => {
-    if (toggleActiveKey) {
-      toggleActiveKey(key);
-    } // this state update does nothing in accordion
-
-
-    setShouldBeOpenedLocal(!shouldBeOpened);
-  };
-
-  useEffect(() => {
-    // for uncontrolled accordion, tell it that this collapse is opened by default
-    if (isInAccordion && !isInControlledAccordion && isDefaultOpened && setActiveKey) {
-      setActiveKey(key);
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": 'collapse',
-    ...restProps,
-    className: cn(className, styles.main, isOpening && styles.opening, isOpened && styles.opened, isClosing && !isStartedClosing && styles.closingTransition, isClosing && styles.closing, isClosed && styles.closed, !isClosed && openedClassName, SIZE_STYLES[size], MODE_STYLES[mode], ICON_STYLES[icon], borderBottom && styles.hasBorderBottom, disableLeftPadding && styles.disableLeftPadding, isRightIcon ? styles.rightIcon : styles.leftIcon, THEME_STYLES[theme]),
-    "data-rs-internal": "collapse__collapse",
-    ref: ref
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    "data-test": 'collapse__button',
-    "data-rs-internal": "collapse__button",
-    className: styles.button,
-    onClick: toggleOpened
-  }, /*#__PURE__*/React.createElement(Icon, {
-    className: styles.icon,
-    "data-render-all-sizes": true
-  }), /*#__PURE__*/React.createElement("span", {
-    className: cn(styles.title),
-    "data-rs-internal": "collapse__title"
-  }, title)), /*#__PURE__*/React.createElement("div", {
-    className: styles.content,
-    "data-rs-internal": "collapse__content",
-    style: {
-      // So, we set the height value only on OPENING stage and just after beginning CLOSING stage
-      // The reason we don't leave this style for OPEN stage is because some content of the expanded Collapse may change its height dynamically
-      // This will be processed by resizeObserver, but some devices may lag behind
-      // And to make collapsing transition work, we need to have a frame with numbered height value before starting the collapse transition
-      height: isOpening || isStartedClosing ? height : null
-    },
-    ref: contentRef,
-    onTransitionEnd: handleTransitionEnd,
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: resizeRef,
-    className: styles.innerWrapper
-  }, children)));
+  const isRightIcon = icon === "right-plus";
+  const Icon = icon === "arrow" ? RightIcon : PlusIcon;
+  let t6;
+
+  if ($[21] !== key || $[22] !== shouldBeOpened || $[23] !== toggleActiveKey) {
+    t6 = () => {
+      if (toggleActiveKey) {
+        toggleActiveKey(key);
+      }
+
+      setShouldBeOpenedLocal(!shouldBeOpened);
+    };
+
+    $[21] = key;
+    $[22] = shouldBeOpened;
+    $[23] = toggleActiveKey;
+    $[24] = t6;
+  } else {
+    t6 = $[24];
+  }
+
+  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;
+  } else {
+    t22 = $[46];
+  }
+
+  let t23;
+
+  if ($[47] !== Icon) {
+    t23 = /*#__PURE__*/React.createElement(Icon, {
+      className: styles.icon,
+      "data-render-all-sizes": true
+    });
+    $[47] = Icon;
+    $[48] = t23;
+  } else {
+    t23 = $[48];
+  }
+
+  let t24;
+
+  if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+    t24 = cn(styles.title);
+    $[49] = t24;
+  } else {
+    t24 = $[49];
+  }
+
+  let t25;
+
+  if ($[50] !== title) {
+    t25 = /*#__PURE__*/React.createElement("span", {
+      className: t24,
+      "data-rs-internal": "collapse__title"
+    }, title);
+    $[50] = title;
+    $[51] = t25;
+  } else {
+    t25 = $[51];
+  }
+
+  let t26;
+
+  if ($[52] !== t23 || $[53] !== t25 || $[54] !== toggleOpened) {
+    t26 = /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      "data-test": "collapse__button",
+      "data-rs-internal": "collapse__button",
+      className: styles.button,
+      onClick: toggleOpened
+    }, t23, t25);
+    $[52] = t23;
+    $[53] = t25;
+    $[54] = toggleOpened;
+    $[55] = t26;
+  } else {
+    t26 = $[55];
+  }
+
+  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;
+
+  if ($[60] !== contentRef || $[61] !== handleTransitionEnd || $[62] !== t28 || $[63] !== t29) {
+    t30 = /*#__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;
+  } else {
+    t30 = $[64];
+  }
+
+  let t31;
+
+  if ($[65] !== ref || $[66] !== restProps || $[67] !== t22 || $[68] !== t26 || $[69] !== t30) {
+    t31 = /*#__PURE__*/React.createElement("div", _extends({
+      "data-test": "collapse"
+    }, restProps, {
+      className: t22,
+      "data-rs-internal": "collapse__collapse",
+      ref: ref
+    }), t26, t30);
+    $[65] = ref;
+    $[66] = restProps;
+    $[67] = t22;
+    $[68] = t26;
+    $[69] = t30;
+    $[70] = t31;
+  } else {
+    t31 = $[70];
+  }
+
+  return t31;
 });
 Collapse.displayName = 'Collapse';
 Collapse.propTypes = {

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

@@ -1,35 +1,35 @@
 var styles = {
-  "themeLight": "_themeLight_1m6emg9_6",
-  "themeDark": "_themeDark_1m6emg9_9",
-  "sizeS": "_sizeS_1m6emg9_13",
-  "sizeM": "_sizeM_1m6emg9_16",
-  "sizeL": "_sizeL_1m6emg9_19",
-  "classic": "_classic_1m6emg9_23",
-  "rock": "_rock_1m6emg9_26",
-  "clear": "_clear_1m6emg9_29",
-  "hasBorderBottom": "_hasBorderBottom_1m6emg9_33",
-  "leftIcon": "_leftIcon_1m6emg9_37",
-  "rightIcon": "_rightIcon_1m6emg9_40",
-  "disableLeftPadding": "_disableLeftPadding_1m6emg9_44",
-  "main": "_main_1m6emg9_48",
-  "opening": "_opening_1m6emg9_59",
-  "opened": "_opened_1m6emg9_60",
-  "closing": "_closing_1m6emg9_61",
-  "title": "_title_1m6emg9_95",
-  "content": "_content_1m6emg9_103",
-  "closed": "_closed_1m6emg9_111",
-  "closingTransition": "_closingTransition_1m6emg9_120",
-  "innerWrapper": "_innerWrapper_1m6emg9_127",
-  "button": "_button_1m6emg9_133",
-  "icon": "_icon_1m6emg9_186",
-  "iconPlus": "_iconPlus_1m6emg9_202",
-  "iconArrow": "_iconArrow_1m6emg9_207",
-  "accordion": "_accordion_1m6emg9_213",
-  "accordionGap0": "_accordionGap0_1m6emg9_218",
-  "accordionGap8": "_accordionGap8_1m6emg9_221",
-  "accordionGap12": "_accordionGap12_1m6emg9_224",
-  "accordionGap16": "_accordionGap16_1m6emg9_227",
-  "accordionGap24": "_accordionGap24_1m6emg9_230",
-  "accordionGap32": "_accordionGap32_1m6emg9_233"
+  "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"
 };
 export { styles as default };