@syncfusion/ej2-treemap 28.1.39 → 29.1.33

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 28.1.39
+*  version : 29.1.33
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-treemap@*",
-  "_id": "@syncfusion/ej2-treemap@28.1.33",
+  "_id": "@syncfusion/ej2-treemap@16.31.24",
   "_inBundle": false,
-  "_integrity": "sha512-El1k0YtGfUvHSLUWCCf99WYUOuUw90LIVZMDnC8iRwBFGPoZRktjx5h6hnZjs6XmrzVtBLksINCO4Os85tloSw==",
+  "_integrity": "sha512-mn0RrYtSijuv3TanFqBVfP+iP4OgP20jH2TQfZkjiatRK2j1FabYn/nbdit/zZhdBSPHbDOPLuhkjcgG7FX2pQ==",
   "_location": "/@syncfusion/ej2-treemap",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-treemap",
     "/@syncfusion/ej2-vue-treemap"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-treemap/-/ej2-treemap-28.1.33.tgz",
-  "_shasum": "1fac964b894760375cc3c4b74d2542bbae61ea85",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-treemap/-/ej2-treemap-16.31.24.tgz",
+  "_shasum": "7ae216806eb0d8d5d03adef6070b75cd25d0b8b1",
   "_spec": "@syncfusion/ej2-treemap@*",
-  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,12 +35,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~28.1.33",
-    "@syncfusion/ej2-compression": "~28.1.33",
-    "@syncfusion/ej2-data": "~28.1.33",
-    "@syncfusion/ej2-file-utils": "~28.1.33",
-    "@syncfusion/ej2-pdf-export": "~28.1.38",
-    "@syncfusion/ej2-svg-base": "~28.1.37"
+    "@syncfusion/ej2-base": "~29.1.33",
+    "@syncfusion/ej2-compression": "~29.1.33",
+    "@syncfusion/ej2-data": "~29.1.33",
+    "@syncfusion/ej2-file-utils": "~29.1.33",
+    "@syncfusion/ej2-pdf-export": "~29.1.33",
+    "@syncfusion/ej2-svg-base": "~29.1.33"
   },
   "deprecated": false,
   "description": "Essential JS 2 TreeMap Components",
@@ -81,6 +81,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "28.1.39",
+  "version": "29.1.33",
   "sideEffects": false
 }

package/src/treemap/layout/legend.js

@@ -519,7 +519,7 @@ var TreeMapLegend = /** @class */ (function () {
                             legendIndex++;
                         }
                         for (var k = this.legendCollections.length - 1; k >= 0; k--) {
-                            if (this.legendCollections[k]['groupIndex'] === data[i]['groupIndex']) {
+                            if (this.legendCollections[k]['actualValue'] === (colorMap.label || 'Others')) {
                                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                 this.legendCollections[k]['legendData'].push(data[i]);
                                 break;
@@ -616,7 +616,10 @@ var TreeMapLegend = /** @class */ (function () {
                 var text = this.treemap.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(item['text'])) : item['text'];
                 textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', text, '', '');
                 renderTextElement(textOptions, textFont, textFont.color || this.treemap.themeStyle.legendTextColor, this.legendGroup);
-                this.legendGroup.appendChild(render.drawRectangle(rectOptions));
+                var legendElement = render.drawRectangle(rectOptions);
+                legendElement.setAttribute('tabindex', this.treemap.tabIndex.toString());
+                legendElement.style.outline = '';
+                this.legendGroup.appendChild(legendElement);
             }
         }
         legendMaintain(this.treemap, this.legendGroup);
@@ -667,6 +670,8 @@ var TreeMapLegend = /** @class */ (function () {
                 var legendElement = render.createGroup({ id: treemap.element.id + '_Legend_Index_' + i });
                 legendElement.setAttribute('aria-label', legendText + ' Legend');
                 legendElement.setAttribute('role', 'region');
+                legendElement.setAttribute('tabindex', this_1.treemap.tabIndex.toString());
+                legendElement.style.outline = 'none';
                 var shapeId = treemap.element.id + '_Legend_Shape_Index_' + i;
                 var textId = treemap.element.id + '_Legend_Text_Index_' + i;
                 var shapeLocation = collection['Shape'];

package/src/treemap/layout/render-panel.js

@@ -564,10 +564,11 @@ var LayoutPanel = /** @class */ (function () {
                         }
                     }
                     itemGroup.setAttribute('aria-label', item['name']);
-                    if ((_this.treemap.enableDrillDown && isLeafItem) || (_this.treemap.selectionSettings.enable ||
+                    if ((_this.treemap.enableDrillDown && !isLeafItem) || (_this.treemap.selectionSettings.enable ||
                         _this.treemap.highlightSettings.enable)) {
                         itemGroup.setAttribute('role', 'button');
                         itemGroup.setAttribute('tabindex', _this.treemap.tabIndex.toString());
+                        itemGroup.style.outline = 'none';
                         itemGroup.style.cursor = _this.treemap.highlightSettings.enable && !_this.treemap.selectionSettings.enable && (_this.treemap.enableDrillDown && item['groupIndex'] === (_this.treemap.levels.length - 1)) ? 'default' :
                             _this.treemap.highlightSettings.enable && !_this.treemap.selectionSettings.enable && !_this.treemap.enableDrillDown ? 'default' : 'pointer';
                     }

package/src/treemap/treemap.d.ts

@@ -636,7 +636,7 @@ export declare class TreeMap extends Component<HTMLElement> implements INotifyPr
      * @returns {void}
      * @private
      */
-    mouseEndOnTreeMap(e: PointerEvent): void;
+    mouseEndOnTreeMap(e: PointerEvent | KeyboardEvent): void;
     /**
      * This method handles mouse leave event in treemap.
      *
@@ -645,6 +645,31 @@ export declare class TreeMap extends Component<HTMLElement> implements INotifyPr
      * @private
      */
     mouseLeaveOnTreeMap(e: PointerEvent): void;
+    /**
+     * This method is used to perform operations when keyboard up on TreeMap.
+     *
+     * @param {KeyboardEvent} event - Specifies the keyboard event on TreeMap.
+     * @returns {void}
+     * @private
+     */
+    keyUpHandler(event: KeyboardEvent): void;
+    /**
+     * This method is used to perform operations when keyboard down on treemap.
+     *
+     * @param {KeyboardEvent} event - Specifies the keyboard event on treemap.
+     * @returns {void}
+     * @private
+     */
+    keyDownHandler(event: KeyboardEvent): void;
+    /**
+     * This method is used to perform operations when focus out on treemap.
+     *
+     * @param {KeyboardEvent} event - Specifies the keyboard event on treemap.
+     * @returns {void}
+     * @private
+     */
+    focusHandler(event: FocusEvent): void;
+    private removeFocus;
     /**
      * This method is used to select or remove the selection of treemap item based on the provided selection settings.
      *

package/src/treemap/treemap.js

@@ -608,6 +608,9 @@ var TreeMap = /** @class */ (function (_super) {
         EventHandler.remove(this.element, Browser.touchMoveEvent, this.mouseMoveOnTreeMap);
         EventHandler.remove(this.element, Browser.touchEndEvent, this.mouseEndOnTreeMap);
         EventHandler.remove(this.element, 'pointerleave mouseleave', this.mouseLeaveOnTreeMap);
+        EventHandler.remove(this.element, 'keydown', this.keyDownHandler);
+        EventHandler.remove(this.element, 'keyup', this.keyUpHandler);
+        EventHandler.remove(this.element, 'focusout', this.focusHandler);
         window.removeEventListener('resize', this.resizeEvent);
     };
     /**
@@ -623,6 +626,9 @@ var TreeMap = /** @class */ (function (_super) {
         EventHandler.add(this.element, Browser.touchMoveEvent, this.mouseMoveOnTreeMap, this);
         EventHandler.add(this.element, Browser.touchEndEvent, this.mouseEndOnTreeMap, this);
         EventHandler.add(this.element, 'pointerleave mouseleave', this.mouseLeaveOnTreeMap, this);
+        EventHandler.add(this.element, 'keydown', this.keyDownHandler, this);
+        EventHandler.add(this.element, 'keyup', this.keyUpHandler, this);
+        EventHandler.add(this.element, 'focusout', this.focusHandler, this);
         this.resizeEvent = this.resizeOnTreeMap.bind(this);
         window.addEventListener('resize', this.resizeEvent);
     };
@@ -760,6 +766,10 @@ var TreeMap = /** @class */ (function (_super) {
         if (e.target.id.indexOf('_Item_Index') > -1) {
             this.mouseDown = true;
         }
+        if (e.type === 'touchstart' || e.type === 'mousedown') {
+            this.removeFocus('none');
+            e.preventDefault();
+        }
         this.notify(Browser.touchStartEvent, e);
     };
     /**
@@ -779,6 +789,7 @@ var TreeMap = /** @class */ (function (_super) {
         this.trigger(mouseMove, moveArgs);
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var childItems;
+        this.removeFocus('none');
         if (targetId.indexOf('_Item_Index') > -1) {
             item = this.layout.renderItems[parseFloat(targetId.split('_Item_Index_')[1])];
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1053,6 +1064,95 @@ var TreeMap = /** @class */ (function (_super) {
             removeLegend(this.treeMapHighlightModule.shapeHighlightCollection, this);
             this.treeMapHighlightModule.highLightId = '';
         }
+        this.removeFocus('');
+    };
+    /**
+     * This method is used to perform operations when keyboard up on TreeMap.
+     *
+     * @param {KeyboardEvent} event - Specifies the keyboard event on TreeMap.
+     * @returns {void}
+     * @private
+     */
+    TreeMap.prototype.keyUpHandler = function (event) {
+        if (event.code !== 'Tab') {
+            return;
+        }
+        var id = event.target['id'];
+        var targetEle = document.getElementById(id);
+        if ((id.indexOf('Item_Index') > -1 || id.indexOf('Legend') > -1)) {
+            if (this.treeMapTooltipModule) {
+                this.treeMapTooltipModule.removeTooltip();
+            }
+            if (this.treeMapHighlightModule && this.highlightSettings.enable) {
+                targetEle.style.setProperty('outline', 'none');
+                targetEle.classList.add('keyboard-focused');
+                var highlightElement = id.indexOf('_Legend_') > -1 && this.legendSettings.mode === 'Default' ?
+                    targetEle.children[0] : targetEle;
+                this.treeMapHighlightModule.highlightOnMouseMove(highlightElement);
+            }
+            else {
+                this.removeFocus('');
+                targetEle.style.outline = '2px solid black';
+                targetEle.classList.add('keyboard-focused');
+            }
+        }
+        else {
+            removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', this);
+            if (this.treeMapHighlightModule) {
+                removeLegend(this.treeMapHighlightModule.shapeHighlightCollection, this);
+            }
+            this.removeFocus('none');
+        }
+    };
+    /**
+     * This method is used to perform operations when keyboard down on treemap.
+     *
+     * @param {KeyboardEvent} event - Specifies the keyboard event on treemap.
+     * @returns {void}
+     * @private
+     */
+    TreeMap.prototype.keyDownHandler = function (event) {
+        var id = event.target['id'];
+        var targetEle = document.getElementById(id);
+        if (event.code === 'Enter') {
+            if (this.selectionSettings.enable && (id.indexOf('Item_Index') > -1 || id.indexOf('Legend') > -1)) {
+                var selectionElement = id.indexOf('_Legend_') > -1 && this.legendSettings.mode === 'Default' ?
+                    targetEle.children[0] : targetEle;
+                this.treeMapSelectionModule.selectionOnMouseDown(selectionElement);
+            }
+            if (this.enableDrillDown && targetEle.childElementCount > 0) {
+                this.mouseEndOnTreeMap(event);
+            }
+        }
+    };
+    /**
+     * This method is used to perform operations when focus out on treemap.
+     *
+     * @param {KeyboardEvent} event - Specifies the keyboard event on treemap.
+     * @returns {void}
+     * @private
+     */
+    TreeMap.prototype.focusHandler = function (event) {
+        var id = event.target['id'];
+        if (!this.element.contains(event.relatedTarget) ||
+            (id.indexOf('Item_Index') > -1 && event.relatedTarget.id.indexOf('Legend') > -1) ||
+            (id.indexOf('Legend') > -1 && event.relatedTarget.id.indexOf('Item_Index') > -1)) {
+            if (this.treeMapHighlightModule && this.highlightSettings.enable) {
+                removeClassNames(document.getElementsByClassName('treeMapHighLight'), 'treeMapHighLight', this);
+                removeLegend(this.treeMapHighlightModule.legendHighlightCollection, this);
+                this.treeMapHighlightModule.highLightId = '';
+            }
+            else {
+                this.removeFocus('none');
+            }
+        }
+    };
+    TreeMap.prototype.removeFocus = function (outline) {
+        var highlightedElement = document.querySelector('.keyboard-focused');
+        if (highlightedElement) {
+            highlightedElement.style.outline = outline;
+            highlightedElement.classList.remove('keyboard-focused');
+        }
     };
     /**
      * This method is used to select or remove the selection of treemap item based on the provided selection settings.

package/src/treemap/user-interaction/highlight-selection.d.ts

@@ -13,13 +13,21 @@ export declare class TreeMapHighlight {
     currentElement: any[];
     constructor(treeMap: TreeMap);
     /**
-     * Mouse down event in highlight
+     * Mouse Move event in highlight
      *
      * @param {PointerEvent} e - Specifies the pointer argument.
      * @returns {boolean} - return the highlight process is true or false.
      * @private
      */
-    mouseMove(e: PointerEvent): boolean;
+    mouseMove(e: PointerEvent | KeyboardEvent): boolean;
+    /**
+     * This method highlights the target element for mouse move event.
+     *
+     * @param {Element} targetElement - Specifies the target element to highlight.
+     * @returns {boolean} - return the highlight process is true or false.
+     * @private
+     */
+    highlightOnMouseMove(targetElement: Element): boolean;
     /**
      * To bind events for highlight
      *
@@ -66,7 +74,15 @@ export declare class TreeMapSelection {
      * @returns {void}
      * @private
      */
-    mouseDown(e: PointerEvent): void;
+    mouseDown(e: PointerEvent | KeyboardEvent): void;
+    /**
+     * This method selects the target element for mouse down event.
+     *
+     * @param {Element} targetEle - Specifies the target element that was clicked.
+     * @returns {void}
+     * @private
+     */
+    selectionOnMouseDown(targetEle: Element): void;
     /**
      * @param {string} levelOrder - Specifies the level order of treemap item
      * @param {boolean} enable - Specifies the boolean value