@majoo-ui/react 1.50.2-rc.2 → 1.50.2

package/components/pageDialog/PageDialog.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Dialog } from '../../';
 import { FocusScopeProps } from '@radix-ui/react-dialog';
+import { PointerDownOutsideEvent, FocusOutsideEvent } from '@radix-ui/react-dismissable-layer';
 import type { DialogContentProps } from '..';
 export declare const PageDialogFooter: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
     sm: "(min-width: 359px)";
@@ -394,6 +395,9 @@ interface PageDialogProps extends IDialog, DialogContentProps {
     isMobile?: boolean | undefined;
     /** Set default behavior when opening dialog with form. Usually used with prevent default*/
     onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
+    onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
+    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
+    onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
 }
 /**
  * PageDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.

package/index.esm.js

@@ -14989,11 +14989,11 @@ const NativeTimePicker = ({
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "column",
-    gap: size === 'sm' ? 4 : 5,
     align: "center",
     justify: "center",
     css: {
-      width: 'fit-content'
+      width: 'fit-content',
+      gap: size === 'sm' ? 14 : 18
     },
     __self: undefined,
     __source: {
@@ -15007,7 +15007,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 160,
+      lineNumber: 165,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -15017,7 +15017,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 161,
+      lineNumber: 166,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -15027,7 +15027,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 162,
+      lineNumber: 167,
       columnNumber: 9
     }
   })), /*#__PURE__*/React__default.createElement(Input$3, {
@@ -15038,7 +15038,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 164,
+      lineNumber: 169,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Time, {
@@ -15046,7 +15046,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 165,
+      lineNumber: 170,
       columnNumber: 7
     }
   }, moment(date).format(format)), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15055,7 +15055,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 166,
+      lineNumber: 171,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -15065,7 +15065,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 167,
+      lineNumber: 172,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(IconStateFull$1, {
@@ -15075,7 +15075,7 @@ const NativeTimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 168,
+      lineNumber: 173,
       columnNumber: 9
     }
   })));
@@ -15131,7 +15131,7 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 203,
+      lineNumber: 208,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(NativeTimePicker, {
@@ -15145,7 +15145,7 @@ const TimePicker = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$k,
-      lineNumber: 204,
+      lineNumber: 209,
       columnNumber: 7
     }
   }));
@@ -15218,7 +15218,7 @@ function InputTimePicker({
   const isMobile = useMediaQuery(`(max-width: 480px)`);
 
   function handleChange() {
-    if (!disabled) {
+    if (!disabled && !readOnly) {
       setOpenPicker(!openPicker);
     }
   }
@@ -15253,8 +15253,9 @@ function InputTimePicker({
     placeholder: placeholder,
     value: getInputPickerValue$1(value),
     defaultValue: defaultValue,
-    isPicker: true,
-    tabIndex: "-1",
+    onChange: () => {},
+    isPicker: true // tabIndex="-1"
+    ,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
@@ -15274,7 +15275,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 54,
+      lineNumber: 55,
       columnNumber: 5
     }
   });
@@ -15286,22 +15287,22 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 66,
+      lineNumber: 67,
       columnNumber: 5
     }
-  }, disabled ? /*#__PURE__*/React__default.createElement(Box, {
+  }, disabled || readOnly ? /*#__PURE__*/React__default.createElement(Box, {
     css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 68,
+      lineNumber: 69,
       columnNumber: 9
     }
   }, renderInputGroup()) : /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 70,
+      lineNumber: 71,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -15309,14 +15310,14 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 71,
+      lineNumber: 72,
       columnNumber: 11
     }
   }, renderInputGroup())), /*#__PURE__*/React__default.createElement(PopoverContent, {
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 74,
+      lineNumber: 75,
       columnNumber: 7
     }
   }, renderTimePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
@@ -15324,7 +15325,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 78,
+      lineNumber: 79,
       columnNumber: 7
     }
   }, renderInputGroup()), /*#__PURE__*/React__default.createElement(Drawer, {
@@ -15334,7 +15335,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 79,
+      lineNumber: 80,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(DrawerContent, {
@@ -15345,7 +15346,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 80,
+      lineNumber: 81,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -15357,7 +15358,7 @@ function InputTimePicker({
     __self: this,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 86,
+      lineNumber: 87,
       columnNumber: 11
     }
   }, renderTimePicker()))));
@@ -15849,7 +15850,7 @@ function InputDatePicker({
   const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
 
   function handleChange() {
-    if (!disabled) {
+    if (!disabled && !readOnly) {
       setOpenPicker(!openPicker);
     }
   }
@@ -15909,7 +15910,7 @@ function InputDatePicker({
     onOpenChange: setOpenPicker,
     placement: placement
   }, {
-    children: [disabled ? jsx(Box, Object.assign({
+    children: [disabled || readOnly ? jsx(Box, Object.assign({
       css: css
     }, {
       children: renderInputGroup()
@@ -18316,9 +18317,12 @@ const PageDialog = props => {
     css,
     layer,
     isMobile: _isMobile,
-    onOpenAutoFocus
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    onPointerDownOutside,
+    onInteractOutside
   } = props,
-        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "onOpenAutoFocus"]);
+        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "onOpenAutoFocus", "onCloseAutoFocus", "onPointerDownOutside", "onInteractOutside"]);
 
   const childArray = React__default.Children.toArray(children);
   const footerChildren = findNodeChild(childArray, 'PageDialogFooter');
@@ -18350,6 +18354,27 @@ const PageDialog = props => {
           } else {
             onOpenAutoFocus(e);
           }
+        },
+        onCloseAutoFocus: e => {
+          if (!onCloseAutoFocus) {
+            e.preventDefault();
+          } else {
+            onCloseAutoFocus(e);
+          }
+        },
+        onPointerDownOutside: e => {
+          if (!onPointerDownOutside) {
+            e.preventDefault();
+          } else {
+            onPointerDownOutside(e);
+          }
+        },
+        onInteractOutside: e => {
+          if (!onInteractOutside) {
+            e.preventDefault();
+          } else {
+            onInteractOutside(e);
+          }
         }
       }, {
         children: jsxs(Box, Object.assign({
@@ -18555,7 +18580,7 @@ function Content$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 75,
+      lineNumber: 74,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay, {
@@ -18565,14 +18590,14 @@ function Content$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 76,
+      lineNumber: 75,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$1, _extends({}, props, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 77,
+      lineNumber: 76,
       columnNumber: 7
     }
   }), children));
@@ -18586,14 +18611,14 @@ function AlertDialogFunction(properties) {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 86,
+        lineNumber: 85,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(TemplateAlertFunction, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 87,
+        lineNumber: 86,
         columnNumber: 9
       }
     }))), document.getElementById('a-dialog'));
@@ -18637,7 +18662,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 128,
+      lineNumber: 127,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -18654,14 +18679,14 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 129,
+      lineNumber: 128,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 140,
+      lineNumber: 139,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -18669,24 +18694,15 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 141,
+      lineNumber: 140,
       columnNumber: 11
     }
-  }, props.title), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
-    condition: !props.onCancel,
-    wrapper: children => /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
-      asChild: true,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$b,
-        lineNumber: 144,
-        columnNumber: 34
-      }
-    }, children),
+  }, props.title), /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
+    asChild: true,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 142,
+      lineNumber: 141,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18697,7 +18713,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 146,
+      lineNumber: 142,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18705,7 +18721,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 147,
+      lineNumber: 143,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18713,14 +18729,14 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 151,
+      lineNumber: 147,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 152,
+      lineNumber: 148,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18731,7 +18747,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 153,
+      lineNumber: 149,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18741,7 +18757,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 157,
+      lineNumber: 153,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18749,7 +18765,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 158,
+      lineNumber: 154,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18763,7 +18779,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 159,
+      lineNumber: 155,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18771,7 +18787,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 161,
+      lineNumber: 157,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -18783,24 +18799,15 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 162,
+      lineNumber: 158,
       columnNumber: 17
     }
-  }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
-    condition: !props.onCancel,
-    wrapper: children => /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
-      asChild: true,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$b,
-        lineNumber: 176,
-        columnNumber: 40
-      }
-    }, children),
+  }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
+    asChild: true,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 174,
+      lineNumber: 170,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -18816,7 +18823,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 178,
+      lineNumber: 171,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18824,7 +18831,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 192,
+      lineNumber: 185,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -18839,7 +18846,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 193,
+      lineNumber: 186,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -18864,7 +18871,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 224,
+      lineNumber: 217,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -18877,14 +18884,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 225,
+      lineNumber: 218,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 233,
+      lineNumber: 226,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -18892,24 +18899,15 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 234,
+      lineNumber: 227,
       columnNumber: 11
     }
-  }, props.title), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
-    condition: !props.onClose || !props.onCancel,
-    wrapper: children => /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
-      asChild: true,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$b,
-        lineNumber: 237,
-        columnNumber: 34
-      }
-    }, children),
+  }, props.title), /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
+    asChild: true,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 235,
+      lineNumber: 228,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18920,7 +18918,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 239,
+      lineNumber: 229,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18928,7 +18926,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 240,
+      lineNumber: 230,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18936,14 +18934,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 244,
+      lineNumber: 234,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription$1, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 245,
+      lineNumber: 235,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18953,7 +18951,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 246,
+      lineNumber: 236,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18963,7 +18961,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 248,
+      lineNumber: 238,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18971,7 +18969,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 249,
+      lineNumber: 239,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18985,7 +18983,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 250,
+      lineNumber: 240,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18993,7 +18991,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 252,
+      lineNumber: 242,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19008,24 +19006,15 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 253,
+      lineNumber: 243,
       columnNumber: 17
     }
-  }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
-    condition: !props.onCancel,
-    wrapper: children => /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
-      asChild: true,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$b,
-        lineNumber: 268,
-        columnNumber: 40
-      }
-    }, children),
+  }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
+    asChild: true,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 266,
+      lineNumber: 256,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19041,7 +19030,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 270,
+      lineNumber: 257,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -19049,7 +19038,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 284,
+      lineNumber: 271,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
@@ -19064,7 +19053,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 285,
+      lineNumber: 272,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));

package/index.umd.js

@@ -15235,11 +15235,11 @@
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       direction: "column",
-      gap: size === 'sm' ? 4 : 5,
       align: "center",
       justify: "center",
       css: {
-        width: 'fit-content'
+        width: 'fit-content',
+        gap: size === 'sm' ? 14 : 18
       },
       __self: undefined,
       __source: {
@@ -15253,7 +15253,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 160,
+        lineNumber: 165,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -15263,7 +15263,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 161,
+        lineNumber: 166,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -15273,7 +15273,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 162,
+        lineNumber: 167,
         columnNumber: 9
       }
     })), /*#__PURE__*/React__default["default"].createElement(Input$3, {
@@ -15284,7 +15284,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 164,
+        lineNumber: 169,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Time, {
@@ -15292,7 +15292,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 165,
+        lineNumber: 170,
         columnNumber: 7
       }
     }, moment__default["default"](date).format(format)), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15301,7 +15301,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 166,
+        lineNumber: 171,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -15311,7 +15311,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 167,
+        lineNumber: 172,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
@@ -15321,7 +15321,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 168,
+        lineNumber: 173,
         columnNumber: 9
       }
     })));
@@ -15377,7 +15377,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 203,
+        lineNumber: 208,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(NativeTimePicker, {
@@ -15391,7 +15391,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$k,
-        lineNumber: 204,
+        lineNumber: 209,
         columnNumber: 7
       }
     }));
@@ -15464,7 +15464,7 @@
     const isMobile = useMediaQuery(`(max-width: 480px)`);
 
     function handleChange() {
-      if (!disabled) {
+      if (!disabled && !readOnly) {
         setOpenPicker(!openPicker);
       }
     }
@@ -15499,8 +15499,9 @@
       placeholder: placeholder,
       value: getInputPickerValue$1(value),
       defaultValue: defaultValue,
-      isPicker: true,
-      tabIndex: "-1",
+      onChange: () => {},
+      isPicker: true // tabIndex="-1"
+      ,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
@@ -15520,7 +15521,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 54,
+        lineNumber: 55,
         columnNumber: 5
       }
     });
@@ -15532,22 +15533,22 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 66,
+        lineNumber: 67,
         columnNumber: 5
       }
-    }, disabled ? /*#__PURE__*/React__default["default"].createElement(Box, {
+    }, disabled || readOnly ? /*#__PURE__*/React__default["default"].createElement(Box, {
       css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 68,
+        lineNumber: 69,
         columnNumber: 9
       }
     }, renderInputGroup()) : /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 70,
+        lineNumber: 71,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15555,14 +15556,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 71,
+        lineNumber: 72,
         columnNumber: 11
       }
     }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 74,
+        lineNumber: 75,
         columnNumber: 7
       }
     }, renderTimePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -15570,7 +15571,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 78,
+        lineNumber: 79,
         columnNumber: 7
       }
     }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
@@ -15580,7 +15581,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 79,
+        lineNumber: 80,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
@@ -15591,7 +15592,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 80,
+        lineNumber: 81,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -15603,7 +15604,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 86,
+        lineNumber: 87,
         columnNumber: 11
       }
     }, renderTimePicker()))));
@@ -16119,7 +16120,7 @@
     var isMobile = useMediaQuery("(max-width: ".concat(type === SINGLE_PICKER ? '480px' : '767px', ")"));
 
     function handleChange() {
-      if (!disabled) {
+      if (!disabled && !readOnly) {
         setOpenPicker(!openPicker);
       }
     }
@@ -16185,7 +16186,7 @@
       onOpenChange: setOpenPicker,
       placement: placement
     }, {
-      children: [disabled ? jsxRuntime.jsx(Box, __assign({
+      children: [disabled || readOnly ? jsxRuntime.jsx(Box, __assign({
         css: css
       }, {
         children: renderInputGroup()
@@ -18650,7 +18651,10 @@
         layer = props.layer,
         _isMobile = props.isMobile,
         onOpenAutoFocus = props.onOpenAutoFocus,
-        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "onOpenAutoFocus"]);
+        onCloseAutoFocus = props.onCloseAutoFocus,
+        onPointerDownOutside = props.onPointerDownOutside,
+        onInteractOutside = props.onInteractOutside,
+        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "onOpenAutoFocus", "onCloseAutoFocus", "onPointerDownOutside", "onInteractOutside"]);
 
     var childArray = React__default["default"].Children.toArray(children);
     var footerChildren = findNodeChild(childArray, 'PageDialogFooter');
@@ -18682,6 +18686,27 @@
             } else {
               onOpenAutoFocus(e);
             }
+          },
+          onCloseAutoFocus: function (e) {
+            if (!onCloseAutoFocus) {
+              e.preventDefault();
+            } else {
+              onCloseAutoFocus(e);
+            }
+          },
+          onPointerDownOutside: function (e) {
+            if (!onPointerDownOutside) {
+              e.preventDefault();
+            } else {
+              onPointerDownOutside(e);
+            }
+          },
+          onInteractOutside: function (e) {
+            if (!onInteractOutside) {
+              e.preventDefault();
+            } else {
+              onInteractOutside(e);
+            }
           }
         }, {
           children: jsxRuntime.jsxs(Box, __assign({
@@ -18887,7 +18912,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 75,
+        lineNumber: 74,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay, {
@@ -18897,14 +18922,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 76,
+        lineNumber: 75,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledContent$1, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 77,
+        lineNumber: 76,
         columnNumber: 7
       }
     }), children));
@@ -18918,14 +18943,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$b,
-          lineNumber: 86,
+          lineNumber: 85,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(TemplateAlertFunction, _extends({}, props, {
         __self: this,
         __source: {
           fileName: _jsxFileName$b,
-          lineNumber: 87,
+          lineNumber: 86,
           columnNumber: 9
         }
       }))), document.getElementById('a-dialog'));
@@ -18969,7 +18994,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 128,
+        lineNumber: 127,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
@@ -18986,14 +19011,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 129,
+        lineNumber: 128,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 140,
+        lineNumber: 139,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -19001,24 +19026,15 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 141,
+        lineNumber: 140,
         columnNumber: 11
       }
-    }, props.title), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
-      condition: !props.onCancel,
-      wrapper: children => /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
-        asChild: true,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$b,
-          lineNumber: 144,
-          columnNumber: 34
-        }
-      }, children),
+    }, props.title), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
+      asChild: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 142,
+        lineNumber: 141,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19029,7 +19045,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 146,
+        lineNumber: 142,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -19037,7 +19053,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 147,
+        lineNumber: 143,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19045,14 +19061,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 151,
+        lineNumber: 147,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 152,
+        lineNumber: 148,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -19063,7 +19079,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 153,
+        lineNumber: 149,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19073,7 +19089,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 157,
+        lineNumber: 153,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19081,7 +19097,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 158,
+        lineNumber: 154,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -19095,7 +19111,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 159,
+        lineNumber: 155,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19103,7 +19119,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 161,
+        lineNumber: 157,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19115,24 +19131,15 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 162,
+        lineNumber: 158,
         columnNumber: 17
       }
-    }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
-      condition: !props.onCancel,
-      wrapper: children => /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
-        asChild: true,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$b,
-          lineNumber: 176,
-          columnNumber: 40
-        }
-      }, children),
+    }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
+      asChild: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 174,
+        lineNumber: 170,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19148,7 +19155,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 178,
+        lineNumber: 171,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19156,7 +19163,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 192,
+        lineNumber: 185,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19171,7 +19178,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 193,
+        lineNumber: 186,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -19196,7 +19203,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 224,
+        lineNumber: 217,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
@@ -19209,14 +19216,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 225,
+        lineNumber: 218,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 233,
+        lineNumber: 226,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -19224,24 +19231,15 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 234,
+        lineNumber: 227,
         columnNumber: 11
       }
-    }, props.title), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
-      condition: !props.onClose || !props.onCancel,
-      wrapper: children => /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
-        asChild: true,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$b,
-          lineNumber: 237,
-          columnNumber: 34
-        }
-      }, children),
+    }, props.title), /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
+      asChild: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 235,
+        lineNumber: 228,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19252,7 +19250,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 239,
+        lineNumber: 229,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -19260,7 +19258,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 240,
+        lineNumber: 230,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19268,14 +19266,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 244,
+        lineNumber: 234,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 245,
+        lineNumber: 235,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -19285,7 +19283,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 246,
+        lineNumber: 236,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19295,7 +19293,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 248,
+        lineNumber: 238,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19303,7 +19301,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 249,
+        lineNumber: 239,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -19317,7 +19315,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 250,
+        lineNumber: 240,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19325,7 +19323,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 252,
+        lineNumber: 242,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19340,24 +19338,15 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 253,
+        lineNumber: 243,
         columnNumber: 17
       }
-    }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
-      condition: !props.onCancel,
-      wrapper: children => /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
-        asChild: true,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$b,
-          lineNumber: 268,
-          columnNumber: 40
-        }
-      }, children),
+    }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
+      asChild: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 266,
+        lineNumber: 256,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19373,7 +19362,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 270,
+        lineNumber: 257,
         columnNumber: 19
       }
     }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -19381,7 +19370,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 284,
+        lineNumber: 271,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
@@ -19396,7 +19385,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 285,
+        lineNumber: 272,
         columnNumber: 19
       }
     }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.50.2-rc.2",
+  "version": "1.50.2",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",