baseui 0.0.0-next-dfcbae6 → 0.0.0-next-71e4b32

package/es/input/base-input.js

@@ -37,7 +37,7 @@ class BaseInput extends React.Component {
     });
 
     _defineProperty(this, "onInputKeyDown", e => {
-      if (this.props.clearOnEscape && e.key === 'Escape' && this.inputRef.current) {
+      if (this.props.clearOnEscape && e.key === 'Escape' && this.inputRef.current && !this.props.readOnly) {
         this.clearValue(); // prevent event from closing modal or doing something unexpected
 
         e.stopPropagation();
@@ -51,17 +51,21 @@ class BaseInput extends React.Component {
     });
 
     _defineProperty(this, "onFocus", e => {
-      this.setState({
-        isFocused: true
-      });
-      this.props.onFocus(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: true
+        });
+        this.props.onFocus(e);
+      }
     });
 
     _defineProperty(this, "onBlur", e => {
-      this.setState({
-        isFocused: false
-      });
-      this.props.onBlur(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: false
+        });
+        this.props.onBlur(e);
+      }
     });
 
     _defineProperty(this, "handleFocusForMaskToggle", event => {
@@ -192,10 +196,11 @@ class BaseInput extends React.Component {
       clearable,
       value,
       disabled,
+      readOnly,
       overrides = {}
     } = this.props;
 
-    if (disabled || !clearable || value == null || typeof value === 'string' && value.length === 0) {
+    if (disabled || readOnly || !clearable || value == null || typeof value === 'string' && value.length === 0) {
       return null;
     }
 
@@ -265,6 +270,7 @@ class BaseInput extends React.Component {
       "aria-required": this.props.required,
       autoComplete: autoComplete,
       disabled: this.props.disabled,
+      readOnly: this.props.readOnly,
       id: this.props.id,
       inputMode: this.props.inputMode,
       maxLength: this.props.maxLength,
@@ -322,7 +328,8 @@ _defineProperty(BaseInput, "defaultProps", {
   required: false,
   role: null,
   size: SIZE.default,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 export default BaseInput;

package/es/input/input.js

@@ -20,21 +20,25 @@ class Input extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      isFocused: this.props.autoFocus || false
+      isFocused: this.props.autoFocus && !this.props.readOnly || false
     });
 
     _defineProperty(this, "onFocus", e => {
-      this.setState({
-        isFocused: true
-      });
-      this.props.onFocus(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: true
+        });
+        this.props.onFocus(e);
+      }
     });
 
     _defineProperty(this, "onBlur", e => {
-      this.setState({
-        isFocused: false
-      });
-      this.props.onBlur(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: false
+        });
+        this.props.onBlur(e);
+      }
     });
   }
 
@@ -94,7 +98,8 @@ _defineProperty(Input, "defaultProps", {
   startEnhancer: null,
   endEnhancer: null,
   clearable: false,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 function getAdjoinedProp(startEnhancer, endEnhancer) {

package/es/input/masked-input.js

@@ -23,6 +23,7 @@ const MaskOverride = /*#__PURE__*/React.forwardRef(({
   onBlur,
   value,
   disabled,
+  readOnly,
   ...restProps
 }, ref) => {
   return /*#__PURE__*/React.createElement(InputMask, _extends({
@@ -30,14 +31,16 @@ const MaskOverride = /*#__PURE__*/React.forwardRef(({
     onFocus: onFocus,
     onBlur: onBlur,
     value: value,
-    disabled: disabled
+    disabled: disabled,
+    readOnly: readOnly
   }, restProps), props => /*#__PURE__*/React.createElement(StyledInput, _extends({
     ref: ref,
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
     value: value,
-    disabled: disabled
+    disabled: disabled,
+    readOnly: readOnly
   }, props)));
 });
 MaskOverride.displayName = 'MaskOverride';

package/es/input/utils.js

@@ -11,7 +11,8 @@ export function getSharedProps(props, state) {
     positive,
     adjoined,
     size,
-    required
+    required,
+    readOnly
   } = props;
   const {
     isFocused
@@ -23,6 +24,7 @@ export function getSharedProps(props, state) {
     $positive: positive,
     $adjoined: adjoined,
     $size: size,
-    $required: required
+    $required: required,
+    $isReadOnly: readOnly
   };
 }

package/es/select/select-component.js

@@ -224,8 +224,10 @@ class Select extends React.Component {
         if (containsNode(this.anchor.current, event.relatedTarget) || containsNode(this.dropdown.current, event.relatedTarget)) {
           return;
         }
-      } else if (containsNode(this.anchor.current, event.target)) {
-        return;
+      } else if (event.type !== 'blur') {
+        if (containsNode(this.anchor.current, event.target)) {
+          return;
+        }
       }
 
       if (this.props.onBlur) {
@@ -592,7 +594,7 @@ class Select extends React.Component {
       }
 
       if (!prevState.isFocused && this.state.isFocused) {
-        document.addEventListener('click', this.handleClickOutside);
+        setTimeout(() => document.addEventListener('click', this.handleClickOutside), 0);
       }
     }
   }

package/es/textarea/textarea.js

@@ -18,21 +18,25 @@ class Textarea extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      isFocused: this.props.autoFocus || false
+      isFocused: this.props.autoFocus && !this.props.readOnly || false
     });
 
     _defineProperty(this, "onFocus", e => {
-      this.setState({
-        isFocused: true
-      });
-      this.props.onFocus(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: true
+        });
+        this.props.onFocus(e);
+      }
     });
 
     _defineProperty(this, "onBlur", e => {
-      this.setState({
-        isFocused: false
-      });
-      this.props.onBlur(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: false
+        });
+        this.props.onBlur(e);
+      }
     });
   }
 
@@ -52,6 +56,7 @@ class Textarea extends React.Component {
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "textarea",
       $isFocused: this.state.isFocused,
+      $isReadOnly: this.props.readOnly,
       $disabled: this.props.disabled,
       $error: this.props.error,
       $positive: this.props.positive,
@@ -70,6 +75,7 @@ class Textarea extends React.Component {
 _defineProperty(Textarea, "defaultProps", {
   autoFocus: false,
   disabled: false,
+  readOnly: false,
   error: false,
   name: '',
   onBlur: () => {},

package/esm/input/base-input.js

@@ -85,7 +85,7 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onInputKeyDown", function (e) {
-      if (_this.props.clearOnEscape && e.key === 'Escape' && _this.inputRef.current) {
+      if (_this.props.clearOnEscape && e.key === 'Escape' && _this.inputRef.current && !_this.props.readOnly) {
         _this.clearValue(); // prevent event from closing modal or doing something unexpected
 
 
@@ -100,19 +100,23 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      _this.setState({
-        isFocused: true
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: true
+        });
 
-      _this.props.onFocus(e);
+        _this.props.onFocus(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      _this.setState({
-        isFocused: false
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: false
+        });
 
-      _this.props.onBlur(e);
+        _this.props.onBlur(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleFocusForMaskToggle", function (event) {
@@ -267,10 +271,11 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
           clearable = _this$props2.clearable,
           value = _this$props2.value,
           disabled = _this$props2.disabled,
+          readOnly = _this$props2.readOnly,
           _this$props2$override = _this$props2.overrides,
           overrides = _this$props2$override === void 0 ? {} : _this$props2$override;
 
-      if (disabled || !clearable || value == null || typeof value === 'string' && value.length === 0) {
+      if (disabled || readOnly || !clearable || value == null || typeof value === 'string' && value.length === 0) {
         return null;
       }
 
@@ -360,6 +365,7 @@ var BaseInput = /*#__PURE__*/function (_React$Component) {
         "aria-required": this.props.required,
         autoComplete: autoComplete,
         disabled: this.props.disabled,
+        readOnly: this.props.readOnly,
         id: this.props.id,
         inputMode: this.props.inputMode,
         maxLength: this.props.maxLength,
@@ -419,7 +425,8 @@ _defineProperty(BaseInput, "defaultProps", {
   required: false,
   role: null,
   size: SIZE.default,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 export default BaseInput;

package/esm/input/input.js

@@ -70,23 +70,27 @@ var Input = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isFocused: _this.props.autoFocus || false
+      isFocused: _this.props.autoFocus && !_this.props.readOnly || false
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      _this.setState({
-        isFocused: true
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: true
+        });
 
-      _this.props.onFocus(e);
+        _this.props.onFocus(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      _this.setState({
-        isFocused: false
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: false
+        });
 
-      _this.props.onBlur(e);
+        _this.props.onBlur(e);
+      }
     });
 
     return _this;
@@ -163,7 +167,8 @@ _defineProperty(Input, "defaultProps", {
   startEnhancer: null,
   endEnhancer: null,
   clearable: false,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 function getAdjoinedProp(startEnhancer, endEnhancer) {

package/esm/input/masked-input.js

@@ -32,14 +32,16 @@ var MaskOverride = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onBlur = _ref.onBlur,
       value = _ref.value,
       disabled = _ref.disabled,
-      restProps = _objectWithoutProperties(_ref, ["startEnhancer", "endEnhancer", "error", "positive", "onChange", "onFocus", "onBlur", "value", "disabled"]);
+      readOnly = _ref.readOnly,
+      restProps = _objectWithoutProperties(_ref, ["startEnhancer", "endEnhancer", "error", "positive", "onChange", "onFocus", "onBlur", "value", "disabled", "readOnly"]);
 
   return /*#__PURE__*/React.createElement(InputMask, _extends({
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
     value: value,
-    disabled: disabled
+    disabled: disabled,
+    readOnly: readOnly
   }, restProps), function (props) {
     return /*#__PURE__*/React.createElement(StyledInput, _extends({
       ref: ref,
@@ -47,7 +49,8 @@ var MaskOverride = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onFocus: onFocus,
       onBlur: onBlur,
       value: value,
-      disabled: disabled
+      disabled: disabled,
+      readOnly: readOnly
     }, props));
   });
 });

package/esm/input/utils.js

@@ -10,7 +10,8 @@ export function getSharedProps(props, state) {
       positive = props.positive,
       adjoined = props.adjoined,
       size = props.size,
-      required = props.required;
+      required = props.required,
+      readOnly = props.readOnly;
   var isFocused = state.isFocused;
   return {
     $isFocused: isFocused,
@@ -19,6 +20,7 @@ export function getSharedProps(props, state) {
     $positive: positive,
     $adjoined: adjoined,
     $size: size,
-    $required: required
+    $required: required,
+    $isReadOnly: readOnly
   };
 }

package/esm/select/select-component.js

@@ -296,8 +296,10 @@ var Select = /*#__PURE__*/function (_React$Component) {
         if (containsNode(_this.anchor.current, event.relatedTarget) || containsNode(_this.dropdown.current, event.relatedTarget)) {
           return;
         }
-      } else if (containsNode(_this.anchor.current, event.target)) {
-        return;
+      } else if (event.type !== 'blur') {
+        if (containsNode(_this.anchor.current, event.target)) {
+          return;
+        }
       }
 
       if (_this.props.onBlur) {
@@ -678,6 +680,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
+      var _this2 = this;
+
       if (typeof document !== 'undefined') {
         if (prevState.isOpen !== this.state.isOpen) {
           if (this.state.isOpen) {
@@ -690,7 +694,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
         }
 
         if (!prevState.isFocused && this.state.isFocused) {
-          document.addEventListener('click', this.handleClickOutside);
+          setTimeout(function () {
+            return document.addEventListener('click', _this2.handleClickOutside);
+          }, 0);
         }
       }
     }
@@ -759,7 +765,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
      * Extends the value into an array from the given options
      */
     function getValueArray(value) {
-      var _this2 = this;
+      var _this3 = this;
 
       if (!Array.isArray(value)) {
         if (value === null || value === undefined) return [];
@@ -767,7 +773,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }
 
       return value.map(function (value) {
-        return expandValue(value, _this2.props);
+        return expandValue(value, _this3.props);
       });
     }
   }, {
@@ -812,7 +818,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderValue",
     value: function renderValue(valueArray, isOpen, locale) {
-      var _this3 = this;
+      var _this4 = this;
 
       var _this$props$overrides2 = this.props.overrides,
           overrides = _this$props$overrides2 === void 0 ? {} : _this$props$overrides2;
@@ -829,9 +835,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
           var disabled = sharedProps.$disabled || value.clearableValue === false;
           return /*#__PURE__*/React.createElement(Value, _extends({
             value: value,
-            key: "value-".concat(i, "-").concat(value[_this3.props.valueKey]),
+            key: "value-".concat(i, "-").concat(value[_this4.props.valueKey]),
             removeValue: function removeValue() {
-              return _this3.removeValue(value);
+              return _this4.removeValue(value);
             },
             disabled: disabled,
             overrides: {
@@ -860,7 +866,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderInput",
     value: function renderInput(listboxId) {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$props$overrides3 = this.props.overrides,
           overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
@@ -873,7 +879,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       var sharedProps = this.getSharedProps();
       var isOpen = this.state.isOpen;
       var selected = this.getValueArray(this.props.value).map(function (v) {
-        return v[_this4.props.labelKey];
+        return v[_this5.props.labelKey];
       }).join(', ');
       var selectedLabel = selected.length ? "Selected ".concat(selected, ". ") : '';
       var label = "".concat(selectedLabel).concat(this.props['aria-label'] || '');
@@ -1034,7 +1040,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "filterOptions",
     value: function filterOptions(excludeOptions) {
-      var _this5 = this;
+      var _this6 = this;
 
       var filterValue = this.state.inputValue.trim(); // apply filter function
 
@@ -1047,9 +1053,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
 
       var filterDoesNotMatchOption = this.props.ignoreCase ? function (opt) {
-        return opt[_this5.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim();
+        return opt[_this6.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim();
       } : function (opt) {
-        return opt[_this5.props.labelKey] !== filterValue.trim();
+        return opt[_this6.props.labelKey] !== filterValue.trim();
       };
 
       if (filterValue && this.props.creatable && this.options.concat(this.props.value).every(filterDoesNotMatchOption)) {
@@ -1104,7 +1110,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this7 = this;
 
       this.options = normalizeOptions(this.props.options);
       var _this$props2 = this.props,
@@ -1176,55 +1182,55 @@ var Select = /*#__PURE__*/function (_React$Component) {
           , _extends({
             innerRef: function innerRef(ref) {
               if (!ref) return;
-              _this6.anchor = ref.anchorRef;
+              _this7.anchor = ref.anchorRef;
             },
             autoFocus: false,
             focusLock: false,
-            mountNode: _this6.props.mountNode,
+            mountNode: _this7.props.mountNode,
             onEsc: function onEsc() {
-              return _this6.closeMenu();
+              return _this7.closeMenu();
             },
             isOpen: isOpen,
             popoverMargin: 0,
             content: function content() {
               var dropdownProps = {
-                error: _this6.props.error,
-                positive: _this6.props.positive,
-                getOptionLabel: _this6.props.getOptionLabel || _this6.getOptionLabel.bind(_this6, locale),
+                error: _this7.props.error,
+                positive: _this7.props.positive,
+                getOptionLabel: _this7.props.getOptionLabel || _this7.getOptionLabel.bind(_this7, locale),
                 id: listboxId,
-                isLoading: _this6.props.isLoading,
-                labelKey: _this6.props.labelKey,
-                maxDropdownHeight: _this6.props.maxDropdownHeight,
+                isLoading: _this7.props.isLoading,
+                labelKey: _this7.props.labelKey,
+                maxDropdownHeight: _this7.props.maxDropdownHeight,
                 multi: multi,
                 noResultsMsg: noResultsMsg,
-                onActiveDescendantChange: _this6.handleActiveDescendantChange,
-                onItemSelect: _this6.selectValue,
+                onActiveDescendantChange: _this7.handleActiveDescendantChange,
+                onItemSelect: _this7.selectValue,
                 options: options,
                 overrides: overrides,
-                required: _this6.props.required,
-                searchable: _this6.props.searchable,
-                size: _this6.props.size,
+                required: _this7.props.required,
+                searchable: _this7.props.searchable,
+                size: _this7.props.size,
                 type: type,
                 value: valueArray,
-                valueKey: _this6.props.valueKey,
-                width: _this6.anchor.current ? _this6.anchor.current.clientWidth : null,
-                keyboardControlNode: _this6.anchor
+                valueKey: _this7.props.valueKey,
+                width: _this7.anchor.current ? _this7.anchor.current.clientWidth : null,
+                keyboardControlNode: _this7.anchor
               };
               return /*#__PURE__*/React.createElement(SelectDropdown, _extends({
-                innerRef: _this6.dropdown
+                innerRef: _this7.dropdown
               }, dropdownProps));
             },
             placement: PLACEMENT.bottom
           }, popoverProps), /*#__PURE__*/React.createElement(Root, _extends({
-            onBlur: _this6.handleBlur,
+            onBlur: _this7.handleBlur,
             "data-baseweb": "select"
           }, sharedProps, rootProps), /*#__PURE__*/React.createElement(ControlContainer, _extends({
-            onKeyDown: _this6.handleKeyDown,
-            onClick: _this6.handleClick,
-            onTouchEnd: _this6.handleTouchEnd,
-            onTouchMove: _this6.handleTouchMove,
-            onTouchStart: _this6.handleTouchStart
-          }, sharedProps, controlContainerProps), type === TYPE.search ? _this6.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this6.renderValue(valueArray, isOpen, locale), _this6.renderInput(listboxId), _this6.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this6.props.placeholder !== 'undefined' ? _this6.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this6.renderLoading(), _this6.renderClear(), type === TYPE.select ? _this6.renderArrow() : null))));
+            onKeyDown: _this7.handleKeyDown,
+            onClick: _this7.handleClick,
+            onTouchEnd: _this7.handleTouchEnd,
+            onTouchMove: _this7.handleTouchMove,
+            onTouchStart: _this7.handleTouchStart
+          }, sharedProps, controlContainerProps), type === TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray, isOpen, locale), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === TYPE.select ? _this7.renderArrow() : null))));
         });
       });
     }

package/esm/textarea/textarea.js

@@ -64,23 +64,27 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
 
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isFocused: _this.props.autoFocus || false
+      isFocused: _this.props.autoFocus && !_this.props.readOnly || false
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      _this.setState({
-        isFocused: true
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: true
+        });
 
-      _this.props.onFocus(e);
+        _this.props.onFocus(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      _this.setState({
-        isFocused: false
-      });
+      if (!_this.props.readOnly) {
+        _this.setState({
+          isFocused: false
+        });
 
-      _this.props.onBlur(e);
+        _this.props.onBlur(e);
+      }
     });
 
     return _this;
@@ -108,6 +112,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "textarea",
         $isFocused: this.state.isFocused,
+        $isReadOnly: this.props.readOnly,
         $disabled: this.props.disabled,
         $error: this.props.error,
         $positive: this.props.positive,
@@ -128,6 +133,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
 _defineProperty(Textarea, "defaultProps", {
   autoFocus: false,
   disabled: false,
+  readOnly: false,
   error: false,
   name: '',
   onBlur: function onBlur() {},