amis-ui 3.1.1 → 3.3.0

package/esm/components/Collapse.d.ts

@@ -37,6 +37,8 @@ export interface CollapseProps {
     propsUpdate?: boolean;
     partial?: boolean;
     children?: React.ReactNode | Array<React.ReactNode>;
+    useMobileUI?: boolean;
+    divideLine?: boolean;
 }
 export interface CollapseState {
     collapsed: boolean;
@@ -60,36 +62,38 @@ export declare class Collapse extends React.Component<CollapseProps, CollapseSta
 }
 declare const _default: {
     new (props: Pick<Omit<CollapseProps, keyof import("amis-core").ThemeProps>, never> & {
-        children?: React.ReactNode | React.ReactNode[];
+        translate?: TranslateFn<any> | undefined;
+        key?: string | undefined;
         body?: any;
         header?: React.ReactNode;
-        disabled?: boolean | undefined;
-        translate?: TranslateFn<any> | undefined;
+        children?: React.ReactNode | React.ReactNode[];
+        size?: "base" | "xs" | "sm" | "md" | "lg" | undefined;
         id?: string | undefined;
-        size?: "base" | "sm" | "lg" | "xs" | "md" | undefined;
-        mountOnEnter?: boolean | undefined;
-        unmountOnExit?: boolean | undefined;
-        key?: string | undefined;
-        wrapperComponent?: any;
-        showArrow?: boolean | undefined;
-        bodyClassName?: string | undefined;
+        disabled?: boolean | undefined;
         partial?: boolean | undefined;
-        collapsed?: boolean | undefined;
+        useMobileUI?: boolean | undefined;
         collapseId?: string | undefined;
         propKey?: string | undefined;
-        headerPosition?: "bottom" | "top" | undefined;
+        mountOnEnter?: boolean | undefined;
+        unmountOnExit?: boolean | undefined;
+        headerPosition?: "top" | "bottom" | undefined;
+        bodyClassName?: string | undefined;
         collapsable?: boolean | undefined;
+        collapsed?: boolean | undefined;
+        showArrow?: boolean | undefined;
         expandIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
         headingClassName?: string | undefined;
         collapseHeader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
         onCollapse?: ((item: any, collapsed: boolean) => void) | undefined;
+        wrapperComponent?: any;
         headingComponent?: any;
         propsUpdate?: boolean | undefined;
+        divideLine?: boolean | undefined;
     } & {
-        classPrefix?: string | undefined;
         classnames?: ClassNamesFn | undefined;
-        className?: string | undefined;
+        classPrefix?: string | undefined;
         style?: any;
+        className?: string | undefined;
     } & import("packages/amis-core/lib/theme").ThemeOutterProps): {
         ref: any;
         childRef(ref: any): void;
@@ -97,69 +101,73 @@ declare const _default: {
         render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<CollapseProps, keyof import("amis-core").ThemeProps>, never> & {
-            children?: React.ReactNode | React.ReactNode[];
+            translate?: TranslateFn<any> | undefined;
+            key?: string | undefined;
             body?: any;
             header?: React.ReactNode;
-            disabled?: boolean | undefined;
-            translate?: TranslateFn<any> | undefined;
+            children?: React.ReactNode | React.ReactNode[];
+            size?: "base" | "xs" | "sm" | "md" | "lg" | undefined;
             id?: string | undefined;
-            size?: "base" | "sm" | "lg" | "xs" | "md" | undefined;
-            mountOnEnter?: boolean | undefined;
-            unmountOnExit?: boolean | undefined;
-            key?: string | undefined;
-            wrapperComponent?: any;
-            showArrow?: boolean | undefined;
-            bodyClassName?: string | undefined;
+            disabled?: boolean | undefined;
             partial?: boolean | undefined;
-            collapsed?: boolean | undefined;
+            useMobileUI?: boolean | undefined;
             collapseId?: string | undefined;
             propKey?: string | undefined;
-            headerPosition?: "bottom" | "top" | undefined;
+            mountOnEnter?: boolean | undefined;
+            unmountOnExit?: boolean | undefined;
+            headerPosition?: "top" | "bottom" | undefined;
+            bodyClassName?: string | undefined;
             collapsable?: boolean | undefined;
+            collapsed?: boolean | undefined;
+            showArrow?: boolean | undefined;
             expandIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             headingClassName?: string | undefined;
             collapseHeader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             onCollapse?: ((item: any, collapsed: boolean) => void) | undefined;
+            wrapperComponent?: any;
             headingComponent?: any;
             propsUpdate?: boolean | undefined;
+            divideLine?: boolean | undefined;
         } & {
-            classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
-            className?: string | undefined;
+            classPrefix?: string | undefined;
             style?: any;
+            className?: string | undefined;
         } & import("packages/amis-core/lib/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("amis-core").ThemeProps>, never> & {
-            children?: React.ReactNode | React.ReactNode[];
+            translate?: TranslateFn<any> | undefined;
+            key?: string | undefined;
             body?: any;
             header?: React.ReactNode;
-            disabled?: boolean | undefined;
-            translate?: TranslateFn<any> | undefined;
+            children?: React.ReactNode | React.ReactNode[];
+            size?: "base" | "xs" | "sm" | "md" | "lg" | undefined;
             id?: string | undefined;
-            size?: "base" | "sm" | "lg" | "xs" | "md" | undefined;
-            mountOnEnter?: boolean | undefined;
-            unmountOnExit?: boolean | undefined;
-            key?: string | undefined;
-            wrapperComponent?: any;
-            showArrow?: boolean | undefined;
-            bodyClassName?: string | undefined;
+            disabled?: boolean | undefined;
             partial?: boolean | undefined;
-            collapsed?: boolean | undefined;
+            useMobileUI?: boolean | undefined;
             collapseId?: string | undefined;
             propKey?: string | undefined;
-            headerPosition?: "bottom" | "top" | undefined;
+            mountOnEnter?: boolean | undefined;
+            unmountOnExit?: boolean | undefined;
+            headerPosition?: "top" | "bottom" | undefined;
+            bodyClassName?: string | undefined;
             collapsable?: boolean | undefined;
+            collapsed?: boolean | undefined;
+            showArrow?: boolean | undefined;
             expandIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             headingClassName?: string | undefined;
             collapseHeader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             onCollapse?: ((item: any, collapsed: boolean) => void) | undefined;
+            wrapperComponent?: any;
             headingComponent?: any;
             propsUpdate?: boolean | undefined;
+            divideLine?: boolean | undefined;
         } & {
-            classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
-            className?: string | undefined;
+            classPrefix?: string | undefined;
             style?: any;
+            className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>;
         state: Readonly<{}>;
         refs: {
@@ -167,232 +175,246 @@ declare const _default: {
         };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("amis-core").ThemeProps>, never> & {
-            children?: React.ReactNode | React.ReactNode[];
+            translate?: TranslateFn<any> | undefined;
+            key?: string | undefined;
             body?: any;
             header?: React.ReactNode;
-            disabled?: boolean | undefined;
-            translate?: TranslateFn<any> | undefined;
+            children?: React.ReactNode | React.ReactNode[];
+            size?: "base" | "xs" | "sm" | "md" | "lg" | undefined;
             id?: string | undefined;
-            size?: "base" | "sm" | "lg" | "xs" | "md" | undefined;
-            mountOnEnter?: boolean | undefined;
-            unmountOnExit?: boolean | undefined;
-            key?: string | undefined;
-            wrapperComponent?: any;
-            showArrow?: boolean | undefined;
-            bodyClassName?: string | undefined;
+            disabled?: boolean | undefined;
             partial?: boolean | undefined;
-            collapsed?: boolean | undefined;
+            useMobileUI?: boolean | undefined;
             collapseId?: string | undefined;
             propKey?: string | undefined;
-            headerPosition?: "bottom" | "top" | undefined;
+            mountOnEnter?: boolean | undefined;
+            unmountOnExit?: boolean | undefined;
+            headerPosition?: "top" | "bottom" | undefined;
+            bodyClassName?: string | undefined;
             collapsable?: boolean | undefined;
+            collapsed?: boolean | undefined;
+            showArrow?: boolean | undefined;
             expandIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             headingClassName?: string | undefined;
             collapseHeader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             onCollapse?: ((item: any, collapsed: boolean) => void) | undefined;
+            wrapperComponent?: any;
             headingComponent?: any;
             propsUpdate?: boolean | undefined;
+            divideLine?: boolean | undefined;
         } & {
-            classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
-            className?: string | undefined;
+            classPrefix?: string | undefined;
             style?: any;
+            className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<CollapseProps, keyof import("amis-core").ThemeProps>, never> & {
-            children?: React.ReactNode | React.ReactNode[];
+            translate?: TranslateFn<any> | undefined;
+            key?: string | undefined;
             body?: any;
             header?: React.ReactNode;
-            disabled?: boolean | undefined;
-            translate?: TranslateFn<any> | undefined;
+            children?: React.ReactNode | React.ReactNode[];
+            size?: "base" | "xs" | "sm" | "md" | "lg" | undefined;
             id?: string | undefined;
-            size?: "base" | "sm" | "lg" | "xs" | "md" | undefined;
-            mountOnEnter?: boolean | undefined;
-            unmountOnExit?: boolean | undefined;
-            key?: string | undefined;
-            wrapperComponent?: any;
-            showArrow?: boolean | undefined;
-            bodyClassName?: string | undefined;
+            disabled?: boolean | undefined;
             partial?: boolean | undefined;
-            collapsed?: boolean | undefined;
+            useMobileUI?: boolean | undefined;
             collapseId?: string | undefined;
             propKey?: string | undefined;
-            headerPosition?: "bottom" | "top" | undefined;
+            mountOnEnter?: boolean | undefined;
+            unmountOnExit?: boolean | undefined;
+            headerPosition?: "top" | "bottom" | undefined;
+            bodyClassName?: string | undefined;
             collapsable?: boolean | undefined;
+            collapsed?: boolean | undefined;
+            showArrow?: boolean | undefined;
             expandIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             headingClassName?: string | undefined;
             collapseHeader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             onCollapse?: ((item: any, collapsed: boolean) => void) | undefined;
+            wrapperComponent?: any;
             headingComponent?: any;
             propsUpdate?: boolean | undefined;
+            divideLine?: boolean | undefined;
         } & {
-            classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
-            className?: string | undefined;
+            classPrefix?: string | undefined;
             style?: any;
+            className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
         componentDidUpdate?(prevProps: Readonly<Pick<Omit<CollapseProps, keyof import("amis-core").ThemeProps>, never> & {
-            children?: React.ReactNode | React.ReactNode[];
+            translate?: TranslateFn<any> | undefined;
+            key?: string | undefined;
             body?: any;
             header?: React.ReactNode;
-            disabled?: boolean | undefined;
-            translate?: TranslateFn<any> | undefined;
+            children?: React.ReactNode | React.ReactNode[];
+            size?: "base" | "xs" | "sm" | "md" | "lg" | undefined;
             id?: string | undefined;
-            size?: "base" | "sm" | "lg" | "xs" | "md" | undefined;
-            mountOnEnter?: boolean | undefined;
-            unmountOnExit?: boolean | undefined;
-            key?: string | undefined;
-            wrapperComponent?: any;
-            showArrow?: boolean | undefined;
-            bodyClassName?: string | undefined;
+            disabled?: boolean | undefined;
             partial?: boolean | undefined;
-            collapsed?: boolean | undefined;
+            useMobileUI?: boolean | undefined;
             collapseId?: string | undefined;
             propKey?: string | undefined;
-            headerPosition?: "bottom" | "top" | undefined;
+            mountOnEnter?: boolean | undefined;
+            unmountOnExit?: boolean | undefined;
+            headerPosition?: "top" | "bottom" | undefined;
+            bodyClassName?: string | undefined;
             collapsable?: boolean | undefined;
+            collapsed?: boolean | undefined;
+            showArrow?: boolean | undefined;
             expandIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             headingClassName?: string | undefined;
             collapseHeader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             onCollapse?: ((item: any, collapsed: boolean) => void) | undefined;
+            wrapperComponent?: any;
             headingComponent?: any;
             propsUpdate?: boolean | undefined;
+            divideLine?: boolean | undefined;
         } & {
-            classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
-            className?: string | undefined;
+            classPrefix?: string | undefined;
             style?: any;
+            className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("amis-core").ThemeProps>, never> & {
-            children?: React.ReactNode | React.ReactNode[];
+            translate?: TranslateFn<any> | undefined;
+            key?: string | undefined;
             body?: any;
             header?: React.ReactNode;
-            disabled?: boolean | undefined;
-            translate?: TranslateFn<any> | undefined;
+            children?: React.ReactNode | React.ReactNode[];
+            size?: "base" | "xs" | "sm" | "md" | "lg" | undefined;
             id?: string | undefined;
-            size?: "base" | "sm" | "lg" | "xs" | "md" | undefined;
-            mountOnEnter?: boolean | undefined;
-            unmountOnExit?: boolean | undefined;
-            key?: string | undefined;
-            wrapperComponent?: any;
-            showArrow?: boolean | undefined;
-            bodyClassName?: string | undefined;
+            disabled?: boolean | undefined;
             partial?: boolean | undefined;
-            collapsed?: boolean | undefined;
+            useMobileUI?: boolean | undefined;
             collapseId?: string | undefined;
             propKey?: string | undefined;
-            headerPosition?: "bottom" | "top" | undefined;
+            mountOnEnter?: boolean | undefined;
+            unmountOnExit?: boolean | undefined;
+            headerPosition?: "top" | "bottom" | undefined;
+            bodyClassName?: string | undefined;
             collapsable?: boolean | undefined;
+            collapsed?: boolean | undefined;
+            showArrow?: boolean | undefined;
             expandIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             headingClassName?: string | undefined;
             collapseHeader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             onCollapse?: ((item: any, collapsed: boolean) => void) | undefined;
+            wrapperComponent?: any;
             headingComponent?: any;
             propsUpdate?: boolean | undefined;
+            divideLine?: boolean | undefined;
         } & {
-            classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
-            className?: string | undefined;
+            classPrefix?: string | undefined;
             style?: any;
+            className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("amis-core").ThemeProps>, never> & {
-            children?: React.ReactNode | React.ReactNode[];
+            translate?: TranslateFn<any> | undefined;
+            key?: string | undefined;
             body?: any;
             header?: React.ReactNode;
-            disabled?: boolean | undefined;
-            translate?: TranslateFn<any> | undefined;
+            children?: React.ReactNode | React.ReactNode[];
+            size?: "base" | "xs" | "sm" | "md" | "lg" | undefined;
             id?: string | undefined;
-            size?: "base" | "sm" | "lg" | "xs" | "md" | undefined;
-            mountOnEnter?: boolean | undefined;
-            unmountOnExit?: boolean | undefined;
-            key?: string | undefined;
-            wrapperComponent?: any;
-            showArrow?: boolean | undefined;
-            bodyClassName?: string | undefined;
+            disabled?: boolean | undefined;
             partial?: boolean | undefined;
-            collapsed?: boolean | undefined;
+            useMobileUI?: boolean | undefined;
             collapseId?: string | undefined;
             propKey?: string | undefined;
-            headerPosition?: "bottom" | "top" | undefined;
+            mountOnEnter?: boolean | undefined;
+            unmountOnExit?: boolean | undefined;
+            headerPosition?: "top" | "bottom" | undefined;
+            bodyClassName?: string | undefined;
             collapsable?: boolean | undefined;
+            collapsed?: boolean | undefined;
+            showArrow?: boolean | undefined;
             expandIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             headingClassName?: string | undefined;
             collapseHeader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             onCollapse?: ((item: any, collapsed: boolean) => void) | undefined;
+            wrapperComponent?: any;
             headingComponent?: any;
             propsUpdate?: boolean | undefined;
+            divideLine?: boolean | undefined;
         } & {
-            classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
-            className?: string | undefined;
+            classPrefix?: string | undefined;
             style?: any;
+            className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("amis-core").ThemeProps>, never> & {
-            children?: React.ReactNode | React.ReactNode[];
+            translate?: TranslateFn<any> | undefined;
+            key?: string | undefined;
             body?: any;
             header?: React.ReactNode;
-            disabled?: boolean | undefined;
-            translate?: TranslateFn<any> | undefined;
+            children?: React.ReactNode | React.ReactNode[];
+            size?: "base" | "xs" | "sm" | "md" | "lg" | undefined;
             id?: string | undefined;
-            size?: "base" | "sm" | "lg" | "xs" | "md" | undefined;
-            mountOnEnter?: boolean | undefined;
-            unmountOnExit?: boolean | undefined;
-            key?: string | undefined;
-            wrapperComponent?: any;
-            showArrow?: boolean | undefined;
-            bodyClassName?: string | undefined;
+            disabled?: boolean | undefined;
             partial?: boolean | undefined;
-            collapsed?: boolean | undefined;
+            useMobileUI?: boolean | undefined;
             collapseId?: string | undefined;
             propKey?: string | undefined;
-            headerPosition?: "bottom" | "top" | undefined;
+            mountOnEnter?: boolean | undefined;
+            unmountOnExit?: boolean | undefined;
+            headerPosition?: "top" | "bottom" | undefined;
+            bodyClassName?: string | undefined;
             collapsable?: boolean | undefined;
+            collapsed?: boolean | undefined;
+            showArrow?: boolean | undefined;
             expandIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             headingClassName?: string | undefined;
             collapseHeader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             onCollapse?: ((item: any, collapsed: boolean) => void) | undefined;
+            wrapperComponent?: any;
             headingComponent?: any;
             propsUpdate?: boolean | undefined;
+            divideLine?: boolean | undefined;
         } & {
-            classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
-            className?: string | undefined;
+            classPrefix?: string | undefined;
             style?: any;
+            className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<CollapseProps, keyof import("amis-core").ThemeProps>, never> & {
-            children?: React.ReactNode | React.ReactNode[];
+            translate?: TranslateFn<any> | undefined;
+            key?: string | undefined;
             body?: any;
             header?: React.ReactNode;
-            disabled?: boolean | undefined;
-            translate?: TranslateFn<any> | undefined;
+            children?: React.ReactNode | React.ReactNode[];
+            size?: "base" | "xs" | "sm" | "md" | "lg" | undefined;
             id?: string | undefined;
-            size?: "base" | "sm" | "lg" | "xs" | "md" | undefined;
-            mountOnEnter?: boolean | undefined;
-            unmountOnExit?: boolean | undefined;
-            key?: string | undefined;
-            wrapperComponent?: any;
-            showArrow?: boolean | undefined;
-            bodyClassName?: string | undefined;
+            disabled?: boolean | undefined;
             partial?: boolean | undefined;
-            collapsed?: boolean | undefined;
+            useMobileUI?: boolean | undefined;
             collapseId?: string | undefined;
             propKey?: string | undefined;
-            headerPosition?: "bottom" | "top" | undefined;
+            mountOnEnter?: boolean | undefined;
+            unmountOnExit?: boolean | undefined;
+            headerPosition?: "top" | "bottom" | undefined;
+            bodyClassName?: string | undefined;
             collapsable?: boolean | undefined;
+            collapsed?: boolean | undefined;
+            showArrow?: boolean | undefined;
             expandIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             headingClassName?: string | undefined;
             collapseHeader?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined;
             onCollapse?: ((item: any, collapsed: boolean) => void) | undefined;
+            wrapperComponent?: any;
             headingComponent?: any;
             propsUpdate?: boolean | undefined;
+            divideLine?: boolean | undefined;
         } & {
-            classPrefix?: string | undefined;
             classnames?: ClassNamesFn | undefined;
-            className?: string | undefined;
+            classPrefix?: string | undefined;
             style?: any;
+            className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;

package/esm/components/Collapse.js

@@ -1,11 +1,11 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
 import { __extends, __assign, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
-import { isClickOnInput, autobind, themeable } from 'amis-core';
+import { isClickOnInput, isMobile, autobind, themeable } from 'amis-core';
 import Transition, { EXITED, EXITING, ENTERING } from 'react-transition-group/Transition';
 import { Icon } from './icons.js';
 
@@ -41,6 +41,7 @@ var Collapse = /** @class */ (function (_super) {
         return null;
     };
     Collapse.prototype.toggleCollapsed = function (e) {
+        var _a;
         if (isClickOnInput(e)) {
             return;
         }
@@ -48,9 +49,10 @@ var Collapse = /** @class */ (function (_super) {
         if (props.disabled || props.collapsable === false) {
             return;
         }
-        props.onCollapse && props.onCollapse(props, !this.state.collapsed);
+        var newCollapsed = !this.state.collapsed;
+        (_a = props.onCollapse) === null || _a === void 0 ? void 0 : _a.call(props, props, newCollapsed);
         this.setState({
-            collapsed: !this.state.collapsed
+            collapsed: newCollapsed
         });
     };
     Collapse.prototype.handleEnter = function (elem) {
@@ -78,14 +80,15 @@ var Collapse = /** @class */ (function (_super) {
         var _a;
         var _this = this;
         var _b;
-        var _c = this.props, cx = _c.classnames, mountOnEnter = _c.mountOnEnter, unmountOnExit = _c.unmountOnExit; _c.classPrefix; var size = _c.size, WrapperComponent = _c.wrapperComponent, HeadingComponent = _c.headingComponent, className = _c.className, style = _c.style, headingClassName = _c.headingClassName, headerPosition = _c.headerPosition, collapseHeader = _c.collapseHeader, header = _c.header, body = _c.body, bodyClassName = _c.bodyClassName, collapsable = _c.collapsable; _c.translate; var showArrow = _c.showArrow, expandIcon = _c.expandIcon, disabled = _c.disabled, children = _c.children;
+        var _c = this.props, cx = _c.classnames, mountOnEnter = _c.mountOnEnter, unmountOnExit = _c.unmountOnExit; _c.classPrefix; var size = _c.size, WrapperComponent = _c.wrapperComponent, HeadingComponent = _c.headingComponent, className = _c.className, style = _c.style, headingClassName = _c.headingClassName, headerPosition = _c.headerPosition, collapseHeader = _c.collapseHeader, header = _c.header, body = _c.body, bodyClassName = _c.bodyClassName, collapsable = _c.collapsable; _c.translate; var showArrow = _c.showArrow, expandIcon = _c.expandIcon, disabled = _c.disabled, children = _c.children, useMobileUI = _c.useMobileUI;
         var finalHeader = this.state.collapsed
             ? header
             : collapseHeader || header;
+        var mobileUI = useMobileUI && isMobile();
         var dom = [
-            finalHeader ? (React__default.createElement(HeadingComponent, { key: "header", onClick: this.toggleCollapsed, className: cx("Collapse-header", headingClassName) },
+            finalHeader ? (React__default.createElement(HeadingComponent, { key: "header", onClick: this.toggleCollapsed, className: cx("Collapse-header", { 'is-mobile': mobileUI }, headingClassName) },
                 showArrow && collapsable ? (expandIcon ? (React__default.cloneElement(expandIcon, __assign(__assign({}, expandIcon.props), { className: cx('Collapse-icon-tranform', (_b = expandIcon.props) === null || _b === void 0 ? void 0 : _b.className) }))) : (React__default.createElement("span", { className: cx('Collapse-arrow-wrap') },
-                    React__default.createElement(Icon, { icon: "right-arrow-bold", className: cx('Collapse-arrow', 'icon'), wrapClassName: cx('Collapse-arrow'), iconContent: "Collapse-arrow" })))) : (''),
+                    React__default.createElement(Icon, { icon: "right-arrow-bold", className: cx('Collapse-arrow', 'icon'), classNameProp: cx('Collapse-arrow'), iconContent: "Collapse-arrow" })))) : (''),
                 finalHeader)) : null,
             React__default.createElement(Transition, { 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 === ENTERING) {
@@ -100,6 +103,7 @@ var Collapse = /** @class */ (function (_super) {
             dom.reverse();
         }
         return (React__default.createElement(WrapperComponent, { className: cx("Collapse", (_a = {
+                    'is-mobile': mobileUI,
                     'is-active': !this.state.collapsed
                 },
                 _a["Collapse--".concat(size)] = size,