@true-engineering/true-react-common-ui-kit 3.49.0 → 3.50.1

package/README.md

@@ -4,13 +4,37 @@
 
 # Публикация
 
-1. Слить Pull Request с увеличением версии пакета в файле `package.json` в ветке `master`
-2. `yarn build` локально из ветки `master`
-3. `npm publish` локально из ветки `master`
-4. Добавить тег с версией в гите
+Слить Pull Request с увеличением версии пакета в файле `package.json` в ветке `master`.
+Не забыть добавить описание изменений в этот файл.
+
+Публикация в npm и добавление тега на коммит c версией пакета происходит автоматически в пайплайне.
+Так же автоматически будет создан коммит в репозиторий TE_TrueReactPlatform_Moduled и обновится наш сторибук
 
 # Release Notes
 
+## 3.50.1
+
+### Changes
+
+- **Select**: Исправлено обрезание лейбла многоточием
+
+## 3.50.0
+
+### Changes
+
+- **TextArea**: Добавлено обрезание лейбла многоточием.
+- **Input**: Добавлено обрезание лейбла многоточием. HTML-структура поменялась с `inputWrapper > input` на `inputWrapper > inputWithLabelWrapper > input`.
+
+  Это также повлияло на все компоненты, использующие **Input**:
+  - **DateInput**
+  - **NumberInput**
+  - **PhoneInput**
+  - **PhoneInputCountryList**
+  - **SearchInput** – если вы переопределяли через твик-стайлы правило `left` для класса `label`,
+    это переопределение нужно удалить, т.к. `left` теперь в стандартном случае должно быть равно `0`
+  - **Select**
+  - **SmartInput**
+
 ## 3.49.0
 
 ### Changes

package/dist/components/Input/Input.styles.d.ts

@@ -1,7 +1,7 @@
 import { ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
 export declare const AUTOSIZE_MAX_WIDTH = 480;
-export declare const useStyles: import("../../theme").IUseStyles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputWithLabelWrapper" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "labelWithIcons" | "withIcons" | "labelText" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown>;
 export type IInputStyles = ITweakStyles<typeof useStyles, {
     tweakPreloader: IThemedPreloaderStyles;
 }>;

package/dist/components/Select/Select.styles.d.ts

@@ -3,19 +3,19 @@ import { type IInputStyles } from '../Input';
 import { type ISearchInputStyles } from '../SearchInput';
 import { type ISelectListStyles } from './components';
 export declare const useStyles: import("../../theme").IUseStyles<"root" | "icon" | "disabled" | "inputWrapper" | "arrow" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter", unknown>;
-export declare const readonlyInputStyles: Partial<import("jss").Styles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
+export declare const readonlyInputStyles: Partial<import("jss").Styles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputWithLabelWrapper" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "labelWithIcons" | "withIcons" | "labelText" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
     tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
         tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
         tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
     }>;
 }>;
-export declare const multiSelectInputStyles: Partial<import("jss").Styles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
+export declare const multiSelectInputStyles: Partial<import("jss").Styles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputWithLabelWrapper" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "labelWithIcons" | "withIcons" | "labelText" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
     tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
         tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
         tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
     }>;
 }>;
-export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withIcons" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
+export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"bottom" | "left" | "right" | "top" | "error" | "input" | "invalid" | "root" | "middle" | "icon" | "disabled" | "loading" | "label" | "requiredLabel" | "inputWrapper" | "info" | "autosize" | "clearIcon" | "focused" | "inputWithLabelWrapper" | "inputContent" | "unitsWrapper" | "fakeValue" | "units" | "withFloatingLabel" | "floatingLabelWithoutPadding" | "floating" | "activeLabel" | "required" | "floatingWithoutPadding" | "labelWithIcons" | "withIcons" | "labelText" | "activeIcon" | "border-top" | "border-bottom" | "border-left" | "border-right" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "controls" | "inputIcon" | "withControls" | "invalidLabel" | "error-top" | "error-bottom" | "withUnits", unknown, undefined>> & Partial<{
     tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
         tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
         tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;

package/dist/components/TextArea/TextArea.styles.d.ts

@@ -1,3 +1,3 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"error" | "invalid" | "root" | "textarea" | "disabled" | "label" | "requiredLabel" | "footer" | "info" | "autosize" | "focused" | "withFloatingLabel" | "floating" | "activeLabel" | "required" | "invalidLabel" | "wrapper" | "symbolsCount" | "symbolsCountError", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"error" | "invalid" | "root" | "textarea" | "disabled" | "label" | "requiredLabel" | "footer" | "info" | "autosize" | "focused" | "withFloatingLabel" | "floating" | "activeLabel" | "required" | "labelText" | "invalidLabel" | "wrapper" | "symbolsCount" | "symbolsCountError", unknown>;
 export type ITextAreaStyles = ITweakStyles<typeof useStyles>;

package/dist/true-react-common-ui-kit.js

@@ -9638,7 +9638,6 @@ var CssBaseline = function(param) {
   }, addDataTestId(testId), addDataAttributes(data)));
 };
 var DEFAULT_SIZE = 6;
-var PADDING_X$1 = 12;
 var AUTOSIZE_MAX_WIDTH = 480;
 var useStyles$H = createThemedStyles("Input", {
   root: {
@@ -9647,6 +9646,8 @@ var useStyles$H = createThemedStyles("Input", {
     position: "relative"
   },
   inputWrapper: {
+    "--input-padding-x": "12px",
+    "--input-with-icons-padding-right": "4px",
     display: "flex",
     width: "100%",
     height: dimensions.CONTROL_HEIGHT,
@@ -9656,12 +9657,16 @@ var useStyles$H = createThemedStyles("Input", {
     backgroundColor: "white",
     position: "relative"
   },
+  inputWithLabelWrapper: {
+    position: "relative",
+    width: "100%"
+  },
   inputContent: {
     fontSize: 16,
     fontFamily: "inherit",
     padding: [
       0,
-      PADDING_X$1
+      "var(--input-padding-x)"
     ]
   },
   input: {
@@ -9734,8 +9739,10 @@ var useStyles$H = createThemedStyles("Input", {
   activeLabel: {
     display: "none",
     "&$floating": {
+      "--scale-factor": "0.75",
       display: "block",
-      transform: "scale(0.75) translateY(-120%)"
+      transform: "scale(var(--scale-factor)) translateY(-120%)",
+      maxWidth: "calc(var(--label-max-width) / var(--scale-factor))"
     }
   },
   required: {
@@ -9751,31 +9758,54 @@ var useStyles$H = createThemedStyles("Input", {
     }
   },
   label: {
+    "--label-max-width": "calc(100% - var(--input-padding-x))",
     position: "absolute",
     pointerEvents: "none",
-    left: PADDING_X$1,
+    left: "var(--input-padding-x)",
     top: "50%",
+    boxSizing: "border-box",
+    maxWidth: "var(--label-max-width)",
+    paddingRight: "var(--input-padding-x)",
     transformOrigin: "top left",
     transform: "translateY(-50%)",
     transition: animations.defaultTransition,
-    transitionProperty: "transform, color",
+    transitionProperty: [
+      "max-width",
+      "transform",
+      "color"
+    ],
     fontSize: 16
   },
   floatingWithoutPadding: {
     left: 0
   },
   requiredLabel: {
+    "--input-padding-right": "var(--input-padding-x)",
+    "--required-label-size": "6px",
+    "--required-label-right": "calc(var(--input-padding-right) - var(--required-label-size) - 2px)",
+    "&:is($labelWithIcons)": {
+      "--input-padding-right": "var(--input-with-icons-padding-right)"
+    },
     "&:after": {
       content: '""',
       position: "absolute",
-      right: -8,
+      right: "var(--required-label-right)",
       top: 4,
       transform: "translate(0, -50%)",
-      width: 6,
-      height: 6,
+      width: "var(--required-label-size)",
+      height: "var(--required-label-size)",
       borderRadius: "50%"
     }
   },
+  labelWithIcons: {
+    extend: "withIcons"
+  },
+  labelText: {
+    display: "block",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
   activeIcon: {
     cursor: "pointer"
   },
@@ -9883,7 +9913,7 @@ var useStyles$H = createThemedStyles("Input", {
     extend: "icon"
   },
   withIcons: {
-    paddingRight: 4
+    paddingRight: "var(--input-with-icons-padding-right)"
   },
   withControls: {},
   invalid: {},
@@ -10302,19 +10332,27 @@ var Input = /* @__PURE__ */ forwardRef(function(_param, ref) {
         "data-value": isAutoSizeable ? value : void 0
       }, addDataAttributes(data)), {
         children: [
-          mask === void 0 ? /* @__PURE__ */ jsx("input", _object_spread$P({
-            ref: ref !== null && ref !== void 0 ? ref : inputRef
-          }, props)) : /* @__PURE__ */ jsx(InputMask, _object_spread$P({
-            ref: ref !== null && ref !== void 0 ? ref : inputRef,
-            mask,
-            maskPlaceholder,
-            alwaysShowMask,
-            beforeMaskedStateChange
-          }, props)),
-          hasLabel && /* @__PURE__ */ jsx("span", {
-            className: clsx(classes.label, (_obj22 = {}, _define_property$R(_obj22, classes.invalidLabel, isInvalid), _define_property$R(_obj22, classes.requiredLabel, hasRequiredLabel && !isRequired), _define_property$R(_obj22, classes.activeLabel, isLabelActive), _define_property$R(_obj22, classes.floating, hasFloatingLabel), // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
-            _define_property$R(_obj22, classes.floatingWithoutPadding, hasFloatingLabel && border === "bottom"), _obj22)),
-            children: label
+          /* @__PURE__ */ jsxs("div", {
+            className: classes.inputWithLabelWrapper,
+            children: [
+              mask === void 0 ? /* @__PURE__ */ jsx("input", _object_spread$P({
+                ref: ref !== null && ref !== void 0 ? ref : inputRef
+              }, props)) : /* @__PURE__ */ jsx(InputMask, _object_spread$P({
+                ref: ref !== null && ref !== void 0 ? ref : inputRef,
+                mask,
+                maskPlaceholder,
+                alwaysShowMask,
+                beforeMaskedStateChange
+              }, props)),
+              hasLabel && /* @__PURE__ */ jsx("span", {
+                className: clsx(classes.label, (_obj22 = {}, _define_property$R(_obj22, classes.invalidLabel, isInvalid), _define_property$R(_obj22, classes.requiredLabel, hasRequiredLabel && !isRequired), _define_property$R(_obj22, classes.activeLabel, isLabelActive), _define_property$R(_obj22, classes.floating, hasFloatingLabel), // Обсуждаемо, сделал так, потому что не хочется создавать новую пропсу, на каждый чих в стилях
+                _define_property$R(_obj22, classes.floatingWithoutPadding, hasFloatingLabel && border === "bottom"), _define_property$R(_obj22, classes.labelWithIcons, hasControls), _obj22)),
+                children: /* @__PURE__ */ jsx("span", {
+                  className: classes.labelText,
+                  children: label
+                })
+              })
+            ]
           }),
           shouldShowUnits && /* @__PURE__ */ jsxs("div", {
             className: clsx(classes.unitsWrapper, _define_property$R({}, classes.withFloatingLabel, hasFloatingLabel && hasLabel)),
@@ -10519,7 +10557,6 @@ var DateInput = /* @__PURE__ */ forwardRef(function(_param, ref) {
   }));
 });
 const reactDatepicker = "";
-var LEFT_PADDING = 44;
 var useStyles$F = createThemedStyles("SearchInput", {
   root: {
     position: "relative"
@@ -10544,7 +10581,7 @@ var inputStyles$4 = {
     borderColor: "transparent",
     backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
     borderRadius: 18,
-    paddingLeft: LEFT_PADDING,
+    paddingLeft: 44,
     transitionProperty: "background-color, border-color"
   },
   focused: {
@@ -10556,7 +10593,7 @@ var inputStyles$4 = {
     paddingLeft: 0
   },
   label: {
-    left: LEFT_PADDING,
+    left: 0,
     fontSize: 14
   }
 };
@@ -11261,6 +11298,7 @@ var useStyles$D = createThemedStyles("Select", {
     boxSizing: "border-box"
   },
   inputWrapper: {
+    "--select-arrow-size": "20px",
     width: "100%",
     cursor: "text",
     position: "relative"
@@ -11284,8 +11322,8 @@ var useStyles$D = createThemedStyles("Select", {
     position: "absolute",
     right: 12,
     top: 14,
-    width: 20,
-    height: 20,
+    width: "var(--select-arrow-size)",
+    height: "var(--select-arrow-size)",
     cursor: "pointer",
     zIndex: 1,
     transition: animations.defaultTransition,
@@ -11320,6 +11358,17 @@ var baseInputStyles = {
   },
   controls: {
     paddingRight: 32
+  },
+  label: {
+    "--select-label-max-width": "calc(100% - var(--input-padding-x) - var(--select-arrow-size))",
+    "&:not($labelWithIcons)": {
+      "--label-max-width": "var(--select-label-max-width)"
+    }
+  },
+  requiredLabel: {
+    "&:not($labelWithIcons)": {
+      "--label-max-width": "calc(var(--select-label-max-width) - var(--required-label-size))"
+    }
   }
 };
 var readonlyInputBaseStyles = {
@@ -11648,7 +11697,7 @@ function _ts_generator$4(thisArg, body) {
   }
 }
 function Select(props) {
-  var _input_current;
+  var _input_current_parentElement, _input_current;
   var options = props.options, isMultiSelect = props.isMultiSelect, value = props.value, header = props.header, footer = props.footer, defaultOptionLabel = props.defaultOptionLabel, allOptionsLabel = props.allOptionsLabel, _props_debounceTime = props.debounceTime, debounceTime = _props_debounceTime === void 0 ? 400 : _props_debounceTime, _props_optionsMode = props.optionsMode, optionsMode = _props_optionsMode === void 0 ? "normal" : _props_optionsMode, noMatchesLabel = props.noMatchesLabel, loadingLabel = props.loadingLabel, tweakStyles = props.tweakStyles, testId = props.testId, isActive = props.isActive, isReadonly = props.isReadonly, isDisabled = props.isDisabled, dropdownOptions = props.dropdownOptions, _props_minSymbolsCountToOpenList = props.minSymbolsCountToOpenList, minSymbolsCountToOpenList = _props_minSymbolsCountToOpenList === void 0 ? 0 : _props_minSymbolsCountToOpenList, _props_dropdownIcon = props.dropdownIcon, dropdownIcon = _props_dropdownIcon === void 0 ? "chevron-down" : _props_dropdownIcon, _props_shouldScrollToList = props.shouldScrollToList, shouldScrollToList = _props_shouldScrollToList === void 0 ? true : _props_shouldScrollToList, searchInput = props.searchInput, iconType = props.iconType, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onType = props.onType, onOpen = props.onOpen, _props_isOptionDisabled = props.isOptionDisabled, isOptionDisabled = _props_isOptionDisabled === void 0 ? defaultIsOptionDisabled : _props_isOptionDisabled, _props_compareValuesOnChange = props.compareValuesOnChange, compareValuesOnChange = _props_compareValuesOnChange === void 0 ? defaultCompareFunction : _props_compareValuesOnChange, _props_convertValueToString = props.convertValueToString, convertValueToString = _props_convertValueToString === void 0 ? defaultConvertFunction$2 : _props_convertValueToString, convertValueToId = props.convertValueToId, convertValueToReactNode = props.convertValueToReactNode, optionsFilter = props.optionsFilter, inputProps = _object_without_properties$c(props, [
     "options",
     "isMultiSelect",
@@ -11783,12 +11832,12 @@ function Select(props) {
     convertValueToString
   ]);
   var getDropdownOffset = function() {
-    var _input_current_parentElement2;
-    if (isEmpty(input.current) || inputProps.errorPosition === "top") {
+    var _inputWrapper_current;
+    if (inputProps.errorPosition === "top") {
       return 0;
     }
-    var _input_current_parentElement_offsetHeight;
-    return (_input_current_parentElement_offsetHeight = (_input_current_parentElement2 = input.current.parentElement) === null || _input_current_parentElement2 === void 0 ? void 0 : _input_current_parentElement2.offsetHeight) !== null && _input_current_parentElement_offsetHeight !== void 0 ? _input_current_parentElement_offsetHeight : 0;
+    var _inputWrapper_current_offsetHeight;
+    return (_inputWrapper_current_offsetHeight = (_inputWrapper_current = inputWrapper.current) === null || _inputWrapper_current === void 0 ? void 0 : _inputWrapper_current.offsetHeight) !== null && _inputWrapper_current_offsetHeight !== void 0 ? _inputWrapper_current_offsetHeight : 0;
   };
   var closeList = useCallback(function() {
     setIsListOpen(false);
@@ -12025,11 +12074,11 @@ function Select(props) {
     (optionsMode === "normal" || hasEnoughSymbolsToSearch)
   );
   var _ref1 = dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : {}, _ref_shouldUsePopper = _ref1.shouldUsePopper, shouldUsePopper = _ref_shouldUsePopper === void 0 ? false : _ref_shouldUsePopper, _ref_shouldRenderInBody = _ref1.shouldRenderInBody, shouldRenderInBody = _ref_shouldRenderInBody === void 0 ? false : _ref_shouldRenderInBody, _ref_shouldHideOnScroll = _ref1.shouldHideOnScroll, shouldHideOnScroll = _ref_shouldHideOnScroll === void 0 ? false : _ref_shouldHideOnScroll;
-  var _input_current_parentElement;
+  var _input_current_parentElement_parentElement;
   var popperData = useDropdown({
     isOpen,
     onDropdownClose: handleListClose,
-    referenceElement: (_input_current_parentElement = (_input_current = input.current) === null || _input_current === void 0 ? void 0 : _input_current.parentElement) !== null && _input_current_parentElement !== void 0 ? _input_current_parentElement : inputWrapper.current,
+    referenceElement: (_input_current_parentElement_parentElement = (_input_current = input.current) === null || _input_current === void 0 ? void 0 : (_input_current_parentElement = _input_current.parentElement) === null || _input_current_parentElement === void 0 ? void 0 : _input_current_parentElement.parentElement) !== null && _input_current_parentElement_parentElement !== void 0 ? _input_current_parentElement_parentElement : inputWrapper.current,
     dropdownElement: list.current,
     options: dropdownOptions,
     dependenciesForPositionUpdating: [
@@ -30185,7 +30234,6 @@ function _object_spread_props$6(target, source) {
   }
   return target;
 }
-var PADDING_X = 12;
 var useStyles$4 = createThemedStyles("TextArea", {
   root: {
     width: "100%",
@@ -30194,6 +30242,7 @@ var useStyles$4 = createThemedStyles("TextArea", {
     flexDirection: "column"
   },
   wrapper: {
+    "--textarea-padding-x": "12px",
     display: "flex",
     position: "relative",
     width: "100%",
@@ -30217,7 +30266,7 @@ var useStyles$4 = createThemedStyles("TextArea", {
     fontSize: 16,
     padding: [
       14,
-      PADDING_X,
+      "var(--textarea-padding-x)",
       8
     ],
     scrollPadding: "14px 0 8px",
@@ -30266,8 +30315,10 @@ var useStyles$4 = createThemedStyles("TextArea", {
   activeLabel: {
     display: "none",
     "&$floating": {
+      "--scale-factor": "0.75",
       display: "block",
-      transform: "scale(0.75) translateY(-120%)"
+      transform: "scale(var(--scale-factor)) translateY(-120%)",
+      maxWidth: "calc(var(--label-max-width) / var(--scale-factor))"
     }
   },
   required: {
@@ -30284,14 +30335,20 @@ var useStyles$4 = createThemedStyles("TextArea", {
   },
   disabled: {},
   label: {
+    "--label-max-width": "calc(100% - 2 * var(--textarea-padding-x))",
     position: "absolute",
     pointerEvents: "none",
-    left: PADDING_X,
-    top: PADDING_X * 2,
+    left: "var(--textarea-padding-x)",
+    top: 24,
+    maxWidth: "var(--label-max-width)",
     transformOrigin: "top left",
     transform: "translateY(-50%)",
     transition: animations.defaultTransition,
-    transitionProperty: "transform, color",
+    transitionProperty: [
+      "max-width",
+      "transform",
+      "color"
+    ],
     fontSize: 16
   },
   invalid: {
@@ -30305,18 +30362,27 @@ var useStyles$4 = createThemedStyles("TextArea", {
     color: "red"
   },
   requiredLabel: {
+    "--required-label-size": "6px",
+    "--required-label-right": "8px",
+    maxWidth: "calc(100% - 2 * var(--textarea-padding-x) - var(--required-label-right))",
     "&:after": {
       content: '""',
       position: "absolute",
-      right: -8,
+      right: "calc(-1 * var(--required-label-right))",
       top: 4,
       transform: "translate(0, -50%)",
-      width: 6,
-      height: 6,
+      width: "var(--required-label-size)",
+      height: "var(--required-label-size)",
       borderRadius: "50%",
       backgroundColor: "red"
     }
   },
+  labelText: {
+    display: "block",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
   symbolsCount: {
     display: "block",
     textAlign: "right",
@@ -30502,7 +30568,10 @@ var TextArea = /* @__PURE__ */ forwardRef(function(param, ref) {
         children: [
           hasLabel && /* @__PURE__ */ jsx("span", {
             className: clsx(classes.label, (_obj1 = {}, _define_property$5(_obj1, classes.invalidLabel, isInvalid), _define_property$5(_obj1, classes.requiredLabel, hasRequiredLabel && !isRequired), _define_property$5(_obj1, classes.activeLabel, hasFocus || hasValue), _define_property$5(_obj1, classes.floating, hasFloatingLabel), _obj1)),
-            children: label
+            children: /* @__PURE__ */ jsx("span", {
+              className: classes.labelText,
+              children: label
+            })
           }),
           /* @__PURE__ */ jsx("textarea", _object_spread$5({
             ref