@storybook/design-system - npm Package Compare versions

Comparing version 5.4.6 to 5.4.7-canary.56c1f3a.0

dist/components/Textarea.js

@@ -10,6 +10,8 @@ "use strict";
 });
-exports.Textarea = Textarea;
+exports.Textarea = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -19,3 +21,3 @@
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -230,14 +232,45 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function Textarea(_ref) {
-  var id = _ref.id,
-      value = _ref.value,
-      label = _ref.label,
-      hideLabel = _ref.hideLabel,
-      error = _ref.error,
-      subtext = _ref.subtext,
-      subtextSentiment = _ref.subtextSentiment,
-      appearance = _ref.appearance,
-      orientation = _ref.orientation,
-      className = _ref.className,
-      other = (0, _objectWithoutProperties2["default"])(_ref, ["id", "value", "label", "hideLabel", "error", "subtext", "subtextSentiment", "appearance", "orientation", "className"]);
+var getErrorMessage = function getErrorMessage(_ref) {
+  var error = _ref.error,
+      value = _ref.value;
+  return typeof error === 'function' ? error(value) : error;
+};
+
+var Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var id = _ref2.id,
+      value = _ref2.value,
+      label = _ref2.label,
+      hideLabel = _ref2.hideLabel,
+      error = _ref2.error,
+      subtext = _ref2.subtext,
+      subtextSentiment = _ref2.subtextSentiment,
+      appearance = _ref2.appearance,
+      orientation = _ref2.orientation,
+      className = _ref2.className,
+      startFocused = _ref2.startFocused,
+      rest = (0, _objectWithoutProperties2["default"])(_ref2, ["id", "value", "label", "hideLabel", "error", "subtext", "subtextSentiment", "appearance", "orientation", "className", "startFocused"]);
+  // Outside refs take precedence
+  var textareaRef = ref || (0, _react.useRef)();
+  var didFocusOnStart = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (textareaRef && textareaRef.current && startFocused && !didFocusOnStart.current) {
+      textareaRef.current.focus();
+      didFocusOnStart.current = true;
+    }
+  }, [textareaRef, textareaRef.current, didFocusOnStart, didFocusOnStart.current]);
+
+  var _useState = (0, _react.useState)(getErrorMessage({
+    error: error,
+    value: value
+  })),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      errorMessage = _useState2[0],
+      setErrorMessage = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setErrorMessage(getErrorMessage({
+      error: error,
+      value: value
+    }));
+  }, [value, error]);
   var errorId = "".concat(id, "-error");
@@ -252,11 +285,11 @@ var subtextId = "".concat(id, "-subtext");
     hideLabel: hideLabel,
-    error: error
+    error: errorMessage
   }, /*#__PURE__*/_react["default"].createElement(Label, {
     htmlFor: id,
     hideLabel: hideLabel
-  }, label), error && /*#__PURE__*/_react["default"].createElement(ErrorMessage, {
+  }, label), errorMessage && /*#__PURE__*/_react["default"].createElement(ErrorMessage, {
     id: errorId,
     "aria-hidden": true
-  }, error)), /*#__PURE__*/_react["default"].createElement(TextareaWrapper, {
-    error: error,
+  }, errorMessage)), /*#__PURE__*/_react["default"].createElement(TextareaWrapper, {
+    error: errorMessage,
     appearance: appearance
@@ -268,9 +301,10 @@ }, /*#__PURE__*/_react["default"].createElement(TextareaText, (0, _extends2["default"])({
     "aria-invalid": !!error,
-    "aria-describedby": ariaDescribedBy
-  }, other)), subtext && /*#__PURE__*/_react["default"].createElement(Subtext, {
+    "aria-describedby": ariaDescribedBy,
+    ref: textareaRef
+  }, rest)), subtext && /*#__PURE__*/_react["default"].createElement(Subtext, {
     id: subtextId,
     sentiment: subtextSentiment
   }, subtext)));
-}
-
+});
+exports.Textarea = Textarea;
 Textarea.propTypes = {
@@ -284,2 +318,3 @@ id: _propTypes["default"].string.isRequired,
   error: _propTypes["default"].string,
+  startFocused: _propTypes["default"].bool,
   subtext: _propTypes["default"].string,
@@ -294,2 +329,3 @@ subtextSentiment: _propTypes["default"].oneOf(['default', 'negative', 'warning']),
   error: null,
+  startFocused: false,
   subtext: null,
@@ -296,0 +332,0 @@ subtextSentiment: 'default',

package.json

 {
   "name": "@storybook/design-system",
-  "version": "5.4.6",
+  "version": "5.4.7-canary.56c1f3a.0",
   "description": "Storybook design system",
@@ -5,0 +5,0 @@ "repository": {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

508912

increased by0.27%

Lines of code

7660

increased by0.43%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes