@oracle/oraclejet 12.0.3 → 12.1.0

package/dist/js/libs/oj/debug/ojconverter-datetime.js

@@ -501,7 +501,8 @@ define(['exports', 'ojs/ojconverterutils-i18n', 'ojs/ojconverter', 'ojs/ojlocale
           'year';
       }
       var intlRelativeCnv = new Intl.RelativeTimeFormat(ojconfig.getLocale(), { numeric: style });
-      var format = intlRelativeCnv.format(units[field], field);
+      var val = diff >= 0 ? units[field] : -units[field];
+      var format = intlRelativeCnv.format(val, field);
       return format;
     }
 

package/dist/js/libs/oj/debug/ojcore-base.js

@@ -37,12 +37,12 @@ define(['ojs/ojlogger'], function (Logger) { 'use strict';
      * @global
      * @member {string} version JET version numberr
      */
-    version: '12.0.3',
+    version: '12.1.0',
     /**
      * @global
      * @member {string} revision JET source code revision number
      */
-    revision: '2022-04-12_09-27-22',
+    revision: '2022-04-09_00-30-04',
 
     // This function is only meant to be used outside the library, so quoting the name
     // to avoid renaming is appropriate

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

@@ -22217,6 +22217,11 @@ var __oj_data_grid_metadata =
         if (this._getResizeHeaderMode(this.m_resizingElement) === 'column') {
           if (this._isDOMElementResizable(this.m_resizingElement)) {
             if (isHeaderLabel) {
+              if (this.m_utils.containsCSSClassName(this.m_resizingElement,
+                this.getMappedStyle('columnendheaderlabel'))) {
+                  // as resizing width on colEndHeaderLabel essentially changes rowHeader width and not rowEndHeader.
+                  end = false;
+              }
               this.resizeRowWidth(value, value - initialWidth, end, isHeaderLabel);
               this._fireResizeEvent(event, initialWidth, initialHeight, value, initialHeight, value);
             } else {
@@ -22240,6 +22245,11 @@ var __oj_data_grid_metadata =
         } else if (this._isDOMElementResizable(this.m_resizingElement)) {
           let newElementHeight = this.getNewElementHeight('row', initialHeight, end, deltaHeight, isHeaderLabel);
           if (isHeaderLabel) {
+            if (this.m_utils.containsCSSClassName(this.m_resizingElement,
+              this.getMappedStyle('rowendheaderlabel'))) {
+                // as resizing height on rowEndHeaderLabel essentially changes columnHeader height and not columnEndHeader.
+                end = false;
+            }
             this.resizeColHeight(newElementHeight, newElementHeight - initialHeight, end);
             this._fireResizeEvent(event, initialWidth, initialHeight, initialWidth, value, value);
           } else {

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

@@ -3434,6 +3434,7 @@ var __oj_diagram_link_metadata =
          * @instance
          * @ojsignature [{target:"Type", value:"<K1>", for:"genericTypeParameters"},
          *               {target:"Type", value:"K1", for:"nodeId"}]
+         * @ojdeprecated {since: '12.1.0', description: 'The oj-before-expand event has been deprecated.  Lazy loading of data can be done through the data provider.'}
          */
         beforeExpand: null,
         /**
@@ -3447,6 +3448,7 @@ var __oj_diagram_link_metadata =
          * @instance
          * @ojsignature [{target:"Type", value:"<K1>", for:"genericTypeParameters"},
          *               {target:"Type", value:"K1", for:"nodeId"}]
+         * @ojdeprecated {since: '12.1.0', description: 'The oj-expand event has been deprecated.  Use on-expanded-changed instead.'}
          */
         expand: null,
         /**
@@ -3461,6 +3463,7 @@ var __oj_diagram_link_metadata =
          * @instance
          * @ojsignature [{target:"Type", value:"<K1>", for:"genericTypeParameters"},
          *               {target:"Type", value:"K1", for:"nodeId"}]
+         * @ojdeprecated {since: '12.1.0', description: 'The oj-before-collapse event has been deprecated.  Lazy loading of data can be done through the data provider.'}
          */
         beforeCollapse: null,
         /**
@@ -3474,6 +3477,7 @@ var __oj_diagram_link_metadata =
          * @instance
          * @ojsignature [{target:"Type", value:"<K1>", for:"genericTypeParameters"},
          *               {target:"Type", value:"K1", for:"nodeId"}]
+         * @ojdeprecated {since: '12.1.0', description: 'The oj-collapse event has been deprecated.  Use on-expanded-changed instead.'}
          */
         collapse: null
       },

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

@@ -27,20 +27,29 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
             this.startRef = preact.createRef();
             this.endWrapperRef = preact.createRef();
             this.endRef = preact.createRef();
+            this.bottomWrapperRef = preact.createRef();
+            this.bottomRef = preact.createRef();
+            this.middleSectionRef = preact.createRef();
             this.mainSectionRef = preact.createRef();
             this.startClosedWithEsc = false;
             this.endClosedWithEsc = false;
-            this.drawerResizeHandler = null;
+            this.bottomClosedWithEsc = false;
+            this.overlayDrawerResizeListener = null;
+            this.reflowDrawerResizeListener = null;
             this.handleResize = true;
             this.state = {
                 startOpened: this.props.startOpened,
                 endOpened: this.props.endOpened,
+                bottomOpened: this.props.bottomOpened,
                 startDisplay: this.props.startDisplay,
                 endDisplay: this.props.endDisplay,
+                bottomDisplay: this.props.bottomDisplay,
                 startShouldChangeDisplayMode: false,
                 endShouldChangeDisplayMode: false,
+                bottomShouldChangeDisplayMode: false,
                 startStateToChangeTo: null,
                 endStateToChangeTo: null,
+                bottomStateToChangeTo: null,
                 viewportResolvedDisplayMode: this.getViewportResolvedDisplayMode(),
                 lastlyOpenedDrawer: ojdrawerutils.DrawerConstants.stringStart
             };
@@ -58,6 +67,15 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                     ? this.getDrawerWrapperRef(edge)
                     : this.getDrawerRef(edge);
             };
+            this.overlayDrawerResizeCallback = (edge) => {
+                const $drawerElement = $(this.getDrawerRef(edge).current);
+                $drawerElement.position(this.getDrawerPosition(edge));
+            };
+            this.reflowDrawerResizeCallback = (edge) => {
+                if ([ojdrawerutils.DrawerConstants.stringStart, ojdrawerutils.DrawerConstants.stringEnd].indexOf(edge) > -1) {
+                    this.setBottomOverlayDrawerWidth();
+                }
+            };
             this.lockResizeListener = () => {
                 if (this.handleResize) {
                     this.handleResize = false;
@@ -81,11 +99,16 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                 if (this.handleResize) {
                     const prevViewportResolvedDisplayMode = this.state.viewportResolvedDisplayMode;
                     const nextViewportResolvedDisplayMode = this.getViewportResolvedDisplayMode();
+                    this.setBottomOverlayDrawerWidth();
                     let atLeastOneOverlayDrawerNeedsToClose = false;
                     const updatedState = {};
                     if (prevViewportResolvedDisplayMode !== nextViewportResolvedDisplayMode) {
                         this.lockResizeListener();
-                        [ojdrawerutils.DrawerConstants.stringStart, ojdrawerutils.DrawerConstants.stringEnd].forEach((edge) => {
+                        [
+                            ojdrawerutils.DrawerConstants.stringStart,
+                            ojdrawerutils.DrawerConstants.stringEnd,
+                            ojdrawerutils.DrawerConstants.stringBottom
+                        ].forEach((edge) => {
                             if (this.isDrawerOpened(edge) && this.state[this.edgeToDisplayName(edge)] === 'auto') {
                                 atLeastOneOverlayDrawerNeedsToClose = true;
                                 updatedState[this.edgeToShouldChangeDisplayMode(edge)] = true;
@@ -100,6 +123,20 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                     }
                 }
             };
+            this.getDrawerPosition = (edge) => {
+                const horizontal = edge === ojdrawerutils.DrawerConstants.stringBottom ? ojdrawerutils.DrawerConstants.stringStart : edge;
+                const vertical = edge === ojdrawerutils.DrawerConstants.stringBottom
+                    ? ojdrawerutils.DrawerConstants.stringBottom
+                    : ojdrawerutils.DrawerConstants.stringTop;
+                const pos = `${horizontal} ${vertical}`;
+                let position = {
+                    my: pos,
+                    at: pos,
+                    of: this.mainSectionRef.current,
+                    collision: 'none'
+                };
+                return oj.PositionUtils.normalizeHorizontalAlignment(position, ojdrawerutils.DrawerUtils.isRTL());
+            };
         }
         static getDerivedStateFromProps(props, state) {
             const derivedState = {};
@@ -111,10 +148,19 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                     return derivedState;
                 }
             }
-            const endStateToChangeTo = `${ojdrawerutils.DrawerConstants.stringEnd}${ojdrawerutils.DrawerConstants.stringStateToChangeTo}`;
-            if (state.endOpened && state[endStateToChangeTo] === null) {
+            if (state.endOpened) {
                 if (props.endDisplay !== state.endDisplay) {
-                    derivedState[endStateToChangeTo] = { endDisplay: props.endDisplay };
+                    derivedState[`${ojdrawerutils.DrawerConstants.stringEnd}${ojdrawerutils.DrawerConstants.stringStateToChangeTo}`] = {
+                        endDisplay: props.endDisplay
+                    };
+                    return derivedState;
+                }
+            }
+            if (state.bottomOpened) {
+                if (props.bottomDisplay !== state.bottomDisplay) {
+                    derivedState[`${ojdrawerutils.DrawerConstants.stringBottom}${ojdrawerutils.DrawerConstants.stringStateToChangeTo}`] = {
+                        bottomDisplay: props.bottomDisplay
+                    };
                     return derivedState;
                 }
             }
@@ -130,20 +176,32 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                     derivedState.lastlyOpenedDrawer = ojdrawerutils.DrawerConstants.stringEnd;
                 }
             }
+            if (props.bottomOpened !== state.bottomOpened) {
+                derivedState.bottomOpened = props.bottomOpened;
+                if (props.bottomOpened) {
+                    derivedState.lastlyOpenedDrawer = ojdrawerutils.DrawerConstants.stringBottom;
+                }
+            }
             if (props.startDisplay !== state.startDisplay) {
                 derivedState.startDisplay = props.startDisplay;
             }
             if (props.endDisplay !== state.endDisplay) {
                 derivedState.endDisplay = props.endDisplay;
             }
+            if (props.bottomDisplay !== state.bottomDisplay) {
+                derivedState.bottomDisplay = props.bottomDisplay;
+            }
             return Object.keys(derivedState).length === 0 ? null : derivedState;
         }
         render(props) {
             let startDrawer = this.getDrawer(ojdrawerutils.DrawerConstants.stringStart);
             let endDrawer = this.getDrawer(ojdrawerutils.DrawerConstants.stringEnd);
+            let bottomDrawer = this.getDrawer(ojdrawerutils.DrawerConstants.stringBottom);
             return (preact.h(ojvcomponent.Root, { ref: this.rootRef },
                 startDrawer,
-                preact.h("div", { ref: this.mainSectionRef, class: ojdrawerutils.DrawerConstants.mainContentSelector }, props.children),
+                preact.h("div", { ref: this.middleSectionRef, class: ojdrawerutils.DrawerConstants.middleSectionSelector },
+                    preact.h("div", { ref: this.mainSectionRef, class: ojdrawerutils.DrawerConstants.mainContentSelector }, props.children),
+                    bottomDrawer),
                 endDrawer));
         }
         getDrawer(edge) {
@@ -170,13 +228,34 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
             return this[this.edgeToClosedWithEsc(edge)];
         }
         getDrawerWrapperRef(edge) {
-            return edge === ojdrawerutils.DrawerConstants.stringStart ? this.startWrapperRef : this.endWrapperRef;
+            switch (edge) {
+                case ojdrawerutils.DrawerConstants.stringStart:
+                    return this.startWrapperRef;
+                case ojdrawerutils.DrawerConstants.stringEnd:
+                    return this.endWrapperRef;
+                case ojdrawerutils.DrawerConstants.stringBottom:
+                    return this.bottomWrapperRef;
+            }
         }
         getDrawerRef(edge) {
-            return edge === ojdrawerutils.DrawerConstants.stringStart ? this.startRef : this.endRef;
+            switch (edge) {
+                case ojdrawerutils.DrawerConstants.stringStart:
+                    return this.startRef;
+                case ojdrawerutils.DrawerConstants.stringEnd:
+                    return this.endRef;
+                case ojdrawerutils.DrawerConstants.stringBottom:
+                    return this.bottomRef;
+            }
         }
         getDrawerContent(edge) {
-            return edge === ojdrawerutils.DrawerConstants.stringStart ? this.props.start : this.props.end;
+            switch (edge) {
+                case ojdrawerutils.DrawerConstants.stringStart:
+                    return this.props.start;
+                case ojdrawerutils.DrawerConstants.stringEnd:
+                    return this.props.end;
+                case ojdrawerutils.DrawerConstants.stringBottom:
+                    return this.props.bottom;
+            }
         }
         getDrawerWrapperStyleClasses(edge) {
             return (`${ojdrawerutils.DrawerConstants.stringOjDrawer}${ojdrawerutils.DrawerConstants.charDash}${ojdrawerutils.DrawerConstants.stringReflow}-wrapper` +
@@ -235,13 +314,16 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
             return ojdrawerutils.DrawerConstants.stringFullOverlay;
         }
         selfClose(edge) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e, _f;
             if (edge === ojdrawerutils.DrawerConstants.stringStart) {
                 (_b = (_a = this.props).onStartOpenedChanged) === null || _b === void 0 ? void 0 : _b.call(_a, false);
             }
             if (edge === ojdrawerutils.DrawerConstants.stringEnd) {
                 (_d = (_c = this.props).onEndOpenedChanged) === null || _d === void 0 ? void 0 : _d.call(_c, false);
             }
+            if (edge === ojdrawerutils.DrawerConstants.stringBottom) {
+                (_f = (_e = this.props).onBottomOpenedChanged) === null || _f === void 0 ? void 0 : _f.call(_e, false);
+            }
         }
         setDrawerFocus(edge) {
             const drawerRef = this.getDrawerRef(edge);
@@ -269,14 +351,17 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
         componentDidMount() {
             this.startOpenedPrevState = this.props.startOpened;
             this.endOpenedPrevState = this.props.endOpened;
+            this.bottomOpenedPrevState = this.props.bottomOpened;
             window.addEventListener(ojdrawerutils.DrawerConstants.stringResize, () => {
                 this.resizeHandler();
             });
             if (DrawerLayout_1.defaultProps.startOpened != this.props.startOpened ||
-                DrawerLayout_1.defaultProps.endOpened != this.props.endOpened) {
+                DrawerLayout_1.defaultProps.endOpened != this.props.endOpened ||
+                DrawerLayout_1.defaultProps.bottomOpened != this.props.bottomOpened) {
                 const stateCopy = Object.assign({}, this.state);
                 stateCopy.startOpened = false;
                 stateCopy.endOpened = false;
+                stateCopy.bottomOpened = false;
                 this.handleComponentUpdate(stateCopy);
             }
         }
@@ -286,10 +371,14 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
             });
         }
         handleComponentUpdate(prevState) {
-            const firstDrawerToOpen = this.state.lastlyOpenedDrawer === ojdrawerutils.DrawerConstants.stringStart
-                ? ojdrawerutils.DrawerConstants.stringEnd
-                : ojdrawerutils.DrawerConstants.stringStart;
-            this.openOrCloseDrawer(firstDrawerToOpen, prevState);
+            let sides = [
+                ojdrawerutils.DrawerConstants.stringStart,
+                ojdrawerutils.DrawerConstants.stringEnd,
+                ojdrawerutils.DrawerConstants.stringBottom
+            ];
+            sides = sides.filter((side) => side != this.state.lastlyOpenedDrawer);
+            this.openOrCloseDrawer(sides[0], prevState);
+            this.openOrCloseDrawer(sides[1], prevState);
             this.openOrCloseDrawer(this.state.lastlyOpenedDrawer, prevState);
         }
         openOrCloseDrawer(edge, prevState) {
@@ -313,7 +402,10 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
             if (this.isDrawerOpened(edge) === false ||
                 this.shouldDrawerChangeDisplayMode(edge) ||
                 this.getStateToChangeTo(edge)) {
-                this.animateClose(edge).then(() => {
+                this.animateClose(edge)
+                    .then(() => {
+                    DomUtils.removeResizeListener(this.rootRef.current, this.reflowDrawerResizeListener);
+                    this.reflowDrawerResizeListener === null;
                     if (this.getStateToChangeTo(edge)) {
                         const updatedState = {};
                         const resetStateToChangeTo = {};
@@ -330,8 +422,14 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                     else {
                         if (!this.wasDrawerOpenedInPrevState(edge)) {
                             this.forceUpdate();
+                            setTimeout(() => {
+                                this.setBottomOverlayDrawerWidth();
+                            }, 0);
                         }
                     }
+                })
+                    .then(() => {
+                    this.setBottomOverlayDrawerWidth();
                 });
             }
             else {
@@ -339,7 +437,13 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                     if (prevState[this.edgeToStateOpenedName(edge)] === false ||
                         prevState[this.edgeToShouldChangeDisplayMode(edge)] ||
                         prevState[this.edgeToDisplayName(edge)] != this.state[this.edgeToDisplayName(edge)]) {
-                        this.animateOpen(edge);
+                        this.animateOpen(edge).then(() => {
+                            this.setBottomOverlayDrawerWidth();
+                            if (this.reflowDrawerResizeListener === null) {
+                                this.reflowDrawerResizeListener = this.reflowDrawerResizeCallback.bind(this, edge);
+                            }
+                            DomUtils.addResizeListener(this.getDrawerRef(edge).current, this.reflowDrawerResizeListener, 50, true);
+                        });
                     }
                 }
             }
@@ -418,7 +522,10 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                 [PSEvent.POPUP_AFTER_CLOSE]: () => this.afterCloseHandler(edge, prevState),
                 [PSEvent.POPUP_REFRESH]: () => {
                     $drawerElement.position(this.getDrawerPosition(edge));
-                    this.setOverlayDrawersHeight();
+                    if ([ojdrawerutils.DrawerConstants.stringStart, ojdrawerutils.DrawerConstants.stringEnd].indexOf(edge) > -1) {
+                        this.setStartEndOverlayDrawersHeight();
+                    }
+                    this.setBottomOverlayDrawerWidth();
                 }
             };
             return PSOptions;
@@ -427,29 +534,37 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
             ojdrawerutils.DrawerUtils.disableBodyOverflow();
             const $drawerElement = PSOptions[PopupService.OPTION.POPUP];
             const position = PSOptions[PopupService.OPTION.POSITION];
+            if (edge === ojdrawerutils.DrawerConstants.stringBottom) {
+                this.setBottomOverlayDrawerWidth();
+            }
             $drawerElement.show();
             $drawerElement.position(position);
-            this.setOverlayDrawersHeight();
+            this.setStartEndOverlayDrawersHeight();
             return this.animateOpen(edge);
         }
+        setBottomOverlayDrawerWidth() {
+            if (this.isDrawerOpened(ojdrawerutils.DrawerConstants.stringBottom) &&
+                this.getDrawerResolvedDisplayMode(ojdrawerutils.DrawerConstants.stringBottom) !=
+                    ojdrawerutils.DrawerConstants.stringReflow) {
+                const width = this.middleSectionRef.current.getBoundingClientRect().width;
+                this.bottomRef.current.style.width = `${width}px`;
+            }
+        }
         afterOpenHandler(edge, prevState) {
             ojdrawerutils.DrawerUtils.enableBodyOverflow();
             this.handleFocus(prevState);
             const $drawerElement = $(this.getDrawerRef(edge).current);
             const status = ZOrderUtils.getStatus($drawerElement);
-            if (this.drawerResizeHandler === null) {
-                this.drawerResizeHandler = this.drawerResizeCallback.bind(this, $drawerElement, edge);
+            if (this.overlayDrawerResizeListener === null) {
+                this.overlayDrawerResizeListener = this.overlayDrawerResizeCallback.bind(this, edge);
             }
-            DomUtils.addResizeListener(this.getDrawerRef(edge).current, this.drawerResizeHandler, 0, true);
+            DomUtils.addResizeListener(this.getDrawerRef(edge).current, this.overlayDrawerResizeListener, 50, true);
             if (status === ZOrderUtils.STATUS.OPEN && !this.isDrawerOpened(edge)) {
                 const popupServiceInstance = PopupService.getInstance();
                 const popupServiceOptions = this.getPopupServiceOptions(edge, prevState);
                 popupServiceInstance.close(popupServiceOptions);
             }
         }
-        drawerResizeCallback($drawerElement, edge) {
-            $drawerElement.position(this.getDrawerPosition(edge));
-        }
         handleFocus(prevState) {
             if (this.state.startOpened && prevState.startOpened !== this.state.startOpened) {
                 this.setDrawerFocus(ojdrawerutils.DrawerConstants.stringStart);
@@ -457,10 +572,14 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
             if (this.state.endOpened && prevState.endOpened !== this.state.endOpened) {
                 this.setDrawerFocus(ojdrawerutils.DrawerConstants.stringEnd);
             }
+            if (this.state.bottomOpened && prevState.bottomOpened !== this.state.bottomOpened) {
+                this.setDrawerFocus(ojdrawerutils.DrawerConstants.stringBottom);
+            }
         }
         beforeCloseHandler(edge) {
             ojdrawerutils.DrawerUtils.disableBodyOverflow();
-            DomUtils.removeResizeListener(this.rootRef.current, this.drawerResizeHandler);
+            DomUtils.removeResizeListener(this.rootRef.current, this.overlayDrawerResizeListener);
+            this.overlayDrawerResizeListener === null;
             return this.animateClose(edge);
         }
         afterCloseHandler(edge, prevState) {
@@ -495,35 +614,27 @@ define(['exports', 'ojs/ojvcomponent', 'preact', 'jquery', 'ojs/ojanimation', 'o
                 this.forceUpdate();
             }
         }
-        getDrawerPosition(edge) {
-            const pos = `${edge} top`;
-            let position = {
-                my: pos,
-                at: pos,
-                of: this.rootRef.current,
-                collision: 'none'
-            };
-            return oj.PositionUtils.normalizeHorizontalAlignment(position, ojdrawerutils.DrawerUtils.isRTL());
-        }
-        setOverlayDrawersHeight() {
-            const mainContentHeight = ojdrawerutils.DrawerUtils.getElementHeight(this.mainSectionRef.current) + 'px';
+        setStartEndOverlayDrawersHeight() {
+            const middleSectionHeight = ojdrawerutils.DrawerUtils.getElementHeight(this.middleSectionRef.current) + 'px';
             const startDrawerElement = this.startRef.current;
             if (startDrawerElement) {
-                startDrawerElement.style.height = mainContentHeight;
+                startDrawerElement.style.height = middleSectionHeight;
             }
             const endDrawerElement = this.endRef.current;
             if (endDrawerElement) {
-                endDrawerElement.style.height = mainContentHeight;
+                endDrawerElement.style.height = middleSectionHeight;
             }
         }
     };
     exports.DrawerLayout.defaultProps = {
         startOpened: false,
         endOpened: false,
+        bottomOpened: false,
         startDisplay: 'auto',
-        endDisplay: 'auto'
+        endDisplay: 'auto',
+        bottomDisplay: 'auto'
     };
-    exports.DrawerLayout.metadata = { "slots": { "": {}, "start": {}, "end": {} }, "properties": { "startOpened": { "type": "boolean", "writeback": true }, "endOpened": { "type": "boolean", "writeback": true }, "startDisplay": { "type": "string", "enumValues": ["reflow", "overlay", "auto"] }, "endDisplay": { "type": "string", "enumValues": ["reflow", "overlay", "auto"] } }, "extension": { "_WRITEBACK_PROPS": ["startOpened", "endOpened"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["role"] } };
+    exports.DrawerLayout.metadata = { "slots": { "": {}, "start": {}, "end": {}, "bottom": {} }, "properties": { "startOpened": { "type": "boolean", "writeback": true }, "endOpened": { "type": "boolean", "writeback": true }, "bottomOpened": { "type": "boolean", "writeback": true }, "startDisplay": { "type": "string", "enumValues": ["reflow", "overlay", "auto"] }, "endDisplay": { "type": "string", "enumValues": ["reflow", "overlay", "auto"] }, "bottomDisplay": { "type": "string", "enumValues": ["reflow", "overlay", "auto"] } }, "extension": { "_WRITEBACK_PROPS": ["startOpened", "endOpened", "bottomOpened"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["role"] } };
     exports.DrawerLayout = DrawerLayout_1 = __decorate([
         ojvcomponent.customElement('oj-drawer-layout')
     ], exports.DrawerLayout);

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

@@ -32,6 +32,9 @@ define(['exports', 'ojs/ojdomutils'], function (exports, DomUtils) { 'use strict
         static get styleBottomDrawer() {
             return `${this.stringOjDrawer}${this.charDash}${this.stringBottom}`;
         }
+        static get middleSectionSelector() {
+            return `${this.stringOjDrawer}${this.charDash}${this.stringMiddleSection}`;
+        }
         static get mainContentSelector() {
             return `${this.stringOjDrawer}${this.charDash}${this.stringMainContent}`;
         }
@@ -51,6 +54,7 @@ define(['exports', 'ojs/ojdomutils'], function (exports, DomUtils) { 'use strict
     DrawerConstants.stringEnd = 'end';
     DrawerConstants.stringTop = 'top';
     DrawerConstants.stringBottom = 'bottom';
+    DrawerConstants.stringMiddleSection = `layout-middle-section`;
     DrawerConstants.stringMainContent = `layout-main-content`;
     DrawerConstants.stringStyleClassDisableOverflow = `oj-drawer-disable-body-overflow`;
     DrawerConstants.stringSurrogate = 'surrogate';
@@ -72,6 +76,7 @@ define(['exports', 'ojs/ojdomutils'], function (exports, DomUtils) { 'use strict
     DrawerConstants.stringSlideIn = 'slideIn';
     DrawerConstants.stringSlideOut = 'slideOut';
     DrawerConstants.stringWidth = 'width';
+    DrawerConstants.stringHeight = 'height';
     DrawerConstants.animationDuration = 300;
     DrawerConstants.keys = {
         ESC: 'Escape',
@@ -131,11 +136,15 @@ define(['exports', 'ojs/ojdomutils'], function (exports, DomUtils) { 'use strict
                     }
                     break;
                 case DrawerConstants.stringBottom:
-                    direction =
-                        actionType === DrawerConstants.stringSlideIn
-                            ? DrawerConstants.stringTop
-                            : DrawerConstants.stringBottom;
-                    break;
+                    if (actionType === DrawerConstants.stringSlideIn) {
+                        direction = DrawerConstants.stringTop;
+                    }
+                    else if (actionType === DrawerConstants.stringSlideOut) {
+                        direction = DrawerConstants.stringBottom;
+                    }
+                    else {
+                        direction = DrawerConstants.stringHeight;
+                    }
             }
             return {
                 direction,

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

@@ -11294,8 +11294,8 @@ define(['exports', 'ojs/ojthemeutils'], function (exports, ThemeUtils) { 'use st
         // Properties that are supported in <canvas> elements by browser
         // Chrome and Safari supports only supports fontVariantNumeric
         // Firefox supports none
-        if ((Agent.browser === 'safari' || Agent.browser === 'chrome') && isLetterSpacingNormal && isWordSpacingNormal) {
-            if (TextUtils._fontVariantNumeric != fontVariantNumeric) {
+       if ((Agent.browser === 'safari' || Agent.browser === 'chrome') && isLetterSpacingNormal && isWordSpacingNormal) {
+          if (TextUtils._fontVariantNumeric != fontVariantNumeric) {
             TextUtils._clearCanvasContext();
             TextUtils._setSpacing(wordSpacing, letterSpacing, fontVariantNumeric);
           }
@@ -16972,7 +16972,11 @@ define(['exports', 'ojs/ojthemeutils'], function (exports, ThemeUtils) { 'use st
     else {
       if (target && target.isSelectable && target.isSelectable()) {
         // 3. Single select of selectable target
-        bChanged = this._addToSelection(target, false);
+        if (addToExisting && target.isSelected()) {
+          bChanged = this._removeFromSelection(target);
+        } else {
+          bChanged = this._addToSelection(target, false);
+        }
       } else {
         // 4. Single select of non-selectable target
         bChanged = this.clearSelection();
@@ -29496,25 +29500,31 @@ define(['exports', 'ojs/ojthemeutils'], function (exports, ThemeUtils) { 'use st
    * @param {Array} navigableItems An array of items that could receive focus next
    * @param {Boolean=} ignoreBounds Ignore the _isInBounds check when finding the next navigable
    * @param {dvt.Displayable=} targetCoordinateSpace The displayable defining the target coordinate space
+   * @param {Boolean=} use2d Whether or not to use perpendicular direction when comparing distance between logical objects
    * @return {DvtKeyboardNavigable} The next navigable
    */
-  KeyboardHandler.getNextNavigable = function (
+   KeyboardHandler.getNextNavigable = function (
     currentNavigable,
     event,
     navigableItems,
     ignoreBounds,
-    targetCoordinateSpace
+    targetCoordinateSpace,
+    use2d
   ) {
+    if (!currentNavigable) {
+      if (!navigableItems || navigableItems.length < 1) return null;
+      else return navigableItems[0];
+    }
+
     var nextNavigable = null;
     var nextNavigableDelta = 0;
+    var nextNavigableDelta2 = 0;
     var delta = 0;
+    var delta2 = 0;
 
     var direction = event.keyCode;
+    var direction2 = use2d && KeyboardHandler.getPerpendicularDirection(event.keyCode);
 
-    if (!currentNavigable) {
-      if (!navigableItems || navigableItems.length < 1) return null;
-      else return navigableItems[0];
-    }
 
     // get the bounds of the current navigable
     var currentBounds = currentNavigable.getKeyboardBoundingBox(targetCoordinateSpace);
@@ -29529,6 +29539,8 @@ define(['exports', 'ojs/ojthemeutils'], function (exports, ThemeUtils) { 'use st
 
       if (ignoreBounds || KeyboardHandler._isInBounds(currentBounds, candidateBounds, direction)) {
         delta = KeyboardHandler._computeDelta(currentBounds, candidateBounds, direction);
+        // using Math.abs in order to equally favor equidistance items in either positive or negative dir2
+        delta2 = use2d && Math.abs(KeyboardHandler._computeDelta(currentBounds, candidateBounds, direction2));
 
         if (
           ((direction == KeyboardEvent.UP_ARROW || direction == KeyboardEvent.LEFT_ARROW) &&
@@ -29536,16 +29548,37 @@ define(['exports', 'ojs/ojthemeutils'], function (exports, ThemeUtils) { 'use st
             (!nextNavigable || delta > nextNavigableDelta)) ||
           ((direction == KeyboardEvent.DOWN_ARROW || direction == KeyboardEvent.RIGHT_ARROW) &&
             delta > 0 &&
-            (!nextNavigable || delta < nextNavigableDelta))
+            (!nextNavigable || delta < nextNavigableDelta)) ||
+          (use2d && (delta === nextNavigableDelta) && (delta2 < nextNavigableDelta2) && delta !== 0)
         ) {
           nextNavigable = navigable;
           nextNavigableDelta = delta;
+          nextNavigableDelta2 = delta2;
         }
       }
     }
     return nextNavigable ? nextNavigable : currentNavigable;
   };
 
+  /**
+   * Returns the key code of the arrow key perpendicular to that of the passed arrow key code. Follows right hand
+   * screw rule to determine the perpendicular direction. i.e curl 4 fingers of right hand to point to direction
+   * and thumb points to perpendicular direction.
+   * @param {number} direction Integer key code of either up, down left or right arrow key.
+   * @returns {number} Integer key code.
+   */
+  KeyboardHandler.getPerpendicularDirection = function (direction) {
+    if (direction === KeyboardEvent.UP_ARROW) {
+      return KeyboardEvent.RIGHT_ARROW;
+    } else if (direction === KeyboardEvent.RIGHT_ARROW) {
+      return KeyboardEvent.DOWN_ARROW;
+    } else if (direction === KeyboardEvent.DOWN_ARROW) {
+      return KeyboardEvent.LEFT_ARROW;
+    } else if (direction === KeyboardEvent.LEFT_ARROW) {
+      return KeyboardEvent.UP_ARROW;
+    }
+  };
+
   /**
    * Returns a default keyboard navigable by selecting the upper left or lower right-most item in the navigableItems
    * array.  Utility method that can be called by classes that implement DvtKeyboardNavigable