@syncfusion/ej2-navigations 27.2.5 → 28.1.33

package/src/stepper-base/stepper-base.js

@@ -19,6 +19,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, NotifyPropertyChanges, Property, ChildProperty, Collection, Event, isNullOrUndefined } from '@syncfusion/ej2-base';
 var PROGRESSVALUE = '--progress-value';
+var PROGRESSPOS = '--progress-position';
+var VERTICALSTEP = 'e-vertical';
+var HORIZSTEP = 'e-horizontal';
+var ITEMLIST = 'e-stepper-steps';
 /**
  * Defines the status of the step.
  */
@@ -138,8 +142,8 @@ var StepperBase = /** @class */ (function (_super) {
     StepperBase.prototype.render = function () {
     };
     StepperBase.prototype.updateOrientaion = function (wrapper) {
-        if (wrapper.classList.contains('e-horizontal') || wrapper.classList.contains('e-vertical')) {
-            wrapper.classList.remove('e-horizontal', 'e-vertical');
+        if (wrapper.classList.contains(HORIZSTEP) || wrapper.classList.contains(VERTICALSTEP)) {
+            wrapper.classList.remove(HORIZSTEP, VERTICALSTEP);
         }
         if (!(isNullOrUndefined(this.orientation))) {
             wrapper.classList.add('e-' + this.orientation.toLocaleLowerCase());
@@ -148,23 +152,23 @@ var StepperBase = /** @class */ (function (_super) {
     StepperBase.prototype.renderProgressBar = function (wrapper) {
         this.progressStep = this.createElement('div', { className: 'e-stepper-progressbar' });
         this.progressbar = this.createElement('div', { className: 'e-progressbar-value' });
+        var beforeLabel = (wrapper.querySelector('li').querySelector('.e-step-label-container'));
         this.progressStep.appendChild(this.progressbar);
         wrapper.prepend(this.progressStep);
         this.progressbar.style.setProperty(PROGRESSVALUE, (0) + '%');
-        var beforeLabel = (wrapper.querySelector('li').querySelector('.e-step-label-container'));
-        if (wrapper.classList.contains('e-vertical')) {
+        if (wrapper.classList.contains(VERTICALSTEP)) {
             if (wrapper.classList.contains('e-label-bottom') || wrapper.classList.contains('e-label-top')) {
-                var stepsContainer = (wrapper.querySelector('.e-stepper-steps'));
-                this.progressStep.style.setProperty('--progress-position', (stepsContainer.offsetWidth / 2) + 'px');
+                var stepsContainer = (wrapper.querySelector('.' + ITEMLIST));
+                this.progressStep.style.setProperty(PROGRESSPOS, (stepsContainer.offsetWidth / 2) + 'px');
             }
             else {
-                this.progressStep.style.setProperty('--progress-position', ((this.progressBarPosition / 2) - 1) + 'px');
+                this.progressStep.style.setProperty(PROGRESSPOS, ((this.progressBarPosition / 2) - 1) + 'px');
             }
         }
         if (beforeLabel && (beforeLabel.classList.contains('e-label-before'))) {
-            this.progressStep.style.setProperty('--progress-position', (((this.progressBarPosition) - 1)) + 5 + 'px');
+            this.progressStep.style.setProperty(PROGRESSPOS, (((this.progressBarPosition) - 1)) + 5 + 'px');
         }
-        if (wrapper.classList.contains('e-horizontal')) {
+        if (wrapper.classList.contains(HORIZSTEP)) {
             this.setProgressPosition(wrapper);
         }
     };
@@ -181,9 +185,9 @@ var StepperBase = /** @class */ (function (_super) {
             }
             this.progressStep.style.setProperty('--progress-top-position', topPos + 'px');
         }
-        var lastEle = wrapper.querySelector('.e-stepper-steps').lastChild.firstChild;
+        var lastEle = wrapper.querySelector('.' + ITEMLIST).lastChild.firstChild;
         if (wrapper.classList.contains('e-rtl')) {
-            var leftPost = ((stepItemEle.offsetLeft + stepItemEle.offsetWidth) - wrapper.querySelector('.e-stepper-steps').offsetWidth);
+            var leftPost = ((stepItemEle.offsetLeft + stepItemEle.offsetWidth) - wrapper.querySelector('.' + ITEMLIST).offsetWidth);
             this.progressStep.style.setProperty('--progress-left-position', Math.abs(leftPost) + 'px');
             this.progressStep.style.setProperty('--progress-bar-width', Math.abs(lastEle.offsetLeft - stepItemEle.offsetLeft) + 'px');
         }

package/src/tab/tab-model.d.ts

@@ -1,5 +1,5 @@
 import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance, isNullOrUndefined, animationMode } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';
-import {HeaderPosition,HeightStyles,ContentLoad,AddEventArgs,SelectingEventArgs,SelectEventArgs,RemoveEventArgs,DragEventArgs} from "./tab";
+import {TabSwipeMode,HeaderPosition,HeightStyles,ContentLoad,AddEventArgs,SelectingEventArgs,SelectEventArgs,RemoveEventArgs,DragEventArgs} from "./tab";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -179,6 +179,19 @@ export interface TabModel extends ComponentModel{
      */
     width?: string | number;
 
+    /**
+     * Defines whether the tab transition should occur or not when performing Touch/Mouse swipe action. 
+     *  
+     * @remarks 
+     * - `Both`: Enables swiping for both touch and mouse input. 
+     * - `Touch`: Enables swiping only for touch input. 
+     * - `Mouse`: Enables swiping only for mouse input. 
+     * - `None`: Disables swiping for both touch and mouse input. 
+     * 
+     * @default "Both"
+     */ 
+    swipeMode?: TabSwipeMode;
+
     /**
      * Specifies the height of the Tab component. By default, Tab height is set based on the height of its parent.
      * To use height property, heightAdjustMode must be set to 'None'.
@@ -245,7 +258,7 @@ export interface TabModel extends ComponentModel{
      * * `Dynamic` - The content of all the tabs are rendered on the initial load and maintained in the DOM.
      * * `Init` - The content of all the tabs are rendered on the initial load and maintained in the DOM.
      *
-     * @default 'Dynamic'
+     * @default 'Demand'
      */
     loadOn?: ContentLoad;
 

package/src/tab/tab.d.ts

@@ -25,6 +25,14 @@ export declare type HeaderPosition = 'Top' | 'Bottom' | 'Left' | 'Right';
  * ```
  */
 export declare type HeightStyles = 'None' | 'Auto' | 'Content' | 'Fill';
+/**
+ * Enables or disables the tab swiping action through Touch and Mouse.
+ * - `Both`: Enables swiping for both touch and mouse input.
+ * - `Touch`: Enables swiping only for touch input.
+ * - `Mouse`: Enables swiping only for mouse input.
+ * - `None`: Disables swiping for both touch and mouse input.
+ */
+export declare type TabSwipeMode = 'Both' | 'Touch' | 'Mouse' | 'None';
 /**
  * Specifies the options of Tab content display mode.
  * ```props
@@ -308,6 +316,18 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
      * @default '100%'
      */
     width: string | number;
+    /**
+     * Defines whether the tab transition should occur or not when performing Touch/Mouse swipe action.
+     *
+     * @remarks
+     * - `Both`: Enables swiping for both touch and mouse input.
+     * - `Touch`: Enables swiping only for touch input.
+     * - `Mouse`: Enables swiping only for mouse input.
+     * - `None`: Disables swiping for both touch and mouse input.
+     *
+     * @default "Both"
+     */
+    swipeMode: TabSwipeMode;
     /**
      * Specifies the height of the Tab component. By default, Tab height is set based on the height of its parent.
      * To use height property, heightAdjustMode must be set to 'None'.
@@ -368,9 +388,9 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
      * * `Dynamic` - The content of all the tabs are rendered on the initial load and maintained in the DOM.
      * * `Init` - The content of all the tabs are rendered on the initial load and maintained in the DOM.
      *
-     * @default 'Dynamic'
+     * @default 'Demand'
      */
-    protected loadOn: ContentLoad;
+    loadOn: ContentLoad;
     /**
      * Enable or disable persisting component's state between page reloads.
      * If enabled, following list of states will be persisted.
@@ -539,6 +559,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     protected render(): void;
     private renderContainer;
     private renderHeader;
+    private createContentElement;
     private renderContent;
     private reRenderItems;
     private parseObject;
@@ -569,6 +590,8 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private changeToolbarOrientation;
     private setOrientation;
     private setCssClass;
+    private loadContentInitMode;
+    private loadContentElement;
     private setContentHeight;
     private getHeight;
     private setActiveBorder;
@@ -578,6 +601,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private refreshActiveBorder;
     private showPopup;
     private bindDraggable;
+    private bindSwipeEvents;
     private wireEvents;
     private unWireEvents;
     private clickHandler;

package/src/tab/tab.js

@@ -453,6 +453,17 @@ var Tab = /** @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.createContentElement = function (index) {
+        var contentElement = this.createElement('div', {
+            id: CLS_CONTENT + this.tabId + '_' + index, className: CLS_ITEM,
+            attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + index }
+        });
+        if (['Dynamic', 'Demand'].indexOf(this.loadOn) !== -1 ||
+            (this.loadOn === 'Init' && index === Number(this.extIndex(this.itemIndexArray[0])))) {
+            addClass([contentElement], CLS_ACTIVE);
+        }
+        return contentElement;
+    };
     Tab.prototype.renderContent = function () {
         this.cntEle = select('.' + CLS_CONTENT, this.element);
         var hdrItem = selectAll('.' + CLS_TB_ITEM, this.element);
@@ -467,11 +478,26 @@ var Tab = /** @class */ (function (_super) {
                 }
             }
         }
+        else {
+            if (selectAll('.' + CLS_TB_ITEM, this.element).length > 0) {
+                if (this.loadOn === 'Init') {
+                    for (var i = 0; i < this.itemIndexArray.length; i++) {
+                        if (this.itemIndexArray[i]) {
+                            this.cntEle.appendChild(this.createContentElement(Number(this.extIndex(this.itemIndexArray[i]))));
+                        }
+                    }
+                }
+                else if (this.loadOn === 'Dynamic') {
+                    this.cntEle.appendChild(this.createContentElement(this.selectedItem > 0 ?
+                        this.selectedItem : Number(this.extIndex(this.itemIndexArray[0]))));
+                }
+            }
+        }
     };
     Tab.prototype.reRenderItems = function () {
         this.renderContainer();
         if (!isNOU(this.cntEle)) {
-            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
+            this.bindSwipeEvents();
         }
     };
     Tab.prototype.parseObject = function (items, index) {
@@ -974,6 +1000,27 @@ var Tab = /** @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.loadContentInitMode = function (ele) {
+        if (!ele) {
+            return;
+        }
+        if (this.loadOn === 'Init') {
+            for (var i = 0; i < this.items.length; i++) {
+                if (this.cntEle.children.item(i)) {
+                    this.getContent(this.cntEle.children.item(i), this.items[i].content, 'render', i);
+                }
+            }
+        }
+        if (this.prevIndex !== this.selectedItem) {
+            ele.classList.remove(CLS_ACTIVE);
+        }
+    };
+    Tab.prototype.loadContentElement = function () {
+        if (!this.isTemplate) {
+            var ele = this.cntEle.children.item(0);
+            this.loadContentInitMode(ele);
+        }
+    };
     Tab.prototype.setContentHeight = function (val) {
         if (this.element.classList.contains(CLS_FILL)) {
             removeClass([this.element], [CLS_FILL]);
@@ -983,6 +1030,7 @@ var Tab = /** @class */ (function (_super) {
         }
         var hdrEle = this.getTabHeader();
         if (this.heightAdjustMode === 'None') {
+            this.loadContentElement();
             if (this.height === 'auto') {
                 return;
             }
@@ -995,6 +1043,7 @@ var Tab = /** @class */ (function (_super) {
         else if (this.heightAdjustMode === 'Fill') {
             addClass([this.element], [CLS_FILL]);
             setStyle(this.element, { 'height': '100%' });
+            this.loadContentElement();
             this.cntEle.style.height = 'calc(100% - ' + this.hdrEle.offsetHeight + 'px)';
         }
         else if (this.heightAdjustMode === 'Auto') {
@@ -1009,11 +1058,8 @@ var Tab = /** @class */ (function (_super) {
             }
             else {
                 this.cntEle = select('.' + CLS_CONTENT, this.element);
-                if (val === true) {
-                    this.cntEle.appendChild(this.createElement('div', {
-                        id: (CLS_CONTENT + this.tabId + '_' + 0), className: CLS_ITEM + ' ' + CLS_ACTIVE,
-                        attrs: { 'role': 'tabpanel', 'aria-labelledby': CLS_ITEM + this.tabId + '_' + 0 }
-                    }));
+                if (val === true && this.loadOn === 'Demand') {
+                    this.cntEle.appendChild(this.createContentElement(Number(this.extIndex(this.itemIndexArray[0]))));
                 }
                 var ele = this.cntEle.children.item(0);
                 for (var i = 0; i < this.items.length; i++) {
@@ -1027,14 +1073,15 @@ var Tab = /** @class */ (function (_super) {
                     this.clearTemplate(['content']);
                 }
                 this.templateEle = [];
-                this.getContent(ele, this.items[0].content, 'render', 0);
-                if (this.prevIndex !== this.selectedItem) {
-                    ele.classList.remove(CLS_ACTIVE);
+                if (this.loadOn === 'Demand') {
+                    this.getContent(ele, this.items[0].content, 'render', 0);
                 }
+                this.loadContentInitMode(ele);
             }
             setStyle(this.cntEle, { 'height': this.maxHeight + 'px' });
         }
         else {
+            this.loadContentElement();
             setStyle(this.cntEle, { 'height': 'auto' });
         }
     };
@@ -1118,7 +1165,7 @@ var Tab = /** @class */ (function (_super) {
             return;
         }
         if (!this.isTemplate) {
-            attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + value });
+            attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + this.extIndex(trg.id) });
         }
         var id = trg.id;
         this.removeActiveClass();
@@ -1139,6 +1186,9 @@ var Tab = /** @class */ (function (_super) {
         }
         else {
             this.cntEle = select('.' + CLS_TAB + ' > .' + CLS_CONTENT, this.element);
+            while (this.loadOn === 'Dynamic' && this.cntEle.firstElementChild) {
+                this.cntEle.removeChild(this.cntEle.firstElementChild);
+            }
             var item = this.getTrgContent(this.cntEle, this.extIndex(id));
             if (isNOU(item)) {
                 this.cntEle.appendChild(this.createElement('div', {
@@ -1214,13 +1264,18 @@ var Tab = /** @class */ (function (_super) {
             }
         }
     };
+    Tab.prototype.bindSwipeEvents = function () {
+        if (this.swipeMode !== 'None') {
+            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
+        }
+    };
     Tab.prototype.wireEvents = function () {
         this.bindDraggable();
         window.addEventListener('resize', this.resizeContext);
         EventHandler.add(this.element, 'mouseover', this.hoverHandler, this);
         EventHandler.add(this.element, 'keydown', this.spaceKeyDown, this);
         if (!isNOU(this.cntEle)) {
-            this.touchModule = new Touch(this.cntEle, { swipe: this.swipeHandler.bind(this) });
+            this.bindSwipeEvents();
         }
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
         this.tabKeyModule = new KeyboardEvents(this.element, {
@@ -1265,7 +1320,9 @@ var Tab = /** @class */ (function (_super) {
         }
     };
     Tab.prototype.swipeHandler = function (e) {
-        if (e.velocity < 3 && isNOU(e.originalEvent.changedTouches)) {
+        if ((e.velocity < 3 && isNullOrUndefined(e.originalEvent.changedTouches)) ||
+            (this.swipeMode === 'Touch' && ((e.originalEvent.type === 'mouseup') || e.originalEvent.type === 'mouseleave')) ||
+            (this.swipeMode === 'Mouse' && e.originalEvent.type === 'touchend') || (this.swipeMode === 'None')) {
             return;
         }
         if (this.isNested) {
@@ -1862,7 +1919,7 @@ var Tab = /** @class */ (function (_super) {
                     _this.items.splice((index + i_1), 0, item);
                     i_1++;
                 }
-                if (_this.isTemplate && !isNOU(item.header) && !isNOU(item.header.text)) {
+                if (!isNOU(item.header) && !isNOU(item.header.text) && (_this.isTemplate || _this.loadOn === 'Init')) {
                     var no = lastEleIndex + place;
                     var ele = _this.createElement('div', {
                         id: CLS_CONTENT + _this.tabId + '_' + no, className: CLS_ITEM,
@@ -2253,6 +2310,13 @@ var Tab = /** @class */ (function (_super) {
                 case 'allowDragAndDrop':
                     this.bindDraggable();
                     break;
+                case 'swipeMode':
+                    if (this.touchModule) {
+                        this.touchModule.destroy();
+                        this.touchModule = null;
+                    }
+                    this.bindSwipeEvents();
+                    break;
                 case 'dragArea':
                     if (this.allowDragAndDrop) {
                         this.draggableItems.forEach(function (item) {
@@ -2404,6 +2468,9 @@ var Tab = /** @class */ (function (_super) {
     __decorate([
         Property('100%')
     ], Tab.prototype, "width", void 0);
+    __decorate([
+        Property('Both')
+    ], Tab.prototype, "swipeMode", void 0);
     __decorate([
         Property('auto')
     ], Tab.prototype, "height", void 0);
@@ -2423,7 +2490,7 @@ var Tab = /** @class */ (function (_super) {
         Property('Scrollable')
     ], Tab.prototype, "overflowMode", void 0);
     __decorate([
-        Property('Dynamic')
+        Property('Demand')
     ], Tab.prototype, "loadOn", void 0);
     __decorate([
         Property(false)

package/src/toolbar/toolbar-model.d.ts

@@ -228,12 +228,6 @@ export interface ToolbarModel extends ComponentModel{
 
     /**
      * Specifies the scrolling distance in scroller.
-     * The possible values for this property as follows
-     * * Scrollable - All the elements are displayed in a single line with horizontal scrolling enabled.
-     * * Popup - Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the *popup*.
-     * * MultiRow - Displays the overflow toolbar items as an in-line of a toolbar.
-     * * Extended - Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
-     * * If the popup content overflows the height of the page, the rest of the elements will be hidden.
      *
      * {% codeBlock src='toolbar/scrollStep/index.md' %}{% endcodeBlock %}
      *

package/src/toolbar/toolbar.d.ts

@@ -299,12 +299,6 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     overflowMode: OverflowMode;
     /**
      * Specifies the scrolling distance in scroller.
-     * The possible values for this property as follows
-     * * Scrollable - All the elements are displayed in a single line with horizontal scrolling enabled.
-     * * Popup - Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the *popup*.
-     * * MultiRow - Displays the overflow toolbar items as an in-line of a toolbar.
-     * * Extended - Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
-     * * If the popup content overflows the height of the page, the rest of the elements will be hidden.
      *
      * {% codeBlock src='toolbar/scrollStep/index.md' %}{% endcodeBlock %}
      *

package/src/treeview/treeview.d.ts

@@ -548,6 +548,7 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
     private isDropIn;
     private DDTTreeData;
     private OldCheckedData;
+    private isHiddenItem;
     /**
      * Indicates whether the TreeView allows drag and drop of nodes. To drag and drop a node in
      * desktop, hold the mouse on the node, drag it to the target node and drop the node by releasing
@@ -1304,15 +1305,6 @@ export declare class TreeView extends Component<HTMLElement> implements INotifyP
      * @private
      */
     private setValidCheckedNode;
-    /**
-     * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)
-     *
-     * @param {Object[]} childItems - The child items to check.
-     * @param {string} node - The node to set the check state for.
-     * @param {Object} [treeData] - The optional tree data.
-     * @returns {void}
-     * @private
-     */
     /**
      * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)
      *

package/src/treeview/treeview.js

@@ -220,6 +220,7 @@ var TreeView = /** @class */ (function (_super) {
         _this.mouseDownStatus = false;
         _this.isDropIn = false;
         _this.OldCheckedData = [];
+        _this.isHiddenItem = false;
         return _this;
     }
     TreeView_1 = TreeView;
@@ -716,10 +717,6 @@ var TreeView = /** @class */ (function (_super) {
                     this.changeState(node, 'uncheck', null, true, true);
                 }
             }
-            var parentElement = closest(node, '.' + PARENTITEM);
-            if (!isNOU(parentElement)) {
-                this.ensureParentCheckState(closest(parentElement, '.' + LISTITEM));
-            }
         }
     };
     /**
@@ -1838,6 +1835,9 @@ var TreeView = /** @class */ (function (_super) {
             this.expandArgs.isInteracted = this.isInteracted;
             this.trigger('nodeExpanded', this.expandArgs);
         }
+        if (this.isHiddenItem) {
+            this.collapseAll([this.getNodeData(currLi).id]);
+        }
     };
     TreeView.prototype.addExpand = function (liEle) {
         liEle.setAttribute('aria-expanded', 'true');
@@ -2370,7 +2370,9 @@ var TreeView = /** @class */ (function (_super) {
         this.expandOnType = (this.expandOn === 'Auto') ? (Browser.isDevice ? 'Click' : 'DblClick') : this.expandOn;
     };
     TreeView.prototype.expandHandler = function (e) {
-        var target = e.originalEvent.target;
+        var target = Browser.isDevice && e.originalEvent.changedTouches && !Browser.isIos
+            ? document.elementFromPoint(e.originalEvent.changedTouches[0].clientX, e.originalEvent.changedTouches[0].clientY)
+            : e.originalEvent.target;
         if (!target || target.classList.contains(INPUT) || target.classList.contains(ROOT) ||
             target.classList.contains(PARENTITEM) || target.classList.contains(LISTITEM) ||
             target.classList.contains(ICON) || this.showCheckBox && closest(target, '.' + CHECKBOXWRAP)) {
@@ -4722,15 +4724,6 @@ var TreeView = /** @class */ (function (_super) {
             }
         }
     };
-    /**
-     * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)
-     *
-     * @param {Object[]} childItems - The child items to check.
-     * @param {string} node - The node to set the check state for.
-     * @param {Object} [treeData] - The optional tree data.
-     * @returns {void}
-     * @private
-     */
     /**
      * Checks whether the checkedNodes entered are valid and sets the valid checkedNodes while changing via setmodel(for hierarchical DS)
      *
@@ -5213,9 +5206,11 @@ var TreeView = /** @class */ (function (_super) {
                     var pid = getValue(this.fields.parentID, nodes[parseInt(i.toString(), 10)]);
                     dropLi = pid ? this.getElement(pid.toString()) : pid;
                     if (!isNullOrUndefined(pid) && isNullOrUndefined(dropLi)) {
+                        this.isHiddenItem = true;
                         this.preventExpand = false;
                         this.ensureVisible(pid);
                         this.preventExpand = preventTargetExpand;
+                        this.isHiddenItem = false;
                         dropLi = this.getElement(pid.toString());
                     }
                     this.addGivenNodes([nodes[parseInt(i.toString(), 10)]], dropLi, index);
@@ -5324,7 +5319,7 @@ var TreeView = /** @class */ (function (_super) {
         else if (this.dataType === 2) {
             parentsId = this.getHierarchicalParentId(node, this.treeData, parentsId);
         }
-        this.expandAll(parentsId.reverse());
+        this.expandAll(parentsId.reverse(), null, null, this.isHiddenItem);
         var liEle = this.getElement(node);
         if (!isNOU(liEle)) {
             if (typeof node == 'object') {
@@ -5424,10 +5419,16 @@ var TreeView = /** @class */ (function (_super) {
      * @returns {void}
      */
     TreeView.prototype.moveNodes = function (sourceNodes, target, index, preventTargetExpand) {
+        if (isNOU(sourceNodes) || sourceNodes.length === 0) {
+            return;
+        }
         var dropLi = this.getElement(target);
         var nodeData = [];
         if (isNOU(dropLi)) {
-            return;
+            this.isHiddenItem = true;
+            this.ensureVisible(target);
+            this.isHiddenItem = false;
+            dropLi = this.getElement(target);
         }
         for (var i = 0; i < sourceNodes.length; i++) {
             var dragLi = this.getElement(sourceNodes[parseInt(i.toString(), 10)]);