react-magma-dom 4.10.0-next.6 → 4.10.0-next.8

package/dist/properties.json

@@ -16958,12 +16958,12 @@
       "typeArguments": [
         {
           "type": "reference",
-          "id": 35188,
+          "id": 35192,
           "name": "ToggleButtonTextProps"
         },
         {
           "type": "reference",
-          "id": 35472,
+          "id": 35476,
           "name": "ToggleButtonIconProps"
         }
       ],
@@ -18382,7 +18382,7 @@
           "type": "query",
           "queryType": {
             "type": "reference",
-            "id": 33947,
+            "id": 33950,
             "name": "useTreeView"
           }
         }

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

@@ -16077,8 +16077,9 @@ var getInitialItems = function getInitialItems(_ref0) {
     checkChildren = _ref0.checkChildren,
     selectable = _ref0.selectable,
     isTreeViewDisabled = _ref0.isDisabled,
-    isTopLevelSelectable = _ref0.isTopLevelSelectable;
-  var treeViewData = _getTreeViewData({
+    isTopLevelSelectable = _ref0.isTopLevelSelectable,
+    items = _ref0.items;
+  var treeViewData = items || _getTreeViewData({
     children: children,
     checkChildren: checkChildren,
     selectable: selectable,
@@ -16352,17 +16353,17 @@ function useTreeItem(props, forwardedRef) {
     }
     return (_treeViewItemData$che = treeViewItemData == null ? void 0 : treeViewItemData.checkedStatus) != null ? _treeViewItemData$che : exports.IndeterminateCheckboxStatus.unchecked;
   }, [selectable, topLevel, isTopLevelSelectable, treeViewItemData == null ? void 0 : treeViewItemData.checkedStatus]);
+  var treeItemChildren = React.Children.toArray(children).filter(function (child) {
+    return child.type === TreeItem;
+  });
   var hasOwnTreeItems = React.useMemo(function () {
-    return treeViewItemData == null ? void 0 : treeViewItemData.hasOwnTreeItems;
-  }, [treeViewItemData]);
+    return (treeViewItemData == null ? void 0 : treeViewItemData.hasOwnTreeItems) || treeItemChildren.length > 0;
+  }, [treeViewItemData, treeItemChildren.length]);
   var _React$useState = React.useState(function () {
       return expandedSet.has(itemId);
     }),
     expanded = _React$useState[0],
     setExpanded = _React$useState[1];
-  var treeItemChildren = React.Children.toArray(children).filter(function (child) {
-    return child.type === TreeItem;
-  });
   var ownRef = React.useRef(null);
   var ref = useForkedRef(forwardedRef, ownRef);
   var forceUpdate = useForceUpdate();
@@ -17134,7 +17135,8 @@ function useTreeView(props) {
       checkChildren: checkChildren,
       selectable: selectable,
       isDisabled: isDisabled,
-      isTopLevelSelectable: isTopLevelSelectable
+      isTopLevelSelectable: isTopLevelSelectable,
+      items: items
     });
     setItems(function (prevItems) {
       return prevItems.map(function (prevItem) {
@@ -17302,6 +17304,48 @@ function useTreeView(props) {
     var syntheticEvent = {};
     handleExpandedChange(syntheticEvent, '');
   }, [handleExpandedChange]);
+  var addItem = React.useCallback(function (newItem) {
+    var newItems = items.map(function (item) {
+      if (item.itemId === newItem.parentId) {
+        item.hasOwnTreeItems = true;
+        if (checkParents) {
+          if (item.checkedStatus === exports.IndeterminateCheckboxStatus.checked && newItem.checkedStatus !== exports.IndeterminateCheckboxStatus.checked) {
+            item.checkedStatus = exports.IndeterminateCheckboxStatus.indeterminate;
+          } else if (item.checkedStatus === exports.IndeterminateCheckboxStatus.indeterminate && newItem.checkedStatus === exports.IndeterminateCheckboxStatus.checked) {
+            var allChildrenChecked = [].concat(items, [newItem]).filter(function (child) {
+              return child.parentId === item.itemId;
+            }).every(function (child) {
+              return child.checkedStatus === exports.IndeterminateCheckboxStatus.checked;
+            });
+            if (allChildrenChecked) {
+              item.checkedStatus = exports.IndeterminateCheckboxStatus.checked;
+            }
+          }
+        }
+      }
+      return item;
+    });
+    if (newItem.checkedStatus === exports.IndeterminateCheckboxStatus.checked && selectable === exports.TreeViewSelectable.single) {
+      newItems.forEach(function (item) {
+        item.checkedStatus = exports.IndeterminateCheckboxStatus.unchecked;
+      });
+    }
+    var updatedItems = [].concat(newItems, [newItem]);
+    if (newItem.parentId) {
+      setItems(getInitialItems({
+        children: children,
+        preselectedItems: selectedItems,
+        checkParents: checkParents,
+        checkChildren: false,
+        selectable: selectable,
+        isDisabled: isDisabled,
+        isTopLevelSelectable: isTopLevelSelectable,
+        items: updatedItems
+      }));
+    } else {
+      setItems(updatedItems);
+    }
+  }, [checkParents, children, isDisabled, isTopLevelSelectable, items, selectable, selectedItems]);
   React.useEffect(function () {
     if (apiRef) {
       apiRef.current = {
@@ -17311,10 +17355,11 @@ function useTreeView(props) {
         showMore: showMore,
         showLess: showLess,
         expandAll: expandAll,
-        collapseAll: collapseAll
+        collapseAll: collapseAll,
+        addItem: addItem
       };
     }
-  }, [selectItem, selectAll, clearAll, showMore, showLess, expandAll, collapseAll, apiRef]);
+  }, [selectItem, selectAll, clearAll, showMore, showLess, expandAll, collapseAll, addItem, apiRef]);
   React.useEffect(function () {
     if (itemsNeedUpdate) {
       setItems(getInitialItems({
@@ -17365,7 +17410,7 @@ var StyledTreeView = /*#__PURE__*/_styled("ul", {
   label: "StyledTreeView"
 })("padding:0;margin:0;color:", function (props) {
   return props.isInverse ? props.theme.colors.neutral100 : props.theme.colors.neutral;
-}, ";ul{padding:0;margin:0;li{margin:0;}}" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVWaWV3LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTaUMiLCJmaWxlIjoiVHJlZVZpZXcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IFRyZWVJdGVtIH0gZnJvbSAnLi9UcmVlSXRlbSc7XHJcbmltcG9ydCB7IFRyZWVWaWV3Q29udGV4dCB9IGZyb20gJy4vVHJlZVZpZXdDb250ZXh0JztcclxuaW1wb3J0IHsgVHJlZVZpZXdTZWxlY3RhYmxlIH0gZnJvbSAnLi90eXBlcyc7XHJcbmltcG9ydCB7IHVzZVRyZWVJdGVtIH0gZnJvbSAnLi91c2VUcmVlSXRlbSc7XHJcbmltcG9ydCB7IHVzZVRyZWVWaWV3IH0gZnJvbSAnLi91c2VUcmVlVmlldyc7XHJcbmltcG9ydCB7IEludmVyc2VDb250ZXh0LCB1c2VJc0ludmVyc2UgfSBmcm9tICcuLi8uLi9pbnZlcnNlJztcclxuaW1wb3J0IHsgVGhlbWVDb250ZXh0IH0gZnJvbSAnLi4vLi4vdGhlbWUvVGhlbWVDb250ZXh0JztcclxuY29uc3QgU3R5bGVkVHJlZVZpZXcgPSBzdHlsZWQudWwgYFxuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IDA7XG4gIGNvbG9yOiAke3Byb3BzID0+IHByb3BzLmlzSW52ZXJzZVxyXG4gICAgPyBwcm9wcy50aGVtZS5jb2xvcnMubmV1dHJhbDEwMFxyXG4gICAgOiBwcm9wcy50aGVtZS5jb2xvcnMubmV1dHJhbH07XG4gIHVsIHtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogMDtcbiAgICBsaSB7XG4gICAgICBtYXJnaW46IDA7XG4gICAgfVxuICB9XG5gO1xyXG5leHBvcnQgY29uc3QgVHJlZVZpZXcgPSBSZWFjdC5mb3J3YXJkUmVmKChwcm9wcywgcmVmKSA9PiB7XHJcbiAgICBjb25zdCB7IGFyaWFMYWJlbCwgYXJpYUxhYmVsbGVkQnksIGNoaWxkcmVuLCBpc0ludmVyc2U6IGlzSW52ZXJzZVByb3AsIG9uRXhwYW5kZWRDaGFuZ2UsIG9uU2VsZWN0ZWRJdGVtQ2hhbmdlLCBzZWxlY3RhYmxlLCB0ZXN0SWQsIGFwaVJlZiwgLi4ucmVzdCB9ID0gcHJvcHM7XHJcbiAgICBjb25zdCB0aGVtZSA9IFJlYWN0LnVzZUNvbnRleHQoVGhlbWVDb250ZXh0KTtcclxuICAgIGNvbnN0IGlzSW52ZXJzZSA9IHVzZUlzSW52ZXJzZShpc0ludmVyc2VQcm9wKTtcclxuICAgIGNvbnN0IHsgY29udGV4dFZhbHVlIH0gPSB1c2VUcmVlVmlldyhwcm9wcyk7XHJcbiAgICB1c2VUcmVlSXRlbSh7IGxhYmVsOiBhcmlhTGFiZWwsIGl0ZW1JZDogJycgfSwgcmVmKTtcclxuICAgIGxldCB0cmVlSXRlbUluZGV4ID0gMDtcclxuICAgIHJldHVybiAoUmVhY3QuY3JlYXRlRWxlbWVudChJbnZlcnNlQ29udGV4dC5Qcm92aWRlciwgeyB2YWx1ZTogeyBpc0ludmVyc2UgfSB9LFxyXG4gICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoVHJlZVZpZXdDb250ZXh0LlByb3ZpZGVyLCB7IHZhbHVlOiBjb250ZXh0VmFsdWUgfSxcclxuICAgICAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChTdHlsZWRUcmVlVmlldywgT2JqZWN0LmFzc2lnbih7fSwgcmVzdCwgeyBcImFyaWEtbGFiZWxcIjogYXJpYUxhYmVsLCBcImFyaWEtbGFiZWxsZWRieVwiOiBhcmlhTGFiZWxsZWRCeSwgXCJhcmlhLW11bHRpc2VsZWN0YWJsZVwiOiBzZWxlY3RhYmxlID09PSBUcmVlVmlld1NlbGVjdGFibGUubXVsdGksIFwiZGF0YS10ZXN0aWRcIjogdGVzdElkLCBpc0ludmVyc2U6IGlzSW52ZXJzZSwgcmVmOiByZWYsIHJvbGU6IFwidHJlZVwiLCB0aGVtZTogdGhlbWUgfSksIFJlYWN0LkNoaWxkcmVuLm1hcChjaGlsZHJlbiwgKGNoaWxkKSA9PiB7XHJcbiAgICAgICAgICAgICAgICBpZiAoY2hpbGQudHlwZSA9PT0gVHJlZUl0ZW0pIHtcclxuICAgICAgICAgICAgICAgICAgICBjb25zdCBpdGVtID0gUmVhY3QuY2xvbmVFbGVtZW50KGNoaWxkLCB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGluZGV4OiB0cmVlSXRlbUluZGV4LFxyXG4gICAgICAgICAgICAgICAgICAgICAgICBrZXk6IHRyZWVJdGVtSW5kZXgsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHBhcmVudERlcHRoOiAwLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICBpdGVtRGVwdGg6IDAsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHRvcExldmVsOiB0cnVlLFxyXG4gICAgICAgICAgICAgICAgICAgIH0pO1xyXG4gICAgICAgICAgICAgICAgICAgIHRyZWVJdGVtSW5kZXgrKztcclxuICAgICAgICAgICAgICAgICAgICByZXR1cm4gaXRlbTtcclxuICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgfSkpKSkpO1xyXG59KTtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9VHJlZVZpZXcuanMubWFwIl19 */"));
+}, ";ul{padding:0;margin:0;li{margin:0;}}" + ( "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVWaWV3LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTaUMiLCJmaWxlIjoiVHJlZVZpZXcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IFRyZWVJdGVtIH0gZnJvbSAnLi9UcmVlSXRlbSc7XHJcbmltcG9ydCB7IFRyZWVWaWV3Q29udGV4dCB9IGZyb20gJy4vVHJlZVZpZXdDb250ZXh0JztcclxuaW1wb3J0IHsgVHJlZVZpZXdTZWxlY3RhYmxlIH0gZnJvbSAnLi90eXBlcyc7XHJcbmltcG9ydCB7IHVzZVRyZWVJdGVtIH0gZnJvbSAnLi91c2VUcmVlSXRlbSc7XHJcbmltcG9ydCB7IHVzZVRyZWVWaWV3IH0gZnJvbSAnLi91c2VUcmVlVmlldyc7XHJcbmltcG9ydCB7IEludmVyc2VDb250ZXh0LCB1c2VJc0ludmVyc2UgfSBmcm9tICcuLi8uLi9pbnZlcnNlJztcclxuaW1wb3J0IHsgVGhlbWVDb250ZXh0IH0gZnJvbSAnLi4vLi4vdGhlbWUvVGhlbWVDb250ZXh0JztcclxuY29uc3QgU3R5bGVkVHJlZVZpZXcgPSBzdHlsZWQudWwgYFxuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IDA7XG4gIGNvbG9yOiAke3Byb3BzID0+IHByb3BzLmlzSW52ZXJzZVxyXG4gICAgPyBwcm9wcy50aGVtZS5jb2xvcnMubmV1dHJhbDEwMFxyXG4gICAgOiBwcm9wcy50aGVtZS5jb2xvcnMubmV1dHJhbH07XG4gIHVsIHtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogMDtcbiAgICBsaSB7XG4gICAgICBtYXJnaW46IDA7XG4gICAgfVxuICB9XG5gO1xyXG5leHBvcnQgY29uc3QgVHJlZVZpZXcgPSBSZWFjdC5mb3J3YXJkUmVmKChwcm9wcywgcmVmKSA9PiB7XHJcbiAgICBjb25zdCB7IGFyaWFMYWJlbCwgYXJpYUxhYmVsbGVkQnksIGNoaWxkcmVuLCBpc0ludmVyc2U6IGlzSW52ZXJzZVByb3AsIG9uRXhwYW5kZWRDaGFuZ2UsIG9uU2VsZWN0ZWRJdGVtQ2hhbmdlLCBzZWxlY3RhYmxlLCB0ZXN0SWQsIGFwaVJlZiwgLi4ucmVzdCB9ID0gcHJvcHM7XHJcbiAgICBjb25zdCB0aGVtZSA9IFJlYWN0LnVzZUNvbnRleHQoVGhlbWVDb250ZXh0KTtcclxuICAgIGNvbnN0IGlzSW52ZXJzZSA9IHVzZUlzSW52ZXJzZShpc0ludmVyc2VQcm9wKTtcclxuICAgIGNvbnN0IHsgY29udGV4dFZhbHVlIH0gPSB1c2VUcmVlVmlldyhwcm9wcyk7XHJcbiAgICB1c2VUcmVlSXRlbSh7IGxhYmVsOiBhcmlhTGFiZWwsIGl0ZW1JZDogJycgfSwgcmVmKTtcclxuICAgIGxldCB0cmVlSXRlbUluZGV4ID0gMDtcclxuICAgIGNvbnN0IGludmVyc2VDb250ZXh0VmFsdWUgPSBSZWFjdC51c2VNZW1vKCgpID0+ICh7IGlzSW52ZXJzZSB9KSwgW2lzSW52ZXJzZV0pO1xyXG4gICAgY29uc3QgcHJvY2Vzc2VkQ2hpbGRyZW4gPSBSZWFjdC5DaGlsZHJlbi5tYXAoY2hpbGRyZW4sIGNoaWxkID0+IHtcclxuICAgICAgICBpZiAoIVJlYWN0LmlzVmFsaWRFbGVtZW50KGNoaWxkKSkge1xyXG4gICAgICAgICAgICByZXR1cm4gbnVsbDtcclxuICAgICAgICB9XHJcbiAgICAgICAgaWYgKGNoaWxkLnR5cGUgPT09IFRyZWVJdGVtKSB7XHJcbiAgICAgICAgICAgIGNvbnN0IHRyZWVJdGVtQ2hpbGQgPSBjaGlsZDtcclxuICAgICAgICAgICAgY29uc3QgdHJlZUl0ZW1Qcm9wcyA9IHtcclxuICAgICAgICAgICAgICAgIGluZGV4OiB0cmVlSXRlbUluZGV4LFxyXG4gICAgICAgICAgICAgICAgcGFyZW50RGVwdGg6IDAsXHJcbiAgICAgICAgICAgICAgICBpdGVtRGVwdGg6IDAsXHJcbiAgICAgICAgICAgICAgICB0b3BMZXZlbDogdHJ1ZSxcclxuICAgICAgICAgICAgfTtcclxuICAgICAgICAgICAgY29uc3QgcHJvY2Vzc2VkSXRlbSA9IFJlYWN0LmNsb25lRWxlbWVudCh0cmVlSXRlbUNoaWxkLCB7XHJcbiAgICAgICAgICAgICAgICAuLi50cmVlSXRlbVByb3BzLFxyXG4gICAgICAgICAgICAgICAga2V5OiBgdHJlZS1pdGVtLSR7dHJlZUl0ZW1JbmRleH1gLFxyXG4gICAgICAgICAgICB9KTtcclxuICAgICAgICAgICAgdHJlZUl0ZW1JbmRleCsrO1xyXG4gICAgICAgICAgICByZXR1cm4gcHJvY2Vzc2VkSXRlbTtcclxuICAgICAgICB9XHJcbiAgICAgICAgcmV0dXJuIG51bGw7XHJcbiAgICB9KTtcclxuICAgIHJldHVybiAoUmVhY3QuY3JlYXRlRWxlbWVudChJbnZlcnNlQ29udGV4dC5Qcm92aWRlciwgeyB2YWx1ZTogaW52ZXJzZUNvbnRleHRWYWx1ZSB9LFxyXG4gICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoVHJlZVZpZXdDb250ZXh0LlByb3ZpZGVyLCB7IHZhbHVlOiBjb250ZXh0VmFsdWUgfSxcclxuICAgICAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChTdHlsZWRUcmVlVmlldywgT2JqZWN0LmFzc2lnbih7fSwgcmVzdCwgeyBcImFyaWEtbGFiZWxcIjogYXJpYUxhYmVsLCBcImFyaWEtbGFiZWxsZWRieVwiOiBhcmlhTGFiZWxsZWRCeSwgXCJhcmlhLW11bHRpc2VsZWN0YWJsZVwiOiBzZWxlY3RhYmxlID09PSBUcmVlVmlld1NlbGVjdGFibGUubXVsdGksIFwiZGF0YS10ZXN0aWRcIjogdGVzdElkLCBpc0ludmVyc2U6IGlzSW52ZXJzZSwgcmVmOiByZWYsIHJvbGU6IFwidHJlZVwiLCB0aGVtZTogdGhlbWUgfSksIHByb2Nlc3NlZENoaWxkcmVuKSkpKTtcclxufSk7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRyZWVWaWV3LmpzLm1hcCJdfQ== */"));
 var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var ariaLabel = props.ariaLabel,
     ariaLabelledBy = props.ariaLabelledBy,
@@ -17383,10 +17428,33 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
     itemId: ''
   }, ref);
   var treeItemIndex = 0;
-  return React.createElement(InverseContext.Provider, {
-    value: {
+  var inverseContextValue = React.useMemo(function () {
+    return {
       isInverse: isInverse
+    };
+  }, [isInverse]);
+  var processedChildren = React.Children.map(children, function (child) {
+    if (!React.isValidElement(child)) {
+      return null;
+    }
+    if (child.type === TreeItem) {
+      var treeItemChild = child;
+      var treeItemProps = {
+        index: treeItemIndex,
+        parentDepth: 0,
+        itemDepth: 0,
+        topLevel: true
+      };
+      var processedItem = React.cloneElement(treeItemChild, _extends({}, treeItemProps, {
+        key: "tree-item-" + treeItemIndex
+      }));
+      treeItemIndex++;
+      return processedItem;
     }
+    return null;
+  });
+  return React.createElement(InverseContext.Provider, {
+    value: inverseContextValue
   }, React.createElement(TreeViewContext.Provider, {
     value: contextValue
   }, React.createElement(StyledTreeView, Object.assign({}, rest, {
@@ -17398,19 +17466,7 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref,
     role: "tree",
     theme: theme
-  }), React.Children.map(children, function (child) {
-    if (child.type === TreeItem) {
-      var item = React.cloneElement(child, {
-        index: treeItemIndex,
-        key: treeItemIndex,
-        parentDepth: 0,
-        itemDepth: 0,
-        topLevel: true
-      });
-      treeItemIndex++;
-      return item;
-    }
-  }))));
+  }), processedChildren)));
 });
 
 var _excluded$1K = ["children", "enforced", "exclusive", "id", "isInverse", "noSpace", "onChange", "size", "value", "testId"];