@zohodesk/components 1.0.0-temp-211.2 → 1.0.0-temp-217

package/lib/Responsive/ResizeObserver.js

@@ -11,59 +11,31 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-var hasResizeObserver = !!window.ResizeObserver;
-var mutationObserverOptions = {
-  //NOTE: we donot consider child Count
-  // childList: true,
-  attributes: true
-};
-
-function getSize(element) {
-  var offsetHeight = element.offsetHeight,
-      offsetWidth = element.offsetWidth; // const { height, width } = element.getBoundingClientRect();
+function getBorderBoxSizeFromEntry(entry) {
+  var borderBoxSize = entry.borderBoxSize;
+  return borderBoxSize[0];
+}
 
+function getSize(entry) {
+  var borderBoxSize = getBorderBoxSizeFromEntry(entry);
   return {
-    height: offsetHeight,
-    width: offsetWidth
+    height: borderBoxSize.blockSize,
+    width: borderBoxSize.inlineSize
   };
 }
 
-function dispatch() {
-  var resizeResponsive = new Event('resizeResponsive');
-  window.dispatchEvent(resizeResponsive);
-}
-
-if (!hasResizeObserver) {
-  var interval = null;
-  window.addEventListener('resize', function () {
-    clearTimeout(interval);
-    interval = setTimeout(dispatch, 100);
-  });
-} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
-
-
 var ResizeObserverPolyfill = /*#__PURE__*/function () {
   function ResizeObserverPolyfill(onResize) {
     _classCallCheck(this, ResizeObserverPolyfill);
 
-    // method finding
-    this.transitionEndHandler = this.transitionEndHandler.bind(this);
-    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
     this.resizeHandler = this.resizeHandler.bind(this);
-    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
-    this.debounce = this.debounce.bind(this);
     this.onResize = onResize;
     this.targetNode = null;
     this.size = {
       height: 0,
       width: 0
     };
-
-    if (hasResizeObserver) {
-      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
-    } else {
-      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
-    }
+    this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandler);
   }
 
   _createClass(ResizeObserverPolyfill, [{
@@ -71,14 +43,20 @@ var ResizeObserverPolyfill = /*#__PURE__*/function () {
     value: function replaceResizeHandler(onResize) {
       this.onResize = onResize;
     }
+  }, {
+    key: "getEntry",
+    value: function getEntry(entries) {
+      return entries[0];
+    }
   }, {
     key: "resizeHandler",
-    value: function resizeHandler() {
-      if (!this.targetNode) {
+    value: function resizeHandler(entries) {
+      if (!this.targetNode || !entries.length) {
         return;
       }
 
-      var currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+      var entry = this.getEntry(entries);
+      var currentSize = getSize(entry);
 
       if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
         return;
@@ -88,55 +66,11 @@ var ResizeObserverPolyfill = /*#__PURE__*/function () {
       this.onResize(this.size, this.targetNode);
       return true;
     }
-  }, {
-    key: "resizeHandlerDispatch",
-    value: function resizeHandlerDispatch() {
-      if (!this.resizeHandler() || hasResizeObserver) {
-        return;
-      }
-
-      dispatch();
-    }
-  }, {
-    key: "debounce",
-    value: function debounce() {
-      clearTimeout(this.interval);
-      this.interval = setTimeout(this.resizeHandler, 100);
-    }
-  }, {
-    key: "transitionEndHandler",
-    value: function transitionEndHandler(event) {
-      if (event.propertyName.indexOf('color') === -1) {
-        this.resizeHandlerDispatch();
-      }
-    }
-  }, {
-    key: "addEventListeners",
-    value: function addEventListeners(targetNode) {
-      targetNode.addEventListener('transitionend', this.transitionEndHandler);
-      window.addEventListener('resizeResponsive', this.debounce);
-      targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
-      targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
-    }
-  }, {
-    key: "removeEventListeners",
-    value: function removeEventListeners(targetNode) {
-      targetNode.removeEventListener('transitionend', this.transitionEndHandler);
-      window.removeEventListener('resizeResponsive', this.debounce);
-      targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
-      targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
-    }
   }, {
     key: "observe",
     value: function observe(targetNode) {
       this.targetNode = targetNode;
-
-      if (hasResizeObserver) {
-        this.resizeObserverInstance.observe(targetNode);
-      } else {
-        this.addEventListeners(targetNode);
-        this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
-      }
+      this.resizeObserverInstance.observe(targetNode);
     }
   }, {
     key: "replaceObservationElement",
@@ -147,13 +81,11 @@ var ResizeObserverPolyfill = /*#__PURE__*/function () {
 
       this.targetNode && this.disconnect();
       targetNode && this.observe(targetNode);
-      targetNode && this.resizeHandlerDispatch();
     }
   }, {
     key: "disconnect",
     value: function disconnect() {
-      this.targetNode && this.removeEventListeners(this.targetNode);
-      hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
+      this.resizeObserverInstance.disconnect();
       this.targetNode = null;
       this.size = {
         height: 0,

package/lib/Responsive/ResizeObserverWithPolyfill.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+var hasResizeObserver = !!window.ResizeObserver;
+var mutationObserverOptions = {
+  //NOTE: we donot consider child Count
+  // childList: true,
+  attributes: true
+};
+
+function getSize(element) {
+  var offsetHeight = element.offsetHeight,
+      offsetWidth = element.offsetWidth; // const { height, width } = element.getBoundingClientRect();
+
+  return {
+    height: offsetHeight,
+    width: offsetWidth
+  };
+}
+
+function dispatch() {
+  var resizeResponsive = new Event('resizeResponsive');
+  window.dispatchEvent(resizeResponsive);
+}
+
+if (!hasResizeObserver) {
+  var interval = null;
+  window.addEventListener('resize', function () {
+    clearTimeout(interval);
+    interval = setTimeout(dispatch, 100);
+  });
+} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
+
+
+var ResizeObserverPolyfill = /*#__PURE__*/function () {
+  function ResizeObserverPolyfill(onResize) {
+    _classCallCheck(this, ResizeObserverPolyfill);
+
+    // method finding
+    this.transitionEndHandler = this.transitionEndHandler.bind(this);
+    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
+    this.resizeHandler = this.resizeHandler.bind(this);
+    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
+    this.debounce = this.debounce.bind(this);
+    this.onResize = onResize;
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+
+    if (hasResizeObserver) {
+      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
+    } else {
+      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
+    }
+  }
+
+  _createClass(ResizeObserverPolyfill, [{
+    key: "replaceResizeHandler",
+    value: function replaceResizeHandler(onResize) {
+      this.onResize = onResize;
+    }
+  }, {
+    key: "resizeHandler",
+    value: function resizeHandler() {
+      if (!this.targetNode) {
+        return;
+      }
+
+      var currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+
+      if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
+        return;
+      }
+
+      this.size = currentSize;
+      this.onResize(this.size, this.targetNode);
+      return true;
+    }
+  }, {
+    key: "resizeHandlerDispatch",
+    value: function resizeHandlerDispatch() {
+      if (!this.resizeHandler() || hasResizeObserver) {
+        return;
+      }
+
+      dispatch();
+    }
+  }, {
+    key: "debounce",
+    value: function debounce() {
+      clearTimeout(this.interval);
+      this.interval = setTimeout(this.resizeHandler, 100);
+    }
+  }, {
+    key: "transitionEndHandler",
+    value: function transitionEndHandler(event) {
+      if (event.propertyName.indexOf('color') === -1) {
+        this.resizeHandlerDispatch();
+      }
+    }
+  }, {
+    key: "addEventListeners",
+    value: function addEventListeners(targetNode) {
+      targetNode.addEventListener('transitionend', this.transitionEndHandler);
+      window.addEventListener('resizeResponsive', this.debounce);
+      targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
+      targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+    }
+  }, {
+    key: "removeEventListeners",
+    value: function removeEventListeners(targetNode) {
+      targetNode.removeEventListener('transitionend', this.transitionEndHandler);
+      window.removeEventListener('resizeResponsive', this.debounce);
+      targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
+      targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+    }
+  }, {
+    key: "observe",
+    value: function observe(targetNode) {
+      this.targetNode = targetNode;
+
+      if (hasResizeObserver) {
+        this.resizeObserverInstance.observe(targetNode);
+      } else {
+        this.addEventListeners(targetNode);
+        this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
+      }
+    }
+  }, {
+    key: "replaceObservationElement",
+    value: function replaceObservationElement(targetNode) {
+      if (this.targetNode === targetNode) {
+        return;
+      }
+
+      this.targetNode && this.disconnect();
+      targetNode && this.observe(targetNode);
+      targetNode && this.resizeHandlerDispatch();
+    }
+  }, {
+    key: "disconnect",
+    value: function disconnect() {
+      this.targetNode && this.removeEventListeners(this.targetNode);
+      hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
+      this.targetNode = null;
+      this.size = {
+        height: 0,
+        width: 0
+      };
+    }
+  }]);
+
+  return ResizeObserverPolyfill;
+}();
+
+exports["default"] = ResizeObserverPolyfill;

package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap

@@ -9,6 +9,7 @@ exports[`ResponsiveDropBox rendering the defult props 1`] = `
     data-position="bottomStart"
     data-selector-id="dropBox"
     data-test-id="dropBox"
+    dot-ui-element="dropbox"
   >
     <div
       class="subContainer bottom_shadow radius defaultPalette"

package/lib/Select/GroupSelect.js

@@ -51,6 +51,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -664,11 +666,16 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           htmlId = _this$props9.htmlId,
           iconOnHover = _this$props9.iconOnHover,
           isLoading = _this$props9.isLoading,
-          dataSelectorId = _this$props9.dataSelectorId;
+          dataSelectorId = _this$props9.dataSelectorId,
+          customProps = _this$props9.customProps;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
       });
+      var _i18nKeys = i18nKeys,
+          TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
+          _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
+          TextBox_ally_label = _i18nKeys$TextBox_all === void 0 ? 'Click to select options' : _i18nKeys$TextBox_all;
       var _this$state3 = this.state,
           selectedId = _this$state3.selectedId,
           hoverIndex = _this$state3.hoverIndex,
@@ -687,6 +694,10 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
+      var _customProps$TextBoxI = customProps.TextBoxIconProps,
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
+          _customProps$TextBoxP = customProps.TextBoxProps,
+          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,
@@ -699,7 +710,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
-      }, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      }, children ? children : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         isDisabled: isDisabled,
         iconRotated: isPopupOpen,
         inputRef: this.valueInputRef,
@@ -727,16 +738,17 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           ariaActivedescendant: selectedId,
           ariaOwns: setAriaId
         },
+        i18nKeys: TextBoxIcon_i18n,
         isFocus: isPopupReady,
         autoComplete: false
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, TextBoxIconProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both",
         dataId: dataIdDownIcon
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-down",
         size: "7",
         iconClass: _SelectModule["default"].arrowIcon
-      }))) : /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
+      }))) : /*#__PURE__*/_react["default"].createElement(_TextBox["default"], _extends({
         isDisabled: isDisabled,
         inputRef: this.valueInputRef,
         maxLength: maxLength,
@@ -766,7 +778,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         },
         autoComplete: false,
         isFocus: isPopupReady
-      }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+      }, TextBoxProps)))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
       }, function (_ref5) {

package/lib/Select/props/defaultProps.js

@@ -82,7 +82,8 @@ var GroupSelect_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
 var SelectWithAvatar_defaultProps = {

package/lib/Select/props/propTypes.js

@@ -191,7 +191,11 @@ var GroupSelect_propTypes = {
   }),
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
-  isDefaultSelectValue: _propTypes["default"].bool
+  isDefaultSelectValue: _propTypes["default"].bool,
+  customProps: _propTypes["default"].shape({
+    TextBoxProps: _propTypes["default"].object,
+    TextBoxIconProps: _propTypes["default"].object
+  })
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
 

package/lib/Tag/Tag.js

@@ -140,7 +140,12 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
           customAttributes = _this$props4.customAttributes,
           a11y = _this$props4.a11y,
           needEffect = _this$props4.needEffect,
-          isReadOnly = _this$props4.isReadOnly;
+          isReadOnly = _this$props4.isReadOnly,
+          customProps = _this$props4.customProps;
+      var _customProps$avatarPr = customProps.avatarProps,
+          avatarProps = _customProps$avatarPr === void 0 ? {} : _customProps$avatarPr,
+          _customProps$iconProp = customProps.iconProps,
+          iconProps = _customProps$iconProp === void 0 ? {} : _customProps$iconProp;
       var _customClass$customTa = customClass.customTag,
           customTag = _customClass$customTa === void 0 ? '' : _customClass$customTa,
           _customClass$customTa2 = customClass.customTagClose,
@@ -166,20 +171,20 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
         "data-selector-id": dataSelectorId
       }, customAttributes), hasAvatar ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _TagModule["default"].avatar
-      }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         palette: isDarkPalette ? 'info' : avatarPalette,
         name: initial,
         size: "small",
         src: imageURL,
         textPalette: isDarkPalette ? 'white' : '',
         customClass: customAvatar
-      })) : null, iconName ? /*#__PURE__*/_react["default"].createElement("div", {
+      }, avatarProps))) : null, iconName ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagModule["default"].icon, " ").concat(customTagIcon),
         "aria-hidden": true
-      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+      }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, _extends({
         name: iconName,
         size: iconSize
-      })) : null, /*#__PURE__*/_react["default"].createElement("div", {
+      }, iconProps))) : null, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagModule["default"].text, " ").concat(textSizes),
         "aria-hidden": true,
         id: getAriaId

package/lib/Tag/props/defaultProps.js

@@ -17,6 +17,7 @@ var defaultProps = {
   a11y: {},
   needEffect: true,
   isReadOnly: false,
-  dataSelectorId: 'tag'
+  dataSelectorId: 'tag',
+  customProps: {}
 };
 exports.defaultProps = defaultProps;

package/lib/Tag/props/propTypes.js

@@ -7,6 +7,10 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("../../Avatar/props/propTypes.js");
+
+var _propTypes3 = require("@zohodesk/icons/es/Icon/props/propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
@@ -42,6 +46,10 @@ var propTypes = {
   }),
   needEffect: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  customProps: _propTypes["default"].shape({
+    avatarProps: _propTypes["default"].exact(_propTypes2.propTypes),
+    iconProps: _propTypes["default"].exact(_propTypes3.IconProps)
+  })
 };
 exports.propTypes = propTypes;

package/lib/TextBox/TextBox.js

@@ -211,7 +211,7 @@ var TextBox = /*#__PURE__*/function (_React$PureComponent) {
         ref: this.inputRef,
         type: type,
         value: value,
-        onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : '',
+        onScroll: isScrollPrevent ? this.handlePreventTextBoxScroll : null,
         onKeyPress: onKeyPress,
         onMouseDown: onMouseDown
       }, options, customProps));

package/lib/Textarea/Textarea.js

@@ -101,7 +101,8 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
           autoFocus = _this$props.autoFocus,
           htmlId = _this$props.htmlId,
           a11y = _this$props.a11y,
-          customClass = _this$props.customClass;
+          customClass = _this$props.customClass,
+          isFocus = _this$props.isFocus;
       var ariaLabel = a11y.ariaLabel,
           ariaLabelledby = a11y.ariaLabelledby;
       var resizes = {
@@ -124,7 +125,8 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         options.autoFocus = true;
       }
 
-      var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(_TextareaModule["default"][size], " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], "  ").concat(animated ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : '', "   ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextareaModule["default"].effect) : "".concat(_TextareaModule["default"].basic);
+      var isEditable = !(isReadOnly || isDisabled);
+      var classList = needAppearance ? "".concat(_TextareaModule["default"].container, " ").concat(_TextareaModule["default"][size], " ").concat(_TextareaModule["default"][variant], " ").concat(needBorder ? _TextareaModule["default"].needBorder : _TextareaModule["default"].noBorder, " ").concat(resize ? _TextareaModule["default"][resizes[resize]] : _TextareaModule["default"][resizes.none], "  ").concat(animated ? "".concat(_TextareaModule["default"]["".concat(size, "animated")]) : '', "   ").concat(isDisabled && !needEffect || isReadOnly && !needEffect ? '' : _TextareaModule["default"].effect, " ").concat(isEditable && isFocus ? _TextareaModule["default"].active : '') : "".concat(_TextareaModule["default"].basic);
       return /*#__PURE__*/_react["default"].createElement("textarea", _extends({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,

package/lib/Textarea/Textarea.module.css

@@ -88,7 +88,7 @@
 .effect:hover {
   --textarea_border_color: var(--zdt_textarea_hover_border);
 }
-.effect:focus {
+.effect:focus,.effect.active {
   --textarea_border_color: var(--zdt_textarea_focus_border);
 }
 .xsmall,