@majoo-ui/react 1.54.11 → 1.54.12

package/components/modalDialog/ModalDialog.d.ts

@@ -398,6 +398,8 @@ interface ModalDialogProps extends IDialog, DialogContentProps {
     width?: string | number;
     /** Set default behavior when opening dialog with form. Usually used with prevent default*/
     onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
+    /** Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.*/
+    onPointerDownOutside?: (e: any) => void;
     /**
      * If true, the close icon button is hidden
      */

package/components/table/MobileTable.d.ts

@@ -18,6 +18,7 @@ interface MobileTableProps {
     hiddenColumns?: string[];
     css?: CSS;
     customRowsStyle?: (e: any) => CustomRowsStyle[];
+    cellAlign?: 'top' | 'center' | 'bottom';
 }
 declare const MobileTable: React.ForwardRefExoticComponent<MobileTableProps & React.RefAttributes<HTMLDivElement>>;
 export default MobileTable;

package/index.esm.css

@@ -245,6 +245,7 @@
 
 .pac-container {
   z-index: 1800;
+  pointer-events: auto;
 }
 
 .rdw-option-wrapper {

package/index.esm.js

@@ -14044,9 +14044,10 @@ const ModalDialog = props => {
     isMobile,
     width,
     onOpenAutoFocus,
-    disabledCloseButton
+    disabledCloseButton,
+    onPointerDownOutside
   } = props,
-        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "width", "onOpenAutoFocus", "disabledCloseButton"]);
+        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "width", "onOpenAutoFocus", "disabledCloseButton", "onPointerDownOutside"]);
 
   const childArray = React__default.Children.toArray(children);
   const modalDialogFooter = findNodeChild$1(childArray, 'ModalDialogFooter');
@@ -14085,7 +14086,8 @@ const ModalDialog = props => {
           } else {
             onOpenAutoFocus(e);
           }
-        }
+        },
+        onPointerDownOutside: e => onPointerDownOutside === null || onPointerDownOutside === void 0 ? void 0 : onPointerDownOutside(e)
       }, {
         children: jsxs(Box, Object.assign({
           css: {
@@ -17992,7 +17994,8 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   rowGroup,
   hiddenColumns,
   css,
-  customRowsStyle
+  customRowsStyle,
+  cellAlign
 }, ref) => {
   const {
     getTableProps,
@@ -18007,6 +18010,20 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
       sortBy
     }
   } = instance;
+
+  const getAlign = align => {
+    switch (align) {
+      case 'top':
+        return 'start';
+
+      case 'bottom':
+        return 'end';
+
+      default:
+        return 'center';
+    }
+  };
+
   return jsx(TableContainer$4, Object.assign({
     css: css,
     ref: ref
@@ -18094,10 +18111,14 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       css: {
                         backgroundColor: colors$4.bgGray,
                         padding: `$spacing-03 $spacing-05 ${'selection' in row.values ? '$spacing-03 $spacing-07' : ''}`,
-                        borderBottom: '1pt solid $bgBorder'
+                        borderBottom: '1pt solid $bgBorder',
+                        alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
                       }
                     }, {
                       children: [jsx(Heading, Object.assign({
+                        css: {
+                          padding: '3px 0px'
+                        },
                         heading: "headerTable",
                         color: "secondary"
                       }, {
@@ -18861,7 +18882,8 @@ function Table({
       rowGroup: rowGroup,
       hiddenColumns: hiddenColumns,
       css: css,
-      customRowsStyle: customRowsStyle
+      customRowsStyle: customRowsStyle,
+      cellAlign: cellAlign
     }, void 0)]
   }), void 0);
 } //Dummy component for mdx docs purpose only
@@ -30334,7 +30356,8 @@ function InputMapPicker(props) {
       }), void 0)]
     }), void 0), jsxs(ModalDialog, Object.assign({
       width: isDesktop ? 565 : '100%',
-      layer: "$modal"
+      layer: "$modal",
+      onPointerDownOutside: e => e.preventDefault()
     }, {
       children: [jsx(ModalDialogTrigger, Object.assign({
         asChild: true

package/index.umd.css

@@ -245,6 +245,7 @@
 
 .pac-container {
   z-index: 1800;
+  pointer-events: auto;
 }
 
 .rdw-option-wrapper {

package/index.umd.js

@@ -14216,7 +14216,8 @@
         width = props.width,
         onOpenAutoFocus = props.onOpenAutoFocus,
         disabledCloseButton = props.disabledCloseButton,
-        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "width", "onOpenAutoFocus", "disabledCloseButton"]);
+        onPointerDownOutside = props.onPointerDownOutside,
+        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "width", "onOpenAutoFocus", "disabledCloseButton", "onPointerDownOutside"]);
 
     var childArray = React__default["default"].Children.toArray(children);
     var modalDialogFooter = findNodeChild$1(childArray, 'ModalDialogFooter');
@@ -14255,6 +14256,9 @@
             } else {
               onOpenAutoFocus(e);
             }
+          },
+          onPointerDownOutside: function (e) {
+            return onPointerDownOutside === null || onPointerDownOutside === void 0 ? void 0 : onPointerDownOutside(e);
           }
         }, {
           children: jsxRuntime.jsxs(Box, __assign({
@@ -18279,7 +18283,8 @@
         rowGroup = _a.rowGroup;
         _a.hiddenColumns;
         var css = _a.css,
-        customRowsStyle = _a.customRowsStyle;
+        customRowsStyle = _a.customRowsStyle,
+        cellAlign = _a.cellAlign;
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
@@ -18289,6 +18294,20 @@
         state = instance.state,
         toggleAllRowsExpanded = instance.toggleAllRowsExpanded,
         sortBy = instance.state.sortBy;
+
+    var getAlign = function getAlign(align) {
+      switch (align) {
+        case 'top':
+          return 'start';
+
+        case 'bottom':
+          return 'end';
+
+        default:
+          return 'center';
+      }
+    };
+
     return jsxRuntime.jsx(TableContainer$4, __assign({
       css: css,
       ref: ref
@@ -18386,10 +18405,14 @@
                         css: {
                           backgroundColor: colors$4.bgGray,
                           padding: "$spacing-03 $spacing-05 ".concat('selection' in row.values ? '$spacing-03 $spacing-07' : ''),
-                          borderBottom: '1pt solid $bgBorder'
+                          borderBottom: '1pt solid $bgBorder',
+                          alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
                         }
                       }, {
                         children: [jsxRuntime.jsx(Heading, __assign({
+                          css: {
+                            padding: '3px 0px'
+                          },
                           heading: "headerTable",
                           color: "secondary"
                         }, {
@@ -19214,7 +19237,8 @@
         rowGroup: rowGroup,
         hiddenColumns: hiddenColumns,
         css: css,
-        customRowsStyle: customRowsStyle
+        customRowsStyle: customRowsStyle,
+        cellAlign: cellAlign
       }, void 0)]
     }), void 0);
   } //Dummy component for mdx docs purpose only
@@ -30776,7 +30800,10 @@
         }), void 0)]
       }), void 0), jsxRuntime.jsxs(ModalDialog, __assign({
         width: isDesktop ? 565 : '100%',
-        layer: "$modal"
+        layer: "$modal",
+        onPointerDownOutside: function (e) {
+          return e.preventDefault();
+        }
       }, {
         children: [jsxRuntime.jsx(ModalDialogTrigger, __assign({
           asChild: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.54.11",
+  "version": "1.54.12",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",