@rescui/textarea 0.12.1 → 0.13.0

package/lib/textarea.js

@@ -1,9 +1,11 @@
 "use client";
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import TextareaAutosize from 'react-textarea-autosize';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
-import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
+import { ErrorMessage, shouldRenderErrorMessage } from '@rescui/form-field';
 import cn from 'classnames';
 import CloseOutlineIcon from './_virtual/close-outline.js';
 import LoadingOutlineIcon from './_virtual/loading-outline.js';
@@ -23,91 +25,340 @@ const MODE_STYLES = {
   rock: styles.rock
 };
 const Textarea = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
-(_ref, ref) => {
-  let {
-    id,
-    className,
-    disabled,
-    error,
-    reserveErrorLine = false,
-    busy,
-    onChange,
-    onClear,
-    enableClear: _enableClear,
-    size = 'm',
-    mode = 'classic',
-    theme: themeFromProps,
-    textareaRef,
-    value,
-    tabIndex,
-    label,
-    boldLabel = true,
-    note,
-    characterCounter,
-    ...restProps
-  } = _ref;
+(t0, ref) => {
+  const $ = c(76);
+  let busy;
+  let characterCounter;
+  let className;
+  let disabled;
+  let error;
+  let id;
+  let label;
+  let note;
+  let onChange;
+  let onClear;
+  let restProps;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let tabIndex;
+  let textareaRef;
+  let themeFromProps;
+  let value;
+
+  if ($[0] !== t0) {
+    const {
+      id: t5,
+      className: t6,
+      disabled: t7,
+      error: t8,
+      reserveErrorLine: t9,
+      busy: t10,
+      onChange: t11,
+      onClear: t12,
+      enableClear: _enableClear,
+      size: t13,
+      mode: t14,
+      theme: t15,
+      textareaRef: t16,
+      value: t17,
+      tabIndex: t18,
+      label: t19,
+      boldLabel: t20,
+      note: t21,
+      characterCounter: t22,
+      ...t23
+    } = t0;
+    id = t5;
+    className = t6;
+    disabled = t7;
+    error = t8;
+    t1 = t9;
+    busy = t10;
+    onChange = t11;
+    onClear = t12;
+    t2 = t13;
+    t3 = t14;
+    themeFromProps = t15;
+    textareaRef = t16;
+    value = t17;
+    tabIndex = t18;
+    label = t19;
+    t4 = t20;
+    note = t21;
+    characterCounter = t22;
+    restProps = t23;
+    $[0] = t0;
+    $[1] = busy;
+    $[2] = characterCounter;
+    $[3] = className;
+    $[4] = disabled;
+    $[5] = error;
+    $[6] = id;
+    $[7] = label;
+    $[8] = note;
+    $[9] = onChange;
+    $[10] = onClear;
+    $[11] = restProps;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = tabIndex;
+    $[17] = textareaRef;
+    $[18] = themeFromProps;
+    $[19] = value;
+  } else {
+    busy = $[1];
+    characterCounter = $[2];
+    className = $[3];
+    disabled = $[4];
+    error = $[5];
+    id = $[6];
+    label = $[7];
+    note = $[8];
+    onChange = $[9];
+    onClear = $[10];
+    restProps = $[11];
+    t1 = $[12];
+    t2 = $[13];
+    t3 = $[14];
+    t4 = $[15];
+    tabIndex = $[16];
+    textareaRef = $[17];
+    themeFromProps = $[18];
+    value = $[19];
+  }
+
+  const reserveErrorLine = t1 === undefined ? false : t1;
+  const size = t2 === undefined ? "m" : t2;
+  const mode = t3 === undefined ? "classic" : t3;
+  const boldLabel = t4 === undefined ? true : t4;
   const theme = useThemeWithUndefined(themeFromProps);
   const isEmpty = !value;
   const showClearIcon = Boolean(onClear && !isEmpty);
   const [focused, setFocused] = useState(false);
   const uniqueId = `textarea-${useSafeId()}`;
   const errorId = `${id ? id : uniqueId}-error`;
-  const hasFooter = Boolean(note) || Boolean(characterCounter) || shouldRenderErrorMessage(error, reserveErrorLine);
-  return /*#__PURE__*/React.createElement("label", {
-    ref: ref,
-    className: cn(styles.labelWrapper, SIZE_STYLES[size], MODE_STYLES[mode], THEME_STYLES[theme], !!error && styles.error, disabled ? styles.disabled : styles.enabled, focused && styles.focused, boldLabel && styles.boldLabel, isEmpty ? styles.empty : styles.filled, className),
-    id: id,
-    "data-test": 'textarea'
-  }, label && /*#__PURE__*/React.createElement("div", {
-    className: styles.label,
-    "data-test": 'textarea__label',
-    "data-rs-internal": boldLabel ? 'textarea__bold-label' : 'textarea__label'
-  }, label), /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.wrapper, showClearIcon && styles.clearable),
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false)
-  }, /*#__PURE__*/React.createElement(TextareaAutosize, { ...restProps,
-    className: styles.inner,
-    disabled: disabled,
-    value: value,
-    onChange: onChange,
-    ref: textareaRef,
-    "aria-errormessage": error ? errorId : undefined,
-    "aria-invalid": Boolean(error),
-    tabIndex: disabled ? -1 : tabIndex,
-    "data-test": 'textarea__input',
-    "data-rs-internal": "textarea__inner"
-  }), showClearIcon && /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles.clearIcon,
-    onClick: onClear,
-    "aria-label": "Clear textarea",
-    "data-test": "textarea__clear-icon",
-    "data-rs-internal": "textarea__clear-icon",
-    tabIndex: -1
-  }, /*#__PURE__*/React.createElement(CloseOutlineIcon, {
-    className: styles.icon,
-    "data-render-all-sizes": true
-  })), busy && /*#__PURE__*/React.createElement("span", {
-    className: styles.busyIcon
-  }, /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
-    "data-test": "textarea__busy-icon",
-    "data-rs-internal": "textarea__busy-icon",
-    "data-render-all-sizes": true
-  }))), hasFooter && /*#__PURE__*/React.createElement("div", {
-    className: styles.footer
-  }, characterCounter && /*#__PURE__*/React.createElement("div", {
-    className: styles.characterCounter
-  }, characterCounter), /*#__PURE__*/React.createElement(ErrorMessage, {
-    id: errorId,
-    className: styles.errorMessage,
-    "data-test": 'textarea__error',
-    reserveLine: reserveErrorLine
-  }, error), note && /*#__PURE__*/React.createElement("div", {
-    className: styles.note,
-    "data-test": 'textarea__note',
-    "data-rs-internal": "textarea__note"
-  }, note)));
+  let t5;
+
+  if ($[20] !== characterCounter || $[21] !== error || $[22] !== note || $[23] !== reserveErrorLine) {
+    t5 = Boolean(note) || Boolean(characterCounter) || shouldRenderErrorMessage(error, reserveErrorLine);
+    $[20] = characterCounter;
+    $[21] = error;
+    $[22] = note;
+    $[23] = reserveErrorLine;
+    $[24] = t5;
+  } else {
+    t5 = $[24];
+  }
+
+  const hasFooter = t5;
+  const t6 = SIZE_STYLES[size];
+  const t7 = MODE_STYLES[mode];
+  const t8 = THEME_STYLES[theme];
+  const t9 = !!error && styles.error;
+  const t10 = disabled ? styles.disabled : styles.enabled;
+  const t11 = focused && styles.focused;
+  const t12 = boldLabel && styles.boldLabel;
+  const t13 = isEmpty ? styles.empty : styles.filled;
+  let t14;
+
+  if ($[25] !== className || $[26] !== t10 || $[27] !== t11 || $[28] !== t12 || $[29] !== t13 || $[30] !== t6 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9) {
+    t14 = cn(styles.labelWrapper, t6, t7, t8, t9, t10, t11, t12, t13, className);
+    $[25] = className;
+    $[26] = t10;
+    $[27] = t11;
+    $[28] = t12;
+    $[29] = t13;
+    $[30] = t6;
+    $[31] = t7;
+    $[32] = t8;
+    $[33] = t9;
+    $[34] = t14;
+  } else {
+    t14 = $[34];
+  }
+
+  let t15;
+
+  if ($[35] !== boldLabel || $[36] !== label) {
+    t15 = label && /*#__PURE__*/React.createElement("div", {
+      className: styles.label,
+      "data-test": "textarea__label",
+      "data-rs-internal": boldLabel ? "textarea__bold-label" : "textarea__label"
+    }, label);
+    $[35] = boldLabel;
+    $[36] = label;
+    $[37] = t15;
+  } else {
+    t15 = $[37];
+  }
+
+  const t16 = showClearIcon && styles.clearable;
+  let t17;
+
+  if ($[38] !== t16) {
+    t17 = cn(styles.wrapper, t16);
+    $[38] = t16;
+    $[39] = t17;
+  } else {
+    t17 = $[39];
+  }
+
+  let t18;
+  let t19;
+
+  if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+    t18 = () => setFocused(true);
+
+    t19 = () => setFocused(false);
+
+    $[40] = t18;
+    $[41] = t19;
+  } else {
+    t18 = $[40];
+    t19 = $[41];
+  }
+
+  const t20 = error ? errorId : undefined;
+  const t21 = Boolean(error);
+  const t22 = disabled ? -1 : tabIndex;
+  let t23;
+
+  if ($[42] !== disabled || $[43] !== focused || $[44] !== onChange || $[45] !== restProps || $[46] !== t20 || $[47] !== t21 || $[48] !== t22 || $[49] !== textareaRef || $[50] !== value) {
+    t23 = /*#__PURE__*/React.createElement(TextareaAutosize, _extends({}, restProps, {
+      className: styles.inner,
+      disabled: disabled,
+      value: value,
+      onChange: onChange,
+      ref: textareaRef,
+      "aria-errormessage": t20,
+      "aria-invalid": t21,
+      tabIndex: t22,
+      "data-test": "textarea__input",
+      "data-rs-internal": "textarea__inner",
+      "data-focused": focused
+    }));
+    $[42] = disabled;
+    $[43] = focused;
+    $[44] = onChange;
+    $[45] = restProps;
+    $[46] = t20;
+    $[47] = t21;
+    $[48] = t22;
+    $[49] = textareaRef;
+    $[50] = value;
+    $[51] = t23;
+  } else {
+    t23 = $[51];
+  }
+
+  let t24;
+
+  if ($[52] !== onClear || $[53] !== showClearIcon) {
+    t24 = showClearIcon && /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: styles.clearIcon,
+      onClick: onClear,
+      "aria-label": "Clear textarea",
+      "data-test": "textarea__clear-icon",
+      "data-rs-internal": "textarea__clear-icon",
+      tabIndex: -1
+    }, /*#__PURE__*/React.createElement(CloseOutlineIcon, {
+      className: styles.icon,
+      "data-render-all-sizes": true
+    }));
+    $[52] = onClear;
+    $[53] = showClearIcon;
+    $[54] = t24;
+  } else {
+    t24 = $[54];
+  }
+
+  let t25;
+
+  if ($[55] !== busy) {
+    t25 = busy && /*#__PURE__*/React.createElement("span", {
+      className: styles.busyIcon
+    }, /*#__PURE__*/React.createElement(LoadingOutlineIcon, {
+      "data-test": "textarea__busy-icon",
+      "data-rs-internal": "textarea__busy-icon",
+      "data-render-all-sizes": true
+    }));
+    $[55] = busy;
+    $[56] = t25;
+  } else {
+    t25 = $[56];
+  }
+
+  let t26;
+
+  if ($[57] !== t17 || $[58] !== t23 || $[59] !== t24 || $[60] !== t25) {
+    t26 = /*#__PURE__*/React.createElement("div", {
+      className: t17,
+      onFocus: t18,
+      onBlur: t19
+    }, t23, t24, t25);
+    $[57] = t17;
+    $[58] = t23;
+    $[59] = t24;
+    $[60] = t25;
+    $[61] = t26;
+  } else {
+    t26 = $[61];
+  }
+
+  let t27;
+
+  if ($[62] !== characterCounter || $[63] !== error || $[64] !== errorId || $[65] !== hasFooter || $[66] !== note || $[67] !== reserveErrorLine) {
+    t27 = hasFooter && /*#__PURE__*/React.createElement("div", {
+      className: styles.footer
+    }, characterCounter && /*#__PURE__*/React.createElement("div", {
+      className: styles.characterCounter
+    }, characterCounter), /*#__PURE__*/React.createElement(ErrorMessage, {
+      id: errorId,
+      className: styles.errorMessage,
+      "data-test": "textarea__error",
+      reserveLine: reserveErrorLine
+    }, error), note && /*#__PURE__*/React.createElement("div", {
+      className: styles.note,
+      "data-test": "textarea__note",
+      "data-rs-internal": "textarea__note"
+    }, note));
+    $[62] = characterCounter;
+    $[63] = error;
+    $[64] = errorId;
+    $[65] = hasFooter;
+    $[66] = note;
+    $[67] = reserveErrorLine;
+    $[68] = t27;
+  } else {
+    t27 = $[68];
+  }
+
+  let t28;
+
+  if ($[69] !== id || $[70] !== ref || $[71] !== t14 || $[72] !== t15 || $[73] !== t26 || $[74] !== t27) {
+    t28 = /*#__PURE__*/React.createElement("label", {
+      ref: ref,
+      className: t14,
+      id: id,
+      "data-test": "textarea"
+    }, t15, t26, t27);
+    $[69] = id;
+    $[70] = ref;
+    $[71] = t14;
+    $[72] = t15;
+    $[73] = t26;
+    $[74] = t27;
+    $[75] = t28;
+  } else {
+    t28 = $[75];
+  }
+
+  return t28;
 });
 Textarea.displayName = 'Textarea';
 Textarea.propTypes = {

package/lib/textarea.p.module.css.js

@@ -1,27 +1,27 @@
 var styles = {
-  "themeLight": "_themeLight_1xxg0sf_8",
-  "themeDark": "_themeDark_1xxg0sf_11",
-  "sizeS": "_sizeS_1xxg0sf_15",
-  "sizeM": "_sizeM_1xxg0sf_18",
-  "sizeL": "_sizeL_1xxg0sf_21",
-  "classic": "_classic_1xxg0sf_25",
-  "rock": "_rock_1xxg0sf_28",
-  "labelWrapper": "_labelWrapper_1xxg0sf_32",
-  "wrapper": "_wrapper_1xxg0sf_40",
-  "error": "_error_1xxg0sf_57",
-  "disabled": "_disabled_1xxg0sf_63",
-  "enabled": "_enabled_1xxg0sf_69",
-  "focused": "_focused_1xxg0sf_69",
-  "filled": "_filled_1xxg0sf_75",
-  "inner": "_inner_1xxg0sf_91",
-  "clearable": "_clearable_1xxg0sf_119",
-  "clearIcon": "_clearIcon_1xxg0sf_184",
-  "icon": "_icon_1xxg0sf_226",
-  "busyIcon": "_busyIcon_1xxg0sf_234",
-  "label": "_label_1xxg0sf_32",
-  "footer": "_footer_1xxg0sf_265",
-  "characterCounter": "_characterCounter_1xxg0sf_284",
-  "errorMessage": "_errorMessage_1xxg0sf_293",
-  "note": "_note_1xxg0sf_297"
+  "themeLight": "_themeLight_jyawb7_8",
+  "themeDark": "_themeDark_jyawb7_11",
+  "sizeS": "_sizeS_jyawb7_15",
+  "sizeM": "_sizeM_jyawb7_18",
+  "sizeL": "_sizeL_jyawb7_21",
+  "classic": "_classic_jyawb7_25",
+  "rock": "_rock_jyawb7_28",
+  "labelWrapper": "_labelWrapper_jyawb7_32",
+  "wrapper": "_wrapper_jyawb7_40",
+  "error": "_error_jyawb7_57",
+  "disabled": "_disabled_jyawb7_63",
+  "enabled": "_enabled_jyawb7_69",
+  "focused": "_focused_jyawb7_69",
+  "filled": "_filled_jyawb7_75",
+  "inner": "_inner_jyawb7_91",
+  "clearable": "_clearable_jyawb7_119",
+  "clearIcon": "_clearIcon_jyawb7_184",
+  "icon": "_icon_jyawb7_226",
+  "busyIcon": "_busyIcon_jyawb7_234",
+  "label": "_label_jyawb7_32",
+  "footer": "_footer_jyawb7_265",
+  "characterCounter": "_characterCounter_jyawb7_284",
+  "errorMessage": "_errorMessage_jyawb7_293",
+  "note": "_note_jyawb7_297"
 };
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/textarea",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,19 +17,20 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/form-field": "^0.1.7",
+    "@rescui/form-field": "^0.2.0",
     "classnames": "^2.2.6",
+    "react-compiler-runtime": "^1.0.0",
     "react-textarea-autosize": "^8.3.4"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
     "prop-types": "^15",
-    "react": ">=16.8.0 <20"
+    "react": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.3",
-    "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.4",
+    "@rescui/colors": "^0.3.4",
+    "@rescui/scripts": "^0.5.3",
+    "@rescui/typography": "^0.28.0",
     "@rescui/visual-regression": "^0.1.4",
     "@types/classnames": "^2.2.11"
   },
@@ -38,5 +39,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "3711cbfc0c797014395421b008aa5331d6d47c6e"
+  "gitHead": "8ffbbe20b8bcbb9ea15204113ab603675d4c03cd"
 }