amis-ui 3.2.0 → 3.3.0

package/lib/components/DateRangePicker.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.2.0
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -28,11 +28,9 @@ var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
 var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
 
-/**
- * @file DateRangePicker
- * @description 自定义日期范围时间选择器组件
- * @author fex
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var availableShortcuts = {
     'today': {
         label: 'Date.today',
@@ -838,7 +836,7 @@ var DateRangePicker = /** @class */ (function (_super) {
             shortcutArr = shortcuts;
         }
         var __ = this.props.translate;
-        return (React__default["default"].createElement("ul", { className: "".concat(ns, "DateRangePicker-rangers") }, shortcutArr.map(function (item, index) {
+        return (_J$X_("ul", { className: "".concat(ns, "DateRangePicker-rangers") }, shortcutArr.map(function (item, index) {
             if (!item) {
                 return null;
             }
@@ -886,8 +884,8 @@ var DateRangePicker = /** @class */ (function (_super) {
                     } });
             }
             if (Object.keys(shortcut).length) {
-                return (React__default["default"].createElement("li", { className: "".concat(ns, "DateRangePicker-ranger"), onClick: function () { return _this.selectShortcut(shortcut); }, key: index },
-                    React__default["default"].createElement("a", null, __(shortcut.label))));
+                return (_J$X_("li", { className: "".concat(ns, "DateRangePicker-ranger"), onClick: function () { return _this.selectShortcut(shortcut); }, key: index },
+                    _J$X_("a", null, __(shortcut.label))));
             }
             else {
                 return null;
@@ -997,8 +995,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         var _b = this.getDisabledElementProps(currentDate, 'day'), className = _b.className, others = tslib.__rest(_b, ["className"]);
         props.className += className;
-        return (React__default["default"].createElement("td", tslib.__assign({}, omit__default["default"](props, ['todayActiveStyle']), others),
-            React__default["default"].createElement("span", null, currentDate.date())));
+        return (_J$X_("td", tslib.__assign({}, omit__default["default"](props, ['todayActiveStyle']), others),
+            _J$X_("span", null, currentDate.date())));
     };
     DateRangePicker.prototype.renderMonth = function (props, month, year, date) {
         var currentDate = props.viewDate.year(year).month(month);
@@ -1016,8 +1014,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         var _b = this.getDisabledElementProps(currentDate, 'month'), className = _b.className, others = tslib.__rest(_b, ["className"]);
         props.className += className;
-        return (React__default["default"].createElement("td", tslib.__assign({}, omit__default["default"](props, 'viewDate'), others),
-            React__default["default"].createElement("span", null, monthStrFixedLength)));
+        return (_J$X_("td", tslib.__assign({}, omit__default["default"](props, 'viewDate'), others),
+            _J$X_("span", null, monthStrFixedLength)));
     };
     DateRangePicker.prototype.renderQuarter = function (props, quarter, year) {
         var currentDate = moment__default["default"]().year(year).quarter(quarter);
@@ -1029,8 +1027,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         var _b = this.getDisabledElementProps(currentDate, 'quarter'), className = _b.className, others = tslib.__rest(_b, ["className"]);
         props.className += className;
-        return (React__default["default"].createElement("td", tslib.__assign({}, props, others),
-            React__default["default"].createElement("span", null,
+        return (_J$X_("td", tslib.__assign({}, props, others),
+            _J$X_("span", null,
                 "Q",
                 quarter)));
     };
@@ -1044,8 +1042,8 @@ var DateRangePicker = /** @class */ (function (_super) {
         }
         var _b = this.getDisabledElementProps(currentDate, 'year'), className = _b.className, others = tslib.__rest(_b, ["className"]);
         props.className += className;
-        return (React__default["default"].createElement("td", tslib.__assign({}, props, others),
-            React__default["default"].createElement("span", null, year)));
+        return (_J$X_("td", tslib.__assign({}, props, others),
+            _J$X_("span", null, year)));
     };
     DateRangePicker.prototype.renderCalendar = function () {
         var _this = this;
@@ -1066,20 +1064,20 @@ var DateRangePicker = /** @class */ (function (_super) {
                     !(startDate === null || startDate === void 0 ? void 0 : startDate.isValid()) ||
                     !(endDate === null || endDate === void 0 ? void 0 : endDate.isValid())));
         var mobileUI = useMobileUI && amisCore.isMobile();
-        return (React__default["default"].createElement("div", { className: cx("".concat(ns, "DateRangePicker-wrap"), { 'is-mobile': mobileUI }), ref: this.calendarRef },
-            mobileUI && !embed ? (React__default["default"].createElement("div", { className: cx('PickerColumns-header') },
-                React__default["default"].createElement(Button["default"], { className: "PickerColumns-cancel", level: "link", onClick: function () { return _this.close(false); } }, __('cancel')),
+        return (_J$X_("div", { className: cx("".concat(ns, "DateRangePicker-wrap"), { 'is-mobile': mobileUI }), ref: this.calendarRef },
+            mobileUI && !embed ? (_J$X_("div", { className: cx('PickerColumns-header') },
+                _J$X_(Button["default"], { className: "PickerColumns-cancel", level: "link", onClick: function () { return _this.close(false); } }, __('cancel')),
                 label && typeof label === 'string'
                     ? label
                     : __('Calendar.datepicker'),
-                React__default["default"].createElement(Button["default"], { className: "PickerColumns-confirm", level: "link", disabled: isConfirmBtnDisbaled || !startDate || !endDate, onClick: this.confirm }, __('confirm')))) : null,
+                _J$X_(Button["default"], { className: "PickerColumns-confirm", level: "link", disabled: isConfirmBtnDisbaled || !startDate || !endDate, onClick: this.confirm }, __('confirm')))) : null,
             this.renderShortcuts(ranges || shortcuts),
-            React__default["default"].createElement("div", { className: cx("".concat(ns, "DateRangePicker-picker-wrap"), {
+            _J$X_("div", { className: cx("".concat(ns, "DateRangePicker-picker-wrap"), {
                     'is-vertical': embed
                 }) },
                 (!isTimeRange ||
                     (editState === 'start' && !embed) ||
-                    (mobileUI && isTimeRange)) && (React__default["default"].createElement(Calendar["default"], { className: "".concat(ns, "DateRangePicker-start"), value: startDate, 
+                    (mobileUI && isTimeRange)) && (_J$X_(Calendar["default"], { className: "".concat(ns, "DateRangePicker-start"), value: startDate, 
                     // 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
                     // TODO: 后续得把 time-range 代码拆分出来
                     onChange: isDateTimeRange
@@ -1089,16 +1087,16 @@ var DateRangePicker = /** @class */ (function (_super) {
                             : this.handleDateChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, isValidDate: this.checkStartIsValidDate, viewMode: viewMode, input: false, onClose: this.close, renderDay: this.renderDay, renderMonth: this.renderMonth, renderQuarter: this.renderQuarter, renderYear: this.renderYear, locale: locale, timeRangeHeader: "\u5F00\u59CB\u65F6\u95F4", embed: embed })),
                 (!isTimeRange ||
                     (editState === 'end' && !embed) ||
-                    (mobileUI && isTimeRange)) && (React__default["default"].createElement(Calendar["default"], { className: "".concat(ns, "DateRangePicker-end"), value: endDate, onChange: isDateTimeRange
+                    (mobileUI && isTimeRange)) && (_J$X_(Calendar["default"], { className: "".concat(ns, "DateRangePicker-end"), value: endDate, onChange: isDateTimeRange
                         ? this.handelEndDateChange
                         : viewMode === 'time'
                             ? this.handleTimeEndChange
                             : this.handleDateChange, requiredConfirm: false, dateFormat: dateFormat, inputFormat: inputFormat, timeFormat: timeFormat, viewDate: isDateTimeRange ? this.currentMonth : this.nextMonth, 
                     // isEndDate
                     isValidDate: this.checkEndIsValidDate, viewMode: viewMode, input: false, onClose: this.close, renderDay: this.renderDay, renderMonth: this.renderMonth, renderQuarter: this.renderQuarter, renderYear: this.renderYear, locale: locale, timeRangeHeader: "\u7ED3\u675F\u65F6\u95F4", embed: embed }))),
-            embed || mobileUI ? null : (React__default["default"].createElement("div", { key: "button", className: "".concat(ns, "DateRangePicker-actions") },
-                React__default["default"].createElement(Button["default"], { size: "sm", onClick: function () { return _this.close(); } }, __('cancel')),
-                React__default["default"].createElement(Button["default"], { level: "primary", size: "sm", className: cx('m-l-sm'), disabled: isConfirmBtnDisbaled, onClick: this.confirm }, __('confirm'))))));
+            embed || mobileUI ? null : (_J$X_("div", { key: "button", className: "".concat(ns, "DateRangePicker-actions") },
+                _J$X_(Button["default"], { size: "sm", onClick: function () { return _this.close(); } }, __('cancel')),
+                _J$X_(Button["default"], { level: "primary", size: "sm", className: cx('m-l-sm'), disabled: isConfirmBtnDisbaled, onClick: this.confirm }, __('confirm'))))));
     };
     DateRangePicker.prototype.getDisabledElementProps = function (currentDate, granularity) {
         var _a = this.state; _a.endDateOpenedFirst; var endDate = _a.endDate, startDate = _a.startDate, editState = _a.editState;
@@ -1155,7 +1153,7 @@ var DateRangePicker = /** @class */ (function (_super) {
                 cursorWidth = 0;
             }
         }
-        return (React__default["default"].createElement("div", { className: cx('DateRangePicker-activeCursor', { isFocused: isFocused }), style: {
+        return (_J$X_("div", { className: cx('DateRangePicker-activeCursor', { isFocused: isFocused }), style: {
                 position: 'absolute',
                 left: cursorLeft,
                 width: cursorWidth
@@ -1170,42 +1168,42 @@ var DateRangePicker = /** @class */ (function (_super) {
             ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
         var _d = this.state, isOpened = _d.isOpened, isFocused = _d.isFocused, startDate = _d.startDate, endDate = _d.endDate;
         var __ = this.props.translate;
-        var calendarMobile = (React__default["default"].createElement(CalendarMobile["default"], { timeFormat: timeFormat, inputFormat: inputFormat, startDate: startDate, endDate: endDate, minDate: minDate, maxDate: maxDate, minDuration: minDuration, maxDuration: maxDuration, dateFormat: dateFormat, embed: embed, viewMode: viewMode, close: this.close, confirm: this.confirm, onChange: this.handleMobileChange, footerExtra: this.renderShortcuts(ranges || shortcuts), showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months' }));
+        var calendarMobile = (_J$X_(CalendarMobile["default"], { timeFormat: timeFormat, inputFormat: inputFormat, startDate: startDate, endDate: endDate, minDate: minDate, maxDate: maxDate, minDuration: minDuration, maxDuration: maxDuration, dateFormat: dateFormat, embed: embed, viewMode: viewMode, close: this.close, confirm: this.confirm, onChange: this.handleMobileChange, footerExtra: this.renderShortcuts(ranges || shortcuts), showViewMode: viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months' }));
         var mobileUI = useMobileUI && amisCore.isMobile();
         if (embed) {
-            return (React__default["default"].createElement("div", { className: cx("".concat(ns, "DateRangeCalendar"), {
+            return (_J$X_("div", { className: cx("".concat(ns, "DateRangeCalendar"), {
                     'is-mobile': mobileUI
                 }, {
                     'is-disabled': disabled
                 }, className) }, useCalendarMobile ? calendarMobile : this.renderCalendar()));
         }
-        var CalendarMobileTitle = (React__default["default"].createElement("div", { className: "".concat(ns, "CalendarMobile-title") }, label && typeof label === 'string' ? label : __('Calendar.datepicker')));
+        var CalendarMobileTitle = (_J$X_("div", { className: "".concat(ns, "CalendarMobile-title") }, label && typeof label === 'string' ? label : __('Calendar.datepicker')));
         /** 是否启用游标动画 */
         var useAnimation = animation !== false;
-        return (React__default["default"].createElement("div", { tabIndex: 0, onKeyPress: this.handleKeyPress, onFocus: this.handleFocus, onBlur: this.handleBlur, className: cx("".concat(ns, "DateRangePicker"), (_a = {
+        return (_J$X_("div", { tabIndex: 0, onKeyPress: this.handleKeyPress, onFocus: this.handleFocus, onBlur: this.handleBlur, className: cx("".concat(ns, "DateRangePicker"), (_a = {
                     'is-disabled': disabled,
                     'is-focused': isFocused
                 },
                 _a["".concat(ns, "DateRangePicker--border").concat(amisCore.ucFirst(borderMode))] = borderMode,
                 _a['is-mobile'] = useMobileUI && amisCore.isMobile(),
                 _a), className), ref: this.dom },
-            React__default["default"].createElement(Input["default"], { className: cx('DateRangePicker-input', {
+            _J$X_(Input["default"], { className: cx('DateRangePicker-input', {
                     isActive: !useAnimation && this.state.editState === 'start' && isOpened
                 }), onChange: this.startInputChange, onClick: this.openStart, ref: this.startInputRef, placeholder: __(startPlaceholder), autoComplete: "off", value: this.state.startInputValue || '', disabled: disabled, readOnly: useMobileUI && amisCore.isMobile() }),
-            React__default["default"].createElement("span", { className: cx('DateRangePicker-input-separator'), ref: this.separatorRef },
-                React__default["default"].createElement("span", { className: cx('DateRangePicker-input-separator-line') })),
-            React__default["default"].createElement(Input["default"], { className: cx('DateRangePicker-input', {
+            _J$X_("span", { className: cx('DateRangePicker-input-separator'), ref: this.separatorRef },
+                _J$X_("span", { className: cx('DateRangePicker-input-separator-line') })),
+            _J$X_(Input["default"], { className: cx('DateRangePicker-input', {
                     isActive: !useAnimation && this.state.editState === 'end' && isOpened
                 }), onChange: this.endInputChange, onClick: this.openEnd, ref: this.endInputRef, placeholder: __(endPlaceholder), autoComplete: "off", value: this.state.endInputValue || '', disabled: disabled, readOnly: useMobileUI && amisCore.isMobile() }),
             useAnimation ? this.renderActiveCursor() : null,
-            clearable && !disabled && value ? (React__default["default"].createElement("a", { className: "".concat(ns, "DateRangePicker-clear"), onClick: this.clearValue },
-                React__default["default"].createElement(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
-            React__default["default"].createElement("a", { className: cx("DateRangePicker-toggler") },
-                React__default["default"].createElement(icons.Icon, { icon: viewMode === 'time' ? 'clock' : 'date', className: "icon", iconContent: viewMode === 'time'
+            clearable && !disabled && value ? (_J$X_("a", { className: "".concat(ns, "DateRangePicker-clear"), onClick: this.clearValue },
+                _J$X_(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
+            _J$X_("a", { className: cx("DateRangePicker-toggler") },
+                _J$X_(icons.Icon, { icon: viewMode === 'time' ? 'clock' : 'date', className: "icon", iconContent: viewMode === 'time'
                         ? 'DatePicker-toggler-clock'
                         : 'DatePicker-toggler-date' })),
-            isOpened ? (useMobileUI && amisCore.isMobile() ? (React__default["default"].createElement(PopUp["default"], { isShow: isOpened, container: popOverContainer, className: cx("".concat(ns, "CalendarMobile-pop"), "".concat(ns, "CalendarMobile-pop--").concat(viewMode)), onHide: this.close, header: CalendarMobileTitle, showClose: false }, useCalendarMobile ? calendarMobile : this.renderCalendar())) : (React__default["default"].createElement(amisCore.Overlay, { target: function () { return _this.dom.current; }, onHide: this.close, container: popOverContainer || (function () { return ReactDOM.findDOMNode(_this); }), rootClose: false, placement: overlayPlacement, show: true },
-                React__default["default"].createElement(amisCore.PopOver, { classPrefix: ns, className: cx("".concat(ns, "DateRangePicker-popover"), popoverClassName), onHide: this.close, onClick: this.handlePopOverClick }, this.renderCalendar())))) : null));
+            isOpened ? (useMobileUI && amisCore.isMobile() ? (_J$X_(PopUp["default"], { isShow: isOpened, container: popOverContainer, className: cx("".concat(ns, "CalendarMobile-pop"), "".concat(ns, "CalendarMobile-pop--").concat(viewMode)), onHide: this.close, header: CalendarMobileTitle, showClose: false }, useCalendarMobile ? calendarMobile : this.renderCalendar())) : (_J$X_(amisCore.Overlay, { target: function () { return _this.dom.current; }, onHide: this.close, container: popOverContainer || (function () { return ReactDOM.findDOMNode(_this); }), rootClose: false, placement: overlayPlacement, show: true },
+                _J$X_(amisCore.PopOver, { classPrefix: ns, className: cx("".concat(ns, "DateRangePicker-popover"), popoverClassName), onHide: this.close, onClick: this.handlePopOverClick }, this.renderCalendar())))) : null));
     };
     DateRangePicker.defaultProps = {
         startPlaceholder: 'Calendar.startPick',

package/lib/components/DndContainer.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.2.0
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -7,22 +7,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+require('react');
 var Draggable = require('react-draggable');
 var amisCore = require('amis-core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
 
-/**
- * @file DndContainer
- * @desc 可拖拽容器
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var DndContainer = function (props) {
     var className = props.className, cx = props.classnames, children = props.children, axis = props.axis, position = props.position, defaultPosition = props.defaultPosition, bounds = props.bounds, grid = props.grid, handle = props.handle, cancel = props.cancel, draggable = props.draggable, scale = props.scale, enableUserSelect = props.enableUserSelect, nodeRef = props.nodeRef, onDrag = props.onDrag, onStart = props.onStart, onStop = props.onStop;
-    return (React__default["default"].createElement(Draggable__default["default"], { axis: axis, position: position, defaultPosition: defaultPosition, bounds: bounds, grid: grid, handle: handle, cancel: cancel, disabled: !draggable, scale: scale, enableUserSelectHack: !enableUserSelect, nodeRef: nodeRef, defaultClassName: cx(className), defaultClassNameDragging: cx('DndContainer--dragging'), defaultClassNameDragged: cx('DndContainer--dragged'), onStart: onStart, onDrag: onDrag, onStop: onStop }, children));
+    return (_J$X_(Draggable__default["default"], { axis: axis, position: position, defaultPosition: defaultPosition, bounds: bounds, grid: grid, handle: handle, cancel: cancel, disabled: !draggable, scale: scale, enableUserSelectHack: !enableUserSelect, nodeRef: nodeRef, defaultClassName: cx(className), defaultClassNameDragging: cx('DndContainer--dragging'), defaultClassNameDragged: cx('DndContainer--dragged'), onStart: onStart, onDrag: onDrag, onStop: onStop }, children));
 };
 DndContainer.defaultProps = {
     axis: 'both',

package/lib/components/Drawer.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.2.0
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -23,11 +23,9 @@ var Transition__default = /*#__PURE__*/_interopDefaultLegacy(Transition);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-/**
- * @file Drawer
- * @description
- * @author fex
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var _a;
 var fadeStyles = (_a = {},
     _a[Transition.ENTERING] = 'in',
@@ -198,15 +196,15 @@ var Drawer = /** @class */ (function (_super) {
     };
     Drawer.prototype.renderResizeCtrl = function () {
         var cx = this.props.classnames;
-        return (React__default["default"].createElement("div", { className: cx('Drawer-resizeCtrl'), ref: this.resizer, onMouseDown: this.resizeMouseDown },
-            React__default["default"].createElement("div", { className: cx('Drawer-resizeIcon') }, "\u00B7\u00B7\u00B7")));
+        return (_J$X_("div", { className: cx('Drawer-resizeCtrl'), ref: this.resizer, onMouseDown: this.resizeMouseDown },
+            _J$X_("div", { className: cx('Drawer-resizeIcon') }, "\u00B7\u00B7\u00B7")));
     };
     Drawer.prototype.render = function () {
         var _this = this;
         var _a = this.props, ns = _a.classPrefix, className = _a.className, children = _a.children, container = _a.container, show = _a.show, showCloseButton = _a.showCloseButton, position = _a.position, size = _a.size, onHide = _a.onHide, disabled = _a.disabled, overlay = _a.overlay, bodyClassName = _a.bodyClassName, resizable = _a.resizable;
         var bodyStyle = this.getDrawerStyle();
-        return (React__default["default"].createElement(Portal__default["default"], { container: container },
-            React__default["default"].createElement(Transition__default["default"], { mountOnEnter: true, unmountOnExit: true, appear: true, in: show, timeout: 500, onEnter: this.handleEnter, onExited: this.handleExited, onEntered: this.handleEntered }, function (status) {
+        return (_J$X_(Portal__default["default"], { container: container },
+            _J$X_(Transition__default["default"], { mountOnEnter: true, unmountOnExit: true, appear: true, in: show, timeout: 500, onEnter: this.handleEnter, onExited: this.handleExited, onEntered: this.handleEntered }, function (status) {
                 var _a;
                 if (status === Transition.ENTERING) {
                     // force reflow
@@ -214,15 +212,15 @@ var Drawer = /** @class */ (function (_super) {
                     // 否则看不到动画。
                     _this.contentDom.offsetWidth;
                 }
-                return (React__default["default"].createElement("div", { ref: _this.modalRef, role: "dialog", className: cx__default["default"]("amis-dialog-widget ".concat(ns, "Drawer"), (_a = {},
+                return (_J$X_("div", { ref: _this.modalRef, role: "dialog", className: cx__default["default"]("amis-dialog-widget ".concat(ns, "Drawer"), (_a = {},
                         _a["".concat(ns, "Drawer--").concat(position)] = position,
                         _a["".concat(ns, "Drawer--").concat(size)] = size,
                         _a["".concat(ns, "Drawer--noOverlay")] = !overlay,
                         _a), className) },
-                    overlay ? (React__default["default"].createElement("div", { className: cx__default["default"]("".concat(ns, "Drawer-overlay"), fadeStyles[status]) })) : null,
-                    React__default["default"].createElement("div", { ref: _this.contentRef, style: bodyStyle, className: cx__default["default"]("".concat(ns, "Drawer-content"), bodyClassName, fadeStyles[status]) },
-                        show && showCloseButton ? (React__default["default"].createElement("a", { onClick: disabled ? undefined : onHide, className: "".concat(ns, "Drawer-close") },
-                            React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon", iconContent: "Drawer-close" }))) : null,
+                    overlay ? (_J$X_("div", { className: cx__default["default"]("".concat(ns, "Drawer-overlay"), fadeStyles[status]) })) : null,
+                    _J$X_("div", { ref: _this.contentRef, style: bodyStyle, className: cx__default["default"]("".concat(ns, "Drawer-content"), bodyClassName, fadeStyles[status]) },
+                        show && showCloseButton ? (_J$X_("a", { onClick: disabled ? undefined : onHide, className: "".concat(ns, "Drawer-close") },
+                            _J$X_(icons.Icon, { icon: "close", className: "icon", iconContent: "Drawer-close" }))) : null,
                         status === Transition.EXITED ? null : children,
                         resizable ? _this.renderResizeCtrl() : null)));
             })));