@jetbrains/ring-ui-built 7.0.74 → 7.0.76

package/components/tabs/collapsible-tab.js

@@ -1,22 +1,31 @@
+import { c } from 'react-compiler-runtime';
 import * as React from 'react';
 import classNames from 'classnames';
 import { s as styles, T as TabLink } from '../_helpers/tab-link.js';
 import { CustomItem } from './custom-item.js';
 import { jsx } from 'react/jsx-runtime';
-import 'react-compiler-runtime';
 import '../link/link.js';
 import '../global/data-tests.js';
 import '../link/clickable-link.js';
 import '../_helpers/link.js';
 
-const TabTitle = /*#__PURE__*/React.memo(function TabTitle({
-  selected,
-  child,
-  handleSelect,
-  collapsed = false,
-  tabIndex
-}) {
-  if (child === null || typeof child !== 'object' || child.type === CustomItem) {
+const TabTitle = /*#__PURE__*/React.memo(function TabTitle(t0) {
+  const $ = c(18);
+  if ($[0] !== "bc923b30ae31abf97ca3494d9773d25ec50a98e0a9dced298aaa6afe7b737db1") {
+    for (let $i = 0; $i < 18; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "bc923b30ae31abf97ca3494d9773d25ec50a98e0a9dced298aaa6afe7b737db1";
+  }
+  const {
+    selected,
+    child,
+    handleSelect,
+    collapsed: t1,
+    tabIndex
+  } = t0;
+  const collapsed = t1 === undefined ? false : t1;
+  if (child === null || typeof child !== "object" || child.type === CustomItem) {
     return child;
   }
   const {
@@ -29,25 +38,54 @@ const TabTitle = /*#__PURE__*/React.memo(function TabTitle({
     collapsedClassName,
     collapsedActiveClassName
   } = child.props;
-  const titleClasses = classNames(styles.title, className, {
-    [styles.selected]: selected,
-    [styles.collapsed]: collapsed,
-    [activeClassName !== null && activeClassName !== void 0 ? activeClassName : '']: selected,
-    [collapsedClassName !== null && collapsedClassName !== void 0 ? collapsedClassName : '']: collapsed,
-    [collapsedActiveClassName !== null && collapsedActiveClassName !== void 0 ? collapsedActiveClassName : '']: collapsed && selected
-  });
-  return /*#__PURE__*/jsx(TabLink, {
-    title: title,
-    isSelected: selected,
-    active: true,
-    href: href,
-    className: titleClasses,
-    disabled: disabled,
-    onPlainLeftClick: handleSelect,
-    tabIndex: tabIndex,
-    collapsed: collapsed,
-    ...titleProps
-  });
+  const t2 = selected && activeClassName;
+  const t3 = collapsed && collapsedClassName;
+  const t4 = collapsed && selected && collapsedActiveClassName;
+  let t5;
+  if ($[1] !== className || $[2] !== collapsed || $[3] !== selected || $[4] !== t2 || $[5] !== t3 || $[6] !== t4) {
+    t5 = classNames(styles.title, className, t2, t3, t4, {
+      [styles.selected]: selected,
+      [styles.collapsed]: collapsed
+    });
+    $[1] = className;
+    $[2] = collapsed;
+    $[3] = selected;
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  const titleClasses = t5;
+  let t6;
+  if ($[8] !== collapsed || $[9] !== disabled || $[10] !== handleSelect || $[11] !== href || $[12] !== selected || $[13] !== tabIndex || $[14] !== title || $[15] !== titleClasses || $[16] !== titleProps) {
+    t6 = /*#__PURE__*/jsx(TabLink, {
+      title: title,
+      isSelected: selected,
+      active: true,
+      href: href,
+      className: titleClasses,
+      disabled: disabled,
+      onPlainLeftClick: handleSelect,
+      tabIndex: tabIndex,
+      collapsed: collapsed,
+      ...titleProps
+    });
+    $[8] = collapsed;
+    $[9] = disabled;
+    $[10] = handleSelect;
+    $[11] = href;
+    $[12] = selected;
+    $[13] = tabIndex;
+    $[14] = title;
+    $[15] = titleClasses;
+    $[16] = titleProps;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  return t6;
 });
 const getTabTitles = ({
   items,

package/components/upload/upload.js

@@ -1,65 +1,133 @@
-import { forwardRef, useRef, useState, useImperativeHandle, useCallback } from 'react';
+import { c } from 'react-compiler-runtime';
+import { forwardRef, useRef, useState, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import attachmentIcon from '@jetbrains/icons/attachment';
 import Icon from '../icon/icon.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
-import 'react-compiler-runtime';
 import '../global/memoize.js';
 
 var styles = {"upload":"ring-upload-upload","success":"ring-upload-success","error":"ring-upload-error","dragOver":"ring-upload-dragOver","disabled":"ring-upload-disabled","invisibleFileInput":"ring-upload-invisibleFileInput","attachmentIcon":"ring-upload-attachmentIcon"};
 
-const Upload = /*#__PURE__*/forwardRef(function Upload({
-  children,
-  className,
-  onFilesSelected,
-  onFilesRejected,
-  validate = () => true,
-  variant = 'empty',
-  multiple,
-  renderIcon = () => /*#__PURE__*/jsx(Icon, {
-    className: styles.attachmentIcon,
-    glyph: attachmentIcon
-  }),
-  accept,
-  disabled
-}, ref) {
+const defaultRenderIcon = () => /*#__PURE__*/jsx(Icon, {
+  className: styles.attachmentIcon,
+  glyph: attachmentIcon
+});
+const Upload = /*#__PURE__*/forwardRef(function Upload(t0, ref) {
+  const $ = c(29);
+  if ($[0] !== "b44ca829acf458bb91f6267f4edce4951b7cb256ead04a749a52544abeecb440") {
+    for (let $i = 0; $i < 29; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "b44ca829acf458bb91f6267f4edce4951b7cb256ead04a749a52544abeecb440";
+  }
+  const {
+    children,
+    className,
+    onFilesSelected,
+    onFilesRejected,
+    validate: t1,
+    variant: t2,
+    multiple,
+    renderIcon: t3,
+    accept,
+    disabled
+  } = t0;
+  const validate = t1 === undefined ? _temp : t1;
+  const variant = t2 === undefined ? "empty" : t2;
+  const renderIcon = t3 === undefined ? defaultRenderIcon : t3;
   const fileInputRef = useRef(null);
   const [dragOver, setDragOver] = useState(false);
-  useImperativeHandle(ref, () => ({
-    openFilePicker: () => fileInputRef.current?.click()
-  }), []);
-  const handleSelectedFiles = useCallback(files => {
-    if (!files.length) {
-      return;
-    }
-    const rejected = files.filter(file => !validate(file));
-    if (rejected.length > 0) {
-      onFilesRejected?.(files);
-      return;
-    }
-    onFilesSelected(files);
-  }, [onFilesRejected, onFilesSelected, validate]);
-  const onDragEnter = useCallback(() => setDragOver(true), []);
-  const onDragOver = useCallback(e => e.preventDefault(), []);
-  const onDragLeave = useCallback(() => setDragOver(false), []);
-  const onInputChange = useCallback(() => {
-    setDragOver(false);
-    if (fileInputRef.current?.files) {
-      handleSelectedFiles(Array.from(fileInputRef.current.files));
-    }
-  }, [handleSelectedFiles]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames(className, styles.upload, {
+  let t4;
+  let t5;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => ({
+      openFilePicker: () => fileInputRef.current?.click()
+    });
+    t5 = [];
+    $[1] = t4;
+    $[2] = t5;
+  } else {
+    t4 = $[1];
+    t5 = $[2];
+  }
+  useImperativeHandle(ref, t4, t5);
+  let t6;
+  if ($[3] !== onFilesRejected || $[4] !== onFilesSelected || $[5] !== validate) {
+    t6 = files => {
+      if (!files.length) {
+        return;
+      }
+      const rejected = files.filter(file => !validate(file));
+      if (rejected.length > 0) {
+        onFilesRejected?.(files);
+        return;
+      }
+      onFilesSelected(files);
+    };
+    $[3] = onFilesRejected;
+    $[4] = onFilesSelected;
+    $[5] = validate;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  const handleSelectedFiles = t6;
+  let t7;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = () => setDragOver(true);
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  const onDragEnter = t7;
+  const onDragOver = _temp2;
+  let t8;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = () => setDragOver(false);
+    $[8] = t8;
+  } else {
+    t8 = $[8];
+  }
+  const onDragLeave = t8;
+  let t9;
+  if ($[9] !== handleSelectedFiles) {
+    t9 = () => {
+      setDragOver(false);
+      if (fileInputRef.current?.files) {
+        handleSelectedFiles(Array.from(fileInputRef.current.files));
+      }
+    };
+    $[9] = handleSelectedFiles;
+    $[10] = t9;
+  } else {
+    t9 = $[10];
+  }
+  const onInputChange = t9;
+  const t10 = variant === "success";
+  const t11 = variant === "error";
+  let t12;
+  if ($[11] !== className || $[12] !== disabled || $[13] !== dragOver || $[14] !== t10 || $[15] !== t11) {
+    t12 = classNames(className, styles.upload, {
       [styles.disabled]: disabled,
       [styles.dragOver]: dragOver,
-      [styles.success]: variant === 'success',
-      [styles.error]: variant === 'error'
-    }),
-    "data-test": "ring-upload",
-    children: [/*#__PURE__*/jsx("input", {
+      [styles.success]: t10,
+      [styles.error]: t11
+    });
+    $[11] = className;
+    $[12] = disabled;
+    $[13] = dragOver;
+    $[14] = t10;
+    $[15] = t11;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  if ($[17] !== accept || $[18] !== disabled || $[19] !== multiple || $[20] !== onInputChange) {
+    t13 = /*#__PURE__*/jsx("input", {
       onDragEnter: onDragEnter,
       onDragOver: onDragOver,
       onDragLeave: onDragLeave,
@@ -73,8 +141,45 @@ const Upload = /*#__PURE__*/forwardRef(function Upload({
       autoComplete: "off",
       "aria-label": "file-picker",
       className: styles.invisibleFileInput
-    }), renderIcon(), children]
-  });
+    });
+    $[17] = accept;
+    $[18] = disabled;
+    $[19] = multiple;
+    $[20] = onInputChange;
+    $[21] = t13;
+  } else {
+    t13 = $[21];
+  }
+  let t14;
+  if ($[22] !== renderIcon) {
+    t14 = renderIcon();
+    $[22] = renderIcon;
+    $[23] = t14;
+  } else {
+    t14 = $[23];
+  }
+  let t15;
+  if ($[24] !== children || $[25] !== t12 || $[26] !== t13 || $[27] !== t14) {
+    t15 = /*#__PURE__*/jsxs("div", {
+      className: t12,
+      "data-test": "ring-upload",
+      children: [t13, t14, children]
+    });
+    $[24] = children;
+    $[25] = t12;
+    $[26] = t13;
+    $[27] = t14;
+    $[28] = t15;
+  } else {
+    t15 = $[28];
+  }
+  return t15;
 });
+function _temp() {
+  return true;
+}
+function _temp2(e) {
+  return e.preventDefault();
+}
 
 export { Upload, Upload as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui-built",
-  "version": "7.0.74",
+  "version": "7.0.76",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -60,7 +60,7 @@
     "postpublish": "pinst --enable",
     "postrelease-ci": "git push --follow-tags",
     "prea11y-audit": "playwright install",
-    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.ts' '!**/*.tsx' '!**/test-helpers/mocks/**' ../components --parents --cwd=src/",
+    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.figma.*' '!**/*.ts' '!**/*.tsx' '!**/test-helpers/mocks/**' ../components --parents --cwd=src/",
     "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
     "prepublishOnly": "pinst --disable",
     "prerelease-built-ci": "node scripts/prepare-built-package.js",
@@ -110,7 +110,7 @@
     "dequal": "^2.0.3",
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
-    "focus-trap": "^7.6.5",
+    "focus-trap": "^7.6.6",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",

package/components/avatar/avatar.figma.js

@@ -1,39 +0,0 @@
-import figma from '@figma/code-connect';
-
-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${isDefaultSize ? '' : ', {Size}'} from '@jetbrains/ring-ui/components/avatar/avatar'`];
-if (!isDefaultSize) {
-  props.push(`size={Size.Size${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="${instance.findText('Content').textContent}"`);
-    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`${imports.join('\n')}
-
-<Avatar ${props.map(prop => `${prop} `).join('')}/>`
-};
-
-export { avatar_figma as default };

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

@@ -1,38 +0,0 @@
-import figma from '@figma/code-connect';
-
-var _sizeString$match;
-const instance = figma.selectedInstance;
-const sizeString = instance.getString('Size');
-const [sizeSubstring] = (_sizeString$match = sizeString.match(/\d+/)) !== null && _sizeString$match !== void 0 ? _sizeString$match : [];
-const size = parseInt(sizeSubstring, 10);
-const children = instance.findConnectedInstances(() => true);
-const imports = ["import AvatarStack from '@jetbrains/ring-ui/components/avatar-stack/avatar-stack'"];
-const props = [];
-const DEFAULT_SIZE = 20;
-const isDefaultSize = size === DEFAULT_SIZE;
-if (!isDefaultSize) {
-  props.push(`size={Size.Size${size}}`);
-}
-const renderedChildren = children.map(child => {
-  const {
-    example
-  } = child.executeTemplate();
-  const [childImports, code] = example[0].code.split('\n\n');
-  return {
-    imports: childImports,
-    code
-  };
-});
-var avatarStack_figma = {
-  id: 'avatar-stack',
-  example: figma.code`${imports.join('\n')}
-${renderedChildren[0].imports}
-
-<AvatarStack ${props.map(prop => `${prop} `).join('')}>
-  ${renderedChildren.map(({
-    code
-  }) => code).join('\n  ')}
-</AvatarStack>`
-};
-
-export { avatarStack_figma as default };

package/components/breadcrumbs/breadcrumbs.figma.js

@@ -1,21 +0,0 @@
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const imports = ["import Breadcrumbs from '@jetbrains/ring-ui/components/breadcrumbs/breadcrumbs'", "import Link from '@jetbrains/ring-ui/components/link/link'"];
-const children = instance.findLayers(() => true).map(layer => layer.textContent).filter(text => text !== '/');
-var breadcrumbs_figma = {
-  id: 'breadcrumbs',
-  example: figma.code`${imports.join('\n')}
-
-<Breadcrumbs>
-  ${children.map((text, index) => {
-    const props = [`href="/page${index + 1}"`];
-    if (index === children.length - 1) {
-      props.push('active');
-    }
-    return `<Link ${props.map(prop => `${prop} `).join('')}>${text}</Link>`;
-  }).join('\n  ')}
-</Breadcrumbs>`
-};
-
-export { breadcrumbs_figma as default };

package/components/button/button.figma.js

@@ -1,82 +0,0 @@
-import figma from '@figma/code-connect';
-
-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.${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;
-}
-const children = instance.findLayers(() => true)[0].findText('Button').textContent;
-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${use12pxIcon ? '-12px' : ''}'`);
-    props.push('icon={downloadIcon}');
-    break;
-  case 'Icon':
-    imports.push(`import addIcon from '@jetbrains/icons/add${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${use12pxIcon ? '-12px' : ''}'`);
-    useButtonGroup = true;
-    break;
-}
-switch (state) {
-  case 'Disabled':
-    props.push('disabled');
-    break;
-}
-const joinedProps = props.map(prop => `${prop} `).join('');
-// prettier-ignore
-const button = children ? `<Button ${joinedProps}>
-  ${children}
-</Button>` : `<Button ${joinedProps}/>`;
-var button_figma = {
-  id: 'button',
-  example: figma.code`${imports.join('\n')}
-
-${
-  // prettier-ignore
-  useButtonGroup ? `<ButtonGroup>
-  ${button}
-  <Button ${joinedProps} icon={chevronDownIcon} />
-</ButtonGroup>` : button}`
-};
-
-export { button_figma as default };

package/components/checkbox/checkbox-group.figma.js

@@ -1,34 +0,0 @@
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const labelType = instance.getString('Label');
-const children = instance.findConnectedInstances(() => true);
-const label = instance.findText('Group description').textContent;
-const isFormLabel = labelType === 'form';
-const imports = [`import ControlLabel${isFormLabel ? ', {LabelType}' : ''} from '@jetbrains/ring-ui/components/control-label/control-label'`];
-const labelProps = [];
-if (isFormLabel) {
-  labelProps.push('type={LabelType.FORM}');
-}
-const renderedChildren = children.map(child => {
-  const {
-    example
-  } = child.executeTemplate();
-  const [childImports, code] = example[0].code.split('\n\n');
-  return {
-    imports: childImports,
-    code
-  };
-});
-var checkboxGroup_figma = {
-  id: 'checkbox-group',
-  example: figma.code`${imports.join('\n')}
-${renderedChildren[0].imports}
-
-<ControlLabel ${labelProps.map(prop => `${prop} `).join('')}>${label}</ControlLabel>
-${renderedChildren.map(({
-    code
-  }) => code).join('\n<br />\n')}`
-};
-
-export { checkboxGroup_figma as default };

package/components/checkbox/checkbox.figma.js

@@ -1,36 +0,0 @@
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const selected = instance.getString('Selected');
-const hasLabel = instance.getBoolean('Label');
-const label = instance.findText('Label').textContent;
-const hasHelpText = instance.getBoolean('Help Text');
-const helpText = instance.findText('Description').textContent;
-const state = instance.getString('State');
-const imports = ["import Checkbox from '@jetbrains/ring-ui/components/checkbox/checkbox'"];
-const props = [];
-switch (selected) {
-  case 'selected':
-    props.push('defaultChecked');
-    break;
-  case 'intermediate':
-    props.push('indeterminate', 'defaultChecked');
-    break;
-}
-if (hasLabel) {
-  props.push(`label="${label}"`);
-}
-if (hasHelpText) {
-  props.push(`help="${helpText}"`);
-}
-if (state === 'Disabled') {
-  props.push('disabled');
-}
-var checkbox_figma = {
-  id: 'checkbox',
-  example: figma.code`${imports.join('\n')}
-
-<Checkbox ${props.map(prop => `${prop} `).join('')}/>`
-};
-
-export { checkbox_figma as default };

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

@@ -1,14 +0,0 @@
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const error = instance.findLayers(() => true)[0].textContent;
-const imports = ["import ErrorBubble from '@jetbrains/ring-ui/components/error-bubble/error-bubble'"];
-const props = [`error={\`${error}\``];
-var errorBubble_figma = {
-  id: 'error-bubble',
-  example: figma.code`${imports.join('\n')}
-
-<ErrorBubble ${props.map(prop => `${prop} `).join('')}/>`
-};
-
-export { errorBubble_figma as default };