@kaizen/components 1.67.3 → 1.67.5

package/dist/cjs/TextArea/TextArea.cjs

@@ -3,7 +3,7 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var TextArea_module = require('./TextArea.module.scss.cjs');
+var TextArea_module = require('./TextArea.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -12,77 +12,45 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var TextArea = function (_a) {
+  var _b, _c;
   var propsTextAreaRef = _a.textAreaRef,
-    _b = _a.status,
-    status = _b === void 0 ? "default" : _b,
-    _c = _a.autogrow,
-    autogrow = _c === void 0 ? false : _c,
-    _d = _a.reversed,
-    reversed = _d === void 0 ? false : _d,
-    _e = _a.rows,
-    rows = _e === void 0 ? 3 : _e,
+    _d = _a.status,
+    status = _d === void 0 ? "default" : _d,
+    _e = _a.autogrow,
+    autogrow = _e === void 0 ? false : _e,
+    _f = _a.reversed,
+    reversed = _f === void 0 ? false : _f,
+    _g = _a.rows,
+    rows = _g === void 0 ? 3 : _g,
     defaultValue = _a.defaultValue,
     value = _a.value,
     disabled = _a.disabled,
     propsOnChange = _a.onChange,
     restProps = tslib.__rest(_a, ["textAreaRef", "status", "autogrow", "reversed", "rows", "defaultValue", "value", "disabled", "onChange"]);
-  var _f = React.useState("auto"),
-    textAreaHeight = _f[0],
-    setTextAreaHeight = _f[1];
-  var _g = React.useState("auto"),
-    parentHeight = _g[0],
-    setParentHeight = _g[1];
-  var _h = React.useState(autogrow ? defaultValue : undefined),
+  var _h = React.useState(autogrow && !value ? defaultValue : undefined),
     internalValue = _h[0],
     setInternalValue = _h[1];
   // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-  // essentially forces the textarea into an (interally) controlled mode if autogrow is true
+  // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
+  var controlledValue = value || internalValue;
   var textAreaRef = propsTextAreaRef || React.useRef(null);
-  React.useEffect(function () {
-    if (!autogrow) return;
-    var scrollHeight = textAreaRef.current.scrollHeight;
-    if (scrollHeight < 1) return;
-    var borderWidth = textAreaRef.current ? parseInt(getComputedStyle(textAreaRef.current).borderTopWidth, 10) : 0;
-    var newHeight = scrollHeight + borderWidth * 2;
-    setParentHeight("".concat(newHeight, "px"));
-    setTextAreaHeight("".concat(newHeight, "px"));
-  }, [internalValue]);
-  var onChange = !autogrow ? undefined : function (event) {
-    setTextAreaHeight("auto");
-    // ^ this is required to avoid the textarea height from building up indefinitely
-    // see https://medium.com/@lucasalgus/creating-a-custom-auto-resize-textarea-component-for-your-react-web-application-6959c0ad68bc#2dee
+  var onChange = function (event) {
+    propsOnChange && propsOnChange(event);
     setInternalValue(event.target.value);
-    if (propsOnChange) {
-      propsOnChange(event);
-    }
-  };
-  var getWrapperStyle = function () {
-    return autogrow ? {
-      minHeight: parentHeight
-    } : undefined;
   };
-  var getTextAreaStyle = function () {
-    return autogrow ? {
-      height: textAreaHeight
-    } : undefined;
-  };
-  var controlledValue = value || internalValue;
   return React__default.default.createElement("div", {
-    className: TextArea_module.wrapper,
-    style: getWrapperStyle()
+    className: classnames__default.default(TextArea_module.wrapper, (_b = {}, _b[TextArea_module.wrapperAutogrow] = autogrow, _b)),
+    "data-value": autogrow ? controlledValue : undefined
   }, React__default.default.createElement("textarea", tslib.__assign({
-    className: classnames__default.default(TextArea_module.textarea, TextArea_module[status], reversed ? TextArea_module.reversed : TextArea_module.default, disabled && TextArea_module.disabled),
+    className: classnames__default.default(TextArea_module.textarea, TextArea_module[status], reversed ? TextArea_module.reversed : TextArea_module.default, (_c = {}, _c[TextArea_module.disabled] = disabled, _c[TextArea_module.textareaAutogrow] = autogrow, _c)),
     rows: rows,
-    onChange: onChange || propsOnChange,
+    onChange: onChange,
     value: controlledValue,
     defaultValue: controlledValue ? undefined : defaultValue,
     // ^ React throws a warning if you specify both a value and a defaultValue
     ref: textAreaRef,
-    style: getTextAreaStyle(),
     disabled: disabled
-  }, restProps)), React__default.default.createElement("div", {
-    className: TextArea_module.focusRing
-  }));
+  }, restProps)));
 };
 TextArea.displayName = "TextArea";
 exports.TextArea = TextArea;

package/dist/cjs/TextArea/TextArea.module.css.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var styles = {
+  "wrapper": "TextArea-module_wrapper__FHfMG",
+  "wrapperAutogrow": "TextArea-module_wrapperAutogrow__f46bL",
+  "textarea": "TextArea-module_textarea__Ht-1a",
+  "textareaAutogrow": "TextArea-module_textareaAutogrow__ReEar",
+  "default": "TextArea-module_default__e1cis",
+  "error": "TextArea-module_error__bBmvS",
+  "caution": "TextArea-module_caution__aj4nR",
+  "disabled": "TextArea-module_disabled__XY39a",
+  "reversed": "TextArea-module_reversed__r-W3e"
+};
+module.exports = styles;

package/dist/esm/TextArea/TextArea.mjs

@@ -1,80 +1,48 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import classnames from 'classnames';
-import styles from './TextArea.module.scss.mjs';
+import styles from './TextArea.module.css.mjs';
 const TextArea = /*#__PURE__*/function () {
   const TextArea = function (_a) {
+    var _b, _c;
     var propsTextAreaRef = _a.textAreaRef,
-      _b = _a.status,
-      status = _b === void 0 ? "default" : _b,
-      _c = _a.autogrow,
-      autogrow = _c === void 0 ? false : _c,
-      _d = _a.reversed,
-      reversed = _d === void 0 ? false : _d,
-      _e = _a.rows,
-      rows = _e === void 0 ? 3 : _e,
+      _d = _a.status,
+      status = _d === void 0 ? "default" : _d,
+      _e = _a.autogrow,
+      autogrow = _e === void 0 ? false : _e,
+      _f = _a.reversed,
+      reversed = _f === void 0 ? false : _f,
+      _g = _a.rows,
+      rows = _g === void 0 ? 3 : _g,
       defaultValue = _a.defaultValue,
       value = _a.value,
       disabled = _a.disabled,
       propsOnChange = _a.onChange,
       restProps = __rest(_a, ["textAreaRef", "status", "autogrow", "reversed", "rows", "defaultValue", "value", "disabled", "onChange"]);
-    var _f = useState("auto"),
-      textAreaHeight = _f[0],
-      setTextAreaHeight = _f[1];
-    var _g = useState("auto"),
-      parentHeight = _g[0],
-      setParentHeight = _g[1];
-    var _h = useState(autogrow ? defaultValue : undefined),
+    var _h = useState(autogrow && !value ? defaultValue : undefined),
       internalValue = _h[0],
       setInternalValue = _h[1];
     // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-    // essentially forces the textarea into an (interally) controlled mode if autogrow is true
+    // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
+    var controlledValue = value || internalValue;
     var textAreaRef = propsTextAreaRef || useRef(null);
-    useEffect(function () {
-      if (!autogrow) return;
-      var scrollHeight = textAreaRef.current.scrollHeight;
-      if (scrollHeight < 1) return;
-      var borderWidth = textAreaRef.current ? parseInt(getComputedStyle(textAreaRef.current).borderTopWidth, 10) : 0;
-      var newHeight = scrollHeight + borderWidth * 2;
-      setParentHeight("".concat(newHeight, "px"));
-      setTextAreaHeight("".concat(newHeight, "px"));
-    }, [internalValue]);
-    var onChange = !autogrow ? undefined : function (event) {
-      setTextAreaHeight("auto");
-      // ^ this is required to avoid the textarea height from building up indefinitely
-      // see https://medium.com/@lucasalgus/creating-a-custom-auto-resize-textarea-component-for-your-react-web-application-6959c0ad68bc#2dee
+    var onChange = function (event) {
+      propsOnChange && propsOnChange(event);
       setInternalValue(event.target.value);
-      if (propsOnChange) {
-        propsOnChange(event);
-      }
-    };
-    var getWrapperStyle = function () {
-      return autogrow ? {
-        minHeight: parentHeight
-      } : undefined;
     };
-    var getTextAreaStyle = function () {
-      return autogrow ? {
-        height: textAreaHeight
-      } : undefined;
-    };
-    var controlledValue = value || internalValue;
     return /*#__PURE__*/React.createElement("div", {
-      className: styles.wrapper,
-      style: getWrapperStyle()
+      className: classnames(styles.wrapper, (_b = {}, _b[styles.wrapperAutogrow] = autogrow, _b)),
+      "data-value": autogrow ? controlledValue : undefined
     }, /*#__PURE__*/React.createElement("textarea", __assign({
-      className: classnames(styles.textarea, styles[status], reversed ? styles.reversed : styles.default, disabled && styles.disabled),
+      className: classnames(styles.textarea, styles[status], reversed ? styles.reversed : styles.default, (_c = {}, _c[styles.disabled] = disabled, _c[styles.textareaAutogrow] = autogrow, _c)),
       rows: rows,
-      onChange: onChange || propsOnChange,
+      onChange: onChange,
       value: controlledValue,
       defaultValue: controlledValue ? undefined : defaultValue,
       // ^ React throws a warning if you specify both a value and a defaultValue
       ref: textAreaRef,
-      style: getTextAreaStyle(),
       disabled: disabled
-    }, restProps)), /*#__PURE__*/React.createElement("div", {
-      className: styles.focusRing
-    }));
+    }, restProps)));
   };
   TextArea.displayName = "TextArea";
   return TextArea;

package/dist/esm/TextArea/TextArea.module.css.mjs

@@ -0,0 +1,12 @@
+var styles = {
+  "wrapper": "TextArea-module_wrapper__FHfMG",
+  "wrapperAutogrow": "TextArea-module_wrapperAutogrow__f46bL",
+  "textarea": "TextArea-module_textarea__Ht-1a",
+  "textareaAutogrow": "TextArea-module_textareaAutogrow__ReEar",
+  "default": "TextArea-module_default__e1cis",
+  "error": "TextArea-module_error__bBmvS",
+  "caution": "TextArea-module_caution__aj4nR",
+  "disabled": "TextArea-module_disabled__XY39a",
+  "reversed": "TextArea-module_reversed__r-W3e"
+};
+export { styles as default };