@oracle/oraclejet 14.0.10 → 14.1.1

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

@@ -1229,6 +1229,14 @@ const DvtTimelineStyleUtils = {
     return 8;
   },
 
+  /**
+   * Returns minimum gap between items horizontally
+   * @return {number} The minimum gap
+   */
+  getMinHorizontalBubbleSpacing: () => {
+    return 16;
+  },
+
   /**
    * Returns size for content bubble arrow
    * @return {number} The size of the content bubble arrow
@@ -1261,6 +1269,14 @@ const DvtTimelineStyleUtils = {
     return 36;
   },
 
+  /**
+   * Returns the padding for the nav arrow button
+   * @returns {number} The padding of the nav arrow button
+   */
+  getNavButtonPadding: () => {
+    return 8;
+  },
+
   /**
    * Returns bgcolor for content bubble
    * @return {string} The bgcolor of the content bubble
@@ -1694,16 +1710,6 @@ class DvtTimelineSeriesNode {
   hideKeyboardFocusEffect() {
     this._isShowingKeyboardFocusEffect = false;
     this.hideHoverEffect();
-
-    // turn off actionable mode if it is enabled
-    /* TODO https://jira.oraclecorp.com/jira/browse/JET-48114
-    if (this._timeline.activeInnerElems) {
-      this._timeline.activeInnerElems = null;
-      this._disableAllTabElements();
-      this._timeline._context._parentDiv.focus();
-      this.hasActiveInnerElems = false;
-      this._timeline.getEventManager().ShowFocusEffect(null, this);
-    }*/
   }
 
   /**
@@ -1825,7 +1831,8 @@ class DvtTimelineSeriesNode {
       previousState: this._previousState,
       state: this._state,
       durationWidth: durationWidth,
-      contentWidth: this.getAvailableContentWidth()
+      contentWidth: this.getAvailableContentWidth(),
+      maxAvailableWidth: this.getMaxAvailableWidth()
     };
   }
 
@@ -1845,9 +1852,65 @@ class DvtTimelineSeriesNode {
       : 0;
     var contentWidth =
       this.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT
-        ? bubbleWidth - artifactWidth
+        ? Math.floor(bubbleWidth - artifactWidth)
         : null;
-    return Math.floor(contentWidth);
+    return contentWidth;
+  }
+
+  /**
+   * Gets the largest available width on the right, left or within the bubble in a duration event.
+   * This is only for discrete viewport navigation mode.
+   * @return {number|null} The largest available width in pixels, or null if not duration event.
+   */
+  getMaxAvailableWidth() {
+    var durationEvent = this.getItemType() === DvtTimelineSeriesNode.DURATION_EVENT;
+    if (!durationEvent) return null;
+
+    var timeline = this._timeline;
+    var itemStartTime = this.getStartTime();
+    var itemEndTime = this.getEndTime();
+    var discreteNavMode = timeline.isDiscreteNavigationMode();
+    var padding = DvtTimelineStyleUtils.getNavButtonPadding();
+    var edgeOffset;
+    var startTime;
+    var endTime;
+    if (discreteNavMode) {
+      var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
+      edgeOffset = navButtonBackgroundWidth - padding;
+      var viewportDates = timeline.getDiscreteViewportDateOffsetPos(
+        timeline._discreteViewportCurrentIndexOffset
+      );
+      startTime = viewportDates.startDate;
+      endTime = viewportDates.endDate;
+    } else {
+      edgeOffset = -padding;
+      startTime = timeline._start;
+      endTime = timeline._end;
+    }
+    var availableWidthInside = this.getAvailableContentWidth();
+    // For items outside of visible viewport in discrete nav mode, we don't really care how we render them.
+    // For simplicity and to avoid needing to figure out the discrete nav page index for every item,
+    // return the inside width, so that content remain inside the bubble
+    // and that there's no overflow that may interfere with the stuff in the visible viewport.
+    // Note we can't return 0; it would be logical, but
+    // timeline can't handle 0 width content at the moment.
+    if (discreteNavMode && (itemEndTime < startTime || itemStartTime > endTime)) {
+      return Math.floor(availableWidthInside);
+    }
+
+    var startLoc = timeline.getDatePos(startTime);
+    var endLoc = timeline.getDatePos(endTime);
+
+    var contentBubbleSpacing = DvtTimelineStyleUtils.getContentBubbleSpacing();
+    var availableWidthLeft = Math.max(
+      0,
+      timeline.getDatePos(itemStartTime) - startLoc - contentBubbleSpacing + edgeOffset
+    );
+    var availableWidthRight = Math.max(
+      0,
+      endLoc - timeline.getDatePos(itemEndTime) - contentBubbleSpacing + edgeOffset
+    );
+    return Math.floor(Math.max(availableWidthInside, availableWidthLeft, availableWidthRight));
   }
 
   /**
@@ -2039,8 +2102,6 @@ class DvtTimelineSeriesNode {
     this._draggedObj = draggedObj;
   }
 
-  ///
-
   /**
    * Show the drag feedbacks accordingly; called by DnD handlers.
    * @param {dvt.MouseEvent|dvt.KeyboardEvent|dvt.ComponentTouchEvent} event DnD dragOver event, keyboard, or touch event that triggered the feedback
@@ -2652,7 +2713,6 @@ const DvtTimelineSeriesItemRenderer = {
 
     // check viewport collision
     DvtTimelineSeriesItemRenderer.checkEndViewportCollision(item, series, isRTL, width);
-
     // for collision, need the start position to be -contentWidth
     if (item.getEndViewportCollision() && durationWidth === null) {
       width = 2 * width + DvtTimelineStyleUtils.getContentBubbleSpacing();
@@ -3754,6 +3814,7 @@ const DvtTimelineSeriesItemRenderer = {
       item._content = DvtTimelineSeriesItemRenderer._getBubbleContent(item, series);
       contentContainer.addChild(item._content);
     }
+
     DvtTimelineSeriesItemRenderer._setupBubble(item, item._content, series);
 
     var nodeWidth, content, contentBubbleArray;
@@ -4180,11 +4241,13 @@ const DvtTimelineSeriesItemRenderer = {
     var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
     var startTime = item.getDragStartTime();
     var loc = item._timeline.getDatePos(startTime);
-    var navMode = item._timeline.isDiscreteNavigationMode();
-    var length = navMode ? item._timeline._discreteContentLength : series._length;
+    var discreteNavMode = item._timeline.isDiscreteNavigationMode();
+    var length = discreteNavMode ? item._timeline._discreteContentLength : series._length;
     // use viewport end time vs timeline end time if in discrete navigation mode
     var endViewportDate = item._timeline.getDiscreteViewportEndDate();
-    var endViewportPos = item._timeline.getDatePos(item._timeline._viewEndTime);
+    var endViewportPos = item._timeline.getDatePos(
+      discreteNavMode ? endViewportDate : item._timeline._end
+    );
     item.setEndViewportCollision(false);
 
     // no collision behavior if not duration-event
@@ -4192,22 +4255,21 @@ const DvtTimelineSeriesItemRenderer = {
       return;
     }
 
-    // add half the preview wings to make it look more natural if it would be slightly too long
-    var collisionAdjustment = navButtonBackgroundWidth / 2;
+    // Allow content to extend up to the end edge (the viewport end in discrete nav mode, the time axis end in continuous) minus some padding.
+    // The same padding is used for both discrete and continuous nav mode, and it's equivalent to the padding around the nav button in discrete nav mode.
+    var padding = DvtTimelineStyleUtils.getNavButtonPadding();
+    var collisionAdjustment = discreteNavMode ? navButtonBackgroundWidth - padding : -padding;
     if (!isRTL) {
-      renderEnd = loc + DvtTimelineStyleUtils.getContentBubbleSpacing() + width;
+      renderEnd = loc + width;
 
       if (renderEnd > endViewportPos + collisionAdjustment) {
         // need to use overflow
         item.setEndViewportCollision(true);
       }
     } else {
-      renderEnd = length - loc - width - DvtTimelineStyleUtils.getContentBubbleSpacing();
+      renderEnd = length - loc - width;
       var startViewportPos = length - endViewportPos;
-      if (navMode) {
-        startViewportPos = startViewportPos - navButtonBackgroundWidth;
-      }
-      if (startViewportPos + collisionAdjustment > renderEnd) {
+      if (startViewportPos - collisionAdjustment > renderEnd) {
         item.setEndViewportCollision(true);
       }
     }
@@ -7636,6 +7698,7 @@ const DvtTimelineRenderer = {
     var axisVisibleSize = timeline.getTimeAxisVisibleSize(seriesCount);
     var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
     var navButtonWidth = DvtTimelineStyleUtils.getNavButtonWidth();
+    var navButtonPadding = DvtTimelineStyleUtils.getNavButtonPadding();
     var axisStart =
       seriesCount === 1
         ? timeline._canvasSize - axisVisibleSize
@@ -7679,7 +7742,7 @@ const DvtTimelineRenderer = {
         'prevNavContainer_i'
       );
       prevArrowButton.setCornerRadius(4);
-      prevArrowButton.setTranslate(8, 8);
+      prevArrowButton.setTranslate(navButtonPadding, navButtonPadding);
       prevContainerBackground.addChild(prevArrowButton);
       prevArrowContainer.addChild(prevContainerBackground);
       prevArrowContainer.setTranslate(timeAxisOffset, axisStart - navButtonWidth);
@@ -7728,7 +7791,7 @@ const DvtTimelineRenderer = {
         'nextNavContainer_i'
       );
       nextArrowButton.setCornerRadius(4);
-      nextArrowButton.setTranslate(16, 8);
+      nextArrowButton.setTranslate(16, navButtonPadding);
       nextContainerBackground.addChild(nextArrowButton);
       nextArrowContainer.addChild(nextContainerBackground);
       nextArrowContainer.setTranslate(nextTimeAxisOffset, axisStart - navButtonWidth);
@@ -8980,7 +9043,9 @@ const DvtTimelineSeriesRenderer = {
       var endTime = item.getEndTime();
       if (endTime && endTime !== startTime) {
         var span = item._timeline.getDatePos(endTime) - loc;
-        loc = loc + Math.min(DvtTimelineStyleUtils.getDurationFeelerOffset(), span / 2);
+        if (item.getItemType() !== DvtTimelineSeriesNode.DURATION_EVENT) {
+          loc = loc + Math.min(DvtTimelineStyleUtils.getDurationFeelerOffset(), span / 2);
+        }
       }
       item.setLoc(loc);
       if (!series._isRandomItemLayout) item.setSpacing(null);
@@ -9841,12 +9906,12 @@ class DvtTimelineSeries extends BaseComponent {
     if (!this._isVertical) {
       var endViewportCollisionOffset = item.getEndViewportCollision() ? item.getContentWidth() : 0;
       var x = item.getLoc() - endViewportCollisionOffset;
-      var width = item.getWidth() + 16;
+      var width = item.getWidth() + DvtTimelineStyleUtils.getMinHorizontalBubbleSpacing();
       var hOffset = DvtTimelineStyleUtils.getBubbleSpacing();
       var overlappingItems = [];
       for (i = 0; i < index; i++) {
         currItem = this._items[i];
-        currWidth = currItem.getWidth() + 16;
+        currWidth = currItem.getWidth() + DvtTimelineStyleUtils.getMinHorizontalBubbleSpacing();
         endViewportCollisionOffset = currItem.getEndViewportCollision()
           ? currItem.getContentWidth()
           : 0;
@@ -11865,13 +11930,34 @@ class Timeline extends TimeComponent {
    * Update the viewport when in discrete viewport navigation mode.
    */
   updateDiscreteViewport() {
-    DvtTimelineRenderer._renderAxis(this, this.getTimeZoomCanvas(), true);
-    DvtTimelineRenderer._renderNavigationArrows(this, this.getTimeZoomCanvas());
+    this.prepareViewportLength();
+    var navButtonBackgroundWidth = DvtTimelineStyleUtils.getNavButtonBackgroundWidth();
+    this._timeAxisRatio = (this._canvasLength - 2 * navButtonBackgroundWidth) / this._canvasLength;
+    this._discreteOffset =
+      (this.getContentLength() - this.getContentLength() * this._timeAxisRatio) / 2;
+    this._discreteContentLength = this.getContentLength() * this._timeAxisRatio;
+
+    this.renderTimeZoomCanvas(this._canvas);
+    this.updateSeries();
+    DvtTimelineRenderer._renderAxis(this, this._timeZoomCanvas);
+    DvtTimelineRenderer._renderNavigationArrows(this, this._timeZoomCanvas);
+    this.doInitialPan();
+
     if (this._hasOverview) {
       DvtTimelineRenderer._renderOverview(this);
+      // Reapply selections to overview region
+      if (this.SelectionHandler) {
+        var selection = this.SelectionHandler.getSelectedIds();
+        if (selection && selection.length !== 0) {
+          for (var i = 0; i < selection.length; i++) {
+            this._overview.selSelectItem(selection[i]);
+          }
+        }
+      }
+    }
+    if (this.isTimeDirScrollbarOn() || this.isContentDirScrollbarOn()) {
+      DvtTimelineRenderer._renderScrollbars(this);
     }
-    this.updateSeries();
-    DvtTimelineRenderer._renderScrollbars(this);
   }
 
   /**

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

@@ -1183,10 +1183,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_esm/ojvcomponent-template.js

@@ -8,6 +8,7 @@
 import { info } from 'ojs/ojlogger';
 import { getTemplateContent } from 'ojs/ojhtmlutils';
 import { CustomElementUtils, AttributeUtils } from 'ojs/ojcustomelement-utils';
+import { getMetadata, getPropertiesForElementTag } from 'ojs/ojcustomelement-registry';
 import { Component, Fragment, h, render } from 'preact';
 import { jsx } from 'preact/jsx-runtime';
 import Context from 'ojs/ojcontext';
@@ -414,7 +415,7 @@ class VTemplateEngine {
         var props = this._getElementProps(engineContext, node);
         const tagName = node.tagName;
         const localName = tagName.toLowerCase();
-        const compMetadata = CustomElementUtils.getMetadata(tagName);
+        const compMetadata = getMetadata(tagName);
         return this._createHFunctionCallNode(localName, [
             this._createPossiblyProvidedAndConsumedProperties(localName, engineContext, compMetadata, props),
             this._createAst(engineContext, Array.from(node.childNodes))
@@ -610,7 +611,7 @@ class VTemplateEngine {
                     if (expValue.expr) {
                         const propName = AttributeUtils.attributeToPropertyName(name);
                         const propNamePath = propName.split('.');
-                        const propMeta = getPropertyMetadata(propNamePath[0], CustomElementUtils.getPropertiesForElementTag(node.tagName));
+                        const propMeta = getPropertyMetadata(propNamePath[0], 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_esm/ojvcomponent.js

@@ -8,7 +8,8 @@
 import { forwardRef } from 'preact/compat';
 import { jsx } from 'preact/jsx-runtime';
 import { Fragment, options, cloneElement, h, createRef, render, createContext, Component } from 'preact';
-import { CustomElementUtils, toSymbolizedValue, JetElementError, AttributeUtils, transformPreactValue, ElementUtils, CHILD_BINDING_PROVIDER, ElementState } from 'ojs/ojcustomelement-utils';
+import { toSymbolizedValue, JetElementError, CustomElementUtils, AttributeUtils, transformPreactValue, ElementUtils, CHILD_BINDING_PROVIDER, ElementState } from 'ojs/ojcustomelement-utils';
+import { getElementRegistration, isElementRegistered, isVComponent, getElementDescriptor, registerElement as registerElement$1 } from 'ojs/ojcustomelement-registry';
 import { useContext, useMemo, useLayoutEffect } from 'preact/hooks';
 import { EnvironmentContext, RootEnvironmentProvider } from '@oracle/oraclejet-preact/UNSAFE_Environment';
 import Context from 'ojs/ojcontext';
@@ -24,7 +25,7 @@ import { warn } from 'ojs/ojlogger';
 
 function EnvironmentWrapper(props) {
     const child = props.children;
-    const contexts = CustomElementUtils.getElementRegistration(child.type).cache.contexts;
+    const contexts = getElementRegistration(child.type).cache.contexts;
     const allContexts = [EnvironmentContext, ...(contexts !== null && contexts !== void 0 ? contexts : [])];
     const allValues = allContexts.map((context) => {
         var _a;
@@ -53,12 +54,12 @@ const oldVNodeHook = options.vnode;
 let isCloningElement = false;
 options.vnode = (vnode) => {
     const type = vnode.type;
-    if (typeof type === 'string' && CustomElementUtils.isElementRegistered(type)) {
+    if (typeof type === 'string' && isElementRegistered(type)) {
         const props = vnode.props;
         injectSymbols(props, 'value');
         injectSymbols(props, 'checked');
     }
-    if (typeof type === 'string' && !isCloningElement && CustomElementUtils.isVComponent(type)) {
+    if (typeof type === 'string' && !isCloningElement && isVComponent(type)) {
         isCloningElement = true;
         try {
             const origVNode = cloneElement(vnode);
@@ -455,6 +456,13 @@ options.requestAnimationFrame = _requestAnimationFrame;
  *   )
  * }
  * </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>
@@ -1320,6 +1328,33 @@ options.requestAnimationFrame = _requestAnimationFrame;
  * @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
@@ -2814,7 +2849,7 @@ class VComponentState extends ElementState {
         var _a;
         const slotMap = this.getSlotMap();
         const slots = Object.keys(slotMap);
-        const metadata = CustomElementUtils.getElementDescriptor(this.Element.tagName).metadata;
+        const metadata = 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) => {
@@ -2989,7 +3024,7 @@ function registerElement(tagName, metadata, constructor, observedProps, observed
     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);
-    CustomElementUtils.registerElement(tagName, {
+    registerElement$1(tagName, {
         descriptor: { metadata },
         stateClass: VComponentState,
         vcomp: true,

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/14.0.10/min@insertESLevelPath@',
-      'ojL10n': 'libs/oj/14.0.10/ojL10n',
-      'ojtranslations': 'libs/oj/14.0.10/resources',
+      'ojs': 'libs/oj/14.1.1/min@insertESLevelPath@',
+      'ojL10n': 'libs/oj/14.1.1/ojL10n',
+      'ojtranslations': 'libs/oj/14.1.1/resources',
       
   'knockout': 'libs/knockout/knockout-3.5.1',
   'jquery': 'libs/jquery/jquery-3.6.1.min',