@majoo-ui/react 1.61.0-rc.4 → 1.61.0-rc.5

package/components/table/Table.d.ts

@@ -1285,10 +1285,24 @@ export interface TableProps {
      * Additional id which is not clickable and has no context menu
      */
     additionalExceptionIds?: string[];
+    /**
+     * Additional props for set manual expanded row column
+     * Example:<br/>
+     * {
+     *   '8192389219289': true,
+     *   '2130912039281': true,
+     *   '2130912039382': true
+     * }
+     */
+    expanded?: object;
     /**
      * Callback fired when the expanded rows are updated.
      */
-    onExpand?: (expanded: object) => void;
+    onExpandedChange?: (expanded: object) => void;
+    /**
+     * Additional props for autoResetExpanded
+     */
+    autoResetExpanded?: boolean;
     /**
      * Additional id table for unique identifier each table <br />
      * if id exist, column in the header can be customize to show in table <br />
@@ -1313,7 +1327,7 @@ export interface TableProps {
      */
     autoResetExpanded?: boolean;
 }
-export declare function Table({ columns, data: rawData, keyId, pageIndex: controlledPageIndex, totalPage, totalData, fetchData, hideDataInfo, rowsPerPageOptions, emptyDataMessage, customEmptyDataProps: emptyDataProps, isLoading, css, headerCss, hideHeader, onSelectedChange, isInfiniteScroll, hasMoreItems, rowLimit, cellAlign, selectedIds, rowGroup, decoration, hiddenColumns, columnOrder, customRowsStyle, isMobileLayout, showDuplicatedData, onRowClick, hidePagination, searchQuery, additionalExceptionIds, onExpand, id, onColumnChange, virtualized, withoutLimit, additionalHeader, outerContainerCss, autoResetExpanded, }: TableProps): JSX.Element;
+export declare function Table({ columns, data: rawData, keyId, pageIndex: controlledPageIndex, totalPage, totalData, fetchData, hideDataInfo, rowsPerPageOptions, emptyDataMessage, customEmptyDataProps: emptyDataProps, isLoading, css, headerCss, hideHeader, onSelectedChange, isInfiniteScroll, hasMoreItems, rowLimit, cellAlign, selectedIds, rowGroup, decoration, hiddenColumns, columnOrder, customRowsStyle, isMobileLayout, showDuplicatedData, onRowClick, hidePagination, searchQuery, additionalExceptionIds, expanded: controlledExpanded, onExpandedChange, id, onColumnChange, virtualized, withoutLimit, additionalHeader, outerContainerCss, autoResetExpanded, }: TableProps): JSX.Element;
 export interface TableColumnProps {
     /**
      * Required if accessor is a function<br/>

package/index.esm.js

@@ -23888,7 +23888,8 @@ function Table({
   hidePagination = false,
   searchQuery,
   additionalExceptionIds = [],
-  onExpand,
+  expanded: controlledExpanded = {},
+  onExpandedChange,
   id = null,
   onColumnChange,
   virtualized = true,
@@ -23923,18 +23924,27 @@ function Table({
         selectedRowIds: selectedIds
       });
     }
+    if (controlledExpanded) {
+      Object.assign(initialState, {
+        expanded: controlledExpanded
+      });
+    }
     return Object.keys(initialState).length > 0 ? initialState : undefined;
   };
   const instance = useTable({
     columns,
     data: useMemo(() => formattingData(rawData, rowGroup), [rawData, rowGroup]),
     initialState: getInitialState(),
+    state: {
+      expanded: controlledExpanded
+    },
     manualPagination: !!fetchData,
     manualSortBy: !!fetchData,
     defaultCanSort: true,
     pageCount: totalPage || Math.ceil(totalData / limit),
     autoResetSortBy: false,
     autoResetExpanded,
+    onExpandedChange,
     autoResetPage: false,
     autoResetSelectedRows: false,
     getRowId: showDuplicatedData ? undefined : row => row[keyId] || JSON.stringify(row)
@@ -24179,8 +24189,8 @@ function Table({
       firstUpdate.current = false;
       return;
     }
-    onExpand === null || onExpand === void 0 ? void 0 : onExpand(expanded);
-  }, [expanded, onExpand]);
+    onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(expanded);
+  }, [expanded, onExpandedChange]);
   useEffect(() => {
     if (hiddenColumns) setHiddenColumns(hiddenColumns);
   }, [hiddenColumns]);

package/index.umd.js

@@ -24260,42 +24260,44 @@
       searchQuery = _a.searchQuery,
       _t = _a.additionalExceptionIds,
       additionalExceptionIds = _t === void 0 ? [] : _t,
-      onExpand = _a.onExpand,
-      _u = _a.id,
-      id = _u === void 0 ? null : _u,
+      _u = _a.expanded,
+      controlledExpanded = _u === void 0 ? {} : _u,
+      onExpandedChange = _a.onExpandedChange,
+      _v = _a.id,
+      id = _v === void 0 ? null : _v,
       onColumnChange = _a.onColumnChange,
-      _v = _a.virtualized,
-      virtualized = _v === void 0 ? true : _v,
-      _w = _a.withoutLimit,
-      withoutLimit = _w === void 0 ? false : _w,
+      _w = _a.virtualized,
+      virtualized = _w === void 0 ? true : _w,
+      _x = _a.withoutLimit,
+      withoutLimit = _x === void 0 ? false : _x,
       additionalHeader = _a.additionalHeader,
       outerContainerCss = _a.outerContainerCss,
-      _x = _a.autoResetExpanded,
-      autoResetExpanded = _x === void 0 ? true : _x;
-    var _y = React.useState(false),
-      openMenu = _y[0],
-      setOpen = _y[1];
-    var _z = React.useState(rowLimit),
-      limit = _z[0],
-      setLimit = _z[1];
-    var _0 = React.useState({}),
-      dataRow = _0[0],
-      setDataRow = _0[1];
-    var _1 = React.useState('start'),
-      tableScrollPosition = _1[0],
-      setTableScrollPosition = _1[1];
-    var _2 = React.useState(0),
-      scrollAreaWidth = _2[0],
-      setScrollAreaWidth = _2[1];
-    var _3 = React.useState(selectedIds ? Object.keys(selectedIds) : []),
-      stateSelectedRowIds = _3[0],
-      setStateSelectedRowIds = _3[1];
-    var _4 = useLocalStorageState("menu:".concat(id), []),
-      filterHeader = _4[0],
-      setFilterHeader = _4[1];
-    var _5 = React.useState([]),
-      filteredHeader = _5[0],
-      setFilteredHeader = _5[1];
+      _y = _a.autoResetExpanded,
+      autoResetExpanded = _y === void 0 ? true : _y;
+    var _z = React.useState(false),
+      openMenu = _z[0],
+      setOpen = _z[1];
+    var _0 = React.useState(rowLimit),
+      limit = _0[0],
+      setLimit = _0[1];
+    var _1 = React.useState({}),
+      dataRow = _1[0],
+      setDataRow = _1[1];
+    var _2 = React.useState('start'),
+      tableScrollPosition = _2[0],
+      setTableScrollPosition = _2[1];
+    var _3 = React.useState(0),
+      scrollAreaWidth = _3[0],
+      setScrollAreaWidth = _3[1];
+    var _4 = React.useState(selectedIds ? Object.keys(selectedIds) : []),
+      stateSelectedRowIds = _4[0],
+      setStateSelectedRowIds = _4[1];
+    var _5 = useLocalStorageState("menu:".concat(id), []),
+      filterHeader = _5[0],
+      setFilterHeader = _5[1];
+    var _6 = React.useState([]),
+      filteredHeader = _6[0],
+      setFilteredHeader = _6[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);
@@ -24311,6 +24313,11 @@
           selectedRowIds: selectedIds
         });
       }
+      if (controlledExpanded) {
+        Object.assign(initialState, {
+          expanded: controlledExpanded
+        });
+      }
       return Object.keys(initialState).length > 0 ? initialState : undefined;
     };
     var instance = reactTable.useTable({
@@ -24319,12 +24326,16 @@
         return formattingData(rawData, rowGroup);
       }, [rawData, rowGroup]),
       initialState: getInitialState(),
+      state: {
+        expanded: controlledExpanded
+      },
       manualPagination: !!fetchData,
       manualSortBy: !!fetchData,
       defaultCanSort: true,
       pageCount: totalPage || Math.ceil(totalData / limit),
       autoResetSortBy: false,
       autoResetExpanded: autoResetExpanded,
+      onExpandedChange: onExpandedChange,
       autoResetPage: false,
       autoResetSelectedRows: false,
       getRowId: showDuplicatedData ? undefined : function (row) {
@@ -24341,12 +24352,12 @@
       setPageSize = instance.setPageSize,
       toggleRowSelected = instance.toggleRowSelected,
       toggleAllRowsSelected = instance.toggleAllRowsSelected,
-      _6 = instance.state,
-      pageIndex = _6.pageIndex,
-      pageSize = _6.pageSize,
-      sortBy = _6.sortBy,
-      selectedRowIds = _6.selectedRowIds,
-      expanded = _6.expanded,
+      _7 = instance.state,
+      pageIndex = _7.pageIndex,
+      pageSize = _7.pageSize,
+      sortBy = _7.sortBy,
+      selectedRowIds = _7.selectedRowIds,
+      expanded = _7.expanded,
       setHiddenColumns = instance.setHiddenColumns,
       setColumnOrder = instance.setColumnOrder;
     var scrollerRef = React.useRef(null);
@@ -24592,8 +24603,8 @@
         firstUpdate.current = false;
         return;
       }
-      onExpand === null || onExpand === void 0 ? void 0 : onExpand(expanded);
-    }, [expanded, onExpand]);
+      onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(expanded);
+    }, [expanded, onExpandedChange]);
     React.useEffect(function () {
       if (hiddenColumns) setHiddenColumns(hiddenColumns);
     }, [hiddenColumns]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.61.0-rc.4",
+  "version": "1.61.0-rc.5",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",