react-magma-dom 4.7.0-next.53 → 4.7.0-next.55

package/dist/components/TreeView/index.d.ts

@@ -4,3 +4,4 @@ export * from './useTreeItem';
 export * from './useTreeView';
 export * from './utils';
 export * from './types';
+export { TreeItemSelectedInterface, TreeViewApi } from './useTreeView';

package/dist/components/TreeView/useTreeView.d.ts

@@ -6,6 +6,8 @@ export interface TreeViewApi {
     selectItem({ itemId, checkedStatus, }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void;
     selectAll(): void;
     clearAll(): void;
+    showMore(): void;
+    showLess(): void;
 }
 export interface UseTreeViewProps {
     /**
@@ -73,6 +75,8 @@ export interface UseTreeViewProps {
      * selectItem({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void - action that allows to change item selection,
      * selectAll(): void - action that allows to select all items,
      * clearAll(): void - action that allows to unselect all items.
+     * showMore(): void - action that gets called when a tree has hidden items and they get expanded.
+     * showLess(): void - action that gets called when a tree has hidden items and they get collapsed.
      */
     apiRef?: React.MutableRefObject<TreeViewApi | undefined>;
     /**

package/dist/esm/index.js

@@ -28937,7 +28937,7 @@ function useTreeView(props) {
   }, [items, rawInitialExpandedItems]);
   var itemToFocus = useMemo(function () {
     var enabledItems = items.filter(function (item) {
-      return !(item != null && item.isDisabled);
+      return !item.isDisabled;
     });
     var firstItem = enabledItems[0];
     if (selectable === TreeViewSelectable.off) {
@@ -28956,7 +28956,12 @@ function useTreeView(props) {
   }, [items]);
   var prevSelectedItemsRef = useRef(null);
   var prevPreselectedItemsRef = useRef(preselectedItems);
+  var prevChildrenRef = useRef(children);
   var initializationRef = useRef(true);
+  // Used for showAll button
+  var _React$useState3 = useState(null),
+    itemsNeedUpdate = _React$useState3[0],
+    setItemsNeedUpdate = _React$useState3[1];
   useEffect(function () {
     if (isEqualArrays(prevPreselectedItemsRef.current, preselectedItems)) {
       return;
@@ -29063,20 +29068,13 @@ function useTreeView(props) {
           if ([TreeViewSelectable.single, TreeViewSelectable.single].includes(selectable) || isDisabled) {
             return;
           }
-          setItems(function (prevItems) {
-            return toggleAllMulti({
-              items: items,
-              checkedStatus: IndeterminateCheckboxStatus.checked,
-              checkChildren: checkChildren,
-              checkParents: checkParents
-            });
-          });
+          this.showMore(true);
         },
         clearAll: function clearAll() {
           if (isDisabled) {
             return;
           }
-          setItems(function (prevItems) {
+          setItems(function () {
             return toggleAllMulti({
               items: items,
               checkedStatus: IndeterminateCheckboxStatus.unchecked,
@@ -29084,13 +29082,54 @@ function useTreeView(props) {
               checkParents: checkParents
             });
           });
+        },
+        showMore: function showMore(fromSelectAll) {
+          if (fromSelectAll === void 0) {
+            fromSelectAll = false;
+          }
+          if (fromSelectAll) {
+            setItems(function () {
+              return toggleAllMulti({
+                items: items,
+                checkedStatus: IndeterminateCheckboxStatus.checked,
+                checkChildren: checkChildren,
+                checkParents: checkParents
+              });
+            });
+          } else {
+            setItemsNeedUpdate(true);
+          }
+        },
+        showLess: function showLess() {
+          setItems(getInitialItems({
+            children: children,
+            preselectedItems: selectedItems,
+            checkParents: checkParents,
+            checkChildren: checkChildren,
+            selectable: selectable,
+            isDisabled: isDisabled
+          }));
         }
       };
     }
-  }, [selectItem, isDisabled]);
-  var _React$useState3 = useState(false),
-    initialExpandedItemsNeedUpdate = _React$useState3[0],
-    setInitialExpandedItemsNeedUpdate = _React$useState3[1];
+  }, [selectItem, isDisabled, children]);
+  useEffect(function () {
+    if (itemsNeedUpdate) {
+      setItems(getInitialItems({
+        children: children,
+        preselectedItems: selectedItems,
+        checkParents: checkParents,
+        checkChildren: checkChildren,
+        selectable: selectable,
+        isDisabled: isDisabled
+      }));
+      prevChildrenRef.current = children;
+      setItemsNeedUpdate(false);
+    }
+  }, [itemsNeedUpdate, children]);
+  var _React$useState4 = useState(false),
+    initialExpandedItemsNeedUpdate = _React$useState4[0],
+    setInitialExpandedItemsNeedUpdate = _React$useState4[1];
   var _useDescendants = useDescendants(),
     treeItemRefArray = _useDescendants[0],
     registerTreeItem = _useDescendants[1];
@@ -29099,9 +29138,9 @@ function useTreeView(props) {
       setInitialExpandedItemsNeedUpdate(true);
     }
   }, []);
-  var _React$useState4 = useState(new Set(initialExpandedItems)),
-    expandedSet = _React$useState4[0],
-    setExpandedSet = _React$useState4[1];
+  var _React$useState5 = useState(new Set(initialExpandedItems)),
+    expandedSet = _React$useState5[0],
+    setExpandedSet = _React$useState5[1];
   var handleExpandedChange = function handleExpandedChange(event, itemId) {
     setExpandedSet(function (prevExpandedSet) {
       var updatedExpandedSet = new Set(prevExpandedSet);