@bonio-ui/components - npm Package Compare versions

Comparing version 7.1.0 to 7.2.0

dist/textarea/Textarea.js

@@ -14,3 +14,3 @@ "use strict";
 
-var _excluded = ["minHeight", "onChange"];
+var _excluded = ["className", "minHeight", "onChange", "label", "showCount", "max", "extra", "status"];
 
@@ -31,7 +31,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   var {
+    className,
     minHeight,
-    onChange
+    onChange,
+    label,
+    showCount,
+    max,
+    extra,
+    status
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 
+  var defaultRef = (0, _react.useRef)();
+  var textareaRef = ref || defaultRef;
+  var {
+    value
+  } = props;
+  var [valueLength, setValueLength] = (0, _react.useState)((value === null || value === void 0 ? void 0 : value.length) || 0);
+  var controlled = value !== undefined && value !== null;
+
   function adjustHeight(e) {
@@ -47,9 +61,33 @@ e.target.style.height = 0;
 
+    if (controlled) return;
+    setValueLength(e.target.value.length);
     adjustHeight(e);
   }
 
+  (0, _react.useEffect)(() => {
+    if (!controlled) return;
+    setValueLength(value.length);
+    textareaRef.current.style.height = 'auto';
+    textareaRef.current.style.height = "".concat(textareaRef.current.scrollHeight, "px");
+  }, [value, textareaRef, controlled]);
+
+  if (label || showCount || extra) {
+    return /*#__PURE__*/_react.default.createElement(_Textarea.Container, {
+      className: className
+    }, (label || showCount) && /*#__PURE__*/_react.default.createElement(_Textarea.UpperSection, null, label && /*#__PURE__*/_react.default.createElement(_Textarea.Label, null, label), showCount && /*#__PURE__*/_react.default.createElement(_Textarea.Counter, null, valueLength, "/", max)), /*#__PURE__*/_react.default.createElement(_Textarea.Textarea, _extends({
+      ref: textareaRef,
+      minHeight: minHeight,
+      onChange: handleChange,
+      status: status
+    }, props)), /*#__PURE__*/_react.default.createElement(_Textarea.Extra, {
+      status: status
+    }, extra));
+  }
+
   return /*#__PURE__*/_react.default.createElement(_Textarea.Textarea, _extends({
-    ref: ref,
+    className: className,
+    ref: textareaRef,
     minHeight: minHeight,
-    onChange: handleChange
+    onChange: handleChange,
+    status: status
   }, props));
@@ -59,4 +97,11 @@ });
 Textarea.propTypes = {
+  className: _propTypes.default.string,
   minHeight: _propTypes.default.number.isRequired,
-  onChange: _propTypes.default.func
+  onChange: _propTypes.default.func,
+  value: _propTypes.default.string,
+  label: _propTypes.default.node,
+  showCount: _propTypes.default.bool,
+  max: _propTypes.default.number,
+  extra: _propTypes.default.node,
+  status: _propTypes.default.oneOf(['error'])
 };

dist/textarea/Textarea.style.js

@@ -6,5 +6,5 @@ "use strict";
 });
-exports.Textarea = void 0;
+exports.Textarea = exports.borderStyles = exports.Extra = exports.Counter = exports.Label = exports.UpperSection = exports.Container = void 0;
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -17,23 +17,60 @@ var _theme = require("@bonio-ui/theme");
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var {
-  body1
+  body1,
+  body2,
+  subhead2
 } = _theme.typography;
 var {
   gray,
-  black
+  black,
+  alert
 } = _theme.color;
 
-var Textarea = _styledComponents.default.textarea(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  \n  width: 100%;\n  min-height: ", ";\n  padding: 0.5rem 0.625rem;\n  border-radius: 0.3125rem;\n  border: none;\n  ", "\n  background-color: ", ";\n  color: ", ";\n  resize: none;\n  ", "\n  transition-property: box-shadow, background, color;\n  transition-duration: ", "ms;\n  transition-timing-function: ", ";\n  overflow-y: hidden;\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :hover {\n    ", "\n  }\n\n  :focus {\n    outline: none;\n    ", "\n  }\n\n  :disabled {\n    ", "\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  :read-only {\n    ", "\n    background-color: ", ";\n  }\n"])), _theme.fontFamily, _theme.boxSizing, _ref => {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n"])));
+
+exports.Container = Container;
+
+var UpperSection = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 0.5rem;\n  margin-bottom: 0.5rem;\n"])));
+
+exports.UpperSection = UpperSection;
+
+var Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"])), gray[900], subhead2);
+
+exports.Label = Label;
+
+var Counter = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n  margin-left: auto;\n"])), gray[600], body2);
+
+exports.Counter = Counter;
+
+var Extra = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  margin-top: 0.25rem;\n  ", "\n"])), body1, _ref => {
   var {
+    status
+  } = _ref;
+  return status === 'error' && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), alert);
+});
+
+exports.Extra = Extra;
+var borderStyles = (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  border: none;\n\n  ", "\n"])), _ref2 => {
+  var {
+    status
+  } = _ref2;
+  return status === 'error' ? (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          ", "\n        "])), (0, _innerBorder.innerBorder)(1, alert)) : (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          ", "\n\n          :hover {\n            ", "\n          }\n\n          :focus {\n            ", "\n          }\n\n          :disabled {\n            ", "\n          }\n\n          :read-only {\n            ", "\n          }\n        "])), (0, _innerBorder.innerBorder)(1, gray[200]), (0, _innerBorder.innerBorder)(1, gray[600]), (0, _innerBorder.innerBorder)(1, gray[900]), (0, _innerBorder.innerBorder)(0), (0, _innerBorder.innerBorder)(0));
+});
+exports.borderStyles = borderStyles;
+
+var Textarea = _styledComponents.default.textarea(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  \n  width: 100%;\n  min-height: ", ";\n  padding: 0.5rem 0.625rem;\n  border-radius: 0.3125rem;\n  background-color: ", ";\n  color: ", ";\n  resize: none;\n  ", "\n  transition-property: box-shadow, background, color;\n  transition-duration: ", "ms;\n  transition-timing-function: ", ";\n  overflow-y: hidden;\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  :disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n\n  :read-only {\n    background-color: ", ";\n  }\n\n  ", "\n"])), _theme.fontFamily, _theme.boxSizing, _ref3 => {
+  var {
     minHeight
-  } = _ref;
+  } = _ref3;
   return "".concat(minHeight, "px");
-}, (0, _innerBorder.innerBorder)(1, gray[200]), gray[50], black, body1, _transition.EASE_OUT_300.duration, _transition.EASE_OUT_300.timingFunction, gray[400], (0, _innerBorder.innerBorder)(1, gray[600]), (0, _innerBorder.innerBorder)(1, gray[900]), (0, _innerBorder.innerBorder)(0), gray[100], gray[400], (0, _innerBorder.innerBorder)(0), gray[100]);
+}, gray[50], black, body1, _transition.EASE_OUT_300.duration, _transition.EASE_OUT_300.timingFunction, gray[400], gray[100], gray[400], gray[100], borderStyles);
 
 exports.Textarea = Textarea;

package.json

 {
   "name": "@bonio-ui/components",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "license": "Apache-2.0",
@@ -5,0 +5,0 @@ "description": "BoniO UI components in React",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

269110

increased by1.94%

Lines of code

4524

increased by1.64%

No dependency changes