linear-react-components-ui 1.1.0-beta.2 → 1.1.0-beta.4

package/lib/assets/styles/dialog.scss

@@ -6,19 +6,12 @@
   line-height: 22px;
   font-size: 14px;
   position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   > .dialog {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    display: contents;
     > .dialog-form-wrapper {
       @extend %component-box-shadow;
       width: 100%;
@@ -73,11 +66,17 @@
           }
         }
         .close-button {
-          color: #777;
-          cursor: pointer;
-          font-size: 16px;
-          text-shadow: 0 1px 0 $default-color;
           margin-left: auto;
+          line-height: 0;
+          cursor: pointer;
+          > svg {
+            fill: #252424;
+            pointer-events: fill;
+            transition: 0.2s fill;
+            &:hover {
+              fill: rgba(0, 0, 0, 0.164);
+            }
+          }
         }
       }
       .footer {
@@ -176,6 +175,7 @@
   background-color: #235a94;
   opacity: .3;
   position: fixed;
+  z-index: -1;
   height: 100%;
   width: 100%;
   top: 0;

package/lib/assets/styles/drawers.scss

@@ -94,6 +94,8 @@
       }
       .right {
         margin-left: 2px;
+        display: flex;
+        align-items: center;
         &.modal-title {
           color: #4e4c4c;
           font-weight: 600;
@@ -101,12 +103,13 @@
       }
       .closebutton {
         cursor: pointer;
-        float: right;
-        font-size: 16px;
-        text-shadow: 0 1px 0 $default-color;
-        margin-right: 5px;
-        &:hover {
-          color: rgba(0, 0, 0, 0.164);
+        > svg {
+          fill: #252424;
+          pointer-events: fill;
+          transition: 0.2s fill;
+          &:hover {
+            fill: rgba(0, 0, 0, 0.164);
+          }
         }
       }
     }

package/lib/assets/styles/tabs.scss

@@ -1,5 +1,7 @@
 @import "colors.scss";
 
+$dropdown-width: 38px;
+
 %tab-closepanel {
   background-color: transparent;
   border: 0;
@@ -11,7 +13,6 @@
   visibility: hidden;
   transition: all 0.2s ease-in-out;
   border-radius: 4px;
-
   &:after {
     content: "×";
     font-size: 20px;
@@ -19,10 +20,8 @@
     color: $font-color-soft;
     transition: all 0.2s ease-in-out;
   }
-
   &:hover {
     background-color: $color-light-dark;
-
     &:after {
       color: $font-color-second;
     }
@@ -30,20 +29,14 @@
 }
 
 %tab-component-menus {
+  -webkit-box-shadow: 0px -1px 0px $component-border-color inset;
+  -moz-box-shadow: 0px -1px 0px $component-border-color inset;
+  box-shadow: 0px -1px 0px $component-border-color inset;
   .menu {
-    -webkit-box-shadow: 0px -1px 0px $component-border-color inset;
-    -moz-box-shadow: 0px -1px 0px $component-border-color inset;
-    box-shadow: 0px -1px 0px $component-border-color inset;
     display: flex;
-    flex-wrap: nowrap;
-    justify-content: center;
     flex: 1;
-
-    &.-firsttabident>.menuitem:first-child {
-      margin-left: 15px;
-    }
+    overflow: hidden;
   }
-
   .menu>.menuitem {
     border-bottom: 0;
     border-radius: 5px 5px 0px 0px;
@@ -55,10 +48,10 @@
     margin-right: 1px;
     padding: 0;
     width: auto;
+    min-width: 100px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
     &.selected {
       border: 1px solid $component-border-color;
       background: $font-color-second;
@@ -66,9 +59,7 @@
       border-top: 2px solid $component-selected-color;
       box-shadow: 0;
       font-weight: bold;
-      /* z-index: 2; */
     }
-
     &.selected>.closepanel,
     &:hover>.closepanel {
       visibility: visible;
@@ -103,18 +94,28 @@
   height: 100%;
   overflow: auto;
   @extend %tab-component-menus;
-
   >.menucontainer {
-    display: flex;
-    flex-wrap: nowrap;
     width: 100%;
+    display: flex;
     min-height: 35px;
     overflow: hidden;
     @extend %tab-component-menus;
-
     >.dropdownbutton {
       border-bottom: 1px solid $component-border-color;
-      padding: 0 0.8rem;
+      padding: 0;
+      width: $dropdown-width;
+      visibility: hidden;
+      pointer-events: none;
+      opacity: 0;
+      &.show {
+        visibility: visible;
+        pointer-events: all;
+        opacity: 1;
+      }
+      > svg {
+        margin: 0;
+        float: none;
+      }
     }
   }
 

package/lib/dialog/base/Header.js

@@ -8,17 +8,19 @@ exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _icons = _interopRequireDefault(require("../../icons"));
 var _form = require("../form");
+var _base = require("../base");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var getCloseButton = function getCloseButton(handlerClose) {
+var getCloseButton = function getCloseButton(handleClose) {
   return /*#__PURE__*/_react["default"].createElement("span", {
     className: "close-button",
-    onClick: handlerClose,
-    onKeyPress: undefined,
+    onClick: handleClose,
     role: "button",
     tabIndex: 0
-  }, "X");
+  }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+    name: "cancel2"
+  }));
 };
 var getIcon = function getIcon(titleIcon, icon) {
   if (icon) {
@@ -38,14 +40,15 @@ var Header = function Header(_ref) {
     title = _ref.title,
     icon = _ref.icon,
     titleIcon = _ref.titleIcon;
-  var _useContext = (0, _react.useContext)(_form.FormDialogContext),
-    headerRef = _useContext.headerRef;
+  var formDialogContext = (0, _react.useContext)(_form.FormDialogContext);
+  var dialogContext = (0, _react.useContext)(_base.DialogContext);
+  var handleClose = handlerClose || dialogContext.handleClose;
   return /*#__PURE__*/_react["default"].createElement("div", {
     role: "button",
     tabIndex: -1,
     onFocus: function onFocus() {},
     onBlur: function onBlur() {},
-    ref: headerRef,
+    ref: formDialogContext === null || formDialogContext === void 0 ? void 0 : formDialogContext.headerRef,
     className: "dialog-header"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(icon !== null || titleIcon !== null ? 'left' : '')
@@ -53,6 +56,6 @@ var Header = function Header(_ref) {
     className: "right"
   }, /*#__PURE__*/_react["default"].createElement("h5", {
     className: "modal-title"
-  }, title), showCloseButton && handlerClose && getCloseButton(handlerClose)));
+  }, title), showCloseButton && getCloseButton(handleClose)));
 };
 var _default = exports["default"] = Header;

package/lib/dialog/base/index.d.ts

@@ -4,6 +4,12 @@ import '../../@types/Align.js';
 import '../../@types/Icon.js';
 import '../../icons/helper.js';
 
-declare const BaseDialog: (props: IBaseProps) => React__default.ReactPortal;
+type DialogContextType = {
+    handleClose: () => void;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+};
+declare const DialogContext: React__default.Context<DialogContextType>;
+declare const BaseDialog: (props: IBaseProps) => JSX.Element | null;
 
-export { BaseDialog as default };
+export { DialogContext, BaseDialog as default };

package/lib/dialog/base/index.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.DialogContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _style = _interopRequireDefault(require("./style"));
@@ -19,16 +19,21 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var body = document.getElementsByTagName('body')[0];
+var DialogContext = exports.DialogContext = /*#__PURE__*/(0, _react.createContext)({});
+var _document = document,
+  body = _document.body;
 var BaseDialog = function BaseDialog(props) {
   var _props$overlay = props.overlay,
     overlay = _props$overlay === void 0 ? true : _props$overlay,
     closeOnEsc = props.closeOnEsc,
-    handlerClose = props.handlerClose,
     closeOnOutsideClick = props.closeOnOutsideClick,
     wrapperClassName = props.wrapperClassName,
     children = props.children,
-    zIndex = props.zIndex;
+    openProp = props.open,
+    onOpenChange = props.onOpenChange,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex,
+    handlerClose = props.handlerClose;
   var _useContext = (0, _react.useContext)(_form.FormDialogContext),
     headerRef = _useContext.headerRef;
   var wrapperEl = (0, _react.useRef)(null);
@@ -36,47 +41,36 @@ var BaseDialog = function BaseDialog(props) {
     _useState2 = _slicedToArray(_useState, 2),
     isDragging = _useState2[0],
     setIsDragging = _useState2[1];
-  var dialogEl = (0, _react.useRef)(document.createElement('div'));
-  dialogEl.current.className = 'dialog';
-  dialogEl.current.dataset.testid = 'dialog-component';
-  var modalContainerEl = (0, _react.useRef)(document.createElement('div'));
-  var overlayEl = (0, _react.useRef)(null);
-  if (overlay && overlayEl.current === null) {
-    overlayEl.current = document.createElement('div');
-    overlayEl.current.className = 'modal-overlay';
-    overlayEl.current.dataset.testid = 'modal-overlay';
-    overlayEl.current.style.zIndex = "".concat(99998 + document.body.getElementsByClassName('modal-overlay').length);
-    body.appendChild(overlayEl.current);
+  var _useState3 = (0, _react.useState)(openProp),
+    _useState4 = _slicedToArray(_useState3, 2),
+    _useState4$ = _useState4[0],
+    open = _useState4$ === void 0 ? true : _useState4$,
+    setOpen = _useState4[1];
+  if (openProp !== undefined && openProp !== open) {
+    setOpen(openProp);
   }
+  var handleClose = function handleClose() {
+    if (openProp !== undefined && onOpenChange) {
+      onOpenChange(false);
+    } else {
+      if (handlerClose) handlerClose();
+      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+      setOpen(false);
+    }
+  };
   var handleClickOutside = function handleClickOutside(event) {
+    if (!closeOnOutsideClick) return;
     var target = event.target;
-    var dialogAlert = document.getElementsByClassName('dialog-alert-wrapper');
+    event.stopPropagation();
     if (wrapperEl !== null && wrapperEl.current !== null && !isDragging && !wrapperEl.current.contains(target)) {
-      if (dialogAlert.length > 0 && dialogAlert[dialogAlert.length - 1].contains(target) || target.classList.contains('button-component')) return;
-      if (handlerClose) handlerClose();
+      handleClose();
     }
   };
   var handleCloseOnEsc = function handleCloseOnEsc(event) {
-    if (event.keyCode === 27 || event.key === 'ESC') {
-      if (handlerClose) handlerClose();
+    if (event.key === 'Escape') {
+      handleClose();
     }
   };
-  var setModalContainer = function setModalContainer() {
-    var zIndexDynamicModalContainers = "".concat(99999 + document.body.getElementsByClassName('modalcontainer').length);
-    modalContainerEl.current.className = 'modalcontainer';
-    modalContainerEl.current.style.zIndex = zIndex || zIndexDynamicModalContainers;
-    body.appendChild(modalContainerEl.current);
-    modalContainerEl.current.appendChild(dialogEl.current);
-  };
-  var removeModalContainer = function removeModalContainer() {
-    var modalComponent = document.getElementsByClassName('modalcontainer');
-    document.body.removeChild(modalComponent[modalComponent.length - 1]);
-  };
-  var removeOverlay = function removeOverlay() {
-    var countModalOverlays = document.body.getElementsByClassName('modal-overlay').length;
-    var modalOverlay = document.getElementsByClassName('modal-overlay')[countModalOverlays - 1];
-    body.removeChild(modalOverlay);
-  };
   var onDialogPositionChange = function onDialogPositionChange(_ref) {
     var positionX = _ref.positionX,
       positionY = _ref.positionY;
@@ -115,35 +109,51 @@ var BaseDialog = function BaseDialog(props) {
   var onMouseUp = function onMouseUp() {
     if (wrapperEl.current) setIsDragging(false);
   };
-  var renderModal = function renderModal() {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: wrapperClassName,
-      "data-testid": "dialog-wrapper",
-      style: (0, _style["default"])(props),
-      ref: wrapperEl
-    }, children);
-  };
+  var createdModal = /*#__PURE__*/_react["default"].createElement("div", {
+    className: "modalcontainer",
+    style: {
+      zIndex: 99999 + Number(zIndex)
+    },
+    onMouseDown: handleClickOutside
+  }, overlay && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "modal-overlay",
+    "data-testid": "modal-overlay"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "dialog",
+    "data-testid": "dialog-component"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: wrapperClassName,
+    "data-testid": "dialog-wrapper",
+    style: (0, _style["default"])(props),
+    ref: wrapperEl
+  }, children)));
   (0, _react.useEffect)(function () {
-    setModalContainer();
-    if (closeOnEsc) document.addEventListener('keyup', handleCloseOnEsc);
+    if (open && closeOnEsc) {
+      document.addEventListener('keydown', handleCloseOnEsc);
+    }
     return function () {
-      removeModalContainer();
-      if (overlay) removeOverlay();
-      if (closeOnEsc) document.removeEventListener('keyup', handleCloseOnEsc);
+      document.removeEventListener('keydown', handleCloseOnEsc);
     };
-  }, []);
+  }, [open, closeOnEsc]);
   (0, _react.useEffect)(function () {
-    document.addEventListener('mousedown', onMouseDown);
-    document.addEventListener('mouseup', onMouseUp);
-    if (closeOnOutsideClick) document.addEventListener('click', handleClickOutside);
-    if (isDragging) document.addEventListener('mousemove', onMouseMove);
+    if (open) {
+      document.addEventListener('mousedown', onMouseDown);
+      document.addEventListener('mouseup', onMouseUp);
+      if (isDragging) document.addEventListener('mousemove', onMouseMove);
+    }
     return function () {
-      if (closeOnOutsideClick) document.removeEventListener('click', handleClickOutside);
       document.removeEventListener('mousedown', onMouseDown);
       document.removeEventListener('mouseup', onMouseUp);
       document.removeEventListener('mousemove', onMouseMove);
     };
-  }, [isDragging]);
-  return /*#__PURE__*/_reactDom["default"].createPortal(renderModal(), dialogEl.current);
+  }, [isDragging, open]);
+  if (!open) return null;
+  return /*#__PURE__*/_react["default"].createElement(DialogContext.Provider, {
+    value: {
+      handleClose: handleClose,
+      open: open,
+      onOpenChange: onOpenChange || setOpen
+    }
+  }, /*#__PURE__*/_reactDom["default"].createPortal(createdModal, body));
 };
 var _default = exports["default"] = BaseDialog;

package/lib/dialog/form/index.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,12 +16,13 @@ var _withFormSecurity = _interopRequireWildcard(require("../../form/withFormSecu
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var FormDialogContext = exports.FormDialogContext = /*#__PURE__*/(0, _react.createContext)({});
 var ModalForm = function ModalForm(props) {
   var _props$showFooter = props.showFooter,
@@ -63,9 +63,11 @@ var ModalForm = function ModalForm(props) {
     wrapperClassName: "dialog-form-wrapper"
   }), props.title && /*#__PURE__*/_react["default"].createElement("div", {
     className: "header-form"
-  }, /*#__PURE__*/_react["default"].createElement(_Header["default"], _extends({
-    handlerClose: props.handlerClose
-  }, props))), /*#__PURE__*/_react["default"].createElement(_Content["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+    title: props.title,
+    handlerClose: props.handlerClose,
+    icon: props.icon
+  })), /*#__PURE__*/_react["default"].createElement(_Content["default"], {
     styleForContent: _objectSpread(_objectSpread({}, props.styleForContent), overlayStyle)
   }, content || children), getSpinner(), showFooter && props.buttons && props.buttons.length > 0 && /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, /*#__PURE__*/_react["default"].createElement(_index.ButtonContainer, _extends({}, props, {
     style: _objectSpread({}, overlayStyle)

package/lib/dialog/types.d.ts

@@ -19,30 +19,25 @@ interface IHeaderProps {
 }
 interface IBaseProps {
     wrapperClassName: string;
-    width: string;
-    height: string;
+    width?: string;
+    height?: string;
     children: ReactNode | ReactNode[];
-    handlerClose?: () => void;
     closeOnEsc?: boolean;
     closeOnOutsideClick?: boolean;
     overlay?: boolean;
     textAlign?: TextAlign;
-    zIndex?: string;
+    zIndex?: number | string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    handlerClose?: () => void;
 }
-interface IFormProps {
-    children: ReactNode | ReactNode[];
+interface IFormProps extends Omit<IBaseProps, 'textAlign' | 'zIndex' | 'wrapperClassName'> {
     buttons?: JSX.Element[];
     styleForContent?: CSSProperties;
     title?: string;
-    width?: string;
-    height?: string;
     showFooter?: boolean;
     isWaiting?: boolean;
-    handlerClose?: () => void;
     icon?: JSX.Element;
-    closeOnOutsideClick?: boolean;
-    closeOnEsc?: boolean;
-    overlay?: boolean;
     content?: ReactNode;
 }
 interface ICommonDialogProps {
@@ -57,7 +52,7 @@ interface IQuestionProps {
     isWaiting?: boolean;
     text?: string;
     title?: string;
-    zIndex?: string;
+    zIndex?: number | string;
 }
 interface ICustomProps {
     icon: ReactElement;

package/lib/drawer/Header.js

@@ -16,10 +16,11 @@ var getCloseButton = function getCloseButton(handlerClose) {
     "data-testid": "header-closebutton",
     className: "closebutton",
     onClick: handlerClose,
-    onKeyPress: undefined,
     role: "button",
     tabIndex: 0
-  }, "X");
+  }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+    name: "cancel2"
+  }));
 };
 var getIcon = function getIcon(titleIcon, icon) {
   if (titleIcon || icon) {

package/lib/form/types.d.ts

@@ -175,6 +175,7 @@ interface IWithFieldContext {
     handlerSetValidatorFromComponent: (validator: Validator | Validator[]) => void;
 }
 interface IWithFormSecurity {
+    onOpenChange?: (open: boolean) => void;
     handlerClose?: () => void;
     onClick?: MouseEventHandler;
     children?: ReactNode;

package/lib/form/withFormSecurity.js

@@ -18,7 +18,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var FormSecurityContext = exports.FormSecurityContext = /*#__PURE__*/_react["default"].createContext({});
 var withFormSecurity = function withFormSecurity(WrappedComponent) {
   var EnhancedComponent = function EnhancedComponent(props) {
-    var handlerClose = props.handlerClose;
+    var onOpenChange = props.onOpenChange,
+      handlerClose = props.handlerClose;
     var changedData = (0, _react.useRef)(false);
     var securityBeforeUnload = (0, _react.useRef)(false);
     var _useState = (0, _react.useState)(false),
@@ -28,9 +29,10 @@ var withFormSecurity = function withFormSecurity(WrappedComponent) {
     var newHandlerClose = function newHandlerClose() {
       if (changedData.current && securityBeforeUnload.current) {
         setShowQuestion(true);
-      } else if (handlerClose) handlerClose();
+      } else if (onOpenChange) onOpenChange(false);else if (handlerClose) handlerClose();
     };
     var onConfirmClick = function onConfirmClick() {
+      if (onOpenChange) onOpenChange(false);
       if (handlerClose) handlerClose();
     };
     var onUnconfirmClick = function onUnconfirmClick() {

package/lib/index.d.ts

@@ -7,7 +7,7 @@ export { default as List } from './list/index.js';
 export { default as Radio } from './radio/index.js';
 export { default as Tab } from './tabs/index.js';
 export { default as Dialog } from './dialog/base/index.js';
-import './types-exUmt06D.js';
+import './panel/types.js';
 import 'react';
 import './@types/PermissionAttr.js';
 import './internals/colorStyles.js';

package/lib/inputs/date/Dialog.js

@@ -8,15 +8,13 @@ var _react = _interopRequireDefault(require("react"));
 var _base = _interopRequireDefault(require("../../dialog/base"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var Dialog = function Dialog(_ref) {
-  var _handlerClose = _ref.handlerClose,
+  var handlerClose = _ref.handlerClose,
     children = _ref.children,
     dialogSize = _ref.dialogSize;
   return /*#__PURE__*/_react["default"].createElement(_base["default"], {
     width: dialogSize.width,
     height: dialogSize.height,
-    handlerClose: function handlerClose() {
-      _handlerClose();
-    },
+    onOpenChange: handlerClose,
     closeOnOutsideClick: true,
     closeOnEsc: true,
     wrapperClassName: ""

package/lib/inputs/date/index.js

@@ -202,9 +202,7 @@ var DatePicker = function DatePicker(props) {
     if (showCalendarInDialog) {
       return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], {
         dialogSize: dialogSize,
-        handlerClose: function handlerClose() {
-          setShowCalendar(false);
-        }
+        handlerClose: setShowCalendar
       }, getCalendar(valueState, props === null || props === void 0 ? void 0 : props.calendarColorStyle));
     }
     return /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {

package/lib/inputs/date/types.d.ts

@@ -45,7 +45,7 @@ interface IDateDropdownProps {
 }
 interface IDateDialogProps {
     children: ReactNode | ReactNode[];
-    handlerClose: () => void;
+    handlerClose: (open: boolean) => void;
     dialogSize: {
         width: string;
         height: string;

package/lib/inputs/period/Dialog.d.ts

@@ -7,6 +7,6 @@ import '../../@types/PermissionAttr.js';
 import '../base/types.js';
 import '../../@types/Align.js';
 
-declare const Dialog: ({ handlerClose, children, dialogSize }: IDialogProps) => JSX.Element;
+declare const Dialog: ({ onOpenChange, children, dialogSize }: IDialogProps) => JSX.Element;
 
 export { Dialog as default };

package/lib/inputs/period/Dialog.js

@@ -8,15 +8,13 @@ var _react = _interopRequireDefault(require("react"));
 var _base = _interopRequireDefault(require("../../dialog/base"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var Dialog = function Dialog(_ref) {
-  var _handlerClose = _ref.handlerClose,
+  var onOpenChange = _ref.onOpenChange,
     children = _ref.children,
     dialogSize = _ref.dialogSize;
   return /*#__PURE__*/_react["default"].createElement(_base["default"], {
     width: dialogSize.width,
     height: dialogSize.height,
-    handlerClose: function handlerClose() {
-      _handlerClose();
-    },
+    onOpenChange: onOpenChange,
     closeOnOutsideClick: true,
     closeOnEsc: true,
     wrapperClassName: ""