@majoo-ui/react 1.55.22 → 1.55.24

package/components/pageDialog/PageDialog.d.ts

@@ -388,7 +388,7 @@ export declare const PageDialogTrigger: import("@stitches/react/types/styled-com
     };
 }>>;
 declare type IDialog = React.ComponentProps<typeof Dialog>;
-interface PageDialogProps extends Omit<IDialog, "children">, DialogContentProps {
+interface PageDialogProps extends Omit<IDialog, 'children'>, DialogContentProps {
     /** set PageDialog zIndex, default is set to 1400 */
     layer?: number | string;
     /** Force to mobile view or desktop view, if undefined PageDialog will be responsive according to current screen size */

package/components/skeleton/Skeleton.d.ts

@@ -6,6 +6,7 @@ interface SkeletonProps {
     variant?: 'group' | 'single';
     color?: 'primary' | 'secondary';
     width?: string | number;
+    patternCount?: number;
 }
 declare function Skeleton(props: SkeletonProps): JSX.Element;
 declare namespace Skeleton {

package/index.esm.js

@@ -14473,7 +14473,7 @@ function Drawer(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 42,
+      lineNumber: 43,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Context$1.Provider, {
@@ -14481,7 +14481,7 @@ function Drawer(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 43,
+      lineNumber: 44,
       columnNumber: 7
     }
   }, children));
@@ -14647,28 +14647,37 @@ const DrawerContent = _ref2 => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 206,
+      lineNumber: 207,
       columnNumber: 5
     }
-  }, value => /*#__PURE__*/React__default.createElement(DialogPortal, {
+  }, value => /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
+    condition: value.portalled,
+    wrapper: child => /*#__PURE__*/React__default.createElement(DialogPortal, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$n,
+        lineNumber: 209,
+        columnNumber: 75
+      }
+    }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 208,
+      lineNumber: 209,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 209,
+      lineNumber: 210,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$2, _extends({}, value, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 210,
+      lineNumber: 211,
       columnNumber: 11
     }
   }), children)));
@@ -14678,14 +14687,14 @@ const DrawerHeader = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 220,
+      lineNumber: 221,
       columnNumber: 10
     }
   }, value => /*#__PURE__*/React__default.createElement(Header, _extends({}, value, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 220,
+      lineNumber: 221,
       columnNumber: 38
     }
   }), props.children));
@@ -14695,14 +14704,14 @@ const DrawerFooter = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 224,
+      lineNumber: 225,
       columnNumber: 10
     }
   }, value => /*#__PURE__*/React__default.createElement(Footer, _extends({}, value, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 224,
+      lineNumber: 225,
       columnNumber: 38
     }
   }), props.children));
@@ -14717,25 +14726,29 @@ const DrawerCloseButton = () => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 234,
+      lineNumber: 235,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 235,
+      lineNumber: 236,
       columnNumber: 7
     }
   }));
 };
+Drawer.defaultProps = {
+  portalled: true
+};
 Drawer.propTypes = {
   defaultOpen: PropTypes.bool,
   open: PropTypes.bool,
   onOpenChange: PropTypes.func,
   modal: PropTypes.bool,
   allowPinchZoom: PropTypes.bool,
-  id: PropTypes.string
+  id: PropTypes.string,
+  portalled: PropTypes.bool
 };
 DrawerContent.propTypes = {
   side: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
@@ -17529,7 +17542,8 @@ function InputDatePicker({
     }), void 0), jsx(Drawer, Object.assign({
       open: openPicker,
       onOpenChange: handleChange,
-      side: "bottom"
+      side: "bottom",
+      portalled: false
     }, {
       children: jsx(DrawerContent, Object.assign({
         size: "full"
@@ -18502,7 +18516,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                       gap: 5,
                       css: {
                         backgroundColor: colors$4.bgGray,
-                        padding: `$spacing-03 $spacing-05 ${'selection' in row.values ? '$spacing-03 $spacing-07' : ''}`,
+                        padding: `$spacing-04 $spacing-05 ${'selection' in row.values ? '$spacing-04 $spacing-07' : ''}`,
                         borderBottom: '1pt solid $bgBorder',
                         alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
                       }
@@ -18523,7 +18537,9 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                   justify: "end",
                   gap: 3,
                   css: {
-                    height: '40px'
+                    height: '40px',
+                    backgroundColor: colors$4.bgGray,
+                    paddingRight: '$spacing-04'
                   }
                 }, {
                   children: actionCells.map(cell => cell.render('Cell'))
@@ -20139,7 +20155,7 @@ const findNodeChild = (array, displayName) => {
 };
 const FOOTER_HEIGHT = 64;
 const HEADER_HEIGHT = 56;
-const HEADER_HEIGHT_MOBILE = 76;
+const HEADER_HEIGHT_MOBILE = 60;
 const PageDialog = props => {
   var _a, _b;
   const {
@@ -20169,6 +20185,20 @@ const PageDialog = props => {
       document.body.style.overflow = 'auto';
     }
   }, []);
+  const ClossedIcon = () => jsx("svg", Object.assign({
+    width: "10",
+    height: "10",
+    viewBox: "0 0 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, {
+    children: jsx("path", {
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd",
+      d: "M0.292894 1.70711C-0.0976312 1.31658 -0.0976312 0.683417 0.292894 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L6.41421 5L9.70711 8.29289C10.0976 8.68342 10.0976 9.31658 9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L5 6.41421L1.70711 9.70711C1.31658 10.0976 0.683418 10.0976 0.292894 9.70711C-0.0976306 9.31658 -0.0976306 8.68342 0.292894 8.29289L3.58579 5L0.292894 1.70711Z",
+      fill: "#404545"
+    }, void 0)
+  }), void 0);
   return jsxs(Dialog, Object.assign({}, rest, {
     children: [pageDialogTrigger && jsx(DialogTrigger, Object.assign({}, pageDialogTrigger.props), void 0), jsx(DialogPortal, {
       children: jsx(DialogContent, Object.assign({
@@ -20235,7 +20265,7 @@ const PageDialog = props => {
                 width: '100%',
                 display: 'flex',
                 alignItems: 'center',
-                gap: '$cozy'
+                gap: isMobile ? '$spacing-04' : '$cozy'
               }
             }, {
               children: [!isMobile && jsx(ConditionalWrapper, Object.assign({
@@ -20285,12 +20315,13 @@ const PageDialog = props => {
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                    cursor: disabledCloseButton ? 'not-allowed' : 'pointer'
+                    cursor: disabledCloseButton ? 'not-allowed' : 'pointer',
+                    padding: '$spacing-02',
+                    backgroundColor: '$gray50',
+                    borderRadius: 50
                   }
                 }, {
-                  children: jsx(CloseOutline, {
-                    size: "20"
-                  }, void 0)
+                  children: jsx(ClossedIcon, {}, void 0)
                 }), void 0)
               }), void 0)]
             }), void 0), !isMobile && jsx(Box, Object.assign({
@@ -32283,17 +32314,13 @@ function Skeleton(props) {
     css,
     variant,
     width,
-    color
+    color,
+    patternCount = 2
   } = props;
-  const isDesktop = useMediaQuery('(min-width: 767px)');
-  const renderGroup = () => jsxs(Container, Object.assign({
+  const renderGroup = count => jsx(Container, Object.assign({
     css: css
   }, {
-    children: [jsx(StyledSkeleton, {
-      size: "md",
-      color: "primary",
-      width: isDesktop ? '20%' : '30%'
-    }, void 0), jsx(Card, Object.assign({
+    children: jsx(Card, Object.assign({
       showBottomLine: false,
       css: {
         flex: 1,
@@ -32302,11 +32329,11 @@ function Skeleton(props) {
         boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)'
       }
     }, {
-      children: jsxs(Grid, Object.assign({
+      children: jsx(Grid, Object.assign({
         columns: 6,
         gapY: 5
       }, {
-        children: [jsxs(GridItem, Object.assign({
+        children: new Array(count).fill('').map((_, index) => jsxs(GridItem, Object.assign({
           colSpan: 6
         }, {
           children: [jsx(StyledSkeleton, {
@@ -32321,29 +32348,14 @@ function Skeleton(props) {
               width: "30%"
             }, void 0)]
           }, void 0)]
-        }), void 0), jsxs(GridItem, Object.assign({
-          colSpan: 6
-        }, {
-          children: [jsx(StyledSkeleton, {
-            size: "md",
-            color: "primary"
-          }, void 0), jsx(Space, {
-            size: "md"
-          }, void 0), jsxs(Box, {
-            children: [jsx(StyledSkeleton, {
-              width: "70%"
-            }, void 0), jsx(Space, {}, void 0), jsx(StyledSkeleton, {
-              width: "30%"
-            }, void 0)]
-          }, void 0)]
-        }), void 0)]
+        }), index))
       }), void 0)
-    }), void 0)]
+    }), void 0)
   }), void 0);
   return variant === 'single' ? jsx(StyledSkeleton, {
     width: width,
     color: color
-  }, void 0) : renderGroup();
+  }, void 0) : renderGroup(patternCount);
 }
 Skeleton.defaultProps = {
   variant: 'group',

package/index.umd.js

@@ -14622,7 +14622,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 42,
+        lineNumber: 43,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Context$1.Provider, {
@@ -14630,7 +14630,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 43,
+        lineNumber: 44,
         columnNumber: 7
       }
     }, children));
@@ -14796,28 +14796,37 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 206,
+        lineNumber: 207,
         columnNumber: 5
       }
-    }, value => /*#__PURE__*/React__default["default"].createElement(DialogPortal, {
+    }, value => /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
+      condition: value.portalled,
+      wrapper: child => /*#__PURE__*/React__default["default"].createElement(DialogPortal, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$n,
+          lineNumber: 209,
+          columnNumber: 75
+        }
+      }, child),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 208,
+        lineNumber: 209,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 209,
+        lineNumber: 210,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledContent$2, _extends({}, value, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 210,
+        lineNumber: 211,
         columnNumber: 11
       }
     }), children)));
@@ -14827,14 +14836,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 220,
+        lineNumber: 221,
         columnNumber: 10
       }
     }, value => /*#__PURE__*/React__default["default"].createElement(Header, _extends({}, value, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 220,
+        lineNumber: 221,
         columnNumber: 38
       }
     }), props.children));
@@ -14844,14 +14853,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 224,
+        lineNumber: 225,
         columnNumber: 10
       }
     }, value => /*#__PURE__*/React__default["default"].createElement(Footer, _extends({}, value, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 224,
+        lineNumber: 225,
         columnNumber: 38
       }
     }), props.children));
@@ -14866,25 +14875,29 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 234,
+        lineNumber: 235,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 235,
+        lineNumber: 236,
         columnNumber: 7
       }
     }));
   };
+  Drawer.defaultProps = {
+    portalled: true
+  };
   Drawer.propTypes = {
     defaultOpen: PropTypes__default["default"].bool,
     open: PropTypes__default["default"].bool,
     onOpenChange: PropTypes__default["default"].func,
     modal: PropTypes__default["default"].bool,
     allowPinchZoom: PropTypes__default["default"].bool,
-    id: PropTypes__default["default"].string
+    id: PropTypes__default["default"].string,
+    portalled: PropTypes__default["default"].bool
   };
   DrawerContent.propTypes = {
     side: PropTypes__default["default"].oneOf(['top', 'left', 'bottom', 'right']),
@@ -17772,7 +17785,8 @@
       }), void 0), jsxRuntime.jsx(Drawer, __assign({
         open: openPicker,
         onOpenChange: handleChange,
-        side: "bottom"
+        side: "bottom",
+        portalled: false
       }, {
         children: jsxRuntime.jsx(DrawerContent, __assign({
           size: "full"
@@ -18764,7 +18778,7 @@
                         gap: 5,
                         css: {
                           backgroundColor: colors$4.bgGray,
-                          padding: "$spacing-03 $spacing-05 ".concat('selection' in row.values ? '$spacing-03 $spacing-07' : ''),
+                          padding: "$spacing-04 $spacing-05 ".concat('selection' in row.values ? '$spacing-04 $spacing-07' : ''),
                           borderBottom: '1pt solid $bgBorder',
                           alignItems: cell.column.accessor ? getAlign(cellAlign) : 'center'
                         }
@@ -18785,7 +18799,9 @@
                     justify: "end",
                     gap: 3,
                     css: {
-                      height: '40px'
+                      height: '40px',
+                      backgroundColor: colors$4.bgGray,
+                      paddingRight: '$spacing-04'
                     }
                   }, {
                     children: actionCells.map(function (cell) {
@@ -20465,7 +20481,7 @@
   };
   var FOOTER_HEIGHT = 64;
   var HEADER_HEIGHT = 56;
-  var HEADER_HEIGHT_MOBILE = 76;
+  var HEADER_HEIGHT_MOBILE = 60;
   var PageDialog = function PageDialog(props) {
     var _a, _b;
     var children = props.children,
@@ -20493,6 +20509,22 @@
         document.body.style.overflow = 'auto';
       }
     }, []);
+    var ClossedIcon = function ClossedIcon() {
+      return jsxRuntime.jsx("svg", __assign({
+        width: "10",
+        height: "10",
+        viewBox: "0 0 10 10",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      }, {
+        children: jsxRuntime.jsx("path", {
+          "fill-rule": "evenodd",
+          "clip-rule": "evenodd",
+          d: "M0.292894 1.70711C-0.0976312 1.31658 -0.0976312 0.683417 0.292894 0.292893C0.683418 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L6.41421 5L9.70711 8.29289C10.0976 8.68342 10.0976 9.31658 9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L5 6.41421L1.70711 9.70711C1.31658 10.0976 0.683418 10.0976 0.292894 9.70711C-0.0976306 9.31658 -0.0976306 8.68342 0.292894 8.29289L3.58579 5L0.292894 1.70711Z",
+          fill: "#404545"
+        }, void 0)
+      }), void 0);
+    };
     return jsxRuntime.jsxs(Dialog, __assign({}, rest, {
       children: [pageDialogTrigger && jsxRuntime.jsx(DialogTrigger, __assign({}, pageDialogTrigger.props), void 0), jsxRuntime.jsx(DialogPortal, {
         children: jsxRuntime.jsx(DialogContent, __assign({
@@ -20559,7 +20591,7 @@
                   width: '100%',
                   display: 'flex',
                   alignItems: 'center',
-                  gap: '$cozy'
+                  gap: isMobile ? '$spacing-04' : '$cozy'
                 }
               }, {
                 children: [!isMobile && jsxRuntime.jsx(ConditionalWrapper, __assign({
@@ -20613,12 +20645,13 @@
                       display: 'flex',
                       justifyContent: 'center',
                       alignItems: 'center',
-                      cursor: disabledCloseButton ? 'not-allowed' : 'pointer'
+                      cursor: disabledCloseButton ? 'not-allowed' : 'pointer',
+                      padding: '$spacing-02',
+                      backgroundColor: '$gray50',
+                      borderRadius: 50
                     }
                   }, {
-                    children: jsxRuntime.jsx(icons.CloseOutline, {
-                      size: "20"
-                    }, void 0)
+                    children: jsxRuntime.jsx(ClossedIcon, {}, void 0)
                   }), void 0)
                 }), void 0)]
               }), void 0), !isMobile && jsxRuntime.jsx(Box, __assign({
@@ -32738,17 +32771,14 @@
     var css = props.css,
       variant = props.variant,
       width = props.width,
-      color = props.color;
-    var isDesktop = useMediaQuery('(min-width: 767px)');
-    var renderGroup = function renderGroup() {
-      return jsxRuntime.jsxs(Container, __assign({
+      color = props.color,
+      _a = props.patternCount,
+      patternCount = _a === void 0 ? 2 : _a;
+    var renderGroup = function renderGroup(count) {
+      return jsxRuntime.jsx(Container, __assign({
         css: css
       }, {
-        children: [jsxRuntime.jsx(StyledSkeleton, {
-          size: "md",
-          color: "primary",
-          width: isDesktop ? '20%' : '30%'
-        }, void 0), jsxRuntime.jsx(Card, __assign({
+        children: jsxRuntime.jsx(Card, __assign({
           showBottomLine: false,
           css: {
             flex: 1,
@@ -32757,49 +32787,36 @@
             boxShadow: '0px 7px 15px rgba(0, 0, 0, 0.07)'
           }
         }, {
-          children: jsxRuntime.jsxs(Grid, __assign({
+          children: jsxRuntime.jsx(Grid, __assign({
             columns: 6,
             gapY: 5
           }, {
-            children: [jsxRuntime.jsxs(GridItem, __assign({
-              colSpan: 6
-            }, {
-              children: [jsxRuntime.jsx(StyledSkeleton, {
-                size: "md",
-                color: "primary"
-              }, void 0), jsxRuntime.jsx(Space, {
-                size: "md"
-              }, void 0), jsxRuntime.jsxs(Box, {
-                children: [jsxRuntime.jsx(StyledSkeleton, {
-                  width: "70%"
-                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                  width: "30%"
-                }, void 0)]
-              }, void 0)]
-            }), void 0), jsxRuntime.jsxs(GridItem, __assign({
-              colSpan: 6
-            }, {
-              children: [jsxRuntime.jsx(StyledSkeleton, {
-                size: "md",
-                color: "primary"
-              }, void 0), jsxRuntime.jsx(Space, {
-                size: "md"
-              }, void 0), jsxRuntime.jsxs(Box, {
+            children: new Array(count).fill('').map(function (_, index) {
+              return jsxRuntime.jsxs(GridItem, __assign({
+                colSpan: 6
+              }, {
                 children: [jsxRuntime.jsx(StyledSkeleton, {
-                  width: "70%"
-                }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
-                  width: "30%"
+                  size: "md",
+                  color: "primary"
+                }, void 0), jsxRuntime.jsx(Space, {
+                  size: "md"
+                }, void 0), jsxRuntime.jsxs(Box, {
+                  children: [jsxRuntime.jsx(StyledSkeleton, {
+                    width: "70%"
+                  }, void 0), jsxRuntime.jsx(Space, {}, void 0), jsxRuntime.jsx(StyledSkeleton, {
+                    width: "30%"
+                  }, void 0)]
                 }, void 0)]
-              }, void 0)]
-            }), void 0)]
+              }), index);
+            })
           }), void 0)
-        }), void 0)]
+        }), void 0)
       }), void 0);
     };
     return variant === 'single' ? jsxRuntime.jsx(StyledSkeleton, {
       width: width,
       color: color
-    }, void 0) : renderGroup();
+    }, void 0) : renderGroup(patternCount);
   }
   Skeleton.defaultProps = {
     variant: 'group',

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.55.22",
+  "version": "1.55.24",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",
-    "@majoo-ui/icons": "^1.38.4",
+    "@majoo-ui/icons": "^1.38.10",
     "@stitches/react": "^1.2.8",
     "@radix-ui/react-alert-dialog": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.0",
@@ -34,6 +34,7 @@
     "react-number-format": "^4.9.3",
     "lodash.debounce": "^4.0.8",
     "@floating-ui/react": "^0.19.2",
+    "@floating-ui/react-dom": "^1.3.0",
     "react-color": "^2.19.3",
     "react-infinite-scroller": "^1.2.6",
     "react-ui-scrollspy": "^2.1.0",