@majoo-ui/react 1.48.1 → 1.48.2

package/index.esm.js

@@ -5128,7 +5128,7 @@ Progress$1.defaultProps = {
 };
 
 const formLabelStyle = {
-  '& .form-label': {
+  '& > .form-label': {
     alignItems: 'start !important',
     '& > div': {
       width: 175
@@ -5149,7 +5149,10 @@ const formLabelStyle = {
     }
   }
 };
-const FormGroup = styled(Flex$1, {
+const FormGroup = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: '1fr',
+  rowGap: '$spacing-03',
   variants: {
     responsive: {
       input: Object.assign({
@@ -5204,7 +5207,7 @@ const FormGroup = styled(Flex$1, {
           '& *:nth-child(3)': {
             gridColumn: 'unset'
           },
-          '& .retina-error': {
+          '& > *:nth-child(n+4)': {
             gridColumn: '2/3'
           }
         }
@@ -5213,14 +5216,6 @@ const FormGroup = styled(Flex$1, {
   }
 });
 FormGroup.displayName = 'FormGroup';
-FormGroup.propTypes = {
-  gap: PropTypes.number,
-  direction: PropTypes.string
-};
-FormGroup.defaultProps = {
-  gap: 3,
-  direction: 'column'
-};
 
 const _excluded$n = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
 var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
@@ -8218,11 +8213,13 @@ const SelectOption = styled('div', {
 });
 const SelectItem = styled('div', {
   overflow: 'hidden',
-  borderBottom: '1px solid $bgBorder',
   padding: '$spacing-05 0',
   backgroundColor: 'rgb(235, 245, 255)',
   cursor: 'pointer',
-  lineHeight: '20px'
+  lineHeight: '20px',
+  '&:not(:last-child)': {
+    borderBottom: '1px solid $bgBorder'
+  }
 });
 const StyledDiv$2 = styled('div', {
   color: '$textDisable',
@@ -12765,7 +12762,7 @@ const ModalDialog = props => {
           if (!onOpenAutoFocus) {
             e.preventDefault();
           } else {
-            onOpenAutoFocus();
+            onOpenAutoFocus(e);
           }
         }
       }, {
@@ -13269,27 +13266,6 @@ const AccordionTrigger = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
 const AccordionItem = StyledItem$1;
 const AccordionContent = AccordionPrimitive.Content;
 
-const monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
-const weekdayNamesShort = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
-const yearRangesList = rangeStart => {
-  let start = rangeStart;
-  let end = start + 9;
-  return new Array(10).fill(undefined).map(_ => {
-    const yearRange = {
-      start,
-      end
-    };
-    start = end + 1;
-    end = end + 10;
-    return yearRange;
-  });
-};
-const getCalendarStartYear = year => year - year % 10 + 1;
-const getCalendarStartYearRange = year => year - year % 100 + 1;
-const toDateFormat = (date, dateStyle = 'long') => Intl.DateTimeFormat('id-ID', {
-  dateStyle
-}).format(date);
-
 function useMediaQuery(query) {
   const [matches, setMatches] = useState(false);
   useEffect(() => {
@@ -13339,6 +13315,27 @@ const AdvancedOption = ({
   }), void 0);
 };
 
+const monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
+const weekdayNamesShort = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
+const yearRangesList = rangeStart => {
+  let start = rangeStart;
+  let end = start + 9;
+  return new Array(10).fill(undefined).map(_ => {
+    const yearRange = {
+      start,
+      end
+    };
+    start = end + 1;
+    end = end + 10;
+    return yearRange;
+  });
+};
+const getCalendarStartYear = year => year - year % 10 + 1;
+const getCalendarStartYearRange = year => year - year % 100 + 1;
+const toDateFormat = (date, dateStyle = 'long') => Intl.DateTimeFormat('id-ID', {
+  dateStyle
+}).format(date);
+
 const DateNumber = styled('div', {
   display: 'inline-flex',
   alignItems: 'center',
@@ -13481,7 +13478,7 @@ const WeekdayBox$1 = styled(Box, {
 });
 const CalendarsContainer$1 = styled(Box, {
   width: '100%',
-  padding: '$spacing-01',
+  padding: '$spacing-03',
   display: 'inline-flex',
   borderRadius: '$lg',
   boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
@@ -14353,7 +14350,8 @@ const MobileCalendarBox = ({
         return jsx(DateNumber, Object.assign({
           size: "small"
         }, dateProps, {
-          variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected)
+          variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
+          isSunday: date.getDay() === 0
         }, {
           children: date.getDate()
         }), key);
@@ -15445,6 +15443,8 @@ function advancePickerDate(type) {
   }
 }
 
+moment.locale('id');
+
 const getInputPickerValue = (type, date) => {
   if (!date) return '';
 
@@ -15453,7 +15453,7 @@ const getInputPickerValue = (type, date) => {
       dateStyle: 'long'
     }).format(date);
   } else {
-    return `${toDateFormat(date[0], 'medium')} - ${toDateFormat(date[1], 'medium')}`;
+    return `${moment(date[0]).format('ll')} - ${moment(date[1]).format('ll')}`;
   }
 };
 
@@ -16020,7 +16020,7 @@ function Pagination(_ref) {
 
   const totalPages = Math.ceil(totalData / limit);
   const isMobile = useMediaQuery('(max-width: 700px)');
-  return /*#__PURE__*/React__default.createElement(Flex$1, _extends({
+  return !hideDataInfo || totalPages > 1 ? /*#__PURE__*/React__default.createElement(Flex$1, _extends({
     direction: isMobile ? 'columnReverse' : 'row',
     align: "center",
     justify: "between",
@@ -16061,7 +16061,14 @@ function Pagination(_ref) {
       lineNumber: 33,
       columnNumber: 26
     }
-  }));
+  })) : /*#__PURE__*/React__default.createElement(Box, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 36,
+      columnNumber: 5
+    }
+  });
 }
 
 Pagination.propTypes = {
@@ -16122,7 +16129,8 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   isLoading,
   rowGroup,
   hiddenColumns,
-  css
+  css,
+  customRowsStyle
 }, ref) => {
   const {
     getTableProps,
@@ -16168,8 +16176,22 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
         children: page.map(row => {
           prepareRow(row);
           const actionCells = row.allCells.filter(cell => cell.column.id === 'menu' || cell.column.isAction);
+          let customStyle = {};
+
+          if (customRowsStyle && customRowsStyle(row.values).length) {
+            for (let i = 0; i < customRowsStyle(row.values).length; i++) {
+              console.log(customRowsStyle(row.values)[i]);
+
+              if (customRowsStyle(row.values)[i].predicate) {
+                customStyle = customRowsStyle(row.values)[i].css;
+              }
+            }
+          }
+
           return jsxs(React__default.Fragment, {
-            children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$3, Object.assign({}, row.getRowProps(), {
+            children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$3, Object.assign({
+              css: customStyle
+            }, row.getRowProps(), {
               key: `${row.id}-group_header`
             }), jsx(TableCell$3, Object.assign({
               colSpan: 100
@@ -16179,7 +16201,9 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
               }, {
                 children: row.cells[0].render('Cell')
               }), void 0)
-            }), void 0)), jsx(TableRow$3, Object.assign({}, row.getRowProps(), {
+            }), void 0)), jsx(TableRow$3, Object.assign({
+              css: customStyle
+            }, row.getRowProps(), {
               children: row.cells.filter(cell => cell.column.isMobileHeader || cell.column.id === 'selection').map(cell => {
                 return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                   children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
@@ -16224,7 +16248,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                         heading: "headerTable",
                         color: "secondary"
                       }, {
-                        children: (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase()
+                        children: typeof cell.column.Header === 'string' ? (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase() : cell.render('Header')
                       }), void 0), cell.render('Cell')]
                     }), `${cell.column.id}-${row.id}`);
                   })
@@ -16510,7 +16534,8 @@ function Table({
   selectedIds,
   rowGroup,
   hiddenColumns,
-  columnOrder
+  columnOrder,
+  customRowsStyle
 }) {
   const [limit, setLimit] = useState(rowLimit);
 
@@ -16747,8 +16772,22 @@ function Table({
               const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
               const leftAddOnCells = (_a = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) !== null && _a !== void 0 ? _a : [];
               const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
+              let customStyle = {};
+
+              if (customRowsStyle && customRowsStyle(row.values).length) {
+                for (let _i = 0; _i < customRowsStyle(row.values).length; _i++) {
+                  console.log(customRowsStyle(row.values)[_i]);
+
+                  if (customRowsStyle(row.values)[_i].predicate) {
+                    customStyle = customRowsStyle(row.values)[_i].css;
+                  }
+                }
+              }
+
               return jsxs(React.Fragment, {
-                children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$2, Object.assign({}, row.getRowProps(), {
+                children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$2, Object.assign({
+                  css: customStyle
+                }, row.getRowProps(), {
                   key: `${row.id}-group_header`
                 }), jsx(TableCell$2, Object.assign({
                   colSpan: 100,
@@ -16762,7 +16801,9 @@ function Table({
                   }, {
                     children: row.cells[0].render('Cell')
                   }), void 0)
-                }), void 0)), jsx(TableRow$2, Object.assign({}, row.getRowProps(), {
+                }), void 0)), jsx(TableRow$2, Object.assign({
+                  css: customStyle
+                }, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
                     return jsx(TableCell$2, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                       css: Object.assign({
@@ -16842,7 +16883,8 @@ function Table({
       isLoading: isLoading,
       rowGroup: rowGroup,
       hiddenColumns: hiddenColumns,
-      css: css
+      css: css,
+      customRowsStyle: customRowsStyle
     }, void 0)]
   }), void 0);
 } //Dummy component for mdx docs purpose only
@@ -17962,7 +18004,7 @@ const PageDialog = props => {
           if (!onOpenAutoFocus) {
             e.preventDefault();
           } else {
-            onOpenAutoFocus();
+            onOpenAutoFocus(e);
           }
         }
       }, {
@@ -18472,7 +18514,7 @@ function AlertDialog(props) {
       minHeight: 230
     }, isMobileCss, props.css),
     onOpenAutoFocus: e => {
-      if (!props.onOpenAutoFocus) e.preventDefault();
+      if (!props.onOpenAutoFocus) e.preventDefault();else props.onOpenAutoFocus(e);
     },
     __self: this,
     __source: {
@@ -21036,13 +21078,27 @@ const Upload = ({
     borderRadius: 8,
     width: width,
     height: height - 36,
-    objectFit: 'cover'
+    objectFit: 'cover',
+    variants: {
+      disabled: {
+        true: {
+          height
+        }
+      }
+    }
   });
   const Blank = styled('div', {
     borderRadius: 8,
     width: width,
     height: height - 36,
-    background: '$gray50'
+    background: '$gray50',
+    variants: {
+      disabled: {
+        true: {
+          height
+        }
+      }
+    }
   });
 
   function handleClick() {
@@ -21325,7 +21381,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 543,
+        lineNumber: 557,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -21335,7 +21391,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 544,
+        lineNumber: 558,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -21351,7 +21407,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 554,
+            lineNumber: 568,
             columnNumber: 16
           }
         });
@@ -21363,7 +21419,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 557,
+          lineNumber: 571,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21373,17 +21429,17 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 558,
+          lineNumber: 572,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default.createElement(IconStateFull, {
+      }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "close",
         onClick: () => handleRemove(item),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 559,
-          columnNumber: 13
+          lineNumber: 573,
+          columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
         css: {
@@ -21395,7 +21451,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 560,
+          lineNumber: 574,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21404,18 +21460,20 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 568,
+          lineNumber: 582,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
         src: item.url,
+        alt: "upload-content",
+        disabled: disabled,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 570,
+          lineNumber: 584,
           columnNumber: 13
         }
-      })), renderButtonReplace(index));
+      })), !disabled && renderButtonReplace(index));
     });
   };
 
@@ -21431,7 +21489,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 581,
+            lineNumber: 595,
             columnNumber: 16
           }
         });
@@ -21442,7 +21500,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 584,
+          lineNumber: 598,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21452,17 +21510,17 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 585,
+          lineNumber: 599,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default.createElement(IconStateFull, {
+      }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "close",
         onClick: () => handleRemove(item),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 586,
-          columnNumber: 13
+          lineNumber: 600,
+          columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
         css: {
@@ -21474,7 +21532,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 587,
+          lineNumber: 601,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21484,14 +21542,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 595,
+          lineNumber: 609,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 596,
+          lineNumber: 610,
           columnNumber: 17
         }
       }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21499,7 +21557,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 597,
+          lineNumber: 611,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -21514,7 +21572,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 598,
+          lineNumber: 612,
           columnNumber: 19
         }
       }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -21527,7 +21585,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 627,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21536,17 +21594,18 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 621,
+          lineNumber: 635,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
+        disabled: disabled,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 623,
+          lineNumber: 637,
           columnNumber: 13
         }
-      })), renderButtonReplace(index));
+      })), !disabled && renderButtonReplace(index));
     });
   };
 
@@ -21559,7 +21618,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 634,
+        lineNumber: 648,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21573,7 +21632,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 635,
+        lineNumber: 649,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -21599,7 +21658,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 636,
+        lineNumber: 650,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -21607,14 +21666,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 649,
+        lineNumber: 663,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 650,
+        lineNumber: 664,
         columnNumber: 11
       }
     }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21627,7 +21686,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 658,
+        lineNumber: 672,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -21643,7 +21702,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 659,
+        lineNumber: 673,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -21655,21 +21714,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 670,
+        lineNumber: 684,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 671,
+        lineNumber: 685,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 673,
+        lineNumber: 687,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -21678,7 +21737,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 674,
+        lineNumber: 688,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -21686,7 +21745,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 675,
+        lineNumber: 689,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -21696,14 +21755,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 677,
+        lineNumber: 691,
         columnNumber: 17
       }
     }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 684,
+        lineNumber: 698,
         columnNumber: 19
       }
     }, error));
@@ -21714,7 +21773,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 691,
+        lineNumber: 705,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -21722,7 +21781,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 692,
+        lineNumber: 706,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -21730,7 +21789,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 693,
+        lineNumber: 707,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -21743,7 +21802,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 695,
+        lineNumber: 709,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -21754,7 +21813,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 698,
+        lineNumber: 712,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -21765,7 +21824,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 699,
+        lineNumber: 713,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -21779,14 +21838,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 700,
+        lineNumber: 714,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 703,
+        lineNumber: 717,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21798,7 +21857,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 704,
+        lineNumber: 718,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21806,7 +21865,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 705,
+        lineNumber: 719,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -21818,7 +21877,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 706,
+        lineNumber: 720,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21826,7 +21885,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 712,
+        lineNumber: 726,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21835,7 +21894,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 713,
+        lineNumber: 727,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21843,7 +21902,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 716,
+        lineNumber: 730,
         columnNumber: 15
       }
     }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21851,7 +21910,7 @@ const Upload = ({
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "row",
-    gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 ? 0 : 3,
+    gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
     wrap: "wrap",
     css: {
       userSelect: 'none'
@@ -21859,7 +21918,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 727,
+      lineNumber: 741,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -21868,7 +21927,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 730,
+      lineNumber: 744,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -27217,6 +27276,33 @@ function InputMapPicker(props) {
   } = props;
   const modalTrigger = React__default.useRef(null);
   const [inputValue, setInputValue] = useState(placeholder);
+  useEffect(() => {
+    const handleGeoCode = e => {
+      const defaultApiKey = 'AIzaSyCDItrnct4DxaJ3CvUiCTidwY3YcGiDsu0';
+      const {
+        lat,
+        lng
+      } = e;
+      request.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${mapsApiKey !== null && mapsApiKey !== void 0 ? mapsApiKey : defaultApiKey}`).end((err, res) => {
+        var _a;
+
+        if (err) {
+          console.error(err.message);
+        }
+
+        if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
+          const {
+            results
+          } = JSON.parse(res === null || res === void 0 ? void 0 : res.text);
+          setInputValue((_a = results === null || results === void 0 ? void 0 : results[0]) === null || _a === void 0 ? void 0 : _a.formatted_address);
+        }
+      });
+    };
+
+    if (value && value.lat && value.lng) {
+      handleGeoCode(value);
+    }
+  }, [mapsApiKey, onChange, value]);
 
   function handleClick() {
     var _a;
@@ -27320,11 +27406,7 @@ function InputMapPicker(props) {
 InputMapPicker.defaultProps = {
   modalTitle: 'Tambah Lokasi di Map',
   buttonLabel: 'Ubah Lokasi',
-  placeholder: 'Tandai lokasi dalam peta',
-  value: {
-    lat: -6.175392,
-    lng: 106.827153
-  }
+  placeholder: 'Tandai lokasi dalam peta'
 };
 
 var _jsxFileName = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";