@jetbrains/ring-ui-built 7.0.31 → 7.0.33

package/components/_helpers/_rollupPluginBabelHelpers.js

@@ -47,6 +47,13 @@ function _objectWithoutPropertiesLoose(r, e) {
   }
   return t;
 }
+function _taggedTemplateLiteral(e, t) {
+  return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+    raw: {
+      value: Object.freeze(t)
+    }
+  }));
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -62,4 +69,4 @@ function _toPropertyKey(t) {
   return "symbol" == typeof i ? i : i + "";
 }
 
-export { _defineProperty as _, _objectWithoutProperties as a, _objectSpread2 as b, _toPropertyKey as c };
+export { _defineProperty as _, _objectWithoutProperties as a, _objectSpread2 as b, _taggedTemplateLiteral as c, _toPropertyKey as d };

package/components/_helpers/avatar-info.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import { Size } from '../avatar/avatar-size.js';
 
-var styles = {"avatar":"avatar_rui_a03e","avatarShadow":"avatarShadow_rui_a03e","avatarInfo":"avatarInfo_rui_a03e","subavatar":"subavatar_rui_a03e","empty":"empty_rui_a03e"};
+var styles = {"avatar":"avatar_rui_a03e","round":"round_rui_a03e","avatarShadow":"avatarShadow_rui_a03e","avatarInfo":"avatarInfo_rui_a03e","subavatar":"subavatar_rui_a03e","empty":"empty_rui_a03e"};
 
 const fontSizes = {
   [Size.Size16]: 9,
@@ -30,4 +30,4 @@ function AvatarInfo(_ref) {
   });
 }
 
-export { AvatarInfo as A, styles as s };
+export { AvatarInfo as A, fontSizes as f, styles as s };

package/components/_helpers/input.js

@@ -15,7 +15,7 @@ import ControlHelp from '../control-help/control-help.js';
 
 var inputStyles = {"outerContainer":"outerContainer_rui_e356","borderless":"borderless_rui_e356","container":"container_rui_e356","input":"input_rui_e356","error":"error_rui_e356","withIcon":"withIcon_rui_e356","clearable":"clearable_rui_e356","icon":"icon_rui_e356","clear":"clear_rui_e356","empty":"empty_rui_e356","errorText":"errorText_rui_e356","helpText":"helpText_rui_e356","sizeS":"sizeS_rui_e356","sizeM":"sizeM_rui_e356","sizeL":"sizeL_rui_e356","sizeFULL":"sizeFULL_rui_e356","heightS":"heightS_rui_e356","heightM":"heightM_rui_e356","heightL":"heightL_rui_e356"};
 
-const _excluded = ["size", "multiline", "borderless", "label", "labelType", "error", "help", "className", "inputClassName", "children", "value", "onClear", "disabled", "inputRef", "onChange", "enableShortcuts", "id", "placeholder", "icon", "translations", "height", "afterInput"];
+const _excluded = ["size", "multiline", "borderless", "label", "labelType", "error", "help", "className", "inputClassName", "children", "value", "onClear", "disabled", "inputRef", "onChange", "enableShortcuts", "id", "placeholder", "icon", "translations", "height", "beforeInput", "afterInput"];
 function noop() {}
 /**
  * @name Input
@@ -119,6 +119,7 @@ class Input extends PureComponent {
         icon,
         translations,
         height = this.context,
+        beforeInput,
         afterInput
       } = _this$props4,
       restProps = _objectWithoutProperties(_this$props4, _excluded);
@@ -165,7 +166,7 @@ class Input extends PureComponent {
             children: [icon && jsx(Icon, {
               glyph: icon,
               className: inputStyles.icon
-            }), multiline ? jsx("textarea", _objectSpread2(_objectSpread2({
+            }), beforeInput, multiline ? jsx("textarea", _objectSpread2(_objectSpread2({
               onChange: this.handleTextareaChange,
               rows: 1
             }, commonProps), restProps)) : jsx("input", _objectSpread2(_objectSpread2({

package/components/avatar/avatar-info.d.ts

@@ -4,5 +4,6 @@ interface InfoAvatarProps {
     size: Size;
     children?: ReactNode;
 }
+export declare const fontSizes: Record<Size, number>;
 export default function AvatarInfo({ size, children }: InfoAvatarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/avatar/avatar-info.js

@@ -1,4 +1,4 @@
 import 'react/jsx-runtime';
 import 'classnames';
-export { A as default } from '../_helpers/avatar-info.js';
+export { A as default, f as fontSizes } from '../_helpers/avatar-info.js';
 import './avatar-size.js';

package/components/avatar/avatar.figma.js

@@ -1,45 +1,41 @@
-import { b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import figma from '@figma/code-connect';
-import Avatar from './avatar.js';
-import { Size } from './avatar-size.js';
-import 'core-js/modules/es.string.includes.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'react';
-import 'classnames';
-import 'util-deprecate';
-import '../global/url.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.match.js';
-import 'core-js/modules/es.string.replace.js';
-import '../global/dom.js';
-import 'core-js/modules/es.object.assign.js';
-import 'core-js/modules/es.string.split.js';
-import '../global/memoize.js';
-import 'core-js/modules/es.weak-map.js';
-import '../_helpers/avatar-info.js';
-import './fallback-avatar.js';
-import '../global/get-uid.js';
-import 'core-js/modules/es.regexp.to-string.js';
+import { c as _taggedTemplateLiteral } from '../_helpers/_rollupPluginBabelHelpers.js';
+import 'core-js/modules/es.parse-int.js';
 
-figma.connect(Avatar, 'https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?m=auto&node-id=5990-522&t=v8bItK8qotmnbysK-1', {
-  props: {
-    round: figma.boolean('Round'),
-    size: figma.enum('Size', {
-      '20 px': Size.Size20,
-      '24 px': Size.Size24,
-      '28 px': Size.Size28,
-      '32 px': Size.Size32,
-      '40px': Size.Size40,
-      '56px': Size.Size56
-    }),
-    username: figma.enum('Content', {
-      name: 'Samuel Morse'
-    }),
-    url: figma.enum('Content', {
-      'color/image': 'avatar.png'
-    })
-  },
-  example: props => jsx(Avatar, _objectSpread2({}, props)),
-  imports: ['import Avatar, {Size} from "@jetbrains/ring-ui/components/avatar/avatar"']
-});
+var _templateObject;
+// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=5990-522
+const figma = require('figma');
+const instance = figma.selectedInstance;
+const round = instance.getBoolean('Round');
+const size = parseInt(instance.getString('Size'), 10);
+const content = instance.getString('Content');
+const props = [];
+const DEFAULT_SIZE = 20;
+const isDefaultSize = size === DEFAULT_SIZE;
+const imports = ["import Avatar".concat(isDefaultSize ? '' : ', {Size}', " from '@jetbrains/ring-ui/components/avatar/avatar'")];
+if (!isDefaultSize) {
+  props.push("size={Size.Size".concat(size, "}"));
+}
+switch (content) {
+  case 'color/image':
+    props.push('url="avatar.png"');
+    break;
+  case 'name':
+    props.push('username="Samuel Morse"');
+    break;
+  case 'label':
+    props.push('info="5"');
+    break;
+  case 'icon':
+    imports.push("import Icon from '@jetbrains/ring-ui/components/icon/icon'", "import warningIcon from '@jetbrains/icons/warning.svg'");
+    props.push('info={<Icon glyph={warningIcon} />}');
+    break;
+}
+if (round) {
+  props.push('round');
+}
+var avatar_figma = {
+  id: 'avatar',
+  example: figma.code(_templateObject || (_templateObject = _taggedTemplateLiteral(["", "\n\n<Avatar ", "/>"])), imports.join('\n'), props.map(prop => "".concat(prop, " ")).join(''))
+};
+
+export { avatar_figma as default };

package/components/avatar/avatar.js

@@ -8,7 +8,7 @@ import deprecate from 'util-deprecate';
 import { isDataURI, parseQueryString, encodeURL } from '../global/url.js';
 import { getPixelRatio } from '../global/dom.js';
 import memoize from '../global/memoize.js';
-import { A as AvatarInfo, s as styles } from '../_helpers/avatar-info.js';
+import { s as styles, A as AvatarInfo } from '../_helpers/avatar-info.js';
 import FallbackAvatar from './fallback-avatar.js';
 import { Size } from './avatar-size.js';
 import 'core-js/modules/es.regexp.exec.js';
@@ -59,9 +59,7 @@ class Avatar extends PureComponent {
     }
     const sizeString = "".concat(size, "px");
     const subavatarSizeString = "".concat(subavatarSize, "px");
-    const borderRadius = size <= Size.Size18 ? 'var(--ring-border-radius-small)' : 'var(--ring-border-radius)';
     const styleObj = _objectSpread2({
-      borderRadius: round ? '50%' : borderRadius,
       height: sizeString,
       width: sizeString
     }, style);
@@ -70,10 +68,13 @@ class Avatar extends PureComponent {
       height: subavatarSizeString,
       width: subavatarSizeString
     }, style);
+    const classes = classNames(styles.avatar, this.props.className, {
+      [styles.round]: round
+    });
     if (!url || this.state.errorUrl === url) {
       return jsxs("span", _objectSpread2(_objectSpread2({}, restProps), {}, {
         "data-test": "avatar",
-        className: classNames(styles.avatar, this.props.className, {
+        className: classNames(classes, {
           [styles.empty]: username == null && info == null
         }),
         style: styleObj,
@@ -108,7 +109,7 @@ class Avatar extends PureComponent {
         children: [jsx("img", _objectSpread2(_objectSpread2({}, restProps), {}, {
           onError: this.handleError,
           onLoad: this.handleSuccess,
-          className: classNames(styles.avatar, styles.avatarShadow, this.props.className),
+          className: classNames(classes, styles.avatarShadow),
           style: styleObj,
           src: src,
           alt: "User avatar"
@@ -127,7 +128,7 @@ class Avatar extends PureComponent {
         "data-test": "avatar",
         onError: this.handleError,
         onLoad: this.handleSuccess,
-        className: classNames(styles.avatar, styles.avatarShadow, this.props.className),
+        className: classNames(classes, styles.avatarShadow),
         style: styleObj,
         src: src,
         alt: "User avatar"

package/components/avatar-stack/avatar-stack.js

@@ -4,7 +4,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, Children } from 'react';
 import classNames from 'classnames';
 import DropdownMenu from '../dropdown-menu/dropdown-menu.js';
-import '../avatar/avatar.js';
+import Avatar from '../avatar/avatar.js';
+import { f as fontSizes } from '../_helpers/avatar-info.js';
 import { Size } from '../avatar/avatar-size.js';
 import 'core-js/modules/es.object.assign.js';
 import '../list/list.js';
@@ -50,7 +51,6 @@ import '../_helpers/list.js';
 import '../list/consts.js';
 import '../list/list__classes.js';
 import '../global/url.js';
-import '../_helpers/avatar-info.js';
 import '../avatar/fallback-avatar.js';
 import '../list/list__custom.js';
 import '../global/get-event-key.js';
@@ -75,7 +75,7 @@ import 'core-js/modules/es.array.sort.js';
 import '../popup/popup.consts.js';
 import '../popup/popup.target.js';
 
-var styles = {"avatarStack":"avatarStack_rui_9a0c","extraText":"extraText_rui_9a0c resetButton_rui_8bff","item":"item_rui_9a0c","size20":"size20_rui_9a0c","size24":"size24_rui_9a0c","size28":"size28_rui_9a0c","size32":"size32_rui_9a0c","size40":"size40_rui_9a0c","size56":"size56_rui_9a0c","hovered":"hovered_rui_9a0c","extra":"extra_rui_9a0c item_rui_9a0c"};
+var styles = {"avatarStack":"avatarStack_rui_9a0c","extraText":"extraText_rui_9a0c","item":"item_rui_9a0c","size20":"size20_rui_9a0c","size24":"size24_rui_9a0c","size28":"size28_rui_9a0c","size32":"size32_rui_9a0c","size40":"size40_rui_9a0c","size56":"size56_rui_9a0c","hovered":"hovered_rui_9a0c","extra":"extra_rui_9a0c item_rui_9a0c","extraButton":"extraButton_rui_9a0c resetButton_rui_8bff"};
 
 const _excluded = ["children", "className", "size", "extraItems", "dropdownMenuProps"];
 function AvatarStack(_ref) {
@@ -93,6 +93,9 @@ function AvatarStack(_ref) {
       [styles.hovered]: dropdownOpen
     })
   }, restProps), {}, {
+    style: _objectSpread2({
+      height: size
+    }, restProps.style),
     children: [Children.map(children, (child, index) => jsx("div", {
       className: styles.item,
       style: {
@@ -108,12 +111,19 @@ function AvatarStack(_ref) {
       style: {
         width: size,
         height: size,
-        '--ring-avatar-stack-index': Children.count(children)
+        '--ring-avatar-stack-index': Children.count(children),
+        fontSize: fontSizes[size]
       },
       anchor: jsx("button", {
         type: "button",
-        className: styles.extraText,
-        children: "+".concat(extraItems.length)
+        className: styles.extraButton,
+        children: jsx(Avatar, {
+          size: size,
+          info: jsx("span", {
+            className: styles.extraText,
+            children: "+".concat(extraItems.length)
+          })
+        })
       }),
       data: extraItems,
       menuProps: _objectSpread2({

package/components/button/button.figma.js

@@ -1,108 +1,78 @@
-import { a as _objectWithoutProperties, b as _objectSpread2 } from '../_helpers/_rollupPluginBabelHelpers.js';
-import { jsx } from 'react/jsx-runtime';
-import figma from '@figma/code-connect';
-import addIcon from '@jetbrains/icons/add';
-import add12pxIcon from '@jetbrains/icons/add-12px';
-import downloadIcon from '@jetbrains/icons/download';
-import download12pxIcon from '@jetbrains/icons/download-12px';
-import { ControlsHeight } from '../global/controls-height.js';
-import { Button } from './button.js';
-import 'react';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'classnames';
-import '@jetbrains/icons/chevron-down';
-import '@jetbrains/icons/chevron-12px-down';
-import 'util-deprecate';
-import '../icon/icon.js';
-import '../icon/icon__constants.js';
-import '../_helpers/icon__svg.js';
-import 'core-js/modules/es.regexp.exec.js';
-import 'core-js/modules/es.string.replace.js';
-import 'core-js/modules/es.string.starts-with.js';
-import '../global/memoize.js';
-import 'core-js/modules/es.weak-map.js';
-import '../link/clickableLink.js';
-import '../_helpers/button__classes.js';
+import { c as _taggedTemplateLiteral } from '../_helpers/_rollupPluginBabelHelpers.js';
 
-const _excluded = ["children"];
-figma.connect(Button, 'https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=9954%3A528', {
-  props: {
-    height: figma.enum('Size', {
-      S: ControlsHeight.S,
-      M: ControlsHeight.M,
-      L: ControlsHeight.L
-    }),
-    children: figma.enum('Type', {
-      Label: 'Button',
-      'L-Icon-Label': 'Button',
-      'R-Icon-Label': 'Button'
-    }),
-    icon: figma.enum('Type', {
-      'L-Icon-Label': figma.enum('Size', {
-        S: figma.enum('Variant', {
-          Main: download12pxIcon,
-          Green: download12pxIcon,
-          'Red solid': download12pxIcon,
-          Gray: download12pxIcon,
-          Outlined: download12pxIcon,
-          'Red outlined': download12pxIcon,
-          Ghost: download12pxIcon,
-          Text: downloadIcon
-        }),
-        M: downloadIcon,
-        L: downloadIcon
-      }),
-      Icon: figma.enum('Size', {
-        S: figma.enum('Variant', {
-          Main: add12pxIcon,
-          Green: add12pxIcon,
-          'Red solid': add12pxIcon,
-          Gray: add12pxIcon,
-          Outlined: add12pxIcon,
-          'Red outlined': add12pxIcon,
-          Ghost: add12pxIcon,
-          Text: addIcon
-        }),
-        M: addIcon,
-        L: addIcon
-      })
-    }),
-    dropdown: figma.enum('Type', {
-      'R-Icon-Label': true
-    }),
-    disabled: figma.enum('State', {
-      Disabled: true
-    }),
-    primary: figma.enum('Variant', {
-      Main: true
-    }),
-    success: figma.enum('Variant', {
-      Green: true
-    }),
-    error: figma.enum('Variant', {
-      'Red solid': true
-    }),
-    secondary: figma.enum('Variant', {
-      Gray: true
-    }),
-    danger: figma.enum('Variant', {
-      'Red outlined': true
-    }),
-    ghost: figma.enum('Variant', {
-      Ghost: true
-    }),
-    inline: figma.enum('Variant', {
-      Text: true
-    })
-  },
-  example: _ref => {
-    let {
-        children
-      } = _ref,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-    return jsx(Button, _objectSpread2(_objectSpread2({}, restProps), {}, {
-      children: children
-    }));
-  },
-  imports: ['import Button from "@jetbrains/ring-ui/components/button/button"', 'import {ControlsHeight} from "@jetbrains/ring-ui/components/global/controls-height"', 'import addIcon from "@jetbrains/icons/add"', 'import add12pxIcon from "@jetbrains/icons/add-12px"', 'import downloadIcon from "@jetbrains/icons/download"', 'import download12pxIcon from "@jetbrains/icons/download-12px"']
-});
+var _templateObject;
+const figma = require('figma');
+const instance = figma.selectedInstance;
+const size = instance.getString('Size');
+const type = instance.getString('Type');
+const state = instance.getString('State');
+const variant = instance.getString('Variant');
+const imports = ["import Button from '@jetbrains/ring-ui/components/button/button'"];
+const props = [];
+const DEFAULT_SIZE = 'M';
+const isDefaultSize = size === DEFAULT_SIZE;
+if (!isDefaultSize) {
+  imports.push("import {ControlsHeight} from '@jetbrains/ring-ui/components/global/controls-height'");
+  props.push("height={ControlsHeight.".concat(size, "}"));
+}
+switch (variant) {
+  case 'Red outlined':
+    props.push('danger');
+    break;
+  case 'Main':
+    props.push('primary');
+    break;
+  case 'Green':
+    props.push('success');
+    break;
+  case 'Red solid':
+    props.push('error');
+    break;
+  case 'Gray':
+    props.push('secondary');
+    break;
+  case 'Ghost':
+    props.push('ghost');
+    break;
+  case 'Text':
+    props.push('inline');
+    break;
+}
+let children = 'Button';
+const use12pxIcon = size === 'S' && variant !== 'Text';
+let useButtonGroup = false;
+switch (type) {
+  case 'R-Icon-Label':
+    props.push('dropdown');
+    break;
+  case 'L-Icon-Label':
+    imports.push("import downloadIcon from '@jetbrains/icons/download".concat(use12pxIcon ? '-12px' : '', "'"));
+    props.push('icon={downloadIcon}');
+    break;
+  case 'Icon':
+    children = null;
+    imports.push("import addIcon from '@jetbrains/icons/add".concat(use12pxIcon ? '-12px' : '', "'"));
+    props.push('icon={addIcon}');
+    break;
+  case 'Split':
+    imports.push("import ButtonGroup from '@jetbrains/ring-ui/components/button-group/button-group'");
+    imports.push("import chevronDownIcon from '@jetbrains/icons/chevron-down".concat(use12pxIcon ? '-12px' : '', "'"));
+    useButtonGroup = true;
+    break;
+}
+switch (state) {
+  case 'Disabled':
+    props.push('disabled');
+    break;
+}
+const joinedProps = props.map(prop => "".concat(prop, " ")).join('');
+// prettier-ignore
+const button = children ? "<Button ".concat(joinedProps, ">\n  ").concat(children, "\n</Button>") : "<Button ".concat(joinedProps, "/>");
+var button_figma = {
+  id: 'button',
+  example: figma.code(_templateObject || (_templateObject = _taggedTemplateLiteral(["", "\n\n", ""])), imports.join('\n'),
+  // prettier-ignore
+  useButtonGroup ? "<ButtonGroup>\n  ".concat(button, "\n  <Button ").concat(joinedProps, " icon={chevronDownIcon} />\n</ButtonGroup>") : button)
+};
+
+export { button_figma as default };

package/components/input/input.d.ts

@@ -29,6 +29,7 @@ export interface InputBaseProps {
     onClear?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | null | undefined;
     icon?: string | ComponentType | null | undefined;
     height?: ControlsHeight | undefined;
+    beforeInput?: ReactNode;
     afterInput?: ReactNode;
     translations?: InputTranslations | null | undefined;
 }

package/components/select/select.js

@@ -1,4 +1,4 @@
-import { _ as _defineProperty, b as _objectSpread2, a as _objectWithoutProperties, c as _toPropertyKey } from '../_helpers/_rollupPluginBabelHelpers.js';
+import { _ as _defineProperty, b as _objectSpread2, a as _objectWithoutProperties, d as _toPropertyKey } from '../_helpers/_rollupPluginBabelHelpers.js';
 import 'core-js/modules/es.object.assign.js';
 import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.replace.js';