@oracle/oraclejet 14.0.5 → 14.1.0

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

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['exports', 'preact', 'ojs/ojcore-base', 'ojs/ojcustomelement-utils', 'ojs/ojmetadatautils', 'ojs/ojlogger'], function (exports, preact, oj, ojcustomelementUtils, ojmetadatautils, Logger) { 'use strict';
+define(['exports', 'preact', 'ojs/ojcore-base', 'ojs/ojcustomelement-utils', 'ojs/ojcustomelement-registry', 'ojs/ojmetadatautils', 'ojs/ojlogger'], function (exports, preact, oj, ojcustomelementUtils, ojcustomelementRegistry, ojmetadatautils, Logger) { 'use strict';
 
     oj = oj && Object.prototype.hasOwnProperty.call(oj, 'default') ? oj['default'] : oj;
 
@@ -100,7 +100,7 @@ define(['exports', 'preact', 'ojs/ojcore-base', 'ojs/ojcustomelement-utils', 'oj
             };
         }
         static resolveVDomTemplateProps(template, renderer, elementTagName, propertySet, data, defaultValues, propertyValidator) {
-            const metadata = ojcustomelementUtils.CustomElementUtils.getPropertiesForElementTag(elementTagName);
+            const metadata = ojcustomelementRegistry.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/ojtimeline-toolkit.js

@@ -1225,6 +1225,14 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       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
@@ -1257,6 +1265,14 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       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
@@ -1690,16 +1706,6 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
     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);
-      }*/
     }
 
     /**
@@ -1821,7 +1827,8 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         previousState: this._previousState,
         state: this._state,
         durationWidth: durationWidth,
-        contentWidth: this.getAvailableContentWidth()
+        contentWidth: this.getAvailableContentWidth(),
+        maxAvailableWidth: this.getMaxAvailableWidth()
       };
     }
 
@@ -1841,9 +1848,53 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         : 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));
     }
 
     /**
@@ -2035,8 +2086,6 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       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
@@ -2648,7 +2697,6 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
 
       // 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();
@@ -3750,6 +3798,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         item._content = DvtTimelineSeriesItemRenderer._getBubbleContent(item, series);
         contentContainer.addChild(item._content);
       }
+
       DvtTimelineSeriesItemRenderer._setupBubble(item, item._content, series);
 
       var nodeWidth, content, contentBubbleArray;
@@ -4176,11 +4225,13 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       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
@@ -4188,22 +4239,21 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
         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);
         }
       }
@@ -7632,6 +7682,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       var axisVisibleSize = timeline.getTimeAxisVisibleSize(seriesCount);
       var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
       var navButtonWidth = DvtTimelineStyleUtils.getNavButtonWidth();
+      var navButtonPadding = DvtTimelineStyleUtils.getNavButtonPadding();
       var axisStart =
         seriesCount === 1
           ? timeline._canvasSize - axisVisibleSize
@@ -7675,7 +7726,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
           'prevNavContainer_i'
         );
         prevArrowButton.setCornerRadius(4);
-        prevArrowButton.setTranslate(8, 8);
+        prevArrowButton.setTranslate(navButtonPadding, navButtonPadding);
         prevContainerBackground.addChild(prevArrowButton);
         prevArrowContainer.addChild(prevContainerBackground);
         prevArrowContainer.setTranslate(timeAxisOffset, axisStart - navButtonWidth);
@@ -7724,7 +7775,7 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
           'nextNavContainer_i'
         );
         nextArrowButton.setCornerRadius(4);
-        nextArrowButton.setTranslate(16, 8);
+        nextArrowButton.setTranslate(16, navButtonPadding);
         nextContainerBackground.addChild(nextArrowButton);
         nextArrowContainer.addChild(nextContainerBackground);
         nextArrowContainer.setTranslate(nextTimeAxisOffset, axisStart - navButtonWidth);
@@ -9837,12 +9888,12 @@ define(['exports', 'ojs/ojdvt-toolkit', 'ojs/ojdvt-timecomponent', 'ojs/ojtimeax
       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;

package/dist/js/libs/oj/debug/ojtimeline.js

@@ -1178,10 +1178,10 @@ var __oj_timeline_series_metadata =
    * @property {boolean}  previousState.hovered True if the item was previously hovered.
    * @property {boolean}  previousState.selected True if the item was previously selected.
    * @property {boolean}  previousState.focused True if the item was previously focused.
-   * @property {Number}  durationWidth width of the duration-event bubble or null if not duration-event
-   * @property {Number}  contentWidth The available width in px for content.
-   * If the item is not a duration-event, then this is null, and the component will automatically allocate enough width space to accommodate the content.
-   *
+   * @property {Number}  durationWidth width of the duration-event bubble or null if not duration-event.
+   * @property {Number}  contentWidth The available width in pixels for content inside the duration-event bubble, or null if the item is not a duration-event.
+   * @property {Number}  maxAvailableWidth The largest value in pixels among the available width on the right, on the left, and within the duration event bubble.
+   * If the item is not a duration-event, then this is null.
    * @ojdeprecated {target: "property", for: "durationWidth", since:"13.1.0", description: "The durationWidth property is deprecated. Please use the contentWidth property instead."}
    * @ojsignature [{target: "Type", value: "oj.ojTimeline.SeriesItem<K>", for: "data"},
    *               {target: "Type", value: "oj.ojTimeline.Series<K>", for: "seriesData"},

package/dist/js/libs/oj/debug/ojvcomponent-template.js

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcustomelement-utils', 'preact', 'preact/jsx-runtime', 'ojs/ojcontext', 'ojs/ojdataproviderhandler', 'ojs/ojbindpropagation', 'ojs/ojconfig', 'ojs/ojmetadatautils', 'ojs/ojcspexpressionevaluator-internal'], function (exports, Logger, HtmlUtils, ojcustomelementUtils, preact, jsxRuntime, Context, ojdataproviderhandler, ojbindpropagation, ojconfig, ojmetadatautils, ojcspexpressionevaluatorInternal) { 'use strict';
+define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcustomelement-utils', 'ojs/ojcustomelement-registry', 'preact', 'preact/jsx-runtime', 'ojs/ojcontext', 'ojs/ojdataproviderhandler', 'ojs/ojbindpropagation', 'ojs/ojconfig', 'ojs/ojmetadatautils', 'ojs/ojcspexpressionevaluator-internal'], function (exports, Logger, HtmlUtils, ojcustomelementUtils, ojcustomelementRegistry, preact, jsxRuntime, Context, ojdataproviderhandler, ojbindpropagation, ojconfig, ojmetadatautils, ojcspexpressionevaluatorInternal) { 'use strict';
 
     Context = Context && Object.prototype.hasOwnProperty.call(Context, 'default') ? Context['default'] : Context;
 
@@ -406,7 +406,7 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcustomelement-utils
             var props = this._getElementProps(engineContext, node);
             const tagName = node.tagName;
             const localName = tagName.toLowerCase();
-            const compMetadata = ojcustomelementUtils.CustomElementUtils.getMetadata(tagName);
+            const compMetadata = ojcustomelementRegistry.getMetadata(tagName);
             return this._createHFunctionCallNode(localName, [
                 this._createPossiblyProvidedAndConsumedProperties(localName, engineContext, compMetadata, props),
                 this._createAst(engineContext, Array.from(node.childNodes))
@@ -602,7 +602,7 @@ define(['exports', 'ojs/ojlogger', 'ojs/ojhtmlutils', 'ojs/ojcustomelement-utils
                         if (expValue.expr) {
                             const propName = ojcustomelementUtils.AttributeUtils.attributeToPropertyName(name);
                             const propNamePath = propName.split('.');
-                            const propMeta = ojmetadatautils.getPropertyMetadata(propNamePath[0], ojcustomelementUtils.CustomElementUtils.getPropertiesForElementTag(node.tagName));
+                            const propMeta = ojmetadatautils.getPropertyMetadata(propNamePath[0], ojcustomelementRegistry.getPropertiesForElementTag(node.tagName));
                             if (!(propMeta === null || propMeta === void 0 ? void 0 : propMeta.readOnly)) {
                                 if (propNamePath.length > 1) {
                                     dottedExpressions.push({ subProps: propName, expr: expValue.expr });

package/dist/js/libs/oj/debug/ojvcomponent.js

@@ -5,7 +5,7 @@
  * as shown at https://oss.oracle.com/licenses/upl/
  * @ignore
  */
-define(['require', 'exports', 'preact/compat', 'preact/jsx-runtime', 'preact', 'ojs/ojcustomelement-utils', 'preact/hooks', '@oracle/oraclejet-preact/UNSAFE_Environment', 'ojs/ojcontext', 'ojs/ojmetadatautils', 'ojs/ojcore-base', 'ojs/ojpreact-patch', 'ojs/ojconfig', 'ojs/ojpopupcore', '@oracle/oraclejet-preact/UNSAFE_Layer', '@oracle/oraclejet-preact/utils/UNSAFE_matchTranslationBundle', '@oracle/oraclejet-preact/resources/nls/supportedLocales', 'ojs/ojlogger'], function (require, exports, compat, jsxRuntime, preact, ojcustomelementUtils, hooks, UNSAFE_Environment, Context, MetadataUtils, oj, ojpreactPatch, ojconfig, ojpopupcore, UNSAFE_Layer, UNSAFE_matchTranslationBundle, supportedLocales, Logger) { 'use strict';
+define(['require', 'exports', 'preact/compat', 'preact/jsx-runtime', 'preact', 'ojs/ojcustomelement-utils', 'ojs/ojcustomelement-registry', 'preact/hooks', '@oracle/oraclejet-preact/UNSAFE_Environment', 'ojs/ojcontext', 'ojs/ojmetadatautils', 'ojs/ojcore-base', 'ojs/ojpreact-patch', 'ojs/ojconfig', 'ojs/ojpopupcore', '@oracle/oraclejet-preact/UNSAFE_Layer', '@oracle/oraclejet-preact/utils/UNSAFE_matchTranslationBundle', '@oracle/oraclejet-preact/resources/nls/supportedLocales', 'ojs/ojlogger'], function (require, exports, compat, jsxRuntime, preact, ojcustomelementUtils, ojcustomelementRegistry, hooks, UNSAFE_Environment, Context, MetadataUtils, oj, ojpreactPatch, ojconfig, ojpopupcore, UNSAFE_Layer, UNSAFE_matchTranslationBundle, supportedLocales, Logger) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) { return e; } else {
@@ -32,7 +32,7 @@ define(['require', 'exports', 'preact/compat', 'preact/jsx-runtime', 'preact', '
 
     function EnvironmentWrapper(props) {
         const child = props.children;
-        const contexts = ojcustomelementUtils.CustomElementUtils.getElementRegistration(child.type).cache.contexts;
+        const contexts = ojcustomelementRegistry.getElementRegistration(child.type).cache.contexts;
         const allContexts = [UNSAFE_Environment.EnvironmentContext, ...(contexts !== null && contexts !== void 0 ? contexts : [])];
         const allValues = allContexts.map((context) => {
             var _a;
@@ -61,12 +61,12 @@ define(['require', 'exports', 'preact/compat', 'preact/jsx-runtime', 'preact', '
     let isCloningElement = false;
     preact.options.vnode = (vnode) => {
         const type = vnode.type;
-        if (typeof type === 'string' && ojcustomelementUtils.CustomElementUtils.isElementRegistered(type)) {
+        if (typeof type === 'string' && ojcustomelementRegistry.isElementRegistered(type)) {
             const props = vnode.props;
             injectSymbols(props, 'value');
             injectSymbols(props, 'checked');
         }
-        if (typeof type === 'string' && !isCloningElement && ojcustomelementUtils.CustomElementUtils.isVComponent(type)) {
+        if (typeof type === 'string' && !isCloningElement && ojcustomelementRegistry.isVComponent(type)) {
             isCloningElement = true;
             try {
                 const origVNode = preact.cloneElement(vnode);
@@ -463,6 +463,13 @@ define(['require', 'exports', 'preact/compat', 'preact/jsx-runtime', 'preact', '
      *   )
      * }
      * </code></pre>
+     * <p>
+     *   In some scenarios, JET application developers may require access to a
+     *   <a href="oj.BusyContext.html">BusyContext</a> scoped to a VComponent's children
+     *   or to a particular named slot's contents. See the
+     *   <a href="#ImplicitBusyContext">ImplicitBusyContext</a> type for info on
+     *   how to declare the need for a scoped BusyContext instance.
+     * </p>
      * <h3 id="template-slots">
      *  Template Slots
      *  <a class="bookmarkable-link" title="Bookmarkable Link" href="#template-slots"></a>
@@ -1328,6 +1335,33 @@ define(['require', 'exports', 'preact/compat', 'preact/jsx-runtime', 'preact', '
      * @ojsignature [{target: "Type", value: "ComponentChildren"}]
      */
 
+    /**
+     * <p>
+     *   As discussed in <a href="#children">Children and Slots</a>, JET application developers
+     *   may require runtime access to a <a href="oj.BusyContext.html">BusyContext</a>
+     *   scoped to a VComponent's children or to a particular named slot's contents.
+     *   The ImplicitBusyContext marker type can be combined with Preact's ComponentChildren type
+     *   or with the <a href="#Slot">Slot</a> type to indicate that a scoped BusyContext instance
+     *   should be injected by the VComponent framework.
+     * </p>
+     * <pre class="prettyprint"><code>import { Component, ComponentChildren } from 'preact';
+     * import { customElement, ExtendGlobalProps, ImplicitBusyContext, Slot } from 'ojs/ojvcomponent';
+     *
+     * type Props = {
+     *   // This indicates that the VComponent accepts arbitrary (non-slot) children,
+     *   // and that a BusyContext scoped to this child content is expected at runtime
+     *   children?: ComponentChildren & ImplicitBusyContext;
+     *
+     *   // This indicates that the VComponent accepts a slot named "end",
+     *   // and that a BusyContext scoped to the slot's content is expected at runtime
+     *   end?: Slot & ImplicitBusyContext;
+     * }
+     * </code></pre>
+     * @typedef {unknown} ImplicitBusyContext
+     * @ojexports
+     * @memberof ojvcomponent
+     */
+
     /**
      * <p>
      *  The Methods type specifies optional design-time method metadata that can be passed in the
@@ -2822,7 +2856,7 @@ define(['require', 'exports', 'preact/compat', 'preact/jsx-runtime', 'preact', '
             var _a;
             const slotMap = this.getSlotMap();
             const slots = Object.keys(slotMap);
-            const metadata = ojcustomelementUtils.CustomElementUtils.getElementDescriptor(this.Element.tagName).metadata;
+            const metadata = ojcustomelementRegistry.getElementDescriptor(this.Element.tagName).metadata;
             const dynamicSlotMetadata = (_a = metadata === null || metadata === void 0 ? void 0 : metadata.extension) === null || _a === void 0 ? void 0 : _a._DYNAMIC_SLOT;
             const hasDynamicTemplateSlots = !!(dynamicSlotMetadata === null || dynamicSlotMetadata === void 0 ? void 0 : dynamicSlotMetadata.isTemplate);
             const templateSlots = slots.filter((slot) => {
@@ -2997,7 +3031,7 @@ define(['require', 'exports', 'preact/compat', 'preact/jsx-runtime', 'preact', '
         HTMLPreactElement.translationBundleMap = translationBundleMap;
         addPropGetterSetters(HTMLPreactElement.prototype, metadata === null || metadata === void 0 ? void 0 : metadata.properties);
         addMethods(HTMLPreactElement.prototype, metadata === null || metadata === void 0 ? void 0 : metadata.methods);
-        ojcustomelementUtils.CustomElementUtils.registerElement(tagName, {
+        ojcustomelementRegistry.registerElement(tagName, {
             descriptor: { metadata },
             stateClass: VComponentState,
             vcomp: true,

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

@@ -6,7 +6,7 @@
  * @ignore
  */
 import oj from 'ojs/ojcore-base';
-import { DataProviderMutationEvent, FilterFactory, DataProviderRefreshEvent } from 'ojs/ojdataprovider';
+import { SortUtils, FilterFactory, DataProviderMutationEvent, DataProviderRefreshEvent } from 'ojs/ojdataprovider';
 import { EventTargetMixin } from 'ojs/ojeventtarget';
 import ojMap from 'ojs/ojmap';
 import { BufferingDataProviderSubmittableChangeEvent } from 'ojs/ojbufferingdataproviderevents';
@@ -97,22 +97,10 @@ import 'ojs/ojcomponentcore';
  * <p>
  * Subsequent to a new/updated row but before the commit, the row can be sorted or filtered.
  * The sorted/filtered position of the row stays after the commit until a subsequent re-order/refresh.
- * Will dispatch remove event for rows which are not in correct position because the sorting is based on fetched row sets.
  *
  * When uncommitted rows are sorted in current row set, their position may not correspond to server side position once they are committed.
- * Therefore a 'remove' event may be fired when new row sets are fetched and it determines that the rows are not in current positions.
  * Uncommitted rows will be sorted according to updated row set.
  * </p>
- * <pre class="prettyprint"><code>
- * // dispatch a remove event for rows in wrong position.
- * // ie row with id 40 is in wrong position
- *{
- *  remove: {
- *    metadata: [{key: 40}],
- *    ...
- *  }
- *}
- * </code></pre>
  *
  * <p>BufferingDataProvider does not validate the item key and data.  It is up to the application to perform any validation
  * prior to creating edit items in the buffer.
@@ -809,22 +797,6 @@ class BufferingDataProvider {
                                 }
                             }
                         }
-                        if (this._parent.itemsInWrongPosition.size > 0) {
-                            const detail = {
-                                remove: {
-                                    data: [],
-                                    keys: new Set(),
-                                    metadata: []
-                                }
-                            };
-                            this._parent.itemsInWrongPosition.forEach((item) => {
-                                detail.remove.data.push(item.data);
-                                detail.remove.keys.add(item.metadata.key);
-                                detail.remove.metadata.push(item.metadata);
-                            });
-                            const event = new DataProviderMutationEvent(detail);
-                            this._parent.dispatchEvent(event);
-                        }
                         const done = result.done && newDataArray.length === 0;
                         return {
                             done,
@@ -850,8 +822,6 @@ class BufferingDataProvider {
         this.lastIterator = null;
         this.customKeyGenerator = options === null || options === void 0 ? void 0 : options.keyGenerator;
         this.generatedKeyMap = new Map();
-        this.lastSortIndex = new Map();
-        this.itemsInWrongPosition = new Set();
         this.totalFilteredRowCount = 0;
         this.dataBeforeUpdated = new Map();
     }
@@ -878,11 +848,11 @@ class BufferingDataProvider {
     }
     _compareItem(d1, d2, sortCriteria) {
         for (const sortCrt of sortCriteria) {
-            if (d1[sortCrt.attribute] > d2[sortCrt.attribute]) {
-                return sortCrt.direction === 'ascending' ? 1 : -1;
-            }
-            else if (d1[sortCrt.attribute] < d2[sortCrt.attribute]) {
-                return sortCrt.direction === 'ascending' ? -1 : 1;
+            let comparator = SortUtils.getNaturalSortComparator();
+            const descendingResult = sortCrt.direction === 'descending' ? -1 : 1;
+            const comparatorResult = comparator(d1[sortCrt.attribute], d2[sortCrt.attribute]) * descendingResult;
+            if (comparatorResult !== 0) {
+                return comparatorResult;
             }
         }
         return 0;
@@ -920,35 +890,45 @@ class BufferingDataProvider {
                     }
                 }
             }
-            if ((editItem.operation === 'add' ||
-                (editItem.operation === 'update' && this.editBuffer.isUpdateTransformed(key))) &&
+            if ((editItem.operation === 'add' || editItem.operation === 'update') &&
                 !mergedAddKeySet.has(key)) {
                 if (!filterObj || filterObj.filter(editItem.item.data)) {
-                    itemArray.splice(0, 0, editItem.item);
-                    mergedAddKeySet.add(key);
-                }
-            }
-        }));
-        if (sortCriteria && sortCriteria.length && !this.editBuffer.isEmpty()) {
-            itemArray.sort((a, b) => {
-                return this._compareItem(a.data, b.data, sortCriteria);
-            });
-            itemArray.forEach((item, index) => {
-                const key = item.metadata.key;
-                if (editItems.has(key)) {
-                    if (this.lastSortIndex.get(key) === undefined) {
-                        this.lastSortIndex.set(key, index);
-                    }
-                    else if (this.lastSortIndex.get(key) !== index) {
-                        this.itemsInWrongPosition.add(item);
-                        this.lastSortIndex.set(key, index);
+                    if (sortCriteria && sortCriteria.length) {
+                        let inserted = false;
+                        for (let i = 0; i < itemArray.length; i++) {
+                            if (this._compareItem(editItem.item.data, itemArray[i].data, sortCriteria) < 0) {
+                                itemArray.splice(i, 0, editItem.item);
+                                mergedAddKeySet.add(key);
+                                inserted = true;
+                                break;
+                            }
+                        }
+                        if (!inserted && lastBlock) {
+                            itemArray.push(editItem.item);
+                            mergedAddKeySet.add(key);
+                        }
                     }
-                    else if (this.lastSortIndex.get(key) === index) {
-                        this.itemsInWrongPosition.delete(item);
+                    else {
+                        let allItemsRemoved = true;
+                        itemArray.forEach((item) => {
+                            if (key !== item.metadata.key &&
+                                !mergedAddKeySet.has(key) &&
+                                !this._isItemRemoved(item.metadata.key)) {
+                                allItemsRemoved = false;
+                                return;
+                            }
+                        });
+                        if (allItemsRemoved) {
+                            itemArray.push(editItem.item);
+                        }
+                        else {
+                            itemArray.splice(0, 0, editItem.item);
+                        }
+                        mergedAddKeySet.add(key);
                     }
                 }
-            });
-        }
+            }
+        }));
     }
     _mergeAddEdits(filterObj, sortCriteria, newItemArray, mergedAddKeySet, lastBlock) {
         this._insertAddEdits(this.editBuffer.getUnsubmittedItems(), filterObj, sortCriteria, newItemArray, mergedAddKeySet, lastBlock);
@@ -979,12 +959,6 @@ class BufferingDataProvider {
                 if (editItem.operation === 'remove') {
                     newItemArray.push(baseItem);
                 }
-                else if (editItem.operation === 'update' &&
-                    !this.editBuffer.isUpdateTransformed(editItem.item.metadata.key)) {
-                    if (!filterObj || filterObj.filter(editItem.item.data)) {
-                        newItemArray.push(editItem.item);
-                    }
-                }
             }
         }
         if (sortCriteria && sortCriteria.length) {