@oracle/oraclejet 14.0.10 → 14.1.1

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

@@ -3423,10 +3423,12 @@ DvtDataGrid.prototype.SetUpdateScrollPostionOnRefreshCallback = function (callba
  * @param {Element} element the element to remove
  */
 DvtDataGrid.prototype._remove = function (element) {
-  this._uniqueIdCallback(element, true);
+  if (element != null) {
+    this._uniqueIdCallback(element, true);
 
-  // callback allows jQuery to clean the node on a remove
-  this.m_removeCallback.call(null, element);
+    // callback allows jQuery to clean the node on a remove
+    this.m_removeCallback.call(null, element);
+  }
 };
 
 /**
@@ -4113,7 +4115,7 @@ DvtDataGrid.prototype._getLastAxis = function (axis) {
 DvtDataGrid.prototype.empty = function () {
   // remove everything that will be rebuilt
   if (this.m_empty) {
-    this.m_databody.firstChild.removeChild(this.m_empty);
+    this._remove(this.m_empty);
   }
   if (this.m_corner) {
     this._remove(this.m_corner);
@@ -4245,6 +4247,7 @@ DvtDataGrid.prototype.resetInternal = function () {
 
   // selection
   this.m_discontiguousSelection = false;
+  this.m_selectionFrontier = null;
 
   // event listeners
   this.m_docMouseMoveListener = null;
@@ -4265,6 +4268,7 @@ DvtDataGrid.prototype.resetInternal = function () {
   // resizing
   this.m_resizing = false;
   this.m_resizingElement = null;
+  this.m_resizingElementSibling = null;
   this.m_resizingElementMin = null;
 
   // data states
@@ -4508,6 +4512,13 @@ DvtDataGrid.prototype._getTemplateEngine = function () {
   return this.m_engine;
 };
 
+DvtDataGrid.prototype._cleanTemplateNodes = function (node) {
+  var templateEngine = this._getTemplateEngine();
+  if (templateEngine != null) {
+    templateEngine.clean(node);
+  }
+};
+
 /**
  * Returns true if instance of DataGridProvider
  * @private
@@ -19181,7 +19192,9 @@ DvtDataGrid.prototype._setEditableClone = function (element) {
 DvtDataGrid.prototype._destroyEditableClone = function () {
   if (this.m_editableClone) {
     if (this.m_editableClone.parentNode != null) {
-      this.m_root.removeChild(this.m_editableClone);
+      this._remove(this.m_editableClone);
+    } else {
+      this._cleanTemplateNodes(this.m_editableClone);
     }
     delete this.m_editableClone;
   }
@@ -35836,6 +35849,8 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
 
     // remove the resize DOM listener
     this._unregisterResizeListener(this.root);
+
+    this.contextMenuEvent = null;
   },
 
   _registerEventListeners: function () {
@@ -36261,7 +36276,7 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
         (children[i].tagName !== 'OJ-MENU' ||
           (children[i].tagName === 'OJ-MENU' && children[i].slot !== 'contextMenu'))
       ) {
-        this.root.removeChild(children[i]);
+        this._remove(children[i]);
       }
     }
   },
@@ -37759,7 +37774,10 @@ oj.__registerWidget('oj.ojDataGrid', $.oj.baseComponent, {
    * @private
    */
   _remove: function (element) {
-    $(element).remove();
+    if (element != null) {
+      this.grid._cleanTemplateNodes(element);
+      $(element).remove();
+    }
   },
 
   /**

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

@@ -2970,11 +2970,13 @@ IteratingDataProviderContentHandler.prototype._registerDomScroller = function ()
     initialRowCount: this.m_root.childElementCount,
     success: function (result) {
       self.signalTaskEnd(); // for beforeFetch
-      self.handleDomScrollerFetchedData(result);
+      if (self.m_widget != null) {
+        self.handleDomScrollerFetchedData(result);
+      }
       if (self.m_root == null || result.value == null) {
         // in this case fetchEnd will not be called so we will need to clean up for signalTaskStart in scrollFetch callback
         self.signalTaskEnd();
-        if (self.m_root != null) {
+        if (self.m_root != null && self.m_widget != null) {
           // this is called as part of fetchEnd, see 
           self.m_widget.renderComplete(true);
         }

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

@@ -4240,6 +4240,8 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     if (value) {
       // need to preserve the time portion when of ojInputDateTime, so update only year, month, and date
       try {
+        // After this method call the value is a local datetime. no offset, no zulu. It will get converted
+        // back in the switchDone method when the user clicks the Done button or closes the picker.
         value = converterUtils._dateTime(value, {
           fullYear: tempDate.getFullYear(),
           month: tempDate.getMonth(),
@@ -6284,6 +6286,13 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
     }
   },
 
+  _createOffsetConverter: function (inputConverter) {
+    var resolvedOptions = inputConverter.resolvedOptions();
+    var options = {};
+    $.extend(options, resolvedOptions, { isoStrFormat: 'offset' });
+    return new IntlDateTimeConverter(options);
+  },
+
   /**
    * TODO: Technically i think should be used for the calendar, but later since late in release
    * @ignore
@@ -6421,7 +6430,22 @@ oj.__registerWidget('oj.ojInputDate', $.oj.inputBase, {
 
     var converter = this._GetConverter();
     if (!(converter instanceof Promise)) {
-      this._switcherPrevValue = converter.parse(this._getDateIso());
+      // switcherPrevValue is used as the base value where the new day, month and/or year is substituted into
+      // when the user selects a new day, month, and/or year. (See the switchDone method for details)
+      // switcherPrevValue can't be zulu, because if it is zulu,
+      // then substituting the day into a zulu date might be a different day in the timezone and then the formatted
+      // date will be a different day than what the user selected. (See JET-54551)
+      // So if it is zulu we change it to offset.
+      // This is what a zulu and offset format looks like
+      // zulu: 2013-12-13T04:00:00Z
+      // offset: 2013-12-01T20:00:00-08:00
+      const dateIso = this.options.value ? this._getDateIso() : '';
+      if (dateIso && IntlConverterUtils._getISOStrFormatType(dateIso) === 'zulu') {
+        const offsetConverter = this._createOffsetConverter(converter);
+        this._switcherPrevValue = offsetConverter.parse(dateIso);
+      } else {
+        this._switcherPrevValue = converter.parse(dateIso);
+      }
     } else {
       this._switcherPrevValue = this._getDateIso();
     }
@@ -12340,10 +12364,12 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
               ($.ui.keyCode.ENTER === keyCode || $.ui.keyCode.SPACE === keyCode)) ||
             evt.type === 'click'
           ) {
-            var formattedValue = self._GetConverter().format(self._getDateIso());
-            var newVal = self._GetConverter().parse(formattedValue);
+            var newVal;
             if (self._switcherDateValue) {
               newVal = self._switcherDateValue;
+            } else {
+              var formattedValue = self._GetConverter().format(self._getDateIso());
+              newVal = self._GetConverter().parse(formattedValue);
             }
 
             if (self._switcherTimeValue) {
@@ -13074,20 +13100,6 @@ oj.__registerWidget('oj.ojInputDateTime', $.oj.ojInputDate, {
    */
   _ShowHTMLDatePicker: function () {
     var retVal = this._superApply(arguments);
-
-    // if there is a value, save the Iso date version as the default value. Otherwise, set to ""
-    // so that we correctly restore the empty string if there is no value.
-
-    var converter = this._GetConverter();
-    if (!(converter instanceof Promise)) {
-      this._switcherPrevValue = converter.parse(this.options.value ? this._getDateIso() : '');
-    } else {
-      this._switcherPrevValue = this.options.value ? this._getDateIso() : '';
-    }
-    this._switcherPrevDay = this._currentDay;
-    this._switcherPrevMonth = this._currentMonth;
-    this._switcherPrevYear = this._currentYear;
-
     this._updateSwitcherText();
     return retVal;
   },

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

@@ -9,7 +9,7 @@ import { BaseComponentDefaults, CSSStyle, CategoryRolloverHandler, Obj, Point, M
 import { PanZoomCanvasKeyboardHandler, PanZoomComponent, PanZoomCanvas } from 'ojs/ojdvt-panzoomcanvas';
 import { getLogicalChildPopup } from 'ojs/ojkeyboardfocus-utils';
 import { Overview } from 'ojs/ojdvt-overview';
-import { CustomElementUtils } from 'ojs/ojcustomelement-utils';
+import { isElementRegistered } from 'ojs/ojcustomelement-registry';
 
 /**
  * Default values and utility functions for component versioning.
@@ -4207,7 +4207,7 @@ class DvtDiagramNode extends Container {
       var siblings = parentNode
         ? parentNode.getChildNodes()
         : this.GetDiagram().GetRootNodeObjects();
-      next = KeyboardHandler.getNextAdjacentNavigable(this, event, siblings);
+      next = KeyboardHandler.getNextAdjacentNavigable(this, event, siblings, true);
     }
     if (event instanceof KeyboardEvent) this._diagram.ensureObjInViewport(event, next);
 
@@ -10085,7 +10085,7 @@ class Diagram extends PanZoomComponent {
           // stop looking when you hit the diagram
           while (
             !(
-              (CustomElementUtils.isElementRegistered(activeElem.tagName) && activeElem.id) ||
+              (isElementRegistered(activeElem.tagName) && activeElem.id) ||
               activeElem.tagName === 'OJ-DIAGRAM'
             )
           ) {
@@ -12060,7 +12060,23 @@ class Diagram extends PanZoomComponent {
     }
     return null;
   }
-
+  /**
+   * Shows the keyboard focus effect.  Function is called when diagram.focus() is called.
+   */
+  showFocusEffect() {
+    if (Agent.isTouchDevice()) return;
+    var navigable = this.getEventManager().getFocus();
+    if (!navigable) {
+      // navigate to the default
+      var arNodes = this.GetRootNodeObjects();
+      if (arNodes.length > 0) {
+        navigable = this.getEventManager().getKeyboardHandler().getDefaultNavigable(arNodes);
+      }
+    }
+    if (navigable) {
+      navigable.showKeyboardFocusEffect();
+    }
+  }
   /**
    * Updates keyboard focus effect
    * @private
@@ -12074,7 +12090,7 @@ class Diagram extends PanZoomComponent {
       if (this.activeInnerElems) {
         var node = this.getNodeById(this.activeInnerElemsItemId);
         // if neither the old active elem had an ID and elem was successfully focused
-        // nor if old custom elem had an ID and was succesffuly focused
+        // nor if old custom elem had an ID and was succesfully focused
         if (
           !(
             (this._oldActiveElemId && this._enableActiveElems(this._oldActiveElemId, node)) ||

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

@@ -3577,6 +3577,17 @@ oj.__registerWidget('oj.ojDiagram', $.oj.dvtBaseComponent, {
     beforePanZoomReset: null
   },
 
+  _ComponentCreate: function () {
+    this._super();
+    let comp = this._getRootElement();
+    comp.defaultFocusFunc = comp.focus;
+    // overwriting the default focus method to also show the focus ring
+    comp.focus = () => {
+      comp.defaultFocusFunc();
+      this._component.showFocusEffect();
+    };
+  },
+
   _InitOptions: function (originalDefaults, constructorOptions) {
     this._super(originalDefaults, constructorOptions);
 

package/dist/js/libs/oj/debug_esm/ojdvt-base.js

@@ -586,6 +586,14 @@ DvtStyleProcessor.populateOptions = function (options, childClasses) {
   }
 };
 
+/**
+ * Clears the cached value of the given key.
+ * @param {string} styleClass The key to clear.
+ */
+DvtStyleProcessor.prototype.clearCache = function (styleClass) {
+  this._styleCache[styleClass] = undefined;
+};
+
 /**
  * Handler for DataProvider generated content for chart
  * @constructor
@@ -2179,6 +2187,16 @@ oj.__registerWidget(
       }
     },
 
+    /**
+     * Called before a component render due to resize.
+     * @protected
+     * @instance
+     * @memberof oj.dvtBaseComponent
+     */
+    _BeforeResizeRender: function () {
+      // subclasses override
+    },
+
     /**
      * Adds a resize listener for this component.
      * @private
@@ -3002,6 +3020,9 @@ oj.__registerWidget(
           this._removeResizeListener();
         }
 
+        if (isResize) {
+          this._BeforeResizeRender();
+        }
         this._component.render(isResize ? null : options, this._width, this._height);
 
         if (bRemoveResizeListener) {

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

@@ -29938,9 +29938,15 @@ KeyboardHandler._computeDelta = function (currentBounds, candidateBounds, direct
  * @param {DvtKeyboardNavigable} current
  * @param {DvtKeyboardEvent} event
  * @param {Array} listOfObjects Array of DvtKeyboardNavigable objects
+ * @param {Boolean=} compareCenters if true, will compare centers of the navigable instead of upper left corner
  * @return {DvtKeyboardNavigable}
  */
-KeyboardHandler.getNextAdjacentNavigable = function (current, event, listOfObjects) {
+KeyboardHandler.getNextAdjacentNavigable = function (
+  current,
+  event,
+  listOfObjects,
+  compareCenters
+) {
   var keycode = event.keyCode;
 
   if (!listOfObjects) return null;
@@ -29965,7 +29971,7 @@ KeyboardHandler.getNextAdjacentNavigable = function (current, event, listOfObjec
       continue;
     }
 
-    if (!KeyboardHandler._isValidDestination(object, current, keycode)) continue;
+    if (!KeyboardHandler._isValidDestination(object, current, keycode, compareCenters)) continue;
 
     var inContact = KeyboardHandler._calcInContact(object, current, keycode);
 
@@ -30126,13 +30132,37 @@ KeyboardHandler._calcDistanceAngleWeighted = function (object, current, keycode)
  * @param {DvtKeyboardNavigable} object
  * @param {DvtKeyboardNavigable} current
  * @param {Number} keycode
+ * @param {Boolean} compareCenters if true, will compare centers of the navigable instead of upper left corner
  * @return {Boolean}
  * @private
  */
-KeyboardHandler._isValidDestination = function (object, current, keycode) {
+KeyboardHandler._isValidDestination = function (object, current, keycode, compareCenters) {
   var objBB = object.getKeyboardBoundingBox();
   var curBB = current.getKeyboardBoundingBox();
 
+  // compare the centers of the navigable and to be valid, the navigable must be in the right direction
+  // without tolerance
+  if (compareCenters) {
+    var objCenterX = objBB.x + 0.5 * objBB.w;
+    var curCenterX = curBB.x + 0.5 * curBB.w;
+    var objCenterY = objBB.y + 0.5 * objBB.h;
+    var curCenterY = curBB.y + 0.5 * curBB.h;
+
+    switch (keycode) {
+      case KeyboardEvent.UP_ARROW:
+        return objCenterY < curCenterY;
+      case KeyboardEvent.DOWN_ARROW:
+        return objBB.y > curCenterY;
+      case KeyboardEvent.RIGHT_ARROW:
+        return objCenterX > curCenterX;
+      case KeyboardEvent.LEFT_ARROW:
+        return objCenterX < curCenterX;
+      default:
+        break;
+    }
+    return true;
+  }
+
   switch (keycode) {
     case KeyboardEvent.UP_ARROW:
       return objBB.y < curBB.y || KeyboardHandler._areEqualWithinTolerance(objBB.y, curBB.y);

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

@@ -7017,9 +7017,8 @@ class DvtGanttTask {
     const svgClassName = this.getSvgClassName(property);
     const svgStyle = this.getSvgStyle(property);
 
-    if (svgClassName) {
-      taskShape.applyStyleClasses(svgClassName);
-    }
+    // JET-48762: We need to ensure updated default style classes are applied on every render.
+    taskShape.applyStyleClasses(svgClassName);
 
     if (svgStyle) {
       taskShape.setStyle(svgStyle);

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

@@ -2504,6 +2504,97 @@ var __oj_gantt_reference_object_metadata =
  * <oj-gantt-reference-object short-desc="[[$current.data.shortDesc]]"></oj-gantt-reference-object>
  */
 
+/**
+ * Class to help set css properties on the component root options object
+ * @param {Object} object The root options object from which this path should be resolved
+ * @param {string} path The string path within the options object to resolve
+ * @protected
+ * @constructor
+ * @ignore
+ */
+const DvtJsonPath = function (object, path) {
+  this._path = path;
+  this._root = object;
+  this._delimiter = '/';
+};
+
+/**
+ * Resolves the parameter of the leaf object and the leaf object itself
+ * @param {Object} root The root object to update
+ * @param {string} path The string path within the root object to resolve
+ * @param {string} delimiter The string delimiter for the path string
+ * @param {boolean} createIfMissing Flag to create the hierarchy of the namespaces if they do not exist
+ * @return {Object} The resolved parameter
+ * @private
+ */
+DvtJsonPath.prototype._resolveLeafObjectAndProperty = function (
+  root,
+  path,
+  delimiter,
+  createIfMissing
+) {
+  var result = {};
+  while (root && path.indexOf(delimiter) > -1) {
+    var subProperty = path.substring(0, path.indexOf(delimiter));
+    if (createIfMissing && root[subProperty] === undefined) {
+      // eslint-disable-next-line no-param-reassign
+      root[subProperty] = {};
+    }
+    // eslint-disable-next-line no-param-reassign
+    root = root[subProperty];
+    // eslint-disable-next-line no-param-reassign
+    path = path.substring(path.indexOf(delimiter) + 1, path.length);
+  }
+
+  if (root) {
+    result.object = root;
+    result.parameter = path;
+  }
+
+  return result;
+};
+
+/**
+ * Resolves path to the leaf object and parameter of this object
+ * @param {boolean} createIfMissing Flag to create the hierarchy of the namespaces if they do not exist
+ * @private
+ */
+DvtJsonPath.prototype._resolvePath = function (createIfMissing) {
+  if (this._leaf === undefined) {
+    var result = this._resolveLeafObjectAndProperty(
+      this._root,
+      this._path,
+      this._delimiter,
+      createIfMissing
+    );
+
+    this._leaf = result.object;
+    this._param = result.parameter;
+  }
+};
+
+/**
+ * Returns value of the leaf element of the path.
+ * @return {Object} value The value of the leaf element or undefined if path structure is not yet created
+ */
+DvtJsonPath.prototype.getValue = function () {
+  this._resolvePath(false);
+  return this._leaf === undefined ? undefined : this._leaf[this._param];
+};
+
+/**
+ * Sets value of the leaf element of the path.
+ * @param {Object} value The value of the leaf element
+ * @param {boolean} bOverride Whether to override the original value
+ */
+DvtJsonPath.prototype.setValue = function (value, bOverride) {
+  this._resolvePath(true);
+
+  if (bOverride || !this._leaf[this._param]) {
+    this._leaf[this._param] = value;
+  }
+};
+
 /**
  * For default date converter
  * @static
@@ -5677,6 +5768,50 @@ oj.__registerWidget('oj.ojGantt', $.oj.dvtTimeComponent, {
     }
   },
 
+  /**
+   * Recalculate styles on the given childStyleClasses and update the given
+   * options object.
+   * @param {Object} options options object
+   * @param {Array<string>} childStyleClassKeys subset of keys from _GetChildStyleClasses() to target
+   * @private
+   * @instance
+   * @memberof oj.ojGantt
+   */
+  _updateStyles: function (options, childStyleClassKeys) {
+    var childStyleClasses = this._GetChildStyleClasses();
+    var targetChildStyleClasses = {};
+    childStyleClassKeys.forEach((key) => {
+      var definitions = childStyleClasses[key];
+      targetChildStyleClasses[key] = definitions;
+      if (!(definitions instanceof Array)) {
+        definitions = [definitions];
+      }
+      // Clear previous values from options
+      definitions.forEach((definition) => {
+        var stylePath = definition.path;
+        var path = new DvtJsonPath(options, stylePath);
+        path.setValue(undefined, true);
+      });
+      // Clear cached styles
+      this._styleProcessor.clearCache(key);
+    });
+
+    this._styleProcessor.processStyles(
+      this.element,
+      options,
+      this._GetComponentStyleClasses(),
+      targetChildStyleClasses
+    );
+  },
+
+  // inheritdoc
+  _BeforeResizeRender: function () {
+    // JET-54524
+    // We need to recalculate padding related styles during resize
+    var options = this._component.getOptions();
+    this._updateStyles(options, ['oj-gantt-container', 'oj-gantt-row-label']);
+  },
+
   // @inheritdoc
   _GetComponentRendererOptions: function () {
     return [

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

@@ -1584,8 +1584,8 @@ oj.__registerWidget('oj.ojLedGauge', $.oj.dvtBaseGauge, {
  * @ojrole img
  * @ojrole application
  *
- * @ojpropertylayout [ {propertyGroup: "common", items: ["selectedState.shape", "unselectedState.shape", "hoverState.shape", "changedState.shape", "style"]},
- *                     {propertyGroup: "data", items: ["value", "min", "max", "step"]} ]
+ * @ojpropertylayout [ {propertyGroup: "common", items: ["style"]},
+ *                     {propertyGroup: "data", items: ["value", "max", "step"]} ]
  * @ojvbdefaultcolumns 4
  * @ojvbmincolumns 1
  *
@@ -3396,12 +3396,13 @@ oj.__registerWidget('oj.ojStatusMeterGauge', $.oj.dvtBaseGauge, {
  * </p>
  * <h5>track-resize attribute</h5>
  * <p>track-resize attribute is no longer supported. Rating gauges now have fixed sizes. Since we are not supporting the 'fit' enum value for the 'size' api, we no longer need 'track-resize'. </p>
- * <h5>thresholds attribute</h5>
- * <p>For the initial release of the oj-c-rating-gauge, we are not supporting thresholds. We plan on supporting this use case in a future release.</p>
  * <h5>tooltip attribute and tooltipTemplate slot </h5>
  * <p> The support for this feature has been split into two attributes, tooltip and datatip. The datatip will be used for interactive gauges only and it will be a function that takes datatipDetail as argument.
  * Tooltip attribute, which will be a string instead of a function, will be used for readonly rating gauge.
  * </p>
+ * <h5>title support</h5>
+ * <p>title will no longer be required to make your rating gauge accessible. Use the datatip or tooltip APIs or the aria-label attribute instead.
+ * </p>
  * @ojfragment migrationDoc
  * @memberof oj.ojRatingGauge
  */
@@ -3734,6 +3735,7 @@ oj.__registerWidget('oj.ojStatusMeterGauge', $.oj.dvtBaseGauge, {
  * @property {number=} lineWidth=2  The width of the reference line.
  * @property {("dashed"|"dotted"|"solid")=} lineStyle="solid" The line style of the reference line.
  * @ojdeprecated {since: '14.0.0', description: 'This is not recommended in the Redwood design system', target: 'property', for: 'lineStyle' }
+ * @ojdeprecated {since: '14.1.0', description: 'This is not recommended in the Redwood design system', target: 'property', for: 'lineWidth' }
  */
 /**
  * @typedef {Object} oj.ojStatusMeterGauge.Threshold

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

@@ -585,7 +585,7 @@ let InputSearch = InputSearch_1 = class InputSearch extends Component {
         if (state.fullScreenPopup) {
             rootClasses += ' oj-inputsearch-mobile';
         }
-        const inputClasses = 'oj-inputsearch-input oj-text-field-input';
+        const inputClasses = 'oj-inputsearch-input oj-text-field-input ';
         const iconClasses = 'oj-text-field-start-end-icon oj-inputsearch-search-icon oj-component-icon';
         const displayValue = state.displayValue || '';
         return this._renderEnabled(props, state, rootClasses, iconClasses, displayValue, inputClasses);
@@ -922,11 +922,16 @@ let InputSearch = InputSearch_1 = class InputSearch extends Component {
     }
     _renderDesktopMainTextFieldContainer(props, state, searchIcon, displayValue, inputClasses, ariaLabel, listboxId, inputType, autocompleteFloatingElem) {
         const containerClasses = 'oj-text-field-container oj-text-field-has-start-slot';
-        return (jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId(), ref: this._setMainInputContainerElem }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), jsxs("div", Object.assign({ class: "oj-text-field-middle", role: this._dataProvider ? 'combobox' : undefined, "aria-label": this._dataProvider ? ariaLabel : null, "aria-owns": listboxId, "aria-haspopup": this._dataProvider ? 'listbox' : 'false', "aria-expanded": state.dropdownOpen ? 'true' : 'false' }, { children: [jsx(ComposingInput, Object.assign({ type: inputType, inputRef: this._setMainInputElem, value: displayValue, class: inputClasses + ' oj-inputsearch-filter', placeholder: props.placeholder, autocomplete: "off", autocorrect: "off" }, { autocapitalize: 'off' }, { spellcheck: false, autofocus: false, "aria-label": ariaLabel, "aria-autocomplete": this._dataProvider ? 'list' : null, "aria-controls": listboxId, "aria-busy": state.dropdownOpen && state.loading, "aria-activedescendant": this._dataProvider ? state.activeDescendantId : null, onfocusin: this._handleFocusin, onfocusout: this._handleFocusout, onInputChanged: this._handleInputChanged, onKeyDown: this._handleDesktopMainInputKeydown })), autocompleteFloatingElem] }))] })));
+        return (jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId(), ref: this._setMainInputContainerElem }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), jsxs("div", Object.assign({ class: "oj-text-field-middle", role: this._dataProvider ? 'combobox' : undefined, "aria-label": this._dataProvider ? ariaLabel : null, "aria-owns": listboxId, "aria-haspopup": this._dataProvider ? 'listbox' : 'false', "aria-expanded": state.dropdownOpen ? 'true' : 'false' }, { children: [jsx(ComposingInput, { type: inputType, inputRef: this._setMainInputElem, value: displayValue, class: inputClasses + ' oj-inputsearch-filter', placeholder: props.placeholder, autocomplete: "off", autocorrect: "off", autocapitalize: "off", spellcheck: false, autofocus: false, "aria-label": ariaLabel, "aria-autocomplete": this._dataProvider ? 'list' : null, "aria-controls": listboxId, "aria-busy": state.dropdownOpen && state.loading, "aria-activedescendant": this._dataProvider ? state.activeDescendantId : null, onfocusin: this._handleFocusin, onfocusout: this._handleFocusout, onInputChanged: this._handleInputChanged, onKeyDown: this._handleDesktopMainInputKeydown }), autocompleteFloatingElem] }))] })));
     }
     _renderMobileMainTextFieldContainer(props, state, searchIcon, inputClasses, ariaLabel, listboxId) {
+        const { placeholder, value } = props;
+        const { dropdownOpen, loading } = state;
         const containerClasses = 'oj-text-field-container oj-text-field-has-start-slot';
-        return (jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId() }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), jsx("div", Object.assign({ class: "oj-text-field-middle", role: this._dataProvider ? 'combobox' : undefined, "aria-label": this._dataProvider ? ariaLabel : null, "aria-owns": listboxId, "aria-haspopup": this._dataProvider ? 'listbox' : 'false', "aria-expanded": state.dropdownOpen ? 'true' : 'false' }, { children: jsx("input", Object.assign({ readOnly: true, ref: this._setMainInputElem, value: props.value, class: inputClasses, placeholder: props.placeholder, autocomplete: "off", autocorrect: "off" }, { autocapitalize: 'off' }, { spellcheck: false, autofocus: false, "aria-label": ariaLabel, "aria-autocomplete": this._dataProvider ? 'list' : null, "aria-controls": listboxId, "aria-busy": state.dropdownOpen && state.loading, onfocusin: this._handleFocusin, onfocusout: this._handleFocusout })) }))] })));
+        const mobileInputClasses = inputClasses +
+            ' oj-inputsearch-input-displayonly ' +
+            (value ? '' : ' oj-inputsearch-placeholder');
+        return (jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMainInputContainerId() }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: searchIcon })), jsx("div", Object.assign({ class: "oj-text-field-middle", role: this._dataProvider ? 'combobox' : undefined, "aria-label": this._dataProvider ? ariaLabel : null, "aria-owns": listboxId, "aria-haspopup": this._dataProvider ? 'listbox' : 'false', "aria-expanded": dropdownOpen ? 'true' : 'false' }, { children: jsx("div", Object.assign({ ref: this._setMainInputElem, class: mobileInputClasses, "aria-label": ariaLabel, "aria-controls": listboxId, "aria-busy": dropdownOpen && loading, tabIndex: 0, onfocusin: this._handleFocusin, onfocusout: this._handleFocusout }, { children: jsx("div", { children: value || placeholder }) })) }))] })));
     }
     _renderMobileDropdownFilterField(props, state, displayValue, inputClasses, ariaLabel, listboxId, inputType, autocompleteFloatingElem) {
         let classes = 'oj-text-field';
@@ -943,7 +948,7 @@ let InputSearch = InputSearch_1 = class InputSearch extends Component {
             containerClasses += ' oj-text-field-has-end-slot';
             clearIcon = this._renderMobileDropdownClearIcon();
         }
-        return (jsx("div", Object.assign({ class: classes }, { children: jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMobileFilterContainerId() }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: backIcon })), jsxs("div", Object.assign({ class: "oj-text-field-middle", "aria-label": ariaLabel, "aria-owns": listboxId }, { children: [jsx(ComposingInput, Object.assign({ type: inputType, inputRef: this._setMobileFilterInputElem, value: displayValue, class: inputClasses + ' oj-inputsearch-filter', placeholder: props.placeholder, autocomplete: "off", autocorrect: "off" }, { autocapitalize: 'off' }, { spellcheck: false, autofocus: false, "aria-label": ariaLabel, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-busy": state.loading, "aria-activedescendant": state.activeDescendantId, onfocusin: this._handleMobileFilterInputFocusin, onfocusout: this._handleMobileFilterInputFocusout, onInputChanged: this._handleInputChanged, onKeyDown: this._handleMobileFilterInputKeydown, onMouseDown: this._handleFilterInputMousedown })), autocompleteFloatingElem] })), jsx("span", Object.assign({ class: "oj-text-field-end" }, { children: clearIcon }))] })) })));
+        return (jsx("div", Object.assign({ class: classes }, { children: jsxs("div", Object.assign({ role: "presentation", class: containerClasses, id: this._getMobileFilterContainerId() }, { children: [jsx("span", Object.assign({ class: "oj-text-field-start" }, { children: backIcon })), jsxs("div", Object.assign({ class: "oj-text-field-middle", "aria-label": ariaLabel, "aria-owns": listboxId }, { children: [jsx(ComposingInput, { type: inputType, inputRef: this._setMobileFilterInputElem, value: displayValue, class: inputClasses + ' oj-inputsearch-filter', placeholder: props.placeholder, autocomplete: "off", autocorrect: "off", autocapitalize: "off", spellcheck: false, autofocus: false, "aria-label": ariaLabel, "aria-autocomplete": "list", "aria-controls": listboxId, "aria-busy": state.loading, "aria-activedescendant": state.activeDescendantId, onfocusin: this._handleMobileFilterInputFocusin, onfocusout: this._handleMobileFilterInputFocusout, onInputChanged: this._handleInputChanged, onKeyDown: this._handleMobileFilterInputKeydown, onMouseDown: this._handleFilterInputMousedown }), autocompleteFloatingElem] })), jsx("span", Object.assign({ class: "oj-text-field-end" }, { children: clearIcon }))] })) })));
     }
     _renderMobileDropdownBackIcon() {
         const backIconClasses = 'oj-inputsearch-back-icon oj-inputsearch-icon oj-component-icon oj-clickable-icon-nocontext';

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

@@ -516,11 +516,6 @@ class KeySetImpl extends KeySet {
             keys: undefined
         };
         this.keys.keys = new Set(keys);
-        Object.defineProperty(this, '_keys', {
-            get: () => {
-                return this.keys.keys;
-            }
-        });
     }
     has(key) {
         return _has(this.keys.keys, key);
@@ -574,11 +569,6 @@ class AllKeySetImpl extends KeySet {
             deletedKeys: undefined
         };
         this.keys.deletedKeys = new Set(keys);
-        Object.defineProperty(this, '_keys', {
-            get: () => {
-                return this.keys.deletedKeys;
-            }
-        });
     }
     has(key) {
         return !_has(this.keys.deletedKeys, key);