@majoo-ui/react 1.54.10 → 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

@@ -4098,11 +4098,10 @@ const CardComponent = styled('div', {
   borderRadius: '$lg',
   position: 'relative',
   backgroundColor: '$white',
-  border: '1px solid $bgBorder',
   variants: {
     shadow: {
       true: {
-        boxShadow: '0px 2px 12px #00000014'
+        boxShadow: '0px 0px 11px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.03)'
       }
     }
   }
@@ -4242,7 +4241,7 @@ const Card = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 103,
+      lineNumber: 102,
       columnNumber: 5
     }
   }, showBottomLine && /*#__PURE__*/React__default.createElement(CardLineColor, {
@@ -4250,14 +4249,14 @@ const Card = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 114,
+      lineNumber: 113,
       columnNumber: 26
     }
   }), title !== '' ? icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 117,
+      lineNumber: 116,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
@@ -4266,14 +4265,14 @@ const Card = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 118,
+      lineNumber: 117,
       columnNumber: 13
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$V,
-      lineNumber: 124,
+      lineNumber: 123,
       columnNumber: 11
     }
   }, title) : null, children);
@@ -4293,7 +4292,7 @@ Card.propTypes = {
 Card.defaultProps = {
   className: '',
   color: 'green',
-  shadow: false,
+  shadow: true,
   radius: '$lg',
   padding: '12px',
   title: '',
@@ -14045,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');
@@ -14086,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: {
@@ -17993,7 +17994,8 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   rowGroup,
   hiddenColumns,
   css,
-  customRowsStyle
+  customRowsStyle,
+  cellAlign
 }, ref) => {
   const {
     getTableProps,
@@ -18008,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
@@ -18095,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"
                       }, {
@@ -18862,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
@@ -30335,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

@@ -4178,11 +4178,10 @@
     borderRadius: '$lg',
     position: 'relative',
     backgroundColor: '$white',
-    border: '1px solid $bgBorder',
     variants: {
       shadow: {
         true: {
-          boxShadow: '0px 2px 12px #00000014'
+          boxShadow: '0px 0px 11px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.03)'
         }
       }
     }
@@ -4322,7 +4321,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 103,
+        lineNumber: 102,
         columnNumber: 5
       }
     }, showBottomLine && /*#__PURE__*/React__default["default"].createElement(CardLineColor, {
@@ -4330,14 +4329,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 114,
+        lineNumber: 113,
         columnNumber: 26
       }
     }), title !== '' ? icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 117,
+        lineNumber: 116,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
@@ -4346,14 +4345,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 118,
+        lineNumber: 117,
         columnNumber: 13
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$V,
-        lineNumber: 124,
+        lineNumber: 123,
         columnNumber: 11
       }
     }, title) : null, children);
@@ -4373,7 +4372,7 @@
   Card.defaultProps = {
     className: '',
     color: 'green',
-    shadow: false,
+    shadow: true,
     radius: '$lg',
     padding: '12px',
     title: '',
@@ -14217,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');
@@ -14256,6 +14256,9 @@
             } else {
               onOpenAutoFocus(e);
             }
+          },
+          onPointerDownOutside: function (e) {
+            return onPointerDownOutside === null || onPointerDownOutside === void 0 ? void 0 : onPointerDownOutside(e);
           }
         }, {
           children: jsxRuntime.jsxs(Box, __assign({
@@ -18280,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,
@@ -18290,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
@@ -18387,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"
                         }, {
@@ -19215,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
@@ -30777,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.10",
+  "version": "1.54.12",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",