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

package/lib/collapse.js

@@ -1,7 +1,5 @@
 "use client";
-import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
-import { c } from 'react-compiler-runtime';
-import React, { useState, useContext, useRef, useEffect } from 'react';
+import React, { useRef, useContext, useState, useEffect } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -9,9 +7,13 @@ 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 } from './use-collapse-state.js';
-import { useSafeId } from './use-safe-id.js';
+import { useCollapseState, COLLAPSE_STATES, useStartedClosing } from './use-collapse-state.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
@@ -32,83 +34,26 @@ const ICON_STYLES = {
   arrow: styles.iconArrow
 };
 const Collapse = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
-(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);
+(_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());
   const theme = useThemeWithUndefined(themeFromProps);
   const {
     openedKey,
@@ -123,260 +68,92 @@ 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;
-  const resizeRef = useRef(null);
-  const [height, setHeight] = useState("initial");
-  let t3;
+  const openedClassName = openedClassnameFromProps ?? openedClassNameFromContext; // height calculations
 
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = entry => setHeight(entry.target.offsetHeight);
-
-    $[17] = t3;
-  } else {
-    t3 = $[17];
-  }
+  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
 
-  useResizeObserver(resizeRef, t3);
-  const isHeightCalculated = height !== "initial";
-  const [shouldBeOpenedLocal, setShouldBeOpenedLocal] = useState(isDefaultOpened);
-  const shouldBeOpened = isInAccordion ? openedKey === key : shouldBeOpenedLocal;
-  const t4 = !isHeightCalculated;
-  let t5;
+  const [shouldBeOpenedLocal, setShouldBeOpenedLocal] = useState(isDefaultOpened); // boolean state. ignores CLOSING and OPENING states
 
-  if ($[18] !== shouldBeOpened || $[19] !== t4) {
-    t5 = {
-      shouldBeOpened,
-      cancelAnimation: t4
-    };
-    $[18] = shouldBeOpened;
-    $[19] = t4;
-    $[20] = t5;
-  } else {
-    t5 = $[20];
-  }
+  const shouldBeOpened = isInAccordion ? openedKey === key : shouldBeOpenedLocal; // add CLOSING and OPENING states.
 
   const {
-    contentRef,
-    isStartedClosing,
     onAnimationEnd: handleTransitionEnd,
     state: collapseState
-  } = useCollapseState(t5);
+  } = 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
+  });
   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) {
-    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;
+  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)));
 });
 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_1fi1hk_6",
+  "themeDark": "_themeDark_1fi1hk_9",
+  "sizeS": "_sizeS_1fi1hk_13",
+  "sizeM": "_sizeM_1fi1hk_16",
+  "sizeL": "_sizeL_1fi1hk_19",
+  "classic": "_classic_1fi1hk_23",
+  "rock": "_rock_1fi1hk_26",
+  "clear": "_clear_1fi1hk_29",
+  "hasBorderBottom": "_hasBorderBottom_1fi1hk_33",
+  "leftIcon": "_leftIcon_1fi1hk_37",
+  "rightIcon": "_rightIcon_1fi1hk_40",
+  "disableLeftPadding": "_disableLeftPadding_1fi1hk_44",
+  "main": "_main_1fi1hk_48",
+  "opening": "_opening_1fi1hk_59",
+  "opened": "_opened_1fi1hk_60",
+  "closing": "_closing_1fi1hk_61",
+  "title": "_title_1fi1hk_95",
+  "content": "_content_1fi1hk_103",
+  "closed": "_closed_1fi1hk_111",
+  "closingTransition": "_closingTransition_1fi1hk_120",
+  "innerWrapper": "_innerWrapper_1fi1hk_127",
+  "button": "_button_1fi1hk_133",
+  "icon": "_icon_1fi1hk_186",
+  "iconPlus": "_iconPlus_1fi1hk_202",
+  "iconArrow": "_iconArrow_1fi1hk_207",
+  "accordion": "_accordion_1fi1hk_213",
+  "accordionGap0": "_accordionGap0_1fi1hk_218",
+  "accordionGap8": "_accordionGap8_1fi1hk_221",
+  "accordionGap12": "_accordionGap12_1fi1hk_224",
+  "accordionGap16": "_accordionGap16_1fi1hk_227",
+  "accordionGap24": "_accordionGap24_1fi1hk_230",
+  "accordionGap32": "_accordionGap32_1fi1hk_233"
 };
 export { styles as default };