Merge branch 'release/2.0' into ui-improvements

src/ListTabulator/index.ts

@@ -613,15 +613,10 @@ export default class ListTabulator<Renderer extends ListRenderer> {
     focusItem(item, false);
 
     /**
-     * If previous parent's children list is now empty, remove it.
+     * If parent item has empty child wrapper after unshifting of the current item, then we need to remove child wrapper
+     * This case could be reached if the only child item of the parent was unshifted
      */
-    const parentItemChildWrapper = getItemChildWrapper(parentItem);
-
-    if (!parentItemChildWrapper) {
-      return;
-    }
-
-    removeChildWrapperIfEmpty(parentItemChildWrapper);
+    removeChildWrapperIfEmpty(parentItem);
   }
 
   /**
@@ -858,14 +853,11 @@ export default class ListTabulator<Renderer extends ListRenderer> {
        */
       item.remove();
 
-      const targetItemChildWrapper = getItemChildWrapper(targetItem);
-
       /**
-       * Remove target item child wrapper if it is empty
+       * If target item has empty child wrapper after merge, we need to remove child wrapper
+       * This case could be reached if the only child item of the target was merged with target
        */
-      if (targetItemChildWrapper !== null) {
-        removeChildWrapperIfEmpty(targetItemChildWrapper);
-      }
+      removeChildWrapperIfEmpty(targetItem);
 
       return;
     }
@@ -1002,14 +994,12 @@ export default class ListTabulator<Renderer extends ListRenderer> {
       prevItem.appendChild(prevItemChildrenListWrapper);
     }
 
-    const currentItemChildWrapper = getItemChildWrapper(currentItem);
-
     /**
-     * Remove child wrapper after moving all children
+     * Remove child wrapper of the current item if it is empty after adding the tab
+     * This case would be reached, because after adding tab current item will have same nesting level with children
+     * So its child wrapper would be empty
      */
-    if (currentItemChildWrapper !== null) {
-      removeChildWrapperIfEmpty(currentItemChildWrapper);
-    }
+    removeChildWrapperIfEmpty(currentItem);
 
     focusItem(currentItem, false);
   }

src/utils/removeChildWrapperIfEmpty.ts

@@ -1,15 +1,31 @@
-import type { ItemChildWrapperElement } from '../types/Elements';
+import { DefaultListCssClasses } from '../ListRenderer';
+import type { ItemChildWrapperElement, ItemElement } from '../types/Elements';
 import { getChildItems } from './getChildItems';
+import { getItemChildWrapper } from './getItemChildWrapper';
 
 /**
  * Method that will remove passed child wrapper if it has no child items
- * @param childWrapper - childWrapper to be removed if it is empty
+ * @param element - child wrapper or actual item, from where we get child wrapper
  */
-export function removeChildWrapperIfEmpty(childWrapper: ItemChildWrapperElement): void {
+// eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
+export function removeChildWrapperIfEmpty(element: ItemChildWrapperElement | ItemElement): void {
+  let itemChildWrapper: HTMLElement | null = element;
+
+  /**
+   * If passed element is list item than get item's child wrapper
+   */
+  if (element.classList.contains(DefaultListCssClasses.item)) {
+    itemChildWrapper = getItemChildWrapper(element);
+  }
+
+  if (itemChildWrapper === null) {
+    return;
+  }
+
   /**
    * Check that there is at least one item
    */
-  if (getChildItems(childWrapper).length === 0) {
-    childWrapper.remove();
+  if (getChildItems(itemChildWrapper).length === 0) {
+    itemChildWrapper.remove();
   }
 }