react-magma-dom 4.7.0-next.52 → 4.7.0-next.54

package/dist/properties.json

@@ -7745,7 +7745,7 @@
         "type": {
           "name": "CSSProperties"
         },
-        "description": "Style properties for the component container element",
+        "description": "Style properties for the component container element.\nThis div is a direct child of the div with the inputWrapperStyle, so the second from the top.",
         "deprecated": false
       },
       "hasCharacterCounter": {
@@ -7838,7 +7838,7 @@
         "type": {
           "name": "CSSProperties"
         },
-        "description": "Style properties for input wrapper element",
+        "description": "Style properties for input wrapper element. This is the outermost div.",
         "deprecated": false
       },
       "isClearable": {
@@ -8003,7 +8003,7 @@
         "type": {
           "name": "CSSProperties"
         },
-        "description": "Style properties for the component container element",
+        "description": "Style properties for the component container element.\nThis div is a direct child of the div with the inputWrapperStyle, so the second from the top.",
         "deprecated": false
       },
       "hasCharacterCounter": {
@@ -8096,7 +8096,7 @@
         "type": {
           "name": "CSSProperties"
         },
-        "description": "Style properties for input wrapper element",
+        "description": "Style properties for input wrapper element. This is the outermost div.",
         "deprecated": false
       },
       "isClearable": {
@@ -10867,7 +10867,7 @@
         "type": {
           "name": "CSSProperties"
         },
-        "description": "Style properties for input wrapper element",
+        "description": "Style properties for input wrapper element. This is the outermost div.",
         "deprecated": false
       },
       "isClearable": {
@@ -16330,12 +16330,12 @@
       "typeArguments": [
         {
           "type": "reference",
-          "id": 33645,
+          "id": 33651,
           "name": "ToggleButtonTextProps"
         },
         {
           "type": "reference",
-          "id": 33923,
+          "id": 33929,
           "name": "ToggleButtonIconProps"
         }
       ],
@@ -17091,7 +17091,7 @@
         "type": {
           "name": "MutableRefObject"
         },
-        "description": "The ref object that allows TreeView manipulation.\nActions available:\nselectItem({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void - action that allows to change item selection,\nselectAll(): void - action that allows to select all items,\nclearAll(): void - action that allows to unselect all items.",
+        "description": "The ref object that allows TreeView manipulation.\nActions available:\nselectItem({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void - action that allows to change item selection,\nselectAll(): void - action that allows to select all items,\nclearAll(): void - action that allows to unselect all items.\nshowMore(): void - action that gets called when a tree has hidden items and they get expanded.\nshowLess(): void - action that gets called when a tree has hidden items and they get collapsed.",
         "deprecated": false
       },
       "ariaLabel": {
@@ -17578,7 +17578,7 @@
         "type": {
           "name": "MutableRefObject"
         },
-        "description": "The ref object that allows TreeView manipulation.\nActions available:\nselectItem({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void - action that allows to change item selection,\nselectAll(): void - action that allows to select all items,\nclearAll(): void - action that allows to unselect all items.",
+        "description": "The ref object that allows TreeView manipulation.\nActions available:\nselectItem({ itemId, checkedStatus }: Pick<TreeViewItemInterface, 'itemId' | 'checkedStatus'>): void - action that allows to change item selection,\nselectAll(): void - action that allows to select all items,\nclearAll(): void - action that allows to unselect all items.\nshowMore(): void - action that gets called when a tree has hidden items and they get expanded.\nshowLess(): void - action that gets called when a tree has hidden items and they get collapsed.",
         "deprecated": false
       },
       "ariaLabel": {
@@ -17716,7 +17716,7 @@
           "type": "query",
           "queryType": {
             "type": "reference",
-            "id": 33259,
+            "id": 33263,
             "name": "useTreeView"
           }
         }

package/dist/react-magma-dom.cjs.development.js

@@ -15997,6 +15997,7 @@ function useTreeView(props) {
     }),
     hasIcons = _React$useState2[0];
   var selectedItems = React.useMemo(function () {
+    console.log(items);
     return items.filter(function (item) {
       return item.checkedStatus === exports.IndeterminateCheckboxStatus.checked;
     });
@@ -16028,7 +16029,12 @@ function useTreeView(props) {
   }, [items]);
   var prevSelectedItemsRef = React.useRef(null);
   var prevPreselectedItemsRef = React.useRef(preselectedItems);
+  var prevChildrenRef = React.useRef(children);
   var initializationRef = React.useRef(true);
+  // Used for showAll button
+  var _React$useState3 = React.useState(null),
+    itemsNeedUpdate = _React$useState3[0],
+    setItemsNeedUpdate = _React$useState3[1];
   React.useEffect(function () {
     if (isEqualArrays(prevPreselectedItemsRef.current, preselectedItems)) {
       return;
@@ -16135,20 +16141,13 @@ function useTreeView(props) {
           if ([exports.TreeViewSelectable.single, exports.TreeViewSelectable.single].includes(selectable) || isDisabled) {
             return;
           }
-          setItems(function (prevItems) {
-            return toggleAllMulti({
-              items: items,
-              checkedStatus: exports.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: exports.IndeterminateCheckboxStatus.unchecked,
@@ -16156,13 +16155,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: exports.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 = React.useState(false),
-    initialExpandedItemsNeedUpdate = _React$useState3[0],
-    setInitialExpandedItemsNeedUpdate = _React$useState3[1];
+  }, [selectItem, isDisabled, children]);
+  React.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 = React.useState(false),
+    initialExpandedItemsNeedUpdate = _React$useState4[0],
+    setInitialExpandedItemsNeedUpdate = _React$useState4[1];
   var _useDescendants = useDescendants(),
     treeItemRefArray = _useDescendants[0],
     registerTreeItem = _useDescendants[1];
@@ -16171,9 +16211,9 @@ function useTreeView(props) {
       setInitialExpandedItemsNeedUpdate(true);
     }
   }, []);
-  var _React$useState4 = React.useState(new Set(initialExpandedItems)),
-    expandedSet = _React$useState4[0],
-    setExpandedSet = _React$useState4[1];
+  var _React$useState5 = React.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);