shineout 1.10.0-rc.4 → 1.10.0

package/css/Cascader/Cascader.js

@@ -209,13 +209,18 @@ function (_PureComponent) {
     } else {
       var v = value[value.length - 1];
       var data = this.datum.getDataById(v);
-      var id = this.datum.getKey(data);
 
-      var _ref2 = this.datum.getPath(id) || {},
-          path = _ref2.path;
+      try {
+        var id = this.datum.getKey(data);
 
-      path = path || [];
-      this.handlePathChange(id, null, path);
+        var _ref2 = this.datum.getPath(id) || {},
+            path = _ref2.path;
+
+        path = path || [];
+        this.handlePathChange(id, null, path);
+      } catch (e) {
+        console.error(e);
+      }
     }
   };
 

package/css/Cascader/Result.js

@@ -103,21 +103,7 @@ function (_PureComponent) {
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(preProps) {
-    var _this$props = this.props,
-        compressed = _this$props.compressed,
-        _this$props$value = _this$props.value,
-        value = _this$props$value === void 0 ? [] : _this$props$value,
-        onFilter = _this$props.onFilter;
-
-    if (compressed) {
-      if ((preProps.value || []).join('') !== (value || []).join('')) {
-        this.resetMore();
-      } else if (value.length && this.shouldResetMore) {
-        this.shouldResetMore = false;
-        this.state.more = (0, _More.getResetMore)(onFilter, this.resultEl, this.resultEl.querySelectorAll("." + (0, _styles3.cascaderClass)('item')));
-        this.forceUpdate();
-      }
-    }
+    this.updateMore(preProps);
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
@@ -134,6 +120,27 @@ function (_PureComponent) {
     this.resultEl = el;
   };
 
+  _proto.updateMore = function updateMore(preProps) {
+    var _this$props = this.props,
+        compressed = _this$props.compressed,
+        _this$props$value = _this$props.value,
+        value = _this$props$value === void 0 ? [] : _this$props$value,
+        onFilter = _this$props.onFilter,
+        data = _this$props.data;
+
+    if (compressed) {
+      if ((preProps.value || []).join('') !== (value || []).join('')) {
+        this.resetMore();
+      } else if ((preProps.data || []).length !== (data || []).length) {
+        this.resetMore();
+      } else if (value.length && this.shouldResetMore) {
+        this.shouldResetMore = false;
+        this.state.more = (0, _More.getResetMore)(onFilter, this.resultEl, this.resultEl.querySelectorAll("." + (0, _styles3.cascaderClass)('item')));
+        this.forceUpdate();
+      }
+    }
+  };
+
   _proto.resetMore = function resetMore() {
     if (!this.props.compressed) return;
     this.shouldResetMore = true;
@@ -386,7 +393,8 @@ Result.propTypes = {
   selectId: _propTypes.default.string,
   showList: _propTypes.default.func,
   size: _propTypes.default.string,
-  showArrow: _propTypes.default.bool
+  showArrow: _propTypes.default.bool,
+  data: _propTypes.default.array
 };
 Result.defaultProps = {
   value: []

package/css/Checkbox/styles/checkinput.css

@@ -7,6 +7,10 @@
   cursor: pointer;
   vertical-align: middle;
 }
+.so-checkinput-rtl.so-checkinput {
+  margin-left: var(--checkbox-margin-right, 24px);
+  margin-right: 0;
+}
 .so-checkinput input[type='checkbox'],
 .so-checkinput input[type='radio'] {
   position: absolute;
@@ -15,6 +19,11 @@
   clip: rect(0, 0, 0, 0);
   visibility: hidden;
 }
+.so-checkinput-rtl.so-checkinput input[type='checkbox'],
+.so-checkinput-rtl.so-checkinput input[type='radio'] {
+  left: auto;
+  right: 0;
+}
 @-webkit-keyframes so-checkinput-focus {
   0% {
     -webkit-box-shadow: 0 0 0 0 var(--primary-color-fade-50, rgba(51, 153, 255, 0.5));
@@ -98,6 +107,9 @@
   transition: all 0.15s ease-in-out;
   border-radius: 0px;
 }
+.so-checkinput-rtl.so-checkinput-button .so-checkinput {
+  margin-left: 0;
+}
 .so-checkinput-button .so-checkinput:focus,
 .so-checkinput-button .so-checkinput:hover,
 .so-checkinput-button .so-checkinput:active {
@@ -128,8 +140,11 @@ fieldset[disabled] .so-checkinput-button .so-checkinput:active {
 .so-checkinput-button .so-checkinput > input {
   display: none;
 }
-.so-checkinput-button .so-checkinput:not(:first-child) {
-  border-left-width: 0px;
+.so-checkinput-button .so-checkinput:not(:first-child):not(.so-checkinput-rtl *) {
+  border-left-width: 0;
+}
+.so-checkinput-rtl.so-checkinput-button .so-checkinput:not(:first-child) {
+  border-right-width: 0;
 }
 .so-checkinput-button .so-checkinput:not(:first-child):before {
   position: absolute;
@@ -146,6 +161,10 @@ fieldset[disabled] .so-checkinput-button .so-checkinput:active {
   -webkit-transition: background-color 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out;
 }
+.so-checkinput-rtl.so-checkinput-button .so-checkinput:not(:first-child):before {
+  left: auto;
+  right: -1px;
+}
 .so-checkinput-button .so-checkinput:not(:last-child)::after {
   position: absolute;
   top: -1px;
@@ -162,6 +181,10 @@ fieldset[disabled] .so-checkinput-button .so-checkinput:active {
   -webkit-transition: background-color 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out;
 }
+.so-checkinput-rtl.so-checkinput-button .so-checkinput:not(:last-child)::after {
+  right: auto;
+  left: -1px;
+}
 .so-checkinput-button .so-checkinput:hover:not(.so-checkinput-disabled)::before,
 .so-checkinput-button .so-checkinput:active:not(.so-checkinput-disabled)::before,
 .so-checkinput-button .so-checkinput:focus:not(.so-checkinput-disabled)::before {
@@ -293,15 +316,26 @@ fieldset[disabled] .so-checkinput-button .so-checkinput.so-checkinput-checked:ac
   border-top-left-radius: var(--radio-button-group-border-radius, var(--button-border-radius, 3px));
   border-bottom-left-radius: var(--radio-button-group-border-radius, var(--button-border-radius, 3px));
 }
+.so-checkinput-rtl.so-checkinput-button .so-checkinput:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: var(--radio-button-group-border-radius, var(--button-border-radius, 3px));
+  border-bottom-right-radius: var(--radio-button-group-border-radius, var(--button-border-radius, 3px));
+}
 .so-checkinput-button .so-checkinput:last-child {
   border-top-right-radius: var(--radio-button-group-border-radius, var(--button-border-radius, 3px));
   border-bottom-right-radius: var(--radio-button-group-border-radius, var(--button-border-radius, 3px));
 }
+.so-checkinput-rtl.so-checkinput-button .so-checkinput:last-child {
+  border-top-left-radius: var(--radio-button-group-border-radius, var(--button-border-radius, 3px));
+  border-bottom-left-radius: var(--radio-button-group-border-radius, var(--button-border-radius, 3px));
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
 .so-checkinput-button.so-checkinput-outline .so-checkinput.so-checkinput-checked {
   border-color: var(--primary-color, #3399ff);
   background-color: #fff;
   color: var(--primary-color, #3399ff);
-  border-right-width: 1px;
 }
 .so-checkinput-button.so-checkinput-outline .so-checkinput.so-checkinput-checked:hover,
 .so-checkinput-button.so-checkinput-outline .so-checkinput.so-checkinput-checked:active,
@@ -601,15 +635,3 @@ i.so-checkinput-radio.so-checkinput-indicator:after {
   direction: rtl;
   text-align: right;
 }
-.so-checkinput-rtl.so-checkinput-group.so-checkinput-button {
-  direction: ltr;
-  text-align: left;
-}
-.so-checkinput-rtl.so-checkinput-group.so-checkinput-button .so-checkinput-radio-container {
-  margin-left: 0;
-}
-.so-checkinput-rtl.so-checkinput-radio-container,
-.so-checkinput-rtl.so-checkinput-checkbox-container {
-  margin-right: 0;
-  margin-left: var(--checkbox-margin-right, 24px);
-}

package/css/DatePicker/index.d.ts

@@ -263,7 +263,14 @@ export interface DatePickerProps<T =DatePickerValue > extends StandardProps,
    * default: -
    */
   innerTitle?: ReactNode;
-  name: string | string[]
+  /**
+   * The name of a Form that accesses data
+   *
+   * Form 存取数据的名称
+   *
+   * default: -
+   */
+  name?: string | string[]
 }
 
 declare class DatePicker extends React.Component<DatePickerProps, {}> {

package/css/DatePicker/styles/datepicker.css

@@ -41,21 +41,39 @@ label.so-datepicker-r-time {
   outline: none;
   cursor: pointer;
 }
+.so-datepicker-rtl.so-datepicker-inner {
+  padding: 6px 12px 6px 24px;
+}
 .so-datepicker-size-small.so-datepicker-inner {
   padding: 5px 22px 5px 10px;
 }
+.so-datepicker-rtl.so-datepicker-size-small.so-datepicker-inner {
+  padding: 5px 10px 5px 22px;
+}
 .so-datepicker-size-large.so-datepicker-inner {
   padding: 8px 28px 8px 16px;
 }
+.so-datepicker-rtl.so-datepicker-size-large.so-datepicker-inner {
+  padding: 8px 16px 8px 28px;
+}
 .so-datepicker-inner-title {
   padding: 4px 20px 4px 8px;
 }
+.so-datepicker-rtl.so-datepicker-inner-title {
+  padding: 4px 8px 4px 20px;
+}
 .so-datepicker-size-small.so-datepicker-inner-title {
   padding: 2px 20px 2px 8px;
 }
+.so-datepicker-rtl.so-datepicker-size-small.so-datepicker-inner-title {
+  padding: 2px 8px 2px 20px;
+}
 .so-datepicker-size-large.so-datepicker-inner-title {
   padding: 4px 20px 4px 8px;
 }
+.so-datepicker-rtl.so-datepicker-size-large.so-datepicker-inner-title {
+  padding: 4px 8px 4px 20px;
+}
 .so-datepicker-result {
   position: relative;
   display: -webkit-box;
@@ -72,6 +90,12 @@ label.so-datepicker-r-time {
   margin: -9px -16px 0 0;
   font-size: 14px;
 }
+.so-datepicker-rtl .so-datepicker-result .so-datepicker-icon {
+  right: auto;
+  left: 0;
+  margin-right: 0;
+  margin-left: -16px;
+}
 .so-datepicker-result .so-datepicker-icon path {
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
@@ -127,9 +151,12 @@ label.so-datepicker-r-time {
           box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.02), 0 6px 12px rgba(0, 0, 0, 0.175);
   font-size: var(--font-size-base, 14px);
 }
-.so-datepicker-picker.so-datepicker-quick {
+.so-datepicker-picker.so-datepicker-quick:not(.so-datepicker-rtl *) {
   padding-left: 0;
 }
+.so-datepicker-rtl .so-datepicker-picker.so-datepicker-quick {
+  padding-right: 0;
+}
 .so-datepicker-picker span {
   color: var(--gray-600, #6c757d);
 }
@@ -174,6 +201,7 @@ label.so-datepicker-r-time {
 }
 .so-datepicker-picker .so-datepicker-header .so-datepicker-ym + .so-datepicker-ym {
   text-align: left;
+  text-align: start;
 }
 .so-datepicker-picker span.so-datepicker-today {
   color: var(--primary-color, #3399ff);
@@ -248,6 +276,10 @@ label.so-datepicker-r-time {
 .so-datepicker-range-picker > div:nth-last-child(2) {
   margin-right: 12px;
 }
+.so-datepicker-rtl .so-datepicker-range-picker > div:nth-last-child(2) {
+  margin-right: 0;
+  margin-left: 12px;
+}
 .so-datepicker-range-picker > div:last-child {
   position: relative;
 }
@@ -258,6 +290,10 @@ label.so-datepicker-r-time {
   height: 100%;
   border-left: 1px solid var(--divider-color, #f0f0f0);
 }
+.so-datepicker-rtl .so-datepicker-range-picker > div:last-child:before {
+  left: auto;
+  right: -6px;
+}
 .so-datepicker-day-picker {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -299,10 +335,22 @@ label.so-datepicker-r-time {
   border-bottom-left-radius: 16px;
   border-top-left-radius: 16px;
 }
+.so-datepicker-rtl .so-datepicker-day-picker .so-datepicker-list div.so-datepicker-hover-start {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  border-bottom-right-radius: 16px;
+  border-top-right-radius: 16px;
+}
 .so-datepicker-day-picker .so-datepicker-list div.so-datepicker-hover-end {
   border-bottom-right-radius: 16px;
   border-top-right-radius: 16px;
 }
+.so-datepicker-rtl .so-datepicker-day-picker .so-datepicker-list div.so-datepicker-hover-end {
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 16px;
+  border-top-left-radius: 16px;
+}
 .so-datepicker-day-picker .so-datepicker-list div.so-datepicker-active.so-datepicker-hover-start span,
 .so-datepicker-day-picker .so-datepicker-list div.so-datepicker-active.so-datepicker-hover-end span {
   background: var(--primary-color, #3399ff);
@@ -339,12 +387,20 @@ label.so-datepicker-r-time {
   padding-left: 12px;
   border-top: solid 1px #f2f2f2;
 }
+.so-datepicker-rtl .so-datepicker-day-picker .so-datepicker-datetime {
+  padding-left: 0px;
+  padding-right: 12px;
+}
 .so-datepicker-day-picker .so-datepicker-datetime .so-datepicker-clock {
   fill: var(--gray-600, #6c757d);
   margin-right: 8px;
   position: relative;
   top: 2px;
 }
+.so-datepicker-rtl .so-datepicker-day-picker .so-datepicker-datetime .so-datepicker-clock {
+  margin-right: 0;
+  margin-left: 8px;
+}
 .so-datepicker-day-picker .so-datepicker-datetime .so-datepicker-clock > svg {
   width: 14px;
   height: 14px;
@@ -359,6 +415,10 @@ label.so-datepicker-r-time {
           box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.02), 0 -2px 12px rgba(0, 0, 0, 0.175);
   visibility: hidden;
 }
+.so-datepicker-rtl .so-datepicker-day-picker .so-datepicker-datetime .so-datepicker-time-picker {
+  left: auto;
+  right: 0;
+}
 .so-datepicker-day-picker .so-datepicker-datetime:hover .so-datepicker-time-picker {
   z-index: 100;
   visibility: visible;
@@ -413,9 +473,18 @@ label.so-datepicker-r-time {
   font-size: var(--font-size-base, 14px);
   text-align: left;
 }
+.so-datepicker-rtl .so-datepicker-time-picker .so-datepicker-time-list {
+  text-align: right;
+}
 .so-datepicker-time-picker .so-datepicker-time-list:last-child {
   border-right: 0;
 }
+.so-datepicker-rtl .so-datepicker-time-picker .so-datepicker-time-list:last-child {
+  border-right: 1px solid var(--gray-200, #e9ecef);
+}
+.so-datepicker-rtl .so-datepicker-time-picker .so-datepicker-time-list:first-child {
+  border-right: 0;
+}
 .so-datepicker-time-picker .so-datepicker-time-list .so-datepicker-pad {
   height: 60px;
 }
@@ -427,6 +496,11 @@ label.so-datepicker-r-time {
   line-height: 30px;
   height: 30px;
 }
+.so-datepicker-rtl .so-datepicker-time-picker .so-datepicker-time-list span,
+.so-datepicker-rtl .so-datepicker-time-picker .so-datepicker-time-list a {
+  padding-left: 0;
+  padding-right: 18px;
+}
 .so-datepicker-time-picker .so-datepicker-time-list .so-datepicker-time-active {
   color: #000;
   font-weight: bold;
@@ -446,6 +520,10 @@ label.so-datepicker-r-time {
   min-width: 80px;
   border-right: 1px solid var(--divider-color, #f0f0f0);
 }
+.so-datepicker-rtl .so-datepicker-quick-select {
+  border-right: none;
+  border-left: 1px solid var(--divider-color, #f0f0f0);
+}
 .so-datepicker-quick-select-item {
   max-width: 120px;
   text-overflow: ellipsis;
@@ -472,6 +550,10 @@ label.so-datepicker-r-time {
   bottom: 0;
   width: 2px;
 }
+.so-datepicker-rtl .so-datepicker-quick-select-item::after {
+  right: auto;
+  left: 0;
+}
 .so-datepicker-quick-select-item-active {
   color: var(--primary-color, #3399ff);
 }
@@ -501,64 +583,9 @@ label.so-datepicker-r-time {
   direction: rtl;
   text-align: right;
 }
-.so-datepicker-rtl.so-datepicker-inner {
-  padding: 6px 12px 6px 24px;
-}
-.so-datepicker-rtl.so-datepicker-inner .so-datepicker-result .so-datepicker-icon {
-  right: auto;
-  left: 0;
-  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);
       -ms-transform: rotate(180deg);
           transform: rotate(180deg);
 }
-.so-datepicker-rtl .so-datepicker-range-picker > div:nth-last-child(2) {
-  margin-right: 0;
-  margin-left: 12px;
-}
-.so-datepicker-rtl .so-datepicker-range-picker > div:last-child:before {
-  content: none;
-}
-.so-datepicker-rtl .so-datepicker-range-picker > div:last-child:after {
-  content: ' ';
-  position: absolute;
-  height: 100%;
-  right: -6px;
-  top: 0;
-  border-left: 1px solid var(--divider-color, #f0f0f0);
-}
-.so-datepicker-rtl .so-datepicker-day-picker .so-datepicker-list .so-datepicker-hover-end {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-left-radius: 16px;
-  border-top-left-radius: 16px;
-}
-.so-datepicker-rtl .so-datepicker-day-picker .so-datepicker-list .so-datepicker-hover-start {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  border-bottom-right-radius: 16px;
-  border-top-right-radius: 16px;
-}
-.so-datepicker-rtl .so-datepicker-time-picker .so-datepicker-time-list:first-child {
-  border-width: 0;
-}
-.so-datepicker-rtl .so-datepicker-time-picker .so-datepicker-time-list:last-child {
-  border-right: 1px solid var(--gray-200, #e9ecef);
-}
-.so-datepicker-rtl .so-datepicker-quick-select {
-  border-right: none;
-  border-left: 1px solid var(--divider-color, #f0f0f0);
-}

package/css/Message/styles/index.js

@@ -7,9 +7,12 @@ exports.messageClass = void 0;
 
 require("../../styles/normalize.css");
 
+require("../../Alert/styles/alert.css");
+
 var _message = _interopRequireDefault(require("./message.css"));
 
 var _classname = _interopRequireDefault(require("../../utils/classname"));
 
+// rely Alert
 var messageClass = (0, _classname.default)(_message.default, 'message');
 exports.messageClass = messageClass;

package/css/Rule/index.d.ts

@@ -62,7 +62,7 @@ export interface RuleResult {
 
   range(min?: number, max?: number, message?: string): Range;
 
-  regExp(reg?: RegExp | string): RegExpParams;
+  regExp(reg?: RegExp | string, message?: string): RegExpParams;
 
   email(message?: string): Type;
 

package/css/Select/More.js

@@ -22,6 +22,7 @@ var _element = require("../utils/dom/element");
 
 var _Popover = _interopRequireDefault(require("../Popover"));
 
+// if num = -1 display all else display num
 function getResetMore(onFilter, container, doms) {
   if (!container || !doms || !doms.length) return -1;
   var items = Array.from(doms);
@@ -51,10 +52,18 @@ function getResetMore(onFilter, container, doms) {
     for (var i = 0; i < itemWidthArr.length; i++) {
       var itemLen = itemWidthArr[i]; // number length
 
-      var reset = "+" + (items.length - 1 - i);
-      hideEl.childNodes[0].innerText = reset; // (+num) width
+      var resetNum = items.length - 1 - i;
+      var moreWidth = void 0;
+
+      if (resetNum <= 0) {
+        moreWidth = 0;
+      } else {
+        var reset = "+" + resetNum;
+        hideEl.childNodes[0].innerText = reset; // (+num) width
+
+        moreWidth = hideEl.offsetWidth + hideMargin;
+      }
 
-      var moreWidth = hideEl.offsetWidth + hideMargin;
       len += itemLen;
 
       if (len > contentWidth - moreWidth) {
@@ -114,7 +123,7 @@ function (_Component) {
         cls = _this$props.cls,
         showNum = _this$props.showNum;
     var status = this.state.status;
-    if (showNum < 0 || showNum > data.length) return _react.default.createElement(_react.default.Fragment, null, data, _react.default.createElement("a", {
+    if (showNum < 0 || showNum >= data.length) return _react.default.createElement(_react.default.Fragment, null, data, _react.default.createElement("a", {
       key: "hidden",
       className: className,
       style: {

package/css/Select/Result.js

@@ -125,13 +125,47 @@ function (_PureComponent) {
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(preProps) {
+    this.updateMore(preProps);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.cancelResizeObserver) this.cancelResizeObserver();
+  };
+
+  _proto.bindResult = function bindResult(el) {
+    this.resultEl = el;
+  };
+
+  _proto.updateMore = function updateMore(preProps) {
     var _this$props = this.props,
         result = _this$props.result,
         compressed = _this$props.compressed,
-        onFilter = _this$props.onFilter;
+        onFilter = _this$props.onFilter,
+        renderResult = _this$props.renderResult,
+        renderUnmatched = _this$props.renderUnmatched;
 
     if (compressed) {
-      if ((preProps.result || []).join('') !== (result || []).join('')) {
+      var shouldRest = false;
+
+      if (preProps.result.length !== result.length) {
+        shouldRest = true;
+      } else {
+        var i = preProps.result.length - 1;
+
+        while (i >= 0) {
+          var before = getResultContent(preProps.result[i], preProps.renderResult, preProps.renderUnmatched);
+          var now = getResultContent(result[i], renderResult, renderUnmatched);
+
+          if (before !== now) {
+            shouldRest = true;
+            break;
+          }
+
+          i -= 1;
+        }
+      }
+
+      if (shouldRest) {
         this.resetMore();
       } else if (result.length && this.shouldResetMore) {
         this.shouldResetMore = false;
@@ -141,14 +175,6 @@ function (_PureComponent) {
     }
   };
 
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    if (this.cancelResizeObserver) this.cancelResizeObserver();
-  };
-
-  _proto.bindResult = function bindResult(el) {
-    this.resultEl = el;
-  };
-
   _proto.resetMore = function resetMore() {
     if (!this.props.compressed) return;
     this.shouldResetMore = true;

package/css/Table/index.d.ts

@@ -124,7 +124,7 @@ export interface ColumnItem<T> {
    *
    * default: none
    */
-  sorter?: ((order: ColumnOrder) => (prevRowData: T, nextRowData: T) => boolean) | string;
+  sorter?: ((order: ColumnOrder) => (prevRowData: T, nextRowData: T) => number) | string;
 
   /**
    * The content of the header
@@ -552,7 +552,7 @@ export interface TableProps<Value, TRD> extends StandardProps, ListItemStandardP
    * default: false
    */
  changedByExpand?: boolean
-  
+
   /*
    * customize sort icons
    *

package/css/Tree/Checkbox.js

@@ -92,6 +92,6 @@ exports.default = _default;
 (0, _defineProperty2.default)(_default, "propTypes", {
   datum: _propTypes.default.object.isRequired,
   disabled: _propTypes.default.bool,
-  id: _propTypes.default.string.isRequired,
+  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   onChange: _propTypes.default.func.isRequired
 });

package/css/Tree/Content.js

@@ -163,7 +163,7 @@ Content.propTypes = {
   draggable: _propTypes.default.bool,
   expanded: _propTypes.default.bool,
   loader: _propTypes.default.func,
-  id: _propTypes.default.any,
+  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   onChange: _propTypes.default.func,
   onToggle: _propTypes.default.func,
   onDragOver: _propTypes.default.func,

package/css/Tree/List.js

@@ -107,7 +107,7 @@ List.propTypes = {
   className: _propTypes.default.string,
   data: _propTypes.default.array,
   expanded: _propTypes.default.bool,
-  id: _propTypes.default.any,
+  id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   isRoot: _propTypes.default.bool,
   keygen: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired,
   line: _propTypes.default.bool,