@true-engineering/true-react-common-ui-kit 4.0.0-alpha0 → 4.0.0-alpha1

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

@@ -9614,11 +9614,12 @@
       className: classes.root
     }, trueReactPlatformHelpers.addDataTestId(testId), addDataAttributes(data)));
   };
-  var useStyles$J = createThemedStyles("ControlGroup", {
-    root: {
+  var useStyles$J = createThemedStyles("WithMessages", {
+    withMessages: {
       display: "flex",
       flexDirection: "column",
-      width: "100%"
+      width: "100%",
+      position: "relative"
     },
     error: {
       color: "red"
@@ -9699,8 +9700,8 @@
     }
     return target;
   }
-  var ControlGroup = /* @__PURE__ */ React.forwardRef(function(param, ref) {
-    var children = param.children, infoMessage = param.infoMessage, errorMessage = param.errorMessage, direction = param.direction, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
+  var WithMessages = /* @__PURE__ */ React.forwardRef(function(param, ref) {
+    var children = param.children, infoMessage = param.infoMessage, errorMessage = param.errorMessage, controlsDirection = param.controlsDirection, tweakStyles = param.tweakStyles, testId = param.testId, data = param.data;
     var classes = useStyles$J({
       theme: tweakStyles
     });
@@ -9709,12 +9710,12 @@
     var _obj2;
     return /* @__PURE__ */ jsxs("div", _object_spread_props$L(_object_spread$S({
       ref,
-      className: classes.root,
+      className: classes.withMessages,
       "data-invalid": shouldShowError ? true : void 0
     }, trueReactPlatformHelpers.addDataAttributes(data, testId)), {
       children: [
         trueReactPlatformHelpers.isReactNodeNotEmpty(children) && /* @__PURE__ */ jsx("div", {
-          className: clsx(classes.children, (_obj2 = {}, _define_property$U(_obj2, classes.horizontal, direction === "horizontal"), _define_property$U(_obj2, classes.vertical, direction === "vertical"), _obj2)),
+          className: clsx(classes.children, (_obj2 = {}, _define_property$U(_obj2, classes.horizontal, controlsDirection === "horizontal"), _define_property$U(_obj2, classes.vertical, controlsDirection === "vertical"), _obj2)),
           children
         }),
         (shouldShowError || shouldShowInfo) && /* @__PURE__ */ jsxs("div", {
@@ -9737,7 +9738,7 @@
   });
   var CONTROL$1 = dimensions.CONTROL, Z_INDEX$2 = dimensions.Z_INDEX;
   var useStyles$I = createThemedStyles("ControlWrapper", {
-    root: {
+    controlWrapper: {
       "--control-height": "".concat(CONTROL$1.HEIGHT - 2, "px"),
       // borders
       "--control-padding": "".concat(CONTROL$1.PADDING, "px"),
@@ -9954,7 +9955,7 @@
     });
     var _obj2, _obj1, _obj22;
     return /* @__PURE__ */ jsxs("div", _object_spread_props$K(_object_spread$R({
-      className: clsx(classes.root, trueReactPlatformHelpers.isNotEmpty(groupPlacement) && [
+      className: clsx(classes.controlWrapper, trueReactPlatformHelpers.isNotEmpty(groupPlacement) && [
         classes["placement-".concat(groupPlacement)]
       ], (_obj2 = {}, _define_property$T(_obj2, classes.invalid, isInvalid), _define_property$T(_obj2, classes.focused, isFocused), _define_property$T(_obj2, classes.withValue, hasValue), _define_property$T(_obj2, classes.disabled, isDisabled), _define_property$T(_obj2, classes.loading, isLoading), _define_property$T(_obj2, classes.minContent, !isFullWidth), _obj2))
     }, trueReactPlatformHelpers.addDataAttributes(data, testId)), {
@@ -10062,12 +10063,14 @@
       }
     },
     withLabel: {},
+    withValue: {},
     fakeValue: {
       extend: "inputContent",
       visibility: "hidden",
       maxWidth: "100%",
       overflow: "hidden",
-      minWidth: 8
+      minWidth: 8,
+      whiteSpace: "nowrap"
     },
     units: {
       alignSelf: "center",
@@ -10447,7 +10450,7 @@
     ]);
     var _obj2;
     var props = _object_spread$Q({
-      className: clsx(classes.input, (_obj2 = {}, _define_property$S(_obj2, classes.withUnits, hasUnits), _define_property$S(_obj2, classes.withLabel, trueReactPlatformHelpers.isReactNodeNotEmpty(label)), _define_property$S(_obj2, classes.autoSized, isAutoSized), _define_property$S(_obj2, classes.focusedInput, isFocused), _define_property$S(_obj2, classes.disabledInput, isDisabled), _define_property$S(_obj2, classes.invalidInput, isInvalid), _obj2)),
+      className: clsx(classes.input, (_obj2 = {}, _define_property$S(_obj2, classes.withUnits, hasUnits), _define_property$S(_obj2, classes.withValue, hasValue), _define_property$S(_obj2, classes.withLabel, trueReactPlatformHelpers.isReactNodeNotEmpty(label)), _define_property$S(_obj2, classes.autoSized, isAutoSized), _define_property$S(_obj2, classes.focusedInput, isFocused), _define_property$S(_obj2, classes.disabledInput, isDisabled), _define_property$S(_obj2, classes.invalidInput, isInvalid), _obj2)),
       style: hasUnits && hasValue ? {
         "--units-width": "".concat(unitsWidth, "px")
       } : void 0,
@@ -10603,15 +10606,15 @@
       "testId",
       "tweakStyles"
     ]);
-    var tweakControlGroupStyles = useTweakStyles({
+    var tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
-      className: "tweakControlGroup"
+      className: "tweakWithMessages"
     });
-    return /* @__PURE__ */ jsx(ControlGroup, {
+    return /* @__PURE__ */ jsx(WithMessages, {
       errorMessage,
       infoMessage,
       testId,
-      tweakStyles: tweakControlGroupStyles,
+      tweakStyles: tweakWithMessagesStyles,
       children: /* @__PURE__ */ jsx(InputBase, _object_spread_props$I(_object_spread$P({}, inputProps), {
         ref,
         testId,
@@ -10789,7 +10792,7 @@
   });
   var inputStyles$4 = {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         borderColor: "transparent",
         borderRadius: 18,
         paddingLeft: 0,
@@ -11561,6 +11564,11 @@
     inputContent: {
       paddingRight: 32
     },
+    input: {
+      "&[readonly]": {
+        cursor: "pointer"
+      }
+    },
     tweakControlWrapper: {
       controls: {
         paddingRight: 40
@@ -11923,9 +11931,9 @@
     ]);
     var hasSearchInputInList = optionsMode !== "normal" && shouldRenderSearchInputInList;
     var hasReadonlyInput = isReadonly || optionsMode === "normal" || shouldRenderSearchInputInList;
-    var tweakControlGroupStyles = useTweakStyles({
+    var tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
-      className: "tweakControlGroup",
+      className: "tweakWithMessages",
       currentComponentName: "Select"
     });
     var tweakInputStyles = useTweakStyles({
@@ -12017,22 +12025,10 @@
       convertValueToId,
       convertValueToString
     ]);
-    var getDropdownOffset = function() {
-      var _input_current_parentElement2;
-      if (trueReactPlatformHelpers.isEmpty(input.current)) {
-        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 closeList = React.useCallback(function() {
       setIsListOpen(false);
       setSearchValue("");
       setShouldShowDefaultOption(true);
-      if (!(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper)) {
-        var _root_current;
-        (_root_current = root2.current) === null || _root_current === void 0 ? void 0 : _root_current.style.removeProperty("--dropdown-offset");
-      }
     }, [
       dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper
     ]);
@@ -12044,15 +12040,8 @@
       onBlur
     ]);
     var handleListOpen = function() {
-      if (isReadonly) {
-        return;
-      }
-      if (!isListOpen) {
+      if (!isReadonly && !isListOpen) {
         setIsListOpen(true);
-        if (!(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.shouldUsePopper)) {
-          var _root_current;
-          (_root_current = root2.current) === null || _root_current === void 0 ? void 0 : _root_current.style.setProperty("--dropdown-offset", "".concat(getDropdownOffset(), "px"));
-        }
       }
     };
     var handleFocus = function(event) {
@@ -12348,10 +12337,10 @@
         })
       ]
     }) : void 0;
-    return /* @__PURE__ */ jsx(ControlGroup, {
+    return /* @__PURE__ */ jsx(WithMessages, {
       errorMessage,
       infoMessage,
-      tweakStyles: tweakControlGroupStyles,
+      tweakStyles: tweakWithMessagesStyles,
       children: /* @__PURE__ */ jsxs("div", {
         className: classes.root,
         onKeyDown: handleKeyDown,
@@ -12428,7 +12417,7 @@
     },
     tweakInput: {
       tweakControlWrapper: {
-        root: {
+        controlWrapper: {
           "--control-height": "35px",
           border: "none"
         }
@@ -15422,7 +15411,7 @@
   var searchInputStyles$2 = {
     tweakInput: {
       tweakControlWrapper: {
-        root: {
+        controlWrapper: {
           "--control-height": "40px",
           backgroundColor: "transparent",
           border: "none"
@@ -16382,7 +16371,7 @@
   var searchInputStyles$1 = {
     tweakInput: {
       tweakControlWrapper: {
-        root: {
+        controlWrapper: {
           "--control-height": "40px",
           backgroundColor: "transparent",
           border: "none"
@@ -18969,7 +18958,7 @@
   var searchInputStyles = {
     tweakInput: {
       tweakControlWrapper: {
-        root: {
+        controlWrapper: {
           "--control-height": "".concat(FILTER_HEIGHT - 2, "px"),
           backgroundColor: "transparent",
           border: "none",
@@ -28451,7 +28440,7 @@
   });
   var inputStyles$1 = {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         border: "none",
         height: "calc(var(--control-height) - 2px)"
       }
@@ -28726,7 +28715,7 @@
   });
   var inputStyles = {
     tweakControlWrapper: {
-      root: {
+      controlWrapper: {
         paddingLeft: COUNTRY_SELECT_WIDTH
       },
       label: {
@@ -30377,11 +30366,14 @@
         margin: 0
       }
     }),
+    wrapper: {
+      width: "100%"
+    },
     autoSized: {
       display: "grid",
       gridTemplateRows: "minmax(0, 100%)",
       "& > $textarea, &::after": {
-        gridArea: "1 / 2"
+        gridArea: "1 / 1"
       },
       "&::after": {
         extend: "textarea",
@@ -30582,9 +30574,9 @@
     var classes = useStyles$4({
       theme: tweakStyles
     });
-    var tweakControlGroupStyles = useTweakStyles({
+    var tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
-      className: "tweakControlGroup",
+      className: "tweakWithMessages",
       currentComponentName: "TextArea"
     });
     var tweakControlWrapperStyles = useTweakStyles({
@@ -30609,10 +30601,10 @@
       setFocused(false);
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     };
-    return /* @__PURE__ */ jsxs(ControlGroup, {
+    return /* @__PURE__ */ jsxs(WithMessages, {
       errorMessage,
       infoMessage,
-      tweakStyles: tweakControlGroupStyles,
+      tweakStyles: tweakWithMessagesStyles,
       children: [
         /* @__PURE__ */ jsx(ControlWrapper, _object_spread_props$5(_object_spread$5({
           label,
@@ -30623,8 +30615,9 @@
           isFullWidth: true,
           testId
         }, controlProps), {
-          children: /* @__PURE__ */ jsx("div", _object_spread_props$5(_object_spread$5({}, isAutoSized && {
-            className: classes.autoSized,
+          children: /* @__PURE__ */ jsx("div", _object_spread_props$5(_object_spread$5({
+            className: clsx(classes.wrapper, _define_property$5({}, classes.autoSized, isAutoSized))
+          }, isAutoSized && {
             "data-value": value
           }), {
             children: /* @__PURE__ */ jsx("textarea", _object_spread$5({
@@ -31487,7 +31480,6 @@
   exports2.Checkbox = Checkbox;
   exports2.CloseButton = CloseButton;
   exports2.Colors = Colors;
-  exports2.ControlGroup = ControlGroup;
   exports2.ControlWrapper = ControlWrapper;
   exports2.CssBaseline = CssBaseline;
   exports2.DEFAULT_PHONE_MASK = DEFAULT_PHONE_MASK;
@@ -31544,6 +31536,7 @@
   exports2.ThemedPreloader = ThemedPreloader;
   exports2.Toaster = Toaster;
   exports2.Tooltip = Tooltip;
+  exports2.WithMessages = WithMessages;
   exports2.WithPopup = WithPopup;
   exports2.WithTooltip = WithTooltip;
   exports2.addDataAttributes = addDataAttributes;