@jetbrains/ring-ui-built 7.0.125 → 8.0.0-beta.11

package/components/collapse/collapse-control.js

@@ -1,5 +1,5 @@
-import { c } from 'react-compiler-runtime';
-import { useContext, cloneElement } from 'react';
+import { c } from 'react/compiler-runtime';
+import { use, cloneElement } from 'react';
 import joinDataTestAttributes from '../global/data-tests.js';
 import { CollapseContext } from './collapse-context.js';
 import { COLLAPSE_CONTROL_TEST_ID } from './consts.js';
@@ -7,11 +7,11 @@ import { jsx } from 'react/jsx-runtime';
 
 const CollapseControl = t0 => {
   const $ = c(13);
-  if ($[0] !== "37a6daba1dc720b937e7d2a844af157177f8338140503553968cf8ae1ecf6263") {
+  if ($[0] !== "10418ecc7774e31a4915bc1ad8a8ad001213057f5df8fc3f9a59adab69451dd6") {
     for (let $i = 0; $i < 13; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "37a6daba1dc720b937e7d2a844af157177f8338140503553968cf8ae1ecf6263";
+    $[0] = "10418ecc7774e31a4915bc1ad8a8ad001213057f5df8fc3f9a59adab69451dd6";
   }
   const {
     children,
@@ -21,7 +21,7 @@ const CollapseControl = t0 => {
     setCollapsed,
     collapsed,
     id
-  } = useContext(CollapseContext);
+  } = use(CollapseContext);
   let t1;
   let t2;
   if ($[1] !== children || $[2] !== collapsed || $[3] !== dataTest || $[4] !== id || $[5] !== setCollapsed) {

package/components/collapse/collapse.js

@@ -1,16 +1,16 @@
-import { c } from 'react-compiler-runtime';
+import { c } from 'react/compiler-runtime';
 import { useState, useId } from 'react';
 import { CollapseContext } from './collapse-context.js';
 import { BASE_ANIMATION_DURATION } from './consts.js';
 import { jsx } from 'react/jsx-runtime';
 
 const Collapse = t0 => {
-  const $ = c(17);
-  if ($[0] !== "3330160d096e3f437f4f27543e39ff405e76a4e1f92b7ab6836337ac8d11cb7e") {
-    for (let $i = 0; $i < 17; $i += 1) {
+  const $ = c(18);
+  if ($[0] !== "dd05ee204290a7a80b9dd7bc0906391032441237b921ff3f0a33117d0cb388ac") {
+    for (let $i = 0; $i < 18; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "3330160d096e3f437f4f27543e39ff405e76a4e1f92b7ab6836337ac8d11cb7e";
+    $[0] = "dd05ee204290a7a80b9dd7bc0906391032441237b921ff3f0a33117d0cb388ac";
   }
   const {
     children,
@@ -32,9 +32,16 @@ const Collapse = t0 => {
   const [innerCollapsed, setInnerCollapsed] = useState(defaultCollapsed);
   const id = useId();
   const finalCollapsedValue = collapsed !== null && collapsed !== void 0 ? collapsed : innerCollapsed;
+  const [previousCollapsedValue, setPreviousCollapsedValue] = useState(finalCollapsedValue);
+  const [animate, setAnimate] = useState(false);
+  if (previousCollapsedValue !== finalCollapsedValue) {
+    setPreviousCollapsedValue(finalCollapsedValue);
+    setAnimate(true);
+  }
   let t8;
   if ($[1] !== finalCollapsedValue || $[2] !== onChange) {
     t8 = () => {
+      setAnimate(true);
       setInnerCollapsed(!finalCollapsedValue);
       onChange(!finalCollapsedValue);
     };
@@ -46,48 +53,50 @@ const Collapse = t0 => {
   }
   const setCollapsed = t8;
   let t9;
-  if ($[4] !== disableAnimation || $[5] !== duration || $[6] !== finalCollapsedValue || $[7] !== id || $[8] !== keepMounted || $[9] !== setCollapsed) {
+  if ($[4] !== animate || $[5] !== disableAnimation || $[6] !== duration || $[7] !== finalCollapsedValue || $[8] !== id || $[9] !== keepMounted || $[10] !== setCollapsed) {
     t9 = {
       collapsed: finalCollapsedValue,
       setCollapsed,
       duration,
+      animate,
       disableAnimation,
       keepMounted,
       id
     };
-    $[4] = disableAnimation;
-    $[5] = duration;
-    $[6] = finalCollapsedValue;
-    $[7] = id;
-    $[8] = keepMounted;
-    $[9] = setCollapsed;
-    $[10] = t9;
+    $[4] = animate;
+    $[5] = disableAnimation;
+    $[6] = duration;
+    $[7] = finalCollapsedValue;
+    $[8] = id;
+    $[9] = keepMounted;
+    $[10] = setCollapsed;
+    $[11] = t9;
   } else {
-    t9 = $[10];
+    t9 = $[11];
   }
   let t10;
-  if ($[11] !== children || $[12] !== t9) {
-    t10 = /*#__PURE__*/jsx(CollapseContext.Provider, {
+  if ($[12] !== children || $[13] !== t9) {
+    t10 = /*#__PURE__*/jsx(CollapseContext, {
       value: t9,
       children: children
     });
-    $[11] = children;
-    $[12] = t9;
-    $[13] = t10;
+    $[12] = children;
+    $[13] = t9;
+    $[14] = t10;
   } else {
-    t10 = $[13];
+    t10 = $[14];
   }
   let t11;
-  if ($[14] !== className || $[15] !== t10) {
+  if ($[15] !== className || $[16] !== t10) {
     t11 = /*#__PURE__*/jsx("div", {
       className: className,
       children: t10
     });
-    $[14] = className;
-    $[15] = t10;
-    $[16] = t11;
+    $[15] = className;
+    $[16] = t10;
+    $[17] = t11;
   } else {
-    t11 = $[16];
+    t11 = $[17];
   }
   return t11;
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface CollapsibleGroupProps {
+    ref?: React.Ref<HTMLDivElement>;
     avatar?: React.ReactNode;
     title: React.ReactNode;
     subtitle?: React.ReactNode;
@@ -25,5 +26,8 @@ export interface CollapsibleGroupProps {
     headingLevel?: 2 | 3 | 4 | 5 | 6;
     'data-test'?: string | null | undefined;
 }
-declare const CollapsibleGroup: React.ForwardRefExoticComponent<CollapsibleGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleGroup: {
+    ({ ref, avatar, title, subtitle, children, className, defaultExpanded, expanded, onChange, disableAnimation, interactive, keepMounted, headingLevel, "data-test": dataTest, }: CollapsibleGroupProps): React.JSX.Element;
+    displayName: string;
+};
 export default CollapsibleGroup;

package/components/collapsible-group/collapsible-group.js

@@ -1,5 +1,5 @@
-import { c } from 'react-compiler-runtime';
-import React__default, { forwardRef, useState, useContext } from 'react';
+import { c } from 'react/compiler-runtime';
+import React__default, { useState, use } from 'react';
 import classNames from 'classnames';
 import chevronRightIcon from '@jetbrains/icons/chevron-12px-right';
 import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
@@ -11,22 +11,22 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import '../global/configuration.js';
 import '../global/memoize.js';
 import '../collapse/consts.js';
 import '../global/data-tests.js';
 import '../global/dom.js';
+import '../global/parse-css-duration.js';
 import '../collapse/utils.js';
 
-var styles = {"expand":"ring-collapsible-group-expand","collapseRoot":"ring-collapsible-group-collapseRoot","hovered":"ring-collapsible-group-hovered","expanded":"ring-collapsible-group-expanded","focused":"ring-collapsible-group-focused","header":"ring-collapsible-group-header","heading":"ring-collapsible-group-heading","headerButton":"ring-collapsible-group-headerButton","headerStatic":"ring-collapsible-group-headerStatic","headerContent":"ring-collapsible-group-headerContent","avatarGroup":"ring-collapsible-group-avatarGroup","title":"ring-collapsible-group-title","subtitleGroup":"ring-collapsible-group-subtitleGroup","subtitle":"ring-collapsible-group-subtitle","subtitleChevron":"ring-collapsible-group-subtitleChevron","toggle":"ring-collapsible-group-toggle","toggleIcon":"ring-collapsible-group-toggleIcon","body":"ring-collapsible-group-body"};
+var styles = {"expand":"ring-collapsible-group-expand","collapseRoot":"ring-collapsible-group-collapseRoot","hovered":"ring-collapsible-group-hovered","expanded":"ring-collapsible-group-expanded","headerButton":"ring-collapsible-group-headerButton","header":"ring-collapsible-group-header","heading":"ring-collapsible-group-heading","headerStatic":"ring-collapsible-group-headerStatic","headerContent":"ring-collapsible-group-headerContent","avatarGroup":"ring-collapsible-group-avatarGroup","title":"ring-collapsible-group-title","subtitleGroup":"ring-collapsible-group-subtitleGroup","subtitle":"ring-collapsible-group-subtitle","subtitleChevron":"ring-collapsible-group-subtitleChevron","toggle":"ring-collapsible-group-toggle","toggleIcon":"ring-collapsible-group-toggleIcon","body":"ring-collapsible-group-body"};
 
 function CollapsibleGroupHeaderContent(t0) {
   const $ = c(16);
-  if ($[0] !== "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa") {
+  if ($[0] !== "1f361c2ded768218a0a90f8cd47ebb79eb0ef7a40f501eb82fe1f1443b14d037") {
     for (let $i = 0; $i < 16; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa";
+    $[0] = "1f361c2ded768218a0a90f8cd47ebb79eb0ef7a40f501eb82fe1f1443b14d037";
   }
   const {
     avatar,
@@ -35,7 +35,7 @@ function CollapsibleGroupHeaderContent(t0) {
   } = t0;
   const {
     collapsed
-  } = useContext(CollapseContext);
+  } = use(CollapseContext);
   let t1;
   if ($[1] !== titleContent) {
     t1 = /*#__PURE__*/jsx("span", {
@@ -121,11 +121,11 @@ function CollapsibleGroupHeaderContent(t0) {
 }
 function CollapsibleGroupHeader(t0) {
   const $ = c(16);
-  if ($[0] !== "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa") {
+  if ($[0] !== "1f361c2ded768218a0a90f8cd47ebb79eb0ef7a40f501eb82fe1f1443b14d037") {
     for (let $i = 0; $i < 16; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa";
+    $[0] = "1f361c2ded768218a0a90f8cd47ebb79eb0ef7a40f501eb82fe1f1443b14d037";
   }
   let avatar;
   let buttonProps;
@@ -153,7 +153,7 @@ function CollapsibleGroupHeader(t0) {
     setCollapsed,
     collapsed,
     id
-  } = useContext(CollapseContext);
+  } = use(CollapseContext);
   const t1 = `collapse-content-${id}`;
   const t2 = !collapsed;
   let t3;
@@ -194,11 +194,11 @@ function CollapsibleGroupHeader(t0) {
 }
 function CollapsibleGroupHeaderStatic(t0) {
   const $ = c(5);
-  if ($[0] !== "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa") {
+  if ($[0] !== "1f361c2ded768218a0a90f8cd47ebb79eb0ef7a40f501eb82fe1f1443b14d037") {
     for (let $i = 0; $i < 5; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa";
+    $[0] = "1f361c2ded768218a0a90f8cd47ebb79eb0ef7a40f501eb82fe1f1443b14d037";
   }
   const {
     avatar,
@@ -224,15 +224,16 @@ function CollapsibleGroupHeaderStatic(t0) {
   }
   return t1;
 }
-const CollapsibleGroup = /*#__PURE__*/forwardRef((t0, ref) => {
-  const $ = c(33);
-  if ($[0] !== "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa") {
-    for (let $i = 0; $i < 33; $i += 1) {
+const CollapsibleGroup = t0 => {
+  const $ = c(31);
+  if ($[0] !== "1f361c2ded768218a0a90f8cd47ebb79eb0ef7a40f501eb82fe1f1443b14d037") {
+    for (let $i = 0; $i < 31; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "cbe0597c73ab62ed991f87044cb9b2d934802c6afcf5a086cbdf67a67a6010fa";
+    $[0] = "1f361c2ded768218a0a90f8cd47ebb79eb0ef7a40f501eb82fe1f1443b14d037";
   }
   const {
+    ref,
     avatar,
     title,
     subtitle,
@@ -255,7 +256,6 @@ const CollapsibleGroup = /*#__PURE__*/forwardRef((t0, ref) => {
   const keepMounted = t6 === undefined ? false : t6;
   const [innerExpanded, setInnerExpanded] = useState(defaultExpanded);
   const [hovered, setHovered] = useState(false);
-  const [focused, setFocused] = useState(false);
   const isExpanded = expanded !== null && expanded !== void 0 ? expanded : innerExpanded;
   let t7;
   if ($[1] !== expanded || $[2] !== onChange) {
@@ -274,125 +274,107 @@ const CollapsibleGroup = /*#__PURE__*/forwardRef((t0, ref) => {
   }
   const handleChange = t7;
   let t8;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = event => {
-      const nextTarget = event.relatedTarget;
-      if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
-        return;
-      }
-      setFocused(false);
-    };
-    $[4] = t8;
-  } else {
-    t8 = $[4];
-  }
-  const onBlur = t8;
-  let t9;
-  if ($[5] !== className || $[6] !== focused || $[7] !== hovered || $[8] !== isExpanded) {
-    t9 = classNames(styles.expand, className, {
+  if ($[4] !== className || $[5] !== hovered || $[6] !== isExpanded) {
+    t8 = classNames(styles.expand, className, {
       [styles.hovered]: hovered,
-      [styles.expanded]: isExpanded,
-      [styles.focused]: focused
+      [styles.expanded]: isExpanded
     });
-    $[5] = className;
-    $[6] = focused;
-    $[7] = hovered;
-    $[8] = isExpanded;
-    $[9] = t9;
+    $[4] = className;
+    $[5] = hovered;
+    $[6] = isExpanded;
+    $[7] = t8;
   } else {
-    t9 = $[9];
+    t8 = $[7];
   }
-  const classes = t9;
-  let t10;
-  if ($[10] !== avatar || $[11] !== interactive || $[12] !== subtitle || $[13] !== title) {
-    t10 = interactive ? /*#__PURE__*/jsx(CollapsibleGroupHeader, {
+  const classes = t8;
+  let t9;
+  if ($[8] !== avatar || $[9] !== interactive || $[10] !== subtitle || $[11] !== title) {
+    t9 = interactive ? /*#__PURE__*/jsx(CollapsibleGroupHeader, {
       avatar: avatar,
       titleContent: title,
       subtitle: subtitle,
       onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      onFocus: () => setFocused(true),
-      onBlur: onBlur
+      onMouseLeave: () => setHovered(false)
     }) : /*#__PURE__*/jsx(CollapsibleGroupHeaderStatic, {
       avatar: avatar,
       titleContent: title,
       subtitle: subtitle
     });
-    $[10] = avatar;
-    $[11] = interactive;
-    $[12] = subtitle;
-    $[13] = title;
-    $[14] = t10;
+    $[8] = avatar;
+    $[9] = interactive;
+    $[10] = subtitle;
+    $[11] = title;
+    $[12] = t9;
   } else {
-    t10 = $[14];
+    t9 = $[12];
   }
-  const header = t10;
-  const t11 = !defaultExpanded;
-  const t12 = expanded == null ? null : !expanded;
-  let t13;
-  if ($[15] !== header || $[16] !== headingLevel) {
-    t13 = headingLevel != null ? /*#__PURE__*/React__default.createElement(`h${headingLevel}`, {
+  const header = t9;
+  const t10 = !defaultExpanded;
+  const t11 = expanded == null ? null : !expanded;
+  let t12;
+  if ($[13] !== header || $[14] !== headingLevel) {
+    t12 = headingLevel != null ? /*#__PURE__*/React__default.createElement(`h${headingLevel}`, {
       className: styles.heading
     }, header) : header;
-    $[15] = header;
-    $[16] = headingLevel;
-    $[17] = t13;
+    $[13] = header;
+    $[14] = headingLevel;
+    $[15] = t12;
   } else {
-    t13 = $[17];
+    t12 = $[15];
   }
-  let t14;
-  if ($[18] !== children) {
-    t14 = /*#__PURE__*/jsx(CollapseContent, {
+  let t13;
+  if ($[16] !== children) {
+    t13 = /*#__PURE__*/jsx(CollapseContent, {
       children: /*#__PURE__*/jsx("div", {
         className: styles.body,
         children: children
       })
     });
-    $[18] = children;
-    $[19] = t14;
+    $[16] = children;
+    $[17] = t13;
   } else {
-    t14 = $[19];
+    t13 = $[17];
   }
-  let t15;
-  if ($[20] !== disableAnimation || $[21] !== handleChange || $[22] !== keepMounted || $[23] !== t11 || $[24] !== t12 || $[25] !== t13 || $[26] !== t14) {
-    t15 = /*#__PURE__*/jsxs(Collapse, {
-      defaultCollapsed: t11,
-      collapsed: t12,
+  let t14;
+  if ($[18] !== disableAnimation || $[19] !== handleChange || $[20] !== keepMounted || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t13) {
+    t14 = /*#__PURE__*/jsxs(Collapse, {
+      defaultCollapsed: t10,
+      collapsed: t11,
       onChange: handleChange,
       disableAnimation: disableAnimation,
       keepMounted: keepMounted,
       className: styles.collapseRoot,
-      children: [t13, t14]
+      children: [t12, t13]
     });
-    $[20] = disableAnimation;
-    $[21] = handleChange;
-    $[22] = keepMounted;
-    $[23] = t11;
-    $[24] = t12;
-    $[25] = t13;
-    $[26] = t14;
-    $[27] = t15;
+    $[18] = disableAnimation;
+    $[19] = handleChange;
+    $[20] = keepMounted;
+    $[21] = t10;
+    $[22] = t11;
+    $[23] = t12;
+    $[24] = t13;
+    $[25] = t14;
   } else {
-    t15 = $[27];
+    t14 = $[25];
   }
-  let t16;
-  if ($[28] !== classes || $[29] !== dataTest || $[30] !== ref || $[31] !== t15) {
-    t16 = /*#__PURE__*/jsx("div", {
+  let t15;
+  if ($[26] !== classes || $[27] !== dataTest || $[28] !== ref || $[29] !== t14) {
+    t15 = /*#__PURE__*/jsx("div", {
       ref: ref,
       className: classes,
       "data-test": dataTest,
-      children: t15
+      children: t14
     });
-    $[28] = classes;
-    $[29] = dataTest;
-    $[30] = ref;
-    $[31] = t15;
-    $[32] = t16;
+    $[26] = classes;
+    $[27] = dataTest;
+    $[28] = ref;
+    $[29] = t14;
+    $[30] = t15;
   } else {
-    t16 = $[32];
+    t15 = $[30];
   }
-  return t16;
-});
+  return t15;
+};
 CollapsibleGroup.displayName = 'CollapsibleGroup';
 function _temp() {}
 

package/components/components/util-stories.js

@@ -1,3 +1,65 @@
+/* eslint-disable no-magic-numbers */
 const hideAddonsPanelParam = 'hideAddonsPanel';
+function createRandom(seed) {
+  const u64Mask = 2n ** 64n - 1n;
+  const u64Range = 2n ** 64n;
+  const scrambleConst = 2685821657736338717n;
+  let x = seed & u64Mask;
+  if (!x) throw new Error('Seed must be non-zero');
+  function nextFractional() {
+    x ^= x >> 12n;
+    x ^= x << 25n & u64Mask;
+    x ^= x >> 27n;
+    const scrambled = x * scrambleConst & u64Mask;
+    return Number(scrambled) / Number(u64Range);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (...args) => {
+    if (!args.length) {
+      return nextFractional();
+    }
+    if (args.length === 1) {
+      const [a] = args;
+      if (typeof a === 'number') {
+        return Math.floor(nextFractional() * a);
+      }
+      if (Array.isArray(a)) {
+        return a[Math.floor(nextFractional() * a.length)];
+      }
+    }
+    if (args.length === 2) {
+      const [a, b] = args;
+      let fromNum;
+      let toNum;
+      let isDate = false;
+      if (typeof a === 'number' && typeof b === 'number') {
+        fromNum = a;
+        toNum = b;
+      }
+      if (a instanceof Date && b instanceof Date) {
+        fromNum = a.getTime();
+        toNum = b.getTime();
+        isDate = true;
+      }
+      if (fromNum != null && toNum != null && fromNum < toNum) {
+        const r = Math.floor(nextFractional() * (toNum - fromNum)) + fromNum;
+        return isDate ? new Date(r) : r;
+      }
+      if (Array.isArray(a) && typeof b === 'number') {
+        const aIndices = Array.from({
+          length: a.length
+        }, (_, i) => i);
+        const sample = [];
+        for (let i = 0; i < b && aIndices.length; i++) {
+          const indexIndex = Math.floor(nextFractional() * aIndices.length);
+          const [aIndex] = aIndices.splice(indexIndex, 1);
+          sample.push(a[aIndex]);
+        }
+        return sample;
+      }
+    }
+    throw new Error(`Bad args: ${JSON.stringify(args)}`);
+  };
+}
 
-export { hideAddonsPanelParam };
+export { createRandom, hideAddonsPanelParam };

package/components/confirm/confirm.js

@@ -8,12 +8,11 @@ import HeaderWrapper from '../island/header.js';
 import ContentWrapper from '../island/content.js';
 import Panel from '../panel/panel.js';
 import 'react-dom';
-import '@jetbrains/icons/close';
 import '../island/island.js';
 import '../global/data-tests.js';
 import '../island/adaptive-island-hoc.js';
 import '../global/linear-function.js';
-import 'react-compiler-runtime';
+import 'react/compiler-runtime';
 import 'element-resize-detector';
 import '../global/schedule-raf.js';
 import '../global/get-uid.js';
@@ -32,18 +31,24 @@ import '../popup/position.js';
 import '../popup/popup.consts.js';
 import '../popup/position-css.js';
 import '../_helpers/theme.js';
-import '../_helpers/dialog-body-scroll-preventer.js';
+import '../global/get-viewport-size.js';
+import '../dialog/dialog-body-scroll-preventer.js';
 import 'scrollbar-width';
-import '@jetbrains/icons/chevron-down';
-import '@jetbrains/icons/chevron-12px-down';
-import 'util-deprecate';
+import '../_helpers/dialog.js';
+import '../dialog/dialog-controls.js';
+import '@jetbrains/icons/close';
+import '@jetbrains/icons/resize-corner-12px';
 import '../icon/icon.js';
+import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
+import '@jetbrains/icons/chevron-down';
+import '@jetbrains/icons/chevron-12px-down';
 import '../link/clickable-link.js';
 import '../global/controls-height.js';
 import '../_helpers/button.classes.js';
+import '../dialog/dialog-geometry.js';
 
 class Confirm extends PureComponent {
   static defaultProps = {
@@ -77,6 +82,23 @@ class Confirm extends PureComponent {
       onReject,
       native
     } = this.props;
+    const actions = [/*#__PURE__*/jsx(Button, {
+      "data-test": "confirm-reject-button",
+      onClick: onReject,
+      disabled: inProgress,
+      primary: cancelIsDefault,
+      children: rejectLabel
+    }, 'reject'), /*#__PURE__*/jsx(Button, {
+      "data-test": "confirm-ok-button",
+      primary: !cancelIsDefault,
+      loader: inProgress,
+      disabled: inProgress,
+      onClick: onConfirm,
+      children: confirmLabel
+    }, 'confirm')];
+    if (cancelIsDefault) {
+      actions.reverse();
+    }
     return /*#__PURE__*/jsxs(Dialog, {
       label: text || (typeof description === 'string' ? description : undefined),
       className: className,
@@ -89,21 +111,8 @@ class Confirm extends PureComponent {
         children: text
       }), description && /*#__PURE__*/jsx(ContentWrapper, {
         children: description
-      }), /*#__PURE__*/jsxs(Panel, {
-        children: [/*#__PURE__*/jsx(Button, {
-          "data-test": "confirm-ok-button",
-          primary: !cancelIsDefault,
-          loader: inProgress,
-          disabled: inProgress,
-          onClick: onConfirm,
-          children: confirmLabel
-        }), /*#__PURE__*/jsx(Button, {
-          "data-test": "confirm-reject-button",
-          onClick: onReject,
-          disabled: inProgress,
-          primary: cancelIsDefault,
-          children: rejectLabel
-        })]
+      }), /*#__PURE__*/jsx(Panel, {
+        children: actions
       })]
     });
   }