@jetbrains/ring-ui-built 8.0.0-beta.3 → 8.0.0-beta.5

package/components/dropdown-menu/dropdown-menu.js

@@ -50,20 +50,20 @@ import '../global/get-event-key.js';
 import '../list/list-title.js';
 import '../list/list-separator.js';
 import '../list/list-hint.js';
-import '../button/button.js';
-import '@jetbrains/icons/chevron-down';
-import '@jetbrains/icons/chevron-12px-down';
-import '../global/controls-height.js';
-import '../global/configuration.js';
-import '../_helpers/button.classes.js';
 import '../popup/popup.js';
 import 'react-dom';
 import '../tab-trap/tab-trap.js';
+import '../global/configuration.js';
 import '../popup/position.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 import '../popup/position-css.js';
 import '../_helpers/theme.js';
+import '../button/button.js';
+import '@jetbrains/icons/chevron-down';
+import '@jetbrains/icons/chevron-12px-down';
+import '../global/controls-height.js';
+import '../_helpers/button.classes.js';
 
 const defaultAriaLabel = 'Dropdown menu';
 function DropdownAnchorWrapper(t0) {

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

@@ -1,6 +1,6 @@
 import { c } from 'react/compiler-runtime';
 import * as React from 'react';
-import { useEffectEvent, 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';
@@ -38,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] !== "7f58f2f72c51c33966552a21e4710894a686c3e1d3b939c62cf38b6b9080fa58") {
-    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] = "7f58f2f72c51c33966552a21e4710894a686c3e1d3b939c62cf38b6b9080fa58";
+    $[0] = "69c208dee49270703e9eadd0182734d1dca44cb4ecb35c235511c58f936a5946";
   }
   let children;
   let className;
@@ -274,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;
@@ -290,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);
     };
@@ -398,8 +402,28 @@ const EditableHeading = props => {
   }
   const onInputBlur = t30;
   let t31;
-  if ($[78] !== onMouseMove || $[79] !== onMouseUp) {
+  let t32;
+  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 () => {
@@ -407,23 +431,23 @@ const EditableHeading = props => {
         window.removeEventListener("mouseup", onMouseUp);
       };
     };
-    $[78] = onMouseMove;
-    $[79] = onMouseUp;
-    $[80] = t31;
+    $[83] = onMouseMove;
+    $[84] = onMouseUp;
+    $[85] = t33;
   } else {
-    t31 = $[80];
+    t33 = $[85];
   }
-  let t32;
-  if ($[81] === Symbol.for("react.memo_cache_sentinel")) {
-    t32 = [];
-    $[81] = t32;
+  let t34;
+  if ($[86] === Symbol.for("react.memo_cache_sentinel")) {
+    t34 = [];
+    $[86] = t34;
   } else {
-    t32 = $[81];
+    t34 = $[86];
   }
-  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, {
+  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,
@@ -470,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,
@@ -522,71 +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;
 };
 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 };

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

@@ -1,20 +1,8 @@
-import React from 'react';
-export interface CollapsibleGroupProps {
-    ref?: React.Ref<HTMLDivElement>;
-    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: {
-    ({ ref, avatar, title, subtitle, children, className, defaultExpanded, expanded, onChange, disableAnimation, interactive, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
-    displayName: string;
-};
-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;