@oracle/oraclejet 16.0.6 → 16.1.0

package/dist/js/libs/oj/debug_esm/ojcspexpressionevaluator.js

@@ -53,8 +53,11 @@ import 'ojs/ojkoshared';
  *  <li>Literals, e.g. <code>[['abc']]</code>.</li>
  *  <li>Function callbacks, e.g. <code>[[getColor('customer', id)]]</code>.</li>
  *  <li>Unary operators are limited to '-', '+', '~', '!' and '...', e.g. <code>[[-100]]</code>.</li>
+ *  <li>Instanceof or typeof operators such as <code>'date instanceof Date'</code></li>
  *  <li>Binary operators, e.g. <code>[[value + '.png']]</code>.</li>
+ *  <li>Exponentiation (**) such as <code>'3 ** 4'</code></li>
  *  <li>Logical operators, e.g. <code>[[a && b]]</code> or <code>[[a || b]]</code>.</li>
+ *  <li>Nullish coalescing operator (??) such as <code>'value ?? "default value"'</code></li>
  *  <li>Conditional or ternary operators, e.g. <code>[[test ? consequent : alternate]]</code>.</li>
  *  <li>Optional chaining operators, e.g. <code>[[a?.b]]</code>.</li>
  *  <li>Array literals, e.g. <code>[a, b, c]</code>.</li>
@@ -72,12 +75,9 @@ import 'ojs/ojkoshared';
  *  <li>Assignment operators of any types such as <code>'='</code> or <code>'+='</code> or <code>'|='</code></li>
  *  <li>Blocks of code such as <code>'if (...){}'</code></li>
  *  <li>Comma operator (,) such as <code>'(expr1, expr2)'</code></li>
- *  <li>Exponentiation (**) such as <code>' 3 ** 4'</code></li>
  *  <li>in operator such as <code>'prop in testObject'</code></li>
  *  <li>Increment/decrement operators such as <code>'x++'</code> or <code>'x--'</code></li>
  *  <li>Inline regular expressions such as <code>'testString.match(/abc/i)'</code></li>
- *  <li>Instanceof or typeof operators such as <code>'date instanceof Date'</code></li>
- *  <li>Nullish coalescing operator (??) such as <code>'value ?? "default value"'</code></li>
  *  <li>Spread operator (...) such as <code>'sum(...arrayValue)'</code></li>
  * <ul>
  * </h2>

package/dist/js/libs/oj/debug_esm/ojcustomelement-utils.js

@@ -348,6 +348,9 @@ class CustomElementUtils {
         }
         return true;
     }
+    static cleanComponentBindings(element) {
+        CustomElementUtils.getElementState(element)?.getBindingProviderCleanNode()(element);
+    }
     static getClassSet(strClass) {
         if (strClass) {
             const arClasses = strClass.split(/\s+/).filter((cls) => cls.length > 0);

package/dist/js/libs/oj/debug_esm/ojdatagrid.js

@@ -2410,9 +2410,10 @@ const DvtDataGridOptions = function (options, rendererWrapperFunction) {
  * @param {string=} arg2 - key to extract in the value of object[arg1]
  * @param {string=} arg3 - key to extract in the value of object[arg1][arg2]
  * @param {string=} arg4 - key to extract in the value of object[arg1][arg2][arg3]
+ * @param {string=} arg5 - key to extract in the value of object[arg1][arg2][arg3][arg4]
  * @return {string|number|Object|boolean|null}
  */
-DvtDataGridOptions.prototype.extract = function (arg1, arg2, arg3, arg4) {
+DvtDataGridOptions.prototype.extract = function (arg1, arg2, arg3, arg4, arg5) {
   if (arg1 != null) {
     var val1 = this.options[arg1];
     if (arg2 != null && val1 != null) {
@@ -2420,7 +2421,11 @@ DvtDataGridOptions.prototype.extract = function (arg1, arg2, arg3, arg4) {
       if (arg3 != null && val2 != null) {
         var val3 = val2[arg3];
         if (arg4 != null && val3 != null) {
-          return val3[arg4];
+          var val4 = val3[arg4];
+          if (arg5 != null && val4 != null) {
+            return val4[arg5];
+          }
+          return val4;
         }
         return val3;
       }
@@ -2882,10 +2887,13 @@ DvtDataGridOptions.prototype.getAlignment = function (property, axis, obj, label
   if (axis === 'cell') {
     v = this.extract('cell', 'alignment', property);
   } else if (label) {
-    v = this.getRawProperty('alignment', axis, label)[property];
+    v = this.extract('header', axis, 'label', 'alignment', property);
   } else {
     v = this.extract('header', axis, 'alignment', property);
   }
+  if (v == null) {
+    v = 'auto';
+  }
   if (obj != null) {
     return this.evaluate(v, obj);
   }
@@ -19202,6 +19210,7 @@ DvtDataGrid.prototype._findHeaderByKey = function (key, root, className) {
   for (let i = 0; i < sections.length; i++) {
     headers.push(...sections[i].getElementsByClassName(className));
   }
+
   for (var i = 0; i < headers.length; i++) {
     var header = headers[i];
     var headerKey = this._getKey(header);
@@ -22011,7 +22020,7 @@ DvtDataGrid.prototype.handleHeaderFocusChange = function (
           let i = 1;
           while (newElement != null && this.isHeaderHidden(newElement)) {
             newIndex = index - 1 - i;
-            newElement = this._getHeaderByIndex(newIndex - 1, axis, level);
+            newElement = this._getHeaderByIndex(newIndex, axis, level);
             i += 1;
           }
           newIndex =
@@ -39901,8 +39910,8 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
      * @instance
      * @property {'columnHeaderHeight' | 'columnEndHeaderHeight' | 'rowHeaderWidth' | 'rowEndHeaderWidth'| 'columnWidth' | 'rowHeight'} dimension the dimension for which resize is occurring
      * @property {number} size the new size of the cell with direction implied for which resize is occurring
-     * @property {Array<number>| undefined} level the level of the cell for which resize is occurring (only set if dimension = 'columnWidth' | 'rowHeight')
-     * @property {Array<number> | undefined} indices array of indexs for which resize is occurring (only set if dimension = 'columnHeaderHeight' | 'columnEndHeaderHeight' | 'rowHeaderWidth' | 'rowEndHeaderWidth'| 'columnWidth')
+     * @property {Array<number>| undefined} levels array of levels of the header / header label for which resize is occurring (only set if dimension = 'columnHeaderHeight' | 'columnEndHeaderHeight' | 'rowHeaderWidth' | 'rowEndHeaderWidth')
+     * @property {Array<number> | undefined} indices array of indexes for which resize is occurring (only set if dimension = 'columnWidth' | 'rowHeight')
      */
     cellResize: null,
 
@@ -42993,17 +43002,19 @@ DvtDataGrid.prototype._getHeadersUnderLevel = function (
       this.getMappedStyle('endheadercell')
     );
     if (!isEndHeader) {
-      if (!headersUnderLevel[headerLevel]) {
-        headersUnderLevel[headerLevel] = [];
-      }
       if ((headerLevelCount > 1 && headerLevel >= level) || headerLevelCount === 1) {
+        // assign array only if the headerLevel conditions are met. JET-65934
+        if (!headersUnderLevel[headerLevel]) {
+          headersUnderLevel[headerLevel] = [];
+        }
         headersUnderLevel[headerLevel].push(headers[i]);
       }
     } else if (isEndHeader) {
-      if (!endHeadersUnderLevel[headerLevel]) {
-        endHeadersUnderLevel[headerLevel] = [];
-      }
       if ((endHeaderLevelCount > 1 && headerLevel >= level) || endHeaderLevelCount === 1) {
+        // assign array only if the headerLevel conditions are met. JET-65934
+        if (!endHeadersUnderLevel[headerLevel]) {
+          endHeadersUnderLevel[headerLevel] = [];
+        }
         endHeadersUnderLevel[headerLevel].push(headers[i]);
       }
     }
@@ -45291,7 +45302,7 @@ DvtDataGrid.prototype._handleFreezeRow = function (event) {
         'row'
       );
       if (this.m_endRowHeader !== -1 && headers && Object.keys(headers).length) {
-        headers = headers[0];
+        headers = headers[Object.keys(headers)];
         header = headers[headers.length - 1];
       } else if (this.m_endRowEndHeader !== -1 && endHeaders && Object.keys(endHeaders).length) {
         endHeaders = endHeaders[0];
@@ -45386,7 +45397,7 @@ DvtDataGrid.prototype._handleFreezeCol = function (event) {
         'column'
       );
       if (this.m_endColHeader !== -1 && headers && Object.keys(headers).length) {
-        headers = headers[0];
+        headers = headers[Object.keys(headers)];
         header = headers[headers.length - 1];
       } else if (this.m_endColEndHeader !== -1 && endHeaders && Object.keys(endHeaders).length) {
         endHeaders = endHeaders[0];
@@ -45846,7 +45857,7 @@ DvtDataGrid.prototype._appendCellsToFrozenColumnContainer = function (index, hea
     databodyFrozenColDirValue = this.getElementDir(this.m_databody, dir);
   }
   let databodyFrozenRowWidth = this.getElementWidth(this.m_databody);
-  if (this.m_databodyFrozenRow) {
+  if (this.m_databodyFrozenRow && this._hasFrozenRows()) {
     databodyFrozenRowWidth = this.getElementWidth(this.m_databodyFrozenRow);
   }
 
@@ -46058,7 +46069,7 @@ DvtDataGrid.prototype._appendCellsToFrozenRowContainer = function (index, header
     databodyFrozenRowTop = this.getElementDir(this.m_databody, 'top');
   }
   let databodyFrozenColHeight = this.getElementHeight(this.m_databody);
-  if (this.m_databodyFrozenCol) {
+  if (this.m_databodyFrozenCol && this._hasFrozenColumns()) {
     databodyFrozenColHeight = this.getElementHeight(this.m_databodyFrozenCol);
   }
 
@@ -46443,7 +46454,7 @@ DvtDataGrid.prototype._removeCellsFromFrozenColumnContainer = function (index) {
   let frozenColWidth = this.getElementWidth(this.m_databodyFrozenCol);
   let databodyFrozenRowWidth = this.getElementWidth(this.m_databody);
 
-  if (this.m_databodyFrozenRow) {
+  if (this.m_databodyFrozenRow && this._hasFrozenRows()) {
     databodyFrozenRowWidth = this.getElementWidth(this.m_databodyFrozenRow);
   }
   const databodyFrozenColDirValue = this.getElementDir(this.m_databodyFrozenCol, dir);
@@ -46643,7 +46654,7 @@ DvtDataGrid.prototype._removeCellsFromFrozenRowContainer = function (index) {
   let databodyFrozenRowTop = this.getElementDir(this.m_databodyFrozenRow, 'top');
 
   let databodyFrozenColHeight = this.getElementHeight(this.m_databody);
-  if (this.m_databodyFrozenCol) {
+  if (this.m_databodyFrozenCol && this._hasFrozenColumns()) {
     databodyFrozenColHeight = this.getElementHeight(this.m_databodyFrozenCol);
   }
 
@@ -46654,8 +46665,8 @@ DvtDataGrid.prototype._removeCellsFromFrozenRowContainer = function (index) {
   let frozenCornerCells = [];
 
   let { headers, endHeaders } = this._getRowHeadersToUnFreeze(index + 1);
-  let headerShiftStartIndex = this.m_columnHeaderLevelCount > 1 ? frozenIndex + 1 : index + 1;
-  let endHeaderShiftStartIndex = this.m_columnEndHeaderLevelCount > 1 ? frozenIndex + 1 : index + 1;
+  let headerShiftStartIndex = this.m_rowHeaderLevelCount > 1 ? frozenIndex + 1 : index + 1;
+  let endHeaderShiftStartIndex = this.m_rowEndHeaderLevelCount > 1 ? frozenIndex + 1 : index + 1;
 
   let startLoop = 0;
   if (this._hasFrozenColumns()) {
@@ -46835,7 +46846,7 @@ DvtDataGrid.prototype._getColumnHeadersToUnFreeze = function (startIndex) {
         headers.push(...indexHeaders);
       }
     } else {
-      for (let j = startIndex; j < this.m_frozenColIndex; ) {
+      for (let j = startIndex; j <= this.m_frozenColIndex; ) {
         let container = this._getHeaderContainer(
           j,
           0,
@@ -46855,7 +46866,7 @@ DvtDataGrid.prototype._getColumnHeadersToUnFreeze = function (startIndex) {
         endHeaders.push(...indexHeaders);
       }
     } else {
-      for (let j = startIndex; j < this.m_frozenColIndex; ) {
+      for (let j = startIndex; j <= this.m_frozenColIndex; ) {
         let container = this._getHeaderContainer(
           j,
           0,
@@ -46882,7 +46893,7 @@ DvtDataGrid.prototype._getRowHeadersToUnFreeze = function (startIndex) {
         headers.push(...indexHeaders);
       }
     } else {
-      for (let j = startIndex; j < this.m_frozenRowIndex; ) {
+      for (let j = startIndex; j <= this.m_frozenRowIndex; ) {
         let container = this._getHeaderContainer(
           j,
           0,
@@ -46903,7 +46914,7 @@ DvtDataGrid.prototype._getRowHeadersToUnFreeze = function (startIndex) {
         endHeaders.push(...indexHeaders);
       }
     } else {
-      for (let j = startIndex; j < this.m_frozenRowIndex; ) {
+      for (let j = startIndex; j <= this.m_frozenRowIndex; ) {
         let container = this._getHeaderContainer(
           j,
           0,

package/dist/js/libs/oj/debug_esm/ojdataproviderscroller.js

@@ -2158,6 +2158,7 @@ IteratingDataProviderContentHandler.prototype.renderInitialSkeletons = function
 };
 
 IteratingDataProviderContentHandler.LOAD_MORE_SKELETONS_ROW_COUNT = 3;
+IteratingDataProviderContentHandler.MAX_SKELETON_COLUMN = 10;
 
 /**
  * Adjust the load more skeleton in the case of component resize/reattach
@@ -2263,7 +2264,10 @@ IteratingDataProviderContentHandler.prototype._fillEmptySpaceWithSkeletons = fun
   var lastItem = this.m_root.lastElementChild;
   var cardWidthWithMargin = cardDim.width + this.getMargin();
   var width = this._getRootElementWidth(true);
-  var count = Math.floor((width - lastItem.offsetLeft - cardWidthWithMargin) / cardWidthWithMargin);
+  var count = Math.min(
+    IteratingDataProviderContentHandler.MAX_SKELETON_COLUMN,
+    Math.floor((width - lastItem.offsetLeft - cardWidthWithMargin) / cardWidthWithMargin)
+  );
   if (count > 0) {
     var container = this._renderSkeletons(count);
     container.style.visibility = 'hidden';
@@ -2283,7 +2287,13 @@ IteratingDataProviderContentHandler.prototype._createLoadMoreSkeletons = functio
     var cardDimension = this._getCardDimension();
     var cardWidth =
       cardDimension === undefined ? this.getDefaultSkeletonDimension().width : cardDimension.width;
-    count = cardWidth === 0 ? 0 : Math.floor(width / (cardWidth + this.getMargin()));
+    count =
+      cardWidth === 0
+        ? 0
+        : Math.min(
+            IteratingDataProviderContentHandler.MAX_SKELETON_COLUMN,
+            Math.floor(width / (cardWidth + this.getMargin()))
+          );
   } else {
     count = IteratingDataProviderContentHandler.LOAD_MORE_SKELETONS_ROW_COUNT;
   }

package/dist/js/libs/oj/debug_esm/ojdiagram-toolkit.js

@@ -1224,7 +1224,8 @@ class DvtDiagramLink extends Container {
     }
 
     DvtDiagramLink._renderLinkLabels(diagram, this.getData(), this);
-    this.setAriaRole('img');
+    //JET-63792 OATB Structure error - Nested
+    this.setAriaRole(this._getCustomRenderer('renderer') ? 'region' : 'img');
     this.UpdateAriaLabel();
     this._diagram.getEventManager().associate(this, this);
   }
@@ -3495,7 +3496,9 @@ class DvtDiagramNode extends Container {
     DvtDiagramNode._renderNodeLabels(this._diagram, nodeData, this);
     this._setDraggableStyleClass();
     DvtDiagramNode._renderContainerButton(this._diagram, nodeData, this);
-    this.setAriaRole(this.isDisclosed() ? 'group' : 'img');
+    //JET-63792 OATB Structure error - Nested
+    var disclosedRole = renderer ? 'region' : 'img';
+    this.setAriaRole(this.isDisclosed() ? 'group' : disclosedRole);
     this.UpdateAriaLabel();
     this._diagram.getEventManager().associate(this, this);
   }
@@ -4158,10 +4161,10 @@ class DvtDiagramNode extends Container {
    * @protected
    * Updates accessibility attributes on selection event
    */
-  UpdateAriaLabel() {
-    if (!Agent.deferAriaCreation()) {
+  UpdateAriaLabel(bForce) {
+    if (!Agent.deferAriaCreation() || bForce) {
       var desc = this.getAriaLabel();
-      if (desc) this.setAriaProperty('label', desc);
+      if (desc) this.setAriaProperty('label', desc, bForce);
     }
   }
 
@@ -5804,6 +5807,21 @@ class DvtDiagramEventManager extends EventManager {
     if (!this._component.isPanning()) super.ShowFocusEffect(event, obj);
   }
 
+  /**
+   * @override
+   */
+  setFocus(navigable) {
+    super.setFocus(navigable);
+    var prevItem = this._component.getOptions().currentItem;
+    var currentItem = navigable ? navigable.getId() : prevItem;
+    this._component.getOptions().currentItem = currentItem;
+    if (!DvtDiagramDataUtils.compareValues(this._component.getCtx(), currentItem, prevItem)) {
+      this._component.dispatchEvent(
+        new EventFactory.newOptionChangeEvent('currentItem', currentItem)
+      );
+    }
+  }
+
   /**
    * @override
    */
@@ -10519,6 +10537,20 @@ class Diagram extends PanZoomComponent {
     var calcViewBounds;
     if (!bEmptyDiagram) {
       this.removeChild(this._oldPanZoomCanvas);
+
+      var options = this.getOptions();
+      // If current item is invalid on initial render, null it out
+      // This matches ListView's current behavior
+      if (
+        this._renderCount === 1 &&
+        options.currentItem !== null &&
+        !this.getObjectById(options.currentItem)
+      ) {
+        this.dispatchEvent(new EventFactory.newOptionChangeEvent('currentItem', null));
+      } else {
+        this.setCurrentItem(options.currentItem);
+      }
+
       this._processHighlighting();
       this._processInitialSelections();
       this._updateKeyboardFocusEffect();
@@ -10610,6 +10642,23 @@ class Diagram extends PanZoomComponent {
     }
   }
 
+  /**
+   * Sets the currentItem
+   * @param { string|number } item id of the current item
+   */
+  setCurrentItem(item, forceDefault) {
+    var navigable = this.getObjectById(item);
+    if (!navigable && forceDefault) {
+      var arNodes = this.GetRootNodeObjects();
+      if (arNodes.length > 0) {
+        navigable = this.getEventManager().getKeyboardHandler().getDefaultNavigable(arNodes);
+      }
+    }
+    if (navigable || item == null) {
+      this.getEventManager().setFocus(navigable);
+    }
+  }
+
   /**
    * Fit and position diagram content into container if necessary
    * @param {Object} panZoomState optional the panZoomState to set the diagram to.
@@ -11134,6 +11183,15 @@ class Diagram extends PanZoomComponent {
     return this._links.get(id);
   }
 
+  /**
+   * Gets a node or link by id
+   * @param {string} id node or link id
+   * @return {DvtDiagramNode|DvtDiagramLink} diagram node or link
+   */
+  getObjectById(id) {
+    return this.getNodeById(id) || this.getLinkById(id);
+  }
+
   /**
    * Gets an array of link ids
    * @return {array} array of link ids
@@ -11825,6 +11883,11 @@ class Diagram extends PanZoomComponent {
       } else {
         this.render(this.getOptions(), this.Width, this.Height);
         this.dispatchEvent(new EventFactory.newEvent('expand', nodeId));
+        // JET-50126 JAWS, Container expand collapse state not read out consistently
+        var displayable = this.getNodeById(nodeId).getDisplayable();
+        displayable.setAriaRole('group', true);
+        displayable.UpdateAriaLabel(true);
+        this.getEventManager().getCtx().setActiveElement(displayable, true);
       }
     }
   }
@@ -11856,6 +11919,15 @@ class Diagram extends PanZoomComponent {
     if (triggerEvent) {
       this.render(this.getOptions(), this.Width, this.Height);
       this.dispatchEvent(new EventFactory.newEvent('collapse', nodeId));
+      // JET-50126 JAWS, Container expand collapse state not read out consistently
+      var displayable = this.getNodeById(nodeId).getDisplayable();
+      displayable.setAriaRole('img', true);
+      displayable.UpdateAriaLabel(true);
+      this.getEventManager().getCtx().setActiveElement(displayable, true);
+      var currentItem = this.getOptions().currentItem;
+      if (!this.getObjectById(currentItem)) {
+        this.setCurrentItem(null, true);
+      }
     }
   }
 

package/dist/js/libs/oj/debug_esm/ojdiagram.js

@@ -45,6 +45,10 @@ var __oj_diagram_metadata =
       "type": "string",
       "value": ""
     },
+    "currentItem": {
+      "type": "any",
+      "writeback": true
+    },
     "data": {
       "type": "object",
       "extension": {
@@ -1320,7 +1324,20 @@ oj.__registerWidget('oj.ojDiagram', $.oj.dvtBaseComponent, {
      * myDiagram.animationOnDisplay="auto";
      */
     animationOnDisplay: 'none',
-
+    /**
+     * The node or link that should receive focus.  Note that if the current item is set to something invalid or to
+     * something hidden inside a collapsed parent node, then the value is not applied.
+     * @ojshortdesc Specifies the node or link that should receive focus.
+     * @expose
+     * @name currentItem
+     * @memberof oj.ojDiagram
+     * @instance
+     * @type {any=}
+     * @ojsignature {target:"Type", value:"K1|K2"}
+     * @default null
+     * @ojwriteback
+     */
+    currentItem: null,
     /**
      * Provides support for HTML5 Drag and Drop events. Please refer to <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop">third party documentation</a> on HTML5 Drag and Drop to learn how to use it.
      * @ojshortdesc Used to customize the drag and drop features.
@@ -3967,13 +3984,16 @@ oj.__registerWidget('oj.ojDiagram', $.oj.dvtBaseComponent, {
   },
 
   _GetOptimizedOptions: function () {
-    return this._super().concat('panZoomState');
+    return this._super().concat(['panZoomState', 'currentItem']);
   },
 
   _UpdateNoRenderOptions: function (options) {
     if (options.panZoomState !== undefined) {
       this._component.panZoom(options.panZoomState);
     }
+    if (options.currentItem !== undefined) {
+      this._component.setCurrentItem(options.currentItem);
+    }
     this._super(options);
   },
 
@@ -4243,6 +4263,24 @@ oj.__registerWidget('oj.ojDiagram', $.oj.dvtBaseComponent, {
     this._super(options);
   },
 
+  /**
+   * Gets the current item.
+   * @private
+   * @memberof oj.ojDiagram
+   */
+  _getCurrentItem: function () {
+    return this._component.getOptions().currentItem;
+  },
+
+  /**
+   * Handles data deletion of the current item.
+   * @private
+   * @memberof oj.ojDiagram
+   */
+  _handleRemoveCurrentItem: function () {
+    return this._component.setCurrentItem(null, true);
+  },
+
   /**
    * Resets the panZoom state if the beforePanZoomReset event is not veto'd
    * @ignore

package/dist/js/libs/oj/debug_esm/ojdialog.js

@@ -4000,6 +4000,7 @@ import { getDeviceRenderMode } from 'ojs/ojconfig';
       var element = this.element;
       var status = oj.ZOrderUtils.getStatus(element);
       if (status === oj.ZOrderUtils.STATUS.OPEN) {
+        CustomElementUtils.cleanComponentBindings(element[0]);
         element.remove();
       }
     },

package/dist/js/libs/oj/debug_esm/ojdrawerlayout.js

@@ -42,6 +42,7 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
         this.bottomClosedWithEsc = false;
         this.overlayDrawerResizeHandler = null;
         this.reflowDrawerResizeHandler = null;
+        this.drawerLayoutResizeHandler = null;
         this.windowResizeHandler = null;
         this.handleResize = true;
         this.state = {
@@ -87,6 +88,10 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
                 this.setBottomOverlayDrawerWidth();
             }
         };
+        this.drawerLayoutResizeCallback = () => {
+            this.setStartEndOverlayDrawersHeight();
+            this.setBottomOverlayDrawerWidth();
+        };
         this.lockResizeListener = () => {
             if (this.handleResize) {
                 this.handleResize = false;
@@ -436,6 +441,13 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
     componentWillUnmount() {
         window.removeEventListener(DrawerConstants.stringResize, this.windowResizeHandler);
         this.windowResizeHandler = null;
+        this.removeDrawerLayoutResizeListener();
+    }
+    removeDrawerLayoutResizeListener() {
+        if (this.drawerLayoutResizeHandler) {
+            removeResizeListener(this.rootRef.current, this.drawerLayoutResizeHandler);
+            this.drawerLayoutResizeHandler = null;
+        }
     }
     handleComponentUpdate(prevState) {
         let sides = [
@@ -475,7 +487,7 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
                 const drawerRef = this.getDrawerRef(edge).current;
                 if (drawerRef) {
                     removeResizeListener(drawerRef, this.reflowDrawerResizeHandler);
-                    this.reflowDrawerResizeHandler === null;
+                    this.reflowDrawerResizeHandler = null;
                 }
                 this.returnFocus(edge);
                 if (this.getStateToChangeTo(edge)) {
@@ -543,23 +555,32 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
         }
     }
     animateOpen(edge) {
+        const busyContext = ojet.Context.getContext(this.rootRef.current).getBusyContext();
+        const resolveFunc = busyContext.addBusyState({ description: 'Animation in progress' });
         if (this.getDrawerResolvedDisplayMode(edge) === DrawerConstants.stringReflow) {
-            return expand(this.getRefToAnimate(edge).current, DrawerUtils.getAnimationOptions('expand', edge));
+            return expand(this.getRefToAnimate(edge).current, DrawerUtils.getAnimationOptions('expand', edge)).then(resolveFunc);
         }
         else {
-            return slideIn(this.getRefToAnimate(edge).current, DrawerUtils.getAnimationOptions(DrawerConstants.stringSlideIn, edge)).then(() => {
+            return slideIn(this.getRefToAnimate(edge).current, DrawerUtils.getAnimationOptions(DrawerConstants.stringSlideIn, edge))
+                .then(() => {
                 DrawerUtils.unwrapDrawerClippingArea(this.getDrawerRef(edge).current);
-            });
+            })
+                .then(resolveFunc);
         }
     }
     animateClose(edge) {
+        const busyContext = ojet.Context.getContext(this.rootRef.current).getBusyContext();
+        const resolveFunc = busyContext.addBusyState({ description: 'Animation in progress' });
         if (this.getDrawerResolvedDisplayMode(edge) === DrawerConstants.stringReflow) {
-            return collapse(this.getRefToAnimate(edge).current, DrawerUtils.getAnimationOptions('collapse', edge));
+            return collapse(this.getRefToAnimate(edge).current, DrawerUtils.getAnimationOptions('collapse', edge)).then(resolveFunc);
         }
         else {
-            return slideOut(this.getRefToAnimate(edge).current, DrawerUtils.getAnimationOptions(DrawerConstants.stringSlideOut, edge)).then(() => {
-                DrawerUtils.unwrapDrawerClippingArea(this.getDrawerRef(edge).current);
-            });
+            const drawerEl = this.getDrawerRef(edge).current;
+            return slideOut(this.getRefToAnimate(edge).current, DrawerUtils.getAnimationOptions(DrawerConstants.stringSlideOut, edge))
+                .then(() => {
+                DrawerUtils.unwrapDrawerClippingArea(drawerEl);
+            })
+                .then(resolveFunc);
         }
     }
     edgeToStateOpenedName(edge) {
@@ -640,6 +661,10 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
         $drawerElement.position(position);
         this.setStartEndOverlayDrawersHeight();
         DrawerUtils.wrapDrawerWithClippingArea(drawerElement, position);
+        if (this.drawerLayoutResizeHandler === null) {
+            this.drawerLayoutResizeHandler = this.drawerLayoutResizeCallback.bind(this);
+        }
+        addResizeListener(this.rootRef.current, this.drawerLayoutResizeHandler, 50, true);
         return this.animateOpen(edge);
     }
     setBottomOverlayDrawerWidth() {
@@ -680,7 +705,8 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
         DrawerUtils.disableBodyOverflow();
         this.elementWithFocusBeforeDrawerCloses = document.activeElement;
         removeResizeListener(this.getDrawerRef(edge).current, this.overlayDrawerResizeHandler);
-        this.overlayDrawerResizeHandler === null;
+        this.overlayDrawerResizeHandler = null;
+        this.removeDrawerLayoutResizeListener();
         DrawerUtils.wrapDrawerWithClippingArea(this.getDrawerRef(edge).current, this.getDrawerPosition(edge));
         return this.animateClose(edge);
     }
@@ -723,11 +749,13 @@ let DrawerLayout = DrawerLayout_1 = class DrawerLayout extends Component {
     setStartEndOverlayDrawersHeight() {
         const middleSectionHeight = DrawerUtils.getElementHeight(this.middleSectionRef.current) + 'px';
         const startDrawerElement = this.startRef.current;
-        if (startDrawerElement) {
+        if (startDrawerElement &&
+            this.getDrawerResolvedDisplayMode(DrawerConstants.stringStart) != DrawerConstants.stringReflow) {
             startDrawerElement.style.height = middleSectionHeight;
         }
         const endDrawerElement = this.endRef.current;
-        if (endDrawerElement) {
+        if (endDrawerElement &&
+            this.getDrawerResolvedDisplayMode(DrawerConstants.stringEnd) != DrawerConstants.stringReflow) {
             endDrawerElement.style.height = middleSectionHeight;
         }
     }

package/dist/js/libs/oj/debug_esm/ojdrawerpopup.js

@@ -14,6 +14,7 @@ import 'ojs/ojcore-base';
 import 'ojs/ojpopup';
 import { DrawerUtils, DrawerConstants } from 'ojs/ojdrawerutils';
 import Hammer from 'hammerjs';
+import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
 
 var __decorate = (null && null.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -89,7 +90,8 @@ let DrawerPopup = DrawerPopup_1 = class DrawerPopup extends Component {
             const $drawerElement = $(this.rootRef.current);
             const status = ZOrderUtils.getStatus($drawerElement);
             if (status === ZOrderUtils.STATUS.OPEN) {
-                $drawerElement.detach();
+                CustomElementUtils.cleanComponentBindings($drawerElement[0]);
+                $drawerElement.remove();
                 const psOptions = {};
                 psOptions[PopupService.OPTION.POPUP] = $drawerElement;
                 this.ignoreUpdate = true;

package/dist/js/libs/oj/debug_esm/ojdrawerutils.js

@@ -258,7 +258,11 @@ class DrawerUtils {
     static wrapDrawerWithClippingArea(drawerElement, position) {
         const clippingAreaEl = $(drawerElement)
             .wrap(function () {
-            return `<div id="${DrawerConstants.clippingAreaSelector}" style="overflow:hidden; position: absolute"></div>`;
+            const div = document.createElement('div');
+            div.setAttribute('id', DrawerConstants.clippingAreaSelector);
+            div.style.overflow = 'hidden';
+            div.style.position = 'absolute';
+            return $(div);
         })
             .parent()[0];
         clippingAreaEl.style.setProperty('height', DrawerUtils.getElementHeight(drawerElement) + 'px');
@@ -267,8 +271,10 @@ class DrawerUtils {
         drawerElement.style.setProperty('position', 'static');
     }
     static unwrapDrawerClippingArea(drawerElement) {
-        drawerElement.style.removeProperty('position');
-        $(drawerElement).unwrap();
+        if (drawerElement) {
+            drawerElement.style.removeProperty('position');
+            $(drawerElement).unwrap();
+        }
     }
 }