@oracle/oraclejet 11.1.7 → 11.1.8

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

@@ -10,6 +10,7 @@ import { __GetWidgetConstructor, setDefaultOptions, createDynamicPropertyGetter,
 import $ from 'jquery';
 import 'ojs/ojlabel';
 import { parseJSONFromFontFamily } from 'ojs/ojthemeutils';
+import FocusUtils from 'ojs/ojfocusutils';
 import Context from 'ojs/ojcontext';
 import { error, info, warn, level, LEVEL_WARN } from 'ojs/ojlogger';
 import RequiredValidator from 'ojs/ojvalidator-required';
@@ -23,7 +24,6 @@ import { Press } from 'hammerjs';
 import 'ojs/ojjquery-hammer';
 import { isTouchSupported, isHTMLContent, cleanHtml, validateURL, makeFocusable } from 'ojs/ojdomutils';
 import { startAnimation } from 'ojs/ojanimation';
-import FocusUtils from 'ojs/ojfocusutils';
 
 /**
  * Base class for rendering the 'inside' labels. This is so InsideLabelStrategy
@@ -2982,6 +2982,44 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
       }
     },
 
+    /**
+     * Override to release resources held by this component.
+     * It is important to unregister Hammer events
+     * since they live outside of the component's DOM and would cause Detached Dom nodes
+     * when the component is removed.
+     * @memberof oj.editableValue
+     * @instance
+     * @protected
+     */
+    _ReleaseResources: function () {
+      this._super();
+      if (this._IsCustomElement()) {
+        // componentMessaging#releaseResources removes any resources that would
+        // otherwise cause a memory leak, like Hammer.
+        // We do not deactivate component messaging because that is a bigger change, and
+        // more risky to backport.
+        this._getComponentMessaging().releaseResources();
+        this._hammerIsUnregistered = true;
+      }
+    },
+    /**
+     * @memberof oj.editableValue
+     * @instance
+     * @protected
+     */
+    _SetupResources: function () {
+      this._super();
+      // Since initComponentMessaging gets called during component creation, and that activates
+      // all the component strategies which in turn sets up listeners, we only want to
+      // re-set up resources and when we have
+      // released them in ReleaseResources.
+      if (this._IsCustomElement() && (this._hammerIsUnregistered)) {
+        const messaging = this._getComponentMessaging();
+        messaging.setupResources();
+        this._hammerIsUnregistered = false;
+      }
+    },
+
     /**
      * If we have asynchronous converter loading, the input is readonly and a loading indicator
      * is shown to the user.
@@ -3078,6 +3116,20 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
           this._placeholderOptionChanged(flags);
           break;
 
+        case 'readOnly':
+          if (this._retainFocusOnReadonlyChange) {
+            // This setTimeout call is needed to allow the dom to update before we
+            // get the focus element (or the element will still be hidden).
+            setTimeout(() => {
+              this.GetFocusElement().focus();
+              if (this._resolveBusyStateFocusRestore) {
+                this._resolveBusyStateFocusRestore();
+                delete this._resolveBusyStateFocusRestore;
+              }
+            }, 0);
+          }
+          break;
+
         case 'title':
           // Ignore title attribute for custom element components.
           if (!this._IsCustomElement()) {
@@ -3237,6 +3289,9 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
     },
 
     /**
+     * JET-48463 - If we are in readonly mode, we call _GetReadonlyFocusElement, and fall back to
+     * _GetContentElement()[0] if _GetReadonlyFocusElement happens to return null.
+     * If not readonly, we just return _GetContentElement()[0]
      * @memberof oj.editableValue
      * @instance
      * @override
@@ -3244,7 +3299,20 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
      * @since 5.0.0
      */
     GetFocusElement: function () {
-      return this._GetContentElement()[0];
+      return this.options.readOnly === true ?
+        this._GetReadonlyFocusElement() || this._GetContentElement()[0] :
+        this._GetContentElement()[0];
+    },
+
+    /**
+     * Returns the readonly focus element if there is a readonly specific element, otherwise null
+     * @memberof oj.editableValue
+     * @instance
+     * @protected
+     * @return {Element|null}
+     */
+    _GetReadonlyFocusElement: function () {
+      return this._getReadonlyDiv();
     },
 
     /**
@@ -3298,6 +3366,21 @@ oj.__registerWidget('oj.editableValue', $.oj.baseComponent,
           }
           break;
         case 'readOnly':
+          this._retainFocusOnReadonlyChange = FocusUtils.containsFocus(this.widget()[0]);
+          if (this._retainFocusOnReadonlyChange) {
+            if (!this._resolveBusyStateFocusRestore) {
+              var domElem = this.element[0];
+              var busyContext = Context.getContext(domElem).getBusyContext();
+              var description = 'Waiting for focus on the component ';
+
+              if (domElem && domElem.id) {
+                description += `with id="${domElem.id}" `;
+              }
+              description += 'to be restored.';
+              this._resolveBusyStateFocusRestore =
+                busyContext.addBusyState({ description: description });
+            }
+          }
           this._addRemoveOjReadOnlyClassOnLabel(document.getElementById(this.options.labelledBy),
             value);
           break;
@@ -7440,8 +7523,7 @@ PopupMessagingStrategy.prototype._unregisterLauncherEvents = function () {
   jqLauncher[0].removeEventListener('change', this._eatChangeAndClickOnPress, true);
 
   if (isTouchSupported()) {
-    jqLauncher.ojHammer().off('press');
-    jqLauncher.ojHammer('destroy');
+    this.releaseResources();
     jqLauncher.off('contextmenu', this._eatContextMenuOnOpenPopupListener);
     this._eatContextMenuOnOpenPopupListener = null;
     this._inPressEvent = null;
@@ -7458,55 +7540,39 @@ PopupMessagingStrategy.prototype._unregisterLauncherEvents = function () {
 PopupMessagingStrategy.prototype._registerLauncherEvents = function () {
   var closeEvents;
   var closePopupCallback;
-  var compDefaults;
-  var events;
-  var hammerOptions;
   var jqLauncher = this.GetLauncher();
   var nonPressOpenEvents;
-  var openPopupCallback;
-  var pressEventIndex;
 
-  compDefaults = PopupMessagingStrategy._DEFAULTS_BY_COMPONENT[this.GetComponent().widgetName];
-  events = compDefaults ? compDefaults.events :
-           PopupMessagingStrategy._DEFAULTS_BY_COMPONENT.default.events;
+  const events = this._getPopupEventNamesToRegisterForComp();
 
   // 1. associate the ojPopup component to wrapper <div> for popup content
   // 2. wire up on() event handlers for registered events that open and close popup. E.g., focusin.
   // 3. autoDismissal happens automatically when focus leaves component. For other events like
   // mouseover it's required to call off()
   if (events.open) {
-    openPopupCallback = this._openPopupCallback;
-    if (!openPopupCallback) {
-      openPopupCallback = this._openPopup.bind(this);
-      this._openPopupCallback = openPopupCallback;
+    if (!this._openPopupCallback) {
+      this._openPopupCallback = this._openPopup.bind(this);
     }
 
     // separate out press event, namespace the events string, and attach event handler
-    pressEventIndex = events.open.indexOf('press');
+    const needsPressEvent = this._needsPressEvent(events);
     nonPressOpenEvents =
     this._getNamespacedEvents(events.open.replace('press', ''),
                               PopupMessagingStrategy._OPEN_NAMESPACE);
-    jqLauncher.on(nonPressOpenEvents, openPopupCallback);
+    jqLauncher.on(nonPressOpenEvents, this._openPopupCallback);
 
     // The pressHold gesture also fires a contextmenu event on Windows 10 touch.
     // Prevent that here for components that use 'press' for popup messaging as
     // the context menu causes the popup message window to close. Note that this
     // means the context menu will be disabled for these components.
-    if (isTouchSupported() && pressEventIndex !== -1) {
+    if (isTouchSupported() && needsPressEvent) {
       this._eatContextMenuOnOpenPopupListener = function () {
         return false;
       };
 
       jqLauncher.on('contextmenu', this._eatContextMenuOnOpenPopupListener);
 
-      // for radios and checkboxes, on ios, press hold brings up popup, but release closes it
-      // and checks it, so in this case we have to eat the click/change events. this happens
-      // in the openPopupCallback
-      hammerOptions = {
-        recognizers: [
-          [Press, { time: 750 }]
-        ] };
-      jqLauncher.ojHammer(hammerOptions).on('press', openPopupCallback);
+      this.registerHammerOpenCallbackOnLauncher();
     }
   }
 
@@ -7523,6 +7589,62 @@ PopupMessagingStrategy.prototype._registerLauncherEvents = function () {
   }
 };
 
+  /**
+   * Symmetrical method to releaseResources. Sets up resources that get
+   * removed in releaseResources.
+   * @private
+   * @memberof oj.PopupMessagingStrategy
+   * @instance
+   */
+  PopupMessagingStrategy.prototype.setupResources = function () {
+    const events = this._getPopupEventNamesToRegisterForComp();
+    const needsPressEvent = this._needsPressEvent(events);
+    if (isTouchSupported() && needsPressEvent) {
+      this.registerHammerOpenCallbackOnLauncher();
+    }
+  };
+
+  /**
+   * Register Hammer Press Event. Make sure you are on touch and you
+   * need the press event before calling this function.
+   * @private
+   * @memberof oj.PopupMessagingStrategy
+   * @instance
+   */
+  PopupMessagingStrategy.prototype.registerHammerOpenCallbackOnLauncher = function () {
+    const jqLauncher = this.GetLauncher();
+    if (jqLauncher == null) {
+      return;
+    }
+    // for radios and checkboxes, on ios, press hold brings up popup, but release closes it
+    // and checks it, so in this case we have to eat the click/change events. this happens
+    // in the openPopupCallback
+    const hammerOptions = {
+      recognizers: [
+        [Press, { time: 750 }]
+      ] };
+    jqLauncher.ojHammer(hammerOptions).on('press', this._openPopupCallback);
+  };
+
+  /**
+  * Releases resources that would otherwise leak memory if they were not released
+  * when the component's dom is removed.
+  * For example, Hammer events are put on the document and will result in
+  * detached dom memory leak if not removed.
+  * @private
+  * @memberof oj.PopupMessagingStrategy
+  * @instance
+  */
+  PopupMessagingStrategy.prototype.releaseResources = function () {
+    PopupMessagingStrategy.superclass.update.call(this);
+    const events = this._getPopupEventNamesToRegisterForComp();
+    const needsPressEvent = this._needsPressEvent(events);
+    if (isTouchSupported() && needsPressEvent) {
+      const jqLauncher = this.GetLauncher();
+      jqLauncher.off('press').ojHammer('destroy');
+    }
+  };
+
 /**
  * Turn the events string into an array, add namespace, and turn it back into a string.
  * @param {string} events e.g., "focusin mousedown"
@@ -7597,6 +7719,34 @@ PopupMessagingStrategy.prototype._getPopupPosition = function () {
   return popupPositionOptions;
 };
 
+/**
+ * Returns the events
+ *
+ * @private
+ * @memberof oj.PopupMessagingStrategy
+ * @instance
+ */
+PopupMessagingStrategy.prototype._getPopupEventNamesToRegisterForComp = function () {
+  const compDefaults =
+    PopupMessagingStrategy._DEFAULTS_BY_COMPONENT[this.GetComponent().widgetName];
+  return compDefaults ? compDefaults.events :
+    PopupMessagingStrategy._DEFAULTS_BY_COMPONENT.default.events;
+};
+
+/**
+ * Returns true if it needs a press event.
+ *
+ * @private
+ * @memberof oj.PopupMessagingStrategy
+ * @instance
+ */
+PopupMessagingStrategy.prototype._needsPressEvent = function (events) {
+   if (events && events.open) {
+    return events.open.indexOf('press') !== -1;
+   }
+   return false;
+};
+
 /**
  * Returns a jquery element that a messaging popup is bound to.
  *

package/dist/js/libs/oj/debug_esm/ojjquery-hammer.js

@@ -27,6 +27,7 @@ if (Hammer) {
             hammer.destroy();
             $el.removeData('ojHammer');
           }
+          $el.off('remove.ojHammer');
         });
 
       default:
@@ -34,7 +35,13 @@ if (Hammer) {
         return this.each(function () {
           var $el = $(this);
           if (!$el.data('ojHammer')) {
-            $el.data('ojHammer', new Manager($el[0], options));
+            const mgr = new Manager($el[0], options);
+            $el.on('remove.ojHammer', evt => {
+              if (evt.target === $el[0]) {
+                mgr.destroy();
+              }
+            });
+            $el.data('ojHammer', mgr);
           }
         });
     }

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

@@ -1198,6 +1198,16 @@ var __oj_radioset_metadata =
        * @since 5.0.0
        */
       GetFocusElement: function () {
+        // JET-48463 - oj-table issue where focus is lost
+        // GetFocusElement() needs to return the correct readonly element
+        // If _GetReadonlyFocusElement() returns null, fallback to the
+        // enabled element logic.
+        if (this.options.readOnly === true) {
+          const readonlyFocusElement = this._GetReadonlyFocusElement();
+          if (readonlyFocusElement) {
+            return readonlyFocusElement;
+          }
+        }
         // JET-43430 - dynamic form focus issue for radio buttonset
         // When tabbing through, the input element that is currently checked will be focused if
         // one is available. Otherwise the first input element will be given focus. We need to
@@ -1213,6 +1223,18 @@ var __oj_radioset_metadata =
         // If there is no checked inputs, simply return the first enabled input
         return this._GetContentElement().not(':disabled').first()[0];
       },
+      /**
+       * oj-radioset doesn't use .oj-text-field-readonly for the focusable readonly content,
+       * so we need to use a different selector.
+       * @memberof oj.ojRadioset
+       * @instance
+       * @override
+       * @protected
+       * @return {Element|null}
+       */
+      _GetReadonlyFocusElement: function () {
+        return this.widget()[0].querySelector('.oj-form-control-container');
+      },
       /**
        * Whether the component is required.
        *

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

@@ -12691,6 +12691,25 @@ oj$1.__registerWidget('oj.ojCombobox', $.oj.editableValue,
       }
     },
 
+    /**
+     * combobox-many doesn't use .oj-text-field-readonly for the focusable readonly content,
+     * so we need to use a different selector.  Combobox-one doesn't need this override,
+     * so we just return the default readonly element.
+     * @memberof! _OjMultiCombobox
+     * @instance
+     * @override
+     * @protected
+     * @return {Element|null}
+     */
+    _GetReadonlyFocusElement: function () {
+      if (this.multiple) {
+        return this.widget()[0].querySelector('.oj-combobox-accessible-container');
+      }
+
+      // For oj-combobox-one return the default element
+      return this._super();
+    },
+
     // 19670748, dropdown popup should be closed on subtreeDetached notification.
     _NotifyDetached: function () {
       this._superApply(arguments);

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

@@ -657,6 +657,19 @@ var __oj_switch_metadata =
 
     // P R O T E C T E D    C O N S T A N T S   A N D   M E T H O D S
 
+    /**
+     * oj-switch doesn't use .oj-text-field-readonly for the focusable readonly content,
+     * so we need to use a different selector.
+     * @memberof oj.ojSwitch
+     * @instance
+     * @override
+     * @protected
+     * @return {Element|null}
+     */
+    _GetReadonlyFocusElement: function () {
+      return this.widget()[0].querySelector('.oj-switch-thumb');
+    },
+
     /**
      * @private
      * @const

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

@@ -1588,6 +1588,11 @@ Table._BATCH_PROCESS_SIZE_WHEN_IDLE = 5;
  */
 Table.RESIZE_OFFSET = 10;
 
+/**
+ * @private
+ */
+Table.SIZING_ERROR_MARGIN = 0.05;
+
 /**
  * @private
  */
@@ -3221,10 +3226,11 @@ Table.prototype._registerResizeListener = function () {
   if (!this._resizeListener) {
     this._resizeListener = function () {
       var layoutManager = this._getLayoutManager();
-      var tableContainer = this._getTableContainer();
+      var containerStyle = window.getComputedStyle(this._getTableContainer());
       // Check if the width and height values should result in a sizing refresh
-      if (layoutManager.isSizingRefreshRequired(tableContainer.offsetWidth,
-                                                tableContainer.offsetHeight)) {
+      if (layoutManager.isSizingRefreshRequired(
+            layoutManager.getExactOffsetWidth(containerStyle),
+            layoutManager.getExactOffsetHeight(containerStyle))) {
         layoutManager.notifyTableUpdate(Table._UPDATE._RESIZE);
         // refresh dimensions if no tasks are pending since refresh dimensions runs during final task
         if (!this._hasPendingTasks()) {
@@ -6085,8 +6091,6 @@ TableLayoutManager.prototype.refreshTableDimensions = function () { };
  * @private
  */
 TableLayoutManager.prototype._finalizeTableDimensions = function (scrollTop, scrollLeft) {
-  var tableContainer = this._table._getTableContainer();
-
   if (scrollTop != null) {
     var maxScrollTop = this.getScroller().scrollHeight - this.getScroller().clientHeight;
     var newScrollTop = scrollTop > maxScrollTop ? maxScrollTop : scrollTop;
@@ -6103,8 +6107,9 @@ TableLayoutManager.prototype._finalizeTableDimensions = function (scrollTop, scr
 
   // cache the final dimensions
   var sizingState = this._getSizingState();
-  sizingState.outerWidth = tableContainer.offsetWidth;
-  sizingState.outerHeight = tableContainer.offsetHeight;
+  var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+  sizingState.outerWidth = this.getExactOffsetWidth(containerStyle);
+  sizingState.outerHeight = this.getExactOffsetHeight(containerStyle);
 
   this._clearTableUpdates();
   this._enableTableVisibility();
@@ -6277,7 +6282,16 @@ TableLayoutManager.prototype.getScrollBarWidth = function () {
  * @return {Object} An object with boxSizing, borderWidth, and paddingWidth properties
  * @private
  */
-TableLayoutManager.prototype._getBoxStyle = function (style) {
+TableLayoutManager.prototype._getBoxStyle = function (style, isVert) {
+  if (isVert) {
+    return {
+      boxSizing: style[Table.CSS_PROP._BOX_SIZING],
+      borderWidth: (parseFloat(style[Table.CSS_PROP._BORDER_TOP_WIDTH]) || 0) +
+        (parseFloat(style[Table.CSS_PROP._BORDER_BOTTOM_WIDTH]) || 0),
+      paddingWidth: (parseFloat(style[Table.CSS_PROP._PADDING_TOP]) || 0) +
+        (parseFloat(style[Table.CSS_PROP._PADDING_BOTTOM]) || 0)
+    };
+  }
   return {
     boxSizing: style[Table.CSS_PROP._BOX_SIZING],
     borderWidth: (parseFloat(style[Table.CSS_PROP._BORDER_RIGHT_WIDTH]) || 0) +
@@ -6521,6 +6535,22 @@ TableLayoutManager.prototype._removeTableDimensionsStyling = function () {
   this._removeHeaderColumnAndCellColumnWidths();
 };
 
+/**
+ * @private
+ */
+TableLayoutManager.prototype._getBottomSlotHeight = function () {
+  var tableBottomSlot = this._table._getTableBottomSlot();
+
+  // find Table's bottom slot height to use when determining if overflow if present
+  if (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
+      tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) {
+    // offsetHeight does not include partial px values, so computed style should be used
+    var bottomSlotStyle = window.getComputedStyle(tableBottomSlot);
+    return this.getExactOffsetHeight(bottomSlotStyle);
+  }
+  return 0;
+};
+
 /**
  * Returns an array describing the table container's scrollable state.
  * Index 0 describes the vertical state, while index 1 describeds the horizontal state.
@@ -6530,17 +6560,23 @@ TableLayoutManager.prototype._removeTableDimensionsStyling = function () {
  * @private
  */
 TableLayoutManager.prototype._getTableContainerScrollableState = function (bottomSlotHeight) {
-  var tableContainer = this._table._getTableContainer();
-  var tableElem = this._table._getTable();
+  // clientHeight and clientWidth do not include partial px values, so computed style should be used
+  var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+  var containerClientHeight = this.getExactClientHeight(containerStyle);
+  var containerClientWidth = this.getExactClientWidth(containerStyle);
+
+  // offsetHeight and offsetWidth do not include partial px values, so computed style should be used
+  var tableElemStyle = window.getComputedStyle(this._table._getTable());
+  var tableElemHeight = this.getExactOffsetHeight(tableElemStyle);
+  var tableElemWidth = this.getExactOffsetWidth(tableElemStyle);
 
   var result = [];
-  if (tableContainer.clientHeight > 0) {
-    var innerHeight = tableElem.offsetHeight + bottomSlotHeight;
-    // don't use tableContainer[0].scrollHeight as it may not be accurate
-    if (innerHeight > tableContainer.clientHeight) {
+  if (containerClientHeight > 0) {
+    var innerHeight = tableElemHeight + bottomSlotHeight;
+    if (innerHeight - containerClientHeight > Table.SIZING_ERROR_MARGIN) {
       // overflow
       result[0] = 1;
-    } else if (tableContainer.clientHeight - innerHeight > 0) {
+    } else if (containerClientHeight - innerHeight > Table.SIZING_ERROR_MARGIN) {
       // underflow
       result[0] = -1;
     } else {
@@ -6550,11 +6586,11 @@ TableLayoutManager.prototype._getTableContainerScrollableState = function (botto
     result[0] = 0;
   }
 
-  if (tableContainer.clientWidth > 0) {
-    if (tableElem.offsetWidth > tableContainer.clientWidth) {
+  if (containerClientWidth > 0) {
+    if (tableElemWidth - containerClientWidth > Table.SIZING_ERROR_MARGIN) {
       // overflow
       result[1] = 1;
-    } else if (tableContainer.clientWidth - tableElem.offsetWidth > 0) {
+    } else if (containerClientWidth - tableElemWidth > Table.SIZING_ERROR_MARGIN) {
       // underflow
       result[1] = -1;
     } else {
@@ -6923,6 +6959,42 @@ TableLayoutManager.prototype._getPageX = function (event) {
   return 0;
 };
 
+/**
+ * @private
+ */
+TableLayoutManager.prototype.getExactClientHeight = function (computedStyle) {
+  var boxStyle = this._getBoxStyle(computedStyle, true);
+  var height = parseFloat(computedStyle[Table.CSS_PROP._HEIGHT]) - boxStyle.borderWidth -
+    boxStyle.paddingWidth;
+  return Math.round((height + Number.EPSILON) * 1000) / 1000;
+};
+
+/**
+ * @private
+ */
+TableLayoutManager.prototype.getExactClientWidth = function (computedStyle) {
+  var boxStyle = this._getBoxStyle(computedStyle);
+  var width = parseFloat(computedStyle[Table.CSS_PROP._WIDTH]) - boxStyle.borderWidth -
+    boxStyle.paddingWidth;
+  return Math.round((width + Number.EPSILON) * 1000) / 1000;
+};
+
+/**
+ * @private
+ */
+TableLayoutManager.prototype.getExactOffsetHeight = function (computedStyle) {
+  var height = parseFloat(computedStyle[Table.CSS_PROP._HEIGHT]);
+  return Math.round((height + Number.EPSILON) * 1000) / 1000;
+};
+
+/**
+ * @private
+ */
+TableLayoutManager.prototype.getExactOffsetWidth = function (computedStyle) {
+  var width = parseFloat(computedStyle[Table.CSS_PROP._WIDTH]);
+  return Math.round((width + Number.EPSILON) * 1000) / 1000;
+};
+
 /**
  * @private
  */
@@ -7371,9 +7443,7 @@ TableLegacyLayoutManager.prototype.refreshTableDimensions = function () {
   this._verifyMinAndMaxWidths();
 
   // find Table's bottom slot height to use when determining if overflow if present
-  var bottomSlotHeight = (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
-                          tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) ?
-        tableBottomSlot.offsetHeight : 0;
+  var bottomSlotHeight = this._getBottomSlotHeight();
 
   var tableContainerScrollableState = this._getTableContainerScrollableState(bottomSlotHeight);
   sizingState.hasVerticalOverflow = (tableContainerScrollableState[0] === 1);
@@ -7507,12 +7577,9 @@ TableLegacyLayoutManager.prototype.refreshTableDimensions = function () {
       this._setColumnWidths(0);
     }
     // if bottom slot present, ensure bottom slot is pinned to bottom when underflow is present
-    if (bottomSlotHeight > 0) {
-      var availableHeight = tableContainer.clientHeight - bottomSlotHeight;
-      if (availableHeight !== tableElem.offsetHeight) {
-        tableBottomSlot.style[Table.CSS_PROP._BOTTOM] = 0;
-        tableBottomSlot.style[Table.CSS_PROP._POSITION] = Table.CSS_VAL._ABSOLUTE;
-      }
+    if (bottomSlotHeight > 0 && tableContainerScrollableState[0] === -1) {
+      tableBottomSlot.style[Table.CSS_PROP._BOTTOM] = 0;
+      tableBottomSlot.style[Table.CSS_PROP._POSITION] = Table.CSS_VAL._ABSOLUTE;
     }
   }
   if (this._table._isStatusMessageShown()) {
@@ -8259,17 +8326,7 @@ TableStickyLayoutManager.prototype.refreshTableDimensions = function () {
     scrollLeft = this._table._scrollLeft;
   }
 
-  var tableBottomSlot = this._table._getTableBottomSlot();
-
-  // find Table's bottom slot height to use when determining if overflow if present
-  var bottomSlotHeight;
-  if (tableBottomSlot != null && tableBottomSlot.clientHeight > 0 &&
-      tableBottomSlot.style[Table.CSS_PROP._DISPLAY] !== Table.CSS_VAL._NONE) {
-    bottomSlotHeight = tableBottomSlot.offsetHeight;
-  } else {
-    bottomSlotHeight = 0;
-  }
-
+  var bottomSlotHeight = this._getBottomSlotHeight();
   var tableContainer = this._table._getTableContainer();
   var tableElem = this._table._getTable();
 
@@ -8332,16 +8389,19 @@ TableStickyLayoutManager.prototype._initializeColumnLayouts = function () {
  * @private
  */
 TableStickyLayoutManager.prototype._setupTableHeight = function (bottomSlotHeight) {
-  var tableContainer = this._table._getTableContainer();
   var tableScroller = this._table._getTableScroller();
 
   // clear any previous table scroller styling
   tableScroller.removeAttribute(Table.DOM_ATTR._STYLE);
 
   // Size the table scroller to fit in the container height
-  var containerClientHeight = tableContainer.clientHeight;
+  var containerStyle = window.getComputedStyle(this._table._getTableContainer());
+  var containerClientHeight = this.getExactClientHeight(containerStyle);
   var tableScrollerHeight = containerClientHeight - bottomSlotHeight;
-  if (tableScroller.offsetHeight !== tableScrollerHeight) {
+
+  var scrollerStyle = window.getComputedStyle(tableScroller);
+  var scrollerOffsetHeight = this.getExactOffsetHeight(scrollerStyle);
+  if (Math.abs(scrollerOffsetHeight - tableScrollerHeight) > Table.SIZING_ERROR_MARGIN) {
     tableScroller.style[Table.CSS_PROP._HEIGHT] = tableScrollerHeight + Table.CSS_VAL._PX;
   }
 
@@ -13505,6 +13565,7 @@ Table.CSS_PROP = {
   _LEFT: 'left',
   _RIGHT: 'right',
   _PADDING_TOP: 'padding-top',
+  _PADDING_BOTTOM: 'padding-bottom',
   _PADDING_LEFT: 'padding-left',
   _PADDING_RIGHT: 'padding-right',
   _OVERFLOW: 'overflow',
@@ -13515,6 +13576,7 @@ Table.CSS_PROP = {
   _MIN_HEIGHT: 'min-height',
   _FLOAT: 'float',
   _BORDER_TOP: 'border-top',
+  _BORDER_TOP_WIDTH: 'border-top-width',
   _BORDER_BOTTOM_WIDTH: 'border-bottom-width',
   _BORDER_LEFT_WIDTH: 'border-left-width',
   _BORDER_RIGHT_WIDTH: 'border-right-width',

package/dist/js/libs/oj/main-template.js

@@ -15,9 +15,9 @@
   requirejs.config({
     // Path mappings for the logical module names
     paths: {
-      'ojs': 'libs/oj/v11.1.7/min@insertESLevelPath@',
-      'ojL10n': 'libs/oj/v11.1.7/ojL10n',
-      'ojtranslations': 'libs/oj/v11.1.7/resources',
+      'ojs': 'libs/oj/v11.1.8/min@insertESLevelPath@',
+      'ojL10n': 'libs/oj/v11.1.8/ojL10n',
+      'ojtranslations': 'libs/oj/v11.1.8/resources',
       
   'knockout': 'libs/knockout/knockout-3.5.1',
   'knockout-mapping': 'libs/knockout/knockout.mapping-latest',