@majoo-ui/react 1.54.21 → 1.55.1

package/components/datePicker/index.d.ts

@@ -1,5 +1,6 @@
 export * from './InputDatePicker';
 export * from './DatePicker';
+export * from './CustomDatePicker';
 export * from './AdvancedOption';
 export * from './state/reducer';
 export * from './timePicker';

package/components/form/components/InputResourceList/InputResourceList.d.ts

@@ -15,6 +15,7 @@ interface IInputResourceListProps {
     counterFooterText: string;
     isLoading: boolean;
     enabledItems?: string[];
+    emptyDataMessage?: string;
     value?: IResource[];
     fetchData?(props: {
         query?: string;
@@ -26,5 +27,5 @@ interface IInputResourceListProps {
     title?: string;
     hideSelectAll?: boolean;
 }
-declare function InputResourceList({ data, disabled, onItemCheck, onItemUncheck, searchPlaceholder, counterFooterText, isLoading, enabledItems, value, fetchData, onQueryChange, css, defaultSort, title, hideSelectAll }: IInputResourceListProps): JSX.Element;
+declare function InputResourceList({ data, disabled, onItemCheck, onItemUncheck, searchPlaceholder, counterFooterText, isLoading, enabledItems, emptyDataMessage, value, fetchData, onQueryChange, css, defaultSort, title, hideSelectAll, }: IInputResourceListProps): JSX.Element;
 export default InputResourceList;

package/components/table/Table.d.ts

@@ -1123,6 +1123,10 @@ export interface TableProps {
      * Total amount of the data.
      */
     totalData?: number;
+    /**
+     * Total amount of the page.
+     */
+    totalPage?: number;
     /**
      * Function executed when pagination or sorter is changed.<br/>
      * interface FetchDataParams { <br/>
@@ -1235,7 +1239,7 @@ export interface TableProps {
     showDuplicatedData?: boolean;
     onRowClick?: (record: Row, index: number) => void;
 }
-export declare function Table({ columns, data: rawData, keyId, pageIndex: controlledPageIndex, totalData, fetchData, hideDataInfo, rowsPerPageOptions, emptyDataMessage, customEmptyDataProps, isLoading, css, headerCss, onSelectedChange, isInfiniteScroll, hasMoreItems, rowLimit, cellAlign, selectedIds, rowGroup, hiddenColumns, columnOrder, customRowsStyle, isMobileLayout, showDuplicatedData, onRowClick, }: TableProps): JSX.Element;
+export declare function Table({ columns, data: rawData, keyId, pageIndex: controlledPageIndex, totalPage, totalData, fetchData, hideDataInfo, rowsPerPageOptions, emptyDataMessage, customEmptyDataProps, isLoading, css, headerCss, onSelectedChange, isInfiniteScroll, hasMoreItems, rowLimit, cellAlign, selectedIds, rowGroup, hiddenColumns, columnOrder, customRowsStyle, isMobileLayout, showDuplicatedData, onRowClick, }: TableProps): JSX.Element;
 export interface TableColumnProps {
     /**
      * Required if accessor is a function<br/>

package/index.esm.js

@@ -3,7 +3,7 @@ import React__default, { useState, createContext, useContext, useEffect, useRef,
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, ChevronUpOutline, ChevronDownOutline, CirclePlusOutline, MinusOutline, PlusOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ChevronLeftOutline, ChevronRightOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, ChevronUpOutline, ChevronDownOutline, CirclePlusOutline, SortingOutline, MinusOutline, PlusOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ChevronLeftOutline, ChevronRightOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Portal } from '@majoo-ui/helpers';
@@ -10645,15 +10645,10 @@ InputCreatable.defaultProps = {
   value: ''
 };
 
-const SortingIcon = styled('div', {
-  marginTop: 1,
+const SortingIcon = styled(Flex$1, {
   cursor: 'pointer',
-  '&::after': {
-    size: '16px',
-    content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E")`,
-    margin: '0 $spacing-02 $spacing-01 0',
-    opacity: 1
-  }
+  alignItems: 'center',
+  justifyContent: 'center'
 });
 
 function InputResourceList({
@@ -10665,6 +10660,7 @@ function InputResourceList({
   counterFooterText = 'kategori dipilih',
   isLoading = false,
   enabledItems,
+  emptyDataMessage,
   value,
   fetchData,
   onQueryChange,
@@ -10852,23 +10848,31 @@ function InputResourceList({
       disabled: disabled
     }, void 0), defaultSort && jsxs(Flex$1, Object.assign({
       align: "center",
-      gap: 4,
+      gap: 3,
       css: {
         paddingLeft: !hideSelectAll ? 16 : 0,
-        marginTop: '$spacing-04'
+        marginTop: '$spacing-05'
       }
     }, {
       children: [!hideSelectAll && jsx(InputCheckbox, {
         checked: (value === null || value === void 0 ? void 0 : value.length) === (data === null || data === void 0 ? void 0 : data.length),
         indeterminate: Boolean((value === null || value === void 0 ? void 0 : value.length) && (value === null || value === void 0 ? void 0 : value.length) < (data === null || data === void 0 ? void 0 : data.length)),
-        onCheckedChange: toggleCheckAll
-      }, void 0), jsx(Paragraph, Object.assign({
-        paragraph: "shortContentBold"
+        onCheckedChange: toggleCheckAll,
+        css: {
+          marginRight: '$spacing-02'
+        }
+      }, void 0), jsx(Heading, Object.assign({
+        heading: "headerTable"
       }, {
-        children: title || 'DATA TITLE'
-      }), void 0), jsx(SortingIcon, {
+        children: title || 'Urutkan'
+      }), void 0), jsx(SortingIcon, Object.assign({
         onClick: toggleSort
-      }, void 0)]
+      }, {
+        children: jsx(SortingOutline, {
+          size: 16,
+          color: colors$4.iconSecondary
+        }, void 0)
+      }), void 0)]
     }), void 0), isLoading && jsx(Flex$1, Object.assign({
       justify: "center",
       align: "center",
@@ -10906,10 +10910,12 @@ function InputResourceList({
           width: '100%'
         }
       }, {
-        children: jsx(Text$1, Object.assign({
-          variant: "caption"
+        children: jsx(Paragraph, Object.assign({
+          paragraph: "shortContentRegular",
+          align: "center",
+          color: "secondary"
         }, {
-          children: "Tidak ada data"
+          children: emptyDataMessage || 'Tidak ada data'
         }), void 0)
       }), void 0), jsx(ConditionalWrapper, Object.assign({
         condition: !!fetchData && data.length > 0,
@@ -17626,6 +17632,124 @@ function InputDatePicker({
   }, void 0);
 }
 
+function CustomDatePicker({
+  children,
+  type = SINGLE_PICKER,
+  disabled,
+  onChange,
+  defaultValue: defaultDateValue,
+  value: dateValue,
+  defaultDate,
+  date,
+  advanceView,
+  placement = 'bottom-start',
+  showTimePicker,
+  minDate,
+  maxDate,
+  allowReset,
+  sideOffset = 8
+}) {
+  const [value, setValue] = useState(date || dateValue);
+  const [defaultValue, setDefaultValue] = useState(defaultDate || defaultDateValue);
+  useEffect(() => {
+    setValue(date || dateValue);
+  }, [date, dateValue]);
+  useEffect(() => {
+    setDefaultValue(defaultDate || defaultDateValue);
+  }, [defaultDate, defaultDateValue]);
+  const [{
+    selectedDate
+  }, dispatch] = useReducer(pickerReducer, {
+    selectedDate: defaultValue !== null && defaultValue !== void 0 ? defaultValue : value
+  });
+  const [openPicker, setOpenPicker] = useState(false);
+  useEffect(() => {
+    if (value) {
+      dispatch({
+        type: UPDATE_PICKER,
+        payload: value
+      });
+    }
+  }, [value]);
+  const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
+
+  function handleOpenChange() {
+    if (!disabled) {
+      setOpenPicker(!openPicker);
+    }
+  }
+
+  const handleDatePickerChange = value => {
+    dispatch({
+      type: 'UPDATE',
+      payload: value
+    });
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  };
+
+  const renderDatePicker = () => {
+    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: 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,
+      onChange: handleDatePickerChange,
+      onClose: () => setOpenPicker(false),
+      showTimePicker: showTimePicker,
+      minDate: minDate,
+      maxDate: maxDate,
+      allowReset: allowReset
+    }, void 0);
+  };
+
+  return !isMobile ? jsxs(Popover, Object.assign({
+    open: openPicker,
+    onOpenChange: setOpenPicker,
+    placement: placement,
+    sideOffset: sideOffset
+  }, {
+    children: [jsx(PopoverTrigger, Object.assign({
+      disabled: disabled
+    }, {
+      children: children
+    }), void 0), jsx(PopoverContent, {
+      children: renderDatePicker()
+    }, void 0)]
+  }), void 0) : jsxs(Fragment, {
+    children: [/*#__PURE__*/React.cloneElement(children, Object.assign(Object.assign({}, children.props), {
+      onClick: handleOpenChange
+    })), jsx(Drawer, Object.assign({
+      open: openPicker,
+      onOpenChange: handleOpenChange,
+      side: "bottom"
+    }, {
+      children: jsx(DrawerContent, Object.assign({
+        css: {
+          position: 'fixed',
+          left: 0
+        }
+      }, {
+        children: renderDatePicker()
+      }), void 0)
+    }), void 0)]
+  }, void 0);
+}
+
 const removeUndefinedFields = obj => {
   let newObj = {};
   Object.keys(obj).forEach(key => {
@@ -18048,7 +18172,7 @@ function PaginationInfo(_ref) {
   }, `Ditampilkan ${(currentPage - 1) * selectedLimit + 1} - ${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`));
 }
 
-const _excluded$2 = ["limit", "currentPage", "totalData", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions"];
+const _excluded$2 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions"];
 var _jsxFileName$h = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/Pagination.js";
 
 function Pagination(_ref) {
@@ -18056,6 +18180,7 @@ function Pagination(_ref) {
     limit,
     currentPage,
     totalData,
+    totalPage,
     hideDataInfo,
     onLimitChange,
     onPageChange,
@@ -18063,9 +18188,9 @@ function Pagination(_ref) {
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-  const totalPages = Math.ceil(totalData / limit);
+  const totalPages = totalPage || Math.ceil(totalData / limit);
   const isMobile = useMediaQuery('(max-width: 700px)');
-  return !hideDataInfo || totalPages > 1 ? /*#__PURE__*/React__default.createElement(Flex$1, _extends({
+  return /*#__PURE__*/React__default.createElement(Flex$1, _extends({
     direction: isMobile ? 'columnReverse' : 'row',
     align: "center",
     justify: "between",
@@ -18074,7 +18199,7 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 21,
+      lineNumber: 22,
       columnNumber: 5
     }
   }), !hideDataInfo ? /*#__PURE__*/React__default.createElement(PaginationInfo, {
@@ -18086,14 +18211,14 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 23,
+      lineNumber: 24,
       columnNumber: 9
     }
   }) : /*#__PURE__*/React__default.createElement(Box, {
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 31,
+      lineNumber: 32,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(PaginationButton, {
@@ -18103,23 +18228,17 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 34,
+      lineNumber: 35,
       columnNumber: 7
     }
-  })) : /*#__PURE__*/React__default.createElement(Box, {
-    __self: this,
-    __source: {
-      fileName: _jsxFileName$h,
-      lineNumber: 37,
-      columnNumber: 5
-    }
-  });
+  }));
 }
 
 Pagination.propTypes = {
   limit: PropTypes.number,
   currentPage: PropTypes.number,
   totalData: PropTypes.number,
+  totalPage: PropTypes.number,
   hideDataInfo: PropTypes.bool,
   onLimitChange: PropTypes.func,
   onPageChange: PropTypes.func
@@ -18802,6 +18921,7 @@ function Table({
   data: rawData,
   keyId = 'id',
   pageIndex: controlledPageIndex = 0,
+  totalPage,
   totalData = 0,
   fetchData,
   hideDataInfo = false,
@@ -18855,7 +18975,7 @@ function Table({
     manualPagination: !!fetchData,
     manualSortBy: !!fetchData,
     defaultCanSort: true,
-    pageCount: Math.ceil(totalData / limit),
+    pageCount: totalPage || Math.ceil(totalData / limit),
     autoResetSortBy: false,
     autoResetExpanded: true,
     autoResetPage: false,
@@ -18899,6 +19019,7 @@ function Table({
     limit: pageSize,
     currentPage: pageIndex + 1,
     totalData: totalData,
+    totalPage: totalPage,
     onLimitChange: selectedItem => {
       if (selectedItem) {
         doFetchData(pageIndex, selectedItem);
@@ -34047,4 +34168,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, 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 };
+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, CustomDatePicker, 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

@@ -10780,15 +10780,10 @@
     value: ''
   };
 
-  var SortingIcon = styled('div', {
-    marginTop: 1,
+  var SortingIcon = styled(Flex$1, {
     cursor: 'pointer',
-    '&::after': {
-      size: '16px',
-      content: "url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E\")",
-      margin: '0 $spacing-02 $spacing-01 0',
-      opacity: 1
-    }
+    alignItems: 'center',
+    justifyContent: 'center'
   });
 
   function InputResourceList(_a) {
@@ -10804,6 +10799,7 @@
         _e = _a.isLoading,
         isLoading = _e === void 0 ? false : _e,
         enabledItems = _a.enabledItems,
+        emptyDataMessage = _a.emptyDataMessage,
         value = _a.value,
         fetchData = _a.fetchData,
         onQueryChange = _a.onQueryChange,
@@ -11016,23 +11012,31 @@
         disabled: disabled
       }, void 0), defaultSort && jsxRuntime.jsxs(Flex$1, __assign({
         align: "center",
-        gap: 4,
+        gap: 3,
         css: {
           paddingLeft: !hideSelectAll ? 16 : 0,
-          marginTop: '$spacing-04'
+          marginTop: '$spacing-05'
         }
       }, {
         children: [!hideSelectAll && jsxRuntime.jsx(InputCheckbox, {
           checked: (value === null || value === void 0 ? void 0 : value.length) === (data === null || data === void 0 ? void 0 : data.length),
           indeterminate: Boolean((value === null || value === void 0 ? void 0 : value.length) && (value === null || value === void 0 ? void 0 : value.length) < (data === null || data === void 0 ? void 0 : data.length)),
-          onCheckedChange: toggleCheckAll
-        }, void 0), jsxRuntime.jsx(Paragraph, __assign({
-          paragraph: "shortContentBold"
+          onCheckedChange: toggleCheckAll,
+          css: {
+            marginRight: '$spacing-02'
+          }
+        }, void 0), jsxRuntime.jsx(Heading, __assign({
+          heading: "headerTable"
         }, {
-          children: title || 'DATA TITLE'
-        }), void 0), jsxRuntime.jsx(SortingIcon, {
+          children: title || 'Urutkan'
+        }), void 0), jsxRuntime.jsx(SortingIcon, __assign({
           onClick: toggleSort
-        }, void 0)]
+        }, {
+          children: jsxRuntime.jsx(icons.SortingOutline, {
+            size: 16,
+            color: colors$4.iconSecondary
+          }, void 0)
+        }), void 0)]
       }), void 0), isLoading && jsxRuntime.jsx(Flex$1, __assign({
         justify: "center",
         align: "center",
@@ -11070,10 +11074,12 @@
             width: '100%'
           }
         }, {
-          children: jsxRuntime.jsx(Text$1, __assign({
-            variant: "caption"
+          children: jsxRuntime.jsx(Paragraph, __assign({
+            paragraph: "shortContentRegular",
+            align: "center",
+            color: "secondary"
           }, {
-            children: "Tidak ada data"
+            children: emptyDataMessage || 'Tidak ada data'
           }), void 0)
         }), void 0), jsxRuntime.jsx(ConditionalWrapper, __assign({
           condition: !!fetchData && data.length > 0,
@@ -17915,6 +17921,140 @@
     }, void 0);
   }
 
+  function CustomDatePicker(_a) {
+    var children = _a.children,
+        _b = _a.type,
+        type = _b === void 0 ? SINGLE_PICKER : _b,
+        disabled = _a.disabled,
+        onChange = _a.onChange,
+        defaultDateValue = _a.defaultValue,
+        dateValue = _a.value,
+        defaultDate = _a.defaultDate,
+        date = _a.date,
+        advanceView = _a.advanceView,
+        _c = _a.placement,
+        placement = _c === void 0 ? 'bottom-start' : _c,
+        showTimePicker = _a.showTimePicker,
+        minDate = _a.minDate,
+        maxDate = _a.maxDate,
+        allowReset = _a.allowReset,
+        _d = _a.sideOffset,
+        sideOffset = _d === void 0 ? 8 : _d;
+
+    var _e = React.useState(date || dateValue),
+        value = _e[0],
+        setValue = _e[1];
+
+    var _f = React.useState(defaultDate || defaultDateValue),
+        defaultValue = _f[0],
+        setDefaultValue = _f[1];
+
+    React.useEffect(function () {
+      setValue(date || dateValue);
+    }, [date, dateValue]);
+    React.useEffect(function () {
+      setDefaultValue(defaultDate || defaultDateValue);
+    }, [defaultDate, defaultDateValue]);
+
+    var _g = React.useReducer(pickerReducer, {
+      selectedDate: defaultValue !== null && defaultValue !== void 0 ? defaultValue : value
+    }),
+        selectedDate = _g[0].selectedDate,
+        dispatch = _g[1];
+
+    var _h = React.useState(false),
+        openPicker = _h[0],
+        setOpenPicker = _h[1];
+
+    React.useEffect(function () {
+      if (value) {
+        dispatch({
+          type: UPDATE_PICKER,
+          payload: value
+        });
+      }
+    }, [value]);
+    var isMobile = useMediaQuery("(max-width: ".concat(type === SINGLE_PICKER ? '480px' : '767px', ")"));
+
+    function handleOpenChange() {
+      if (!disabled) {
+        setOpenPicker(!openPicker);
+      }
+    }
+
+    var handleDatePickerChange = function handleDatePickerChange(value) {
+      dispatch({
+        type: 'UPDATE',
+        payload: value
+      });
+      onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+
+    var renderDatePicker = function renderDatePicker() {
+      return jsxRuntime.jsx(DatePicker, {
+        advanceView: type === ADVANCE_PICKER && (!advanceView ? jsxRuntime.jsx(AdvancedOption, {
+          options: advancePickerOptions,
+          disabled: disabled,
+          optionHandler: function (value) {
+            dispatch({
+              type: 'UPDATE',
+              payload: advancePickerDate(value, undefined)
+            });
+            if (onChange) onChange(advancePickerDate(value, undefined));
+            setOpenPicker(false);
+          }
+        }, void 0) : {
+          advanceView: advanceView
+        }),
+        type: 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,
+        onChange: handleDatePickerChange,
+        onClose: function () {
+          return setOpenPicker(false);
+        },
+        showTimePicker: showTimePicker,
+        minDate: minDate,
+        maxDate: maxDate,
+        allowReset: allowReset
+      }, void 0);
+    };
+
+    return !isMobile ? jsxRuntime.jsxs(Popover, __assign({
+      open: openPicker,
+      onOpenChange: setOpenPicker,
+      placement: placement,
+      sideOffset: sideOffset
+    }, {
+      children: [jsxRuntime.jsx(PopoverTrigger, __assign({
+        disabled: disabled
+      }, {
+        children: children
+      }), void 0), jsxRuntime.jsx(PopoverContent, {
+        children: renderDatePicker()
+      }, void 0)]
+    }), void 0) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/React__namespace.cloneElement(children, __assign(__assign({}, children.props), {
+        onClick: handleOpenChange
+      })), jsxRuntime.jsx(Drawer, __assign({
+        open: openPicker,
+        onOpenChange: handleOpenChange,
+        side: "bottom"
+      }, {
+        children: jsxRuntime.jsx(DrawerContent, __assign({
+          css: {
+            position: 'fixed',
+            left: 0
+          }
+        }, {
+          children: renderDatePicker()
+        }), void 0)
+      }), void 0)]
+    }, void 0);
+  }
+
   const removeUndefinedFields = obj => {
     let newObj = {};
     Object.keys(obj).forEach(key => {
@@ -18337,7 +18477,7 @@
     }, `Ditampilkan ${(currentPage - 1) * selectedLimit + 1} - ${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`));
   }
 
-  const _excluded$2 = ["limit", "currentPage", "totalData", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions"];
+  const _excluded$2 = ["limit", "currentPage", "totalData", "totalPage", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions"];
   var _jsxFileName$h = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/pagination/Pagination.js";
 
   function Pagination(_ref) {
@@ -18345,6 +18485,7 @@
       limit,
       currentPage,
       totalData,
+      totalPage,
       hideDataInfo,
       onLimitChange,
       onPageChange,
@@ -18352,9 +18493,9 @@
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-    const totalPages = Math.ceil(totalData / limit);
+    const totalPages = totalPage || Math.ceil(totalData / limit);
     const isMobile = useMediaQuery('(max-width: 700px)');
-    return !hideDataInfo || totalPages > 1 ? /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
       direction: isMobile ? 'columnReverse' : 'row',
       align: "center",
       justify: "between",
@@ -18363,7 +18504,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 21,
+        lineNumber: 22,
         columnNumber: 5
       }
     }), !hideDataInfo ? /*#__PURE__*/React__default["default"].createElement(PaginationInfo, {
@@ -18375,14 +18516,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 23,
+        lineNumber: 24,
         columnNumber: 9
       }
     }) : /*#__PURE__*/React__default["default"].createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 31,
+        lineNumber: 32,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
@@ -18392,23 +18533,17 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 34,
+        lineNumber: 35,
         columnNumber: 7
       }
-    })) : /*#__PURE__*/React__default["default"].createElement(Box, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$h,
-        lineNumber: 37,
-        columnNumber: 5
-      }
-    });
+    }));
   }
 
   Pagination.propTypes = {
     limit: PropTypes__default["default"].number,
     currentPage: PropTypes__default["default"].number,
     totalData: PropTypes__default["default"].number,
+    totalPage: PropTypes__default["default"].number,
     hideDataInfo: PropTypes__default["default"].bool,
     onLimitChange: PropTypes__default["default"].func,
     onPageChange: PropTypes__default["default"].func
@@ -19102,6 +19237,7 @@
         keyId = _b === void 0 ? 'id' : _b,
         _c = _a.pageIndex,
         controlledPageIndex = _c === void 0 ? 0 : _c,
+        totalPage = _a.totalPage,
         _d = _a.totalData,
         totalData = _d === void 0 ? 0 : _d,
         fetchData = _a.fetchData,
@@ -19177,7 +19313,7 @@
       manualPagination: !!fetchData,
       manualSortBy: !!fetchData,
       defaultCanSort: true,
-      pageCount: Math.ceil(totalData / limit),
+      pageCount: totalPage || Math.ceil(totalData / limit),
       autoResetSortBy: false,
       autoResetExpanded: true,
       autoResetPage: false,
@@ -19229,6 +19365,7 @@
         limit: pageSize,
         currentPage: pageIndex + 1,
         totalData: totalData,
+        totalPage: totalPage,
         onLimitChange: function (selectedItem) {
           if (selectedItem) {
             doFetchData(pageIndex, selectedItem);
@@ -34644,6 +34781,7 @@
   exports.ContextMenuItem = ContextMenuItem;
   exports.ContextMenuSeparator = ContextMenuSeparator;
   exports.ContextMenuTrigger = ContextMenuTrigger;
+  exports.CustomDatePicker = CustomDatePicker;
   exports.DATE_RANGE_PICKER = DATE_RANGE_PICKER;
   exports.DEFAULT = DEFAULT;
   exports.DateColumn = DateColumn;

package/package.json

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