@majoo-ui/react 1.55.0 → 1.55.1

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,
@@ -18166,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) {
@@ -18174,6 +18180,7 @@ function Pagination(_ref) {
     limit,
     currentPage,
     totalData,
+    totalPage,
     hideDataInfo,
     onLimitChange,
     onPageChange,
@@ -18181,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",
@@ -18192,7 +18199,7 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 21,
+      lineNumber: 22,
       columnNumber: 5
     }
   }), !hideDataInfo ? /*#__PURE__*/React__default.createElement(PaginationInfo, {
@@ -18204,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, {
@@ -18221,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
@@ -18920,6 +18921,7 @@ function Table({
   data: rawData,
   keyId = 'id',
   pageIndex: controlledPageIndex = 0,
+  totalPage,
   totalData = 0,
   fetchData,
   hideDataInfo = false,
@@ -18973,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,
@@ -19017,6 +19019,7 @@ function Table({
     limit: pageSize,
     currentPage: pageIndex + 1,
     totalData: totalData,
+    totalPage: totalPage,
     onLimitChange: selectedItem => {
       if (selectedItem) {
         doFetchData(pageIndex, selectedItem);

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,
@@ -18471,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) {
@@ -18479,6 +18485,7 @@
       limit,
       currentPage,
       totalData,
+      totalPage,
       hideDataInfo,
       onLimitChange,
       onPageChange,
@@ -18486,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",
@@ -18497,7 +18504,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 21,
+        lineNumber: 22,
         columnNumber: 5
       }
     }), !hideDataInfo ? /*#__PURE__*/React__default["default"].createElement(PaginationInfo, {
@@ -18509,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, {
@@ -18526,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
@@ -19236,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,
@@ -19311,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,
@@ -19363,6 +19365,7 @@
         limit: pageSize,
         currentPage: pageIndex + 1,
         totalData: totalData,
+        totalPage: totalPage,
         onLimitChange: function (selectedItem) {
           if (selectedItem) {
             doFetchData(pageIndex, selectedItem);

package/package.json

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