@majoo-ui/react 1.52.2 → 1.52.3

package/components/pageDialog/PageDialog.d.ts

@@ -398,6 +398,10 @@ interface PageDialogProps extends IDialog, DialogContentProps {
     onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
     onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
     onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;
+    /**
+     * If true, the close button is disabled
+     */
+    disabledCloseButton?: boolean;
 }
 /**
  * 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/components/table/Table.d.ts

@@ -1201,8 +1201,12 @@ export interface TableProps {
      * Additional style to customize one of the rows based on the specified condition
      */
     customRowsStyle?: (e: any) => CustomRowsStyle[];
+    /**
+     * Override isMobile condition
+     */
+    isMobileLayout?: boolean;
 }
-export declare function Table({ columns, data, keyId, pageIndex: controlledPageIndex, totalData, fetchData, hideDataInfo, rowsPerPageOptions, emptyDataMessage, isLoading, css, headerCss, onSelectedChange, isInfiniteScroll, hasMoreItems, rowLimit, cellAlign, selectedIds, rowGroup, hiddenColumns, columnOrder, customRowsStyle, }: TableProps): JSX.Element;
+export declare function Table({ columns, data, keyId, pageIndex: controlledPageIndex, totalData, fetchData, hideDataInfo, rowsPerPageOptions, emptyDataMessage, isLoading, css, headerCss, onSelectedChange, isInfiniteScroll, hasMoreItems, rowLimit, cellAlign, selectedIds, rowGroup, hiddenColumns, columnOrder, customRowsStyle, isMobileLayout }: TableProps): JSX.Element;
 export interface TableColumnProps {
     /**
      * Required if accessor is a function<br/>

package/index.esm.css

@@ -566,7 +566,6 @@
   display: flex;
   flex-direction: column;
   width: 235px;
-  height: 205px;
   border: 1px solid #f1f1f1;
   padding: 15px;
   border-radius: 2px;

package/index.esm.js

@@ -17196,7 +17196,8 @@ function Table({
   rowGroup,
   hiddenColumns,
   columnOrder,
-  customRowsStyle
+  customRowsStyle,
+  isMobileLayout
 }) {
   const [limit, setLimit] = useState(rowLimit);
 
@@ -17264,7 +17265,7 @@ function Table({
   };
 
   const scrollerRef = useRef(null);
-  const isMobile = useMediaQuery('(max-width: 1024px)');
+  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
 
   const renderFooter = () => jsx(Pagination, {
     limit: pageSize,
@@ -17528,13 +17529,14 @@ const TableColumn = _a => {
 var _jsxFileName$f = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\DateColumn.js";
 
 const DateColumn = ({
-  value
+  value,
+  customFormat
 }) => {
   let dateTime = '-';
-  const formatter = 'DD MMMM YYYY';
+  const format = customFormat || 'DD MMMM YYYY';
 
   if (value && moment(value, 'YYYYMMDDHHmmss').isValid()) {
-    dateTime = moment(value, 'YYYYMMDDHHmmss').locale('id').format(formatter);
+    dateTime = moment(value, 'YYYYMMDDHHmmss').locale('id').format(format);
   }
 
   return /*#__PURE__*/React__default.createElement("div", {
@@ -18605,9 +18607,10 @@ const PageDialog = props => {
     onOpenAutoFocus,
     onCloseAutoFocus,
     onPointerDownOutside,
-    onInteractOutside
+    onInteractOutside,
+    disabledCloseButton
   } = props,
-        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "onOpenAutoFocus", "onCloseAutoFocus", "onPointerDownOutside", "onInteractOutside"]);
+        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "onOpenAutoFocus", "onCloseAutoFocus", "onPointerDownOutside", "onInteractOutside", "disabledCloseButton"]);
 
   const childArray = React__default.Children.toArray(children);
   const footerChildren = findNodeChild(childArray, 'PageDialogFooter');
@@ -18692,8 +18695,13 @@ const PageDialog = props => {
                 gap: '$cozy'
               }
             }, {
-              children: [!isMobile && jsx(DialogClose, Object.assign({
-                asChild: true
+              children: [!isMobile && jsx(ConditionalWrapper, Object.assign({
+                condition: !disabledCloseButton,
+                wrapper: children => jsx(DialogClose, Object.assign({
+                  asChild: true
+                }, {
+                  children: children
+                }), void 0)
               }, {
                 children: jsx(Box, Object.assign({
                   css: {
@@ -18704,7 +18712,7 @@ const PageDialog = props => {
                     alignItems: 'center',
                     backgroundColor: '$gray150',
                     borderRadius: '$lg',
-                    cursor: 'pointer'
+                    cursor: disabledCloseButton ? 'not-allowed' : 'pointer'
                   }
                 }, {
                   children: jsx(CloseOutline, {
@@ -18721,15 +18729,20 @@ const PageDialog = props => {
                   as: "p",
                   heading: "pageTitle"
                 }, headerTitle.props), void 0)
-              }), void 0), isMobile && jsx(DialogClose, Object.assign({
-                asChild: true
+              }), void 0), isMobile && jsx(ConditionalWrapper, Object.assign({
+                condition: !disabledCloseButton,
+                wrapper: children => jsx(DialogClose, Object.assign({
+                  asChild: true
+                }, {
+                  children: children
+                }), void 0)
               }, {
                 children: jsx(Box, Object.assign({
                   css: {
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
-                    cursor: 'pointer'
+                    cursor: disabledCloseButton ? 'not-allowed' : 'pointer'
                   }
                 }, {
                   children: jsx(CloseOutline, {
@@ -22950,7 +22963,7 @@ const Device = props => {
               border: 'none',
               width: '100%',
               height: '100%',
-              overflowY: 'auto',
+              overflow: 'hidden',
               zIndex: 1
             }
           }, {
@@ -23021,7 +23034,7 @@ const Device = props => {
               border: 'none',
               width: '100%',
               height: '100%',
-              overflowY: 'auto',
+              overflow: 'hidden',
               zIndex: 1
             }
           }, {
@@ -23076,7 +23089,7 @@ const Device = props => {
               border: 'none',
               width: '100%',
               height: '100%',
-              overflowY: 'auto',
+              overflow: 'hidden',
               zIndex: 1
             }
           }, {
@@ -23186,7 +23199,7 @@ const Device = props => {
               border: 'none',
               width: '100%',
               height: '100%',
-              overflowY: 'auto',
+              overflow: 'hidden',
               zIndex: 1,
               position: 'relative'
             }
@@ -23300,7 +23313,7 @@ const Device = props => {
         style: {
           width: props.size ? props.size : undefined,
           position: 'relative',
-          zIndex: 2
+          zIndex: withComponent ? 1 : 2
         },
         src: properties.typeDevice,
         alt: "device-preview"
@@ -23330,7 +23343,7 @@ const Device = props => {
                 width: '100%',
                 height: '100%',
                 overflowY: 'auto',
-                zIndex: 1
+                zIndex: 3
               }
             }, {
               children: props.children
@@ -27213,19 +27226,26 @@ function EditableTableMobile(props) {
   }, {
     children: jsxs(TableContent$2, Object.assign({}, getTableProps(), {
       children: [jsx(TableHead$2, {
-        children: headerGroups.map((headerGroup, index) => /*#__PURE__*/createElement$2(TableHeadRow$2, Object.assign({}, headerGroup.getHeaderGroupProps(), {
-          key: index
-        }), headerGroup.headers.map((column, index) => (column === null || column === void 0 ? void 0 : column.isMobileHeader) && /*#__PURE__*/createElement$2(TableHeadCell$2, Object.assign({}, column.getHeaderProps({
-          style: {
-            minWidth: column.minWidth,
-            width: column.width,
-            maxWidth: column.maxWidth
-          }
-        }), {
-          key: index
-        }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required$2, {
-          children: "*"
-        }, void 0) : ''))))
+        children: headerGroups.map((headerGroup, index) => {
+          const visibleHeaders = headerGroup.headers.filter(column => {
+            var _a;
+
+            return typeof (column === null || column === void 0 ? void 0 : column.hidden) === 'boolean' ? !(column === null || column === void 0 ? void 0 : column.hidden) : !((_a = column === null || column === void 0 ? void 0 : column.hidden) === null || _a === void 0 ? void 0 : _a.call(column, column));
+          });
+          return /*#__PURE__*/createElement$2(TableHeadRow$2, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+            key: index
+          }), visibleHeaders.map((column, index) => (column === null || column === void 0 ? void 0 : column.isMobileHeader) && /*#__PURE__*/createElement$2(TableHeadCell$2, Object.assign({}, column.getHeaderProps({
+            style: {
+              minWidth: column.minWidth,
+              width: column.width,
+              maxWidth: column.maxWidth
+            }
+          }), {
+            key: index
+          }), column.render('Header'), (column === null || column === void 0 ? void 0 : column.isRequired) ? jsx(Required$2, {
+            children: "*"
+          }, void 0) : '')));
+        })
       }, void 0), jsx(TableBody$2, Object.assign({}, getTableBodyProps(), {
         children: rows.map((row, index) => {
           prepareRow(row);
@@ -27280,7 +27300,11 @@ function EditableTableMobile(props) {
                     borderTop: '1pt solid $bgBorder'
                   }
                 }, {
-                  children: row.cells.map((cell, index) => {
+                  children: row.cells.filter(cell => {
+                    var _a, _b, _c, _d;
+
+                    return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
+                  }).map((cell, index) => {
                     var _a, _b;
 
                     const headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
@@ -27672,7 +27696,11 @@ function EditableTable(props) {
     children: jsxs(TableContent$1, Object.assign({}, getTableProps(), {
       children: [jsx(TableHead$1, {
         children: headerGroups.map(headerGroup => {
-          const visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
+          const visibleHeaders = headerGroup.headers.filter(column => {
+            var _a;
+
+            return !(column === null || column === void 0 ? void 0 : column.isSubRow) && (typeof (column === null || column === void 0 ? void 0 : column.hidden) === 'boolean' ? !(column === null || column === void 0 ? void 0 : column.hidden) : !((_a = column === null || column === void 0 ? void 0 : column.hidden) === null || _a === void 0 ? void 0 : _a.call(column, column)));
+          });
           return jsx(TableHeadRow$1, Object.assign({}, headerGroup.getHeaderGroupProps(), {
             children: visibleHeaders.map(column => !(column === null || column === void 0 ? void 0 : column.isMobileOnly) && jsxs(TableHeadCell$1, Object.assign({}, column.getHeaderProps({
               style: {
@@ -27717,7 +27745,11 @@ function EditableTable(props) {
             }, void 0) : jsx(TableRow$1, Object.assign({
               css: customStyle
             }, row.getRowProps(), {
-              children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
+              children: row.cells.filter(cell => {
+                var _a, _b, _c, _d, _e;
+
+                return !((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isSubRow) && (typeof ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) === 'boolean' ? !((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) : !((_e = (_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.hidden) === null || _e === void 0 ? void 0 : _e.call(_d, cell)));
+              }).map(cell => {
                 var _a;
 
                 return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsx(TableCell$1, Object.assign({}, cell.getCellProps({
@@ -30092,7 +30124,13 @@ function ContentEditor(props) {
       options: ['Inter', 'Roboto', 'Poppins', 'Tinos', 'Montserrat']
     },
     image: {
-      uploadCallback: uploadCallback
+      uploadCallback: uploadCallback,
+      previewImage: true,
+      alt: {
+        present: true,
+        mandatory: false
+      },
+      inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg'
     }
   };
   return jsxs(Container, Object.assign({

package/index.umd.css

@@ -566,7 +566,6 @@
   display: flex;
   flex-direction: column;
   width: 235px;
-  height: 205px;
   border: 1px solid #f1f1f1;
   padding: 15px;
   border-radius: 2px;

package/index.umd.js

@@ -17495,7 +17495,8 @@
         rowGroup = _a.rowGroup,
         hiddenColumns = _a.hiddenColumns,
         columnOrder = _a.columnOrder,
-        customRowsStyle = _a.customRowsStyle;
+        customRowsStyle = _a.customRowsStyle,
+        isMobileLayout = _a.isMobileLayout;
 
     var _o = React.useState(rowLimit),
         limit = _o[0],
@@ -17572,7 +17573,7 @@
     };
 
     var scrollerRef = React.useRef(null);
-    var isMobile = useMediaQuery('(max-width: 1024px)');
+    var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
 
     var renderFooter = function renderFooter() {
       return jsxRuntime.jsx(Pagination, {
@@ -17865,13 +17866,14 @@
   var _jsxFileName$f = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\DateColumn.js";
 
   const DateColumn = ({
-    value
+    value,
+    customFormat
   }) => {
     let dateTime = '-';
-    const formatter = 'DD MMMM YYYY';
+    const format = customFormat || 'DD MMMM YYYY';
 
     if (value && moment__default["default"](value, 'YYYYMMDDHHmmss').isValid()) {
-      dateTime = moment__default["default"](value, 'YYYYMMDDHHmmss').locale('id').format(formatter);
+      dateTime = moment__default["default"](value, 'YYYYMMDDHHmmss').locale('id').format(format);
     }
 
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -18942,7 +18944,8 @@
         onCloseAutoFocus = props.onCloseAutoFocus,
         onPointerDownOutside = props.onPointerDownOutside,
         onInteractOutside = props.onInteractOutside,
-        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "onOpenAutoFocus", "onCloseAutoFocus", "onPointerDownOutside", "onInteractOutside"]);
+        disabledCloseButton = props.disabledCloseButton,
+        rest = __rest(props, ["children", "size", "css", "layer", "isMobile", "onOpenAutoFocus", "onCloseAutoFocus", "onPointerDownOutside", "onInteractOutside", "disabledCloseButton"]);
 
     var childArray = React__default["default"].Children.toArray(children);
     var footerChildren = findNodeChild(childArray, 'PageDialogFooter');
@@ -19027,8 +19030,15 @@
                   gap: '$cozy'
                 }
               }, {
-                children: [!isMobile && jsxRuntime.jsx(DialogClose, __assign({
-                  asChild: true
+                children: [!isMobile && jsxRuntime.jsx(ConditionalWrapper, __assign({
+                  condition: !disabledCloseButton,
+                  wrapper: function (children) {
+                    return jsxRuntime.jsx(DialogClose, __assign({
+                      asChild: true
+                    }, {
+                      children: children
+                    }), void 0);
+                  }
                 }, {
                   children: jsxRuntime.jsx(Box, __assign({
                     css: {
@@ -19039,7 +19049,7 @@
                       alignItems: 'center',
                       backgroundColor: '$gray150',
                       borderRadius: '$lg',
-                      cursor: 'pointer'
+                      cursor: disabledCloseButton ? 'not-allowed' : 'pointer'
                     }
                   }, {
                     children: jsxRuntime.jsx(icons.CloseOutline, {
@@ -19056,15 +19066,22 @@
                     as: "p",
                     heading: "pageTitle"
                   }, headerTitle.props), void 0)
-                }), void 0), isMobile && jsxRuntime.jsx(DialogClose, __assign({
-                  asChild: true
+                }), void 0), isMobile && jsxRuntime.jsx(ConditionalWrapper, __assign({
+                  condition: !disabledCloseButton,
+                  wrapper: function (children) {
+                    return jsxRuntime.jsx(DialogClose, __assign({
+                      asChild: true
+                    }, {
+                      children: children
+                    }), void 0);
+                  }
                 }, {
                   children: jsxRuntime.jsx(Box, __assign({
                     css: {
                       display: 'flex',
                       justifyContent: 'center',
                       alignItems: 'center',
-                      cursor: 'pointer'
+                      cursor: disabledCloseButton ? 'not-allowed' : 'pointer'
                     }
                   }, {
                     children: jsxRuntime.jsx(icons.CloseOutline, {
@@ -23332,7 +23349,7 @@
                 border: 'none',
                 width: '100%',
                 height: '100%',
-                overflowY: 'auto',
+                overflow: 'hidden',
                 zIndex: 1
               }
             }, {
@@ -23403,7 +23420,7 @@
                 border: 'none',
                 width: '100%',
                 height: '100%',
-                overflowY: 'auto',
+                overflow: 'hidden',
                 zIndex: 1
               }
             }, {
@@ -23458,7 +23475,7 @@
                 border: 'none',
                 width: '100%',
                 height: '100%',
-                overflowY: 'auto',
+                overflow: 'hidden',
                 zIndex: 1
               }
             }, {
@@ -23568,7 +23585,7 @@
                 border: 'none',
                 width: '100%',
                 height: '100%',
-                overflowY: 'auto',
+                overflow: 'hidden',
                 zIndex: 1,
                 position: 'relative'
               }
@@ -23682,7 +23699,7 @@
           style: {
             width: props.size ? props.size : undefined,
             position: 'relative',
-            zIndex: 2
+            zIndex: withComponent ? 1 : 2
           },
           src: properties.typeDevice,
           alt: "device-preview"
@@ -23712,7 +23729,7 @@
                   width: '100%',
                   height: '100%',
                   overflowY: 'auto',
-                  zIndex: 1
+                  zIndex: 3
                 }
               }, {
                 children: props.children
@@ -27592,9 +27609,14 @@
       children: jsxRuntime.jsxs(TableContent$2, __assign({}, getTableProps(), {
         children: [jsxRuntime.jsx(TableHead$2, {
           children: headerGroups.map(function (headerGroup, index) {
+            var visibleHeaders = headerGroup.headers.filter(function (column) {
+              var _a;
+
+              return typeof (column === null || column === void 0 ? void 0 : column.hidden) === 'boolean' ? !(column === null || column === void 0 ? void 0 : column.hidden) : !((_a = column === null || column === void 0 ? void 0 : column.hidden) === null || _a === void 0 ? void 0 : _a.call(column, column));
+            });
             return /*#__PURE__*/React.createElement(TableHeadRow$2, __assign({}, headerGroup.getHeaderGroupProps(), {
               key: index
-            }), headerGroup.headers.map(function (column, index) {
+            }), visibleHeaders.map(function (column, index) {
               return (column === null || column === void 0 ? void 0 : column.isMobileHeader) && /*#__PURE__*/React.createElement(TableHeadCell$2, __assign({}, column.getHeaderProps({
                 style: {
                   minWidth: column.minWidth,
@@ -27662,7 +27684,11 @@
                       borderTop: '1pt solid $bgBorder'
                     }
                   }, {
-                    children: row.cells.map(function (cell, index) {
+                    children: row.cells.filter(function (cell) {
+                      var _a, _b, _c, _d;
+
+                      return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
+                    }).map(function (cell, index) {
                       var _a, _b;
 
                       var headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
@@ -28053,7 +28079,9 @@
         children: [jsxRuntime.jsx(TableHead$1, {
           children: headerGroups.map(function (headerGroup) {
             var visibleHeaders = headerGroup.headers.filter(function (column) {
-              return !column.isSubRow;
+              var _a;
+
+              return !(column === null || column === void 0 ? void 0 : column.isSubRow) && (typeof (column === null || column === void 0 ? void 0 : column.hidden) === 'boolean' ? !(column === null || column === void 0 ? void 0 : column.hidden) : !((_a = column === null || column === void 0 ? void 0 : column.hidden) === null || _a === void 0 ? void 0 : _a.call(column, column)));
             });
             return jsxRuntime.jsx(TableHeadRow$1, __assign({}, headerGroup.getHeaderGroupProps(), {
               children: visibleHeaders.map(function (column) {
@@ -28110,7 +28138,9 @@
                 css: customStyle
               }, row.getRowProps(), {
                 children: row.cells.filter(function (cell) {
-                  return !cell.column.isSubRow;
+                  var _a, _b, _c, _d, _e;
+
+                  return !((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isSubRow) && (typeof ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) === 'boolean' ? !((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) : !((_e = (_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.hidden) === null || _e === void 0 ? void 0 : _e.call(_d, cell)));
                 }).map(function (cell) {
                   var _a;
 
@@ -30609,7 +30639,13 @@
         options: ['Inter', 'Roboto', 'Poppins', 'Tinos', 'Montserrat']
       },
       image: {
-        uploadCallback: uploadCallback
+        uploadCallback: uploadCallback,
+        previewImage: true,
+        alt: {
+          present: true,
+          mandatory: false
+        },
+        inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg'
       }
     };
     return jsxRuntime.jsxs(Container, __assign({

package/package.json

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