@jetbrains/ring-ui-built 8.0.0-beta.2 → 8.0.0-beta.4

package/components/editable-heading/editable-heading.js

@@ -1,13 +1,12 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffectEvent, useLayoutEffect, useEffect } from 'react';
 import classNames from 'classnames';
 import Heading, { Levels } from '../heading/heading.js';
 import { Button } from '../button/button.js';
 import { S as Size, i as inputStyles } from '../_helpers/input.js';
 import getUID from '../global/get-uid.js';
 import Shortcuts from '../shortcuts/shortcuts.js';
-import useEventCallback from '../global/use-event-callback.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../_helpers/heading.js';
@@ -39,12 +38,12 @@ var styles = {"editableHeading":"ring-editable-heading-editableHeading","fullSiz
 function noop() {}
 // eslint-disable-next-line complexity
 const EditableHeading = props => {
-  const $ = c(129);
-  if ($[0] !== "3ac267c2661a712752bc17aadc2ab1fd112b0978580f58998a2e6034e2034a23") {
-    for (let $i = 0; $i < 129; $i += 1) {
+  const $ = c(134);
+  if ($[0] !== "69c208dee49270703e9eadd0182734d1dca44cb4ecb35c235511c58f936a5946") {
+    for (let $i = 0; $i < 134; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "3ac267c2661a712752bc17aadc2ab1fd112b0978580f58998a2e6034e2034a23";
+    $[0] = "69c208dee49270703e9eadd0182734d1dca44cb4ecb35c235511c58f936a5946";
   }
   let children;
   let className;
@@ -275,12 +274,16 @@ const EditableHeading = props => {
     t21 = $[56];
   }
   const inputClasses = t21;
-  const stretch = _temp2;
   let t22;
   if ($[57] !== multiline) {
-    t22 = el_0 => {
-      if (multiline && el_0 && el_0.scrollHeight >= el_0.clientHeight) {
-        stretch(el_0);
+    t22 = el => {
+      if (multiline && el && el.scrollHeight >= el.clientHeight) {
+        el.style.height = "0";
+        const {
+          paddingTop,
+          paddingBottom
+        } = window.getComputedStyle(el);
+        el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
       }
     };
     $[57] = multiline;
@@ -291,10 +294,10 @@ const EditableHeading = props => {
   const checkValue = t22;
   let t23;
   if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
-    t23 = el_1 => {
-      const scrollHeight = el_1.scrollHeight || 0;
-      const clientHeight = el_1.clientHeight || 0;
-      const scrollTop = el_1.scrollTop || 0;
+    t23 = el_0 => {
+      const scrollHeight = el_0.scrollHeight || 0;
+      const clientHeight = el_0.clientHeight || 0;
+      const scrollTop = el_0.scrollTop || 0;
       setIsScrolledToBottom(scrollHeight - clientHeight <= scrollTop);
       setIsOverflow(scrollHeight > clientHeight);
     };
@@ -326,7 +329,7 @@ const EditableHeading = props => {
   } else {
     t25 = $[62];
   }
-  const onMouseMove = useEventCallback(t25);
+  const onMouseMove = useEffectEvent(t25);
   let t26;
   if ($[63] !== disabled || $[64] !== isInSelectionMode || $[65] !== isMouseDown || $[66] !== onEdit) {
     t26 = () => {
@@ -344,7 +347,7 @@ const EditableHeading = props => {
   } else {
     t26 = $[67];
   }
-  const onMouseUp = useEventCallback(t26);
+  const onMouseUp = useEffectEvent(t26);
   let t27;
   if ($[68] !== checkValue || $[69] !== onFocus) {
     t27 = e => {
@@ -400,8 +403,27 @@ const EditableHeading = props => {
   const onInputBlur = t30;
   let t31;
   let t32;
-  if ($[78] !== onMouseMove || $[79] !== onMouseUp) {
+  if ($[78] !== checkValue || $[79] !== isEditing || $[80] !== multiline) {
     t31 = () => {
+      if (multiline && isEditing && textAreaRef.current) {
+        checkValue(textAreaRef.current);
+        checkOverflow(textAreaRef.current);
+      }
+    };
+    t32 = [checkOverflow, checkValue, isEditing, multiline];
+    $[78] = checkValue;
+    $[79] = isEditing;
+    $[80] = multiline;
+    $[81] = t31;
+    $[82] = t32;
+  } else {
+    t31 = $[81];
+    t32 = $[82];
+  }
+  useLayoutEffect(t31, t32);
+  let t33;
+  if ($[83] !== onMouseMove || $[84] !== onMouseUp) {
+    t33 = () => {
       window.addEventListener("mousemove", onMouseMove);
       window.addEventListener("mouseup", onMouseUp);
       return () => {
@@ -409,19 +431,23 @@ const EditableHeading = props => {
         window.removeEventListener("mouseup", onMouseUp);
       };
     };
-    t32 = [onMouseMove, onMouseUp];
-    $[78] = onMouseMove;
-    $[79] = onMouseUp;
-    $[80] = t31;
-    $[81] = t32;
+    $[83] = onMouseMove;
+    $[84] = onMouseUp;
+    $[85] = t33;
   } else {
-    t31 = $[80];
-    t32 = $[81];
+    t33 = $[85];
   }
-  useEffect(t31, t32);
-  let t33;
-  if ($[82] !== autoFocus || $[83] !== children || $[84] !== dataTest || $[85] !== disabled || $[86] !== headingClasses || $[87] !== inputClasses || $[88] !== isEditing || $[89] !== isSaving || $[90] !== isScrolledToBottom || $[91] !== isShortcutsDisabled || $[92] !== level || $[93] !== maxInputRows || $[94] !== multiline || $[95] !== onChange || $[96] !== onInputBlur || $[97] !== onInputChange || $[98] !== onInputFocus || $[99] !== onInputScroll || $[100] !== restProps || $[101] !== shortcutsMap || $[102] !== shortcutsScope || $[103] !== size) {
-    t33 = !disabled && isEditing ? /*#__PURE__*/jsxs(Fragment, {
+  let t34;
+  if ($[86] === Symbol.for("react.memo_cache_sentinel")) {
+    t34 = [];
+    $[86] = t34;
+  } else {
+    t34 = $[86];
+  }
+  useEffect(t33, t34);
+  let t35;
+  if ($[87] !== autoFocus || $[88] !== children || $[89] !== dataTest || $[90] !== disabled || $[91] !== headingClasses || $[92] !== inputClasses || $[93] !== isEditing || $[94] !== isSaving || $[95] !== isScrolledToBottom || $[96] !== isShortcutsDisabled || $[97] !== level || $[98] !== maxInputRows || $[99] !== multiline || $[100] !== onChange || $[101] !== onInputBlur || $[102] !== onInputChange || $[103] !== onInputFocus || $[104] !== onInputScroll || $[105] !== restProps || $[106] !== shortcutsMap || $[107] !== shortcutsScope || $[108] !== size) {
+    t35 = !disabled && isEditing ? /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(Shortcuts, {
         map: shortcutsMap,
         scope: shortcutsScope,
@@ -468,44 +494,44 @@ const EditableHeading = props => {
         children: children
       })
     });
-    $[82] = autoFocus;
-    $[83] = children;
-    $[84] = dataTest;
-    $[85] = disabled;
-    $[86] = headingClasses;
-    $[87] = inputClasses;
-    $[88] = isEditing;
-    $[89] = isSaving;
-    $[90] = isScrolledToBottom;
-    $[91] = isShortcutsDisabled;
-    $[92] = level;
-    $[93] = maxInputRows;
-    $[94] = multiline;
-    $[95] = onChange;
-    $[96] = onInputBlur;
-    $[97] = onInputChange;
-    $[98] = onInputFocus;
-    $[99] = onInputScroll;
-    $[100] = restProps;
-    $[101] = shortcutsMap;
-    $[102] = shortcutsScope;
-    $[103] = size;
-    $[104] = t33;
+    $[87] = autoFocus;
+    $[88] = children;
+    $[89] = dataTest;
+    $[90] = disabled;
+    $[91] = headingClasses;
+    $[92] = inputClasses;
+    $[93] = isEditing;
+    $[94] = isSaving;
+    $[95] = isScrolledToBottom;
+    $[96] = isShortcutsDisabled;
+    $[97] = level;
+    $[98] = maxInputRows;
+    $[99] = multiline;
+    $[100] = onChange;
+    $[101] = onInputBlur;
+    $[102] = onInputChange;
+    $[103] = onInputFocus;
+    $[104] = onInputScroll;
+    $[105] = restProps;
+    $[106] = shortcutsMap;
+    $[107] = shortcutsScope;
+    $[108] = size;
+    $[109] = t35;
   } else {
-    t33 = $[104];
+    t35 = $[109];
   }
-  let t34;
-  if ($[105] !== isEditing || $[106] !== renderMenu) {
-    t34 = !isEditing && renderMenu();
-    $[105] = isEditing;
-    $[106] = renderMenu;
-    $[107] = t34;
+  let t36;
+  if ($[110] !== isEditing || $[111] !== renderMenu) {
+    t36 = !isEditing && renderMenu();
+    $[110] = isEditing;
+    $[111] = renderMenu;
+    $[112] = t36;
   } else {
-    t34 = $[107];
+    t36 = $[112];
   }
-  let t35;
-  if ($[108] !== embedded || $[109] !== isCancelDisabled || $[110] !== isEditing || $[111] !== isSaveDisabled || $[112] !== isSaving || $[113] !== onCancel || $[114] !== onSave || $[115] !== translations) {
-    t35 = isEditing && !embedded && /*#__PURE__*/jsxs(Fragment, {
+  let t37;
+  if ($[113] !== embedded || $[114] !== isCancelDisabled || $[115] !== isEditing || $[116] !== isSaveDisabled || $[117] !== isSaving || $[118] !== onCancel || $[119] !== onSave || $[120] !== translations) {
+    t37 = isEditing && !embedded && /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(Button, {
         className: styles.button,
         primary: true,
@@ -520,72 +546,60 @@ const EditableHeading = props => {
         children: translations.cancel
       })]
     });
-    $[108] = embedded;
-    $[109] = isCancelDisabled;
-    $[110] = isEditing;
-    $[111] = isSaveDisabled;
-    $[112] = isSaving;
-    $[113] = onCancel;
-    $[114] = onSave;
-    $[115] = translations;
-    $[116] = t35;
+    $[113] = embedded;
+    $[114] = isCancelDisabled;
+    $[115] = isEditing;
+    $[116] = isSaveDisabled;
+    $[117] = isSaving;
+    $[118] = onCancel;
+    $[119] = onSave;
+    $[120] = translations;
+    $[121] = t37;
   } else {
-    t35 = $[116];
+    t37 = $[121];
   }
-  let t36;
-  if ($[117] !== classes || $[118] !== t33 || $[119] !== t34 || $[120] !== t35) {
-    t36 = /*#__PURE__*/jsxs("div", {
+  let t38;
+  if ($[122] !== classes || $[123] !== t35 || $[124] !== t36 || $[125] !== t37) {
+    t38 = /*#__PURE__*/jsxs("div", {
       className: classes,
-      children: [t33, t34, t35]
+      children: [t35, t36, t37]
     });
-    $[117] = classes;
-    $[118] = t33;
-    $[119] = t34;
-    $[120] = t35;
-    $[121] = t36;
+    $[122] = classes;
+    $[123] = t35;
+    $[124] = t36;
+    $[125] = t37;
+    $[126] = t38;
   } else {
-    t36 = $[121];
+    t38 = $[126];
   }
-  let t37;
-  if ($[122] !== error || $[123] !== isEditing || $[124] !== size) {
-    t37 = isEditing && error && /*#__PURE__*/jsx("div", {
+  let t39;
+  if ($[127] !== error || $[128] !== isEditing || $[129] !== size) {
+    t39 = isEditing && error && /*#__PURE__*/jsx("div", {
       className: classNames(styles.errorText, size !== Size.AUTO && inputStyles[`size${size}`]),
       children: error
     });
-    $[122] = error;
-    $[123] = isEditing;
-    $[124] = size;
-    $[125] = t37;
+    $[127] = error;
+    $[128] = isEditing;
+    $[129] = size;
+    $[130] = t39;
   } else {
-    t37 = $[125];
+    t39 = $[130];
   }
-  let t38;
-  if ($[126] !== t36 || $[127] !== t37) {
-    t38 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t36, t37]
+  let t40;
+  if ($[131] !== t38 || $[132] !== t39) {
+    t40 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t38, t39]
     });
-    $[126] = t36;
-    $[127] = t37;
-    $[128] = t38;
+    $[131] = t38;
+    $[132] = t39;
+    $[133] = t40;
   } else {
-    t38 = $[128];
+    t40 = $[133];
   }
-  return t38;
+  return t40;
 };
-var editableHeading = /*#__PURE__*/React.memo(EditableHeading);
 function _temp() {
   return null;
 }
-function _temp2(el) {
-  if (!el || !el.style) {
-    return;
-  }
-  el.style.height = "0";
-  const {
-    paddingTop,
-    paddingBottom
-  } = window.getComputedStyle(el);
-  el.style.height = `${el.scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom)}px`;
-}
 
-export { EditableHeading, Levels, Size, editableHeading as default };
+export { EditableHeading, Levels, Size, EditableHeading as default };

package/components/error-bubble/error-bubble.js

@@ -15,7 +15,7 @@ import '../global/sniffer.js';
 import 'sniffr';
 import '../global/data-tests.js';
 import '../tab-trap/tab-trap.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/configuration.js';
 import '../popup/position.js';
 import '../popup/popup.target.js';

package/components/error-message/error-message.js

@@ -6,7 +6,7 @@ import joinDataTestAttributes from '../global/data-tests.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import '../global/memoize.js';
 
 var styles = {"errorMessage":"ring-error-message-errorMessage","title":"ring-error-message-title","description":"ring-error-message-description","content":"ring-error-message-content","icon":"ring-error-message-icon"};

package/components/expand/collapsible-group.d.ts

@@ -1,16 +1,8 @@
-import React from 'react';
-export interface CollapsibleGroupProps {
-    avatar?: React.ReactNode;
-    title: React.ReactNode;
-    subtitle?: React.ReactNode;
-    children?: React.ReactNode;
-    className?: string | null | undefined;
-    defaultExpanded?: boolean;
-    expanded?: boolean | null | undefined;
-    onChange?: (expanded: boolean) => void;
-    disableAnimation?: boolean;
-    interactive?: boolean;
-    'data-test'?: string | null | undefined;
-}
-declare const CollapsibleGroup: React.ForwardRefExoticComponent<CollapsibleGroupProps & React.RefAttributes<HTMLDivElement>>;
-export default CollapsibleGroup;
+import { type CollapsibleGroupProps } from '../collapsible-group/collapsible-group';
+/**
+ * @deprecated The `expand` module has been renamed to `collapsible-group`. This re-export will be removed in
+ * Ring UI 8.0. Use `CollapsibleGroup` from `@jetbrains/ring-ui/components/collapsible-group/collapsible-group` instead.
+ */
+declare const DeprecatedCollapsibleGroup: import("react").ForwardRefExoticComponent<Omit<CollapsibleGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type { CollapsibleGroupProps };
+export default DeprecatedCollapsibleGroup;