@majoo-ui/react 1.55.11 → 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));
@@ -17200,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]);
@@ -18185,6 +18188,9 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   renderContextMenu,
   handleRowClick
 }, ref) => {
+  const {
+    t
+  } = useTranslation('MajooUI/table');
   const {
     getTableProps,
     getTableBodyProps,
@@ -18218,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
             }), {
@@ -18675,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",
@@ -18687,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({
@@ -18732,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) {
@@ -18762,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,
@@ -18970,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
                   }, {
@@ -19155,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,
@@ -19710,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'
@@ -19731,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, {
@@ -19739,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, {
@@ -19752,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, {
@@ -19766,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, {
@@ -19803,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, {
@@ -19811,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, {
@@ -19823,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, {
@@ -19834,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, {
@@ -19845,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, {
@@ -19853,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, {
@@ -19866,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, {
@@ -19874,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, {
@@ -19898,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, {
@@ -19913,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, {
@@ -19921,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, {
@@ -19937,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, {
@@ -19946,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, {
@@ -19954,7 +19965,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 115,
+        lineNumber: 117,
         columnNumber: 19
       }
     })))))));

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('react-i18next'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'react-i18next', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.reactI18next, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, reactI18next, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('react-i18next'), require('moment'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-loading-skeleton'), require('react-loading-skeleton/dist/skeleton.css'), require('react-ui-scrollspy'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', 'react-i18next', 'moment', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-loading-skeleton', 'react-loading-skeleton/dist/skeleton.css', 'react-ui-scrollspy', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.reactI18next, global.moment, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactSkeleton, null, global.ScrollSpy, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, reactI18next, moment, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactSkeleton, skeleton_css, ScrollSpy, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,6 +27,7 @@
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
   var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+  var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
   var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
   var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimitive);
@@ -45,7 +46,6 @@
   var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
   var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
   var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
-  var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var ADialog__namespace = /*#__PURE__*/_interopNamespace(ADialog);
   var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
@@ -3464,19 +3464,23 @@
     disableGlobalStyle
   }) {
     !disableGlobalStyle && applyGlobalStyles(extendStyle);
+    const {
+      i18n
+    } = reactI18next.useTranslation();
+    moment__default["default"].locale(i18n && i18n.language ? i18n.language : 'id');
     return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
       theme: theme$1,
       __self: this,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 11,
+        lineNumber: 15,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
         fileName: _jsxFileName$Y,
-        lineNumber: 12,
+        lineNumber: 16,
         columnNumber: 7
       }
     }, children));
@@ -17435,7 +17439,6 @@
       defaultValue = _h[0],
       setDefaultValue = _h[1];
     var language = i18n.language;
-    moment__default["default"].locale(language);
     React.useEffect(function () {
       setValue(date || dateValue);
     }, [date, dateValue]);
@@ -18439,6 +18442,7 @@
       cellAlign = _a.cellAlign,
       renderContextMenu = _a.renderContextMenu,
       handleRowClick = _a.handleRowClick;
+    var t = reactI18next.useTranslation('MajooUI/table').t;
     var getTableProps = instance.getTableProps,
       getTableBodyProps = instance.getTableBodyProps,
       headerGroups = instance.headerGroups,
@@ -18471,7 +18475,7 @@
               }).map(function (column) {
                 var headerRender = column.render('Header');
                 return jsxRuntime.jsx(TableHeadCell$4, __assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
-                  title: 'Urutkan'
+                  title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
                 }) : {
                   onClick: column.onToggle
                 }), {
@@ -18945,7 +18949,7 @@
     }
     return rawData;
   };
-  var defaultEmptyDataProps = function defaultEmptyDataProps(t) {
+  var defaultEmptyDataProps = function defaultEmptyDataProps(t, isMobile) {
     return {
       doodleImage: jsxRuntime.jsx(EmptyDataDoodle, {}, void 0),
       title: jsxRuntime.jsx(Paragraph, __assign({
@@ -18958,12 +18962,14 @@
       }, {
         children: t('dataNotAvailableTitle', 'Data tidak tersedia')
       }), void 0),
-      description: jsxRuntime.jsxs(Paragraph, __assign({
+      description: jsxRuntime.jsx(Paragraph, __assign({
         paragraph: "shortContentRegular",
         color: "secondary",
         align: "center"
       }, {
-        children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), jsxRuntime.jsx("br", {}, void 0), t('dataNotAvailableDescription_2', 'di halaman ini')]
+        children: isMobile ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), jsxRuntime.jsx("br", {}, void 0), t('dataNotAvailableDescription_2', 'di halaman ini')]
+        }, void 0) : "".concat(t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), " \n            ").concat(t('dataNotAvailableDescription_2', 'di halaman ini'))
       }), void 0)
     };
   };
@@ -19020,7 +19026,8 @@
       scrollAreaWidth = _s[0],
       setScrollAreaWidth = _s[1];
     var t = reactI18next.useTranslation('MajooUI/table').t;
-    var customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t);
+    var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
+    var customEmptyDataProps = emptyDataProps || defaultEmptyDataProps(t, isMobile);
     var getInitialState = function getInitialState() {
       var initialState = {};
       if (fetchData) {
@@ -19054,12 +19061,10 @@
       }
     }, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect, reactTableSticky.useSticky, reactTable.useColumnOrder);
     var scrollerRef = React.useRef(null);
-    var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
     var getTableProps = instance.getTableProps,
       getTableBodyProps = instance.getTableBodyProps,
-      headerGroups = instance.headerGroups;
-      instance.allColumns;
-      var visibleColumns = instance.visibleColumns,
+      headerGroups = instance.headerGroups,
+      visibleColumns = instance.visibleColumns,
       prepareRow = instance.prepareRow,
       page = instance.page,
       gotoPage = instance.gotoPage,
@@ -19276,7 +19281,7 @@
                     var headerRender = column.render('Header');
                     return jsxRuntime.jsx(TableHeadCell$3, __assign({}, column.getHeaderProps(function (props) {
                       return [props, !column.unsortable ? column.getSortByToggleProps({
-                        title: 'Urutkan'
+                        title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
                       }) : {
                         onClick: column.onToggle
                       }, {
@@ -19485,7 +19490,7 @@
     let dateTime = '-';
     const format = customFormat || 'DD MMMM YYYY';
     if (value && moment__default["default"](value, 'YYYYMMDDHHmmss').isValid()) {
-      dateTime = moment__default["default"](value, 'YYYYMMDDHHmmss').locale('id').format(format);
+      dateTime = moment__default["default"](value, 'YYYYMMDDHHmmss').format(format);
     }
     return /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
@@ -20040,8 +20045,11 @@
     options,
     Header: () => null,
     Cell: props => {
+      const {
+        t
+      } = reactI18next.useTranslation('MajooUI/table');
       const defaultConfig = {
-        mobileTitle: 'Aksi',
+        mobileTitle: t('rowMenuMobileLabel', 'Aksi'),
         cssContent: {},
         cssMenuItem: {},
         align: 'end'
@@ -20061,7 +20069,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 37,
+          lineNumber: 39,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
@@ -20069,7 +20077,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 38,
+          lineNumber: 40,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -20082,7 +20090,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 39,
+          lineNumber: 41,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -20096,21 +20104,21 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 40,
+          lineNumber: 42,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 48,
+          lineNumber: 50,
           columnNumber: 26
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuPortal, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 52,
+          lineNumber: 54,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
@@ -20133,7 +20141,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 53,
+          lineNumber: 55,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -20141,7 +20149,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 73,
+          lineNumber: 75,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -20153,7 +20161,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 74,
+          lineNumber: 76,
           columnNumber: 19
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -20164,7 +20172,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 83,
+          lineNumber: 85,
           columnNumber: 19
         }
       })))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
@@ -20175,7 +20183,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 89,
+          lineNumber: 91,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -20183,7 +20191,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 90,
+          lineNumber: 92,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -20196,7 +20204,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 91,
+          lineNumber: 93,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -20204,21 +20212,21 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 92,
+          lineNumber: 94,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 92,
+          lineNumber: 94,
           columnNumber: 50
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 95,
+          lineNumber: 97,
           columnNumber: 11
         }
       }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -20228,7 +20236,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 96,
+          lineNumber: 98,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -20243,7 +20251,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 97,
+          lineNumber: 99,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -20251,7 +20259,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 99,
+          lineNumber: 101,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -20267,7 +20275,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 100,
+          lineNumber: 102,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -20276,7 +20284,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 111,
+          lineNumber: 113,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -20284,7 +20292,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 115,
+          lineNumber: 117,
           columnNumber: 19
         }
       })))))));

package/package.json

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