@pingux/astro 1.5.0 → 1.5.1-alpha.0

package/lib/cjs/components/TextAreaField/TextAreaField.js

@@ -80,6 +80,7 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var textAreaRef = (0, _react.useRef)();
   var labelRef = (0, _react.useRef)();
+  var labelWrapperRef = (0, _react.useRef)();
   var containerRef = (0, _react.useRef)();
   var inputContainerRef = (0, _react.useRef)();
   var slotContainer = (0, _react.useRef)();
@@ -94,6 +95,7 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var resizeFloatLabel = function resizeFloatLabel() {
     /* istanbul ignore next */
     labelRef.current.style.width = textAreaRef.current.style.width;
+    labelWrapperRef.current.style.width = "".concat(textAreaRef.current.clientWidth - 2, "px");
   };
   /* istanbul ignore next */
 
@@ -134,19 +136,24 @@ var TextAreaField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       thisRef.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     };
   }, [props.isUnresizable, props.labelMode, props.resizeCallback]);
+  var labelNode = (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({
+    ref: labelRef
+  }, fieldLabelProps, {
+    sx: isLabelHigher && {
+      gridRow: '1/5'
+    }
+  }));
+  var wrappedLabel = (0, _react2.jsx)(_Box["default"], {
+    variant: "boxes.floatLabelWrapper",
+    ref: labelWrapperRef
+  }, labelNode);
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "forms.input.wrapper"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
     ref: containerRef,
     maxWidth: "100%"
-  }), (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({
-    ref: labelRef
-  }, fieldLabelProps, {
-    sx: isLabelHigher && {
-      gridRow: '1/5'
-    }
-  })), (0, _react2.jsx)(_Box["default"], {
+  }), props.labelMode === 'float' ? wrappedLabel : labelNode, (0, _react2.jsx)(_Box["default"], {
     isRow: true,
     variant: "forms.input.container",
     className: fieldControlProps.className,

package/lib/cjs/styles/variants/boxes.js

@@ -299,6 +299,14 @@ var fileInputFieldWrapper = {
     alignItems: 'center'
   }
 };
+var floatLabelWrapper = {
+  backgroundColor: 'white',
+  position: 'relative',
+  height: '17px',
+  bottom: '-18px',
+  left: '3px',
+  zIndex: 2
+};
 var _default = {
   base: base,
   card: card,
@@ -317,6 +325,7 @@ var _default = {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox
+  bottomShadowScrollbox: bottomShadowScrollbox,
+  floatLabelWrapper: floatLabelWrapper
 };
 exports["default"] = _default;

package/lib/components/TextAreaField/TextAreaField.js

@@ -47,6 +47,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var textAreaRef = useRef();
   var labelRef = useRef();
+  var labelWrapperRef = useRef();
   var containerRef = useRef();
   var inputContainerRef = useRef();
   var slotContainer = useRef();
@@ -61,6 +62,7 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   var resizeFloatLabel = function resizeFloatLabel() {
     /* istanbul ignore next */
     labelRef.current.style.width = textAreaRef.current.style.width;
+    labelWrapperRef.current.style.width = "".concat(textAreaRef.current.clientWidth - 2, "px");
   };
   /* istanbul ignore next */
 
@@ -101,19 +103,27 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
       thisRef.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     };
   }, [props.isUnresizable, props.labelMode, props.resizeCallback]);
+
+  var labelNode = ___EmotionJSX(Label, _extends({
+    ref: labelRef
+  }, fieldLabelProps, {
+    sx: isLabelHigher && {
+      gridRow: '1/5'
+    }
+  }));
+
+  var wrappedLabel = ___EmotionJSX(Box, {
+    variant: "boxes.floatLabelWrapper",
+    ref: labelWrapperRef
+  }, labelNode);
+
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.wrapper"
   }, fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx),
     ref: containerRef,
     maxWidth: "100%"
-  }), ___EmotionJSX(Label, _extends({
-    ref: labelRef
-  }, fieldLabelProps, {
-    sx: isLabelHigher && {
-      gridRow: '1/5'
-    }
-  })), ___EmotionJSX(Box, {
+  }), props.labelMode === 'float' ? wrappedLabel : labelNode, ___EmotionJSX(Box, {
     isRow: true,
     variant: "forms.input.container",
     className: fieldControlProps.className,

package/lib/styles/variants/boxes.js

@@ -277,6 +277,14 @@ var fileInputFieldWrapper = {
     alignItems: 'center'
   }
 };
+var floatLabelWrapper = {
+  backgroundColor: 'white',
+  position: 'relative',
+  height: '17px',
+  bottom: '-18px',
+  left: '3px',
+  zIndex: 2
+};
 export default {
   base: base,
   card: card,
@@ -295,5 +303,6 @@ export default {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox
+  bottomShadowScrollbox: bottomShadowScrollbox,
+  floatLabelWrapper: floatLabelWrapper
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.5.0",
+  "version": "1.5.1-alpha.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",