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

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

@@ -10,6 +10,7 @@ export interface TreeViewApi {
     showLess(): void;
     expandAll(): void;
     collapseAll(): void;
+    addItem(item: TreeViewItemInterface): void;
 }
 export interface UseTreeViewProps {
     /**

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

@@ -34,7 +34,9 @@ export declare const getChildrenIds: ({ items, itemId, }: {
     items: TreeViewItemInterface[];
     itemId: TreeViewItemInterface['itemId'];
 }) => any;
-export declare const getInitialItems: ({ children, preselectedItems: rawPreselectedItems, checkParents, checkChildren, selectable, isDisabled: isTreeViewDisabled, isTopLevelSelectable, }: Pick<UseTreeViewProps, 'children' | 'preselectedItems' | 'checkParents' | 'checkChildren' | 'selectable' | 'isDisabled' | 'isTopLevelSelectable'>) => any;
+export declare const getInitialItems: ({ children, preselectedItems: rawPreselectedItems, checkParents, checkChildren, selectable, isDisabled: isTreeViewDisabled, isTopLevelSelectable, items, }: Pick<UseTreeViewProps, "isDisabled" | "checkChildren" | "selectable" | "preselectedItems" | "checkParents" | "children" | "isTopLevelSelectable"> & {
+    items?: TreeViewItemInterface[];
+}) => any;
 export declare const selectSingle: ({ items, itemId, checkedStatus, }: {
     items: TreeViewItemInterface[];
     itemId: TreeViewItemInterface['itemId'];

package/dist/esm/index.js

@@ -19852,8 +19852,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,
@@ -20127,17 +20128,17 @@ function useTreeItem(props, forwardedRef) {
     }
     return (_treeViewItemData$che = treeViewItemData == null ? void 0 : treeViewItemData.checkedStatus) != null ? _treeViewItemData$che : IndeterminateCheckboxStatus.unchecked;
   }, [selectable, topLevel, isTopLevelSelectable, treeViewItemData == null ? void 0 : treeViewItemData.checkedStatus]);
+  var treeItemChildren = Children.toArray(children).filter(function (child) {
+    return child.type === TreeItem;
+  });
   var hasOwnTreeItems = 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 = useState(function () {
       return expandedSet.has(itemId);
     }),
     expanded = _React$useState[0],
     setExpanded = _React$useState[1];
-  var treeItemChildren = Children.toArray(children).filter(function (child) {
-    return child.type === TreeItem;
-  });
   var ownRef = useRef(null);
   var ref = useForkedRef(forwardedRef, ownRef);
   var forceUpdate = useForceUpdate();
@@ -20909,7 +20910,8 @@ function useTreeView(props) {
       checkChildren: checkChildren,
       selectable: selectable,
       isDisabled: isDisabled,
-      isTopLevelSelectable: isTopLevelSelectable
+      isTopLevelSelectable: isTopLevelSelectable,
+      items: items
     });
     setItems(function (prevItems) {
       return prevItems.map(function (prevItem) {
@@ -21077,6 +21079,48 @@ function useTreeView(props) {
     var syntheticEvent = {};
     handleExpandedChange(syntheticEvent, '');
   }, [handleExpandedChange]);
+  var addItem = useCallback(function (newItem) {
+    var newItems = items.map(function (item) {
+      if (item.itemId === newItem.parentId) {
+        item.hasOwnTreeItems = true;
+        if (checkParents) {
+          if (item.checkedStatus === IndeterminateCheckboxStatus.checked && newItem.checkedStatus !== IndeterminateCheckboxStatus.checked) {
+            item.checkedStatus = IndeterminateCheckboxStatus.indeterminate;
+          } else if (item.checkedStatus === IndeterminateCheckboxStatus.indeterminate && newItem.checkedStatus === IndeterminateCheckboxStatus.checked) {
+            var allChildrenChecked = [].concat(items, [newItem]).filter(function (child) {
+              return child.parentId === item.itemId;
+            }).every(function (child) {
+              return child.checkedStatus === IndeterminateCheckboxStatus.checked;
+            });
+            if (allChildrenChecked) {
+              item.checkedStatus = IndeterminateCheckboxStatus.checked;
+            }
+          }
+        }
+      }
+      return item;
+    });
+    if (newItem.checkedStatus === IndeterminateCheckboxStatus.checked && selectable === TreeViewSelectable.single) {
+      newItems.forEach(function (item) {
+        item.checkedStatus = 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]);
   useEffect(function () {
     if (apiRef) {
       apiRef.current = {
@@ -21086,10 +21130,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]);
   useEffect(function () {
     if (itemsNeedUpdate) {
       setItems(getInitialItems({
@@ -21140,7 +21185,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;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVWaWV3LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTaUMiLCJmaWxlIjoiVHJlZVZpZXcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IFRyZWVJdGVtIH0gZnJvbSAnLi9UcmVlSXRlbSc7XHJcbmltcG9ydCB7IFRyZWVWaWV3Q29udGV4dCB9IGZyb20gJy4vVHJlZVZpZXdDb250ZXh0JztcclxuaW1wb3J0IHsgVHJlZVZpZXdTZWxlY3RhYmxlIH0gZnJvbSAnLi90eXBlcyc7XHJcbmltcG9ydCB7IHVzZVRyZWVJdGVtIH0gZnJvbSAnLi91c2VUcmVlSXRlbSc7XHJcbmltcG9ydCB7IHVzZVRyZWVWaWV3IH0gZnJvbSAnLi91c2VUcmVlVmlldyc7XHJcbmltcG9ydCB7IEludmVyc2VDb250ZXh0LCB1c2VJc0ludmVyc2UgfSBmcm9tICcuLi8uLi9pbnZlcnNlJztcclxuaW1wb3J0IHsgVGhlbWVDb250ZXh0IH0gZnJvbSAnLi4vLi4vdGhlbWUvVGhlbWVDb250ZXh0JztcclxuY29uc3QgU3R5bGVkVHJlZVZpZXcgPSBzdHlsZWQudWwgYFxuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IDA7XG4gIGNvbG9yOiAke3Byb3BzID0+IHByb3BzLmlzSW52ZXJzZVxyXG4gICAgPyBwcm9wcy50aGVtZS5jb2xvcnMubmV1dHJhbDEwMFxyXG4gICAgOiBwcm9wcy50aGVtZS5jb2xvcnMubmV1dHJhbH07XG4gIHVsIHtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogMDtcbiAgICBsaSB7XG4gICAgICBtYXJnaW46IDA7XG4gICAgfVxuICB9XG5gO1xyXG5leHBvcnQgY29uc3QgVHJlZVZpZXcgPSBSZWFjdC5mb3J3YXJkUmVmKChwcm9wcywgcmVmKSA9PiB7XHJcbiAgICBjb25zdCB7IGFyaWFMYWJlbCwgYXJpYUxhYmVsbGVkQnksIGNoaWxkcmVuLCBpc0ludmVyc2U6IGlzSW52ZXJzZVByb3AsIG9uRXhwYW5kZWRDaGFuZ2UsIG9uU2VsZWN0ZWRJdGVtQ2hhbmdlLCBzZWxlY3RhYmxlLCB0ZXN0SWQsIGFwaVJlZiwgLi4ucmVzdCB9ID0gcHJvcHM7XHJcbiAgICBjb25zdCB0aGVtZSA9IFJlYWN0LnVzZUNvbnRleHQoVGhlbWVDb250ZXh0KTtcclxuICAgIGNvbnN0IGlzSW52ZXJzZSA9IHVzZUlzSW52ZXJzZShpc0ludmVyc2VQcm9wKTtcclxuICAgIGNvbnN0IHsgY29udGV4dFZhbHVlIH0gPSB1c2VUcmVlVmlldyhwcm9wcyk7XHJcbiAgICB1c2VUcmVlSXRlbSh7IGxhYmVsOiBhcmlhTGFiZWwsIGl0ZW1JZDogJycgfSwgcmVmKTtcclxuICAgIGxldCB0cmVlSXRlbUluZGV4ID0gMDtcclxuICAgIHJldHVybiAoUmVhY3QuY3JlYXRlRWxlbWVudChJbnZlcnNlQ29udGV4dC5Qcm92aWRlciwgeyB2YWx1ZTogeyBpc0ludmVyc2UgfSB9LFxyXG4gICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoVHJlZVZpZXdDb250ZXh0LlByb3ZpZGVyLCB7IHZhbHVlOiBjb250ZXh0VmFsdWUgfSxcclxuICAgICAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChTdHlsZWRUcmVlVmlldywgT2JqZWN0LmFzc2lnbih7fSwgcmVzdCwgeyBcImFyaWEtbGFiZWxcIjogYXJpYUxhYmVsLCBcImFyaWEtbGFiZWxsZWRieVwiOiBhcmlhTGFiZWxsZWRCeSwgXCJhcmlhLW11bHRpc2VsZWN0YWJsZVwiOiBzZWxlY3RhYmxlID09PSBUcmVlVmlld1NlbGVjdGFibGUubXVsdGksIFwiZGF0YS10ZXN0aWRcIjogdGVzdElkLCBpc0ludmVyc2U6IGlzSW52ZXJzZSwgcmVmOiByZWYsIHJvbGU6IFwidHJlZVwiLCB0aGVtZTogdGhlbWUgfSksIFJlYWN0LkNoaWxkcmVuLm1hcChjaGlsZHJlbiwgKGNoaWxkKSA9PiB7XHJcbiAgICAgICAgICAgICAgICBpZiAoY2hpbGQudHlwZSA9PT0gVHJlZUl0ZW0pIHtcclxuICAgICAgICAgICAgICAgICAgICBjb25zdCBpdGVtID0gUmVhY3QuY2xvbmVFbGVtZW50KGNoaWxkLCB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGluZGV4OiB0cmVlSXRlbUluZGV4LFxyXG4gICAgICAgICAgICAgICAgICAgICAgICBrZXk6IHRyZWVJdGVtSW5kZXgsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHBhcmVudERlcHRoOiAwLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICBpdGVtRGVwdGg6IDAsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHRvcExldmVsOiB0cnVlLFxyXG4gICAgICAgICAgICAgICAgICAgIH0pO1xyXG4gICAgICAgICAgICAgICAgICAgIHRyZWVJdGVtSW5kZXgrKztcclxuICAgICAgICAgICAgICAgICAgICByZXR1cm4gaXRlbTtcclxuICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgfSkpKSkpO1xyXG59KTtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9VHJlZVZpZXcuanMubWFwIl19 */"));
+}, ";ul{padding:0;margin:0;li{margin:0;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRyZWVWaWV3LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTaUMiLCJmaWxlIjoiVHJlZVZpZXcudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xyXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XHJcbmltcG9ydCB7IFRyZWVJdGVtIH0gZnJvbSAnLi9UcmVlSXRlbSc7XHJcbmltcG9ydCB7IFRyZWVWaWV3Q29udGV4dCB9IGZyb20gJy4vVHJlZVZpZXdDb250ZXh0JztcclxuaW1wb3J0IHsgVHJlZVZpZXdTZWxlY3RhYmxlIH0gZnJvbSAnLi90eXBlcyc7XHJcbmltcG9ydCB7IHVzZVRyZWVJdGVtIH0gZnJvbSAnLi91c2VUcmVlSXRlbSc7XHJcbmltcG9ydCB7IHVzZVRyZWVWaWV3IH0gZnJvbSAnLi91c2VUcmVlVmlldyc7XHJcbmltcG9ydCB7IEludmVyc2VDb250ZXh0LCB1c2VJc0ludmVyc2UgfSBmcm9tICcuLi8uLi9pbnZlcnNlJztcclxuaW1wb3J0IHsgVGhlbWVDb250ZXh0IH0gZnJvbSAnLi4vLi4vdGhlbWUvVGhlbWVDb250ZXh0JztcclxuY29uc3QgU3R5bGVkVHJlZVZpZXcgPSBzdHlsZWQudWwgYFxuICBwYWRkaW5nOiAwO1xuICBtYXJnaW46IDA7XG4gIGNvbG9yOiAke3Byb3BzID0+IHByb3BzLmlzSW52ZXJzZVxyXG4gICAgPyBwcm9wcy50aGVtZS5jb2xvcnMubmV1dHJhbDEwMFxyXG4gICAgOiBwcm9wcy50aGVtZS5jb2xvcnMubmV1dHJhbH07XG4gIHVsIHtcbiAgICBwYWRkaW5nOiAwO1xuICAgIG1hcmdpbjogMDtcbiAgICBsaSB7XG4gICAgICBtYXJnaW46IDA7XG4gICAgfVxuICB9XG5gO1xyXG5leHBvcnQgY29uc3QgVHJlZVZpZXcgPSBSZWFjdC5mb3J3YXJkUmVmKChwcm9wcywgcmVmKSA9PiB7XHJcbiAgICBjb25zdCB7IGFyaWFMYWJlbCwgYXJpYUxhYmVsbGVkQnksIGNoaWxkcmVuLCBpc0ludmVyc2U6IGlzSW52ZXJzZVByb3AsIG9uRXhwYW5kZWRDaGFuZ2UsIG9uU2VsZWN0ZWRJdGVtQ2hhbmdlLCBzZWxlY3RhYmxlLCB0ZXN0SWQsIGFwaVJlZiwgLi4ucmVzdCB9ID0gcHJvcHM7XHJcbiAgICBjb25zdCB0aGVtZSA9IFJlYWN0LnVzZUNvbnRleHQoVGhlbWVDb250ZXh0KTtcclxuICAgIGNvbnN0IGlzSW52ZXJzZSA9IHVzZUlzSW52ZXJzZShpc0ludmVyc2VQcm9wKTtcclxuICAgIGNvbnN0IHsgY29udGV4dFZhbHVlIH0gPSB1c2VUcmVlVmlldyhwcm9wcyk7XHJcbiAgICB1c2VUcmVlSXRlbSh7IGxhYmVsOiBhcmlhTGFiZWwsIGl0ZW1JZDogJycgfSwgcmVmKTtcclxuICAgIGxldCB0cmVlSXRlbUluZGV4ID0gMDtcclxuICAgIGNvbnN0IGludmVyc2VDb250ZXh0VmFsdWUgPSBSZWFjdC51c2VNZW1vKCgpID0+ICh7IGlzSW52ZXJzZSB9KSwgW2lzSW52ZXJzZV0pO1xyXG4gICAgY29uc3QgcHJvY2Vzc2VkQ2hpbGRyZW4gPSBSZWFjdC5DaGlsZHJlbi5tYXAoY2hpbGRyZW4sIGNoaWxkID0+IHtcclxuICAgICAgICBpZiAoIVJlYWN0LmlzVmFsaWRFbGVtZW50KGNoaWxkKSkge1xyXG4gICAgICAgICAgICByZXR1cm4gbnVsbDtcclxuICAgICAgICB9XHJcbiAgICAgICAgaWYgKGNoaWxkLnR5cGUgPT09IFRyZWVJdGVtKSB7XHJcbiAgICAgICAgICAgIGNvbnN0IHRyZWVJdGVtQ2hpbGQgPSBjaGlsZDtcclxuICAgICAgICAgICAgY29uc3QgdHJlZUl0ZW1Qcm9wcyA9IHtcclxuICAgICAgICAgICAgICAgIGluZGV4OiB0cmVlSXRlbUluZGV4LFxyXG4gICAgICAgICAgICAgICAgcGFyZW50RGVwdGg6IDAsXHJcbiAgICAgICAgICAgICAgICBpdGVtRGVwdGg6IDAsXHJcbiAgICAgICAgICAgICAgICB0b3BMZXZlbDogdHJ1ZSxcclxuICAgICAgICAgICAgfTtcclxuICAgICAgICAgICAgY29uc3QgcHJvY2Vzc2VkSXRlbSA9IFJlYWN0LmNsb25lRWxlbWVudCh0cmVlSXRlbUNoaWxkLCB7XHJcbiAgICAgICAgICAgICAgICAuLi50cmVlSXRlbVByb3BzLFxyXG4gICAgICAgICAgICAgICAga2V5OiBgdHJlZS1pdGVtLSR7dHJlZUl0ZW1JbmRleH1gLFxyXG4gICAgICAgICAgICB9KTtcclxuICAgICAgICAgICAgdHJlZUl0ZW1JbmRleCsrO1xyXG4gICAgICAgICAgICByZXR1cm4gcHJvY2Vzc2VkSXRlbTtcclxuICAgICAgICB9XHJcbiAgICAgICAgcmV0dXJuIG51bGw7XHJcbiAgICB9KTtcclxuICAgIHJldHVybiAoUmVhY3QuY3JlYXRlRWxlbWVudChJbnZlcnNlQ29udGV4dC5Qcm92aWRlciwgeyB2YWx1ZTogaW52ZXJzZUNvbnRleHRWYWx1ZSB9LFxyXG4gICAgICAgIFJlYWN0LmNyZWF0ZUVsZW1lbnQoVHJlZVZpZXdDb250ZXh0LlByb3ZpZGVyLCB7IHZhbHVlOiBjb250ZXh0VmFsdWUgfSxcclxuICAgICAgICAgICAgUmVhY3QuY3JlYXRlRWxlbWVudChTdHlsZWRUcmVlVmlldywgT2JqZWN0LmFzc2lnbih7fSwgcmVzdCwgeyBcImFyaWEtbGFiZWxcIjogYXJpYUxhYmVsLCBcImFyaWEtbGFiZWxsZWRieVwiOiBhcmlhTGFiZWxsZWRCeSwgXCJhcmlhLW11bHRpc2VsZWN0YWJsZVwiOiBzZWxlY3RhYmxlID09PSBUcmVlVmlld1NlbGVjdGFibGUubXVsdGksIFwiZGF0YS10ZXN0aWRcIjogdGVzdElkLCBpc0ludmVyc2U6IGlzSW52ZXJzZSwgcmVmOiByZWYsIHJvbGU6IFwidHJlZVwiLCB0aGVtZTogdGhlbWUgfSksIHByb2Nlc3NlZENoaWxkcmVuKSkpKTtcclxufSk7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRyZWVWaWV3LmpzLm1hcCJdfQ== */"));
 var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
   var ariaLabel = props.ariaLabel,
     ariaLabelledBy = props.ariaLabelledBy,
@@ -21158,10 +21203,33 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
     itemId: ''
   }, ref);
   var treeItemIndex = 0;
-  return createElement(InverseContext.Provider, {
-    value: {
+  var inverseContextValue = useMemo(function () {
+    return {
       isInverse: isInverse
+    };
+  }, [isInverse]);
+  var processedChildren = Children.map(children, function (child) {
+    if (!isValidElement(child)) {
+      return null;
+    }
+    if (child.type === TreeItem) {
+      var treeItemChild = child;
+      var treeItemProps = {
+        index: treeItemIndex,
+        parentDepth: 0,
+        itemDepth: 0,
+        topLevel: true
+      };
+      var processedItem = cloneElement(treeItemChild, _extends({}, treeItemProps, {
+        key: "tree-item-" + treeItemIndex
+      }));
+      treeItemIndex++;
+      return processedItem;
     }
+    return null;
+  });
+  return createElement(InverseContext.Provider, {
+    value: inverseContextValue
   }, createElement(TreeViewContext.Provider, {
     value: contextValue
   }, createElement(StyledTreeView, Object.assign({}, rest, {
@@ -21173,19 +21241,7 @@ var TreeView = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: ref,
     role: "tree",
     theme: theme
-  }), Children.map(children, function (child) {
-    if (child.type === TreeItem) {
-      var item = 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"];