@syncfusion/ej2-navigations 27.1.58 → 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.
@@ -4888,9 +4888,9 @@ let Toolbar = class Toolbar extends Component {
4888
4888
  return;
4889
4889
  }
4890
4890
  const alignDiv = [];
4891
- alignDiv.push(this.createElement('div', { className: CLS_TBARLEFT }));
4892
- alignDiv.push(this.createElement('div', { className: CLS_TBARCENTER }));
4893
- alignDiv.push(this.createElement('div', { className: CLS_TBARRIGHT }));
4891
+ alignDiv.push(this.createElement('div', { className: CLS_TBARLEFT, attrs: { role: 'group' } }));
4892
+ alignDiv.push(this.createElement('div', { className: CLS_TBARCENTER, attrs: { role: 'group' } }));
4893
+ alignDiv.push(this.createElement('div', { className: CLS_TBARRIGHT, attrs: { role: 'group' } }));
4894
4894
  if (pos === 0 && item.align !== 'Left') {
4895
4895
  alignDiv.forEach((ele) => {
4896
4896
  itemEle.appendChild(ele);
@@ -7655,6 +7655,20 @@ let Tab = class Tab extends Component {
7655
7655
  this.renderReactTemplates();
7656
7656
  }
7657
7657
  }
7658
+ /**
7659
+ * Reorganizes and adjusts the Tab headers to fit the available width without re-rendering the entire Tab component.
7660
+ *
7661
+ * This method is useful for optimizing the layout when:
7662
+ * - A hidden tab item becomes visible.
7663
+ * - The number of tab items changes dynamically.
7664
+ *
7665
+ * @returns {void} This method does not return a value.
7666
+ */
7667
+ refreshOverflow() {
7668
+ if (!isNullOrUndefined(this.tbObj)) {
7669
+ this.tbObj.refreshOverflow();
7670
+ }
7671
+ }
7658
7672
  /**
7659
7673
  * Initialize component
7660
7674
  *
@@ -7699,9 +7713,7 @@ let Tab = class Tab extends Component {
7699
7713
  this.initRender = false;
7700
7714
  if (this.isReact && this.portals && this.portals.length > 0) {
7701
7715
  this.renderReactTemplates(() => {
7702
- if (!isNullOrUndefined(this.tbObj)) {
7703
- this.tbObj.refreshOverflow();
7704
- }
7716
+ this.refreshOverflow();
7705
7717
  this.refreshActiveBorder();
7706
7718
  });
7707
7719
  }
@@ -7995,7 +8007,7 @@ let Tab = class Tab extends Component {
7995
8007
  else {
7996
8008
  trg.classList.remove(CLS_CLOSE_SHOW);
7997
8009
  }
7998
- this.tbObj.refreshOverflow();
8010
+ this.refreshOverflow();
7999
8011
  this.refreshActiveTabBorder();
8000
8012
  }
8001
8013
  prevCtnAnimation(prev, current) {
@@ -9363,8 +9375,8 @@ let Tab = class Tab extends Component {
9363
9375
  if (!isNullOrUndefined(item.firstElementChild)) {
9364
9376
  item.firstElementChild.setAttribute('aria-hidden', '' + value);
9365
9377
  }
9366
- if (this.overflowMode === 'Popup' && this.tbObj) {
9367
- this.tbObj.refreshOverflow();
9378
+ if (this.overflowMode === 'Popup') {
9379
+ this.refreshOverflow();
9368
9380
  }
9369
9381
  }
9370
9382
  selectTab(args, event = null, isInteracted = false) {
@@ -10582,7 +10594,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
10582
10594
  if (this.showCheckBox) {
10583
10595
  const checkboxEle = createCheckBox(this.createElement, true, { cssClass: this.touchClass });
10584
10596
  checkboxEle.classList.add(CHECKBOXWRAP);
10585
- const icon = select('div.' + ICON, e.item);
10597
+ const icon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, e.item);
10586
10598
  const id = e.item.getAttribute('data-uid');
10587
10599
  e.item.childNodes[0].insertBefore(checkboxEle, e.item.childNodes[0].childNodes[isNullOrUndefined(icon) ? 0 : 1]);
10588
10600
  const checkValue = getValue(e.fields.isChecked, e.curData);
@@ -10813,7 +10825,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
10813
10825
  }
10814
10826
  count = childItems.length;
10815
10827
  }
10816
- if (this.autoCheck && this.showCheckBox) {
10828
+ if (this.autoCheck && this.showCheckBox && !(this.fields.dataSource instanceof DataManager)) {
10817
10829
  const selectedChildNodeDetails = this.getSelectedChildNodeDetails(dataUid);
10818
10830
  matchedChildNodes = selectedChildNodeDetails;
10819
10831
  oldChildCount = new DataManager(this.checkActionNodes)
@@ -13521,7 +13533,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
13521
13533
  if (isNullOrUndefined(dropIcon)) {
13522
13534
  ListBase.generateIcon(this.createElement, dropLi, EXPANDABLE, this.listBaseOption);
13523
13535
  }
13524
- const icon = select('div.' + ICON, dropLi);
13536
+ const icon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, dropLi);
13525
13537
  if (icon) {
13526
13538
  icon.classList.add('e-icon-expandable');
13527
13539
  }
@@ -13544,7 +13556,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
13544
13556
  if (isNullOrUndefined(dropIcon)) {
13545
13557
  ListBase.generateIcon(this.createElement, dropLi, COLLAPSIBLE, this.listBaseOption);
13546
13558
  }
13547
- let icon = select('div.' + ICON, dropLi);
13559
+ let icon = select('div.' + EXPANDABLE + ', div.' + COLLAPSIBLE, dropLi);
13548
13560
  if (icon) {
13549
13561
  removeClass([icon], EXPANDABLE);
13550
13562
  }
@@ -13558,6 +13570,12 @@ let TreeView = TreeView_1 = class TreeView extends Component {
13558
13570
  this.addExpand(dropLi);
13559
13571
  this.trigger('nodeExpanded', this.getExpandEvent(dropLi, null));
13560
13572
  }
13573
+ const collapseIcon = select('div.' + COLLAPSIBLE, dropLi);
13574
+ if (!isNullOrUndefined(dropUl) && collapseIcon && this.preventExpand) {
13575
+ removeClass([collapseIcon], COLLAPSIBLE);
13576
+ dropLi.setAttribute('aria-expanded', 'false');
13577
+ addClass([collapseIcon], EXPANDABLE);
13578
+ }
13561
13579
  return dropUl;
13562
13580
  }
13563
13581
  updateElement(dragParentUl, dragParentLi) {
@@ -13880,7 +13898,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
13880
13898
  if (!isNullOrUndefined(dropLi)) {
13881
13899
  dropIcon1 = select('div.' + ICON, dropLi);
13882
13900
  }
13883
- if (this.dataType === 1 && dropIcon1 && dropIcon1.classList.contains(EXPANDABLE) && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
13901
+ if (this.dataType === 1 && dropIcon1 && dropIcon1.classList.contains(EXPANDABLE) && this.preventExpand && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
13884
13902
  this.preventExpand = true;
13885
13903
  }
13886
13904
  if (this.dataType !== 1) {
@@ -13901,7 +13919,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
13901
13919
  for (let i = 0; i < li.length; i++) {
13902
13920
  dropUl.insertBefore(li[parseInt(i.toString(), 10)], refNode);
13903
13921
  }
13904
- if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
13922
+ if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !this.preventExpand && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
13905
13923
  this.preventExpand = false;
13906
13924
  const dropIcon = select('div.' + ICON, dropLi);
13907
13925
  if (dropIcon && dropIcon.classList.contains(EXPANDABLE) && (isNullOrUndefined(args) || args.name !== 'nodeExpanding')) {
@@ -13914,7 +13932,7 @@ let TreeView = TreeView_1 = class TreeView extends Component {
13914
13932
  for (let i = 0; i < li.length; i++) {
13915
13933
  dropUl.insertBefore(li[parseInt(i.toString(), 10)], refNode);
13916
13934
  }
13917
- if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
13935
+ if (this.dataType === 1 && !isNullOrUndefined(dropLi) && !this.preventExpand && !isNullOrUndefined(this.element.offsetParent) && !this.element.offsetParent.parentElement.classList.contains('e-filemanager')) {
13918
13936
  this.preventExpand = false;
13919
13937
  const dropIcon = select('div.' + ICON, dropLi);
13920
13938
  if (dropIcon && dropIcon.classList.contains(EXPANDABLE) && (isNullOrUndefined(args) || args.name !== 'nodeExpanding')) {