@syncfusion/ej2-navigations 27.1.57 → 27.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1376,6 +1376,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
1376
1376
  this.delegateMouseDownHandler = this.mouseDownHandler.bind(this);
1377
1377
  EventHandler.add(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler, this);
1378
1378
  EventHandler.add(document, 'mousedown', this.delegateMouseDownHandler, this);
1379
+ if (!this.isMenu && !this.target) {
1380
+ EventHandler.add(document, 'scroll', this.scrollHandler, this);
1381
+ }
1379
1382
  }
1380
1383
  this.delegateClickHandler = this.clickHandler.bind(this);
1381
1384
  EventHandler.add(document, 'click', this.delegateClickHandler, this);
@@ -1741,7 +1744,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
1741
1744
  _this.afterCloseMenu(e);
1742
1745
  }
1743
1746
  else if (isOpen && !_this.hamburgerMode && closedLi && !trgtLi && _this.keyType !== 'left' && (_this.navIdx.length || !_this.isMenu && _this.navIdx.length === 0)) {
1744
- var ele = (e && (e.target.classList.contains('e-vscroll') || e.target.classList.contains('e-scroll-nav')))
1747
+ var ele = (e && e.target.classList && (e.target.classList.contains('e-vscroll') || e.target.classList.contains('e-scroll-nav')))
1745
1748
  ? closest(e.target, '.e-menu-wrapper') : null;
1746
1749
  if (ele) {
1747
1750
  ele = ele.querySelector('.e-menu-item');
@@ -1750,7 +1753,7 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
1750
1753
  }
1751
1754
  }
1752
1755
  else {
1753
- if (!(e && e.target.classList.contains('e-nav-arrow'))) {
1756
+ if (!(e && e.target.classList && e.target.classList.contains('e-nav-arrow'))) {
1754
1757
  _this.closeMenu(_this.navIdx[_this.navIdx.length - 1], e);
1755
1758
  }
1756
1759
  }
@@ -2963,6 +2966,9 @@ var MenuBase = /** @__PURE__ @class */ (function (_super) {
2963
2966
  if (!Browser.isDevice) {
2964
2967
  EventHandler.remove(this.isMenu ? document : wrapper, 'mouseover', this.delegateMoverHandler);
2965
2968
  EventHandler.remove(document, 'mousedown', this.delegateMouseDownHandler);
2969
+ if (!this.isMenu && !this.target) {
2970
+ EventHandler.remove(document, 'scroll', this.scrollHandler);
2971
+ }
2966
2972
  }
2967
2973
  EventHandler.remove(document, 'click', this.delegateClickHandler);
2968
2974
  this.unWireKeyboardEvent(wrapper);
@@ -5033,9 +5039,9 @@ var Toolbar = /** @__PURE__ @class */ (function (_super) {
5033
5039
  return;
5034
5040
  }
5035
5041
  var alignDiv = [];
5036
- alignDiv.push(this.createElement('div', { className: CLS_TBARLEFT }));
5037
- alignDiv.push(this.createElement('div', { className: CLS_TBARCENTER }));
5038
- alignDiv.push(this.createElement('div', { className: CLS_TBARRIGHT }));
5042
+ alignDiv.push(this.createElement('div', { className: CLS_TBARLEFT, attrs: { role: 'group' } }));
5043
+ alignDiv.push(this.createElement('div', { className: CLS_TBARCENTER, attrs: { role: 'group' } }));
5044
+ alignDiv.push(this.createElement('div', { className: CLS_TBARRIGHT, attrs: { role: 'group' } }));
5039
5045
  if (pos === 0 && item.align !== 'Left') {
5040
5046
  alignDiv.forEach(function (ele) {
5041
5047
  itemEle.appendChild(ele);
@@ -7918,6 +7924,20 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
7918
7924
  this.renderReactTemplates();
7919
7925
  }
7920
7926
  };
7927
+ /**
7928
+ * Reorganizes and adjusts the Tab headers to fit the available width without re-rendering the entire Tab component.
7929
+ *
7930
+ * This method is useful for optimizing the layout when:
7931
+ * - A hidden tab item becomes visible.
7932
+ * - The number of tab items changes dynamically.
7933
+ *
7934
+ * @returns {void} This method does not return a value.
7935
+ */
7936
+ Tab.prototype.refreshOverflow = function () {
7937
+ if (!isNullOrUndefined(this.tbObj)) {
7938
+ this.tbObj.refreshOverflow();
7939
+ }
7940
+ };
7921
7941
  /**
7922
7942
  * Initialize component
7923
7943
  *
@@ -7963,9 +7983,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
7963
7983
  this.initRender = false;
7964
7984
  if (this.isReact && this.portals && this.portals.length > 0) {
7965
7985
  this.renderReactTemplates(function () {
7966
- if (!isNullOrUndefined(_this.tbObj)) {
7967
- _this.tbObj.refreshOverflow();
7968
- }
7986
+ _this.refreshOverflow();
7969
7987
  _this.refreshActiveBorder();
7970
7988
  });
7971
7989
  }
@@ -8261,7 +8279,7 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
8261
8279
  else {
8262
8280
  trg.classList.remove(CLS_CLOSE_SHOW);
8263
8281
  }
8264
- this.tbObj.refreshOverflow();
8282
+ this.refreshOverflow();
8265
8283
  this.refreshActiveTabBorder();
8266
8284
  };
8267
8285
  Tab.prototype.prevCtnAnimation = function (prev, current) {
@@ -9427,6 +9445,11 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
9427
9445
  var _this = this;
9428
9446
  var addArgs = { addedItems: items, cancel: false };
9429
9447
  if (!this.isReplace) {
9448
+ for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
9449
+ var item = items_1[_i];
9450
+ item.disabled = item.disabled || false;
9451
+ item.visible = item.visible || true;
9452
+ }
9430
9453
  this.trigger('adding', addArgs, function (tabAddingArgs) {
9431
9454
  if (!tabAddingArgs.cancel) {
9432
9455
  _this.addingTabContent(items, index);
@@ -9632,11 +9655,15 @@ var Tab = /** @__PURE__ @class */ (function (_super) {
9632
9655
  }
9633
9656
  }
9634
9657
  this.setActiveBorder();
9658
+ if (!isNullOrUndefined(this.items[index])) {
9659
+ this.items[index].visible = !value;
9660
+ this.dataBind();
9661
+ }
9635
9662
  if (!isNullOrUndefined(item.firstElementChild)) {
9636
9663
  item.firstElementChild.setAttribute('aria-hidden', '' + value);
9637
9664
  }
9638
- if (this.overflowMode === 'Popup' && this.tbObj) {
9639
- this.tbObj.refreshOverflow();
9665
+ if (this.overflowMode === 'Popup') {
9666
+ this.refreshOverflow();
9640
9667
  }
9641
9668
  };
9642
9669
  Tab.prototype.selectTab = function (args, event, isInteracted) {
@@ -10898,7 +10925,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
10898
10925
  if (this.showCheckBox) {
10899
10926
  var checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });
10900
10927
  checkboxEle.classList.add(CHECKBOXWRAP);
10901
- var icon = select('div.' + ICON, e.item);
10928
+ var icon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, e.item);
10902
10929
  var id = e.item.getAttribute('data-uid');
10903
10930
  e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNullOrUndefined(icon) ? 0 : 1]);
10904
10931
  var checkValue = getValue(e.fields.isChecked, e.curData);
@@ -11130,7 +11157,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
11130
11157
  }
11131
11158
  count = childItems.length;
11132
11159
  }
11133
- if (this.autoCheck && this.showCheckBox) {
11160
+ if (this.autoCheck && this.showCheckBox && !(this.fields.dataSource instanceof DataManager)) {
11134
11161
  var selectedChildNodeDetails = this.getSelectedChildNodeDetails(dataUid_1);
11135
11162
  matchedChildNodes = selectedChildNodeDetails;
11136
11163
  oldChildCount = new DataManager(this.checkActionNodes)
@@ -13863,7 +13890,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
13863
13890
  if (isNullOrUndefined(dropIcon)) {
13864
13891
  ListBase.generateIcon(this.createElement, dropLi, EXPANDABLE, this.listBaseOption);
13865
13892
  }
13866
- var icon = select('div.' + ICON, dropLi);
13893
+ var icon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, dropLi);
13867
13894
  if (icon) {
13868
13895
  icon.classList.add('e-icon-expandable');
13869
13896
  }
@@ -13886,7 +13913,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
13886
13913
  if (isNullOrUndefined(dropIcon)) {
13887
13914
  ListBase.generateIcon(this.createElement, dropLi, COLLAPSIBLE, this.listBaseOption);
13888
13915
  }
13889
- var icon = select('div.' + ICON, dropLi);
13916
+ var icon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, dropLi);
13890
13917
  if (icon) {
13891
13918
  removeClass([icon], EXPANDABLE);
13892
13919
  }
@@ -13900,6 +13927,12 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
13900
13927
  this.addExpand(dropLi);
13901
13928
  this.trigger('nodeExpanded', this.getExpandEvent(dropLi, null));
13902
13929
  }
13930
+ var collapseIcon = select('div.' + COLLAPSIBLE, dropLi);
13931
+ if (!isNullOrUndefined(dropUl) && collapseIcon && this.preventExpand) {
13932
+ removeClass([collapseIcon], COLLAPSIBLE);
13933
+ dropLi.setAttribute('aria-expanded', 'false');
13934
+ addClass([collapseIcon], EXPANDABLE);
13935
+ }
13903
13936
  return dropUl;
13904
13937
  };
13905
13938
  TreeView.prototype.updateElement = function (dragParentUl, dragParentLi) {
@@ -14225,7 +14258,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14225
14258
  if (!isNullOrUndefined(dropLi)) {
14226
14259
  dropIcon1 = select('div.' + ICON, dropLi);
14227
14260
  }
14228
- if (this.dataType === 1 && dropIcon1 && dropIcon1.classList.contains(EXPANDABLE) && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
14261
+ if (this.dataType === 1 && dropIcon1 && dropIcon1.classList.contains(EXPANDABLE) && this.preventExpand && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
14229
14262
  this.preventExpand = true;
14230
14263
  }
14231
14264
  if (this.dataType !== 1) {
@@ -14246,7 +14279,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14246
14279
  for (var i = 0; i < li.length; i++) {
14247
14280
  dropUl.insertBefore(li[parseInt(i.toString(), 10)], refNode);
14248
14281
  }
14249
- if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
14282
+ if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !this.preventExpand && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
14250
14283
  this.preventExpand = false;
14251
14284
  var dropIcon = select('div.' + ICON, dropLi);
14252
14285
  if (dropIcon && dropIcon.classList.contains(EXPANDABLE) && (isNullOrUndefined(args) || args.name !== 'nodeExpanding')) {
@@ -14259,7 +14292,7 @@ var TreeView = /** @__PURE__ @class */ (function (_super) {
14259
14292
  for (var i = 0; i < li.length; i++) {
14260
14293
  dropUl.insertBefore(li[parseInt(i.toString(), 10)], refNode);
14261
14294
  }
14262
- if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
14295
+ if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !this.preventExpand && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
14263
14296
  this.preventExpand = false;
14264
14297
  var dropIcon = select('div.' + ICON, dropLi);
14265
14298
  if (dropIcon && dropIcon.classList.contains(EXPANDABLE) && (isNullOrUndefined(args) || args.name !== 'nodeExpanding')) {