shineout 1.8.0 → 1.9.0-rc.1

package/css/AnimationList/AbsoluteList.js

@@ -115,8 +115,8 @@ function _default(List) {
     _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
       var _this2 = this;
 
-      if ((0, _shallowEqual.default)(prevProps.value, this.props.value)) return;
       if (!this.props.focus) this.ajustdoc = false;
+      if ((0, _shallowEqual.default)(prevProps.value, this.props.value)) return;
       setTimeout(function () {
         _this2.forceUpdate();
       });

package/css/Cascader/Result.js

@@ -349,11 +349,12 @@ function (_PureComponent) {
         compressed = _this$props8.compressed,
         multiple = _this$props8.multiple;
     var result = value.length === 0 ? this.renderPlaceholder() : this.renderResult();
+    var clearEl = this.renderClear();
     return _react.default.createElement("div", {
       ref: this.bindResult,
-      className: (0, _styles3.cascaderClass)('result', multiple && compressed && 'compressed'),
+      className: (0, _styles3.cascaderClass)('result', multiple && compressed && 'compressed', clearEl && 'result-clearable'),
       style: style
-    }, result, this.renderIndicator(), this.renderClear());
+    }, result, this.renderIndicator(), clearEl);
   };
 
   return Result;

package/css/Cascader/styles/cascader.css

@@ -127,10 +127,18 @@
   background-color: inherit;
   color: inherit;
 }
-.so-cascader:not(.so-cascader-disabled) .so-cascader-focus .so-cascader-close,
+.so-cascader-disabled .so-cascader-result .so-select-multi {
+  visibility: visible;
+  cursor: not-allowed;
+}
+.so-cascader:not(.so-cascader-disabled).so-cascader-focus .so-cascader-close,
 .so-cascader:not(.so-cascader-disabled) .so-cascader-result:hover .so-cascader-close {
   display: block;
 }
+.so-cascader:not(.so-cascader-disabled).so-cascader-focus .so-cascader-result-clearable .so-select-multi,
+.so-cascader:not(.so-cascader-disabled) .so-cascader-result-clearable:hover .so-select-multi {
+  visibility: hidden;
+}
 .so-cascader-multiple .so-cascader-close {
   right: 19px;
 }

package/css/Checkbox/Group.js

@@ -108,12 +108,14 @@ function (_PureComponent) {
         data = _this$props2.data,
         datum = _this$props2.datum,
         keygen = _this$props2.keygen,
-        children = _this$props2.children;
+        children = _this$props2.children,
+        style = _this$props2.style;
     var className = (0, _classnames.default)((0, _styles.checkinputClass)('group', ['no-block', 'block'][Number(block)]), this.props.className);
 
     if (data === undefined) {
       return _react.default.createElement("div", {
-        className: className
+        className: className,
+        style: style
       }, _react.default.createElement(_context.Provider, {
         value: {
           onRawChange: this.handleRawChange,
@@ -123,7 +125,8 @@ function (_PureComponent) {
     }
 
     return _react.default.createElement("div", {
-      className: className
+      className: className,
+      style: style
     }, data.map(function (d, i) {
       return _react.default.createElement(_Checkbox.default, {
         checked: datum.check(d),

package/css/Checkbox/index.d.ts

@@ -47,7 +47,7 @@ export interface CheckboxProps<T> extends StandardProps, FormItemStandardProps<T
 
 // attention: checkbox group value is array
 
-export interface CheckboxGroupProps<Data, T> extends ListItemStandardProps<Data, T>, Omit<FormItemStandardProps<T[]>, 'placeholder'> {
+export interface CheckboxGroupProps<Data, T> extends ListItemStandardProps<Data, T>, Omit<FormItemStandardProps<T[]>, 'placeholder'>, StandardProps {
 
   /**
    * The data item

package/css/DatePicker/Container.js

@@ -55,6 +55,10 @@ var _locale = require("../locale");
 
 var _config = require("../config");
 
+var _InputTitle = _interopRequireDefault(require("../InputTitle"));
+
+var _styles3 = require("../InputTitle/styles");
+
 var FadeList = (0, _AnimationList.default)(['fade'], 'fast');
 var OptionList = (0, _AbsoluteList.default)(function (_ref) {
   var focus = _ref.focus,
@@ -324,14 +328,15 @@ function (_PureComponent) {
     }
   };
 
-  _proto.handleTextChange = function handleTextChange(date, index) {
+  _proto.handleTextChange = function handleTextChange(date, index, e) {
     var _this4 = this;
 
     var format = this.getFormat();
     var val = date ? _utils.default.format(date, format) : '';
 
     if (!this.props.range) {
-      this.props.onChange(val, this.triggerValueBlur.bind(this, this.handleBlur));
+      var close = !(e && e.target && this.element.contains(e.target));
+      this.props.onChange(val, close ? this.triggerValueBlur.bind(this, this.handleBlur) : undefined);
       return;
     }
 
@@ -416,7 +421,7 @@ function (_PureComponent) {
     var className = (0, _classnames.default)((0, _styles.datepickerClass)('txt', this.state["picker" + key] && 'text-focus'), _utils.default.isInvalid(date) && (0, _styles2.inputClass)('placeholder'));
     var resultFormat = formatResult || this.getFormat();
     return _react.default.createElement(_Text.default, {
-      key: key,
+      key: key || 'single',
       onTextSpanRef: this.bindTextSpan,
       focusElement: this.textSpan,
       className: className,
@@ -433,22 +438,36 @@ function (_PureComponent) {
   };
 
   _proto.renderResult = function renderResult() {
+    var _this6 = this;
+
     var _this$props4 = this.props,
         disabled = _this$props4.disabled,
         range = _this$props4.range,
         placeholder = _this$props4.placeholder,
-        type = _this$props4.type;
+        type = _this$props4.type,
+        innerTitle = _this$props4.innerTitle,
+        inputable = _this$props4.inputable;
     var value = this.props.value;
-    if (!value && range) value = [];
-    var isEmpty = !value || value.length === 0;
+    if (!value && range) value = []; // const isEmpty = !value || value.length === 0
+
     var clearable = this.props.clearable;
     if (disabled === true) clearable = false;
+    var isEmpty = (range ? value : [value]).reduce(function (result, str) {
+      var date = _this6.parseDate(str);
+
+      return result && _utils.default.isInvalid(date);
+    }, true);
     return _react.default.createElement("div", {
       className: (0, _styles.datepickerClass)('result')
+    }, _react.default.createElement(_InputTitle.default, {
+      className: (0, _styles.datepickerClass)('title-box'),
+      contentClass: (0, _styles3.inputTitleClass)('hidable'),
+      innerTitle: innerTitle,
+      open: !isEmpty || inputable && this.state.focus
     }, range ? [this.renderText(value[0], placeholder[0], 0), _react.default.createElement("span", {
       key: "-",
       className: (0, _styles.datepickerClass)('separate')
-    }, "~"), this.renderText(value[1], placeholder[1], 1)] : this.renderText(value, placeholder), _react.default.createElement(_Icon.default, {
+    }, "~"), this.renderText(value[1], placeholder[1], 1)] : this.renderText(value, placeholder)), _react.default.createElement(_Icon.default, {
       className: isEmpty || !clearable ? '' : 'indecator',
       name: type === 'time' ? 'Clock' : 'Calendar'
     }), !isEmpty && clearable && _react.default.createElement(_Icon.default, {
@@ -488,7 +507,7 @@ function (_PureComponent) {
   };
 
   _proto.renderPicker = function renderPicker() {
-    var _this6 = this;
+    var _this7 = this;
 
     if (!this.firstRender) return undefined;
     var _this$props6 = this.props,
@@ -517,7 +536,7 @@ function (_PureComponent) {
       range: range,
       quicks: quicks,
       value: range ? (value || []).map(function (v) {
-        return _this6.parseDate(v);
+        return _this7.parseDate(v);
       }) : this.parseDate(value),
       showTimePicker: !!value,
       allowSingle: allowSingle,
@@ -536,10 +555,11 @@ function (_PureComponent) {
         range = _this$props7.range,
         size = _this$props7.size,
         disabled = _this$props7.disabled,
-        align = _this$props7.align;
+        align = _this$props7.align,
+        innerTitle = _this$props7.innerTitle;
     var focus = this.state.focus;
     var rtl = (0, _config.isRTL)();
-    var className = (0, _styles.datepickerClass)('inner', range && 'range', size && "size-" + size, focus && 'focus', disabled === true && 'disabled', align && "align-" + align, getCurrentPosition(this.state.position), rtl && 'rtl');
+    var className = (0, _styles.datepickerClass)('inner', range && 'range', size && "size-" + size, focus && 'focus', disabled === true && 'disabled', align && "align-" + align, getCurrentPosition(this.state.position), rtl && 'rtl', innerTitle && 'inner-title');
     return _react.default.createElement("div", {
       // eslint-disable-next-line
       tabIndex: disabled === true ? -1 : 0,
@@ -587,7 +607,8 @@ Container.propTypes = {
   onPickerChange: _propTypes.default.func,
   disabledTime: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
   align: _propTypes.default.oneOf(['left', 'right', 'center']),
-  clearWithUndefined: _propTypes.default.bool
+  clearWithUndefined: _propTypes.default.bool,
+  innerTitle: _propTypes.default.string
 };
 Container.defaultProps = {
   clearable: true,

package/css/DatePicker/Month.js

@@ -76,7 +76,8 @@ function (_PureComponent) {
         type = _this$props3.type,
         current = _this$props3.current,
         index = _this$props3.index,
-        rangeDate = _this$props3.rangeDate;
+        rangeDate = _this$props3.rangeDate,
+        max = _this$props3.max;
 
     var date = _utils.default.toDate(MONTHBASE);
 
@@ -84,6 +85,10 @@ function (_PureComponent) {
     date.setFullYear(current.getFullYear());
     var isDisabled = min && _utils.default.compareMonth(min, date, 1) >= 0;
 
+    if (!isDisabled) {
+      isDisabled = max && _utils.default.compareMonth(date, max, 1) >= 0;
+    }
+
     if (!isDisabled && type === 'month' && typeof disabled === 'function') {
       isDisabled = disabled(date);
     }
@@ -137,6 +142,7 @@ Month.propTypes = {
   current: _propTypes.default.object.isRequired,
   disabled: _propTypes.default.func,
   // max: PropTypes.object,
+  max: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   min: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
   onChange: _propTypes.default.func.isRequired,
   onModeChange: _propTypes.default.func.isRequired,

package/css/DatePicker/Text.js

@@ -46,7 +46,7 @@ function (_PureComponent) {
   var _proto = Text.prototype;
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (prevProps.focus !== this.props.focus && this.props.focus && this.element && this.props.focusElement === this.element) {
+    if (prevProps.focus !== this.props.focus && this.props.focus && this.element && (this.props.focusElement === this.element || !this.props.focusElement)) {
       _element.focusElement.end(this.element);
     }
   };
@@ -68,7 +68,7 @@ function (_PureComponent) {
     if (txt === value) return;
 
     if (txt.trim().length === 0) {
-      onChange(undefined, index);
+      onChange(undefined, index, e);
     } else {
       var newValue = _utils.default.toDateWithFormat(txt, format, undefined); // if translate fail, clear
 
@@ -77,7 +77,7 @@ function (_PureComponent) {
         this.element.innerText = null;
       }
 
-      onChange(newValue, index);
+      onChange(newValue, index, e);
     }
   };
 

package/css/DatePicker/index.d.ts

@@ -251,6 +251,15 @@ FormItemStandardProps<T>,
    * default: none
    */
   onPickerChange?: (value: DatePickerValue, quickSelect: QuickSelect | void, areaType: AreaType) => void;
+
+  /**
+   * inner title
+   *
+   * 内嵌标题
+   *
+   * default: -
+   */
+  innerTitle?: string;
 }
 
 declare class DatePicker extends React.Component<DatePickerProps, {}> {

package/css/DatePicker/styles/datepicker.css

@@ -26,6 +26,15 @@ label.so-datepicker-r-time {
   padding: 0 0 8px 0;
   text-align: center;
 }
+.so-datepicker-title-box > .so-input-title-box-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.so-datepicker-range .so-datepicker-title-box .so-datepicker-txt:not(.so-datepicker-text-focus) {
+  background: var(--primary-color-fade-10, rgba(51, 153, 255, 0.1));
+  border-radius: 50px;
+}
 .so-datepicker-inner {
   width: 100%;
   padding: 6px 24px 6px 12px;
@@ -38,6 +47,15 @@ label.so-datepicker-r-time {
 .so-datepicker-size-large.so-datepicker-inner {
   padding: 8px 28px 8px 16px;
 }
+.so-datepicker-inner-title {
+  padding: 4px 20px 4px 8px;
+}
+.so-datepicker-size-small.so-datepicker-inner-title {
+  padding: 2px 20px 2px 8px;
+}
+.so-datepicker-size-large.so-datepicker-inner-title {
+  padding: 4px 20px 4px 8px;
+}
 .so-datepicker-result {
   position: relative;
   display: -webkit-box;
@@ -86,7 +104,7 @@ label.so-datepicker-r-time {
 .so-datepicker-separate {
   margin: 0 8px;
 }
-.so-datepicker-text-focus {
+.so-datepicker-txt.so-datepicker-text-focus {
   background: var(--primary-color, #3399ff);
   color: #fff;
   border-radius: 50px;
@@ -492,6 +510,15 @@ label.so-datepicker-r-time {
   margin-right: 0;
   margin-left: -16px;
 }
+.so-datepicker-rtl.so-datepicker-inner-title {
+  padding: 4px 8px 4px 20px;
+}
+.so-datepicker-rtl.so-datepicker-size-small.so-datepicker-inner-title {
+  padding: 2px 8px 2px 20px;
+}
+.so-datepicker-rtl.so-datepicker-size-large.so-datepicker-inner-title {
+  padding: 4px 8px 4px 20px;
+}
 .so-datepicker-rtl .so-datepicker-picker .so-datepicker-header .so-datepicker-left,
 .so-datepicker-rtl .so-datepicker-picker .so-datepicker-header .so-datepicker-right {
   -webkit-transform: rotate(180deg);

package/css/Datum/Tree.js

@@ -303,7 +303,8 @@ function () {
       var id = _this5.getKey(d, path[path.length - 1], i);
 
       if (_this5.dataMap.get(id)) {
-        console.warn("There is already a key \"" + id + "\" exists. The key must be unique.");
+        console.error("There is already a key \"" + id + "\" exists. The key must be unique.");
+        return;
       }
 
       _this5.dataMap.set(id, d);

package/css/EditableArea/EditableArea.js

@@ -27,6 +27,14 @@ var _icons = _interopRequireDefault(require("../icons"));
 
 var _element = require("../utils/dom/element");
 
+var _styles2 = require("../Input/styles");
+
+var _InputTitle = _interopRequireDefault(require("../InputTitle"));
+
+var _styles3 = require("../InputTitle/styles");
+
+var noop = function noop() {};
+
 function formatShowValue(value) {
   if (!value && value !== 0) return '';
   var arr = String(value).split('\n');
@@ -50,6 +58,7 @@ function (_React$PureComponent) {
     _this.bindContainer = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'container');
     _this.bindInput = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'input');
     _this.renderInput = _this.renderInput.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderPlace = _this.renderPlace.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.renderTextarea = _this.renderTextarea.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.onChange = _this.onChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.onBlur = _this.onBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
@@ -113,13 +122,18 @@ function (_React$PureComponent) {
         delay = _this$props.delay,
         placeholder = _this$props.placeholder,
         maxHeight = _this$props.maxHeight,
-        value = _this$props.value;
+        value = _this$props.value,
+        innerTitle = _this$props.innerTitle,
+        placeTitle = _this$props.placeTitle,
+        renderFooter = _this$props.renderFooter;
     if (!showTextarea) return null;
     return _react.default.createElement("div", {
       ref: this.bindContainer
     }, _react.default.createElement(_Textarea.default, {
       className: (0, _styles.editableAreaClass)('text-area'),
       autosize: true,
+      innerTitle: innerTitle,
+      placeTitle: placeTitle,
       value: value,
       rows: 1,
       delay: delay,
@@ -127,35 +141,76 @@ function (_React$PureComponent) {
       onBlur: this.onBlur,
       onFocus: this.handleFocus,
       placeholder: placeholder,
-      maxHeight: maxHeight
+      maxHeight: maxHeight,
+      renderFooter: renderFooter
     }));
   };
 
-  _proto.renderInput = function renderInput() {
+  _proto.renderResult = function renderResult() {
     var _this$props2 = this.props,
         placeholder = _this$props2.placeholder,
         disabled = _this$props2.disabled,
-        value = _this$props2.value;
+        value = _this$props2.value,
+        renderResult = _this$props2.renderResult,
+        placeTitle = _this$props2.placeTitle,
+        innerTitle = _this$props2.innerTitle;
+    var result = renderResult(value);
+    return _react.default.createElement("div", {
+      tabIndex: disabled ? -1 : 0,
+      className: (0, _classnames.default)((0, _styles.editableAreaClass)('input'), (0, _styles2.inputClass)('_')),
+      onFocus: this.showPop
+    }, _react.default.createElement(_InputTitle.default, {
+      placeTitle: placeTitle,
+      innerTitle: innerTitle,
+      open: !!value
+    }, _react.default.createElement("div", {
+      className: (0, _classnames.default)((0, _styles2.inputClass)('spare'), (0, _styles3.inputTitleClass)('hidable')),
+      ref: this.bindInput
+    }, result || _react.default.createElement("div", {
+      className: (0, _styles2.inputClass)('placeholder')
+    }, placeholder))));
+  };
+
+  _proto.renderInput = function renderInput() {
+    var _this$props3 = this.props,
+        placeholder = _this$props3.placeholder,
+        disabled = _this$props3.disabled,
+        value = _this$props3.value,
+        innerTitle = _this$props3.innerTitle,
+        placeTitle = _this$props3.placeTitle;
     return _react.default.createElement(_Input.default, {
+      innerTitle: innerTitle,
+      placeTitle: placeTitle,
       forwardedRef: this.bindInput,
       placeholder: placeholder,
       value: formatShowValue(value),
+      onChange: noop,
       className: (0, _styles.editableAreaClass)('input'),
       onFocus: this.showPop,
       disabled: disabled
     });
   };
 
+  _proto.renderPlace = function renderPlace() {
+    var renderResult = this.props.renderResult;
+
+    if (renderResult && typeof renderResult === 'function') {
+      return this.renderResult();
+    }
+
+    return this.renderInput();
+  };
+
   _proto.render = function render() {
     var showTextarea = this.state.showTextarea;
-    var _this$props3 = this.props,
-        width = _this$props3.width,
-        style = _this$props3.style,
-        className = _this$props3.className,
-        bordered = _this$props3.bordered,
-        clearable = _this$props3.clearable,
-        getPopupContainer = _this$props3.getPopupContainer,
-        value = _this$props3.value;
+    var _this$props4 = this.props,
+        width = _this$props4.width,
+        style = _this$props4.style,
+        className = _this$props4.className,
+        bordered = _this$props4.bordered,
+        clearable = _this$props4.clearable,
+        getPopupContainer = _this$props4.getPopupContainer,
+        value = _this$props4.value;
     var cls = (0, _classnames.default)(className, (0, _styles.editableAreaClass)('_', !bordered && 'none-bordered'));
     var ms = Object.assign({
       width: width
@@ -166,7 +221,7 @@ function (_React$PureComponent) {
     return _react.default.createElement("div", {
       className: cls,
       style: ms
-    }, this.renderInput(), _react.default.createElement(_Popover.default, {
+    }, this.renderPlace(), _react.default.createElement(_Popover.default, {
       visible: showTextarea,
       showArrow: false,
       className: (0, _styles.editableAreaClass)('popover'),
@@ -199,7 +254,11 @@ Editable.propTypes = {
   clearable: _propTypes.default.bool,
   getPopupContainer: _propTypes.default.func,
   maxHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  innerTitle: _propTypes.default.node,
+  placeTitle: _propTypes.default.node,
+  renderFooter: _propTypes.default.func,
+  renderResult: _propTypes.default.func
 };
 var _default = Editable;
 exports.default = _default;

package/css/EditableArea/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode } from "react"
 import {StandardProps, FormItemStandardProps} from '../@types/common'
 
 export interface EditableAreaProps extends StandardProps, FormItemStandardProps<string> {
@@ -92,6 +92,42 @@ export interface EditableAreaProps extends StandardProps, FormItemStandardProps<
    * default: none
    */
   width?: number | string;
+
+  /**
+   * inner title
+   *
+   * 内嵌标题
+   *
+   * default: -
+   */
+  innerTitle?: ReactNode,
+
+  /**
+   * Placeholder title, which needs to be used together with innerTitle
+   *
+   * 占位标题，需要配合 innerTitle 一起使用
+   *
+   * default: -
+   */
+  placeTitle?: ReactNode,
+
+  /**
+   * render textarea footer
+   *
+   * 渲染 textarea footer
+   *
+   * default: -
+   */
+  renderFooter?: (value: string)=> ReactNode,
+
+  /**
+   * Customize display results
+   *
+   * 自定义显示结果
+   *
+   * default: -
+   */
+  renderResult?: (value: string)=> ReactNode,
 }
 
 declare class EditableArea extends React.PureComponent<EditableAreaProps, any>{}

package/css/Form/styles/form.css

@@ -594,7 +594,8 @@
   overflow: hidden;
 }
 .so-input input,
-.so-input textarea {
+.so-input textarea,
+.so-input-spare {
   display: block;
   width: 100%;
   padding: 6px 12px;
@@ -642,12 +643,32 @@
   line-height: var(--common-line-height, 1.42857143);
   resize: none;
 }
-.so-input input.so-input-number {
+.so-input input.so-input-number:not(.so-input-rtl *) {
+  padding-right: 22px;
+}
+.so-input input.so-input-number + .so-input-clear-wrapper .so-input-clear:not(.so-input-rtl *) {
+  right: 22px;
+}
+.so-input-rtl input.so-input-number {
+  padding-left: 22px;
+}
+.so-input-rtl input.so-input-number + .so-input-clear-wrapper .so-input-clear {
+  left: 22px;
+  right: auto;
+}
+.so-input:not(.so-input-rtl) .so-input-number-title-box .so-input-title-box-title {
   padding-right: 22px;
 }
-.so-input input.so-input-number + .so-input-clear-wrapper .so-input-clear {
+.so-input-rtl .so-input-number-title-box .so-input-title-box-title {
+  padding-left: 22px;
+}
+.so-input:not(.so-input-rtl) .so-input-number-title-box + .so-input-clear-wrapper .so-input-clear {
   right: 22px;
 }
+.so-input-rtl .so-input-number-title-box + .so-input-clear-wrapper .so-input-clear {
+  left: 22px;
+  right: auto;
+}
 textarea.so-input-shadow {
   position: absolute;
   z-index: 0;
@@ -661,19 +682,55 @@ textarea.so-input-auto-size {
 textarea.so-input-textarea-resize {
   resize: vertical;
 }
+.so-input-with-footer {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.so-input-with-footer .so-input-footer {
+  padding: 12px 6px;
+  border-top: 1px solid var(--input-border-color, #ced4da);
+}
 .so-input-small {
   font-size: var(--font-size-small, 12px);
   line-height: 1.5;
 }
-.so-input-small input {
+.so-input-small input,
+.so-input-small .so-input-spare {
   padding: 5px 10px;
 }
+.so-input-small ::-webkit-input-placeholder,
+.so-input-small .so-input-placeholder {
+  font-size: var(--font-size-small, 12px);
+}
+.so-input-small ::-ms-input-placeholder,
+.so-input-small .so-input-placeholder {
+  font-size: var(--font-size-small, 12px);
+}
+.so-input-small ::placeholder,
+.so-input-small .so-input-placeholder {
+  font-size: var(--font-size-small, 12px);
+}
 .so-input-large {
   font-size: var(--font-size-large, 18px);
 }
-.so-input-large input {
+.so-input-large input,
+.so-input-large .so-input-spare {
   padding: 8px 12px;
 }
+.so-input-large ::-webkit-input-placeholder,
+.so-input-large .so-input-placeholder {
+  font-size: var(--font-size-large, 18px);
+}
+.so-input-large ::-ms-input-placeholder,
+.so-input-large .so-input-placeholder {
+  font-size: var(--font-size-large, 18px);
+}
+.so-input-large ::placeholder,
+.so-input-large .so-input-placeholder {
+  font-size: var(--font-size-large, 18px);
+}
 .so-input.so-input-rtl {
   direction: rtl;
 }

package/css/Input/Group.js

@@ -16,7 +16,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function Group(props) {
   var children = props.children,
       style = props.style,
-      other = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "style"]);
+      inputFocus = props.inputFocus,
+      other = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "style", "inputFocus"]);
   return _react.Children.toArray(children).map(function (child, i) {
     if (typeof child === 'string') {
       return _react.default.createElement("span", {