@oracle/oraclejet 14.0.5 → 14.1.0

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

@@ -1115,6 +1115,12 @@ var __oj_table_metadata =
 /**
  * <p>Named slot for the Table's default row template. The slot content must be a &lt;template> element. The content of the template should include the &lt;tr> element.</p>
  *
+ * <p>If using a rowTemplate to configure the display of rows, the Table will handle any change in column reordering due
+ * to a dnd operation internally. Any application logic behind rowTemplate definitions should not dynamically respond to
+ * 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates
+ * the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations,
+ * and any relevant changes in logic needed for the rowTemplate definitions must be handled by the application.</p>
+ *
  * @ojslot rowTemplate
  * @memberof oj.ojTable
  * @ojtemplateslotprops oj.ojTable.RowTemplateContext
@@ -1150,6 +1156,12 @@ var __oj_table_metadata =
  * <p>Named slot used to render add new row at the top of the table. The slot content must be a &lt;template> element.
  * The content of the template should include the &lt;tr> element.</p>
  *
+ * <p>If using an addRowTemplate to configure the display of rows, the Table will handle any change in column reordering due
+ * to a dnd operation internally. Any application logic behind addRowTemplate definitions should not dynamically respond to
+ * 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates
+ * the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations,
+ * and any relevant changes in logic needed for the addRowTemplate definitions must be handled by the application.</p>
+ *
  * @ojslot addRowTemplate
  * @memberof oj.ojTable
  * @ojtemplateslotprops oj.ojTable.AddRowTemplateContext
@@ -2166,6 +2178,8 @@ Table.prototype._cleanComponent = function (isDestroy) {
   this._isEditPending = null;
   this._active = null;
   this._isTableTab = null;
+  this._renderedTableHeaderColumns = false;
+
   // clear any pending timeouts
   this._clearAllComponentTimeouts();
   // remove any pending busy states
@@ -2178,6 +2192,8 @@ Table.prototype._cleanComponent = function (isDestroy) {
   this._unregisterDomScroller();
   // clear the current layout manager, and any listeners it has setup
   this._clearLayoutManager();
+  // clear the current internal acc state
+  this._cleanAccStatus();
 
   if (isDestroy) {
     // cleanup needed for 'destroy()' call only
@@ -2201,17 +2217,6 @@ Table.prototype._cleanComponent = function (isDestroy) {
       this._data.destroy();
     }
 
-    // If any template is being used, clean up the nodes to avoid memory leak in Knockout
-    if (
-      this._hasHeaderTemplate ||
-      this._hasCellTemplate ||
-      this._hasFooterTemplate ||
-      this._hasRowTemplate ||
-      this._hasAddRowTemplate
-    ) {
-      this._cleanTemplateNodes(this.element[0]);
-    }
-
     this._componentDestroyed = true;
   } else {
     // cleanup needed for 'ReleaseResources()' call only
@@ -2220,6 +2225,12 @@ Table.prototype._cleanComponent = function (isDestroy) {
     this._unregisterDataSourceEventListeners();
     this._unregisterResizeListener();
   }
+
+  // If any template is being used, clean up the nodes to avoid memory leak in Knockout
+  if (this._hasHeaderTemplate || this._hasCellTemplate || this._hasFooterTemplate ||
+      this._hasRowTemplate || this._hasAddRowTemplate || this._hasNoDataTemplate) {
+    this._cleanTemplateNodes(this.element[0]);
+  }
 };
 
 /**
@@ -2473,6 +2484,12 @@ Table.prototype._refresh = function () {
   this._refreshTableStatusMessage();
   this._clearIdleCallback();
 
+  // update edit state based on row removals before rows are removed to ensure row context is available
+  if (this._hasEditableRow()) {
+    // exit edit mode if editable row is deleted - treat as cancelling the edit
+    this._setTableEditable(false, true);
+  }
+
   if (initFetch) {
     return this._initFetch();
   }
@@ -3090,7 +3107,6 @@ Table.prototype._refreshTableBodyRow = function (
             tableBodyRow = docFrag.children[rowIdx - docFragStartIdx];
           }
         }
-        // eslint-disable-next-line no-param-reassign
         this._hasRowTemplate = true;
       }
     }
@@ -3262,6 +3278,14 @@ Table.prototype._refreshAddNewRowPlaceholder = function (docFrag, skipTopUpdate)
         // eslint-disable-next-line no-param-reassign
         placeHolderRow = docFrag.children[0];
       }
+      // make sure to honor any reordered columns when re-rendering the add row content from a row template
+      if (this._columnsDestMap != null) {
+        var renderedCells = this._getPlaceHolderRowCells(placeHolderRow);
+        for (let i = 0; i < this._columnsDestMap.length; i++) {
+          var moveAddRowCell = renderedCells[this._columnsDestMap[i]];
+          moveAddRowCell.parentNode.appendChild(moveAddRowCell); // @HTMLUpdateOK
+        }
+      }
     } else if (addRowCellTemplate !== null && this._isDefaultAddRowCellTemplateSlotValid()) {
       var columns = this._getColumnDefs();
       var columnsCount = columns.length;
@@ -3750,6 +3774,7 @@ Table.prototype._showNoDataMessage = function () {
         nodes.forEach(function (node) {
           noDataContentCell.appendChild(node); // @HTMLUpdateOK
         });
+        this._hasNoDataTemplate = true;
       }
     } else {
       var emptyTextMsg = null;
@@ -3791,6 +3816,7 @@ Table.prototype._hideNoDataMessage = function () {
         if (noDataRow != null) {
           this._cleanTemplateNodes(noDataRow);
           $(noDataRow).remove();
+          this._hasNoDataTemplate = false;
         }
       }
     }
@@ -6414,11 +6440,7 @@ TableDndContext.prototype.handleColumnReorderDrop = function (event) {
       columnIdx += 1;
     }
     if (this._dragStartColumnIdxs.indexOf(columnIdx) === -1) {
-      this.component._columnsDestMap = this.component._moveTableHeaderColumn(
-        this._dragStartColumnIdxs,
-        columnIdx,
-        event
-      );
+      this.component._moveTableHeaderColumn(this._dragStartColumnIdxs, columnIdx, event);
     }
   }
   event.preventDefault();
@@ -7433,16 +7455,23 @@ TableLayoutManager.prototype._isVerticalScrollBarHidden = function () {
   );
 };
 
+/**
+ * @private
+ */
+TableLayoutManager.prototype.initializeDefaultScrollBarSize = function (element) {
+  // cache browser scroll bar width for future sizing of table scrolling element
+  this._table._defaultScrollBarSize = getDefaultScrollBarWidth(element);
+};
+
 /**
  * Returns the default scrollbar size for the table when visible
  * @private
  */
 TableLayoutManager.prototype._getDefaultScrollBarSize = function () {
-  // cache browser scroll bar width for future sizing of table body element
-  if (this._defaultScrollBarSize == null) {
-    this._defaultScrollBarSize = getDefaultScrollBarWidth(this.getScroller());
+  if (this._table._defaultScrollBarSize == null) {
+    this.initializeDefaultScrollBarSize(this.getScroller());
   }
-  return this._defaultScrollBarSize;
+  return this._table._defaultScrollBarSize;
 };
 
 /**
@@ -11148,8 +11177,8 @@ Table.prototype._updateAccStatusInfo = function (columnHint) {
   var stateInfo = '';
   var tableHeaderColumn;
 
-  // status info only reflects an active element, and is not used for iOS voiceover
-  if (this._active == null || isIos()) {
+  // status info only reflects an active element, only applies if the table is focused, and is not used for iOS voiceover
+  if (this._active == null || !this._hasFocus() || isIos()) {
     return;
   }
 
@@ -11651,6 +11680,11 @@ Table.prototype._beforeDataRefresh = function (isSort) {
   if (this._lastSelectedRowIdxArray != null) {
     this._lastSelectedRowIdxArray = [];
   }
+  // update edit state based on row removals before rows are removed to ensure row context is available
+  if (this._hasEditableRow()) {
+    // exit edit mode if editable row is deleted - treat as cancelling the edit
+    this._setTableEditable(false, true);
+  }
   // reset selection validation state if data refreshed or changed
   this._initialSelectionStateValidated = false;
 };
@@ -11666,6 +11700,13 @@ Table.prototype._removeRowsAfterLastValidRow = function (lastValidKey) {
   }
   var lastValidItemIdx = this._getRowIdxForRowKey(lastValidKey);
   if (lastValidItemIdx >= 0) {
+    // update edit state based on row removals before rows are removed to ensure row context is available
+    if (this._hasEditableRow()) {
+      if (this._getEditableRowIdx() > lastValidItemIdx) {
+        // exit edit mode if editable row is deleted - treat as cancelling the edit
+        this._setTableEditable(false, true);
+      }
+    }
     var tableBodyRows = this._getTableBodyRows();
     var tableBodyRowsCount = tableBodyRows.length;
     for (var i = tableBodyRowsCount - 1; i > lastValidItemIdx; i--) {
@@ -13362,6 +13403,9 @@ Table.prototype._createTableScroller = function () {
   this.element[0].parentNode.replaceChild(tableScroller, this.element[0]);
   tableScroller.insertBefore(this.element[0], tableScroller.firstChild); // @HTMLUpdateOK
 
+  // determine default scrollbar size at initial creation time to avoid layout changes later on
+  this._getLayoutManager().initializeDefaultScrollBarSize(tableScroller);
+
   return tableScroller;
 };
 
@@ -16369,7 +16413,7 @@ Table.prototype._handleFocusin = function (event, isPopupFocusin) {
                 if (this._isGutterStartColumnEnabled()) {
                   targetColumnIndex -= 1;
                 }
-                this._scrollColumnIntoViewport(targetColumnIndex);
+                this._scrollColumnIntoViewport(targetColumnIndex, cell);
                 break;
               }
             }
@@ -16418,7 +16462,7 @@ Table.prototype._handleFocusin = function (event, isPopupFocusin) {
           for (let i = 0; i < focusedRowCells.length; i++) {
             const cell = focusedRowCells[i];
             if ($(cell).has(event.target).length > 0) {
-              this._scrollColumnIntoViewport(i);
+              this._scrollColumnIntoViewport(i, cell);
               break;
             }
           }
@@ -17916,28 +17960,35 @@ Table.prototype._scrollRowIntoViewport = function (rowIdx, includeStuckRows, tab
 /**
  * Scroll column into viewport
  * @param {number} columnIdx  row index
+ * @param {Element=} cellElement optional cell element that should be scrolled into view
  * @private
  */
-Table.prototype._scrollColumnIntoViewport = function (columnIdx) {
+Table.prototype._scrollColumnIntoViewport = function (columnIdx, cellElement) {
   var layoutManager = this._getLayoutManager();
   if (!layoutManager.hasRenderedSize()) {
     return;
   }
 
-  var tableHeaderColumn;
-  if (columnIdx === -1) {
-    tableHeaderColumn = this._getTableSelectorColumn();
+  // if cell is provided, then focus is really on a body cell that could have colspans
+  // otherwise, use the header cell corresponding to the column index value
+  var targetElement;
+  if (cellElement != null) {
+    targetElement = cellElement;
   } else {
-    tableHeaderColumn = this._getTableHeaderColumn(columnIdx);
-  }
-  if (!tableHeaderColumn) {
-    return;
+    if (columnIdx === -1) {
+      targetElement = this._getTableSelectorColumn();
+    } else {
+      targetElement = this._getTableHeaderColumn(columnIdx);
+    }
+    if (!targetElement) {
+      return;
+    }
   }
 
   var scrollingElement = layoutManager.getScroller();
   var $scrollingElement = $(scrollingElement);
 
-  var horOverflowDiff = layoutManager.getHorizontalOverflowDiff(tableHeaderColumn, columnIdx);
+  var horOverflowDiff = layoutManager.getHorizontalOverflowDiff(targetElement, columnIdx);
   var leftOverflowDiff = horOverflowDiff.left;
   var rightOverflowDiff = horOverflowDiff.right;
   var hasLeftOverflow = leftOverflowDiff >= 0;
@@ -18197,7 +18248,7 @@ Table.prototype._setCellFocus = function (rowIdx, columnIdx) {
       if (typeof firstElem.select === 'function') {
         firstElem.select();
       }
-      this._scrollColumnIntoViewport(columnIdx);
+      this._scrollColumnIntoViewport(columnIdx, tableBodyCell);
       return true;
     }
   }
@@ -21497,7 +21548,7 @@ Table.prototype._setSelected = function (selected, skipSelectionUpdate) {
       }
     }
     if (this._isDefaultSelectorEnabled()) {
-      this._updateSelector(selected.row);
+      this._updateSelectors(selected.row);
     }
     this._applySelected(selected);
 
@@ -22194,15 +22245,10 @@ Table.prototype._selectedKeysChangedListener = function (event) {
         Table.CSS_CLASSES._TABLE_HEADER_SELECTOR_CLASS
       )[0];
       if (headerSelectorElement) {
-        let tableBodyRows = this._getTableBodyRows();
         let keySetSize = rowSelectedKeySet.values
           ? rowSelectedKeySet.values().size
           : rowSelectedKeySet.deletedValues().size;
-        if (keySetSize !== 0 && tableBodyRows.length !== keySetSize) {
-          headerSelectorElement.indeterminate = true;
-        } else {
-          headerSelectorElement.indeterminate = false;
-        }
+        headerSelectorElement.indeterminate = keySetSize !== 0;
       }
       this._setSelected({ row: rowSelectedKeySet, column: new KeySetImpl() }, false, true);
     }
@@ -22214,52 +22260,38 @@ Table.prototype._selectedKeysChangedListener = function (event) {
  * @param {Object} selected the selected key set
  * @private
  */
-Table.prototype._updateSelector = function (selected) {
+Table.prototype._updateSelectors = function (selected) {
   let table = this._getTable();
   let headerSelectorElements = table.getElementsByClassName(
     Table.CSS_CLASSES._TABLE_HEADER_SELECTOR_CLASS
   );
   if (headerSelectorElements.length > 0) {
     headerSelectorElements[0].selectedKeys = selected;
-    let tableBodyRows = this._getTableBodyRows();
     let keySetSize = selected.values ? selected.values().size : selected.deletedValues().size;
-    if (keySetSize !== 0 && tableBodyRows.length !== keySetSize) {
-      headerSelectorElements[0].indeterminate = true;
-    } else {
-      headerSelectorElements[0].indeterminate = false;
-    }
+    headerSelectorElements[0].indeterminate = keySetSize !== 0;
   }
 
-  let selectedSelectorCells = table.querySelectorAll(`
-  .${Table.CSS_CLASSES._TABLE_DATA_ROW_CLASS}.${Table.MARKER_STYLE_CLASSES._SELECTED} >
-  .${Table.CSS_CLASSES._TABLE_SELECTOR_CELL}`);
-  if (!selected.isAddAll()) {
-    selectedSelectorCells.forEach((selectorCell) => {
-      let selector = selectorCell.firstChild;
-      if (selected.has(selector.rowKey)) {
-        selected.delete([selector.rowKey]);
-      } else {
-        selector.selectedKeys = new KeySetImpl([]);
-      }
-    });
-    let selectors = Array.from(
-      table.getElementsByClassName(Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS)
-    );
-    for (let i = 0; i < selectors.length; i++) {
-      if (selected.has(selectors[i].rowKey)) {
-        selectors[i].selectedKeys = new KeySetImpl([selectors[i].rowKey]);
-      }
-    }
-  } else {
-    let selectors = Array.from(
-      table.getElementsByClassName(Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS)
-    );
-    for (let i = 0; i < selectors.length; i++) {
-      if (selected.has(selectors[i].rowKey)) {
-        selectors[i].selectedKeys = new KeySetImpl([selectors[i].rowKey]);
-      } else {
-        selectors[i].selectedKeys = new KeySetImpl([]);
+  let selectedSelectors = [];
+  // this relies on the inner dom structure and selected state markup of oj-selector - would be better
+  // to avoid this internal knowledge in the future if possible
+  let selectedSelectorSpans = table.querySelectorAll(`
+    .${Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS} >
+    .${Table.MARKER_STYLE_CLASSES._SELECTED}`);
+  for (let i = 0; i < selectedSelectorSpans.length; i++) {
+    selectedSelectors.push(selectedSelectorSpans[i].parentElement);
+  }
+  let selectors = Array.from(
+    table.getElementsByClassName(Table.CSS_CLASSES._TABLE_DATA_ROW_SELECTOR_CLASS)
+  );
+  for (let i = 0; i < selectors.length; i++) {
+    let selector = selectors[i];
+    let hasSelectedState = selectedSelectors.indexOf(selector) !== -1;
+    if (selected.has(selector.rowKey)) {
+      if (!hasSelectedState) {
+        selector.selectedKeys = new KeySetImpl([selector.rowKey]);
       }
+    } else if (hasSelectedState) {
+      selector.selectedKeys = new KeySetImpl([]);
     }
   }
 };
@@ -22869,11 +22901,22 @@ Table.prototype.options = {
      * @ojsignature {target:"Type", value:"?"}
      */
     reorder: {
+      // in general it does not seem great that any rowTemplate, rowRenderer, and addRowTemplate logic shouldn't be dynamic
+      // and respond to dnd column reorder operations... the doc below concerning this is just to make it clear HOW things
+      // work today - at this point this is not something that can change without potentially breaking every single row-based
+      // content definition existing applications may already be using combined with the Table's internal column reordering...
+
       /**
        * Enable or disable reordering the columns within the same table using drag and drop.<br><br>
        * Re-ordering is supported one column at a time. In addition, re-ordering will not re-order
        * any cells which have the colspan attribute with value > 1. Such cells will need to be re-ordered manually by listening to
-       * the property change event on the columns property.
+       * the property change event on the columns property.<br><br>
+       * If using a rowTemplate, rowRenderer, or addRowTemplate to configure the display of rows, the Table will handle
+       * any change in column reordering due to a dnd operation internally. Any application logic behind rowTemplate,
+       * rowRenderer, or addRowTemplate definitions should not dynamically respond to 'columns' change notifications pushed
+       * due to dnd reorder operations. Once an application or an external source updates the Table's 'columns' attribute
+       * though, the Table will no longer honor any previous user-performed dnd reorder operations, and any relevant changes
+       * in logic needed for the rowTemplate, rowRenderer, or addRowTemplate definitions must be handled by the application.<br><br>
        *
        * <p>See the <a href="#dnd">dnd</a> attribute for usage examples.
        *
@@ -23141,7 +23184,14 @@ Table.prototype.options = {
    * The function returns either a String or
    * a DOM element of the content inside the row. If the developer chooses
    * to manipulate the row element directly, the function should return
-   * nothing.
+   * nothing.<br><br>
+   *
+   * <p>If using a rowRenderer to configure the display of rows, the Table will handle any change in column reordering due
+   * to a dnd operation internally. Any application logic behind rowRenderer definitions should not dynamically respond to
+   * 'columns' change notifications pushed due to dnd reorder operations. Once an application or an external source updates
+   * the Table's 'columns' attribute though, the Table will no longer honor any previous user-performed dnd reorder operations,
+   * and any relevant changes in logic needed for the rowRenderer definitions must be handled by the application.</p>
+   *
    * @expose
    * @public
    * @instance
@@ -24895,7 +24945,11 @@ Table.prototype._setOptions = function (options, flags) {
     var key = keys[i];
     var value = options[key];
     if (this._isTableRefreshNeeded(key, value, flags)) {
-      if (key === 'columns' || (key === 'selectionMode' && value.row !== undefined)) {
+      if (key === 'columns') {
+        // an external change in 'columns' must reset any previous column reorder operations
+        this._columnsDestMap = null;
+        requiresHeaderRefresh = true;
+      } else if (key === 'selectionMode' && value.row !== undefined) {
         requiresHeaderRefresh = true;
       } else if (key === 'data') {
         requiresDataRefresh = true;

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

@@ -7,7 +7,8 @@
  */
 import { render } from 'preact';
 import oj from 'ojs/ojcore-base';
-import { CACHED_BINDING_PROVIDER, CustomElementUtils, transformPreactValue } from 'ojs/ojcustomelement-utils';
+import { CACHED_BINDING_PROVIDER, transformPreactValue } from 'ojs/ojcustomelement-utils';
+import { getPropertiesForElementTag } from 'ojs/ojcustomelement-registry';
 import { getPropertyMetadata } from 'ojs/ojmetadatautils';
 import { info } from 'ojs/ojlogger';
 
@@ -102,7 +103,7 @@ class PreactTemplate {
         };
     }
     static resolveVDomTemplateProps(template, renderer, elementTagName, propertySet, data, defaultValues, propertyValidator) {
-        const metadata = CustomElementUtils.getPropertiesForElementTag(elementTagName);
+        const metadata = getPropertiesForElementTag(elementTagName);
         const [cache, deleteEntry] = PreactTemplate.extendTemplate(template, PreactTemplate._COMPUTED_PROPS_CACHE_FACTORY, (recalc) => {
             for (const observable of cache) {
                 observable.recalculateValue(recalc);

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

@@ -1229,6 +1229,14 @@ const DvtTimelineStyleUtils = {
     return 8;
   },
 
+  /**
+   * Returns minimum gap between items horizontally
+   * @return {number} The minimum gap
+   */
+  getMinHorizontalBubbleSpacing: () => {
+    return 16;
+  },
+
   /**
    * Returns size for content bubble arrow
    * @return {number} The size of the content bubble arrow
@@ -1261,6 +1269,14 @@ const DvtTimelineStyleUtils = {
     return 36;
   },
 
+  /**
+   * Returns the padding for the nav arrow button
+   * @returns {number} The padding of the nav arrow button
+   */
+  getNavButtonPadding: () => {
+    return 8;
+  },
+
   /**
    * Returns bgcolor for content bubble
    * @return {string} The bgcolor of the content bubble
@@ -1694,16 +1710,6 @@ class DvtTimelineSeriesNode {
   hideKeyboardFocusEffect() {
     this._isShowingKeyboardFocusEffect = false;
     this.hideHoverEffect();
-
-    // turn off actionable mode if it is enabled
-    /* TODO https://jira.oraclecorp.com/jira/browse/JET-48114
-    if (this._timeline.activeInnerElems) {
-      this._timeline.activeInnerElems = null;
-      this._disableAllTabElements();
-      this._timeline._context._parentDiv.focus();
-      this.hasActiveInnerElems = false;
-      this._timeline.getEventManager().ShowFocusEffect(null, this);
-    }*/
   }
 
   /**
@@ -1825,7 +1831,8 @@ class DvtTimelineSeriesNode {
       previousState: this._previousState,
       state: this._state,
       durationWidth: durationWidth,
-      contentWidth: this.getAvailableContentWidth()
+      contentWidth: this.getAvailableContentWidth(),
+      maxAvailableWidth: this.getMaxAvailableWidth()
     };
   }
 
@@ -1845,9 +1852,53 @@ class DvtTimelineSeriesNode {
       : 0;
     var contentWidth =
       this.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT
-        ? bubbleWidth - artifactWidth
+        ? Math.floor(bubbleWidth - artifactWidth)
         : null;
-    return Math.floor(contentWidth);
+    return contentWidth;
+  }
+
+  /**
+   * Gets the largest available width on the right, left or within the bubble in a duration event.
+   * This is only for discrete viewport navigation mode.
+   * @return {number|null} The largest available width in pixels, or null if not duration event.
+   */
+  getMaxAvailableWidth() {
+    var durationEvent = this.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT;
+    if (!durationEvent) return null;
+
+    var timeline = this._timeline;
+    var itemStartTime = this.getStartTime();
+    var itemEndTime = this.getEndTime();
+    var discreteNavMode = timeline.isDiscreteNavigationMode();
+    var padding = DvtTimelineStyleUtils.getNavButtonPadding();
+    var edgeOffset;
+    var startTime;
+    var endTime;
+    if (discreteNavMode) {
+      var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
+      edgeOffset = navButtonBackgroundWidth - padding;
+      var viewportIndexScroll = Math.floor(
+        (itemStartTime - timeline._viewStartTime) / timeline._initialViewportTimeDuration
+      );
+      var discreteViewportOffsetPos =
+        timeline.getDiscreteViewportDateOffsetPos(viewportIndexScroll);
+      startTime = discreteViewportOffsetPos.startDate;
+      endTime = discreteViewportOffsetPos.endDate;
+    } else {
+      edgeOffset = -padding;
+      startTime = timeline._start;
+      endTime = timeline._end;
+    }
+    var startLoc = timeline.getDatePos(startTime);
+    var endLoc = timeline.getDatePos(endTime);
+    var availableWidthInside =
+      timeline.getDatePos(itemEndTime) - timeline.getDatePos(itemStartTime);
+    var contentBubbleSpacing = DvtTimelineStyleUtils.getContentBubbleSpacing();
+    var availableWidthLeft =
+      timeline.getDatePos(itemStartTime) - contentBubbleSpacing - startLoc + edgeOffset;
+    var availableWidthRight =
+      endLoc - timeline.getDatePos(itemEndTime) - contentBubbleSpacing + edgeOffset;
+    return Math.floor(Math.max(availableWidthInside, availableWidthLeft, availableWidthRight));
   }
 
   /**
@@ -2039,8 +2090,6 @@ class DvtTimelineSeriesNode {
     this._draggedObj = draggedObj;
   }
 
-  ///
-
   /**
    * Show the drag feedbacks accordingly; called by DnD handlers.
    * @param {dvt.MouseEvent|dvt.KeyboardEvent|dvt.ComponentTouchEvent} event DnD dragOver event, keyboard, or touch event that triggered the feedback
@@ -2652,7 +2701,6 @@ const DvtTimelineSeriesItemRenderer = {
 
     // check viewport collision
     DvtTimelineSeriesItemRenderer.checkEndViewportCollision(item, series, isRTL, width);
-
     // for collision, need the start position to be -contentWidth
     if (item.getEndViewportCollision() && durationWidth === null) {
       width = 2 * width + DvtTimelineStyleUtils.getContentBubbleSpacing();
@@ -3754,6 +3802,7 @@ const DvtTimelineSeriesItemRenderer = {
       item._content = DvtTimelineSeriesItemRenderer._getBubbleContent(item, series);
       contentContainer.addChild(item._content);
     }
+
     DvtTimelineSeriesItemRenderer._setupBubble(item, item._content, series);
 
     var nodeWidth, content, contentBubbleArray;
@@ -4180,11 +4229,13 @@ const DvtTimelineSeriesItemRenderer = {
     var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
     var startTime = item.getDragStartTime();
     var loc = item._timeline.getDatePos(startTime);
-    var navMode = item._timeline.isDiscreteNavigationMode();
-    var length = navMode ? item._timeline._discreteContentLength : series._length;
+    var discreteNavMode = item._timeline.isDiscreteNavigationMode();
+    var length = discreteNavMode ? item._timeline._discreteContentLength : series._length;
     // use viewport end time vs timeline end time if in discrete navigation mode
     var endViewportDate = item._timeline.getDiscreteViewportEndDate();
-    var endViewportPos = item._timeline.getDatePos(item._timeline._viewEndTime);
+    var endViewportPos = item._timeline.getDatePos(
+      discreteNavMode ? endViewportDate : item._timeline._end
+    );
     item.setEndViewportCollision(false);
 
     // no collision behavior if not duration-event
@@ -4192,22 +4243,21 @@ const DvtTimelineSeriesItemRenderer = {
       return;
     }
 
-    // add half the preview wings to make it look more natural if it would be slightly too long
-    var collisionAdjustment = navButtonBackgroundWidth / 2;
+    // Allow content to extend up to the end edge (the viewport end in discrete nav mode, the time axis end in continuous) minus some padding.
+    // The same padding is used for both discrete and continuous nav mode, and it's equivalent to the padding around the nav button in discrete nav mode.
+    var padding = DvtTimelineStyleUtils.getNavButtonPadding();
+    var collisionAdjustment = discreteNavMode ? navButtonBackgroundWidth - padding : -padding;
     if (!isRTL) {
-      renderEnd = loc + DvtTimelineStyleUtils.getContentBubbleSpacing() + width;
+      renderEnd = loc + width;
 
       if (renderEnd > endViewportPos + collisionAdjustment) {
         // need to use overflow
         item.setEndViewportCollision(true);
       }
     } else {
-      renderEnd = length - loc - width - DvtTimelineStyleUtils.getContentBubbleSpacing();
+      renderEnd = length - loc - width;
       var startViewportPos = length - endViewportPos;
-      if (navMode) {
-        startViewportPos = startViewportPos - navButtonBackgroundWidth;
-      }
-      if (startViewportPos + collisionAdjustment > renderEnd) {
+      if (startViewportPos - collisionAdjustment > renderEnd) {
         item.setEndViewportCollision(true);
       }
     }
@@ -7636,6 +7686,7 @@ const DvtTimelineRenderer = {
     var axisVisibleSize = timeline.getTimeAxisVisibleSize(seriesCount);
     var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
     var navButtonWidth = DvtTimelineStyleUtils.getNavButtonWidth();
+    var navButtonPadding = DvtTimelineStyleUtils.getNavButtonPadding();
     var axisStart =
       seriesCount === 1
         ? timeline._canvasSize - axisVisibleSize
@@ -7679,7 +7730,7 @@ const DvtTimelineRenderer = {
         'prevNavContainer_i'
       );
       prevArrowButton.setCornerRadius(4);
-      prevArrowButton.setTranslate(8, 8);
+      prevArrowButton.setTranslate(navButtonPadding, navButtonPadding);
       prevContainerBackground.addChild(prevArrowButton);
       prevArrowContainer.addChild(prevContainerBackground);
       prevArrowContainer.setTranslate(timeAxisOffset, axisStart - navButtonWidth);
@@ -7728,7 +7779,7 @@ const DvtTimelineRenderer = {
         'nextNavContainer_i'
       );
       nextArrowButton.setCornerRadius(4);
-      nextArrowButton.setTranslate(16, 8);
+      nextArrowButton.setTranslate(16, navButtonPadding);
       nextContainerBackground.addChild(nextArrowButton);
       nextArrowContainer.addChild(nextContainerBackground);
       nextArrowContainer.setTranslate(nextTimeAxisOffset, axisStart - navButtonWidth);
@@ -9841,12 +9892,12 @@ class DvtTimelineSeries extends BaseComponent {
     if (!this._isVertical) {
       var endViewportCollisionOffset = item.getEndViewportCollision() ? item.getContentWidth() : 0;
       var x = item.getLoc() - endViewportCollisionOffset;
-      var width = item.getWidth() + 16;
+      var width = item.getWidth() + DvtTimelineStyleUtils.getMinHorizontalBubbleSpacing();
       var hOffset = DvtTimelineStyleUtils.getBubbleSpacing();
       var overlappingItems = [];
       for (i = 0; i < index; i++) {
         currItem = this._items[i];
-        currWidth = currItem.getWidth() + 16;
+        currWidth = currItem.getWidth() + DvtTimelineStyleUtils.getMinHorizontalBubbleSpacing();
         endViewportCollisionOffset = currItem.getEndViewportCollision()
           ? currItem.getContentWidth()
           : 0;