@majoo-ui/react 1.54.6 → 1.54.7

package/components/datePicker/DatePicker.d.ts

@@ -2,6 +2,7 @@
 export declare const DEFAULT: "default";
 export declare const SINGLE_PICKER: "single";
 export declare const RANGE_PICKER: "range";
+export declare const DATE_RANGE_PICKER: "range_picker";
 export declare const ADVANCE_PICKER: "advance";
 export declare const RANGE_CONTROL: "range_control";
 export declare const WEEKLY: "weekly";

package/components/datePicker/InputDatePicker.d.ts

@@ -1,20 +1,20 @@
 import * as React from 'react';
-import { ADVANCE_PICKER, RANGE_PICKER, SINGLE_PICKER, DEFAULT, RANGE_CONTROL, WEEKLY, MONTHLY } from './DatePicker';
+import { ADVANCE_PICKER, RANGE_PICKER, SINGLE_PICKER, WEEKLY, MONTHLY, DATE_RANGE_PICKER } from './DatePicker';
 import { CSS } from '../../config/stitches.config';
 import { PopoverPlacement } from '../../type/base.types';
 export interface InputDatePickerProps {
     /**
      * Specify the DatePicker type.
      */
-    type?: typeof SINGLE_PICKER | typeof RANGE_PICKER | typeof ADVANCE_PICKER;
+    type?: typeof SINGLE_PICKER | typeof RANGE_PICKER | typeof DATE_RANGE_PICKER | typeof ADVANCE_PICKER;
     /**
-     * Specify the InputPicker type.
+     * Show input range control state.
      */
-    inputType?: typeof DEFAULT | typeof RANGE_CONTROL;
+    showRangeControl?: boolean;
     /**
      * Specify the range control type.
      */
-    rangeControl?: typeof WEEKLY | typeof MONTHLY;
+    rangePickerType?: typeof WEEKLY | typeof MONTHLY;
     /**
      * Specify the InputDatePicker placeholder.
      */
@@ -80,4 +80,4 @@ export interface InputDatePickerProps {
      */
     isInvalid?: boolean;
 }
-export declare function InputDatePicker({ type, inputType, rangeControl, placeholder, size, disabled, onChange, defaultValue: defaultDateValue, value: dateValue, defaultDate, date, advanceView, placement, css, showTimePicker, minDate, maxDate, readOnly, isInvalid, }: InputDatePickerProps): JSX.Element;
+export declare function InputDatePicker({ type, showRangeControl, rangePickerType, placeholder, size, disabled, onChange, defaultValue: defaultDateValue, value: dateValue, defaultDate, date, advanceView, placement, css, showTimePicker, minDate, maxDate, readOnly, isInvalid, }: InputDatePickerProps): JSX.Element;

package/components/datePicker/state/reducer.d.ts

@@ -4,8 +4,10 @@ export declare const YESTERDAY = "YESTERDAY";
 export declare const LAST_7_DAYS = "LAST_7_DAYS";
 export declare const LAST_WEEK = "LAST_WEEK";
 export declare const PREV_WEEK = "PREV_WEEK";
+export declare const RANGE_WEEK = "RANGE_WEEK";
 export declare const NEXT_WEEK = "NEXT_WEEK";
 export declare const PREV_MONTH = "PREV_MONTH";
+export declare const RANGE_MONTH = "RANGE_MONTH";
 export declare const NEXT_MONTH = "NEXT_MONTH";
 export declare const THIS_WEEK = "THIS_WEEK";
 export declare const LAST_MONTH = "LAST_MONTH";

package/index.esm.js

@@ -16491,6 +16491,7 @@ InputTimePicker.displayName = 'InputTimePicker';
 const DEFAULT = 'default';
 const SINGLE_PICKER = 'single';
 const RANGE_PICKER = 'range';
+const DATE_RANGE_PICKER = 'range_picker';
 const ADVANCE_PICKER = 'advance';
 const RANGE_CONTROL = 'range_control';
 const WEEKLY = 'weekly';
@@ -16577,6 +16578,7 @@ const CalendarPicker = _a => {
 const CalendarRangePicker = _a => {
   var {
     isMultiDatePicker,
+    isRangeControl,
     onChange,
     onClose,
     advanceView,
@@ -16585,7 +16587,7 @@ const CalendarRangePicker = _a => {
     minDate,
     maxDate
   } = _a,
-      props = __rest(_a, ["isMultiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled", "minDate", "maxDate"]);
+      props = __rest(_a, ["isMultiDatePicker", "isRangeControl", "onChange", "onClose", "advanceView", "selected", "disabled", "minDate", "maxDate"]);
 
   const today = new Date();
   const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
@@ -16600,6 +16602,11 @@ const CalendarRangePicker = _a => {
   }, [selected]);
 
   const onDateSelected = selectedDate => {
+    if (isRangeControl) {
+      onChange === null || onChange === void 0 ? void 0 : onChange([selectedDate.date]);
+      onClose();
+    }
+
     if (!dateValue.length || dateValue.length === 2) {
       setDateValue([selectedDate.date]);
     } else {
@@ -16657,21 +16664,32 @@ const DatePicker = props => {
   } = props,
         otherProps = __rest(props, ["type"]);
 
-  if (type !== SINGLE_PICKER) {
-    return jsx(CalendarRangePicker, Object.assign({}, otherProps), void 0);
+  const isDateRangePicker = type === DATE_RANGE_PICKER;
+
+  if (type !== SINGLE_PICKER || isDateRangePicker) {
+    return jsx(CalendarRangePicker, Object.assign({}, otherProps, {
+      isRangeControl: isDateRangePicker
+    }), void 0);
   }
 
   return jsx(CalendarPicker, Object.assign({}, otherProps), void 0);
 };
 
+moment.updateLocale('id', {
+  week: {
+    dow: 1
+  }
+});
 const UPDATE_PICKER = 'UPDATE';
 const TODAY = 'TODAY';
 const YESTERDAY = 'YESTERDAY';
 const LAST_7_DAYS = 'LAST_7_DAYS';
 const LAST_WEEK = 'LAST_WEEK';
 const PREV_WEEK = 'PREV_WEEK';
+const RANGE_WEEK = 'RANGE_WEEK';
 const NEXT_WEEK = 'NEXT_WEEK';
 const PREV_MONTH = 'PREV_MONTH';
+const RANGE_MONTH = 'RANGE_MONTH';
 const NEXT_MONTH = 'NEXT_MONTH';
 const THIS_WEEK = 'THIS_WEEK';
 const LAST_MONTH = 'LAST_MONTH';
@@ -16844,6 +16862,14 @@ function advancePickerDate(type, date) {
         return [startThisWeek, endThisWeek];
       }
 
+    case RANGE_WEEK:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]);
+        const startThisWeek = currentDate.startOf('week').toDate();
+        const endThisWeek = currentDate.endOf('week').toDate();
+        return [startThisWeek, endThisWeek];
+      }
+
     case PREV_WEEK:
       {
         const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
@@ -16852,6 +16878,14 @@ function advancePickerDate(type, date) {
         return [startThisWeek, endThisWeek];
       }
 
+    case RANGE_MONTH:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]);
+        const startThisMonth = currentDate.startOf('month').toDate();
+        const endThisMonth = currentDate.endOf('month').toDate();
+        return [startThisMonth, endThisMonth];
+      }
+
     case NEXT_MONTH:
       {
         const currentDate = moment(date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
@@ -17059,8 +17093,8 @@ const getInputPickerValue = (type, date, isTimePicker) => {
 
 function InputDatePicker({
   type = SINGLE_PICKER,
-  inputType = DEFAULT,
-  rangeControl = WEEKLY,
+  showRangeControl,
+  rangePickerType = WEEKLY,
   placeholder = 'Pilih Tanggal',
   size = 'sm',
   disabled,
@@ -17080,6 +17114,7 @@ function InputDatePicker({
 }) {
   const [value, setValue] = useState(date || dateValue);
   const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
+  console.log(placement);
   useEffect(() => {
     setValue(date || dateValue);
   }, [date, dateValue]);
@@ -17110,24 +17145,26 @@ function InputDatePicker({
 
   function handleRangeChange(type) {
     if (selectedDate && !disabled && !readOnly && !isInvalid) {
-      const actionType = rangeControl === 'monthly' ? 'MONTH' : 'WEEK';
+      const actionType = rangePickerType === 'monthly' ? 'MONTH' : 'WEEK';
 
       if (type === 'prev') {
         dispatch({
           type: 'UPDATE',
           payload: advancePickerDate('PREV_' + actionType, selectedDate)
         });
+        onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('PREV_' + actionType, selectedDate));
       } else {
         dispatch({
           type: 'UPDATE',
           payload: advancePickerDate('NEXT_' + actionType, selectedDate)
         });
+        onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('NEXT_' + actionType, selectedDate));
       }
     }
   }
 
   const renderInputGroup = () => {
-    if (inputType === DEFAULT) {
+    if (!showRangeControl) {
       return jsxs(InputGroup, Object.assign({
         disabled: disabled,
         readOnly: readOnly,
@@ -17158,38 +17195,58 @@ function InputDatePicker({
     }
   };
 
-  const renderDatePicker = () => jsx(DatePicker, {
-    advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
-      options: advancePickerOptions,
-      disabled: disabled,
-      optionHandler: value => {
+  const renderDatePicker = () => {
+    const handleDatePickerChange = value => {
+      if (showRangeControl || type === 'range_picker') {
+        if (rangePickerType === 'monthly') {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate('RANGE_MONTH', value)
+          });
+          onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_MONTH', value));
+        } else {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate('RANGE_WEEK', value)
+          });
+          onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_WEEK', value));
+        }
+      } else {
         dispatch({
           type: 'UPDATE',
-          payload: advancePickerDate(value, undefined)
+          payload: value
         });
-        if (onChange) onChange(advancePickerDate(value, undefined));
-        setOpenPicker(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
       }
-    }, void 0) : {
-      advanceView
-    }),
-    type: inputType === RANGE_CONTROL ? ADVANCE_PICKER : type,
-    disabled: disabled,
-    date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
-    selected: selectedDate,
-    isMultiDatePicker: type !== SINGLE_PICKER || inputType === 'range_control',
-    onChange: value => {
-      dispatch({
-        type: 'UPDATE',
-        payload: value
-      });
-      if (onChange) onChange(value);
-    },
-    onClose: () => setOpenPicker(false),
-    showTimePicker: showTimePicker,
-    minDate: minDate,
-    maxDate: maxDate
-  }, void 0);
+    };
+
+    return jsx(DatePicker, {
+      advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
+        options: advancePickerOptions,
+        disabled: disabled,
+        optionHandler: value => {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate(value, undefined)
+          });
+          if (onChange) onChange(advancePickerDate(value, undefined));
+          setOpenPicker(false);
+        }
+      }, void 0) : {
+        advanceView
+      }),
+      type: showRangeControl ? DATE_RANGE_PICKER : type,
+      disabled: disabled,
+      date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
+      selected: selectedDate,
+      isMultiDatePicker: type !== SINGLE_PICKER || showRangeControl,
+      onChange: handleDatePickerChange,
+      onClose: () => setOpenPicker(false),
+      showTimePicker: showTimePicker,
+      minDate: minDate,
+      maxDate: maxDate
+    }, void 0);
+  };
 
   return !isMobile ? jsxs(Popover, Object.assign({
     open: openPicker,
@@ -17200,7 +17257,7 @@ function InputDatePicker({
       css: css
     }, {
       children: jsx(ConditionalWrapper, Object.assign({
-        condition: inputType === 'range_control',
+        condition: showRangeControl,
         wrapper: children => jsx(ContainerDateRangePicker, Object.assign({
           disabled: disabled,
           readOnly: readOnly,
@@ -17212,12 +17269,12 @@ function InputDatePicker({
       }, {
         children: renderInputGroup()
       }), void 0)
-    }), void 0) : jsx(Box, Object.assign({
-      css: css
-    }, {
-      children: jsx(ConditionalWrapper, Object.assign({
-        condition: inputType === 'range_control',
-        wrapper: children => jsx(ContainerDateRangePicker, Object.assign({
+    }), void 0) : jsx(ConditionalWrapper, Object.assign({
+      condition: showRangeControl,
+      wrapper: children => jsx(Box, Object.assign({
+        css: css
+      }, {
+        children: jsx(ContainerDateRangePicker, Object.assign({
           disabled: disabled,
           readOnly: readOnly,
           isInvalid: isInvalid,
@@ -17225,11 +17282,15 @@ function InputDatePicker({
         }, {
           children: children
         }), void 0)
-      }, {
-        children: jsx(PopoverTrigger, {
-          children: renderInputGroup()
-        }, void 0)
       }), void 0)
+    }, {
+      children: jsx(PopoverTrigger, {
+        children: showRangeControl ? renderInputGroup() : jsx(Box, Object.assign({
+          css: css
+        }, {
+          children: renderInputGroup()
+        }), void 0)
+      }, void 0)
     }), void 0), jsx(PopoverContent, {
       children: renderDatePicker()
     }, void 0)]
@@ -17238,7 +17299,7 @@ function InputDatePicker({
       css: css
     }, {
       children: jsx(ConditionalWrapper, Object.assign({
-        condition: inputType === 'range_control',
+        condition: showRangeControl,
         wrapper: children => jsx(ContainerDateRangePicker, Object.assign({
           disabled: disabled,
           readOnly: readOnly,
@@ -18291,8 +18352,10 @@ const defaultFetchDataParams = {
 const stickyPositionStyling = column => {
   if (column.stickyPosition) {
     return column.sticky === 'left' ? {
+      position: 'sticky',
       left: `${column.stickyPosition}px !important`
     } : {
+      position: 'sticky',
       right: `${column.stickyPosition}px !important`
     };
   }
@@ -18730,15 +18793,20 @@ function Table({
                 }), void 0), row.isExpanded ? subRowCells.map((cell, index) => jsxs(TableRow$3, Object.assign({
                   subRow: true
                 }, {
-                  children: [leftAddOnCells.map((_, index) => jsx("td", {}, index)), jsxs(React.Fragment, {
+                  children: [leftAddOnCells.map((_, index) => jsx("td", {
+                    style: {
+                      backgroundColor: colors$4.bgGray
+                    }
+                  }, index)), jsxs(React.Fragment, {
                     children: [jsx(TableCell$3, Object.assign({
                       subCell: true,
                       colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                       headerSubCell: true,
-                      css: {
+                      css: Object.assign({
                         paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
-                        paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`
-                      }
+                        paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`,
+                        backgroundColor: '$bgGray'
+                      }, stickyPositionStyling(cell.column))
                     }, {
                       children: jsx(Paragraph, Object.assign({
                         paragraph: "shortContentBold"
@@ -24537,7 +24605,7 @@ const Device = props => {
               }, void 0), jsx(Box, Object.assign({
                 css: {
                   position: 'absolute',
-                  top: '10%',
+                  top: '7%',
                   left: '5%',
                   right: '5%'
                 }
@@ -24566,8 +24634,8 @@ const Device = props => {
                           fontWeight: 400,
                           fontSize: 14,
                           borderRadius: 50,
-                          height: 30,
-                          width: 30,
+                          height: 32,
+                          width: 32,
                           color: '$textWhite',
                           backgroundColor: '$bgGreen',
                           justifyContent: 'center',
@@ -27853,7 +27921,7 @@ const Navigation = props => {
           lineNumber: 149,
           columnNumber: 50
         }
-      }), !isComplete && /*#__PURE__*/React__default.createElement(Flex$1, {
+      }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default.createElement(Flex$1, {
         justify: "center",
         align: "center",
         css: {
@@ -33399,4 +33467,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };

package/index.umd.js

@@ -16743,6 +16743,7 @@
   var DEFAULT = 'default';
   var SINGLE_PICKER = 'single';
   var RANGE_PICKER = 'range';
+  var DATE_RANGE_PICKER = 'range_picker';
   var ADVANCE_PICKER = 'advance';
   var RANGE_CONTROL = 'range_control';
   var WEEKLY = 'weekly';
@@ -16831,6 +16832,7 @@
 
   var CalendarRangePicker = function CalendarRangePicker(_a) {
     var isMultiDatePicker = _a.isMultiDatePicker,
+        isRangeControl = _a.isRangeControl,
         onChange = _a.onChange,
         onClose = _a.onClose,
         advanceView = _a.advanceView,
@@ -16838,7 +16840,7 @@
         disabled = _a.disabled,
         minDate = _a.minDate,
         maxDate = _a.maxDate,
-        props = __rest(_a, ["isMultiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled", "minDate", "maxDate"]);
+        props = __rest(_a, ["isMultiDatePicker", "isRangeControl", "onChange", "onClose", "advanceView", "selected", "disabled", "minDate", "maxDate"]);
 
     var today = new Date();
     var prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
@@ -16863,6 +16865,11 @@
     }, [selected]);
 
     var onDateSelected = function onDateSelected(selectedDate) {
+      if (isRangeControl) {
+        onChange === null || onChange === void 0 ? void 0 : onChange([selectedDate.date]);
+        onClose();
+      }
+
       if (!dateValue.length || dateValue.length === 2) {
         setDateValue([selectedDate.date]);
       } else {
@@ -16918,21 +16925,32 @@
     var type = props.type,
         otherProps = __rest(props, ["type"]);
 
-    if (type !== SINGLE_PICKER) {
-      return jsxRuntime.jsx(CalendarRangePicker, __assign({}, otherProps), void 0);
+    var isDateRangePicker = type === DATE_RANGE_PICKER;
+
+    if (type !== SINGLE_PICKER || isDateRangePicker) {
+      return jsxRuntime.jsx(CalendarRangePicker, __assign({}, otherProps, {
+        isRangeControl: isDateRangePicker
+      }), void 0);
     }
 
     return jsxRuntime.jsx(CalendarPicker, __assign({}, otherProps), void 0);
   };
 
+  moment__default["default"].updateLocale('id', {
+    week: {
+      dow: 1
+    }
+  });
   var UPDATE_PICKER = 'UPDATE';
   var TODAY = 'TODAY';
   var YESTERDAY = 'YESTERDAY';
   var LAST_7_DAYS = 'LAST_7_DAYS';
   var LAST_WEEK = 'LAST_WEEK';
   var PREV_WEEK = 'PREV_WEEK';
+  var RANGE_WEEK = 'RANGE_WEEK';
   var NEXT_WEEK = 'NEXT_WEEK';
   var PREV_MONTH = 'PREV_MONTH';
+  var RANGE_MONTH = 'RANGE_MONTH';
   var NEXT_MONTH = 'NEXT_MONTH';
   var THIS_WEEK = 'THIS_WEEK';
   var LAST_MONTH = 'LAST_MONTH';
@@ -17105,6 +17123,14 @@
           return [startThisWeek, endThisWeek];
         }
 
+      case RANGE_WEEK:
+        {
+          var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]);
+          var startThisWeek = currentDate.startOf('week').toDate();
+          var endThisWeek = currentDate.endOf('week').toDate();
+          return [startThisWeek, endThisWeek];
+        }
+
       case PREV_WEEK:
         {
           var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
@@ -17113,6 +17139,14 @@
           return [startThisWeek, endThisWeek];
         }
 
+      case RANGE_MONTH:
+        {
+          var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]);
+          var startThisMonth = currentDate.startOf('month').toDate();
+          var endThisMonth = currentDate.endOf('month').toDate();
+          return [startThisMonth, endThisMonth];
+        }
+
       case NEXT_MONTH:
         {
           var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
@@ -17323,14 +17357,13 @@
   function InputDatePicker(_a) {
     var _b = _a.type,
         type = _b === void 0 ? SINGLE_PICKER : _b,
-        _c = _a.inputType,
-        inputType = _c === void 0 ? DEFAULT : _c,
-        _d = _a.rangeControl,
-        rangeControl = _d === void 0 ? WEEKLY : _d,
-        _e = _a.placeholder,
-        placeholder = _e === void 0 ? 'Pilih Tanggal' : _e,
-        _f = _a.size,
-        size = _f === void 0 ? 'sm' : _f,
+        showRangeControl = _a.showRangeControl,
+        _c = _a.rangePickerType,
+        rangePickerType = _c === void 0 ? WEEKLY : _c,
+        _d = _a.placeholder,
+        placeholder = _d === void 0 ? 'Pilih Tanggal' : _d,
+        _e = _a.size,
+        size = _e === void 0 ? 'sm' : _e,
         disabled = _a.disabled,
         onChange = _a.onChange,
         defaultDateValue = _a.defaultValue,
@@ -17338,8 +17371,8 @@
         defaultDate = _a.defaultDate,
         date = _a.date,
         advanceView = _a.advanceView,
-        _g = _a.placement,
-        placement = _g === void 0 ? 'bottom-start' : _g,
+        _f = _a.placement,
+        placement = _f === void 0 ? 'bottom-start' : _f,
         css = _a.css,
         showTimePicker = _a.showTimePicker,
         minDate = _a.minDate,
@@ -17347,14 +17380,15 @@
         readOnly = _a.readOnly,
         isInvalid = _a.isInvalid;
 
-    var _h = React.useState(date || dateValue),
-        value = _h[0],
-        setValue = _h[1];
+    var _g = React.useState(date || dateValue),
+        value = _g[0],
+        setValue = _g[1];
 
-    var _j = React.useState(defaultDate || defaultDateValue),
-        defaultValue = _j[0],
-        setDefaultValue = _j[1];
+    var _h = React.useState(defaultDate || defaultDateValue),
+        defaultValue = _h[0],
+        setDefaultValue = _h[1];
 
+    console.log(placement);
     React.useEffect(function () {
       setValue(date || dateValue);
     }, [date, dateValue]);
@@ -17362,15 +17396,15 @@
       setDefaultValue(defaultDate || defaultDateValue);
     }, [defaultDate, defaultDateValue]);
 
-    var _k = React.useReducer(pickerReducer, {
+    var _j = React.useReducer(pickerReducer, {
       selectedDate: defaultValue !== null && defaultValue !== void 0 ? defaultValue : value
     }),
-        selectedDate = _k[0].selectedDate,
-        dispatch = _k[1];
+        selectedDate = _j[0].selectedDate,
+        dispatch = _j[1];
 
-    var _l = React.useState(false),
-        openPicker = _l[0],
-        setOpenPicker = _l[1];
+    var _k = React.useState(false),
+        openPicker = _k[0],
+        setOpenPicker = _k[1];
 
     React.useEffect(function () {
       if (value) {
@@ -17390,24 +17424,26 @@
 
     function handleRangeChange(type) {
       if (selectedDate && !disabled && !readOnly && !isInvalid) {
-        var actionType = rangeControl === 'monthly' ? 'MONTH' : 'WEEK';
+        var actionType = rangePickerType === 'monthly' ? 'MONTH' : 'WEEK';
 
         if (type === 'prev') {
           dispatch({
             type: 'UPDATE',
             payload: advancePickerDate('PREV_' + actionType, selectedDate)
           });
+          onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('PREV_' + actionType, selectedDate));
         } else {
           dispatch({
             type: 'UPDATE',
             payload: advancePickerDate('NEXT_' + actionType, selectedDate)
           });
+          onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('NEXT_' + actionType, selectedDate));
         }
       }
     }
 
     var renderInputGroup = function renderInputGroup() {
-      if (inputType === DEFAULT) {
+      if (!showRangeControl) {
         return jsxRuntime.jsxs(InputGroup, __assign({
           disabled: disabled,
           readOnly: readOnly,
@@ -17439,6 +17475,30 @@
     };
 
     var renderDatePicker = function renderDatePicker() {
+      var handleDatePickerChange = function handleDatePickerChange(value) {
+        if (showRangeControl || type === 'range_picker') {
+          if (rangePickerType === 'monthly') {
+            dispatch({
+              type: 'UPDATE',
+              payload: advancePickerDate('RANGE_MONTH', value)
+            });
+            onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_MONTH', value));
+          } else {
+            dispatch({
+              type: 'UPDATE',
+              payload: advancePickerDate('RANGE_WEEK', value)
+            });
+            onChange === null || onChange === void 0 ? void 0 : onChange(advancePickerDate('RANGE_WEEK', value));
+          }
+        } else {
+          dispatch({
+            type: 'UPDATE',
+            payload: value
+          });
+          onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        }
+      };
+
       return jsxRuntime.jsx(DatePicker, {
         advanceView: type === ADVANCE_PICKER && (!advanceView ? jsxRuntime.jsx(AdvancedOption, {
           options: advancePickerOptions,
@@ -17454,18 +17514,12 @@
         }, void 0) : {
           advanceView: advanceView
         }),
-        type: inputType === RANGE_CONTROL ? ADVANCE_PICKER : type,
+        type: showRangeControl ? DATE_RANGE_PICKER : type,
         disabled: disabled,
         date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
         selected: selectedDate,
-        isMultiDatePicker: type !== SINGLE_PICKER || inputType === 'range_control',
-        onChange: function (value) {
-          dispatch({
-            type: 'UPDATE',
-            payload: value
-          });
-          if (onChange) onChange(value);
-        },
+        isMultiDatePicker: type !== SINGLE_PICKER || showRangeControl,
+        onChange: handleDatePickerChange,
         onClose: function () {
           return setOpenPicker(false);
         },
@@ -17484,7 +17538,7 @@
         css: css
       }, {
         children: jsxRuntime.jsx(ConditionalWrapper, __assign({
-          condition: inputType === 'range_control',
+          condition: showRangeControl,
           wrapper: function (children) {
             return jsxRuntime.jsx(ContainerDateRangePicker, __assign({
               disabled: disabled,
@@ -17498,26 +17552,30 @@
         }, {
           children: renderInputGroup()
         }), void 0)
-      }), void 0) : jsxRuntime.jsx(Box, __assign({
-        css: css
-      }, {
-        children: jsxRuntime.jsx(ConditionalWrapper, __assign({
-          condition: inputType === 'range_control',
-          wrapper: function (children) {
-            return jsxRuntime.jsx(ContainerDateRangePicker, __assign({
+      }), void 0) : jsxRuntime.jsx(ConditionalWrapper, __assign({
+        condition: showRangeControl,
+        wrapper: function (children) {
+          return jsxRuntime.jsx(Box, __assign({
+            css: css
+          }, {
+            children: jsxRuntime.jsx(ContainerDateRangePicker, __assign({
               disabled: disabled,
               readOnly: readOnly,
               isInvalid: isInvalid,
               onRangeChange: handleRangeChange
             }, {
               children: children
-            }), void 0);
-          }
-        }, {
-          children: jsxRuntime.jsx(PopoverTrigger, {
+            }), void 0)
+          }), void 0);
+        }
+      }, {
+        children: jsxRuntime.jsx(PopoverTrigger, {
+          children: showRangeControl ? renderInputGroup() : jsxRuntime.jsx(Box, __assign({
+            css: css
+          }, {
             children: renderInputGroup()
-          }, void 0)
-        }), void 0)
+          }), void 0)
+        }, void 0)
       }), void 0), jsxRuntime.jsx(PopoverContent, {
         children: renderDatePicker()
       }, void 0)]
@@ -17526,7 +17584,7 @@
         css: css
       }, {
         children: jsxRuntime.jsx(ConditionalWrapper, __assign({
-          condition: inputType === 'range_control',
+          condition: showRangeControl,
           wrapper: function (children) {
             return jsxRuntime.jsx(ContainerDateRangePicker, __assign({
               disabled: disabled,
@@ -18588,8 +18646,10 @@
   var stickyPositionStyling = function stickyPositionStyling(column) {
     if (column.stickyPosition) {
       return column.sticky === 'left' ? {
+        position: 'sticky',
         left: "".concat(column.stickyPosition, "px !important")
       } : {
+        position: 'sticky',
         right: "".concat(column.stickyPosition, "px !important")
       };
     }
@@ -19084,16 +19144,21 @@
                       subRow: true
                     }, {
                       children: [leftAddOnCells.map(function (_, index) {
-                        return jsxRuntime.jsx("td", {}, index);
+                        return jsxRuntime.jsx("td", {
+                          style: {
+                            backgroundColor: colors$4.bgGray
+                          }
+                        }, index);
                       }), jsxRuntime.jsxs(React__namespace.Fragment, {
                         children: [jsxRuntime.jsx(TableCell$3, __assign({
                           subCell: true,
                           colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
                           headerSubCell: true,
-                          css: {
+                          css: __assign({
                             paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
-                            paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important")
-                          }
+                            paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important"),
+                            backgroundColor: '$bgGray'
+                          }, stickyPositionStyling(cell.column))
                         }, {
                           children: jsxRuntime.jsx(Paragraph, __assign({
                             paragraph: "shortContentBold"
@@ -24949,7 +25014,7 @@
                 }, void 0), jsxRuntime.jsx(Box, __assign({
                   css: {
                     position: 'absolute',
-                    top: '10%',
+                    top: '7%',
                     left: '5%',
                     right: '5%'
                   }
@@ -24978,8 +25043,8 @@
                             fontWeight: 400,
                             fontSize: 14,
                             borderRadius: 50,
-                            height: 30,
-                            width: 30,
+                            height: 32,
+                            width: 32,
                             color: '$textWhite',
                             backgroundColor: '$bgGreen',
                             justifyContent: 'center',
@@ -28265,7 +28330,7 @@
             lineNumber: 149,
             columnNumber: 50
           }
-        }), !isComplete && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+        }), (!isComplete || hideCheckedIcon) && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
           justify: "center",
           align: "center",
           css: {
@@ -33993,6 +34058,7 @@
   exports.ContextMenuItem = ContextMenuItem;
   exports.ContextMenuSeparator = ContextMenuSeparator;
   exports.ContextMenuTrigger = ContextMenuTrigger;
+  exports.DATE_RANGE_PICKER = DATE_RANGE_PICKER;
   exports.DEFAULT = DEFAULT;
   exports.DateColumn = DateColumn;
   exports.DatePicker = DatePicker;
@@ -34109,7 +34175,9 @@
   exports.Progress = Progress$1;
   exports.ProgressIndicator = ProgressIndicator;
   exports.RANGE_CONTROL = RANGE_CONTROL;
+  exports.RANGE_MONTH = RANGE_MONTH;
   exports.RANGE_PICKER = RANGE_PICKER;
+  exports.RANGE_WEEK = RANGE_WEEK;
   exports.ResendOTP = ResendOTP;
   exports.RightSlot = RightSlot;
   exports.RowExpanderColumn = rowExpanderColumn;

package/package.json

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