@plesk/ui-library 3.39.0 → 3.40.1

package/cjs/components/Button/Button.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.BUTTON_PROP_NAMES = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../constants");
@@ -69,6 +69,9 @@ const renderCaret = _ref2 => {
   }
   return caretElement;
 };
+
+// For ToolbarMenu backward compatibility purposes
+const BUTTON_PROP_NAMES = exports.BUTTON_PROP_NAMES = ['size', 'intent', 'ghost', 'selected', 'onToggle', 'state', 'disabled', 'tooltip', 'icon', 'caret', 'fill', 'children', 'component', 'className', 'baseClassName', 'arrow', 'onClick'];
 const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     baseClassName = `${_constants.CLS_PREFIX}button`,
@@ -182,27 +185,6 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
 });
 Button.displayName = 'Button';
 
-// For ToolbarMenu backward compatibility purposes
-Button.defaultProps = {
-  size: undefined,
-  intent: undefined,
-  ghost: false,
-  selected: undefined,
-  onToggle: undefined,
-  state: undefined,
-  disabled: false,
-  tooltip: undefined,
-  icon: undefined,
-  caret: undefined,
-  fill: false,
-  children: undefined,
-  component: 'button',
-  className: undefined,
-  baseClassName: `${_constants.CLS_PREFIX}button`,
-  arrow: undefined,
-  onClick: undefined
-};
-
 /**
  * `Button` component is used for executing actions, changing the application state, opening forms or dialog windows, and submitting data.
  * As a rule, you should not use buttons for navigation between individual pages (use `Link` instead).

package/cjs/components/Card/CardButton.js

@@ -16,10 +16,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 const CardButton = _ref => {
   let {
     icon,
+    baseClassName = `${_constants.CLS_PREFIX}card-button`,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
     icon: _Icon.default.create(icon),
+    baseClassName: baseClassName,
     ...props
   });
 };
@@ -30,7 +32,4 @@ CardButton.propTypes = {
   baseClassName: _propTypes.default.string,
   icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object, _propTypes.default.element]).isRequired
 };
-CardButton.defaultProps = {
-  baseClassName: `${_constants.CLS_PREFIX}card-button`
-};
 var _default = exports.default = CardButton;

package/cjs/components/CardList/CardListToolbar.js

@@ -120,9 +120,9 @@ const renderView = (onViewChange, currentView) => {
 const isToolbarExpander = element => /*#__PURE__*/(0, _react.isValidElement)(element) && element.type === _Toolbar.ToolbarExpander;
 const CardListToolbar = _ref2 => {
   let {
-    baseClassName,
-    selection,
-    onViewChange,
+    baseClassName = `${_constants.CLS_PREFIX}card-list__toolbar`,
+    selection = null,
+    onViewChange = null,
     currentView,
     groups
   } = _ref2;
@@ -153,9 +153,4 @@ CardListToolbar.propTypes = {
   currentView: _propTypes.default.string.isRequired,
   baseClassName: _propTypes.default.string
 };
-CardListToolbar.defaultProps = {
-  selection: null,
-  onViewChange: null,
-  baseClassName: `${_constants.CLS_PREFIX}card-list__toolbar`
-};
 var _default = exports.default = CardListToolbar;

package/cjs/components/Dialog/Dialog.js

@@ -29,11 +29,14 @@ const isProps = value => value && typeof value === 'object' && ! /*#__PURE__*/(0
  */
 const Dialog = _ref => {
   let {
-    baseClassName,
+    baseClassName = `${_constants.CLS_PREFIX}dialog`,
+    isOpen = false,
+    size = 'md',
+    closable = true,
+    canClose = true,
     className,
     children,
     actions,
-    isOpen,
     banner,
     image,
     title,
@@ -42,11 +45,8 @@ const Dialog = _ref => {
     cancelButton,
     buttons,
     form,
-    size,
-    closable,
     onClose,
     closingConfirmation,
-    canClose,
     ...props
   } = _ref;
   const [isVisible, setIsVisible] = (0, _react.useState)(isOpen);
@@ -206,26 +206,4 @@ const Dialog = _ref => {
     }), closingConfirmationDialog]
   });
 };
-Dialog.defaultProps = {
-  isOpen: false,
-  banner: undefined,
-  sideBanner: undefined,
-  sideBannerContainer: undefined,
-  image: undefined,
-  title: undefined,
-  subtitle: undefined,
-  cancelTitle: undefined,
-  cancelButton: undefined,
-  buttons: undefined,
-  actions: undefined,
-  form: undefined,
-  size: 'md',
-  closable: true,
-  canClose: true,
-  onClose: undefined,
-  closingConfirmation: undefined,
-  children: undefined,
-  className: undefined,
-  baseClassName: `${_constants.CLS_PREFIX}dialog`
-};
 var _default = exports.default = Dialog;

package/cjs/components/Drawer/Drawer.js

@@ -19,24 +19,6 @@ var _DrawerProgress = _interopRequireDefault(require("./DrawerProgress"));
 var _jsxRuntime = require("react/jsx-runtime");
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-const defaultProps = {
-  isOpen: false,
-  subtitle: undefined,
-  backButton: undefined,
-  hideButton: undefined,
-  tabs: undefined,
-  placement: 'left',
-  size: 'md',
-  onClose: undefined,
-  closingConfirmation: undefined,
-  form: undefined,
-  sideBanner: undefined,
-  sideBannerContainer: undefined,
-  progress: undefined,
-  children: null,
-  className: undefined,
-  baseClassName: `${_constants.CLS_PREFIX}drawer`
-};
 /**
  * `Drawer` component is used for working with properties of an object (or system) without leaving the context of the object.
  * [Read more when to use Drawer](#!/Drawers%2C%20pages%2C%20popovers).
@@ -44,7 +26,10 @@ const defaultProps = {
  */
 const Drawer = _ref => {
   let {
-    baseClassName,
+    baseClassName = `${_constants.CLS_PREFIX}drawer`,
+    isOpen = false,
+    placement = 'left',
+    size = 'md',
     className,
     children,
     title,
@@ -146,6 +131,9 @@ const Drawer = _ref => {
     }, className),
     onClose: onCloseWithConfirmation,
     canCloseOnBackdropClick: true,
+    isOpen: isOpen,
+    placement: placement,
+    size: size,
     ...props,
     children: [takeApart(_ref5 => {
       let {
@@ -187,5 +175,4 @@ const Drawer = _ref => {
     }), closingConfirmationDialog]
   });
 };
-Drawer.defaultProps = defaultProps;
 var _default = exports.default = Drawer;

package/cjs/components/Dropdown/Dropdown.js

@@ -132,12 +132,12 @@ const useEnhancedMenu = (menu, _ref2) => {
  */
 const Dropdown = _ref3 => {
   let {
-    baseClassName,
+    baseClassName = `${_constants.CLS_PREFIX}dropdown`,
     className,
     children,
     menu,
-    menuPlacement,
-    overlay,
+    menuPlacement = 'bottom-start',
+    overlay = false,
     locale,
     ...props
   } = _ref3;
@@ -206,12 +206,4 @@ const Dropdown = _ref3 => {
     })
   });
 };
-Dropdown.defaultProps = {
-  menuPlacement: 'bottom-start',
-  children: undefined,
-  overlay: false,
-  className: undefined,
-  baseClassName: `${_constants.CLS_PREFIX}dropdown`,
-  locale: undefined
-};
 var _default = exports.default = Dropdown;

package/cjs/components/FormField/FormField.js

@@ -28,28 +28,6 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 const BASE_FORM_FIELD_CLASS_NAME = exports.BASE_FORM_FIELD_CLASS_NAME = `${_constants.CLS_PREFIX}form-field`;
 const defaultValue = undefined;
-const defaultProps = {
-  id: undefined,
-  name: undefined,
-  value: defaultValue,
-  onChange: null,
-  label: undefined,
-  description: undefined,
-  errors: {},
-  required: false,
-  children: undefined,
-  multi: undefined,
-  disabled: undefined,
-  locale: undefined,
-  addMoreValidator: undefined,
-  onRemoveRow: null,
-  fullDescription: undefined,
-  className: undefined,
-  baseClassName: BASE_FORM_FIELD_CLASS_NAME,
-  form: undefined,
-  vertical: undefined,
-  scrollableElement: undefined
-};
 
 /**
  * Simple helper to handle situations when we're expecting only array
@@ -455,8 +433,14 @@ class FormField extends _react.Component {
  * * [FormFieldSelect](#!/FormFieldSelect), [FormFieldCheckbox](#!/FormFieldCheckbox),
  * [FormFieldRadioButtons](#!/FormFieldRadioButtons) for selecting options.
  */
-(0, _defineProperty2.default)(FormField, "defaultProps", defaultProps);
-const FormFieldWrapper = props => {
+const FormFieldWrapper = _ref => {
+  let {
+    value = defaultValue,
+    errors = {},
+    required = false,
+    baseClassName = BASE_FORM_FIELD_CLASS_NAME,
+    ...props
+  } = _ref;
   const form = (0, _react.useContext)(_FormContext.default);
   const verticalContext = (0, _react.useContext)(_VerticalContext.default);
   const vertical = props.vertical === undefined ? verticalContext : props.vertical;
@@ -467,9 +451,12 @@ const FormFieldWrapper = props => {
     form: form,
     vertical: vertical,
     scrollableElement: scrollableElement,
-    disabled: props.disabled || disabled
+    disabled: props.disabled || disabled,
+    value: value,
+    errors: errors,
+    required: required,
+    baseClassName: baseClassName
   });
 };
 FormFieldWrapper.displayName = 'FormField';
-FormFieldWrapper.defaultProps = defaultProps;
 var _default = exports.default = FormFieldWrapper;

package/cjs/components/List/List.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactTransitionGroup = require("react-transition-group");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
@@ -41,7 +40,7 @@ function getRowKey(row, props) {
 }
 const Tbody = _ref => {
   let {
-    baseClassName,
+    baseClassName = `${_constants.CLS_PREFIX}list__wrapper`,
     className,
     ...props
   } = _ref;
@@ -59,18 +58,6 @@ const Tbody = _ref => {
     })
   });
 };
-Tbody.propTypes = {
-  onFocus: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  className: _propTypes.default.string,
-  baseClassName: _propTypes.default.string
-};
-Tbody.defaultProps = {
-  onFocus: undefined,
-  onBlur: undefined,
-  className: undefined,
-  baseClassName: `${_constants.CLS_PREFIX}list__wrapper`
-};
 const getHumanTotalRows = _ref2 => {
   let {
     selectedRows,

package/cjs/components/Progress/Progress.js

@@ -35,11 +35,12 @@ class Progress extends _react.Component {
     let isFailed = false;
     if (children) {
       _react.Children.forEach(children, child => {
-        if ( /*#__PURE__*/(0, _react.isValidElement)(child) && child.props.status) {
-          isNotStarted = isNotStarted && child.props.status === _ProgressStep.STATUS_NOT_STARTED;
-          isFinished = isFinished && child.props.status === _ProgressStep.STATUS_DONE;
-          isFinishedWithWarnings = isFinishedWithWarnings && [_ProgressStep.STATUS_DONE, _ProgressStep.STATUS_WARNING].includes(child.props.status);
-          isFailed = isFailed || child.props.status === _ProgressStep.STATUS_ERROR;
+        if ( /*#__PURE__*/(0, _react.isValidElement)(child)) {
+          const status = child.props.status ?? _ProgressStep.PROGRESS_STEP_DEFAULT_STATUS;
+          isNotStarted = isNotStarted && status === _ProgressStep.STATUS_NOT_STARTED;
+          isFinished = isFinished && status === _ProgressStep.STATUS_DONE;
+          isFinishedWithWarnings = isFinishedWithWarnings && [_ProgressStep.STATUS_DONE, _ProgressStep.STATUS_WARNING].includes(status);
+          isFailed = isFailed || status === _ProgressStep.STATUS_ERROR;
         }
       });
     }

package/cjs/components/ProgressStep/ProgressStep.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.STATUS_WARNING = exports.STATUS_RUNNING = exports.STATUS_NOT_STARTED = exports.STATUS_ERROR = exports.STATUS_DONE = exports.STATUS_CANCELED = void 0;
+exports.default = exports.STATUS_WARNING = exports.STATUS_RUNNING = exports.STATUS_NOT_STARTED = exports.STATUS_ERROR = exports.STATUS_DONE = exports.STATUS_CANCELED = exports.PROGRESS_STEP_DEFAULT_STATUS = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Icon = _interopRequireWildcard(require("../Icon"));
@@ -23,6 +23,7 @@ const STATUS_DONE = exports.STATUS_DONE = 'done';
 const STATUS_WARNING = exports.STATUS_WARNING = 'warning';
 const STATUS_ERROR = exports.STATUS_ERROR = 'error';
 const STATUS_CANCELED = exports.STATUS_CANCELED = 'canceled';
+const PROGRESS_STEP_DEFAULT_STATUS = exports.PROGRESS_STEP_DEFAULT_STATUS = STATUS_NOT_STARTED;
 /**
  * `ProgressStep` is a part of the [Progress](#!/Progress) component.
  * @since 1.10.0
@@ -34,9 +35,9 @@ const ProgressStep = _ref => {
     icon,
     title,
     statusText,
-    progress,
-    status,
-    baseClassName,
+    progress = -1,
+    status = PROGRESS_STEP_DEFAULT_STATUS,
+    baseClassName = `${_constants.CLS_PREFIX}progress-step`,
     ...props
   } = _ref;
   let intent = null;
@@ -112,14 +113,4 @@ const ProgressStep = _ref => {
     })]
   });
 };
-ProgressStep.defaultProps = {
-  icon: null,
-  title: null,
-  status: STATUS_NOT_STARTED,
-  statusText: null,
-  progress: -1,
-  children: null,
-  className: null,
-  baseClassName: `${_constants.CLS_PREFIX}progress-step`
-};
 var _default = exports.default = ProgressStep;

package/cjs/components/ProgressStep/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "PROGRESS_STEP_DEFAULT_STATUS", {
+  enumerable: true,
+  get: function () {
+    return _ProgressStep.PROGRESS_STEP_DEFAULT_STATUS;
+  }
+});
 Object.defineProperty(exports, "STATUS_CANCELED", {
   enumerable: true,
   get: function () {

package/cjs/components/Section/Section.js

@@ -42,21 +42,6 @@ const getErrorsForChildren = (form, children) => {
   return errors;
 };
 const SECTION_BASE_CLASS_NAME = exports.SECTION_BASE_CLASS_NAME = `${_constants.CLS_PREFIX}section`;
-const DEFAULT_PROPS = {
-  title: undefined,
-  intent: undefined,
-  collapsible: false,
-  collapsed: false,
-  onTitleChange: undefined,
-  onClose: undefined,
-  onToggle: undefined,
-  buttons: undefined,
-  vertical: undefined,
-  children: undefined,
-  className: undefined,
-  baseClassName: SECTION_BASE_CLASS_NAME,
-  form: undefined
-};
 class Section extends _react.Component {
   constructor() {
     super(...arguments);
@@ -244,18 +229,25 @@ class Section extends _react.Component {
  * and comprehension of the presented information.
  * @since 0.0.54
  */
-(0, _defineProperty2.default)(Section, "defaultProps", DEFAULT_PROPS);
-const SectionWrapper = props => {
+const SectionWrapper = _ref8 => {
+  let {
+    collapsible = false,
+    collapsed = false,
+    baseClassName = SECTION_BASE_CLASS_NAME,
+    ...props
+  } = _ref8;
   const form = (0, _react.useContext)(_FormContext.default);
   const verticalContext = (0, _react.useContext)(_VerticalContext.default);
   const vertical = props.vertical === undefined ? verticalContext : props.vertical;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Section, {
     ...props,
     form: form,
-    vertical: vertical
+    vertical: vertical,
+    collapsible: collapsible,
+    collapsed: collapsed,
+    baseClassName: baseClassName
   });
 };
 SectionWrapper.displayName = 'Section';
-SectionWrapper.defaultProps = DEFAULT_PROPS;
 SectionWrapper.WrappedComponent = Section;
 var _default = exports.default = SectionWrapper;

package/cjs/components/TextArea/TextArea.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _constants = require("../../constants");
@@ -24,109 +23,62 @@ const getMinMax = rows => {
       maxRows: rows.max
     };
   }
-  return null;
+  return {};
 };
-const AVAILABLE_SIZES = ['sm', 'md', 'lg', 'xl', 'fill'];
+const AVAILABLE_SIZES = new Set(['sm', 'md', 'lg', 'xl', 'fill']);
 
 /**
  * `TextArea` is used for entering long text (like email body, descriptions, comments).
  * @since 1.9.0
  */
-
-class TextArea extends _react.Component {
-  constructor() {
-    super(...arguments);
-    (0, _defineProperty2.default)(this, "state", {
-      textareaStyles: null
-    });
-    (0, _defineProperty2.default)(this, "rootRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)(this, "handleChange", e => {
-      const {
-        autoheight,
-        onChange
-      } = this.props;
-      if (autoheight) {
-        this.adjustHeight();
-      }
-      if (typeof onChange === 'function') {
-        onChange(e);
-      }
-    });
-  }
-  static getDerivedStateFromProps(_ref) {
-    let {
-      rows
-    } = _ref;
-    if (rows) {
-      return getMinMax(rows);
-    }
-    return null;
-  }
-  componentDidMount() {
-    this.adjustHeight();
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      autoheight
-    } = this.props;
-    if (autoheight !== prevProps.autoheight) {
-      this.adjustHeight();
-    }
-  }
-  adjustHeight() {
-    const {
-      autoheight
-    } = this.props;
-    if (!autoheight) {
-      this.setState({
-        textareaStyles: null
-      });
+const TextArea = _ref => {
+  let {
+    baseClassName = `${_constants.CLS_PREFIX}textarea`,
+    className,
+    rows = 4,
+    size = 'md',
+    autoheight = false,
+    onChange,
+    style,
+    ...props
+  } = _ref;
+  const rootRef = (0, _react.useRef)(null);
+  const useSizeModifier = size && AVAILABLE_SIZES.has(size);
+  const {
+    minRows,
+    maxRows
+  } = getMinMax(rows);
+  const [heightStyle, setHeightStyle] = (0, _react.useState)();
+  const adjustHeight = (0, _react.useCallback)(() => {
+    if (!autoheight || !rootRef.current) {
+      setHeightStyle(undefined);
       return;
     }
-    const {
-      minRows,
-      maxRows
-    } = this.state;
-    if (this.rootRef.current) {
-      const textareaStyles = (0, _calculateNodeHeight.default)(this.rootRef.current, false, minRows, maxRows);
-      this.setState({
-        textareaStyles
-      });
+    setHeightStyle((0, _calculateNodeHeight.default)(rootRef.current, false, minRows, maxRows));
+  }, [autoheight, maxRows, minRows]);
+  (0, _react.useLayoutEffect)(() => {
+    adjustHeight();
+  }, [adjustHeight]);
+  const handleChange = e => {
+    if (autoheight) {
+      adjustHeight();
     }
-  }
-  render() {
-    const {
-      baseClassName,
-      className,
-      rows,
-      size,
-      autoheight,
-      onChange,
-      ...other
-    } = this.props;
-    const {
-      textareaStyles,
-      minRows
-    } = this.state;
-    const useSizeModifier = size && AVAILABLE_SIZES.indexOf(size) !== -1;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
-      className: (0, _classnames.default)(baseClassName, {
-        [`${baseClassName}--size-${size}`]: useSizeModifier
-      }, className),
-      ref: this.rootRef,
-      style: textareaStyles,
-      onChange: this.handleChange,
-      rows: minRows,
-      ...other
-    });
-  }
-}
-(0, _defineProperty2.default)(TextArea, "defaultProps", {
-  baseClassName: `${_constants.CLS_PREFIX}textarea`,
-  className: null,
-  rows: 4,
-  size: 'md',
-  autoheight: false,
-  onChange: null
-});
+    if (typeof onChange === 'function') {
+      onChange(e);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("textarea", {
+    ref: rootRef,
+    className: (0, _classnames.default)(baseClassName, {
+      [`${baseClassName}--size-${size}`]: useSizeModifier
+    }, className),
+    style: {
+      ...style,
+      ...heightStyle
+    },
+    onChange: handleChange,
+    rows: minRows,
+    ...props
+  });
+};
 var _default = exports.default = TextArea;

package/cjs/components/TextArea/calculateNodeHeight.js

@@ -47,8 +47,8 @@ const calculateNodeStyling = function (node) {
 // eslint-disable-next-line max-params
 function calculateNodeHeight(uiTextNode) {
   let useCache = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  let minRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  let maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  let minRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  let maxRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
   if (!hiddenTextarea) {
     hiddenTextarea = document.createElement('textarea');
     document.body.appendChild(hiddenTextarea);
@@ -70,8 +70,8 @@ function calculateNodeHeight(uiTextNode) {
   // Need to have the overflow attribute to hide the scrollbar otherwise text-lines will not calculated properly as the shadow will technically be narrower for content
   hiddenTextarea.setAttribute('style', `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
   hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || '';
-  let minHeight = null;
-  let maxHeight = null;
+  let minHeight = undefined;
+  let maxHeight = undefined;
   let height = hiddenTextarea.scrollHeight;
   let overflowY;
   if (boxSizing === 'border-box') {
@@ -81,23 +81,23 @@ function calculateNodeHeight(uiTextNode) {
     // remove padding, since height = content
     height = height - paddingSize;
   }
-  if (minRows !== null || maxRows !== null) {
+  if (minRows !== undefined || maxRows !== undefined) {
     // measure height of a textarea with a single row
     hiddenTextarea.value = ' ';
     const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-    if (minRows !== null) {
+    if (minRows !== undefined) {
       minHeight = singleRowHeight * minRows;
       if (boxSizing === 'border-box') {
         minHeight = minHeight + paddingSize + borderSize;
       }
       height = Math.max(minHeight, height);
     }
-    if (maxRows !== null) {
+    if (maxRows !== undefined) {
       maxHeight = singleRowHeight * maxRows;
       if (boxSizing === 'border-box') {
         maxHeight = maxHeight + paddingSize + borderSize;
       }
-      overflowY = height > maxHeight ? '' : 'hidden';
+      overflowY = height > maxHeight ? undefined : 'hidden';
       height = Math.min(maxHeight, height);
     }
   }