@majoo-ui/react 1.55.32 → 1.55.33

package/components/table/MobileTable.d.ts

@@ -21,6 +21,7 @@ interface MobileTableProps {
     cellAlign?: 'top' | 'center' | 'bottom';
     renderContextMenu: () => JSX.Element;
     handleRowClick: (row: object, index: number) => void;
+    additionalExceptionIds: string[];
 }
 declare const MobileTable: React.ForwardRefExoticComponent<MobileTableProps & React.RefAttributes<HTMLDivElement>>;
 export default MobileTable;

package/components/table/Table.d.ts

@@ -1249,8 +1249,12 @@ export interface TableProps {
      * The search query to display inside the doodle
      */
     searchQuery?: string;
+    /**
+     * Additional id which is not clickable and has no context menu
+     */
+    additionalExceptionIds?: string[];
 }
-export declare function Table({ columns, data: rawData, keyId, pageIndex: controlledPageIndex, totalPage, totalData, fetchData, hideDataInfo, rowsPerPageOptions, emptyDataMessage, customEmptyDataProps: emptyDataProps, isLoading, css, headerCss, onSelectedChange, isInfiniteScroll, hasMoreItems, rowLimit, cellAlign, selectedIds, rowGroup, hiddenColumns, columnOrder, customRowsStyle, isMobileLayout, showDuplicatedData, onRowClick, hidePagination, searchQuery, }: TableProps): JSX.Element;
+export declare function Table({ columns, data: rawData, keyId, pageIndex: controlledPageIndex, totalPage, totalData, fetchData, hideDataInfo, rowsPerPageOptions, emptyDataMessage, customEmptyDataProps: emptyDataProps, isLoading, css, headerCss, onSelectedChange, isInfiniteScroll, hasMoreItems, rowLimit, cellAlign, selectedIds, rowGroup, hiddenColumns, columnOrder, customRowsStyle, isMobileLayout, showDuplicatedData, onRowClick, hidePagination, searchQuery, additionalExceptionIds }: TableProps): JSX.Element;
 export interface TableColumnProps {
     /**
      * Required if accessor is a function<br/>

package/index.esm.js

@@ -9707,7 +9707,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
-const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput"];
+const _excluded$c = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput"];
 var _jsxFileName$w = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
@@ -9944,6 +9944,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       placeholder,
       option,
       value,
+      defaultValue,
       size,
       disabled,
       onChange,
@@ -9975,6 +9976,12 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   const [selectedValue, setSelectedValue] = React__default.useState([]);
   const [inputValue, setInputValue] = React__default.useState('');
   const [showAllTags, setShowAllTags] = React__default.useState(false);
+  const [inputSelectValue, setInputSelectValue] = React__default.useState(defaultValue || []);
+  useEffect(() => {
+    if (value !== null && value !== void 0 && value.length) {
+      setInputSelectValue(value);
+    }
+  }, [value]);
   const sortItems = React__default.useCallback(() => {
     if (sortBy === 'id') {
       option.sort(function (a, b) {
@@ -10006,7 +10013,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       });
     }
   }, [sortBy, option]);
-  const sortValue = selectedValue.length > 0 && disabledOptions.length === 0 ? value.reduce((res, id, i, {
+  const sortValue = selectedValue.length > 0 && disabledOptions.length === 0 ? inputSelectValue.reduce((res, id, i, {
     [i + 1]: next
   }) => {
     let sortData = option.find(option => option.id === id);
@@ -10074,6 +10081,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     } else {
       if ((selected === null || selected === void 0 ? void 0 : selected.id) === 'counter') {
         setSelectedValue([]);
+        setInputSelectValue([]);
         onChange === null || onChange === void 0 ? void 0 : onChange([]);
         for (let i = 0; i < selectedValue.length; i++) {
           removeSelectedItem(selectedValue[i]);
@@ -10082,6 +10090,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
         const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
         removeSelectedItem(selected);
         setSelectedValue(filterItems);
+        setInputSelectValue(filterItems);
         if (selected.id !== '!all') {
           onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
         }
@@ -10123,6 +10132,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                     removeSelectedItem(item);
                   });
                   setSelectedValue([]);
+                  setInputSelectValue([]);
                   onChange === null || onChange === void 0 ? void 0 : onChange([]);
                 } else {
                   removeItem(selectedItem);
@@ -10137,10 +10147,12 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
                   itemIds.push(item.id);
                 });
                 setSelectedValue(itemIds);
+                setInputSelectValue(itemIds);
                 onChange === null || onChange === void 0 ? void 0 : onChange(itemIds.slice(1));
               } else {
                 addSelectedItem(selectedItem);
                 setSelectedValue([...selectedValue, selectedItem.id]);
+                setInputSelectValue([...selectedValue, selectedItem.id]);
                 const filteredSelectedValues = selectedValue.filter(val => val !== '!all');
                 onChange === null || onChange === void 0 ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
               }
@@ -10205,8 +10217,8 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, [disabledOptions, showSelectAll]);
   useEffect(() => {
-    setSelectedValue(items.length > 0 && value.length === items.length - 1 ? ['!all', ...value] : value);
-  }, [value, items]);
+    setSelectedValue(items.length > 0 && inputSelectValue.length === items.length - 1 ? ['!all', ...inputSelectValue] : inputSelectValue);
+  }, [inputSelectValue, items]);
   const toggleCollapsible = () => setShowAllTags(!showAllTags);
   return /*#__PURE__*/React__default.createElement(Wrapper$1, _extends({
     css: css
@@ -10214,7 +10226,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 538,
+      lineNumber: 555,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -10224,7 +10236,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 539,
+      lineNumber: 556,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -10239,7 +10251,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 540,
+      lineNumber: 557,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -10257,7 +10269,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 550,
+      lineNumber: 567,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -10270,7 +10282,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 557,
+      lineNumber: 574,
       columnNumber: 13
     }
   }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -10281,7 +10293,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 567,
+      lineNumber: 584,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -10289,7 +10301,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 572,
+      lineNumber: 589,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -10302,7 +10314,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 576,
+      lineNumber: 593,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$1, {
@@ -10310,7 +10322,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 582,
+      lineNumber: 599,
       columnNumber: 13
     }
   }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
@@ -10340,7 +10352,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 593,
+      lineNumber: 610,
       columnNumber: 19
     }
   }), selectedItem.name))), collapsible && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -10349,7 +10361,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 614,
+      lineNumber: 631,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -10359,14 +10371,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 615,
+      lineNumber: 632,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 616,
+      lineNumber: 633,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -10380,7 +10392,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 617,
+      lineNumber: 634,
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -10388,7 +10400,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 623,
+      lineNumber: 640,
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -10396,7 +10408,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 625,
+      lineNumber: 642,
       columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -10408,14 +10420,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 627,
+      lineNumber: 644,
       columnNumber: 21
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 631,
+      lineNumber: 648,
       columnNumber: 19
     }
   })), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -10426,7 +10438,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 633,
+      lineNumber: 650,
       columnNumber: 17
     }
   }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter3 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter3 === void 0 ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -10438,7 +10450,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 643,
+      lineNumber: 660,
       columnNumber: 11
     }
   }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter4 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter4 === void 0 ? void 0 : _selectedItems$filter4.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -10450,7 +10462,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 649,
+      lineNumber: 666,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -10459,7 +10471,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 654,
+      lineNumber: 671,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -10477,7 +10489,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 657,
+      lineNumber: 674,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -10490,7 +10502,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 670,
+      lineNumber: 687,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -10498,7 +10510,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 679,
+      lineNumber: 696,
       columnNumber: 25
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -10506,21 +10518,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 683,
+      lineNumber: 700,
       columnNumber: 27
     }
   }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 690,
+      lineNumber: 707,
       columnNumber: 25
     }
   }, "-") : /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 692,
+      lineNumber: 709,
       columnNumber: 25
     }
   })), /*#__PURE__*/React__default.createElement(Item$3, {
@@ -10530,7 +10542,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 695,
+      lineNumber: 712,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -10543,14 +10555,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 700,
+      lineNumber: 717,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 701,
+      lineNumber: 718,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10560,7 +10572,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 702,
+      lineNumber: 719,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -10572,7 +10584,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 703,
+      lineNumber: 720,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -10601,7 +10613,8 @@ InputSelectCheck.propTypes = {
   showCounter: PropTypes.bool,
   labelCounter: PropTypes.string,
   collapsible: PropTypes.bool,
-  toggleInput: PropTypes.bool
+  toggleInput: PropTypes.bool,
+  defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])
 };
 InputSelectCheck.defaultProps = {
   size: 'lg',
@@ -10617,7 +10630,8 @@ InputSelectCheck.defaultProps = {
   showSelectAll: true,
   showCounter: false,
   collapsible: true,
-  toggleInput: true
+  toggleInput: true,
+  defaultValue: []
 };
 
 var _jsxFileName$v = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
@@ -10654,7 +10668,8 @@ InputSelectTag.propTypes = {
   showCounter: PropTypes.bool,
   labelCounter: PropTypes.string,
   collapsible: PropTypes.bool,
-  toggleInput: PropTypes.bool
+  toggleInput: PropTypes.bool,
+  defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)])
 };
 InputSelectTag.defaultProps = {
   size: 'lg',
@@ -10669,7 +10684,8 @@ InputSelectTag.defaultProps = {
   sortBy: 'name',
   showCounter: false,
   collapsible: true,
-  toggleInput: true
+  toggleInput: true,
+  defaultValue: []
 };
 
 var _jsxFileName$u = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputCreatable/InputCreatable.js";
@@ -18350,7 +18366,8 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   customRowsStyle,
   cellAlign,
   renderContextMenu,
-  handleRowClick
+  handleRowClick,
+  additionalExceptionIds
 }, ref) => {
   const {
     t
@@ -18461,9 +18478,9 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
               css: customStyle
             }, row.getRowProps(), {
               children: row.cells.filter((cell, indexCell) => (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection').map(cell => {
-                var _a;
+                var _a, _b;
                 const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
-                const exceptionId = ['expander', 'selection', 'menu', 'eye'].includes(collId);
+                const exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
                 const renderCell = () => jsx(ConditionalWrapper, Object.assign({
                   condition: isContextMenu && !exceptionId,
                   wrapper: children => jsx(ContextMenuTrigger, Object.assign({
@@ -18962,7 +18979,8 @@ function Table({
   showDuplicatedData,
   onRowClick,
   hidePagination = false,
-  searchQuery
+  searchQuery,
+  additionalExceptionIds = []
 }) {
   const [limit, setLimit] = useState(rowLimit);
   const [dataRow, setDataRow] = useState({});
@@ -19150,15 +19168,25 @@ function Table({
     }
   }, [rawData]);
   useEffect(() => {
-    if (typeof selectedIds === 'object' && rawData.length > 0) {
-      const selectedIdsKeys = Object.keys(selectedIds);
-      if (selectedIdsKeys === null || selectedIdsKeys === void 0 ? void 0 : selectedIdsKeys.length) {
+    if (onSelectedChange) {
+      if (selectedIds && rawData.length > 0) {
+        const selectedIdsKeys = Object.keys(selectedIds);
         selectedIdsKeys.map(key => {
-          toggleRowSelected(key, selectedIds[key]);
+          toggleRowSelected(key, true);
           return key;
         });
-      } else {
-        toggleAllRowsSelected(false);
+      }
+    } else {
+      if (typeof selectedIds === 'object' && rawData.length > 0) {
+        const selectedIdsKeys = Object.keys(selectedIds);
+        if (selectedIdsKeys === null || selectedIdsKeys === void 0 ? void 0 : selectedIdsKeys.length) {
+          selectedIdsKeys.map(key => {
+            toggleRowSelected(key, selectedIds[key]);
+            return key;
+          });
+        } else {
+          toggleAllRowsSelected(false);
+        }
       }
     }
   }, [rawData, selectedIds]);
@@ -19270,9 +19298,9 @@ function Table({
                   css: customStyle
                 }, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
-                    var _a;
+                    var _a, _b;
                     const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
-                    const exceptionId = ['expander', 'selection', 'menu', 'eye'].includes(collId);
+                    const exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
                     return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                       css: Object.assign(Object.assign({
                         padding: !isContextMenu || exceptionId ? collId === 'expander' ? '20px 4px' : '20px 8px' : '',
@@ -19381,7 +19409,8 @@ function Table({
       customRowsStyle: customRowsStyle,
       cellAlign: cellAlign,
       renderContextMenu: renderContextMenu,
-      handleRowClick: handleRowClick
+      handleRowClick: handleRowClick,
+      additionalExceptionIds: additionalExceptionIds
     }, void 0)]
   }), void 0);
 }
@@ -28828,7 +28857,20 @@ function TableOfContent({
   function toggleCollapse() {
     setMobileCollapse(!mobileCollapse);
   }
-  return isMobile ? /*#__PURE__*/React__default.createElement(MobileContainer, {
+  return isMobile ? /*#__PURE__*/React__default.createElement(Box, {
+    css: {
+      background: '$white',
+      padding: '$spacing-05',
+      position: 'sticky',
+      top: 0
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 168,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(MobileContainer, {
     direction: "row",
     justify: "between",
     align: "center",
@@ -28837,8 +28879,8 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 168,
-      columnNumber: 5
+      lineNumber: 169,
+      columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
     activeId: activeId,
@@ -28849,8 +28891,8 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 169,
-      columnNumber: 7
+      lineNumber: 170,
+      columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
     css: {
@@ -28861,8 +28903,8 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 176,
-      columnNumber: 7
+      lineNumber: 177,
+      columnNumber: 9
     }
   }, mobileCollapse ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
     style: {
@@ -28871,8 +28913,8 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 178,
-      columnNumber: 11
+      lineNumber: 179,
+      columnNumber: 13
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
     style: {
@@ -28881,16 +28923,16 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 180,
-      columnNumber: 11
+      lineNumber: 181,
+      columnNumber: 13
     }
-  }))) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
+  })))) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
     direction: "row",
     css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 185,
+      lineNumber: 187,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledCard, {
@@ -28898,7 +28940,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 186,
+      lineNumber: 188,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
@@ -28909,7 +28951,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 187,
+      lineNumber: 189,
       columnNumber: 9
     }
   })));
@@ -28922,14 +28964,14 @@ const Page = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React__default
   __self: undefined,
   __source: {
     fileName: _jsxFileName$2,
-    lineNumber: 196,
+    lineNumber: 198,
     columnNumber: 3
   }
 }, /*#__PURE__*/React__default.createElement(ScrollSpy, _extends({}, props, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$2,
-    lineNumber: 197,
+    lineNumber: 199,
     columnNumber: 5
   }
 }))));

package/index.umd.js

@@ -9825,7 +9825,7 @@
     }
   }));
 
-  const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput"];
+  const _excluded$c = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput"];
   var _jsxFileName$w = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
   const Wrapper$1 = styled('div', {
     margin: 0,
@@ -10062,6 +10062,7 @@
         placeholder,
         option,
         value,
+        defaultValue,
         size,
         disabled,
         onChange,
@@ -10093,6 +10094,12 @@
     const [selectedValue, setSelectedValue] = React__default["default"].useState([]);
     const [inputValue, setInputValue] = React__default["default"].useState('');
     const [showAllTags, setShowAllTags] = React__default["default"].useState(false);
+    const [inputSelectValue, setInputSelectValue] = React__default["default"].useState(defaultValue || []);
+    React.useEffect(() => {
+      if (value !== null && value !== void 0 && value.length) {
+        setInputSelectValue(value);
+      }
+    }, [value]);
     const sortItems = React__default["default"].useCallback(() => {
       if (sortBy === 'id') {
         option.sort(function (a, b) {
@@ -10124,7 +10131,7 @@
         });
       }
     }, [sortBy, option]);
-    const sortValue = selectedValue.length > 0 && disabledOptions.length === 0 ? value.reduce((res, id, i, {
+    const sortValue = selectedValue.length > 0 && disabledOptions.length === 0 ? inputSelectValue.reduce((res, id, i, {
       [i + 1]: next
     }) => {
       let sortData = option.find(option => option.id === id);
@@ -10192,6 +10199,7 @@
       } else {
         if ((selected === null || selected === void 0 ? void 0 : selected.id) === 'counter') {
           setSelectedValue([]);
+          setInputSelectValue([]);
           onChange === null || onChange === void 0 ? void 0 : onChange([]);
           for (let i = 0; i < selectedValue.length; i++) {
             removeSelectedItem(selectedValue[i]);
@@ -10200,6 +10208,7 @@
           const filterItems = selectedValue.filter(val => val !== selected.id && val !== '!all');
           removeSelectedItem(selected);
           setSelectedValue(filterItems);
+          setInputSelectValue(filterItems);
           if (selected.id !== '!all') {
             onChange === null || onChange === void 0 ? void 0 : onChange(filterItems);
           }
@@ -10241,6 +10250,7 @@
                       removeSelectedItem(item);
                     });
                     setSelectedValue([]);
+                    setInputSelectValue([]);
                     onChange === null || onChange === void 0 ? void 0 : onChange([]);
                   } else {
                     removeItem(selectedItem);
@@ -10255,10 +10265,12 @@
                     itemIds.push(item.id);
                   });
                   setSelectedValue(itemIds);
+                  setInputSelectValue(itemIds);
                   onChange === null || onChange === void 0 ? void 0 : onChange(itemIds.slice(1));
                 } else {
                   addSelectedItem(selectedItem);
                   setSelectedValue([...selectedValue, selectedItem.id]);
+                  setInputSelectValue([...selectedValue, selectedItem.id]);
                   const filteredSelectedValues = selectedValue.filter(val => val !== '!all');
                   onChange === null || onChange === void 0 ? void 0 : onChange([...filteredSelectedValues, selectedItem.id]);
                 }
@@ -10323,8 +10335,8 @@
       }
     }, [disabledOptions, showSelectAll]);
     React.useEffect(() => {
-      setSelectedValue(items.length > 0 && value.length === items.length - 1 ? ['!all', ...value] : value);
-    }, [value, items]);
+      setSelectedValue(items.length > 0 && inputSelectValue.length === items.length - 1 ? ['!all', ...inputSelectValue] : inputSelectValue);
+    }, [inputSelectValue, items]);
     const toggleCollapsible = () => setShowAllTags(!showAllTags);
     return /*#__PURE__*/React__default["default"].createElement(Wrapper$1, _extends({
       css: css
@@ -10332,7 +10344,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 538,
+        lineNumber: 555,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -10342,7 +10354,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 539,
+        lineNumber: 556,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -10357,7 +10369,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 540,
+        lineNumber: 557,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -10375,7 +10387,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 550,
+        lineNumber: 567,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -10388,7 +10400,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 557,
+        lineNumber: 574,
         columnNumber: 13
       }
     }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -10399,7 +10411,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 567,
+        lineNumber: 584,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -10407,7 +10419,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 572,
+        lineNumber: 589,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -10420,7 +10432,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 576,
+        lineNumber: 593,
         columnNumber: 11
       }
     }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
@@ -10428,7 +10440,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 582,
+        lineNumber: 599,
         columnNumber: 13
       }
     }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
@@ -10458,7 +10470,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 593,
+        lineNumber: 610,
         columnNumber: 19
       }
     }), selectedItem.name))), collapsible && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -10467,7 +10479,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 614,
+        lineNumber: 631,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -10477,14 +10489,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 615,
+        lineNumber: 632,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 616,
+        lineNumber: 633,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -10498,7 +10510,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 617,
+        lineNumber: 634,
         columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
@@ -10506,7 +10518,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 623,
+        lineNumber: 640,
         columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
@@ -10514,7 +10526,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 625,
+        lineNumber: 642,
         columnNumber: 23
       }
     }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -10526,14 +10538,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 627,
+        lineNumber: 644,
         columnNumber: 21
       }
     }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 631,
+        lineNumber: 648,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -10544,7 +10556,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 633,
+        lineNumber: 650,
         columnNumber: 17
       }
     }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter3 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter3 === void 0 ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -10556,7 +10568,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 643,
+        lineNumber: 660,
         columnNumber: 11
       }
     }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter4 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter4 === void 0 ? void 0 : _selectedItems$filter4.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -10568,7 +10580,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 649,
+        lineNumber: 666,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -10577,7 +10589,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 654,
+        lineNumber: 671,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -10595,7 +10607,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 657,
+        lineNumber: 674,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -10608,7 +10620,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 670,
+        lineNumber: 687,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -10616,7 +10628,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 679,
+        lineNumber: 696,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -10624,21 +10636,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 683,
+        lineNumber: 700,
         columnNumber: 27
       }
     }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 690,
+        lineNumber: 707,
         columnNumber: 25
       }
     }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 692,
+        lineNumber: 709,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
@@ -10648,7 +10660,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 695,
+        lineNumber: 712,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -10661,14 +10673,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 700,
+        lineNumber: 717,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 701,
+        lineNumber: 718,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -10678,7 +10690,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 702,
+        lineNumber: 719,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -10690,7 +10702,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 703,
+        lineNumber: 720,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -10719,7 +10731,8 @@
     showCounter: PropTypes__default["default"].bool,
     labelCounter: PropTypes__default["default"].string,
     collapsible: PropTypes__default["default"].bool,
-    toggleInput: PropTypes__default["default"].bool
+    toggleInput: PropTypes__default["default"].bool,
+    defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)])
   };
   InputSelectCheck.defaultProps = {
     size: 'lg',
@@ -10735,7 +10748,8 @@
     showSelectAll: true,
     showCounter: false,
     collapsible: true,
-    toggleInput: true
+    toggleInput: true,
+    defaultValue: []
   };
 
   var _jsxFileName$v = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
@@ -10772,7 +10786,8 @@
     showCounter: PropTypes__default["default"].bool,
     labelCounter: PropTypes__default["default"].string,
     collapsible: PropTypes__default["default"].bool,
-    toggleInput: PropTypes__default["default"].bool
+    toggleInput: PropTypes__default["default"].bool,
+    defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)])
   };
   InputSelectTag.defaultProps = {
     size: 'lg',
@@ -10787,7 +10802,8 @@
     sortBy: 'name',
     showCounter: false,
     collapsible: true,
-    toggleInput: true
+    toggleInput: true,
+    defaultValue: []
   };
 
   var _jsxFileName$u = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputCreatable/InputCreatable.js";
@@ -18603,7 +18619,8 @@
       customRowsStyle = _a.customRowsStyle,
       cellAlign = _a.cellAlign,
       renderContextMenu = _a.renderContextMenu,
-      handleRowClick = _a.handleRowClick;
+      handleRowClick = _a.handleRowClick,
+      additionalExceptionIds = _a.additionalExceptionIds;
     var t = reactI18next.useTranslation('MajooUI/table').t;
     var getTableProps = instance.getTableProps,
       getTableBodyProps = instance.getTableBodyProps,
@@ -18715,9 +18732,9 @@
                 children: row.cells.filter(function (cell, indexCell) {
                   return (getIsMobileHeader() ? cell.column.isMobileHeader : indexCell === indexDefaultHeader) || cell.column.id === 'selection';
                 }).map(function (cell) {
-                  var _a;
+                  var _a, _b;
                   var collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
-                  var exceptionId = ['expander', 'selection', 'menu', 'eye'].includes(collId);
+                  var exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
                   var renderCell = function renderCell() {
                     return jsxRuntime.jsx(ConditionalWrapper, __assign({
                       condition: isContextMenu && !exceptionId,
@@ -19241,19 +19258,21 @@
       onRowClick = _a.onRowClick,
       _o = _a.hidePagination,
       hidePagination = _o === void 0 ? false : _o,
-      searchQuery = _a.searchQuery;
-    var _p = React.useState(rowLimit),
-      limit = _p[0],
-      setLimit = _p[1];
-    var _q = React.useState({}),
-      dataRow = _q[0],
-      setDataRow = _q[1];
-    var _r = React.useState('start'),
-      tableScrollPosition = _r[0],
-      setTableScrollPosition = _r[1];
-    var _s = React.useState(0),
-      scrollAreaWidth = _s[0],
-      setScrollAreaWidth = _s[1];
+      searchQuery = _a.searchQuery,
+      _p = _a.additionalExceptionIds,
+      additionalExceptionIds = _p === void 0 ? [] : _p;
+    var _q = React.useState(rowLimit),
+      limit = _q[0],
+      setLimit = _q[1];
+    var _r = React.useState({}),
+      dataRow = _r[0],
+      setDataRow = _r[1];
+    var _s = React.useState('start'),
+      tableScrollPosition = _s[0],
+      setTableScrollPosition = _s[1];
+    var _t = React.useState(0),
+      scrollAreaWidth = _t[0],
+      setScrollAreaWidth = _t[1];
     var t = reactI18next.useTranslation('MajooUI/table').t;
     var isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
     var customEmptyDataProps = searchQuery ? defaultEmptySearchProps(t, isMobile, searchQuery) : emptyDataProps || defaultEmptyDataProps(t, isMobile);
@@ -19300,11 +19319,11 @@
       setPageSize = instance.setPageSize,
       toggleRowSelected = instance.toggleRowSelected,
       toggleAllRowsSelected = instance.toggleAllRowsSelected,
-      _t = instance.state,
-      pageIndex = _t.pageIndex,
-      pageSize = _t.pageSize,
-      sortBy = _t.sortBy,
-      selectedRowIds = _t.selectedRowIds,
+      _u = instance.state,
+      pageIndex = _u.pageIndex,
+      pageSize = _u.pageSize,
+      sortBy = _u.sortBy,
+      selectedRowIds = _u.selectedRowIds,
       setHiddenColumns = instance.setHiddenColumns,
       setColumnOrder = instance.setColumnOrder;
     var doFetchData = function doFetchData(pageIndex, pageSize, sortAccessor, sortDirection) {
@@ -19449,15 +19468,25 @@
       }
     }, [rawData]);
     React.useEffect(function () {
-      if (typeof selectedIds === 'object' && rawData.length > 0) {
-        var selectedIdsKeys = Object.keys(selectedIds);
-        if (selectedIdsKeys === null || selectedIdsKeys === void 0 ? void 0 : selectedIdsKeys.length) {
+      if (onSelectedChange) {
+        if (selectedIds && rawData.length > 0) {
+          var selectedIdsKeys = Object.keys(selectedIds);
           selectedIdsKeys.map(function (key) {
-            toggleRowSelected(key, selectedIds[key]);
+            toggleRowSelected(key, true);
             return key;
           });
-        } else {
-          toggleAllRowsSelected(false);
+        }
+      } else {
+        if (typeof selectedIds === 'object' && rawData.length > 0) {
+          var selectedIdsKeys = Object.keys(selectedIds);
+          if (selectedIdsKeys === null || selectedIdsKeys === void 0 ? void 0 : selectedIdsKeys.length) {
+            selectedIdsKeys.map(function (key) {
+              toggleRowSelected(key, selectedIds[key]);
+              return key;
+            });
+          } else {
+            toggleAllRowsSelected(false);
+          }
         }
       }
     }, [rawData, selectedIds]);
@@ -19581,9 +19610,9 @@
                     children: row.cells.filter(function (cell) {
                       return !cell.column.isSubRow;
                     }).map(function (cell) {
-                      var _a;
+                      var _a, _b;
                       var collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
-                      var exceptionId = ['expander', 'selection', 'menu', 'eye'].includes(collId);
+                      var exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
                       return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                         css: __assign(__assign({
                           padding: !isContextMenu || exceptionId ? collId === 'expander' ? '20px 4px' : '20px 8px' : '',
@@ -19700,7 +19729,8 @@
         customRowsStyle: customRowsStyle,
         cellAlign: cellAlign,
         renderContextMenu: renderContextMenu,
-        handleRowClick: handleRowClick
+        handleRowClick: handleRowClick,
+        additionalExceptionIds: additionalExceptionIds
       }, void 0)]
     }), void 0);
   }
@@ -29190,7 +29220,20 @@
     function toggleCollapse() {
       setMobileCollapse(!mobileCollapse);
     }
-    return isMobile ? /*#__PURE__*/React__default["default"].createElement(MobileContainer, {
+    return isMobile ? /*#__PURE__*/React__default["default"].createElement(Box, {
+      css: {
+        background: '$white',
+        padding: '$spacing-05',
+        position: 'sticky',
+        top: 0
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 168,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(MobileContainer, {
       direction: "row",
       justify: "between",
       align: "center",
@@ -29199,8 +29242,8 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 168,
-        columnNumber: 5
+        lineNumber: 169,
+        columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
       activeId: activeId,
@@ -29211,8 +29254,8 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 169,
-        columnNumber: 7
+        lineNumber: 170,
+        columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box, {
       css: {
@@ -29223,8 +29266,8 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 176,
-        columnNumber: 7
+        lineNumber: 177,
+        columnNumber: 9
       }
     }, mobileCollapse ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
       style: {
@@ -29233,8 +29276,8 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 178,
-        columnNumber: 11
+        lineNumber: 179,
+        columnNumber: 13
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
       style: {
@@ -29243,16 +29286,16 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 180,
-        columnNumber: 11
+        lineNumber: 181,
+        columnNumber: 13
       }
-    }))) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
+    })))) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
       direction: "row",
       css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 185,
+        lineNumber: 187,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledCard, {
@@ -29260,7 +29303,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 186,
+        lineNumber: 188,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
@@ -29271,7 +29314,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 187,
+        lineNumber: 189,
         columnNumber: 9
       }
     })));
@@ -29284,14 +29327,14 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 196,
+      lineNumber: 198,
       columnNumber: 3
     }
   }, /*#__PURE__*/React__default["default"].createElement(ScrollSpy__default["default"], _extends({}, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 197,
+      lineNumber: 199,
       columnNumber: 5
     }
   }))));

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.55.32",
+  "version": "1.55.33",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",
-    "@majoo-ui/icons": "^1.38.13",
+    "@majoo-ui/icons": "^1.38.14",
     "@stitches/react": "^1.2.8",
     "@radix-ui/react-alert-dialog": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.0",