@micromag/element-text-input 0.3.676 → 0.3.683

package/es/index.js

@@ -3,7 +3,9 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
+import { usePlaceholderStyle } from '@micromag/core/hooks';
 import { getStyleFromMargin, getStyleFromText, getStyleFromBox } from '@micromag/core/utils';
 
 var styles = {"container":"micromag-element-text-input-container","element":"micromag-element-text-input-element"};
@@ -13,6 +15,7 @@ var propTypes = {
   labelOutside: PropTypes.bool,
   labelClassName: PropTypes.string,
   textStyle: PropTypes$1.textStyle,
+  placeholderTextStyle: PropTypes$1.textStyle,
   buttonStyle: PropTypes$1.boxStyle,
   labelOutsideStyle: PropTypes$1.textStyle,
   margin: PropTypes$1.margin,
@@ -31,6 +34,7 @@ var defaultProps = {
   labelOutside: false,
   labelClassName: null,
   textStyle: null,
+  placeholderTextStyle: null,
   buttonStyle: null,
   labelOutsideStyle: null,
   margin: null,
@@ -49,6 +53,7 @@ var TextInput = function TextInput(_ref) {
     labelOutside = _ref.labelOutside,
     labelClassName = _ref.labelClassName,
     textStyle = _ref.textStyle,
+    placeholderTextStyle = _ref.placeholderTextStyle,
     buttonStyle = _ref.buttonStyle,
     labelOutsideStyle = _ref.labelOutsideStyle,
     margin = _ref.margin,
@@ -64,6 +69,7 @@ var TextInput = function TextInput(_ref) {
   var containerStyle = {};
   var labelStyle = {};
   var elementStyle = {};
+  var placeholderStyle = {};
   if (margin !== null) {
     containerStyle = _objectSpread(_objectSpread({}, containerStyle), getStyleFromMargin(margin));
   }
@@ -76,6 +82,9 @@ var TextInput = function TextInput(_ref) {
   if (buttonStyle !== null) {
     elementStyle = _objectSpread(_objectSpread({}, elementStyle), getStyleFromBox(buttonStyle));
   }
+  if (placeholderTextStyle !== null) {
+    placeholderStyle = _objectSpread(_objectSpread({}, placeholderStyle), getStyleFromText(placeholderTextStyle));
+  }
   var containerProps = {
     className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.element, !labelOutside)]),
     style: containerStyle
@@ -92,16 +101,21 @@ var TextInput = function TextInput(_ref) {
     required: required,
     disabled: disabled
   });
+
+  // console.log('elementStyle', elementStyle);
+
   var element = multiline ? /*#__PURE__*/React.createElement("textarea", Object.assign({}, elementProps, {
     tabIndex: focusable ? '0' : '-1'
   })) : /*#__PURE__*/React.createElement("input", Object.assign({}, elementProps, {
     type: "text",
     tabIndex: focusable ? '0' : '-1'
   }));
-  return !labelOutside ? element : /*#__PURE__*/React.createElement("label", containerProps, /*#__PURE__*/React.createElement("div", {
+  var placeholderStyles = usePlaceholderStyle(styles.element, placeholderStyle);
+  var placeholderStyleElement = /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("style", null, placeholderStyles));
+  return !labelOutside ? /*#__PURE__*/React.createElement(React.Fragment, null, element, placeholderStyleElement) : /*#__PURE__*/React.createElement("label", containerProps, /*#__PURE__*/React.createElement("div", {
     className: labelClassName,
     style: labelStyle
-  }, label), element);
+  }, label), element, placeholderStyleElement);
 };
 TextInput.propTypes = propTypes;
 TextInput.defaultProps = defaultProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-text-input",
-    "version": "0.3.676",
+    "version": "0.3.683",
     "private": false,
     "description": "",
     "keywords": [
@@ -59,13 +59,14 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.676",
+        "@micromag/core": "^0.3.679",
         "classnames": "^2.2.6",
-        "prop-types": "^15.7.2"
+        "prop-types": "^15.7.2",
+        "react-helmet": "^6.1.0"
     },
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "941f3a10c4de917c02ca81f39e6d15a85094e289"
+    "gitHead": "758c665c2a62aba2e46bde9d80903232bfefd6dd"
 }