@majoo-ui/react 1.54.16 → 1.54.18-rc.1

package/components/contentEditor/ContentEditor.d.ts

@@ -7,6 +7,10 @@ interface ContentEditorProps {
      * Additional css styles.
      */
     css?: CSS;
+    /**
+     * Disabled state ContentEditor.
+     */
+    disabled?: boolean;
     /**
      * Adjust editor height.
      */

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

@@ -23,6 +23,8 @@ interface IInputResourceListProps {
     onQueryChange?(query: string): void;
     css?: Stitches.CSS;
     defaultSort?: 'asc' | 'desc';
+    title?: string;
+    hideSelectAll?: boolean;
 }
-declare function InputResourceList({ data, disabled, onItemCheck, onItemUncheck, searchPlaceholder, counterFooterText, isLoading, enabledItems, value, fetchData, onQueryChange, css, defaultSort, }: IInputResourceListProps): JSX.Element;
+declare function InputResourceList({ data, disabled, onItemCheck, onItemUncheck, searchPlaceholder, counterFooterText, isLoading, enabledItems, value, fetchData, onQueryChange, css, defaultSort, title, hideSelectAll }: IInputResourceListProps): JSX.Element;
 export default InputResourceList;

package/components/table/Table.d.ts

@@ -97,7 +97,9 @@ export declare const TableContent: import("@stitches/react/types/styled-componen
         backgroundColor: string;
     };
 }>>;
-export declare const TableHead: import("@stitches/react/types/styled-component").StyledComponent<"thead", {}, {
+export declare const TableHead: import("@stitches/react/types/styled-component").StyledComponent<"thead", {
+    isInfiniteScroll?: boolean | "true" | undefined;
+}, {
     sm: "(min-width: 359px)";
     md: "(min-width: 767px)";
     lg: "(min-width: 1023px)";
@@ -194,9 +196,11 @@ export declare const TableHead: import("@stitches/react/types/styled-component")
     };
 }>>;
 export declare const TableHeaderCellContainer: import("@stitches/react/types/styled-component").StyledComponent<any, {
-    isSortedDesc?: boolean | "false" | "true" | undefined;
+    isSortedDesc?: boolean | "true" | "false" | undefined;
     unsortable?: boolean | "true" | undefined;
     isMobile?: boolean | "true" | undefined;
+    isToggleable?: boolean | "true" | undefined;
+    isToggled?: boolean | "true" | undefined;
 }, {
     sm: "(min-width: 359px)";
     md: "(min-width: 767px)";
@@ -1231,7 +1235,7 @@ export interface TableProps {
     showDuplicatedData?: boolean;
     onRowClick?: (record: Row, index: number) => void;
 }
-export declare function Table({ columns, data, 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, 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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, forwardRef, cloneElement, useLayoutEffect, useCallback, useReducer } from 'react';
+import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, forwardRef, cloneElement, useLayoutEffect, useCallback, useReducer, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
@@ -10669,7 +10669,9 @@ function InputResourceList({
   fetchData,
   onQueryChange,
   css,
-  defaultSort
+  defaultSort,
+  title,
+  hideSelectAll
 }) {
   const [checkedResources, setCheckedResources] = useState([]);
   const [query, setQuery] = useState();
@@ -10852,18 +10854,18 @@ function InputResourceList({
       align: "center",
       gap: 4,
       css: {
-        paddingLeft: 16,
+        paddingLeft: !hideSelectAll ? 16 : 0,
         marginTop: '$spacing-04'
       }
     }, {
-      children: [jsx(InputCheckbox, {
+      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"
       }, {
-        children: "DATA TITLE"
+        children: title || 'DATA TITLE'
       }), void 0), jsx(SortingIcon, {
         onClick: toggleSort
       }, void 0)]
@@ -12758,7 +12760,7 @@ ButtonGroupItem.defaultProps = {
   isToggle: true
 };
 
-const _excluded$7 = ["children"];
+const _excluded$7 = ["children", "variantIcon"];
 var _jsxFileName$o = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/notificationBadge/NotificationBadge.js";
 const NotificationBadgeRootStyle = styled('span', {
   position: 'relative',
@@ -12859,18 +12861,28 @@ const NotificationBadgeStyle = styled('span', {
 
 const NotificationBadge = _ref => {
   let {
-    children
+    children,
+    variantIcon
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
+  const getIcon = () => {
+    const isLeading = variantIcon === 'leading';
+    return {
+      max: isLeading ? '+99' : '99+',
+      min: isLeading ? -99 : '99-'
+    };
+  };
+
   const getValue = () => {
     let value = props == null ? void 0 : props.value;
+    const isTrailing = variantIcon === 'trailing';
 
     if (typeof value === 'number' || parseInt(value)) {
       if (Math.sign(value) === 1 || Math.sign(value) === 0) {
-        return value > 99 ? '+99' : value;
+        return value > 99 ? getIcon().max : value;
       } else {
-        return value < -99 ? -99 : value;
+        return value < -99 ? getIcon().min : isTrailing ? Math.abs(value) + '-' : value;
       }
     }
   };
@@ -12879,14 +12891,14 @@ const NotificationBadge = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$o,
-      lineNumber: 108,
+      lineNumber: 118,
       columnNumber: 5
     }
   }, children, /*#__PURE__*/React__default.createElement(NotificationBadgeStyle, _extends({}, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$o,
-      lineNumber: 110,
+      lineNumber: 120,
       columnNumber: 7
     }
   }), props.value && getValue()));
@@ -12896,6 +12908,7 @@ NotificationBadge.defaultProps = {
   anchorHorizontal: 'right',
   anchorVertical: 'top',
   variant: 'important',
+  variantIcon: 'trailing',
   value: undefined,
   dot: false
 };
@@ -12903,6 +12916,7 @@ NotificationBadge.propTypes = {
   anchorHorizontal: PropTypes.oneOf(['left', 'right']),
   anchorVertical: PropTypes.oneOf(['top', 'bottom']),
   variant: PropTypes.oneOf(['info', 'important', 'warning', 'success', 'alpha']),
+  variantIcon: PropTypes.oneOf(['leading', 'trailing']),
   value: PropTypes.number,
   dot: PropTypes.bool
 };
@@ -17590,6 +17604,9 @@ const PrevNextButton = styled(Text$1, {
   variants: {
     isDisabled: {
       true: {
+        '&:hover': {
+          backgroundColor: 'transparent'
+        },
         cursor: 'default'
       }
     }
@@ -17617,7 +17634,7 @@ const PageButton = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 31,
+      lineNumber: 34,
       columnNumber: 5
     }
   }));
@@ -17638,7 +17655,9 @@ const PaginationButton = ({
 
   const inputPageRef = useRef();
   useEffect(() => {
-    inputPageRef.current.value = '';
+    if (inputPageRef.current) {
+      inputPageRef.current.value = '';
+    }
   }, [currentPage]);
   const debouncedGoToPage = useCallback(debounce(handleSelectPage, 1000), [totalPages]);
 
@@ -17693,7 +17712,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 101,
+      lineNumber: 106,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -17702,17 +17721,18 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 107,
+      lineNumber: 112,
       columnNumber: 7
     }
-  }, currentPage > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
+  }, (currentPage > 1 || totalPages === 1) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
+    type: "button",
     buttonType: "secondary",
     disabled: currentPage === 1,
     onClick: () => handleSelectPage(1),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 111,
+      lineNumber: 116,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowLeftOutline, {
@@ -17720,7 +17740,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 112,
+      lineNumber: 117,
       columnNumber: 17
     }
   })), /*#__PURE__*/React__default.createElement(PrevNextButton, {
@@ -17731,7 +17751,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 115,
+      lineNumber: 120,
       columnNumber: 13
     }
   }, "Sebelumnya")), generatePages().map((page, index) => {
@@ -17742,11 +17762,11 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 127,
+        lineNumber: 132,
         columnNumber: 13
       }
     }, page);
-  }), currentPage < totalPages && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PrevNextButton, {
+  }), (currentPage < totalPages || totalPages === 1) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PrevNextButton, {
     variant: "caption",
     isDisabled: currentPage === totalPages,
     color: currentPage === totalPages ? 'disable' : 'primary',
@@ -17754,17 +17774,18 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 138,
+      lineNumber: 143,
       columnNumber: 13
     }
   }, "Selanjutnya"), !isLg && /*#__PURE__*/React__default.createElement(IconButton, {
+    type: "button",
     buttonType: "secondary",
     disabled: currentPage === totalPages,
     onClick: () => handleSelectPage(totalPages),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 147,
+      lineNumber: 152,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(ArrowRightOutline, {
@@ -17772,10 +17793,10 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 152,
+      lineNumber: 158,
       columnNumber: 17
     }
-  })))), /*#__PURE__*/React__default.createElement(Separator$2, {
+  })))), totalPages > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Separator$2, {
     orientation: "vertical",
     css: {
       height: '100%',
@@ -17785,8 +17806,8 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 159,
-      columnNumber: 7
+      lineNumber: 169,
+      columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
     css: {
@@ -17798,8 +17819,8 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 168,
-      columnNumber: 7
+      lineNumber: 177,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "caption",
@@ -17811,8 +17832,8 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 169,
-      columnNumber: 9
+      lineNumber: 178,
+      columnNumber: 15
     }
   }, "Ke Halaman"), /*#__PURE__*/React__default.createElement(InputNumber, {
     ref: inputPageRef,
@@ -17838,10 +17859,10 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$j,
-      lineNumber: 172,
-      columnNumber: 9
+      lineNumber: 181,
+      columnNumber: 15
     }
-  })));
+  }))));
 };
 
 const _excluded$3 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
@@ -18029,21 +18050,21 @@ function Pagination(_ref) {
       lineNumber: 31,
       columnNumber: 9
     }
-  }), totalPages > 1 && /*#__PURE__*/React__default.createElement(PaginationButton, {
+  }), /*#__PURE__*/React__default.createElement(PaginationButton, {
     currentPage: currentPage,
     totalPages: totalPages,
     onSelect: onPageChange,
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 33,
-      columnNumber: 26
+      lineNumber: 34,
+      columnNumber: 7
     }
   })) : /*#__PURE__*/React__default.createElement(Box, {
     __self: this,
     __source: {
       fileName: _jsxFileName$h,
-      lineNumber: 36,
+      lineNumber: 37,
       columnNumber: 5
     }
   });
@@ -18273,11 +18294,15 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
             const headerRender = column.render('Header');
             return jsx(TableHeadCell$4, Object.assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
               title: 'Urutkan'
-            }) : {}), {
+            }) : {
+              onClick: column.onToggle
+            }), {
               children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
                 isMobile: true,
                 isSortedDesc: column.isSortedDesc,
-                unsortable: column.unsortable
+                unsortable: column.unsortable,
+                isToggleable: !!column.onToggle,
+                isToggled: column.isToggled
               }, {
                 children: jsx(TableHeadCellContent, Object.assign({
                   isMobile: true,
@@ -18425,7 +18450,14 @@ const TableHead$3 = styled('thead', {
   backgroundColor: '$bgWhite',
   boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
   borderBottom: '1pt solid $bgBorder',
-  color: '$textPrimary'
+  color: '$textPrimary',
+  variants: {
+    isInfiniteScroll: {
+      true: {
+        top: '-1px'
+      }
+    }
+  }
 });
 const TableHeadRow$3 = styled('tr');
 const TableHeadCell$3 = styled('th', {
@@ -18508,8 +18540,40 @@ const TableHeaderCellContainer = styled(Flex$1, {
         justifyContent: 'space-between',
         gap: 0
       }
+    },
+    isToggleable: {
+      true: {}
+    },
+    isToggled: {
+      true: {
+        '&::after': {
+          opacity: 1
+        }
+      }
     }
-  }
+  },
+  compoundVariants: [{
+    unsortable: true,
+    isToggleable: true,
+    css: {
+      cursor: 'pointer',
+      '@lg': {
+        '&:hover': {
+          '&::after': {
+            opacity: 1
+          }
+        }
+      }
+    }
+  }, {
+    isToggleable: true,
+    isMobile: true,
+    css: {
+      '&::after': {
+        opacity: 1
+      }
+    }
+  }]
 });
 const TableHeadCellContent = styled(Heading, {
   userSelect: 'none',
@@ -18648,6 +18712,7 @@ const stickyShadowStyling = (column, tableScrollPosition, scrollAreaWidth) => {
 
 const formattingData = (rawData, groupKey) => {
   if (groupKey) {
+    const modifiedData = [];
     rawData.forEach((item, index) => {
       if (item[groupKey] && item[groupKey].length > 0) {
         const newElement = item[groupKey].map((childItem, index) => Object.assign(Object.assign({}, childItem), {
@@ -18655,10 +18720,12 @@ const formattingData = (rawData, groupKey) => {
           parentOriginal: item,
           isBottomChild: index === item[groupKey].length - 1
         }));
-        rawData.splice(index, 1);
-        rawData.splice(index + 1, 0, ...newElement);
+        modifiedData.push(...newElement);
+      } else {
+        modifiedData.push(item);
       }
     });
+    return modifiedData;
   }
 
   return rawData;
@@ -18686,7 +18753,7 @@ const defaultEmptyDataProps = {
 };
 function Table({
   columns,
-  data,
+  data: rawData,
   keyId = 'id',
   pageIndex: controlledPageIndex = 0,
   totalData = 0,
@@ -18737,7 +18804,7 @@ function Table({
 
   const instance = useTable({
     columns,
-    data: formattingData(data, rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey),
+    data: useMemo(() => formattingData(rawData, rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey), [rawData, rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey]),
     initialState: getInitialState(),
     manualPagination: !!fetchData,
     manualSortBy: !!fetchData,
@@ -18808,7 +18875,7 @@ function Table({
   }, void 0);
 
   const renderInfiniteScrollWrapper = children => jsx(ConditionalWrapper, Object.assign({
-    condition: isInfiniteScroll && data.length > 0,
+    condition: isInfiniteScroll && rawData.length > 0,
     wrapper: children => jsx(InfiniteScroll, Object.assign({
       loadMore: _ => {
         if (!isLoading) doFetchData(controlledPageIndex + 1, rowLimit);
@@ -18897,29 +18964,29 @@ function Table({
     gotoPage(controlledPageIndex);
   }, [controlledPageIndex]);
   useEffect(() => {
-    if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
+    if (rawData && rawData.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
   }, [sortBy]);
   useMountedLayoutEffect(() => {
-    if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
+    if (rawData && rawData.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
   }, [selectedRowIds]);
   useEffect(() => {
     var _a;
 
-    if (isInfiniteScroll && data.length <= rowLimit) {
+    if (isInfiniteScroll && rawData.length <= rowLimit) {
       (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
         top: 0
       });
     }
-  }, [data]);
+  }, [rawData]);
   useEffect(() => {
-    if (selectedIds && data.length > 0) {
+    if (selectedIds && rawData.length > 0) {
       const selectedIdsKeys = Object.keys(selectedIds);
       selectedIdsKeys.map(key => {
         toggleRowSelected(key, true);
         return key;
       });
     }
-  }, [data, selectedIds]);
+  }, [rawData, selectedIds]);
   return jsxs(Box, Object.assign({
     css: {
       position: 'relative',
@@ -18964,7 +19031,8 @@ function Table({
       }, {
         children: [renderInfiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
           children: [jsx(TableHead$3, Object.assign({
-            css: headerCss
+            css: headerCss,
+            isInfiniteScroll: isInfiniteScroll
           }, {
             children: headerGroups.map(headerGroup => {
               const visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
@@ -18973,7 +19041,9 @@ function Table({
                   const headerRender = column.render('Header');
                   return jsx(TableHeadCell$3, Object.assign({}, column.getHeaderProps(props => [props, !column.unsortable ? column.getSortByToggleProps({
                     title: 'Urutkan'
-                  }) : {}, {
+                  }) : {
+                    onClick: column.onToggle
+                  }, {
                     style: {
                       width: column.colWidth,
                       maxWidth: column.colMaxWidth,
@@ -18984,7 +19054,9 @@ function Table({
                   }, {
                     children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
                       isSortedDesc: column.isSortedDesc,
-                      unsortable: column.unsortable
+                      unsortable: column.unsortable,
+                      isToggleable: !!column.onToggle,
+                      isToggled: column.isToggled
                     }, {
                       children: jsx(TableHeadCellContent, Object.assign({
                         heading: "headerTable"
@@ -25105,6 +25177,7 @@ const Device = props => {
     gap: "6"
   }, {
     children: [props.carousel && jsx(IconStyled, Object.assign({
+      type: "button",
       onClick: prevSlide,
       buttonType: "secondary"
     }, {
@@ -32113,7 +32186,49 @@ const Container$1 = styled('div', {
       '& > .wrapper-root > .editor-root': {
         height: value
       }
-    }), 1000)
+    }), 1000),
+    disabled: {
+      true: {
+        '& > .wrapper-root > .editor-root': {
+          backgroundColor: '$formDisable',
+          color: '$textDisable'
+        },
+        '& > .wrapper-root > .toolbar-root': {
+          backgroundColor: '$formDisable',
+          color: '$textDisable'
+        },
+        '& > .wrapper-root > .toolbar-root > div > .rdw-option-wrapper': {
+          backgroundColor: '$formDisable !important',
+          '& img': {
+            filter: 'contrast(0)'
+          }
+        },
+        '& > .wrapper-root > .toolbar-root > .rdw-dropdown-wrapper': {
+          backgroundColor: '$formDisable !important',
+          '& img': {
+            filter: 'contrast(0)'
+          },
+          '& a': {
+            pointerEvents: 'none'
+          },
+          '& > a > div': {
+            borderTop: '6px solid $textDisable'
+          }
+        },
+        '& > .wrapper-root > .toolbar-root > div > .rdw-dropdown-wrapper': {
+          backgroundColor: '$formDisable !important',
+          '& a': {
+            pointerEvents: 'none'
+          },
+          '& > a > span': {
+            color: '$textDisable'
+          },
+          '& > a > div': {
+            borderTop: '6px solid $textDisable'
+          }
+        }
+      }
+    }
   }
 });
 const MaxLengthText = styled('p', {
@@ -32140,7 +32255,8 @@ function ContentEditor(props) {
     toolbar,
     editorHeight,
     uploadCallback,
-    maxLength
+    maxLength,
+    disabled
   } = props;
   const [editorState, setEditorState] = useState(() => EditorState.createEmpty());
   useEffect(() => {
@@ -32226,7 +32342,8 @@ function ContentEditor(props) {
   };
   return jsxs(Container$1, Object.assign({
     css: css,
-    editorHeight: editorHeight
+    editorHeight: editorHeight,
+    disabled: disabled
   }, {
     children: [jsx(Editor, {
       wrapperClassName: "wrapper-root",
@@ -32234,7 +32351,8 @@ function ContentEditor(props) {
       toolbarClassName: "toolbar-root",
       editorState: editorState,
       onEditorStateChange: onEditorStateChange,
-      toolbar: toolbar ? toolbar(config) : config
+      toolbar: toolbar ? toolbar(config) : config,
+      readOnly: disabled
     }, void 0), maxLength && typeof maxLength === 'number' && jsx(MaxLengthText, Object.assign({
       warning: ((_b = (_a = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _a === void 0 ? void 0 : _a.getPlainText()) === null || _b === void 0 ? void 0 : _b.length) > maxLength
     }, {

package/index.umd.js

@@ -10808,7 +10808,9 @@
         fetchData = _a.fetchData,
         onQueryChange = _a.onQueryChange,
         css = _a.css,
-        defaultSort = _a.defaultSort;
+        defaultSort = _a.defaultSort,
+        title = _a.title,
+        hideSelectAll = _a.hideSelectAll;
 
     var _f = React.useState([]),
         checkedResources = _f[0],
@@ -11016,18 +11018,18 @@
         align: "center",
         gap: 4,
         css: {
-          paddingLeft: 16,
+          paddingLeft: !hideSelectAll ? 16 : 0,
           marginTop: '$spacing-04'
         }
       }, {
-        children: [jsxRuntime.jsx(InputCheckbox, {
+        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"
         }, {
-          children: "DATA TITLE"
+          children: title || 'DATA TITLE'
         }), void 0), jsxRuntime.jsx(SortingIcon, {
           onClick: toggleSort
         }, void 0)]
@@ -12932,7 +12934,7 @@
     isToggle: true
   };
 
-  const _excluded$7 = ["children"];
+  const _excluded$7 = ["children", "variantIcon"];
   var _jsxFileName$o = "/home/alfiantryp/Project/majoo-ui/packages/react/src/components/notificationBadge/NotificationBadge.js";
   const NotificationBadgeRootStyle = styled('span', {
     position: 'relative',
@@ -13033,18 +13035,28 @@
 
   const NotificationBadge = _ref => {
     let {
-      children
+      children,
+      variantIcon
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
+    const getIcon = () => {
+      const isLeading = variantIcon === 'leading';
+      return {
+        max: isLeading ? '+99' : '99+',
+        min: isLeading ? -99 : '99-'
+      };
+    };
+
     const getValue = () => {
       let value = props == null ? void 0 : props.value;
+      const isTrailing = variantIcon === 'trailing';
 
       if (typeof value === 'number' || parseInt(value)) {
         if (Math.sign(value) === 1 || Math.sign(value) === 0) {
-          return value > 99 ? '+99' : value;
+          return value > 99 ? getIcon().max : value;
         } else {
-          return value < -99 ? -99 : value;
+          return value < -99 ? getIcon().min : isTrailing ? Math.abs(value) + '-' : value;
         }
       }
     };
@@ -13053,14 +13065,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$o,
-        lineNumber: 108,
+        lineNumber: 118,
         columnNumber: 5
       }
     }, children, /*#__PURE__*/React__default["default"].createElement(NotificationBadgeStyle, _extends({}, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$o,
-        lineNumber: 110,
+        lineNumber: 120,
         columnNumber: 7
       }
     }), props.value && getValue()));
@@ -13070,6 +13082,7 @@
     anchorHorizontal: 'right',
     anchorVertical: 'top',
     variant: 'important',
+    variantIcon: 'trailing',
     value: undefined,
     dot: false
   };
@@ -13077,6 +13090,7 @@
     anchorHorizontal: PropTypes__default["default"].oneOf(['left', 'right']),
     anchorVertical: PropTypes__default["default"].oneOf(['top', 'bottom']),
     variant: PropTypes__default["default"].oneOf(['info', 'important', 'warning', 'success', 'alpha']),
+    variantIcon: PropTypes__default["default"].oneOf(['leading', 'trailing']),
     value: PropTypes__default["default"].number,
     dot: PropTypes__default["default"].bool
   };
@@ -17879,6 +17893,9 @@
     variants: {
       isDisabled: {
         true: {
+          '&:hover': {
+            backgroundColor: 'transparent'
+          },
           cursor: 'default'
         }
       }
@@ -17906,7 +17923,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 31,
+        lineNumber: 34,
         columnNumber: 5
       }
     }));
@@ -17927,7 +17944,9 @@
 
     const inputPageRef = React.useRef();
     React.useEffect(() => {
-      inputPageRef.current.value = '';
+      if (inputPageRef.current) {
+        inputPageRef.current.value = '';
+      }
     }, [currentPage]);
     const debouncedGoToPage = React.useCallback(debounce__default["default"](handleSelectPage, 1000), [totalPages]);
 
@@ -17982,7 +18001,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 101,
+        lineNumber: 106,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -17991,17 +18010,18 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 107,
+        lineNumber: 112,
         columnNumber: 7
       }
-    }, currentPage > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
+    }, (currentPage > 1 || totalPages === 1) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      type: "button",
       buttonType: "secondary",
       disabled: currentPage === 1,
       onClick: () => handleSelectPage(1),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 111,
+        lineNumber: 116,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
@@ -18009,7 +18029,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 112,
+        lineNumber: 117,
         columnNumber: 17
       }
     })), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
@@ -18020,7 +18040,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 115,
+        lineNumber: 120,
         columnNumber: 13
       }
     }, "Sebelumnya")), generatePages().map((page, index) => {
@@ -18031,11 +18051,11 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$j,
-          lineNumber: 127,
+          lineNumber: 132,
           columnNumber: 13
         }
       }, page);
-    }), currentPage < totalPages && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
+    }), (currentPage < totalPages || totalPages === 1) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
       variant: "caption",
       isDisabled: currentPage === totalPages,
       color: currentPage === totalPages ? 'disable' : 'primary',
@@ -18043,17 +18063,18 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 138,
+        lineNumber: 143,
         columnNumber: 13
       }
     }, "Selanjutnya"), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      type: "button",
       buttonType: "secondary",
       disabled: currentPage === totalPages,
       onClick: () => handleSelectPage(totalPages),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 147,
+        lineNumber: 152,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
@@ -18061,10 +18082,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 152,
+        lineNumber: 158,
         columnNumber: 17
       }
-    })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
+    })))), totalPages > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       orientation: "vertical",
       css: {
         height: '100%',
@@ -18074,8 +18095,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 159,
-        columnNumber: 7
+        lineNumber: 169,
+        columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
@@ -18087,8 +18108,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 168,
-        columnNumber: 7
+        lineNumber: 177,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
       variant: "caption",
@@ -18100,8 +18121,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 169,
-        columnNumber: 9
+        lineNumber: 178,
+        columnNumber: 15
       }
     }, "Ke Halaman"), /*#__PURE__*/React__default["default"].createElement(InputNumber, {
       ref: inputPageRef,
@@ -18127,10 +18148,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
-        lineNumber: 172,
-        columnNumber: 9
+        lineNumber: 181,
+        columnNumber: 15
       }
-    })));
+    }))));
   };
 
   const _excluded$3 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
@@ -18318,21 +18339,21 @@
         lineNumber: 31,
         columnNumber: 9
       }
-    }), totalPages > 1 && /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
+    }), /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
       currentPage: currentPage,
       totalPages: totalPages,
       onSelect: onPageChange,
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 33,
-        columnNumber: 26
+        lineNumber: 34,
+        columnNumber: 7
       }
     })) : /*#__PURE__*/React__default["default"].createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$h,
-        lineNumber: 36,
+        lineNumber: 37,
         columnNumber: 5
       }
     });
@@ -18560,11 +18581,15 @@
                 var headerRender = column.render('Header');
                 return jsxRuntime.jsx(TableHeadCell$4, __assign({}, column.getHeaderProps(!column.unsortable ? column.getSortByToggleProps({
                   title: 'Urutkan'
-                }) : {}), {
+                }) : {
+                  onClick: column.onToggle
+                }), {
                   children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
                     isMobile: true,
                     isSortedDesc: column.isSortedDesc,
-                    unsortable: column.unsortable
+                    unsortable: column.unsortable,
+                    isToggleable: !!column.onToggle,
+                    isToggled: column.isToggled
                   }, {
                     children: jsxRuntime.jsx(TableHeadCellContent, __assign({
                       isMobile: true,
@@ -18721,7 +18746,14 @@
     backgroundColor: '$bgWhite',
     boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
     borderBottom: '1pt solid $bgBorder',
-    color: '$textPrimary'
+    color: '$textPrimary',
+    variants: {
+      isInfiniteScroll: {
+        true: {
+          top: '-1px'
+        }
+      }
+    }
   });
   var TableHeadRow$3 = styled('tr');
   var TableHeadCell$3 = styled('th', {
@@ -18804,8 +18836,40 @@
           justifyContent: 'space-between',
           gap: 0
         }
+      },
+      isToggleable: {
+        true: {}
+      },
+      isToggled: {
+        true: {
+          '&::after': {
+            opacity: 1
+          }
+        }
       }
-    }
+    },
+    compoundVariants: [{
+      unsortable: true,
+      isToggleable: true,
+      css: {
+        cursor: 'pointer',
+        '@lg': {
+          '&:hover': {
+            '&::after': {
+              opacity: 1
+            }
+          }
+        }
+      }
+    }, {
+      isToggleable: true,
+      isMobile: true,
+      css: {
+        '&::after': {
+          opacity: 1
+        }
+      }
+    }]
   });
   var TableHeadCellContent = styled(Heading, {
     userSelect: 'none',
@@ -18944,6 +19008,7 @@
 
   var formattingData = function formattingData(rawData, groupKey) {
     if (groupKey) {
+      var modifiedData_1 = [];
       rawData.forEach(function (item, index) {
         if (item[groupKey] && item[groupKey].length > 0) {
           var newElement = item[groupKey].map(function (childItem, index) {
@@ -18953,10 +19018,12 @@
               isBottomChild: index === item[groupKey].length - 1
             });
           });
-          rawData.splice(index, 1);
-          rawData.splice.apply(rawData, __spreadArray([index + 1, 0], newElement, false));
+          modifiedData_1.push.apply(modifiedData_1, newElement);
+        } else {
+          modifiedData_1.push(item);
         }
       });
+      return modifiedData_1;
     }
 
     return rawData;
@@ -18984,7 +19051,7 @@
   };
   function Table(_a) {
     var columns = _a.columns,
-        data = _a.data,
+        rawData = _a.data,
         _b = _a.keyId,
         keyId = _b === void 0 ? 'id' : _b,
         _c = _a.pageIndex,
@@ -19057,7 +19124,9 @@
 
     var instance = reactTable.useTable({
       columns: columns,
-      data: formattingData(data, rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey),
+      data: React.useMemo(function () {
+        return formattingData(rawData, rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey);
+      }, [rawData, rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey]),
       initialState: getInitialState(),
       manualPagination: !!fetchData,
       manualSortBy: !!fetchData,
@@ -19138,7 +19207,7 @@
 
     var renderInfiniteScrollWrapper = function renderInfiniteScrollWrapper(children) {
       return jsxRuntime.jsx(ConditionalWrapper, __assign({
-        condition: isInfiniteScroll && data.length > 0,
+        condition: isInfiniteScroll && rawData.length > 0,
         wrapper: function (children) {
           return jsxRuntime.jsx(InfiniteScroll__default["default"], __assign({
             loadMore: function (_) {
@@ -19232,29 +19301,29 @@
       gotoPage(controlledPageIndex);
     }, [controlledPageIndex]);
     React.useEffect(function () {
-      if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
+      if (rawData && rawData.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
     }, [sortBy]);
     reactTable.useMountedLayoutEffect(function () {
-      if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
+      if (rawData && rawData.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
     }, [selectedRowIds]);
     React.useEffect(function () {
       var _a;
 
-      if (isInfiniteScroll && data.length <= rowLimit) {
+      if (isInfiniteScroll && rawData.length <= rowLimit) {
         (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
           top: 0
         });
       }
-    }, [data]);
+    }, [rawData]);
     React.useEffect(function () {
-      if (selectedIds && data.length > 0) {
+      if (selectedIds && rawData.length > 0) {
         var selectedIdsKeys = Object.keys(selectedIds);
         selectedIdsKeys.map(function (key) {
           toggleRowSelected(key, true);
           return key;
         });
       }
-    }, [data, selectedIds]);
+    }, [rawData, selectedIds]);
     return jsxRuntime.jsxs(Box, __assign({
       css: {
         position: 'relative',
@@ -19299,7 +19368,8 @@
         }, {
           children: [renderInfiniteScrollWrapper(jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
             children: [jsxRuntime.jsx(TableHead$3, __assign({
-              css: headerCss
+              css: headerCss,
+              isInfiniteScroll: isInfiniteScroll
             }, {
               children: headerGroups.map(function (headerGroup) {
                 var visibleHeaders = headerGroup.headers.filter(function (column) {
@@ -19311,7 +19381,9 @@
                     return jsxRuntime.jsx(TableHeadCell$3, __assign({}, column.getHeaderProps(function (props) {
                       return [props, !column.unsortable ? column.getSortByToggleProps({
                         title: 'Urutkan'
-                      }) : {}, {
+                      }) : {
+                        onClick: column.onToggle
+                      }, {
                         style: {
                           width: column.colWidth,
                           maxWidth: column.colMaxWidth,
@@ -19323,7 +19395,9 @@
                     }, {
                       children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
                         isSortedDesc: column.isSortedDesc,
-                        unsortable: column.unsortable
+                        unsortable: column.unsortable,
+                        isToggleable: !!column.onToggle,
+                        isToggled: column.isToggled
                       }, {
                         children: jsxRuntime.jsx(TableHeadCellContent, __assign({
                           heading: "headerTable"
@@ -25516,6 +25590,7 @@
       gap: "6"
     }, {
       children: [props.carousel && jsxRuntime.jsx(IconStyled, __assign({
+        type: "button",
         onClick: prevSlide,
         buttonType: "secondary"
       }, {
@@ -32661,7 +32736,49 @@
             height: value
           }
         };
-      }, 1000)
+      }, 1000),
+      disabled: {
+        true: {
+          '& > .wrapper-root > .editor-root': {
+            backgroundColor: '$formDisable',
+            color: '$textDisable'
+          },
+          '& > .wrapper-root > .toolbar-root': {
+            backgroundColor: '$formDisable',
+            color: '$textDisable'
+          },
+          '& > .wrapper-root > .toolbar-root > div > .rdw-option-wrapper': {
+            backgroundColor: '$formDisable !important',
+            '& img': {
+              filter: 'contrast(0)'
+            }
+          },
+          '& > .wrapper-root > .toolbar-root > .rdw-dropdown-wrapper': {
+            backgroundColor: '$formDisable !important',
+            '& img': {
+              filter: 'contrast(0)'
+            },
+            '& a': {
+              pointerEvents: 'none'
+            },
+            '& > a > div': {
+              borderTop: '6px solid $textDisable'
+            }
+          },
+          '& > .wrapper-root > .toolbar-root > div > .rdw-dropdown-wrapper': {
+            backgroundColor: '$formDisable !important',
+            '& a': {
+              pointerEvents: 'none'
+            },
+            '& > a > span': {
+              color: '$textDisable'
+            },
+            '& > a > div': {
+              borderTop: '6px solid $textDisable'
+            }
+          }
+        }
+      }
     }
   });
   var MaxLengthText = styled('p', {
@@ -32687,7 +32804,8 @@
         toolbar = props.toolbar,
         editorHeight = props.editorHeight,
         uploadCallback = props.uploadCallback,
-        maxLength = props.maxLength;
+        maxLength = props.maxLength,
+        disabled = props.disabled;
 
     var _e = React.useState(function () {
       return draftJs.EditorState.createEmpty();
@@ -32778,7 +32896,8 @@
     };
     return jsxRuntime.jsxs(Container$1, __assign({
       css: css,
-      editorHeight: editorHeight
+      editorHeight: editorHeight,
+      disabled: disabled
     }, {
       children: [jsxRuntime.jsx(reactDraftWysiwyg.Editor, {
         wrapperClassName: "wrapper-root",
@@ -32786,7 +32905,8 @@
         toolbarClassName: "toolbar-root",
         editorState: editorState,
         onEditorStateChange: onEditorStateChange,
-        toolbar: toolbar ? toolbar(config) : config
+        toolbar: toolbar ? toolbar(config) : config,
+        readOnly: disabled
       }, void 0), maxLength && typeof maxLength === 'number' && jsxRuntime.jsx(MaxLengthText, __assign({
         warning: ((_b = (_a = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _a === void 0 ? void 0 : _a.getPlainText()) === null || _b === void 0 ? void 0 : _b.length) > maxLength
       }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.54.16",
+  "version": "1.54.18-rc.1",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",