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

package/dist/true-react-common-ui-kit.umd.cjs

@@ -9626,7 +9626,6 @@
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)));
   };
   var DEFAULT_SIZE = 6;
-  var PADDING_X$1 = 12;
   var AUTOSIZE_MAX_WIDTH = 480;
   var useStyles$H = createThemedStyles("Input", {
     root: {
@@ -9635,6 +9634,8 @@
       position: "relative"
     },
     inputWrapper: {
+      "--input-padding-x": "12px",
+      "--input-with-icons-padding-right": "4px",
       display: "flex",
       width: "100%",
       height: dimensions.CONTROL_HEIGHT,
@@ -9644,12 +9645,16 @@
       backgroundColor: "white",
       position: "relative"
     },
+    inputWithLabelWrapper: {
+      position: "relative",
+      width: "100%"
+    },
     inputContent: {
       fontSize: 16,
       fontFamily: "inherit",
       padding: [
         0,
-        PADDING_X$1
+        "var(--input-padding-x)"
       ]
     },
     input: {
@@ -9722,8 +9727,10 @@
     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: {
@@ -9739,31 +9746,54 @@
       }
     },
     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"
     },
@@ -9871,7 +9901,7 @@
       extend: "icon"
     },
     withIcons: {
-      paddingRight: 4
+      paddingRight: "var(--input-with-icons-padding-right)"
     },
     withControls: {},
     invalid: {},
@@ -10290,19 +10320,27 @@
           "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)),
@@ -10507,7 +10545,6 @@
     }));
   });
   const reactDatepicker = "";
-  var LEFT_PADDING = 44;
   var useStyles$F = createThemedStyles("SearchInput", {
     root: {
       position: "relative"
@@ -10532,7 +10569,7 @@
       borderColor: "transparent",
       backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
       borderRadius: 18,
-      paddingLeft: LEFT_PADDING,
+      paddingLeft: 44,
       transitionProperty: "background-color, border-color"
     },
     focused: {
@@ -10544,7 +10581,7 @@
       paddingLeft: 0
     },
     label: {
-      left: LEFT_PADDING,
+      left: 0,
       fontSize: 14
     }
   };
@@ -11249,6 +11286,7 @@
       boxSizing: "border-box"
     },
     inputWrapper: {
+      "--select-arrow-size": "20px",
       width: "100%",
       cursor: "text",
       position: "relative"
@@ -11272,8 +11310,8 @@
       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,
@@ -11308,6 +11346,17 @@
     },
     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 = {
@@ -11636,7 +11685,7 @@
     }
   }
   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",
@@ -11771,12 +11820,12 @@
       convertValueToString
     ]);
     var getDropdownOffset = function() {
-      var _input_current_parentElement2;
-      if (trueReactPlatformHelpers.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 = React.useCallback(function() {
       setIsListOpen(false);
@@ -12013,11 +12062,11 @@
       (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: [
@@ -30173,7 +30222,6 @@
     }
     return target;
   }
-  var PADDING_X = 12;
   var useStyles$4 = createThemedStyles("TextArea", {
     root: {
       width: "100%",
@@ -30182,6 +30230,7 @@
       flexDirection: "column"
     },
     wrapper: {
+      "--textarea-padding-x": "12px",
       display: "flex",
       position: "relative",
       width: "100%",
@@ -30205,7 +30254,7 @@
       fontSize: 16,
       padding: [
         14,
-        PADDING_X,
+        "var(--textarea-padding-x)",
         8
       ],
       scrollPadding: "14px 0 8px",
@@ -30254,8 +30303,10 @@
     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: {
@@ -30272,14 +30323,20 @@
     },
     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: {
@@ -30293,18 +30350,27 @@
       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",
@@ -30490,7 +30556,10 @@
           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