amis 1.4.2-beta.1 → 1.4.2-beta.15

package/lib/components/{ChainedCheckboxes.js → ChainedSelection.js}

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChainedCheckboxes = void 0;
+exports.ChainedSelection = void 0;
 var tslib_1 = require("tslib");
 /**
  * 级联多选框，支持无限极。从左侧到右侧一层层点选。
  */
-var Checkboxes_1 = require("./Checkboxes");
+var Selection_1 = require("./Selection");
 var theme_1 = require("../theme");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
 var uncontrollable_1 = require("uncontrollable");
@@ -14,16 +14,16 @@ var helper_1 = require("../utils/helper");
 var times_1 = (0, tslib_1.__importDefault)(require("lodash/times"));
 var Spinner_1 = (0, tslib_1.__importDefault)(require("./Spinner"));
 var locale_1 = require("../locale");
-var ChainedCheckboxes = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ChainedCheckboxes, _super);
-    function ChainedCheckboxes() {
+var ChainedSelection = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ChainedSelection, _super);
+    function ChainedSelection() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
             selected: []
         };
         return _this;
     }
-    ChainedCheckboxes.prototype.componentDidMount = function () {
+    ChainedSelection.prototype.componentDidMount = function () {
         var defaultSelectedIndex = this.props.defaultSelectedIndex;
         if (defaultSelectedIndex !== undefined) {
             this.setState({
@@ -31,7 +31,7 @@ var ChainedCheckboxes = /** @class */ (function (_super) {
             });
         }
     };
-    ChainedCheckboxes.prototype.selectOption = function (option, depth, id) {
+    ChainedSelection.prototype.selectOption = function (option, depth, id) {
         var onDeferLoad = this.props.onDeferLoad;
         var selected = this.state.selected.concat();
         selected.splice(depth, selected.length - depth);
@@ -40,23 +40,29 @@ var ChainedCheckboxes = /** @class */ (function (_super) {
             selected: selected
         }, option.defer && onDeferLoad ? function () { return onDeferLoad(option); } : undefined);
     };
-    ChainedCheckboxes.prototype.renderOption = function (option, index, depth, id) {
+    ChainedSelection.prototype.renderItem = function (option, index, depth, id) {
+        var _this = this;
+        var _a = this.props, labelClassName = _a.labelClassName, disabled = _a.disabled, cx = _a.classnames, itemClassName = _a.itemClassName, itemRender = _a.itemRender, multiple = _a.multiple;
+        var valueArray = this.valueArray;
+        return (react_1.default.createElement("div", { key: index, className: cx('ChainedSelection-item', itemClassName, option.className, disabled || option.disabled ? 'is-disabled' : '', !!~valueArray.indexOf(option) ? 'is-active' : ''), onClick: function () { return _this.toggleOption(option); } },
+            react_1.default.createElement("div", { className: cx('ChainedSelection-itemLabel') }, itemRender(option)),
+            multiple ? (react_1.default.createElement(Checkbox_1.default, { size: "sm", checked: !!~valueArray.indexOf(option), disabled: disabled || option.disabled, labelClassName: labelClassName, description: option.description })) : null));
+    };
+    ChainedSelection.prototype.renderOption = function (option, index, depth, id) {
         var _this = this;
         var _a = this.props, labelClassName = _a.labelClassName, disabled = _a.disabled, cx = _a.classnames, itemClassName = _a.itemClassName, itemRender = _a.itemRender;
         var valueArray = this.valueArray;
         if (Array.isArray(option.children) || option.defer) {
-            return (react_1.default.createElement("div", { key: index, className: cx('ChainedCheckboxes-item', itemClassName, option.className, disabled || option.disabled ? 'is-disabled' : '', ~this.state.selected.indexOf(id) ? 'is-active' : ''), onClick: function () { return _this.selectOption(option, depth, id); } },
-                react_1.default.createElement("div", { className: cx('ChainedCheckboxes-itemLabel') }, itemRender(option)),
+            return (react_1.default.createElement("div", { key: index, className: cx('ChainedSelection-item', itemClassName, option.className, disabled || option.disabled ? 'is-disabled' : '', ~this.state.selected.indexOf(id) ? 'is-active' : ''), onClick: function () { return _this.selectOption(option, depth, id); } },
+                react_1.default.createElement("div", { className: cx('ChainedSelection-itemLabel') }, itemRender(option)),
                 option.defer && option.loading ? react_1.default.createElement(Spinner_1.default, { size: "sm", show: true }) : null));
         }
-        return (react_1.default.createElement("div", { key: index, className: cx('ChainedCheckboxes-item', itemClassName, option.className, disabled || option.disabled ? 'is-disabled' : ''), onClick: function () { return _this.toggleOption(option); } },
-            react_1.default.createElement("div", { className: cx('ChainedCheckboxes-itemLabel') }, itemRender(option)),
-            react_1.default.createElement(Checkbox_1.default, { size: "sm", checked: !!~valueArray.indexOf(option), disabled: disabled || option.disabled, labelClassName: labelClassName, description: option.description })));
+        return this.renderItem(option, index, depth, id);
     };
-    ChainedCheckboxes.prototype.render = function () {
+    ChainedSelection.prototype.render = function () {
         var _this = this;
         var _a = this.props, value = _a.value, options = _a.options, className = _a.className, placeholder = _a.placeholder, cx = _a.classnames, option2value = _a.option2value, itemRender = _a.itemRender, __ = _a.translate;
-        this.valueArray = Checkboxes_1.BaseCheckboxes.value2array(value, options, option2value);
+        this.valueArray = Selection_1.BaseSelection.value2array(value, options, option2value);
         var body = [];
         if (Array.isArray(options) && options.length) {
             var selected_1 = this.state.selected.concat();
@@ -68,8 +74,8 @@ var ChainedCheckboxes = /** @class */ (function (_super) {
                 var nextSubTitle = '';
                 var nextPlaceholder = '';
                 var nextIndexes = indexes;
-                body.push(react_1.default.createElement("div", { key: depth, className: cx('ChainedCheckboxes-col') },
-                    subTitle ? (react_1.default.createElement("div", { className: cx('ChainedCheckboxes-subTitle') }, subTitle)) : null,
+                body.push(react_1.default.createElement("div", { key: depth, className: cx('ChainedSelection-col') },
+                    subTitle ? (react_1.default.createElement("div", { className: cx('ChainedSelection-subTitle') }, subTitle)) : null,
                     Array.isArray(options) && options.length ? (options.map(function (option, index) {
                         var id = indexes.concat(index).join('-');
                         if (id === selected) {
@@ -79,7 +85,7 @@ var ChainedCheckboxes = /** @class */ (function (_super) {
                             nextPlaceholder = option.placeholder;
                         }
                         return _this.renderOption(option, index, depth, id);
-                    })) : (react_1.default.createElement("div", { className: cx('ChainedCheckboxes-placeholder') }, __(placeholder)))));
+                    })) : (react_1.default.createElement("div", { className: cx('ChainedSelection-placeholder') }, __(placeholder)))));
                 return {
                     options: nextOptions,
                     subTitle: nextSubTitle,
@@ -94,12 +100,12 @@ var ChainedCheckboxes = /** @class */ (function (_super) {
                 placeholder: placeholder
             });
         }
-        return (react_1.default.createElement("div", { className: cx('ChainedCheckboxes', className) }, body && body.length ? (body) : (react_1.default.createElement("div", { className: cx('ChainedCheckboxes-placeholder') }, __(placeholder)))));
+        return (react_1.default.createElement("div", { className: cx('ChainedSelection', className) }, body && body.length ? (body) : (react_1.default.createElement("div", { className: cx('ChainedSelection-placeholder') }, __(placeholder)))));
     };
-    return ChainedCheckboxes;
-}(Checkboxes_1.BaseCheckboxes));
-exports.ChainedCheckboxes = ChainedCheckboxes;
-exports.default = (0, theme_1.themeable)((0, locale_1.localeable)((0, uncontrollable_1.uncontrollable)(ChainedCheckboxes, {
+    return ChainedSelection;
+}(Selection_1.BaseSelection));
+exports.ChainedSelection = ChainedSelection;
+exports.default = (0, theme_1.themeable)((0, locale_1.localeable)((0, uncontrollable_1.uncontrollable)(ChainedSelection, {
     value: 'onChange'
 })));
-//# sourceMappingURL=./components/ChainedCheckboxes.js.map
+//# sourceMappingURL=./components/ChainedSelection.js.map

package/lib/components/ChainedSelection.js.map

@@ -0,0 +1,13 @@
+{
+    "version": 3,
+    "file": "ChainedSelection.js",
+    "sourceRoot": "",
+    "sources": [
+        "/src/components/ChainedSelection.tsx"
+    ],
+    "names": [],
+    "mappings": "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",
+    "sourcesContent": [
+        "/**\n * 级联多选框，支持无限极。从左侧到右侧一层层点选。\n */\nimport {BaseSelection, BaseSelectionProps} from './Selection';\nimport {themeable} from '../theme';\nimport React from 'react';\nimport {uncontrollable} from 'uncontrollable';\nimport Checkbox from './Checkbox';\nimport {Option} from './Select';\nimport {getTreeDepth} from '../utils/helper';\nimport times from 'lodash/times';\nimport Spinner from './Spinner';\nimport {localeable} from '../locale';\n\nexport interface ChainedSelectionProps extends BaseSelectionProps {\n  defaultSelectedIndex?: string;\n}\n\nexport interface ChainedSelectionState {\n  selected: Array<string>;\n}\n\nexport class ChainedSelection extends BaseSelection<\n  ChainedSelectionProps,\n  ChainedSelectionState\n> {\n  valueArray: Array<Option>;\n  state: ChainedSelectionState = {\n    selected: []\n  };\n\n  componentDidMount() {\n    const defaultSelectedIndex = this.props.defaultSelectedIndex;\n\n    if (defaultSelectedIndex !== undefined) {\n      this.setState({\n        selected: [`${defaultSelectedIndex}`]\n      });\n    }\n  }\n\n  selectOption(option: Option, depth: number, id: string) {\n    const {onDeferLoad} = this.props;\n\n    const selected = this.state.selected.concat();\n    selected.splice(depth, selected.length - depth);\n    selected.push(id);\n\n    this.setState(\n      {\n        selected\n      },\n      option.defer && onDeferLoad ? () => onDeferLoad(option) : undefined\n    );\n  }\n\n  renderItem(option: Option, index: number, depth: number, id: string) {\n    const {\n      labelClassName,\n      disabled,\n      classnames: cx,\n      itemClassName,\n      itemRender,\n      multiple\n    } = this.props;\n    const valueArray = this.valueArray;\n\n    return (\n      <div\n        key={index}\n        className={cx(\n          'ChainedSelection-item',\n          itemClassName,\n          option.className,\n          disabled || option.disabled ? 'is-disabled' : '',\n          !!~valueArray.indexOf(option) ? 'is-active' : ''\n        )}\n        onClick={() => this.toggleOption(option)}\n      >\n        <div className={cx('ChainedSelection-itemLabel')}>\n          {itemRender(option)}\n        </div>\n\n        {multiple ? (\n          <Checkbox\n            size=\"sm\"\n            checked={!!~valueArray.indexOf(option)}\n            disabled={disabled || option.disabled}\n            labelClassName={labelClassName}\n            description={option.description}\n          />\n        ) : null}\n      </div>\n    );\n  }\n\n  renderOption(option: Option, index: number, depth: number, id: string) {\n    const {\n      labelClassName,\n      disabled,\n      classnames: cx,\n      itemClassName,\n      itemRender\n    } = this.props;\n    const valueArray = this.valueArray;\n\n    if (Array.isArray(option.children) || option.defer) {\n      return (\n        <div\n          key={index}\n          className={cx(\n            'ChainedSelection-item',\n            itemClassName,\n            option.className,\n            disabled || option.disabled ? 'is-disabled' : '',\n            ~this.state.selected.indexOf(id) ? 'is-active' : ''\n          )}\n          onClick={() => this.selectOption(option, depth, id)}\n        >\n          <div className={cx('ChainedSelection-itemLabel')}>\n            {itemRender(option)}\n          </div>\n\n          {option.defer && option.loading ? <Spinner size=\"sm\" show /> : null}\n        </div>\n      );\n    }\n\n    return this.renderItem(option, index, depth, id);\n  }\n\n  render() {\n    const {\n      value,\n      options,\n      className,\n      placeholder,\n      classnames: cx,\n      option2value,\n      itemRender,\n      translate: __\n    } = this.props;\n\n    this.valueArray = BaseSelection.value2array(value, options, option2value);\n    let body: Array<React.ReactNode> = [];\n\n    if (Array.isArray(options) && options.length) {\n      const selected: Array<string | null> = this.state.selected.concat();\n      const depth = Math.min(getTreeDepth(options), 3);\n      times(Math.max(depth - selected.length, 1), () => selected.push(null));\n\n      selected.reduce(\n        (\n          {\n            body,\n            options,\n            subTitle,\n            indexes,\n            placeholder\n          }: {\n            body: Array<React.ReactNode>;\n            options: Array<Option> | null;\n            subTitle?: string;\n            indexes: Array<number>;\n            placeholder?: string;\n          },\n          selected,\n          depth\n        ) => {\n          let nextOptions: Array<Option> = [];\n          let nextSubTitle: string = '';\n          let nextPlaceholder: string = '';\n          let nextIndexes = indexes;\n\n          body.push(\n            <div key={depth} className={cx('ChainedSelection-col')}>\n              {subTitle ? (\n                <div className={cx('ChainedSelection-subTitle')}>\n                  {subTitle}\n                </div>\n              ) : null}\n              {Array.isArray(options) && options.length ? (\n                options.map((option, index) => {\n                  const id = indexes.concat(index).join('-');\n\n                  if (id === selected) {\n                    nextSubTitle = option.subTitle;\n                    nextOptions = option.children!;\n                    nextIndexes = indexes.concat(index);\n                    nextPlaceholder = option.placeholder;\n                  }\n\n                  return this.renderOption(option, index, depth, id);\n                })\n              ) : (\n                <div className={cx('ChainedSelection-placeholder')}>\n                  {__(placeholder)}\n                </div>\n              )}\n            </div>\n          );\n\n          return {\n            options: nextOptions,\n            subTitle: nextSubTitle,\n            placeholder: nextPlaceholder,\n            indexes: nextIndexes,\n            body: body\n          };\n        },\n        {\n          options,\n          body,\n          indexes: [],\n          placeholder\n        }\n      );\n    }\n\n    return (\n      <div className={cx('ChainedSelection', className)}>\n        {body && body.length ? (\n          body\n        ) : (\n          <div className={cx('ChainedSelection-placeholder')}>\n            {__(placeholder)}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default themeable(\n  localeable(\n    uncontrollable(ChainedSelection, {\n      value: 'onChange'\n    })\n  )\n);\n"
+    ]
+}

package/lib/components/Checkbox.d.ts

@@ -31,12 +31,12 @@ export declare class Checkbox extends React.Component<CheckboxProps, any> {
     render(): JSX.Element;
 }
 declare const _default: {
-    new (props: (Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps) | Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>): {
+    new (props: (Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps) | Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>): {
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps> & Readonly<{
+        readonly props: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps> & Readonly<{
             children?: React.ReactNode;
         }>;
         state: Readonly<{}>;
@@ -44,24 +44,24 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    new (props: Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps, context: any): {
+    new (props: Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps, context: any): {
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps> & Readonly<{
+        readonly props: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps> & Readonly<{
             children?: React.ReactNode;
         }>;
         state: Readonly<{}>;
@@ -69,17 +69,17 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "disabled" | "checked" | "name" | "size" | "inline" | "description" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "label" | "value" | "description" | "disabled" | "checked" | "name" | "size" | "inline" | "onChange" | "readOnly" | "labelClassName" | "partial"> & Partial<Pick<Omit<CheckboxProps, keyof import("../theme").ThemeProps>, "type" | "trueValue" | "falseValue">> & Partial<Pick<Pick<CheckboxProps, "type" | "trueValue" | "falseValue">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
     contextType: React.Context<string>;

package/lib/components/Collapse.d.ts

@@ -6,16 +6,44 @@
 /// <reference types="hoist-non-react-statics" />
 import React from 'react';
 import { ClassNamesFn } from '../theme';
+import { TranslateFn } from '../locale';
 export interface CollapseProps {
-    show?: boolean;
+    key?: string;
+    id?: string;
     mountOnEnter?: boolean;
     unmountOnExit?: boolean;
     className?: string;
     classPrefix: string;
     classnames: ClassNamesFn;
+    headerPosition?: 'top' | 'bottom';
+    header?: React.ReactElement;
+    body: any;
+    bodyClassName?: string;
+    disabled?: boolean;
+    collapsable?: boolean;
+    collapsed?: boolean;
+    showArrow?: boolean;
+    expandIcon?: React.ReactElement | null;
+    headingClassName?: string;
+    collapseHeader?: React.ReactElement | null;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'base';
+    onCollapse?: (item: any, collapsed: boolean) => void;
+    wrapperComponent?: any;
+    headingComponent?: any;
+    translate?: TranslateFn;
+    propsUpdate?: boolean;
 }
-export declare class Collapse extends React.Component<CollapseProps, any> {
-    static defaultProps: Pick<CollapseProps, 'show' | 'mountOnEnter' | 'unmountOnExit'>;
+export interface CollapseState {
+    collapsed: boolean;
+}
+export declare class Collapse extends React.Component<CollapseProps, CollapseState> {
+    static defaultProps: Partial<CollapseProps>;
+    state: CollapseState;
+    constructor(props: CollapseProps);
+    static getDerivedStateFromProps(nextProps: CollapseProps, preState: CollapseState): {
+        collapsed: boolean;
+    } | null;
+    toggleCollapsed(e: React.MouseEvent<HTMLElement>): void;
     contentDom: any;
     contentRef: (ref: any) => any;
     handleEnter(elem: HTMLElement): void;
@@ -26,12 +54,12 @@ export declare class Collapse extends React.Component<CollapseProps, any> {
     render(): JSX.Element;
 }
 declare const _default: {
-    new (props: (Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps) | Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>): {
+    new (props: (Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps) | Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>): {
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps> & Readonly<{
+        readonly props: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps> & Readonly<{
             children?: React.ReactNode;
         }>;
         state: Readonly<{}>;
@@ -39,24 +67,24 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
-    new (props: Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps, context: any): {
+    new (props: Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps, context: any): {
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps> & Readonly<{
+        readonly props: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps> & Readonly<{
             children?: React.ReactNode;
         }>;
         state: Readonly<{}>;
@@ -64,17 +92,17 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "show" | "mountOnEnter" | "unmountOnExit">> & Partial<Pick<Pick<CollapseProps, "show" | "mountOnEnter" | "unmountOnExit">, never>> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, never> & Partial<Pick<Omit<CollapseProps, keyof import("../theme").ThemeProps>, "body" | "header" | "key" | "disabled" | "id" | "size" | "translate" | "mountOnEnter" | "unmountOnExit" | "wrapperComponent" | "collapsed" | "headerPosition" | "bodyClassName" | "collapsable" | "showArrow" | "expandIcon" | "headingClassName" | "collapseHeader" | "onCollapse" | "headingComponent" | "propsUpdate">> & Partial<Pick<Partial<CollapseProps>, "classPrefix" | "classnames" | "className">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
     contextType: React.Context<string>;

package/lib/components/Collapse.js

@@ -12,6 +12,7 @@ var react_1 = (0, tslib_1.__importDefault)(require("react"));
 var theme_1 = require("../theme");
 var Transition_1 = tslib_1.__importStar(require("react-transition-group/Transition"));
 var helper_1 = require("../utils/helper");
+var helper_2 = require("../utils/helper");
 var collapseStyles = (_a = {},
     _a[Transition_1.EXITED] = 'out',
     _a[Transition_1.EXITING] = 'out',
@@ -19,11 +20,37 @@ var collapseStyles = (_a = {},
     _a);
 var Collapse = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(Collapse, _super);
-    function Collapse() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function Collapse(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            collapsed: false
+        };
         _this.contentRef = function (ref) { return (_this.contentDom = ref); };
+        _this.toggleCollapsed = _this.toggleCollapsed.bind(_this);
+        _this.state.collapsed = !!props.collapsed;
         return _this;
     }
+    Collapse.getDerivedStateFromProps = function (nextProps, preState) {
+        if (nextProps.propsUpdate && nextProps.collapsed !== preState.collapsed) {
+            return {
+                collapsed: !!nextProps.collapsed
+            };
+        }
+        return null;
+    };
+    Collapse.prototype.toggleCollapsed = function (e) {
+        if ((0, helper_2.isClickOnInput)(e)) {
+            return;
+        }
+        var props = this.props;
+        if (props.disabled || props.collapsable === false) {
+            return;
+        }
+        props.onCollapse && props.onCollapse(props, !this.state.collapsed);
+        this.setState({
+            collapsed: !this.state.collapsed
+        });
+    };
     Collapse.prototype.handleEnter = function (elem) {
         elem.style['height'] = '';
     };
@@ -46,20 +73,51 @@ var Collapse = /** @class */ (function (_super) {
         elem.style['height'] = '';
     };
     Collapse.prototype.render = function () {
+        var _a;
         var _this = this;
-        var _a = this.props, show = _a.show, children = _a.children, cx = _a.classnames, mountOnEnter = _a.mountOnEnter, unmountOnExit = _a.unmountOnExit;
-        return (react_1.default.createElement(Transition_1.default, { mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, in: show, timeout: 300, onEnter: this.handleEnter, onEntering: this.handleEntering, onEntered: this.handleEntered, onExit: this.handleExit, onExiting: this.handleExiting }, function (status) {
-            if (status === Transition_1.ENTERING) {
-                _this.contentDom.offsetWidth;
-            }
-            return (react_1.default.createElement("div", { className: cx('Collapse-contentWrapper', collapseStyles[status]), ref: _this.contentRef }, react_1.default.cloneElement(children, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, children.props), { className: cx('Collapse-content', children.props.className) }))));
-        }));
+        var _b = this.props, cx = _b.classnames, mountOnEnter = _b.mountOnEnter, unmountOnExit = _b.unmountOnExit, ns = _b.classPrefix, size = _b.size, WrapperComponent = _b.wrapperComponent, HeadingComponent = _b.headingComponent, className = _b.className, headingClassName = _b.headingClassName, headerPosition = _b.headerPosition, collapseHeader = _b.collapseHeader, header = _b.header, body = _b.body, bodyClassName = _b.bodyClassName, collapsable = _b.collapsable, __ = _b.translate, showArrow = _b.showArrow, expandIcon = _b.expandIcon, disabled = _b.disabled;
+        var finalHeader = this.state.collapsed ? header : collapseHeader || header;
+        var dom = [
+            finalHeader ? (react_1.default.createElement(HeadingComponent, { key: "header", onClick: this.toggleCollapsed, className: cx("Collapse-header", headingClassName) },
+                showArrow && collapsable
+                    ? expandIcon
+                        ? react_1.default.cloneElement(expandIcon, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, expandIcon.props), { className: cx('Collapse-icon-tranform') }))
+                        : react_1.default.createElement("span", { className: cx('Collapse-arrow') })
+                    : '',
+                finalHeader)) : null,
+            react_1.default.createElement(Transition_1.default, { key: "body", mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, in: !this.state.collapsed, timeout: 300, onEnter: this.handleEnter, onEntering: this.handleEntering, onEntered: this.handleEntered, onExit: this.handleExit, onExiting: this.handleExiting }, function (status) {
+                if (status === Transition_1.ENTERING) {
+                    _this.contentDom.offsetWidth;
+                }
+                return (react_1.default.createElement("div", { className: cx('Collapse-contentWrapper', collapseStyles[status]), ref: _this.contentRef },
+                    react_1.default.createElement("div", { className: cx('Collapse-body', bodyClassName) }, react_1.default.cloneElement(body, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, body.props), { className: cx('Collapse-content', body.props.className) })))));
+            })
+        ];
+        if (headerPosition === 'bottom') {
+            dom.reverse();
+        }
+        return (react_1.default.createElement(WrapperComponent, { className: cx("Collapse", (_a = {
+                    'is-active': !this.state.collapsed
+                },
+                _a["Collapse--" + size] = size,
+                _a['Collapse--disabled'] = disabled || collapsable === false,
+                _a['Collapse--title-bottom'] = headerPosition === 'bottom',
+                _a), className) }, dom));
     };
     var _b, _c, _d, _e, _f;
     Collapse.defaultProps = {
-        show: false,
         mountOnEnter: false,
-        unmountOnExit: false
+        unmountOnExit: false,
+        headerPosition: 'top',
+        wrapperComponent: 'div',
+        headingComponent: 'div',
+        className: '',
+        headingClassName: '',
+        bodyClassName: '',
+        collapsable: true,
+        disabled: false,
+        showArrow: true,
+        propsUpdate: false
     };
     (0, tslib_1.__decorate)([
         helper_1.autobind,