@rescui/collapse 0.8.4-RUI-297-Add-react-compiler-to-the-packages-build-f15074a13.11 → 0.8.5

package/lib/_virtual/index.css.js

@@ -1,15 +1,15 @@
 var styles = {
-  "icon": "_icon_ydxoyp_4",
-  "sizeXS": "_sizeXS_ydxoyp_14",
-  "sizeS": "_sizeS_ydxoyp_18",
-  "sizeM": "_sizeM_ydxoyp_22",
-  "sizeL": "_sizeL_ydxoyp_26",
-  "light": "_light_ydxoyp_30",
-  "dark": "_dark_ydxoyp_34",
-  "allVariants": "_allVariants_ydxoyp_48",
-  "variant16": "_variant16_ydxoyp_53",
-  "variant20": "_variant20_ydxoyp_54",
-  "variant24": "_variant24_ydxoyp_55",
-  "variant28": "_variant28_ydxoyp_58"
+  "icon": "_icon_1npbgia_4",
+  "sizeXS": "_sizeXS_1npbgia_14",
+  "sizeS": "_sizeS_1npbgia_18",
+  "sizeM": "_sizeM_1npbgia_22",
+  "sizeL": "_sizeL_1npbgia_26",
+  "light": "_light_1npbgia_30",
+  "dark": "_dark_1npbgia_34",
+  "allVariants": "_allVariants_1npbgia_48",
+  "variant16": "_variant16_1npbgia_53",
+  "variant20": "_variant20_1npbgia_54",
+  "variant24": "_variant24_1npbgia_55",
+  "variant28": "_variant28_1npbgia_58"
 };
 export { styles as default };

package/lib/accordion.js

@@ -1,6 +1,4 @@
 "use client";
-import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
-import { c } from 'react-compiler-runtime';
 import React, { useState } from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
@@ -20,104 +18,39 @@ const THEME_STYLES = {
   dark: styles.themeDark
 };
 const Accordion = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
-(t0, ref) => {
-  const $ = c(39);
-  let children;
-  let className;
-  let onChange;
-  let openedClassName;
-  let restProps;
-  let t1;
-  let t2;
-  let t3;
-  let t4;
-  let t5;
-  let t6;
-  let themeFromProps;
-  let value;
-
-  if ($[0] !== t0) {
-    ({
-      children,
-      className,
-      openedClassName,
-      size: t1,
-      mode: t2,
-      icon: t3,
-      borderBottom: t4,
-      disableLeftPadding: t5,
-      gap: t6,
-      theme: themeFromProps,
-      value,
-      onChange,
-      ...restProps
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = className;
-    $[3] = onChange;
-    $[4] = openedClassName;
-    $[5] = restProps;
-    $[6] = t1;
-    $[7] = t2;
-    $[8] = t3;
-    $[9] = t4;
-    $[10] = t5;
-    $[11] = t6;
-    $[12] = themeFromProps;
-    $[13] = value;
-  } else {
-    children = $[1];
-    className = $[2];
-    onChange = $[3];
-    openedClassName = $[4];
-    restProps = $[5];
-    t1 = $[6];
-    t2 = $[7];
-    t3 = $[8];
-    t4 = $[9];
-    t5 = $[10];
-    t6 = $[11];
-    themeFromProps = $[12];
-    value = $[13];
-  }
-
-  const size = t1 === undefined ? "m" : t1;
-  const mode = t2 === undefined ? "classic" : t2;
-  const icon = t3 === undefined ? "left-plus" : t3;
-  const borderBottom = t4 === undefined ? false : t4;
-  const disableLeftPadding = t5 === undefined ? false : t5;
-  const gap = t6 === undefined ? 0 : t6;
-  const isControlled = typeof value !== "undefined";
+(_ref, ref) => {
+  let {
+    children,
+    className,
+    openedClassName,
+    size = 'm',
+    mode = 'classic',
+    icon = 'left-plus',
+    borderBottom = false,
+    disableLeftPadding = false,
+    gap = 0,
+    theme: themeFromProps,
+    value,
+    onChange,
+    ...restProps
+  } = _ref;
+  const isControlled = typeof value !== 'undefined';
   const theme = useThemeWithUndefined(themeFromProps);
   const [openKey, setActiveKey] = useState(isControlled ? value : null);
-  let t7;
-
-  if ($[14] !== onChange || $[15] !== openKey) {
-    t7 = key => {
-      const activatingKey = key !== openKey ? key : null;
 
-      if (onChange) {
-        onChange(activatingKey);
-      }
+  const toggleActiveKey = key => {
+    const activatingKey = key !== openKey ? key : null;
 
-      setActiveKey(activatingKey);
-    };
+    if (onChange) {
+      onChange(activatingKey);
+    }
 
-    $[14] = onChange;
-    $[15] = openKey;
-    $[16] = t7;
-  } else {
-    t7 = $[16];
-  }
+    setActiveKey(activatingKey);
+  };
 
-  const toggleActiveKey = t7;
-  const t8 = isControlled ? value : openKey;
-  let t9;
-
-  if ($[17] !== borderBottom || $[18] !== disableLeftPadding || $[19] !== icon || $[20] !== isControlled || $[21] !== mode || $[22] !== openedClassName || $[23] !== size || $[24] !== t8 || $[25] !== toggleActiveKey) {
-    t9 = {
-      openedKey: t8,
+  return /*#__PURE__*/React.createElement(collapseContext.Provider, {
+    value: {
+      openedKey: isControlled ? value : openKey,
       isInAccordion: true,
       isInControlledAccordion: isControlled,
       toggleActiveKey,
@@ -128,67 +61,13 @@ const Accordion = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line com
       borderBottom,
       disableLeftPadding,
       openedClassName
-    };
-    $[17] = borderBottom;
-    $[18] = disableLeftPadding;
-    $[19] = icon;
-    $[20] = isControlled;
-    $[21] = mode;
-    $[22] = openedClassName;
-    $[23] = size;
-    $[24] = t8;
-    $[25] = toggleActiveKey;
-    $[26] = t9;
-  } else {
-    t9 = $[26];
-  }
-
-  const t10 = GAP_STYLES[gap];
-  const t11 = THEME_STYLES[theme];
-  let t12;
-
-  if ($[27] !== className || $[28] !== t10 || $[29] !== t11) {
-    t12 = cn(styles.accordion, t10, t11, className);
-    $[27] = className;
-    $[28] = t10;
-    $[29] = t11;
-    $[30] = t12;
-  } else {
-    t12 = $[30];
-  }
-
-  let t13;
-
-  if ($[31] !== children || $[32] !== ref || $[33] !== restProps || $[34] !== t12) {
-    t13 = /*#__PURE__*/React.createElement("div", _extends({
-      "data-test": "accordion"
-    }, restProps, {
-      className: t12,
-      ref: ref
-    }), children);
-    $[31] = children;
-    $[32] = ref;
-    $[33] = restProps;
-    $[34] = t12;
-    $[35] = t13;
-  } else {
-    t13 = $[35];
-  }
-
-  let t14;
-
-  if ($[36] !== t13 || $[37] !== t9) {
-    t14 = /*#__PURE__*/React.createElement(collapseContext.Provider, {
-      value: t9
-    }, t13);
-    $[36] = t13;
-    $[37] = t9;
-    $[38] = t14;
-  } else {
-    t14 = $[38];
-  }
-
-  return t14;
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test": 'accordion',
+    ...restProps,
+    className: cn(styles.accordion, GAP_STYLES[gap], THEME_STYLES[theme], className),
+    ref: ref
+  }, children));
 });
 Accordion.displayName = 'Accordion';
 Accordion.propTypes = {

package/lib/collapse.js

@@ -1,11 +1,8 @@
 "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 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';
@@ -32,83 +29,25 @@ 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;
+(_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;
   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 [key] = useState(() => itemKey ?? uniqueId);
+  const [isAccordionConnected, setIsAccordionConnected] = useState(false);
   const theme = useThemeWithUndefined(themeFromProps);
   const {
     openedKey,
@@ -123,260 +62,88 @@ 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 contentRef = useRef(null);
+  const [isAnimationEnabled, setIsAnimationEnabled] = useState(!isInAccordion); // this state is ignored in accordion
+
+  const [shouldBeOpenedLocal, setShouldBeOpenedLocal] = useState(isDefaultOpened); // boolean state. ignores CLOSING and OPENING states
+
+  const shouldBeOpened = isAccordionConnected ? openedKey === key : shouldBeOpenedLocal;
+  useEffect(() => {
+    if (!isInAccordion) {
+      return;
+    }
+
+    if (!isAccordionConnected) {
+      // For an uncontrolled accordion, register the initially opened item.
+      // Keep using the local state until this update and the connection update
+      // have rendered together.
+      if (!isInControlledAccordion && isDefaultOpened && setActiveKey) {
+        setActiveKey(key);
+      } // eslint-disable-next-line react-hooks/set-state-in-effect
 
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = entry => setHeight(entry.target.offsetHeight);
 
-    $[17] = t3;
-  } else {
-    t3 = $[17];
-  }
+      setIsAccordionConnected(true);
+      return;
+    } // The first accordion state has already been committed. Enabling
+    // transitions separately makes its initial reconciliation instantaneous.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
 
-  useResizeObserver(resizeRef, t3);
-  const isHeightCalculated = height !== "initial";
-  const [shouldBeOpenedLocal, setShouldBeOpenedLocal] = useState(isDefaultOpened);
-  const shouldBeOpened = isInAccordion ? openedKey === key : shouldBeOpenedLocal;
-  const t4 = !isHeightCalculated;
-  let t5;
 
-  if ($[18] !== shouldBeOpened || $[19] !== t4) {
-    t5 = {
-      shouldBeOpened,
-      cancelAnimation: t4
-    };
-    $[18] = shouldBeOpened;
-    $[19] = t4;
-    $[20] = t5;
-  } else {
-    t5 = $[20];
-  }
+    setIsAnimationEnabled(true);
+  }, [isAccordionConnected, isInAccordion, isInControlledAccordion, isDefaultOpened, setActiveKey, key]); // add CLOSING and OPENING states
 
-  const {
-    contentRef,
-    isStartedClosing,
-    onAnimationEnd: handleTransitionEnd,
-    state: collapseState
-  } = useCollapseState(t5);
+  const collapseState = useCollapseState({
+    shouldBeOpened,
+    contentRef
+  });
   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 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);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": 'collapse',
+    ...restProps,
+    className: cn(className, styles.main, isAnimationEnabled && styles.animationEnabled, isOpening && styles.opening, isOpened && styles.opened, 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",
+    ref: contentRef,
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.innerWrapper
+  }, children)));
 });
 Collapse.displayName = 'Collapse';
 Collapse.propTypes = {