@majoo-ui/react 1.52.2 → 1.52.4

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;
@@ -1203,7 +1202,7 @@
 }
 .public-DraftStyleDefault-ltr {
   direction: ltr;
-  text-align: left;
+  /* text-align: left; */
 }
 .public-DraftStyleDefault-rtl {
   direction: rtl;

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
@@ -26336,22 +26349,14 @@ const Navigation = props => {
           lineNumber: 119,
           columnNumber: 30
         }
-      }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && ((_data3 = data[i - 1]) !== null && _data3 !== void 0 && _data3.comingSoon ? /*#__PURE__*/React__default.createElement(Flex$1, {
+      }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
+        label: (_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 123,
-          columnNumber: 19
-        }
-      }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
-        align: "center",
-        label: (_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.tooltipsContents,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 124,
-          columnNumber: 21
+          lineNumber: 122,
+          columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         css: {
@@ -26362,40 +26367,30 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 125,
-          columnNumber: 23
+          lineNumber: 123,
+          columnNumber: 19
         }
-      })), /*#__PURE__*/React__default.createElement(Tag, {
-        size: "lg",
-        type: "error",
+      })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
+        css: {
+          marginLeft: (_data5 = data[i - 1]) !== null && _data5 !== void 0 && _data5.withTolltip ? 0 : '$spacing-03'
+        },
+        align: "center",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
           lineNumber: 127,
-          columnNumber: 21
+          columnNumber: 17
         }
-      }, "Coming Soon")) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
-        align: "center",
-        label: (_data5 = data[i - 1]) === null || _data5 === void 0 ? void 0 : _data5.tooltipsContents,
+      }, /*#__PURE__*/React__default.createElement(Tag, {
+        size: "lg",
+        type: "error",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 132,
+          lineNumber: 128,
           columnNumber: 19
         }
-      }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
-        css: {
-          margin: '0 9px'
-        },
-        size: "20",
-        color: colors$4.iconSecondary,
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 133,
-          columnNumber: 21
-        }
-      }))))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
+      }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
         justify: "center",
         align: "center",
         direction: "column",
@@ -26409,7 +26404,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 139,
+          lineNumber: 136,
           columnNumber: 13
         }
       }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -26418,7 +26413,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 151,
+          lineNumber: 148,
           columnNumber: 30
         }
       }), !isComplete && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26434,7 +26429,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 153,
+          lineNumber: 150,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -26444,29 +26439,18 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 165,
+          lineNumber: 162,
           columnNumber: 15
         }
-      }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && (isActive && (_data9 = data[i - 1]) !== null && _data9 !== void 0 && _data9.comingSoon ? /*#__PURE__*/React__default.createElement(Flex$1, {
-        align: "center",
-        justify: "center",
-        gap: 3,
-        direction: "column",
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 171,
-          columnNumber: 19
-        }
-      }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip$1, {
         align: "center",
         withClick: true,
-        label: (_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.tooltipsContents,
+        label: (_data9 = data[i - 1]) === null || _data9 === void 0 ? void 0 : _data9.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 172,
-          columnNumber: 21
+          lineNumber: 166,
+          columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
         size: "20",
@@ -26474,38 +26458,31 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 173,
-          columnNumber: 23
-        }
-      })), /*#__PURE__*/React__default.createElement(Tag, {
-        size: "lg",
-        type: "error",
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$4,
-          lineNumber: 175,
-          columnNumber: 21
+          lineNumber: 167,
+          columnNumber: 19
         }
-      }, "Coming Soon")) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
+      })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default.createElement(Flex$1, {
         align: "center",
-        withClick: true,
-        label: (_data11 = data[i - 1]) === null || _data11 === void 0 ? void 0 : _data11.tooltipsContents,
+        justify: "center",
+        css: {
+          marginTop: (_data11 = data[i - 1]) !== null && _data11 !== void 0 && _data11.withTolltip ? 0 : '$spacing-03'
+        },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 180,
-          columnNumber: 19
+          lineNumber: 171,
+          columnNumber: 17
         }
-      }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
-        size: "20",
-        color: colors$4.iconSecondary,
+      }, /*#__PURE__*/React__default.createElement(Tag, {
+        size: "lg",
+        type: "error",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 181,
-          columnNumber: 21
+          lineNumber: 172,
+          columnNumber: 19
         }
-      })))));
+      }, "Coming Soon"))));
     }
   }
 
@@ -26524,7 +26501,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 189,
+      lineNumber: 182,
       columnNumber: 5
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -26536,7 +26513,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 205,
+      lineNumber: 198,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26549,7 +26526,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 206,
+      lineNumber: 199,
       columnNumber: 11
     }
   }, stepItems)) : stepItems);
@@ -26650,7 +26627,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 303,
+      lineNumber: 296,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -26672,7 +26649,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 304,
+      lineNumber: 297,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -26684,7 +26661,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 326,
+        lineNumber: 319,
         columnNumber: 16
       }
     }),
@@ -26694,7 +26671,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 321,
+      lineNumber: 314,
       columnNumber: 9
     }
   }), props.children)));
@@ -27213,19 +27190,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 +27264,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 +27660,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 +27709,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 +30088,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;
@@ -1203,7 +1202,7 @@
 }
 .public-DraftStyleDefault-ltr {
   direction: ltr;
-  text-align: left;
+  /* text-align: left; */
 }
 .public-DraftStyleDefault-rtl {
   direction: rtl;

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
@@ -26718,22 +26735,14 @@
             lineNumber: 119,
             columnNumber: 30
           }
-        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && ((_data3 = data[i - 1]) !== null && _data3 !== void 0 && _data3.comingSoon ? /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        }), typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title = (_data = data[i - 1]).title) === null || _data$title === void 0 ? void 0 : _data$title.call(_data), ((_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
+          label: (_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 123,
-            columnNumber: 19
-          }
-        }, /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
-          align: "center",
-          label: (_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.tooltipsContents,
-          __self: undefined,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 124,
-            columnNumber: 21
+            lineNumber: 122,
+            columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
           css: {
@@ -26744,40 +26753,30 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 125,
-            columnNumber: 23
+            lineNumber: 123,
+            columnNumber: 19
           }
-        })), /*#__PURE__*/React__default["default"].createElement(Tag, {
-          size: "lg",
-          type: "error",
+        })), ((_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+          css: {
+            marginLeft: (_data5 = data[i - 1]) !== null && _data5 !== void 0 && _data5.withTolltip ? 0 : '$spacing-03'
+          },
+          align: "center",
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
             lineNumber: 127,
-            columnNumber: 21
+            columnNumber: 17
           }
-        }, "Coming Soon")) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
-          align: "center",
-          label: (_data5 = data[i - 1]) === null || _data5 === void 0 ? void 0 : _data5.tooltipsContents,
+        }, /*#__PURE__*/React__default["default"].createElement(Tag, {
+          size: "lg",
+          type: "error",
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 132,
+            lineNumber: 128,
             columnNumber: 19
           }
-        }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
-          css: {
-            margin: '0 9px'
-          },
-          size: "20",
-          color: colors$4.iconSecondary,
-          __self: undefined,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 133,
-            columnNumber: 21
-          }
-        }))))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           justify: "center",
           align: "center",
           direction: "column",
@@ -26791,7 +26790,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 139,
+            lineNumber: 136,
             columnNumber: 13
           }
         }, isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -26800,7 +26799,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 151,
+            lineNumber: 148,
             columnNumber: 30
           }
         }), !isComplete && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -26816,7 +26815,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 153,
+            lineNumber: 150,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -26826,29 +26825,18 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 165,
+            lineNumber: 162,
             columnNumber: 15
           }
-        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && (isActive && (_data9 = data[i - 1]) !== null && _data9 !== void 0 && _data9.comingSoon ? /*#__PURE__*/React__default["default"].createElement(Flex$1, {
-          align: "center",
-          justify: "center",
-          gap: 3,
-          direction: "column",
-          __self: undefined,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 171,
-            columnNumber: 19
-          }
-        }, /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        }, isActive ? typeof data[i - 1].title === 'string' ? data[i - 1].title : (_data$title2 = (_data7 = data[i - 1]).title) === null || _data$title2 === void 0 ? void 0 : _data$title2.call(_data7) : ''), isActive && ((_data8 = data[i - 1]) === null || _data8 === void 0 ? void 0 : _data8.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
           align: "center",
           withClick: true,
-          label: (_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.tooltipsContents,
+          label: (_data9 = data[i - 1]) === null || _data9 === void 0 ? void 0 : _data9.tooltipsContents,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 172,
-            columnNumber: 21
+            lineNumber: 166,
+            columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
           size: "20",
@@ -26856,38 +26844,31 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 173,
-            columnNumber: 23
-          }
-        })), /*#__PURE__*/React__default["default"].createElement(Tag, {
-          size: "lg",
-          type: "error",
-          __self: undefined,
-          __source: {
-            fileName: _jsxFileName$4,
-            lineNumber: 175,
-            columnNumber: 21
+            lineNumber: 167,
+            columnNumber: 19
           }
-        }, "Coming Soon")) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+        })), isActive && ((_data10 = data[i - 1]) === null || _data10 === void 0 ? void 0 : _data10.comingSoon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           align: "center",
-          withClick: true,
-          label: (_data11 = data[i - 1]) === null || _data11 === void 0 ? void 0 : _data11.tooltipsContents,
+          justify: "center",
+          css: {
+            marginTop: (_data11 = data[i - 1]) !== null && _data11 !== void 0 && _data11.withTolltip ? 0 : '$spacing-03'
+          },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 180,
-            columnNumber: 19
+            lineNumber: 171,
+            columnNumber: 17
           }
-        }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
-          size: "20",
-          color: colors$4.iconSecondary,
+        }, /*#__PURE__*/React__default["default"].createElement(Tag, {
+          size: "lg",
+          type: "error",
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 181,
-            columnNumber: 21
+            lineNumber: 172,
+            columnNumber: 19
           }
-        })))));
+        }, "Coming Soon"))));
       }
     }
 
@@ -26906,7 +26887,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 189,
+        lineNumber: 182,
         columnNumber: 5
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -26918,7 +26899,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 205,
+        lineNumber: 198,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -26931,7 +26912,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 206,
+        lineNumber: 199,
         columnNumber: 11
       }
     }, stepItems)) : stepItems);
@@ -27032,7 +27013,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 303,
+        lineNumber: 296,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
@@ -27054,7 +27035,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 304,
+        lineNumber: 297,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -27066,7 +27047,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 326,
+          lineNumber: 319,
           columnNumber: 16
         }
       }),
@@ -27076,7 +27057,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 321,
+        lineNumber: 314,
         columnNumber: 9
       }
     }), props.children)));
@@ -27592,9 +27573,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 +27648,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 +28043,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 +28102,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 +30603,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.4",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",