@jetbrains/ring-ui-built 7.0.101 → 7.0.102

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

@@ -0,0 +1,16 @@
+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;

package/components/expand/collapsible-group.js

@@ -0,0 +1,381 @@
+import { c } from 'react-compiler-runtime';
+import { forwardRef, useState, useContext } from 'react';
+import classNames from 'classnames';
+import chevronRightIcon from '@jetbrains/icons/chevron-12px-right';
+import chevron12pxDown from '@jetbrains/icons/chevron-12px-down';
+import Icon from '../icon/icon.js';
+import { Collapse } from '../collapse/collapse.js';
+import { CollapseContent } from '../collapse/collapse-content.js';
+import { CollapseContext } from '../collapse/collapse-context.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'util-deprecate';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../global/memoize.js';
+import '../collapse/consts.js';
+import '../global/data-tests.js';
+import '../global/dom.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","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"};
+
+function CollapsibleGroupHeaderContent(t0) {
+  const $ = c(16);
+  if ($[0] !== "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3") {
+    for (let $i = 0; $i < 16; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3";
+  }
+  const {
+    avatar,
+    titleContent,
+    subtitle
+  } = t0;
+  const {
+    collapsed
+  } = useContext(CollapseContext);
+  let t1;
+  if ($[1] !== titleContent) {
+    t1 = /*#__PURE__*/jsx("span", {
+      className: styles.title,
+      children: titleContent
+    });
+    $[1] = titleContent;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== avatar || $[4] !== t1) {
+    t2 = /*#__PURE__*/jsxs("span", {
+      className: styles.avatarGroup,
+      children: [avatar, t1]
+    });
+    $[3] = avatar;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== subtitle) {
+    t3 = subtitle ? /*#__PURE__*/jsxs("span", {
+      className: styles.subtitleGroup,
+      children: [/*#__PURE__*/jsx(Icon, {
+        className: styles.subtitleChevron,
+        glyph: chevronRightIcon,
+        "aria-hidden": true
+      }), /*#__PURE__*/jsx("span", {
+        className: styles.subtitle,
+        children: subtitle
+      })]
+    }) : null;
+    $[6] = subtitle;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== t2 || $[9] !== t3) {
+    t4 = /*#__PURE__*/jsxs("span", {
+      className: styles.headerContent,
+      children: [t2, t3]
+    });
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const t5 = collapsed ? chevronRightIcon : chevron12pxDown;
+  let t6;
+  if ($[11] !== t5) {
+    t6 = /*#__PURE__*/jsx("span", {
+      className: styles.toggle,
+      "aria-hidden": true,
+      children: /*#__PURE__*/jsx(Icon, {
+        className: styles.toggleIcon,
+        glyph: t5
+      })
+    });
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== t4 || $[14] !== t6) {
+    t7 = /*#__PURE__*/jsxs("span", {
+      className: styles.header,
+      children: [t4, t6]
+    });
+    $[13] = t4;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  return t7;
+}
+function CollapsibleGroupHeader(t0) {
+  const $ = c(16);
+  if ($[0] !== "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3") {
+    for (let $i = 0; $i < 16; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3";
+  }
+  let avatar;
+  let buttonProps;
+  let subtitle;
+  let titleContent;
+  if ($[1] !== t0) {
+    ({
+      avatar,
+      titleContent,
+      subtitle,
+      ...buttonProps
+    } = t0);
+    $[1] = t0;
+    $[2] = avatar;
+    $[3] = buttonProps;
+    $[4] = subtitle;
+    $[5] = titleContent;
+  } else {
+    avatar = $[2];
+    buttonProps = $[3];
+    subtitle = $[4];
+    titleContent = $[5];
+  }
+  const {
+    setCollapsed,
+    collapsed,
+    id
+  } = useContext(CollapseContext);
+  const t1 = `collapse-content-${id}`;
+  const t2 = !collapsed;
+  let t3;
+  if ($[6] !== avatar || $[7] !== subtitle || $[8] !== titleContent) {
+    t3 = /*#__PURE__*/jsx(CollapsibleGroupHeaderContent, {
+      avatar: avatar,
+      titleContent: titleContent,
+      subtitle: subtitle
+    });
+    $[6] = avatar;
+    $[7] = subtitle;
+    $[8] = titleContent;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== buttonProps || $[11] !== setCollapsed || $[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
+    t4 = /*#__PURE__*/jsx("button", {
+      type: "button",
+      ...buttonProps,
+      className: styles.headerButton,
+      onClick: setCollapsed,
+      "aria-controls": t1,
+      "aria-expanded": t2,
+      children: t3
+    });
+    $[10] = buttonProps;
+    $[11] = setCollapsed;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  return t4;
+}
+function CollapsibleGroupHeaderStatic(t0) {
+  const $ = c(5);
+  if ($[0] !== "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3") {
+    for (let $i = 0; $i < 5; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3";
+  }
+  const {
+    avatar,
+    titleContent,
+    subtitle
+  } = t0;
+  let t1;
+  if ($[1] !== avatar || $[2] !== subtitle || $[3] !== titleContent) {
+    t1 = /*#__PURE__*/jsx("span", {
+      className: styles.headerStatic,
+      children: /*#__PURE__*/jsx(CollapsibleGroupHeaderContent, {
+        avatar: avatar,
+        titleContent: titleContent,
+        subtitle: subtitle
+      })
+    });
+    $[1] = avatar;
+    $[2] = subtitle;
+    $[3] = titleContent;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+const CollapsibleGroup = /*#__PURE__*/forwardRef((t0, ref) => {
+  const $ = c(29);
+  if ($[0] !== "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3") {
+    for (let $i = 0; $i < 29; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "248ebb691e89143680b26b525c22d5d37f19214f4f7f322680c1c724fd0796c3";
+  }
+  const {
+    avatar,
+    title,
+    subtitle,
+    children,
+    className,
+    defaultExpanded: t1,
+    expanded: t2,
+    onChange: t3,
+    disableAnimation: t4,
+    interactive: t5,
+    "data-test": dataTest
+  } = t0;
+  const defaultExpanded = t1 === undefined ? false : t1;
+  const expanded = t2 === undefined ? null : t2;
+  const onChange = t3 === undefined ? _temp : t3;
+  const disableAnimation = t4 === undefined ? false : t4;
+  const interactive = t5 === undefined ? true : t5;
+  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 t6;
+  if ($[1] !== expanded || $[2] !== onChange) {
+    t6 = collapsed => {
+      const nextExpanded = !collapsed;
+      if (expanded == null) {
+        setInnerExpanded(nextExpanded);
+      }
+      onChange(nextExpanded);
+    };
+    $[1] = expanded;
+    $[2] = onChange;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  const handleChange = t6;
+  let t7;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = event => {
+      const nextTarget = event.relatedTarget;
+      if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+        return;
+      }
+      setFocused(false);
+    };
+    $[4] = t7;
+  } else {
+    t7 = $[4];
+  }
+  const onBlur = t7;
+  let t8;
+  if ($[5] !== className || $[6] !== focused || $[7] !== hovered || $[8] !== isExpanded) {
+    t8 = classNames(styles.expand, className, {
+      [styles.hovered]: hovered,
+      [styles.expanded]: isExpanded,
+      [styles.focused]: focused
+    });
+    $[5] = className;
+    $[6] = focused;
+    $[7] = hovered;
+    $[8] = isExpanded;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  const classes = t8;
+  const t9 = !defaultExpanded;
+  const t10 = expanded == null ? null : !expanded;
+  let t11;
+  if ($[10] !== avatar || $[11] !== interactive || $[12] !== subtitle || $[13] !== title) {
+    t11 = interactive ? /*#__PURE__*/jsx(CollapsibleGroupHeader, {
+      avatar: avatar,
+      titleContent: title,
+      subtitle: subtitle,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onFocus: () => setFocused(true),
+      onBlur: onBlur
+    }) : /*#__PURE__*/jsx(CollapsibleGroupHeaderStatic, {
+      avatar: avatar,
+      titleContent: title,
+      subtitle: subtitle
+    });
+    $[10] = avatar;
+    $[11] = interactive;
+    $[12] = subtitle;
+    $[13] = title;
+    $[14] = t11;
+  } else {
+    t11 = $[14];
+  }
+  let t12;
+  if ($[15] !== children) {
+    t12 = /*#__PURE__*/jsx(CollapseContent, {
+      children: /*#__PURE__*/jsx("div", {
+        className: styles.body,
+        children: children
+      })
+    });
+    $[15] = children;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  if ($[17] !== disableAnimation || $[18] !== handleChange || $[19] !== t10 || $[20] !== t11 || $[21] !== t12 || $[22] !== t9) {
+    t13 = /*#__PURE__*/jsxs(Collapse, {
+      defaultCollapsed: t9,
+      collapsed: t10,
+      onChange: handleChange,
+      disableAnimation: disableAnimation,
+      className: styles.collapseRoot,
+      children: [t11, t12]
+    });
+    $[17] = disableAnimation;
+    $[18] = handleChange;
+    $[19] = t10;
+    $[20] = t11;
+    $[21] = t12;
+    $[22] = t9;
+    $[23] = t13;
+  } else {
+    t13 = $[23];
+  }
+  let t14;
+  if ($[24] !== classes || $[25] !== dataTest || $[26] !== ref || $[27] !== t13) {
+    t14 = /*#__PURE__*/jsx("div", {
+      ref: ref,
+      className: classes,
+      "data-test": dataTest,
+      children: t13
+    });
+    $[24] = classes;
+    $[25] = dataTest;
+    $[26] = ref;
+    $[27] = t13;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  return t14;
+});
+CollapsibleGroup.displayName = 'CollapsibleGroup';
+function _temp() {}
+
+export { CollapsibleGroup as default };

package/components/pager/pager.js

@@ -84,6 +84,7 @@ import '../caret/caret.js';
 import '../text/text.js';
 import '../_helpers/select-filter.js';
 import '../i18n/i18n.js';
+import '../select/chevron-button.js';
 
 var style = {"pager":"ring-pager-pager","links":"ring-pager-links","link":"ring-pager-link","linkDisabled":"ring-pager-linkDisabled","actions":"ring-pager-actions","pageSize":"ring-pager-pageSize"};
 

package/components/select/chevron-button.d.ts

@@ -0,0 +1,6 @@
+import { type ButtonHTMLAttributes } from 'react';
+import { type ControlsHeight } from '../global/configuration';
+export default function ChevronButton({ className, disabled, height, ...props }: {
+    disabled?: boolean | null | undefined;
+    height?: ControlsHeight | undefined;
+} & ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;

package/components/select/chevron-button.js

@@ -0,0 +1,82 @@
+import { c } from 'react-compiler-runtime';
+import chevronDownIcon from '@jetbrains/icons/chevron-down';
+import classNames from 'classnames';
+import { Button } from '../button/button.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import '@jetbrains/icons/chevron-12px-down';
+import 'util-deprecate';
+import '../icon/icon.js';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../global/memoize.js';
+import '../link/clickable-link.js';
+import '../global/controls-height.js';
+import '../global/configuration.js';
+import '../_helpers/button.classes.js';
+
+var styles = {"chevronButton":"ring-chevron-button-chevronButton","chevronIcon":"ring-chevron-button-chevronIcon"};
+
+function ChevronButton(t0) {
+  var _disabled;
+  const $ = c(13);
+  if ($[0] !== "ba95509b9da607dcfdd740a0e650c86615eac689106b2378e4c98d34d76ea485") {
+    for (let $i = 0; $i < 13; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "ba95509b9da607dcfdd740a0e650c86615eac689106b2378e4c98d34d76ea485";
+  }
+  let className;
+  let disabled;
+  let height;
+  let props;
+  if ($[1] !== t0) {
+    ({
+      className,
+      disabled,
+      height,
+      ...props
+    } = t0);
+    $[1] = t0;
+    $[2] = className;
+    $[3] = disabled;
+    $[4] = height;
+    $[5] = props;
+  } else {
+    className = $[2];
+    disabled = $[3];
+    height = $[4];
+    props = $[5];
+  }
+  let t1;
+  if ($[6] !== className) {
+    t1 = classNames(styles.chevronButton, className);
+    $[6] = className;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  const t2 = (_disabled = disabled) !== null && _disabled !== void 0 ? _disabled : false;
+  let t3;
+  if ($[8] !== height || $[9] !== props || $[10] !== t1 || $[11] !== t2) {
+    t3 = /*#__PURE__*/jsx(Button, {
+      title: "Toggle options popup",
+      className: t1,
+      iconClassName: styles.chevronIcon,
+      icon: chevronDownIcon,
+      disabled: t2,
+      height: height,
+      ...props
+    });
+    $[8] = height;
+    $[9] = props;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  return t3;
+}
+
+export { ChevronButton as default };

package/components/select/select.js

@@ -1,6 +1,5 @@
 import { Component, Fragment } from 'react';
 import classNames from 'classnames';
-import chevronDownIcon from '@jetbrains/icons/chevron-down';
 import closeIcon from '@jetbrains/icons/close-12px';
 import { dequal } from 'dequal';
 import joinDataTestAttributes from '../global/data-tests.js';
@@ -22,6 +21,7 @@ import { I18nContext } from '../i18n/i18n-context.js';
 import { createComposedRef } from '../global/compose-refs.js';
 import { ControlsHeightContext } from '../global/controls-height.js';
 import SelectPopup from './select-popup.js';
+import ChevronButton from './chevron-button.js';
 import { ControlsHeight } from '../global/configuration.js';
 import { Size as Size$1 } from '../avatar/avatar-size.js';
 import 'react-compiler-runtime';
@@ -67,6 +67,7 @@ import '../global/get-event-key.js';
 import '../list/list-title.js';
 import '../list/list-separator.js';
 import '../list/list-hint.js';
+import '@jetbrains/icons/chevron-down';
 import '@jetbrains/icons/chevron-12px-down';
 import '../_helpers/button.classes.js';
 import '../i18n/i18n.js';
@@ -79,7 +80,7 @@ import '../caret/caret.js';
 import '../text/text.js';
 import '../_helpers/select-filter.js';
 
-var styles = {"select":"ring-select-select","value":"ring-select-value ring-global-ellipsis ring-global-font","icons":"ring-select-icons","toolbar":"ring-select-toolbar","button":"ring-select-button","buttonSpaced":"ring-select-buttonSpaced","inputMode":"ring-select-inputMode","heightS":"ring-select-heightS","heightL":"ring-select-heightL","selectedIcon":"ring-select-selectedIcon ring-global-resetButton","clearIcon":"ring-select-clearIcon","sizeS":"ring-select-sizeS","sizeM":"ring-select-sizeM","sizeL":"ring-select-sizeL","sizeFULL":"ring-select-sizeFULL","sizeAUTO":"ring-select-sizeAUTO","buttonMode":"ring-select-buttonMode","open":"ring-select-open","buttonContainer":"ring-select-buttonContainer","buttonValue":"ring-select-buttonValue ring-global-ellipsis","buttonValueOpen":"ring-select-buttonValueOpen","buttonValueEmpty":"ring-select-buttonValueEmpty","label":"ring-select-label","disabled":"ring-select-disabled","avatar":"ring-select-avatar","popup":"ring-select-popup","chevron":"ring-select-chevron","chevronIcon":"ring-select-chevronIcon"};
+var styles = {"select":"ring-select-select","value":"ring-select-value ring-global-ellipsis ring-global-font","icons":"ring-select-icons","toolbar":"ring-select-toolbar","button":"ring-select-button","buttonSpaced":"ring-select-buttonSpaced","inputMode":"ring-select-inputMode","heightS":"ring-select-heightS","heightL":"ring-select-heightL","selectedIcon":"ring-select-selectedIcon ring-global-resetButton","clearIcon":"ring-select-clearIcon","sizeS":"ring-select-sizeS","sizeM":"ring-select-sizeM","sizeL":"ring-select-sizeL","sizeFULL":"ring-select-sizeFULL","sizeAUTO":"ring-select-sizeAUTO","buttonMode":"ring-select-buttonMode","open":"ring-select-open","buttonContainer":"ring-select-buttonContainer","buttonValue":"ring-select-buttonValue ring-global-ellipsis","buttonValueOpen":"ring-select-buttonValueOpen","buttonValueEmpty":"ring-select-buttonValueEmpty","label":"ring-select-label","disabled":"ring-select-disabled","avatar":"ring-select-avatar","popup":"ring-select-popup"};
 
 function noop() {}
 /**
@@ -980,15 +981,11 @@ class Select extends Component {
       }, 'close'));
     }
     if (!hideArrow) {
-      icons.push(/*#__PURE__*/jsx(Button, {
-        title: "Toggle options popup",
-        className: styles.chevron,
-        iconClassName: styles.chevronIcon,
-        icon: chevronDownIcon,
+      icons.push(/*#__PURE__*/jsx(ChevronButton, {
         disabled: this.props.disabled,
         height: height,
         onClick: this._clickHandler
-      }, 'hide'));
+      }, 'chevron'));
     }
     return icons;
   }