@majoo-ui/react 1.55.10 → 1.55.12

package/index.esm.js

@@ -7,6 +7,8 @@ import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFi
 import { Transition } from 'react-transition-group';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Portal } from '@majoo-ui/helpers';
+import { useTranslation } from 'react-i18next';
+import moment from 'moment';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
@@ -18,7 +20,6 @@ import * as SwitchPrimitive from '@radix-ui/react-switch';
 import Downshift, { useMultipleSelection, useCombobox } from 'downshift';
 import InfiniteScroll from 'react-infinite-scroller';
 import debounce from 'lodash.debounce';
-import { useTranslation } from 'react-i18next';
 import OTPInput, { ResendOTP as ResendOTP$1 } from 'otp-input-react';
 import { useFloating, offset, flip, shift as shift$2, useInteractions, useClick, useDismiss, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -28,7 +29,6 @@ import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useDayzed } from 'dayzed';
-import moment from 'moment';
 import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder, useMountedLayoutEffect } from 'react-table';
 import ReactDOM, { createPortal } from 'react-dom';
 import * as ADialog from '@radix-ui/react-alert-dialog';
@@ -3389,19 +3389,23 @@ function MajooProvider({
   disableGlobalStyle
 }) {
   !disableGlobalStyle && applyGlobalStyles(extendStyle);
+  const {
+    i18n
+  } = useTranslation();
+  moment.locale(i18n && i18n.language ? i18n.language : 'id');
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: theme$1,
     __self: this,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 11,
+      lineNumber: 15,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
       fileName: _jsxFileName$Y,
-      lineNumber: 12,
+      lineNumber: 16,
       columnNumber: 7
     }
   }, children));
@@ -3466,7 +3470,8 @@ const Title$2 = styled(Heading, {
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   maxWidth: '956px',
-  marginInlineEnd: 12
+  marginInlineEnd: 12,
+  color: '$textPrimary !important'
 });
 const Description = styled(Paragraph, {
   lineHeight: '$long-content-regular',
@@ -3501,7 +3506,7 @@ const BannerTitle = props => /*#__PURE__*/React.createElement(Title$2, _extends(
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 95,
+    lineNumber: 96,
     columnNumber: 3
   }
 }), props.children);
@@ -3522,7 +3527,7 @@ const BannerDescription = props => /*#__PURE__*/React.createElement(Description,
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 112,
+    lineNumber: 113,
     columnNumber: 3
   }
 }), props.children);
@@ -3544,7 +3549,7 @@ const BannerLink = ({
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 129,
+    lineNumber: 130,
     columnNumber: 3
   }
 }, value => /*#__PURE__*/React.createElement(Link, {
@@ -3556,7 +3561,7 @@ const BannerLink = ({
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 131,
+    lineNumber: 132,
     columnNumber: 7
   }
 }, children));
@@ -3581,7 +3586,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 158,
+    lineNumber: 159,
     columnNumber: 3
   }
 }, value => /*#__PURE__*/React.createElement(CloseButton$1, {
@@ -3593,7 +3598,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 160,
+    lineNumber: 161,
     columnNumber: 7
   }
 }, /*#__PURE__*/React.createElement(CloseOutline, {
@@ -3602,7 +3607,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$X,
-    lineNumber: 167,
+    lineNumber: 168,
     columnNumber: 9
   }
 })));
@@ -3611,7 +3616,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 175,
+      lineNumber: 176,
       columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3621,7 +3626,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 176,
+      lineNumber: 177,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3634,21 +3639,21 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 177,
+      lineNumber: 178,
       columnNumber: 9
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 185,
+      lineNumber: 186,
       columnNumber: 27
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 186,
+      lineNumber: 187,
       columnNumber: 33
     }
   }, props.description)), props.link && /*#__PURE__*/React.createElement(BannerLink, {
@@ -3657,7 +3662,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 189,
+      lineNumber: 190,
       columnNumber: 11
     }
   }, props.linkText)), /*#__PURE__*/React.createElement(CloseButton$1, {
@@ -3670,7 +3675,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 194,
+      lineNumber: 195,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
@@ -3679,7 +3684,7 @@ const SingleTagBanner = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 202,
+      lineNumber: 203,
       columnNumber: 9
     }
   })));
@@ -3706,7 +3711,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 210,
+      lineNumber: 211,
       columnNumber: 5
     }
   }), children ? /*#__PURE__*/React.createElement(Flex$1, {
@@ -3723,7 +3728,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 212,
+      lineNumber: 213,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(Context$2.Provider, {
@@ -3734,7 +3739,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 219,
+      lineNumber: 220,
       columnNumber: 11
     }
   }, children)) : /*#__PURE__*/React.createElement(SingleTagBanner, {
@@ -3748,7 +3753,7 @@ const Banner = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$X,
-      lineNumber: 222,
+      lineNumber: 223,
       columnNumber: 9
     }
   }));
@@ -17199,7 +17204,6 @@ function InputDatePicker({
   const [value, setValue] = useState(date || dateValue);
   const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
   const language = i18n.language;
-  moment.locale(language);
   useEffect(() => {
     setValue(date || dateValue);
   }, [date, dateValue]);
@@ -18184,6 +18188,9 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   renderContextMenu,
   handleRowClick
 }, ref) => {
+  const {
+    t
+  } = useTranslation('MajooUI/table');
   const {
     getTableProps,
     getTableBodyProps,
@@ -18217,7 +18224,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
           children: headerGroup.headers.filter(column => column.isMobileHeader || column.id === 'selection').map(column => {
             const headerRender = column.render('Header');
             return jsx(TableHeadCell$4, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
-              title: 'Urutkan'
+              title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
             }) : {
               onClick: column.onToggle
             }), {
@@ -18674,7 +18681,7 @@ const formattingData = (rawData, groupKey) => {
   }
   return rawData;
 };
-const defaultEmptyDataProps = t => ({
+const defaultEmptyDataProps = (t, isMobile) => ({
   doodleImage: jsx(EmptyDataDoodle, {}, void 0),
   title: jsx(Paragraph, Object.assign({
     paragraph: "shortContentBold",
@@ -18686,12 +18693,15 @@ const defaultEmptyDataProps = t => ({
   }, {
     children: t('dataNotAvailableTitle', 'Data tidak tersedia')
   }), void 0),
-  description: jsxs(Paragraph, Object.assign({
+  description: jsx(Paragraph, Object.assign({
     paragraph: "shortContentRegular",
     color: "secondary",
     align: "center"
   }, {
-    children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), jsx("br", {}, void 0), t('dataNotAvailableDescription_2', 'di halaman ini')]
+    children: isMobile ? jsxs(Fragment, {
+      children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), jsx("br", {}, void 0), t('dataNotAvailableDescription_2', 'di halaman ini')]
+    }, void 0) : `${t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan')} 
+            ${t('dataNotAvailableDescription_2', 'di halaman ini')}`
   }), void 0)
 });
 function Table({
@@ -18731,7 +18741,8 @@ function Table({
   const {
     t
   } = useTranslation('MajooUI/table');
-  const customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t);
+  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
+  const customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t, isMobile);
   const getInitialState = () => {
     const initialState = {};
     if (fetchData) {
@@ -18761,12 +18772,10 @@ function Table({
     getRowId: showDuplicatedData ? undefined : row => row[keyId] || JSON.stringify(row)
   }, useSortBy, useExpanded, usePagination, useRowSelect, useSticky, useColumnOrder);
   const scrollerRef = useRef(null);
-  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
-    allColumns,
     visibleColumns,
     prepareRow,
     page,
@@ -18969,7 +18978,7 @@ function Table({
                 children: visibleHeaders.map((column, index) => {
                   const headerRender = column.render('Header');
                   return jsx(TableHeadCell$3, Object.assign({}, column.getHeaderProps(props => [props, !column.unsortable ? column.getSortByToggleProps({
-                    title: 'Urutkan'
+                    title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
                   }) : {
                     onClick: column.onToggle
                   }, {
@@ -19154,7 +19163,7 @@ const DateColumn = ({
   let dateTime = '-';
   const format = customFormat || 'DD MMMM YYYY';
   if (value && moment(value, 'YYYYMMDDHHmmss').isValid()) {
-    dateTime = moment(value, 'YYYYMMDDHHmmss').locale('id').format(format);
+    dateTime = moment(value, 'YYYYMMDDHHmmss').format(format);
   }
   return /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
@@ -19709,8 +19718,11 @@ const rowMenuColumn = (options, icon, config) => ({
   options,
   Header: () => null,
   Cell: props => {
+    const {
+      t
+    } = useTranslation('MajooUI/table');
     const defaultConfig = {
-      mobileTitle: 'Aksi',
+      mobileTitle: t('rowMenuMobileLabel', 'Aksi'),
       cssContent: {},
       cssMenuItem: {},
       align: 'end'
@@ -19730,7 +19742,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 37,
+        lineNumber: 39,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuTrigger, {
@@ -19738,7 +19750,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 38,
+        lineNumber: 40,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19751,7 +19763,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 39,
+        lineNumber: 41,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -19765,21 +19777,21 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 40,
+        lineNumber: 42,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 48,
+        lineNumber: 50,
         columnNumber: 26
       }
     })))), /*#__PURE__*/React__default.createElement(DropdownMenuPortal, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 52,
+        lineNumber: 54,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
@@ -19802,7 +19814,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 53,
+        lineNumber: 55,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -19810,7 +19822,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 73,
+        lineNumber: 75,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
@@ -19822,7 +19834,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 74,
+        lineNumber: 76,
         columnNumber: 19
       }
     }, option.title), /*#__PURE__*/React__default.createElement(DropdownMenuSeparator, {
@@ -19833,7 +19845,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 83,
+        lineNumber: 85,
         columnNumber: 19
       }
     })))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
@@ -19844,7 +19856,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 89,
+        lineNumber: 91,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -19852,7 +19864,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 90,
+        lineNumber: 92,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19865,7 +19877,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 91,
+        lineNumber: 93,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -19873,21 +19885,21 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 92,
+        lineNumber: 94,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 92,
+        lineNumber: 94,
         columnNumber: 50
       }
     })))), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 95,
+        lineNumber: 97,
         columnNumber: 11
       }
     }, mobileTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -19897,7 +19909,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 96,
+        lineNumber: 98,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19912,7 +19924,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 97,
+        lineNumber: 99,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -19920,7 +19932,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 99,
+        lineNumber: 101,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19936,7 +19948,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 100,
+        lineNumber: 102,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -19945,7 +19957,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 111,
+        lineNumber: 113,
         columnNumber: 21
       }
     }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -19953,7 +19965,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 115,
+        lineNumber: 117,
         columnNumber: 19
       }
     })))))));
@@ -23086,7 +23098,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 119,
+      lineNumber: 118,
       columnNumber: 5
     }
   })) : /*#__PURE__*/React__default.createElement(EyeIcon, _extends({}, props, {
@@ -23096,7 +23108,7 @@ const IconStateFull = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 126,
+      lineNumber: 125,
       columnNumber: 5
     }
   }));
@@ -23502,21 +23514,14 @@ const Upload = ({
     if (extension === 'pdf') {
       window.open(file === null || file === void 0 ? void 0 : file.url);
     } else {
-      request.get(file === null || file === void 0 ? void 0 : file.url).end((err, res) => {
-        if (err) {
-          console.error(err.message);
-        }
-        if (res && res !== null && res !== void 0 && res.ok) {
-          const response = res === null || res === void 0 ? void 0 : res.text;
-          const url = window.URL.createObjectURL(new Blob([response]));
-          const link = document.createElement('a');
-          link.href = url;
-          link.setAttribute('download', file === null || file === void 0 ? void 0 : file.name);
-          document.body.appendChild(link);
-          link.click();
-          document.body.removeChild(link);
-        }
-      });
+      if (file !== null && file !== void 0 && file.url) {
+        const link = document.createElement('a');
+        link.href = file.url;
+        link.setAttribute('download', file === null || file === void 0 ? void 0 : file.name);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
     }
   }
   function handleDragEnter(e) {
@@ -23558,7 +23563,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 608,
+        lineNumber: 599,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -23568,7 +23573,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 609,
+        lineNumber: 600,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : t('replaceLabel', 'Ubah Berkas')));
@@ -23583,7 +23588,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 619,
+            lineNumber: 610,
             columnNumber: 16
           }
         });
@@ -23594,7 +23599,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 622,
+          lineNumber: 613,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -23604,7 +23609,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 623,
+          lineNumber: 614,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -23613,7 +23618,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 624,
+          lineNumber: 615,
           columnNumber: 27
         }
       }), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -23626,7 +23631,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 626,
+          lineNumber: 617,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -23635,7 +23640,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 634,
+          lineNumber: 625,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -23645,7 +23650,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 637,
+          lineNumber: 628,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -23662,7 +23667,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 648,
+            lineNumber: 639,
             columnNumber: 16
           }
         });
@@ -23672,7 +23677,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 651,
+          lineNumber: 642,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -23682,7 +23687,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 652,
+          lineNumber: 643,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -23691,7 +23696,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 653,
+          lineNumber: 644,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -23704,7 +23709,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 654,
+          lineNumber: 645,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -23714,14 +23719,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 662,
+          lineNumber: 653,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 663,
+          lineNumber: 654,
           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$1, {
@@ -23729,7 +23734,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 664,
+          lineNumber: 655,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -23744,7 +23749,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 665,
+          lineNumber: 656,
           columnNumber: 19
         }
       }, item.name)))), !hiddenPreview && /*#__PURE__*/React__default.createElement(Box, {
@@ -23757,7 +23762,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 681,
+          lineNumber: 672,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -23766,7 +23771,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 689,
+          lineNumber: 680,
           columnNumber: 17
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -23774,7 +23779,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 692,
+          lineNumber: 683,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -23789,7 +23794,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 703,
+        lineNumber: 694,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -23803,7 +23808,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 704,
+        lineNumber: 695,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -23829,7 +23834,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 705,
+        lineNumber: 696,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -23837,14 +23842,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 718,
+        lineNumber: 709,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 719,
+        lineNumber: 710,
         columnNumber: 11
       }
     }, t('uploadingLabel', 'Berkas sedang diunggah'))));
@@ -23856,7 +23861,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 727,
+        lineNumber: 718,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -23872,7 +23877,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 728,
+        lineNumber: 719,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -23884,21 +23889,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 739,
+        lineNumber: 730,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 740,
+        lineNumber: 731,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 742,
+        lineNumber: 733,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -23907,7 +23912,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 743,
+        lineNumber: 734,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -23915,7 +23920,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 744,
+        lineNumber: 735,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -23925,7 +23930,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 746,
+        lineNumber: 737,
         columnNumber: 17
       }
     }, placeholder != null ? placeholder : t('uploadPlaceholder', 'Pilih atau letakkan berkas di sini'))))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
@@ -23935,7 +23940,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 753,
+        lineNumber: 744,
         columnNumber: 19
       }
     }, error));
@@ -23945,7 +23950,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 760,
+        lineNumber: 751,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -23953,7 +23958,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 761,
+        lineNumber: 752,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -23961,7 +23966,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 762,
+        lineNumber: 753,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -23974,7 +23979,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 764,
+        lineNumber: 755,
         columnNumber: 9
       }
     }, cropperTitle || t('cropperTitle', 'Potong Gambar')), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -23986,7 +23991,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 767,
+        lineNumber: 758,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -23997,7 +24002,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 768,
+        lineNumber: 759,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -24011,14 +24016,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 769,
+        lineNumber: 760,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 772,
+        lineNumber: 763,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24030,14 +24035,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 773,
+        lineNumber: 764,
         columnNumber: 11
       }
     }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 775,
+        lineNumber: 766,
         columnNumber: 15
       }
     }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
@@ -24045,7 +24050,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 777,
+        lineNumber: 768,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -24057,7 +24062,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 778,
+        lineNumber: 769,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -24065,7 +24070,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 785,
+        lineNumber: 776,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$4, {
@@ -24074,7 +24079,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 786,
+        lineNumber: 777,
         columnNumber: 15
       }
     }, t('label.cancel', 'Batal', {
@@ -24084,7 +24089,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 789,
+        lineNumber: 780,
         columnNumber: 15
       }
     }, t('save', 'Simpan', {
@@ -24101,7 +24106,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 798,
+      lineNumber: 789,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -24110,7 +24115,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 801,
+      lineNumber: 792,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -29932,6 +29937,7 @@ const InputSearch = /*#__PURE__*/React__default.forwardRef((props, ref) => jsx(B
 }), void 0));
 const libraries = ['places'];
 function MapPicker(props) {
+  const inputRef = useRef(null);
   const {
     mapsApiKey,
     css,
@@ -29972,7 +29978,7 @@ function MapPicker(props) {
     setMap(null);
   }, []);
   const onPlacesChanged = () => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const location = mapSearch === null || mapSearch === void 0 ? void 0 : mapSearch.getPlaces();
     setPlaces(location);
     const cordinat = (_b = (_a = location === null || location === void 0 ? void 0 : location[0]) === null || _a === void 0 ? void 0 : _a.geometry) === null || _b === void 0 ? void 0 : _b.location;
@@ -29989,6 +29995,7 @@ function MapPicker(props) {
       formatted_address: (_d = location === null || location === void 0 ? void 0 : location[0]) === null || _d === void 0 ? void 0 : _d.formatted_address,
       address_components: (_e = location === null || location === void 0 ? void 0 : location[0]) === null || _e === void 0 ? void 0 : _e.address_components
     });
+    (_f = inputRef.current) === null || _f === void 0 ? void 0 : _f.click();
   };
   const handleGeoCode = e => {
     const defaultApiKey = 'AIzaSyCDItrnct4DxaJ3CvUiCTidwY3YcGiDsu0';
@@ -30158,6 +30165,7 @@ function MapPicker(props) {
         onPlacesChanged: onPlacesChanged
       }, {
         children: jsx(InputSearch, {
+          ref: inputRef,
           placeholder: "Cari ..."
         }, void 0)
       }), void 0), jsxs(Flex$1, Object.assign({
@@ -31994,10 +32002,13 @@ const Container = styled(Flex$1, {
 });
 function Skeleton(props) {
   const {
-    css
+    css,
+    variant,
+    width,
+    color
   } = props;
   const isDesktop = useMediaQuery('(min-width: 767px)');
-  return jsxs(Container, Object.assign({
+  const renderGroup = () => jsxs(Container, Object.assign({
     css: css
   }, {
     children: [jsx(StyledSkeleton, {
@@ -32051,7 +32062,16 @@ function Skeleton(props) {
       }), void 0)
     }), void 0)]
   }), void 0);
+  return variant === 'single' ? jsx(StyledSkeleton, {
+    width: width,
+    color: color
+  }, void 0) : renderGroup();
 }
+Skeleton.defaultProps = {
+  variant: 'group',
+  color: 'secondary',
+  width: '100%'
+};
 
 var _jsxFileName = "C:\\Users\\Acer\\Documents\\project\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
 const StyledPaper = styled(Paper, {