From 2aa19cb08878f8e41f131526697cacd6f012b258 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Fri, 29 Nov 2024 12:30:43 +0100
Subject: [PATCH] MDL-75669 theme_boost: Refactor dropdowns positioning classes

- Replace .dropdown-menu-[left|right] with .dropdown-menu-[start|end].
---
 blocks/myoverview/templates/course-action-menu.mustache     | 2 +-
 blocks/timeline/templates/nav-view-selector.mustache        | 2 +-
 contentbank/templates/bankcontent/toolbar_dropdown.mustache | 2 +-
 contentbank/templates/contentbankmenu.mustache              | 4 ++--
 grade/report/grader/classes/output/action_bar.php           | 2 +-
 lib/amd/build/local/action_menu/subpanel.min.js             | 2 +-
 lib/amd/build/local/action_menu/subpanel.min.js.map         | 2 +-
 lib/amd/build/usermenu.min.js.map                           | 2 +-
 lib/amd/src/local/action_menu/subpanel.js                   | 6 +++---
 lib/amd/src/usermenu.js                                     | 1 -
 lib/classes/output/action_menu.php                          | 4 ++--
 lib/classes/output/local/dropdown/dialog.php                | 4 ++--
 lib/templates/action_menu_trigger.mustache                  | 2 +-
 lib/templates/local/action_menu/subpanel.mustache           | 2 +-
 lib/templates/moremenu.mustache                             | 2 +-
 lib/templates/user_menu.mustache                            | 2 +-
 mod/forum/templates/forum_action_menu.mustache              | 2 +-
 .../forum_discussion_nested_v2_first_post.mustache          | 2 +-
 .../templates/local/grades/local/grader/navigation.mustache | 2 +-
 mod/glossary/templates/standard_action_menu.mustache        | 2 +-
 reportbuilder/templates/local/filters/area.mustache         | 2 +-
 theme/boost/scss/moodle/core.scss                           | 2 ++
 theme/boost/templates/courseindexdrawercontrols.mustache    | 2 +-
 theme/boost/templates/language_menu.mustache                | 2 +-
 theme/classic/templates/core/user_menu.mustache             | 2 +-
 25 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/blocks/myoverview/templates/course-action-menu.mustache b/blocks/myoverview/templates/course-action-menu.mustache
index e555bd44c01..1967cc81912 100644
--- a/blocks/myoverview/templates/course-action-menu.mustache
+++ b/blocks/myoverview/templates/course-action-menu.mustache
@@ -33,7 +33,7 @@
         <i class="icon fa fa-ellipsis-v fa-fw m-0" title="{{#str}} aria:courseactions, block_myoverview {{/str}} {{{fullname}}}" aria-hidden="true"></i>
         <span class="visually-hidden">{{#str}} aria:courseactions, block_myoverview {{/str}} {{{fullname}}}</span>
     </button>
-    <div class="dropdown-menu dropdown-menu-right">
+    <div class="dropdown-menu dropdown-menu-end">
         <a class="dropdown-item {{#isfavourite}}hidden{{/isfavourite}}" href="#"
             data-action="add-favourite"
             data-course-id="{{id}}"
diff --git a/blocks/timeline/templates/nav-view-selector.mustache b/blocks/timeline/templates/nav-view-selector.mustache
index 00820cfdb27..215788330c1 100644
--- a/blocks/timeline/templates/nav-view-selector.mustache
+++ b/blocks/timeline/templates/nav-view-selector.mustache
@@ -31,7 +31,7 @@
             {{#sorttimelinedates}}{{#str}} sortbydates, block_timeline {{/str}}{{/sorttimelinedates}}
         </span>
     </button>
-    <div id="menusortby" role="menu" class="dropdown-menu dropdown-menu-right list-group hidden" data-show-active-item data-skip-active-class="true">
+    <div id="menusortby" role="menu" class="dropdown-menu dropdown-menu-end list-group hidden" data-show-active-item data-skip-active-class="true">
         <a
             class="dropdown-item"
             href="#view_dates_{{uniqid}}-{{timelineinstanceid}}"
diff --git a/contentbank/templates/bankcontent/toolbar_dropdown.mustache b/contentbank/templates/bankcontent/toolbar_dropdown.mustache
index 3acd3af8c24..a95419d9646 100644
--- a/contentbank/templates/bankcontent/toolbar_dropdown.mustache
+++ b/contentbank/templates/bankcontent/toolbar_dropdown.mustache
@@ -47,7 +47,7 @@
             disabled{{/contenttypes}}>
         {{#name}} {{name}} {{/name}}
     </button>
-    <div class="dropdown-menu dropdown-scrollable dropdown-menu-right">
+    <div class="dropdown-menu dropdown-scrollable dropdown-menu-end">
         {{#contenttypes}}
             {{#types}}
                 {{^typeeditorparams}}
diff --git a/contentbank/templates/contentbankmenu.mustache b/contentbank/templates/contentbankmenu.mustache
index 306114282da..d7b86280d50 100644
--- a/contentbank/templates/contentbankmenu.mustache
+++ b/contentbank/templates/contentbankmenu.mustache
@@ -48,8 +48,8 @@ along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
     <button aria-label="{{#str}}actionsmenu{{/str}}" class="btn btn-secondary dropdown-toggle" id="dropdown-actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         {{#str}}more, core_contentbank{{/str}}
     </button>
-    {{! dropdown-menu-right style to fix RTL placement }}
-    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-actions">
+    {{! dropdown-menu-end style to fix RTL placement }}
+    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-actions">
         {{#options}}
             <a class="dropdown-item {{extraclasses}}" {{#attributes}}{{name}}="{{value}}"{{/attributes}} href="{{url}}">{{label}}</a>
         {{/options}}
diff --git a/grade/report/grader/classes/output/action_bar.php b/grade/report/grader/classes/output/action_bar.php
index 9a71f1dc2ab..df30c9acadf 100644
--- a/grade/report/grader/classes/output/action_bar.php
+++ b/grade/report/grader/classes/output/action_bar.php
@@ -120,7 +120,7 @@ class action_bar extends \core_grades\output\action_bar {
             );
             $data['searchdropdown'] = $userselector->export_for_template($output);
             // The collapsed column dialog is aligned to the edge of the screen, we need to place it such that it also aligns.
-            $collapsemenudirection = right_to_left() ? 'dropdown-menu-left' : 'dropdown-menu-right';
+            $collapsemenudirection = right_to_left() ? 'dropdown-menu-start' : 'dropdown-menu-end';
 
             $collapse = new comboboxsearch(
                 true,
diff --git a/lib/amd/build/local/action_menu/subpanel.min.js b/lib/amd/build/local/action_menu/subpanel.min.js
index 1730b467ce5..bd054ad014a 100644
--- a/lib/amd/build/local/action_menu/subpanel.min.js
+++ b/lib/amd/build/local/action_menu/subpanel.min.js
@@ -5,6 +5,6 @@ define("core/local/action_menu/subpanel",["exports","jquery","core/utils","core/
    * @module      core/local/action_menu/subpanel
    * @copyright   2023 Mikel Martín <mikel@moodle.com>
    * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);const Selectors_mainMenu='[role="menu"]',Selectors_dropdownRight=".dropdown-menu-right",Selectors_subPanel=".dropdown-subpanel",Selectors_subPanelMenuItem=".dropdown-subpanel > .dropdown-item",Selectors_subPanelContent=".dropdown-subpanel > .dropdown-menu",Selectors_drawer='[data-region="fixed-drawer"]',Selectors_blockColumn=".blockcolumn",Selectors_columnLeft=".columnleft",Classes_dropRight="dropright",Classes_dropLeft="dropleft",Classes_dropDown="dropdown",Classes_forceLeft="downleft",Classes_contentDisplayed="content-displayed",BootstrapEvents_hideDropdown="hidden.bs.dropdown";let initialized=!1;const updateAllPanelsPosition=()=>{document.querySelectorAll(Selectors_subPanel).forEach((dropdown=>{new SubPanel(dropdown).updatePosition()}))};class SubPanel{constructor(element){this.element=element,this.menuItem=element.querySelector(Selectors_subPanelMenuItem),this.panelContent=element.querySelector(Selectors_subPanelContent),this.showPreviewOnFocus=!0}init(){this.element.dataset.subPanelInitialized||(this.updatePosition(),this.element.addEventListener("focusin",this._mainElementFocusInHandler.bind(this)),this.menuItem.addEventListener("click",this._menuItemClickHandler.bind(this)),this.menuItem.addEventListener("keydown",this._menuItemKeyHandler.bind(this)),(0,_pagehelpers.isBehatSite)()||(this.menuItem.addEventListener("mouseover",this._menuItemHoverHandler.bind(this)),this.menuItem.addEventListener("mouseout",this._menuItemHoverOutHandler.bind(this))),this.panelContent.addEventListener("keydown",this._panelContentKeyHandler.bind(this)),this.element.dataset.subPanelInitialized=!0)}_needSmallSpaceBehaviour(){return(0,_pagehelpers.isExtraSmall)()||null!==this.element.closest(Selectors_drawer)||null!==this.element.closest(Selectors_blockColumn)}_needDropdownRight(){return null===this.element.closest(Selectors_columnLeft)&&null!==this.element.closest(Selectors_dropdownRight)}_mainElementFocusInHandler(){!this._needSmallSpaceBehaviour()&&this.showPreviewOnFocus?this.setVisibility(!0):this.showPreviewOnFocus=!0}_menuItemClickHandler(event){event.stopPropagation(),event.preventDefault(),this._needSmallSpaceBehaviour()&&this.setVisibility(!this.getVisibility())}_menuItemHoverHandler(){this._needSmallSpaceBehaviour()||this.setVisibility(!0)}_menuItemHoverOutHandler(){this._needSmallSpaceBehaviour()||this._hideOtherSubPanels()}_menuItemKeyHandler(event){if("ArrowUp"===event.key||"ArrowDown"===event.key&&!this._needSmallSpaceBehaviour())return void this.setVisibility(!1);let focusPanel=!1;("ArrowRight"===event.key||"ArrowLeft"===event.key||"Tab"===event.key&&!event.shiftKey)&&(focusPanel=!0),"Enter"!==event.key&&" "!==event.key||(focusPanel=!0),"ArrowDown"===event.key&&this._needSmallSpaceBehaviour()&&this.getVisibility()&&(focusPanel=!0),focusPanel&&(event.stopPropagation(),event.preventDefault(),this.setVisibility(!0),this._focusPanelContent())}_panelContentKeyHandler(event){const canLoop=!this._needSmallSpaceBehaviour();let isBrowsingSubPanel=!1,newFocus=null;"ArrowRight"!==event.key&&"ArrowLeft"!==event.key||(newFocus=this.menuItem),("Escape"===event.key||"Tab"===event.key&&event.shiftKey)&&(newFocus=this.menuItem,this.setVisibility(!1),this.showPreviewOnFocus=!1),"ArrowUp"===event.key&&(newFocus=(0,_pagehelpers.previousFocusableElement)(this.panelContent,canLoop),isBrowsingSubPanel=!0),"ArrowDown"===event.key&&(newFocus=(0,_pagehelpers.nextFocusableElement)(this.panelContent,canLoop),isBrowsingSubPanel=!0),"Home"===event.key&&(newFocus=(0,_pagehelpers.firstFocusableElement)(this.panelContent),isBrowsingSubPanel=!0),"End"===event.key&&(newFocus=(0,_pagehelpers.lastFocusableElement)(this.panelContent),isBrowsingSubPanel=!0),null===newFocus&&isBrowsingSubPanel&&!canLoop&&(newFocus=this.menuItem),null!==newFocus&&(event.stopPropagation(),event.preventDefault(),newFocus.focus())}_focusPanelContent(){const pendingPromise=new _pending.default("core/action_menu/subpanel:focuscontent");setTimeout((()=>{const firstFocusable=(0,_pagehelpers.firstFocusableElement)(this.panelContent);firstFocusable&&firstFocusable.focus(),pendingPromise.resolve()}),100)}setVisibility(visible){visible&&this._hideOtherSubPanels(),!visible&&this.getVisibility&&(0,_aria.hide)(this.panelContent),visible&&!this.getVisibility&&(0,_aria.unhide)(this.panelContent),this.menuItem.setAttribute("aria-expanded",visible?"true":"false"),this.panelContent.classList.toggle("show",visible),this.element.classList.toggle(Classes_contentDisplayed,visible)}_hideOtherSubPanels(){this.element.closest(Selectors_mainMenu).querySelectorAll("".concat(Selectors_subPanelContent,".show")).forEach((visibleSubPanel=>{const dropdownSubPanel=visibleSubPanel.closest(Selectors_subPanel);if(dropdownSubPanel===this.element)return;new SubPanel(dropdownSubPanel).setVisibility(!1)}))}getVisibility(){return"true"===this.menuItem.getAttribute("aria-expanded")}updatePosition(){const dropdownRight=this._needDropdownRight();if(this._needSmallSpaceBehaviour())return this.element.classList.remove(Classes_dropRight),this.element.classList.remove(Classes_dropLeft),this.element.classList.add(Classes_dropDown),void this.element.classList.toggle(Classes_forceLeft,dropdownRight);this.element.classList.remove(Classes_dropDown),this.element.classList.remove(Classes_forceLeft),this.element.classList.toggle(Classes_dropRight,!dropdownRight),this.element.classList.toggle(Classes_dropLeft,dropdownRight)}}_exports.init=selector=>{initialized||((0,_jquery.default)(document).on(BootstrapEvents_hideDropdown,(()=>{document.querySelectorAll("".concat(Selectors_subPanelContent,".show")).forEach((visibleSubPanel=>{const dropdownSubPanel=visibleSubPanel.closest(Selectors_subPanel);new SubPanel(dropdownSubPanel).setVisibility(!1)}))})),window.addEventListener("resize",(0,_utils.debounce)(updateAllPanelsPosition,400)),initialized=!0);const subMenu=document.querySelector(selector);if(!subMenu)throw new Error("Sub panel element not found: ".concat(selector));new SubPanel(subMenu).init()}}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);const Selectors_mainMenu='[role="menu"]',Selectors_dropdownRight=".dropdown-menu-end",Selectors_subPanel=".dropdown-subpanel",Selectors_subPanelMenuItem=".dropdown-subpanel > .dropdown-item",Selectors_subPanelContent=".dropdown-subpanel > .dropdown-menu",Selectors_drawer='[data-region="fixed-drawer"]',Selectors_blockColumn=".blockcolumn",Selectors_columnLeft=".columnleft",Classes_dropRight="dropend",Classes_dropLeft="dropstart",Classes_dropDown="dropdown",Classes_forceLeft="downleft",Classes_contentDisplayed="content-displayed",BootstrapEvents_hideDropdown="hidden.bs.dropdown";let initialized=!1;const updateAllPanelsPosition=()=>{document.querySelectorAll(Selectors_subPanel).forEach((dropdown=>{new SubPanel(dropdown).updatePosition()}))};class SubPanel{constructor(element){this.element=element,this.menuItem=element.querySelector(Selectors_subPanelMenuItem),this.panelContent=element.querySelector(Selectors_subPanelContent),this.showPreviewOnFocus=!0}init(){this.element.dataset.subPanelInitialized||(this.updatePosition(),this.element.addEventListener("focusin",this._mainElementFocusInHandler.bind(this)),this.menuItem.addEventListener("click",this._menuItemClickHandler.bind(this)),this.menuItem.addEventListener("keydown",this._menuItemKeyHandler.bind(this)),(0,_pagehelpers.isBehatSite)()||(this.menuItem.addEventListener("mouseover",this._menuItemHoverHandler.bind(this)),this.menuItem.addEventListener("mouseout",this._menuItemHoverOutHandler.bind(this))),this.panelContent.addEventListener("keydown",this._panelContentKeyHandler.bind(this)),this.element.dataset.subPanelInitialized=!0)}_needSmallSpaceBehaviour(){return(0,_pagehelpers.isExtraSmall)()||null!==this.element.closest(Selectors_drawer)||null!==this.element.closest(Selectors_blockColumn)}_needDropdownRight(){return null===this.element.closest(Selectors_columnLeft)&&null!==this.element.closest(Selectors_dropdownRight)}_mainElementFocusInHandler(){!this._needSmallSpaceBehaviour()&&this.showPreviewOnFocus?this.setVisibility(!0):this.showPreviewOnFocus=!0}_menuItemClickHandler(event){event.stopPropagation(),event.preventDefault(),this._needSmallSpaceBehaviour()&&this.setVisibility(!this.getVisibility())}_menuItemHoverHandler(){this._needSmallSpaceBehaviour()||this.setVisibility(!0)}_menuItemHoverOutHandler(){this._needSmallSpaceBehaviour()||this._hideOtherSubPanels()}_menuItemKeyHandler(event){if("ArrowUp"===event.key||"ArrowDown"===event.key&&!this._needSmallSpaceBehaviour())return void this.setVisibility(!1);let focusPanel=!1;("ArrowRight"===event.key||"ArrowLeft"===event.key||"Tab"===event.key&&!event.shiftKey)&&(focusPanel=!0),"Enter"!==event.key&&" "!==event.key||(focusPanel=!0),"ArrowDown"===event.key&&this._needSmallSpaceBehaviour()&&this.getVisibility()&&(focusPanel=!0),focusPanel&&(event.stopPropagation(),event.preventDefault(),this.setVisibility(!0),this._focusPanelContent())}_panelContentKeyHandler(event){const canLoop=!this._needSmallSpaceBehaviour();let isBrowsingSubPanel=!1,newFocus=null;"ArrowRight"!==event.key&&"ArrowLeft"!==event.key||(newFocus=this.menuItem),("Escape"===event.key||"Tab"===event.key&&event.shiftKey)&&(newFocus=this.menuItem,this.setVisibility(!1),this.showPreviewOnFocus=!1),"ArrowUp"===event.key&&(newFocus=(0,_pagehelpers.previousFocusableElement)(this.panelContent,canLoop),isBrowsingSubPanel=!0),"ArrowDown"===event.key&&(newFocus=(0,_pagehelpers.nextFocusableElement)(this.panelContent,canLoop),isBrowsingSubPanel=!0),"Home"===event.key&&(newFocus=(0,_pagehelpers.firstFocusableElement)(this.panelContent),isBrowsingSubPanel=!0),"End"===event.key&&(newFocus=(0,_pagehelpers.lastFocusableElement)(this.panelContent),isBrowsingSubPanel=!0),null===newFocus&&isBrowsingSubPanel&&!canLoop&&(newFocus=this.menuItem),null!==newFocus&&(event.stopPropagation(),event.preventDefault(),newFocus.focus())}_focusPanelContent(){const pendingPromise=new _pending.default("core/action_menu/subpanel:focuscontent");setTimeout((()=>{const firstFocusable=(0,_pagehelpers.firstFocusableElement)(this.panelContent);firstFocusable&&firstFocusable.focus(),pendingPromise.resolve()}),100)}setVisibility(visible){visible&&this._hideOtherSubPanels(),!visible&&this.getVisibility&&(0,_aria.hide)(this.panelContent),visible&&!this.getVisibility&&(0,_aria.unhide)(this.panelContent),this.menuItem.setAttribute("aria-expanded",visible?"true":"false"),this.panelContent.classList.toggle("show",visible),this.element.classList.toggle(Classes_contentDisplayed,visible)}_hideOtherSubPanels(){this.element.closest(Selectors_mainMenu).querySelectorAll("".concat(Selectors_subPanelContent,".show")).forEach((visibleSubPanel=>{const dropdownSubPanel=visibleSubPanel.closest(Selectors_subPanel);if(dropdownSubPanel===this.element)return;new SubPanel(dropdownSubPanel).setVisibility(!1)}))}getVisibility(){return"true"===this.menuItem.getAttribute("aria-expanded")}updatePosition(){const dropdownRight=this._needDropdownRight();if(this._needSmallSpaceBehaviour())return this.element.classList.remove(Classes_dropRight),this.element.classList.remove(Classes_dropLeft),this.element.classList.add(Classes_dropDown),void this.element.classList.toggle(Classes_forceLeft,dropdownRight);this.element.classList.remove(Classes_dropDown),this.element.classList.remove(Classes_forceLeft),this.element.classList.toggle(Classes_dropRight,!dropdownRight),this.element.classList.toggle(Classes_dropLeft,dropdownRight)}}_exports.init=selector=>{initialized||((0,_jquery.default)(document).on(BootstrapEvents_hideDropdown,(()=>{document.querySelectorAll("".concat(Selectors_subPanelContent,".show")).forEach((visibleSubPanel=>{const dropdownSubPanel=visibleSubPanel.closest(Selectors_subPanel);new SubPanel(dropdownSubPanel).setVisibility(!1)}))})),window.addEventListener("resize",(0,_utils.debounce)(updateAllPanelsPosition,400)),initialized=!0);const subMenu=document.querySelector(selector);if(!subMenu)throw new Error("Sub panel element not found: ".concat(selector));new SubPanel(subMenu).init()}}));
 
 //# sourceMappingURL=subpanel.min.js.map
\ No newline at end of file
diff --git a/lib/amd/build/local/action_menu/subpanel.min.js.map b/lib/amd/build/local/action_menu/subpanel.min.js.map
index 5ad0592299f..7de36d81f18 100644
--- a/lib/amd/build/local/action_menu/subpanel.min.js.map
+++ b/lib/amd/build/local/action_menu/subpanel.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"subpanel.min.js","sources":["../../../src/local/action_menu/subpanel.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Action menu subpanel JS controls.\n *\n * @module      core/local/action_menu/subpanel\n * @copyright   2023 Mikel Martín <mikel@moodle.com>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport jQuery from 'jquery';\nimport {debounce} from 'core/utils';\nimport {\n    isBehatSite,\n    isExtraSmall,\n    firstFocusableElement,\n    lastFocusableElement,\n    previousFocusableElement,\n    nextFocusableElement,\n} from 'core/pagehelpers';\nimport Pending from 'core/pending';\nimport {\n    hide,\n    unhide,\n} from 'core/aria';\n\nconst Selectors = {\n    mainMenu: '[role=\"menu\"]',\n    dropdownRight: '.dropdown-menu-right',\n    subPanel: '.dropdown-subpanel',\n    subPanelMenuItem: '.dropdown-subpanel > .dropdown-item',\n    subPanelContent: '.dropdown-subpanel > .dropdown-menu',\n    // Drawer selector.\n    drawer: '[data-region=\"fixed-drawer\"]',\n    // Lateral blocks columns selectors.\n    blockColumn: '.blockcolumn',\n    columnLeft: '.columnleft',\n};\n\nconst Classes = {\n    dropRight: 'dropright',\n    dropLeft: 'dropleft',\n    dropDown: 'dropdown',\n    forceLeft: 'downleft',\n    contentDisplayed: 'content-displayed',\n};\n\nconst BootstrapEvents = {\n    hideDropdown: 'hidden.bs.dropdown',\n};\n\nlet initialized = false;\n\n/**\n * Initialize all delegated events into the page.\n */\nconst initPageEvents = () => {\n    if (initialized) {\n        return;\n    }\n    // Hide all subpanels when hidind a dropdown.\n    // This is using JQuery because of BS4 events. JQuery won't be needed with BS5.\n    jQuery(document).on(BootstrapEvents.hideDropdown, () => {\n        document.querySelectorAll(`${Selectors.subPanelContent}.show`).forEach(visibleSubPanel => {\n            const dropdownSubPanel = visibleSubPanel.closest(Selectors.subPanel);\n            const subPanel = new SubPanel(dropdownSubPanel);\n            subPanel.setVisibility(false);\n        });\n    });\n\n    window.addEventListener('resize', debounce(updateAllPanelsPosition, 400));\n\n    initialized = true;\n};\n\n/**\n * Update all the panels position.\n */\nconst updateAllPanelsPosition = () => {\n    document.querySelectorAll(Selectors.subPanel).forEach(dropdown => {\n        const subpanel = new SubPanel(dropdown);\n        subpanel.updatePosition();\n    });\n};\n\n/**\n * Subpanel class.\n * @private\n */\nclass SubPanel {\n    /**\n     * Constructor.\n     * @param {HTMLElement} element The element to initialize.\n     */\n    constructor(element) {\n        this.element = element;\n        this.menuItem = element.querySelector(Selectors.subPanelMenuItem);\n        this.panelContent = element.querySelector(Selectors.subPanelContent);\n        /**\n         * Enable preview when the menu item has focus.\n         *\n         * This is disabled when the user press ESC or shift+TAB to force closing\n         *\n         * @type {Boolean}\n         * @private\n         */\n        this.showPreviewOnFocus = true;\n    }\n\n    /**\n     * Initialize the subpanel element.\n     *\n     * This method adds the event listeners to the subpanel and the position classes.\n     */\n    init() {\n        if (this.element.dataset.subPanelInitialized) {\n            return;\n        }\n\n        this.updatePosition();\n\n        // Full element events.\n        this.element.addEventListener('focusin', this._mainElementFocusInHandler.bind(this));\n        // Menu Item events.\n        this.menuItem.addEventListener('click', this._menuItemClickHandler.bind(this));\n        this.menuItem.addEventListener('keydown', this._menuItemKeyHandler.bind(this));\n        if (!isBehatSite()) {\n            // Behat in Chrome usually move the mouse over the page when trying clicking a subpanel element.\n            // If the menu has more than one subpanel this could cause closing the subpanel by mistake.\n            this.menuItem.addEventListener('mouseover', this._menuItemHoverHandler.bind(this));\n            this.menuItem.addEventListener('mouseout', this._menuItemHoverOutHandler.bind(this));\n        }\n        // Subpanel content events.\n        this.panelContent.addEventListener('keydown', this._panelContentKeyHandler.bind(this));\n\n        this.element.dataset.subPanelInitialized = true;\n    }\n\n    /**\n     * Checks if the subpanel has enough space.\n     *\n     * In general there are two scenarios were the subpanel must be interacted differently:\n     * - Extra small screens: The subpanel is displayed below the menu item.\n     * - Drawer: The subpanel is displayed one of the drawers.\n     * - Block columns: for classic based themes.\n     *\n     * @returns {Boolean} true if the subpanel should be displayed in small screens.\n     */\n    _needSmallSpaceBehaviour() {\n        return isExtraSmall() ||\n            this.element.closest(Selectors.drawer) !== null ||\n            this.element.closest(Selectors.blockColumn) !== null;\n    }\n\n    /**\n     * Check if the subpanel should be displayed on the right.\n     *\n     * This is defined by the drop right boostrap class. However, if the menu is\n     * displayed in a block column on the right, the subpanel should be forced\n     * to the right.\n     *\n     * @returns {Boolean} true if the subpanel should be displayed on the right.\n     */\n    _needDropdownRight() {\n        if (this.element.closest(Selectors.columnLeft) !== null) {\n            return false;\n        }\n        return this.element.closest(Selectors.dropdownRight) !== null;\n    }\n\n    /**\n     * Main element focus in handler.\n     */\n    _mainElementFocusInHandler() {\n        if (this._needSmallSpaceBehaviour() || !this.showPreviewOnFocus) {\n            // Preview is disabled when the user press ESC or shift+TAB to force closing\n            // but if the continue navigating with keyboard the preview is enabled again.\n            this.showPreviewOnFocus = true;\n            return;\n        }\n        this.setVisibility(true);\n    }\n\n    /**\n     * Menu item click handler.\n     * @param {Event} event\n     */\n    _menuItemClickHandler(event) {\n        // Avoid dropdowns being closed after clicking a subemnu.\n        // This won't be needed with BS5 (data-bs-auto-close handles it).\n        event.stopPropagation();\n        event.preventDefault();\n        if (this._needSmallSpaceBehaviour()) {\n            this.setVisibility(!this.getVisibility());\n        }\n    }\n\n    /**\n     * Menu item hover handler.\n     * @private\n     */\n    _menuItemHoverHandler() {\n        if (this._needSmallSpaceBehaviour()) {\n            return;\n        }\n        this.setVisibility(true);\n    }\n\n    /**\n     * Menu item hover out handler.\n     * @private\n     */\n    _menuItemHoverOutHandler() {\n        if (this._needSmallSpaceBehaviour()) {\n            return;\n        }\n        this._hideOtherSubPanels();\n    }\n\n    /**\n     * Menu item key handler.\n     * @param {Event} event\n     * @private\n     */\n    _menuItemKeyHandler(event) {\n        // In small sizes te down key will focus on the panel.\n        if (event.key === 'ArrowUp' || (event.key === 'ArrowDown' && !this._needSmallSpaceBehaviour())) {\n            this.setVisibility(false);\n            return;\n        }\n\n        // Keys to move focus to the panel.\n        let focusPanel = false;\n\n        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft' || (event.key === 'Tab' && !event.shiftKey)) {\n            focusPanel = true;\n        }\n        if ((event.key === 'Enter' || event.key === ' ')) {\n            focusPanel = true;\n        }\n        // In extra small screen the panel is shown below the item.\n        if (event.key === 'ArrowDown' && this._needSmallSpaceBehaviour() && this.getVisibility()) {\n            focusPanel = true;\n        }\n        if (focusPanel) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.setVisibility(true);\n            this._focusPanelContent();\n        }\n\n    }\n\n    /**\n     * Sub panel content key handler.\n     * @param {Event} event\n     * @private\n     */\n    _panelContentKeyHandler(event) {\n        // In extra small devices the panel is displayed under the menu item\n        // so the arrow up/down switch between subpanel and the menu item.\n        const canLoop = !this._needSmallSpaceBehaviour();\n        let isBrowsingSubPanel = false;\n        let newFocus = null;\n        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n            newFocus = this.menuItem;\n        }\n        // Acording to WCAG Esc and Tab are similar to arrow navigation but they\n        // force the subpanel to be closed.\n        if (event.key === 'Escape' || (event.key === 'Tab' && event.shiftKey)) {\n            newFocus = this.menuItem;\n            this.setVisibility(false);\n            this.showPreviewOnFocus = false;\n        }\n        if (event.key === 'ArrowUp') {\n            newFocus = previousFocusableElement(this.panelContent, canLoop);\n            isBrowsingSubPanel = true;\n        }\n        if (event.key === 'ArrowDown') {\n            newFocus = nextFocusableElement(this.panelContent, canLoop);\n            isBrowsingSubPanel = true;\n        }\n        if (event.key === 'Home') {\n            newFocus = firstFocusableElement(this.panelContent);\n            isBrowsingSubPanel = true;\n        }\n        if (event.key === 'End') {\n            newFocus = lastFocusableElement(this.panelContent);\n            isBrowsingSubPanel = true;\n        }\n        // If the user cannot loop and arrive to the start/end of the subpanel\n        // we focus on the menu item.\n        if (newFocus === null && isBrowsingSubPanel && !canLoop) {\n            newFocus = this.menuItem;\n        }\n        if (newFocus !== null) {\n            event.stopPropagation();\n            event.preventDefault();\n            newFocus.focus();\n        }\n    }\n\n    /**\n     * Focus on the first focusable element of the subpanel.\n     * @private\n     */\n    _focusPanelContent() {\n        const pendingPromise = new Pending('core/action_menu/subpanel:focuscontent');\n        // Some Bootstrap events are triggered after the click event.\n        // To prevent this from affecting the focus we wait a bit.\n        setTimeout(() => {\n            const firstFocusable = firstFocusableElement(this.panelContent);\n            if (firstFocusable) {\n                firstFocusable.focus();\n            }\n            pendingPromise.resolve();\n        }, 100);\n    }\n\n    /**\n     * Set the visibility of a subpanel.\n     * @param {Boolean} visible true if the subpanel should be visible.\n     */\n    setVisibility(visible) {\n        if (visible) {\n            this._hideOtherSubPanels();\n        }\n        // Aria hidden/unhidden can alter the focus, we only want to do it when needed.\n        if (!visible && this.getVisibility) {\n            hide(this.panelContent);\n        }\n        if (visible && !this.getVisibility) {\n            unhide(this.panelContent);\n        }\n        this.menuItem.setAttribute('aria-expanded', visible ? 'true' : 'false');\n        this.panelContent.classList.toggle('show', visible);\n        this.element.classList.toggle(Classes.contentDisplayed, visible);\n    }\n\n    /**\n     * Hide all other subpanels in the parent menu.\n     * @private\n     */\n    _hideOtherSubPanels() {\n        const dropdown = this.element.closest(Selectors.mainMenu);\n        dropdown.querySelectorAll(`${Selectors.subPanelContent}.show`).forEach(visibleSubPanel => {\n            const dropdownSubPanel = visibleSubPanel.closest(Selectors.subPanel);\n            if (dropdownSubPanel === this.element) {\n                return;\n            }\n            const subPanel = new SubPanel(dropdownSubPanel);\n            subPanel.setVisibility(false);\n        });\n    }\n\n    /**\n     * Get the visibility of a subpanel.\n     * @returns {Boolean} true if the subpanel is visible.\n     */\n    getVisibility() {\n        return this.menuItem.getAttribute('aria-expanded') === 'true';\n    }\n\n    /**\n     * Update the panels position depending on the screen size and panel position.\n     */\n    updatePosition() {\n        const dropdownRight = this._needDropdownRight();\n        if (this._needSmallSpaceBehaviour()) {\n            this.element.classList.remove(Classes.dropRight);\n            this.element.classList.remove(Classes.dropLeft);\n            this.element.classList.add(Classes.dropDown);\n            this.element.classList.toggle(Classes.forceLeft, dropdownRight);\n            return;\n        }\n        this.element.classList.remove(Classes.dropDown);\n        this.element.classList.remove(Classes.forceLeft);\n        this.element.classList.toggle(Classes.dropRight, !dropdownRight);\n        this.element.classList.toggle(Classes.dropLeft, dropdownRight);\n    }\n}\n\n/**\n * Initialise module for given report\n *\n * @method\n * @param {string} selector The query selector to init.\n */\nexport const init = (selector) => {\n    initPageEvents();\n    const subMenu = document.querySelector(selector);\n    if (!subMenu) {\n        throw new Error(`Sub panel element not found: ${selector}`);\n    }\n    const subPanel = new SubPanel(subMenu);\n    subPanel.init();\n};\n"],"names":["Selectors","Classes","BootstrapEvents","initialized","updateAllPanelsPosition","document","querySelectorAll","forEach","dropdown","SubPanel","updatePosition","constructor","element","menuItem","querySelector","panelContent","showPreviewOnFocus","init","this","dataset","subPanelInitialized","addEventListener","_mainElementFocusInHandler","bind","_menuItemClickHandler","_menuItemKeyHandler","_menuItemHoverHandler","_menuItemHoverOutHandler","_panelContentKeyHandler","_needSmallSpaceBehaviour","closest","_needDropdownRight","setVisibility","event","stopPropagation","preventDefault","getVisibility","_hideOtherSubPanels","key","focusPanel","shiftKey","_focusPanelContent","canLoop","isBrowsingSubPanel","newFocus","focus","pendingPromise","Pending","setTimeout","firstFocusable","resolve","visible","setAttribute","classList","toggle","visibleSubPanel","dropdownSubPanel","getAttribute","dropdownRight","remove","add","selector","on","window","subMenu","Error"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"subpanel.min.js","sources":["../../../src/local/action_menu/subpanel.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Action menu subpanel JS controls.\n *\n * @module      core/local/action_menu/subpanel\n * @copyright   2023 Mikel Martín <mikel@moodle.com>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport jQuery from 'jquery';\nimport {debounce} from 'core/utils';\nimport {\n    isBehatSite,\n    isExtraSmall,\n    firstFocusableElement,\n    lastFocusableElement,\n    previousFocusableElement,\n    nextFocusableElement,\n} from 'core/pagehelpers';\nimport Pending from 'core/pending';\nimport {\n    hide,\n    unhide,\n} from 'core/aria';\n\nconst Selectors = {\n    mainMenu: '[role=\"menu\"]',\n    dropdownRight: '.dropdown-menu-end',\n    subPanel: '.dropdown-subpanel',\n    subPanelMenuItem: '.dropdown-subpanel > .dropdown-item',\n    subPanelContent: '.dropdown-subpanel > .dropdown-menu',\n    // Drawer selector.\n    drawer: '[data-region=\"fixed-drawer\"]',\n    // Lateral blocks columns selectors.\n    blockColumn: '.blockcolumn',\n    columnLeft: '.columnleft',\n};\n\nconst Classes = {\n    dropRight: 'dropend',\n    dropLeft: 'dropstart',\n    dropDown: 'dropdown',\n    forceLeft: 'downleft',\n    contentDisplayed: 'content-displayed',\n};\n\nconst BootstrapEvents = {\n    hideDropdown: 'hidden.bs.dropdown',\n};\n\nlet initialized = false;\n\n/**\n * Initialize all delegated events into the page.\n */\nconst initPageEvents = () => {\n    if (initialized) {\n        return;\n    }\n    // Hide all subpanels when hidind a dropdown.\n    // This is using JQuery because of BS4 events. JQuery won't be needed with BS5.\n    jQuery(document).on(BootstrapEvents.hideDropdown, () => {\n        document.querySelectorAll(`${Selectors.subPanelContent}.show`).forEach(visibleSubPanel => {\n            const dropdownSubPanel = visibleSubPanel.closest(Selectors.subPanel);\n            const subPanel = new SubPanel(dropdownSubPanel);\n            subPanel.setVisibility(false);\n        });\n    });\n\n    window.addEventListener('resize', debounce(updateAllPanelsPosition, 400));\n\n    initialized = true;\n};\n\n/**\n * Update all the panels position.\n */\nconst updateAllPanelsPosition = () => {\n    document.querySelectorAll(Selectors.subPanel).forEach(dropdown => {\n        const subpanel = new SubPanel(dropdown);\n        subpanel.updatePosition();\n    });\n};\n\n/**\n * Subpanel class.\n * @private\n */\nclass SubPanel {\n    /**\n     * Constructor.\n     * @param {HTMLElement} element The element to initialize.\n     */\n    constructor(element) {\n        this.element = element;\n        this.menuItem = element.querySelector(Selectors.subPanelMenuItem);\n        this.panelContent = element.querySelector(Selectors.subPanelContent);\n        /**\n         * Enable preview when the menu item has focus.\n         *\n         * This is disabled when the user press ESC or shift+TAB to force closing\n         *\n         * @type {Boolean}\n         * @private\n         */\n        this.showPreviewOnFocus = true;\n    }\n\n    /**\n     * Initialize the subpanel element.\n     *\n     * This method adds the event listeners to the subpanel and the position classes.\n     */\n    init() {\n        if (this.element.dataset.subPanelInitialized) {\n            return;\n        }\n\n        this.updatePosition();\n\n        // Full element events.\n        this.element.addEventListener('focusin', this._mainElementFocusInHandler.bind(this));\n        // Menu Item events.\n        this.menuItem.addEventListener('click', this._menuItemClickHandler.bind(this));\n        this.menuItem.addEventListener('keydown', this._menuItemKeyHandler.bind(this));\n        if (!isBehatSite()) {\n            // Behat in Chrome usually move the mouse over the page when trying clicking a subpanel element.\n            // If the menu has more than one subpanel this could cause closing the subpanel by mistake.\n            this.menuItem.addEventListener('mouseover', this._menuItemHoverHandler.bind(this));\n            this.menuItem.addEventListener('mouseout', this._menuItemHoverOutHandler.bind(this));\n        }\n        // Subpanel content events.\n        this.panelContent.addEventListener('keydown', this._panelContentKeyHandler.bind(this));\n\n        this.element.dataset.subPanelInitialized = true;\n    }\n\n    /**\n     * Checks if the subpanel has enough space.\n     *\n     * In general there are two scenarios were the subpanel must be interacted differently:\n     * - Extra small screens: The subpanel is displayed below the menu item.\n     * - Drawer: The subpanel is displayed one of the drawers.\n     * - Block columns: for classic based themes.\n     *\n     * @returns {Boolean} true if the subpanel should be displayed in small screens.\n     */\n    _needSmallSpaceBehaviour() {\n        return isExtraSmall() ||\n            this.element.closest(Selectors.drawer) !== null ||\n            this.element.closest(Selectors.blockColumn) !== null;\n    }\n\n    /**\n     * Check if the subpanel should be displayed on the right.\n     *\n     * This is defined by the drop right boostrap class. However, if the menu is\n     * displayed in a block column on the right, the subpanel should be forced\n     * to the right.\n     *\n     * @returns {Boolean} true if the subpanel should be displayed on the right.\n     */\n    _needDropdownRight() {\n        if (this.element.closest(Selectors.columnLeft) !== null) {\n            return false;\n        }\n        return this.element.closest(Selectors.dropdownRight) !== null;\n    }\n\n    /**\n     * Main element focus in handler.\n     */\n    _mainElementFocusInHandler() {\n        if (this._needSmallSpaceBehaviour() || !this.showPreviewOnFocus) {\n            // Preview is disabled when the user press ESC or shift+TAB to force closing\n            // but if the continue navigating with keyboard the preview is enabled again.\n            this.showPreviewOnFocus = true;\n            return;\n        }\n        this.setVisibility(true);\n    }\n\n    /**\n     * Menu item click handler.\n     * @param {Event} event\n     */\n    _menuItemClickHandler(event) {\n        // Avoid dropdowns being closed after clicking a subemnu.\n        // This won't be needed with BS5 (data-bs-auto-close handles it).\n        event.stopPropagation();\n        event.preventDefault();\n        if (this._needSmallSpaceBehaviour()) {\n            this.setVisibility(!this.getVisibility());\n        }\n    }\n\n    /**\n     * Menu item hover handler.\n     * @private\n     */\n    _menuItemHoverHandler() {\n        if (this._needSmallSpaceBehaviour()) {\n            return;\n        }\n        this.setVisibility(true);\n    }\n\n    /**\n     * Menu item hover out handler.\n     * @private\n     */\n    _menuItemHoverOutHandler() {\n        if (this._needSmallSpaceBehaviour()) {\n            return;\n        }\n        this._hideOtherSubPanels();\n    }\n\n    /**\n     * Menu item key handler.\n     * @param {Event} event\n     * @private\n     */\n    _menuItemKeyHandler(event) {\n        // In small sizes te down key will focus on the panel.\n        if (event.key === 'ArrowUp' || (event.key === 'ArrowDown' && !this._needSmallSpaceBehaviour())) {\n            this.setVisibility(false);\n            return;\n        }\n\n        // Keys to move focus to the panel.\n        let focusPanel = false;\n\n        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft' || (event.key === 'Tab' && !event.shiftKey)) {\n            focusPanel = true;\n        }\n        if ((event.key === 'Enter' || event.key === ' ')) {\n            focusPanel = true;\n        }\n        // In extra small screen the panel is shown below the item.\n        if (event.key === 'ArrowDown' && this._needSmallSpaceBehaviour() && this.getVisibility()) {\n            focusPanel = true;\n        }\n        if (focusPanel) {\n            event.stopPropagation();\n            event.preventDefault();\n            this.setVisibility(true);\n            this._focusPanelContent();\n        }\n\n    }\n\n    /**\n     * Sub panel content key handler.\n     * @param {Event} event\n     * @private\n     */\n    _panelContentKeyHandler(event) {\n        // In extra small devices the panel is displayed under the menu item\n        // so the arrow up/down switch between subpanel and the menu item.\n        const canLoop = !this._needSmallSpaceBehaviour();\n        let isBrowsingSubPanel = false;\n        let newFocus = null;\n        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n            newFocus = this.menuItem;\n        }\n        // Acording to WCAG Esc and Tab are similar to arrow navigation but they\n        // force the subpanel to be closed.\n        if (event.key === 'Escape' || (event.key === 'Tab' && event.shiftKey)) {\n            newFocus = this.menuItem;\n            this.setVisibility(false);\n            this.showPreviewOnFocus = false;\n        }\n        if (event.key === 'ArrowUp') {\n            newFocus = previousFocusableElement(this.panelContent, canLoop);\n            isBrowsingSubPanel = true;\n        }\n        if (event.key === 'ArrowDown') {\n            newFocus = nextFocusableElement(this.panelContent, canLoop);\n            isBrowsingSubPanel = true;\n        }\n        if (event.key === 'Home') {\n            newFocus = firstFocusableElement(this.panelContent);\n            isBrowsingSubPanel = true;\n        }\n        if (event.key === 'End') {\n            newFocus = lastFocusableElement(this.panelContent);\n            isBrowsingSubPanel = true;\n        }\n        // If the user cannot loop and arrive to the start/end of the subpanel\n        // we focus on the menu item.\n        if (newFocus === null && isBrowsingSubPanel && !canLoop) {\n            newFocus = this.menuItem;\n        }\n        if (newFocus !== null) {\n            event.stopPropagation();\n            event.preventDefault();\n            newFocus.focus();\n        }\n    }\n\n    /**\n     * Focus on the first focusable element of the subpanel.\n     * @private\n     */\n    _focusPanelContent() {\n        const pendingPromise = new Pending('core/action_menu/subpanel:focuscontent');\n        // Some Bootstrap events are triggered after the click event.\n        // To prevent this from affecting the focus we wait a bit.\n        setTimeout(() => {\n            const firstFocusable = firstFocusableElement(this.panelContent);\n            if (firstFocusable) {\n                firstFocusable.focus();\n            }\n            pendingPromise.resolve();\n        }, 100);\n    }\n\n    /**\n     * Set the visibility of a subpanel.\n     * @param {Boolean} visible true if the subpanel should be visible.\n     */\n    setVisibility(visible) {\n        if (visible) {\n            this._hideOtherSubPanels();\n        }\n        // Aria hidden/unhidden can alter the focus, we only want to do it when needed.\n        if (!visible && this.getVisibility) {\n            hide(this.panelContent);\n        }\n        if (visible && !this.getVisibility) {\n            unhide(this.panelContent);\n        }\n        this.menuItem.setAttribute('aria-expanded', visible ? 'true' : 'false');\n        this.panelContent.classList.toggle('show', visible);\n        this.element.classList.toggle(Classes.contentDisplayed, visible);\n    }\n\n    /**\n     * Hide all other subpanels in the parent menu.\n     * @private\n     */\n    _hideOtherSubPanels() {\n        const dropdown = this.element.closest(Selectors.mainMenu);\n        dropdown.querySelectorAll(`${Selectors.subPanelContent}.show`).forEach(visibleSubPanel => {\n            const dropdownSubPanel = visibleSubPanel.closest(Selectors.subPanel);\n            if (dropdownSubPanel === this.element) {\n                return;\n            }\n            const subPanel = new SubPanel(dropdownSubPanel);\n            subPanel.setVisibility(false);\n        });\n    }\n\n    /**\n     * Get the visibility of a subpanel.\n     * @returns {Boolean} true if the subpanel is visible.\n     */\n    getVisibility() {\n        return this.menuItem.getAttribute('aria-expanded') === 'true';\n    }\n\n    /**\n     * Update the panels position depending on the screen size and panel position.\n     */\n    updatePosition() {\n        const dropdownRight = this._needDropdownRight();\n        if (this._needSmallSpaceBehaviour()) {\n            this.element.classList.remove(Classes.dropRight);\n            this.element.classList.remove(Classes.dropLeft);\n            this.element.classList.add(Classes.dropDown);\n            this.element.classList.toggle(Classes.forceLeft, dropdownRight);\n            return;\n        }\n        this.element.classList.remove(Classes.dropDown);\n        this.element.classList.remove(Classes.forceLeft);\n        this.element.classList.toggle(Classes.dropRight, !dropdownRight);\n        this.element.classList.toggle(Classes.dropLeft, dropdownRight);\n    }\n}\n\n/**\n * Initialise module for given report\n *\n * @method\n * @param {string} selector The query selector to init.\n */\nexport const init = (selector) => {\n    initPageEvents();\n    const subMenu = document.querySelector(selector);\n    if (!subMenu) {\n        throw new Error(`Sub panel element not found: ${selector}`);\n    }\n    const subPanel = new SubPanel(subMenu);\n    subPanel.init();\n};\n"],"names":["Selectors","Classes","BootstrapEvents","initialized","updateAllPanelsPosition","document","querySelectorAll","forEach","dropdown","SubPanel","updatePosition","constructor","element","menuItem","querySelector","panelContent","showPreviewOnFocus","init","this","dataset","subPanelInitialized","addEventListener","_mainElementFocusInHandler","bind","_menuItemClickHandler","_menuItemKeyHandler","_menuItemHoverHandler","_menuItemHoverOutHandler","_panelContentKeyHandler","_needSmallSpaceBehaviour","closest","_needDropdownRight","setVisibility","event","stopPropagation","preventDefault","getVisibility","_hideOtherSubPanels","key","focusPanel","shiftKey","_focusPanelContent","canLoop","isBrowsingSubPanel","newFocus","focus","pendingPromise","Pending","setTimeout","firstFocusable","resolve","visible","setAttribute","classList","toggle","visibleSubPanel","dropdownSubPanel","getAttribute","dropdownRight","remove","add","selector","on","window","subMenu","Error"],"mappings":"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"}
\ No newline at end of file
diff --git a/lib/amd/build/usermenu.min.js.map b/lib/amd/build/usermenu.min.js.map
index faedd5e1c3b..fc29e62b872 100644
--- a/lib/amd/build/usermenu.min.js.map
+++ b/lib/amd/build/usermenu.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"usermenu.min.js","sources":["../src/usermenu.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Initializes and handles events in the user menu.\n *\n * @module     core/usermenu\n * @copyright  2021 Moodle\n * @author     Mihail Geshoski <mihail@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport $ from 'jquery';\nimport {space, enter} from 'core/key_codes';\n\n/**\n * User menu constants.\n */\nconst selectors = {\n    userMenu: '.usermenu',\n    userMenuCarousel: '.usermenu #usermenu-carousel',\n    userMenuCarouselItem: '.usermenu #usermenu-carousel .carousel-item',\n    userMenuCarouselItemActive: '.usermenu #usermenu-carousel .carousel-item.active',\n    userMenuCarouselNavigationLink: '.usermenu #usermenu-carousel .carousel-navigation-link',\n};\n\n/**\n * Register event listeners.\n */\nconst registerEventListeners = () => {\n    const userMenu = document.querySelector(selectors.userMenu);\n\n    // Handle the 'shown.bs.dropdown' event (Fired when the dropdown menu is fully displayed).\n    $(selectors.userMenu).on('shown.bs.dropdown', () => {\n        const activeCarouselItem = document.querySelector(selectors.userMenuCarouselItemActive);\n        // Set the focus on the active carousel item.\n        activeCarouselItem.focus();\n\n        userMenu.querySelectorAll(selectors.userMenuCarouselItem).forEach(element => {\n            // Resize all non-active carousel items to match the height and width of the current active (main)\n            // carousel item to avoid sizing inconsistencies. This has to be done once the dropdown menu is fully\n            // displayed ('shown.bs.dropdown') as the offsetWidth and offsetHeight cannot be obtained when the\n            // element is hidden.\n            if (!element.classList.contains('active')) {\n                element.style.width = activeCarouselItem.offsetWidth + 'px';\n                element.style.height = activeCarouselItem.offsetHeight + 'px';\n            }\n        });\n    });\n\n    // Handle click events in the user menu.\n    userMenu.addEventListener('click', (e) => {\n\n        // Handle click event on the carousel navigation (control) links in the user menu.\n        if (e.target.matches(selectors.userMenuCarouselNavigationLink)) {\n            carouselManagement(e);\n        }\n    });\n\n    userMenu.addEventListener('keydown', e => {\n        // Handle keydown event on the carousel navigation (control) links in the user menu.\n        if ((e.keyCode === space ||\n            e.keyCode === enter) &&\n            e.target.matches(selectors.userMenuCarouselNavigationLink)) {\n            e.preventDefault();\n            carouselManagement(e);\n        }\n    });\n\n    /**\n     * We do the same actions here even if the caller was a click or button press.\n     *\n     * @param {Event} e The triggering element and key presses etc.\n     */\n    const carouselManagement = e => {\n        // By default the user menu dropdown element closes on a click event. This behaviour is not desirable\n        // as we need to be able to navigate through the carousel items (submenus of the user menu) within the\n        // user menu. Therefore, we need to prevent the propagation of this event and then manually call the\n        // carousel transition.\n        e.stopPropagation();\n        // The id of the targeted carousel item.\n        const targetedCarouselItemId = e.target.dataset.carouselTargetId;\n        const targetedCarouselItem = userMenu.querySelector('#' + targetedCarouselItemId);\n        // Get the position (index) of the targeted carousel item within the parent container element.\n        const index = Array.from(targetedCarouselItem.parentNode.children).indexOf(targetedCarouselItem);\n        // Navigate to the targeted carousel item.\n        $(selectors.userMenuCarousel).carousel(index);\n\n    };\n\n    // Handle the 'hide.bs.dropdown' event (Fired when the dropdown menu is being closed).\n    $(selectors.userMenu).on('hide.bs.dropdown', () => {\n        // Reset the state once the user menu dropdown is closed and return back to the first (main) carousel item\n        // if necessary.\n        $(selectors.userMenuCarousel).carousel(0);\n    });\n\n    // Handle the 'slid.bs.carousel' event (Fired when the carousel has completed its slide transition).\n    $(selectors.userMenuCarousel).on('slid.bs.carousel', () => {\n        const activeCarouselItem = userMenu.querySelector(selectors.userMenuCarouselItemActive);\n        // Set the focus on the newly activated carousel item.\n        activeCarouselItem.focus();\n    });\n};\n\n/**\n * Initialize the user menu.\n */\nconst init = () => {\n    registerEventListeners();\n};\n\nexport default {\n    init: init,\n};\n"],"names":["selectors","init","userMenu","document","querySelector","on","activeCarouselItem","focus","querySelectorAll","forEach","element","classList","contains","style","width","offsetWidth","height","offsetHeight","addEventListener","e","target","matches","carouselManagement","keyCode","space","enter","preventDefault","stopPropagation","targetedCarouselItemId","dataset","carouselTargetId","targetedCarouselItem","index","Array","from","parentNode","children","indexOf","carousel","registerEventListeners"],"mappings":";;;;;;;;mJA8BMA,mBACQ,YADRA,2BAEgB,+BAFhBA,+BAGoB,8CAHpBA,qCAI0B,qDAJ1BA,yCAK8B,sEAyFrB,CACXC,KALS,KA/EkB,YACrBC,SAAWC,SAASC,cAAcJ,wCAGtCA,oBAAoBK,GAAG,qBAAqB,WACpCC,mBAAqBH,SAASC,cAAcJ,sCAElDM,mBAAmBC,QAEnBL,SAASM,iBAAiBR,gCAAgCS,SAAQC,UAKzDA,QAAQC,UAAUC,SAAS,YAC5BF,QAAQG,MAAMC,MAAQR,mBAAmBS,YAAc,KACvDL,QAAQG,MAAMG,OAASV,mBAAmBW,aAAe,YAMrEf,SAASgB,iBAAiB,SAAUC,IAG5BA,EAAEC,OAAOC,QAAQrB,2CACjBsB,mBAAmBH,MAI3BjB,SAASgB,iBAAiB,WAAWC,IAE5BA,EAAEI,UAAYC,kBACfL,EAAEI,UAAYE,mBACdN,EAAEC,OAAOC,QAAQrB,4CACjBmB,EAAEO,iBACFJ,mBAAmBH,aASrBG,mBAAqBH,IAKvBA,EAAEQ,wBAEIC,uBAAyBT,EAAEC,OAAOS,QAAQC,iBAC1CC,qBAAuB7B,SAASE,cAAc,IAAMwB,wBAEpDI,MAAQC,MAAMC,KAAKH,qBAAqBI,WAAWC,UAAUC,QAAQN,0CAEzE/B,4BAA4BsC,SAASN,4BAKzChC,oBAAoBK,GAAG,oBAAoB,yBAGvCL,4BAA4BsC,SAAS,0BAIzCtC,4BAA4BK,GAAG,oBAAoB,KACtBH,SAASE,cAAcJ,sCAE/BO,YAQvBgC"}
\ No newline at end of file
+{"version":3,"file":"usermenu.min.js","sources":["../src/usermenu.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Initializes and handles events in the user menu.\n *\n * @module     core/usermenu\n * @copyright  2021 Moodle\n * @author     Mihail Geshoski <mihail@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport $ from 'jquery';\nimport {space, enter} from 'core/key_codes';\n\n/**\n * User menu constants.\n */\nconst selectors = {\n    userMenu: '.usermenu',\n    userMenuCarousel: '.usermenu #usermenu-carousel',\n    userMenuCarouselItem: '.usermenu #usermenu-carousel .carousel-item',\n    userMenuCarouselItemActive: '.usermenu #usermenu-carousel .carousel-item.active',\n    userMenuCarouselNavigationLink: '.usermenu #usermenu-carousel .carousel-navigation-link',\n};\n\n/**\n * Register event listeners.\n */\nconst registerEventListeners = () => {\n    const userMenu = document.querySelector(selectors.userMenu);\n\n    // Handle the 'shown.bs.dropdown' event (Fired when the dropdown menu is fully displayed).\n    $(selectors.userMenu).on('shown.bs.dropdown', () => {\n        const activeCarouselItem = document.querySelector(selectors.userMenuCarouselItemActive);\n        // Set the focus on the active carousel item.\n        activeCarouselItem.focus();\n\n        userMenu.querySelectorAll(selectors.userMenuCarouselItem).forEach(element => {\n            // Resize all non-active carousel items to match the height and width of the current active (main)\n            // carousel item to avoid sizing inconsistencies. This has to be done once the dropdown menu is fully\n            // displayed ('shown.bs.dropdown') as the offsetWidth and offsetHeight cannot be obtained when the\n            // element is hidden.\n            if (!element.classList.contains('active')) {\n                element.style.width = activeCarouselItem.offsetWidth + 'px';\n                element.style.height = activeCarouselItem.offsetHeight + 'px';\n            }\n        });\n    });\n\n    // Handle click events in the user menu.\n    userMenu.addEventListener('click', (e) => {\n\n        // Handle click event on the carousel navigation (control) links in the user menu.\n        if (e.target.matches(selectors.userMenuCarouselNavigationLink)) {\n            carouselManagement(e);\n        }\n    });\n\n    userMenu.addEventListener('keydown', e => {\n        // Handle keydown event on the carousel navigation (control) links in the user menu.\n        if ((e.keyCode === space ||\n            e.keyCode === enter) &&\n            e.target.matches(selectors.userMenuCarouselNavigationLink)) {\n            e.preventDefault();\n            carouselManagement(e);\n        }\n    });\n\n    /**\n     * We do the same actions here even if the caller was a click or button press.\n     *\n     * @param {Event} e The triggering element and key presses etc.\n     */\n    const carouselManagement = e => {\n        // By default the user menu dropdown element closes on a click event. This behaviour is not desirable\n        // as we need to be able to navigate through the carousel items (submenus of the user menu) within the\n        // user menu. Therefore, we need to prevent the propagation of this event and then manually call the\n        // carousel transition.\n        e.stopPropagation();\n        // The id of the targeted carousel item.\n        const targetedCarouselItemId = e.target.dataset.carouselTargetId;\n        const targetedCarouselItem = userMenu.querySelector('#' + targetedCarouselItemId);\n        // Get the position (index) of the targeted carousel item within the parent container element.\n        const index = Array.from(targetedCarouselItem.parentNode.children).indexOf(targetedCarouselItem);\n        // Navigate to the targeted carousel item.\n        $(selectors.userMenuCarousel).carousel(index);\n    };\n\n    // Handle the 'hide.bs.dropdown' event (Fired when the dropdown menu is being closed).\n    $(selectors.userMenu).on('hide.bs.dropdown', () => {\n        // Reset the state once the user menu dropdown is closed and return back to the first (main) carousel item\n        // if necessary.\n        $(selectors.userMenuCarousel).carousel(0);\n    });\n\n    // Handle the 'slid.bs.carousel' event (Fired when the carousel has completed its slide transition).\n    $(selectors.userMenuCarousel).on('slid.bs.carousel', () => {\n        const activeCarouselItem = userMenu.querySelector(selectors.userMenuCarouselItemActive);\n        // Set the focus on the newly activated carousel item.\n        activeCarouselItem.focus();\n    });\n};\n\n/**\n * Initialize the user menu.\n */\nconst init = () => {\n    registerEventListeners();\n};\n\nexport default {\n    init: init,\n};\n"],"names":["selectors","init","userMenu","document","querySelector","on","activeCarouselItem","focus","querySelectorAll","forEach","element","classList","contains","style","width","offsetWidth","height","offsetHeight","addEventListener","e","target","matches","carouselManagement","keyCode","space","enter","preventDefault","stopPropagation","targetedCarouselItemId","dataset","carouselTargetId","targetedCarouselItem","index","Array","from","parentNode","children","indexOf","carousel","registerEventListeners"],"mappings":";;;;;;;;mJA8BMA,mBACQ,YADRA,2BAEgB,+BAFhBA,+BAGoB,8CAHpBA,qCAI0B,qDAJ1BA,yCAK8B,sEAwFrB,CACXC,KALS,KA9EkB,YACrBC,SAAWC,SAASC,cAAcJ,wCAGtCA,oBAAoBK,GAAG,qBAAqB,WACpCC,mBAAqBH,SAASC,cAAcJ,sCAElDM,mBAAmBC,QAEnBL,SAASM,iBAAiBR,gCAAgCS,SAAQC,UAKzDA,QAAQC,UAAUC,SAAS,YAC5BF,QAAQG,MAAMC,MAAQR,mBAAmBS,YAAc,KACvDL,QAAQG,MAAMG,OAASV,mBAAmBW,aAAe,YAMrEf,SAASgB,iBAAiB,SAAUC,IAG5BA,EAAEC,OAAOC,QAAQrB,2CACjBsB,mBAAmBH,MAI3BjB,SAASgB,iBAAiB,WAAWC,IAE5BA,EAAEI,UAAYC,kBACfL,EAAEI,UAAYE,mBACdN,EAAEC,OAAOC,QAAQrB,4CACjBmB,EAAEO,iBACFJ,mBAAmBH,aASrBG,mBAAqBH,IAKvBA,EAAEQ,wBAEIC,uBAAyBT,EAAEC,OAAOS,QAAQC,iBAC1CC,qBAAuB7B,SAASE,cAAc,IAAMwB,wBAEpDI,MAAQC,MAAMC,KAAKH,qBAAqBI,WAAWC,UAAUC,QAAQN,0CAEzE/B,4BAA4BsC,SAASN,4BAIzChC,oBAAoBK,GAAG,oBAAoB,yBAGvCL,4BAA4BsC,SAAS,0BAIzCtC,4BAA4BK,GAAG,oBAAoB,KACtBH,SAASE,cAAcJ,sCAE/BO,YAQvBgC"}
\ No newline at end of file
diff --git a/lib/amd/src/local/action_menu/subpanel.js b/lib/amd/src/local/action_menu/subpanel.js
index 1c1e5821cec..e916d229aff 100644
--- a/lib/amd/src/local/action_menu/subpanel.js
+++ b/lib/amd/src/local/action_menu/subpanel.js
@@ -39,7 +39,7 @@ import {
 
 const Selectors = {
     mainMenu: '[role="menu"]',
-    dropdownRight: '.dropdown-menu-right',
+    dropdownRight: '.dropdown-menu-end',
     subPanel: '.dropdown-subpanel',
     subPanelMenuItem: '.dropdown-subpanel > .dropdown-item',
     subPanelContent: '.dropdown-subpanel > .dropdown-menu',
@@ -51,8 +51,8 @@ const Selectors = {
 };
 
 const Classes = {
-    dropRight: 'dropright',
-    dropLeft: 'dropleft',
+    dropRight: 'dropend',
+    dropLeft: 'dropstart',
     dropDown: 'dropdown',
     forceLeft: 'downleft',
     contentDisplayed: 'content-displayed',
diff --git a/lib/amd/src/usermenu.js b/lib/amd/src/usermenu.js
index 25d05ca2f4d..ce9b53363b3 100644
--- a/lib/amd/src/usermenu.js
+++ b/lib/amd/src/usermenu.js
@@ -97,7 +97,6 @@ const registerEventListeners = () => {
         const index = Array.from(targetedCarouselItem.parentNode.children).indexOf(targetedCarouselItem);
         // Navigate to the targeted carousel item.
         $(selectors.userMenuCarousel).carousel(index);
-
     };
 
     // Handle the 'hide.bs.dropdown' event (Fired when the dropdown menu is being closed).
diff --git a/lib/classes/output/action_menu.php b/lib/classes/output/action_menu.php
index a7bd78a10a1..f8a67c89a75 100644
--- a/lib/classes/output/action_menu.php
+++ b/lib/classes/output/action_menu.php
@@ -168,7 +168,7 @@ class action_menu implements renderable, templatable {
             'aria-labelledby' => 'action-menu-toggle-' . $this->instance,
             'role' => 'menu',
         ];
-        $this->dropdownalignment = 'dropdown-menu-right';
+        $this->dropdownalignment = 'dropdown-menu-end';
         foreach ($actions as $action) {
             $this->add($action);
         }
@@ -419,7 +419,7 @@ class action_menu implements renderable, templatable {
      *
      */
     public function set_menu_left() {
-        $this->dropdownalignment = 'dropdown-menu-left';
+        $this->dropdownalignment = 'dropdown-menu-start';
     }
 
     /**
diff --git a/lib/classes/output/local/dropdown/dialog.php b/lib/classes/output/local/dropdown/dialog.php
index cf0a20b0cd4..18aa714fd75 100644
--- a/lib/classes/output/local/dropdown/dialog.php
+++ b/lib/classes/output/local/dropdown/dialog.php
@@ -33,8 +33,8 @@ use core\output\renderable;
 class dialog implements named_templatable, renderable {
     /** Dropdown dialog positions. */
     public const POSITION = [
-        'start' => 'dropdown-menu-left',
-        'end' => 'dropdown-menu-right',
+        'start' => 'dropdown-menu-start',
+        'end' => 'dropdown-menu-end',
     ];
 
     /** Dropdown dialog positions. */
diff --git a/lib/templates/action_menu_trigger.mustache b/lib/templates/action_menu_trigger.mustache
index fbe27c74f5a..423d7fd537a 100644
--- a/lib/templates/action_menu_trigger.mustache
+++ b/lib/templates/action_menu_trigger.mustache
@@ -37,7 +37,7 @@
         ],
         "secondary": {
             "classes": "menu  align-tr-br",
-            "dropdownalignment": "dropdown-menu-right",
+            "dropdownalignment": "dropdown-menu-end",
             "attributes": [
                 {"name": "id", "value": "action-menu-0-menu"},
                 {"name": "data-rel", "value": "menu-content"},
diff --git a/lib/templates/local/action_menu/subpanel.mustache b/lib/templates/local/action_menu/subpanel.mustache
index 8899c344273..92d253d7a9d 100644
--- a/lib/templates/local/action_menu/subpanel.mustache
+++ b/lib/templates/local/action_menu/subpanel.mustache
@@ -36,7 +36,7 @@
     }
 }}
 <div
-    class="dropdown-subpanel position-relative dropright"
+    class="dropdown-subpanel position-relative dropend"
     id="{{id}}"
 >
     <a
diff --git a/lib/templates/moremenu.mustache b/lib/templates/moremenu.mustache
index 1da4a578521..04372bbb14a 100644
--- a/lib/templates/moremenu.mustache
+++ b/lib/templates/moremenu.mustache
@@ -59,7 +59,7 @@
             <a class="dropdown-toggle nav-link {{#isactive}}active{{/isactive}}" href="#" id="moremenu-dropdown-{{moremenuid}}" role="{{#istablist}}tab{{/istablist}}{{^istablist}}menuitem{{/istablist}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="-1">
                 {{#str}}moremenu, core{{/str}}
             </a>
-            <ul class="dropdown-menu dropdown-menu-left" data-region="moredropdown" aria-labelledby="moremenu-dropdown-{{moremenuid}}" role="menu">
+            <ul class="dropdown-menu dropdown-menu-start" data-region="moredropdown" aria-labelledby="moremenu-dropdown-{{moremenuid}}" role="menu">
             </ul>
         </li>
     </ul>
diff --git a/lib/templates/user_menu.mustache b/lib/templates/user_menu.mustache
index 6ae3da47c03..fe4c0bc94ed 100644
--- a/lib/templates/user_menu.mustache
+++ b/lib/templates/user_menu.mustache
@@ -72,7 +72,7 @@
                     {{> core/user_menu_metadata }}
                 </span>
             </a>
-            <div id="user-action-menu" class="dropdown-menu dropdown-menu-right">
+            <div id="user-action-menu" class="dropdown-menu dropdown-menu-end">
                 <div id="usermenu-carousel" class="carousel slide" data-touch="false" data-interval="false" data-keyboard="false">
                     <div class="carousel-inner">
                         <div id="carousel-item-main" class="carousel-item active" role="menu" tabindex="-1" aria-label="{{#str}}user{{/str}}">
diff --git a/mod/forum/templates/forum_action_menu.mustache b/mod/forum/templates/forum_action_menu.mustache
index 60d290f07d8..b749c918f5b 100644
--- a/mod/forum/templates/forum_action_menu.mustache
+++ b/mod/forum/templates/forum_action_menu.mustache
@@ -83,7 +83,7 @@
             {{/settings.excludetext}}
         </a>
     {{/settingsselector}}
-    <div class="dropdown-menu dropdown-menu-right"
+    <div class="dropdown-menu dropdown-menu-end"
          aria-labelledby="forum-action-menu-{{id}}-menu"
          data-rel="menu-content"
          role="menu"
diff --git a/mod/forum/templates/forum_discussion_nested_v2_first_post.mustache b/mod/forum/templates/forum_discussion_nested_v2_first_post.mustache
index ff83c668b74..ad6c17690ba 100644
--- a/mod/forum/templates/forum_discussion_nested_v2_first_post.mustache
+++ b/mod/forum/templates/forum_discussion_nested_v2_first_post.mustache
@@ -154,7 +154,7 @@
                                             {{#pix}} i/moremenu {{/pix}}
                                         </button>
                                         <!-- inline style to fix RTL placement bug -->
-                                        <div class="dropdown-menu dropdown-menu-right rounded-3 shadow border-0" aria-labelledby="post-actions-menu-{{id}}-{{uniqid}}" style="right: auto" role="menubar">
+                                        <div class="dropdown-menu dropdown-menu-end rounded-3 shadow border-0" aria-labelledby="post-actions-menu-{{id}}-{{uniqid}}" style="right: auto" role="menubar">
                                             {{#capabilities}}
                                                 {{#view}}
                                                     <a
diff --git a/mod/forum/templates/local/grades/local/grader/navigation.mustache b/mod/forum/templates/local/grades/local/grader/navigation.mustache
index 2ed0257e717..c924ad9f863 100644
--- a/mod/forum/templates/local/grades/local/grader/navigation.mustache
+++ b/mod/forum/templates/local/grades/local/grader/navigation.mustache
@@ -97,7 +97,7 @@
                 >
                     {{#pix}} i/menu, core {{/pix}}
                 </button>
-                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="grader-actions-menu-{{uniqid}}">
+                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="grader-actions-menu-{{uniqid}}">
                     <button
                         class="dropdown-item"
                         type="button"
diff --git a/mod/glossary/templates/standard_action_menu.mustache b/mod/glossary/templates/standard_action_menu.mustache
index c6d597fde59..f529de8772a 100644
--- a/mod/glossary/templates/standard_action_menu.mustache
+++ b/mod/glossary/templates/standard_action_menu.mustache
@@ -138,7 +138,7 @@
                                 ...
                                 <span class="visually-hidden">{{#str}} exportentries, mod_glossary {{/str}}</span>
                             </button>
-                            <div class="dropdown-menu dropdown-menu-right">
+                            <div class="dropdown-menu dropdown-menu-end">
                                 {{#options}}
                                     <a class="dropdown-item" href="{{url}}"
                                     {{#openinnewwindow}}target="_blank"{{/openinnewwindow}}>{{string}}</a>
diff --git a/reportbuilder/templates/local/filters/area.mustache b/reportbuilder/templates/local/filters/area.mustache
index 5249f17f90c..7502011efbd 100644
--- a/reportbuilder/templates/local/filters/area.mustache
+++ b/reportbuilder/templates/local/filters/area.mustache
@@ -37,7 +37,7 @@
     </span>
 </button>
 {{! Filters content }}
-<div class="filters-dropdown dropdown-menu dropdown-menu-right moodle-has-zindex" aria-labelledby="dropdownFiltersButton">
+<div class="filters-dropdown dropdown-menu dropdown-menu-end moodle-has-zindex" aria-labelledby="dropdownFiltersButton">
     <div id="filters" class="reportbuilder-filters-sidebar scroll-shadow" data-region="report-filters">
         <div class="px-3 pt-3">
             {{#filtersform}}
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index 65df71c2bc0..c234d964741 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -2943,6 +2943,8 @@ body.dragging {
     content: none;
 }
 
+
+// TODO: Check if these are still needed.
 .dropleft .dropdown-toggle::before {
     border: 0;
     @extend .fa-solid;
diff --git a/theme/boost/templates/courseindexdrawercontrols.mustache b/theme/boost/templates/courseindexdrawercontrols.mustache
index 4ab622bb0ba..783dc356869 100644
--- a/theme/boost/templates/courseindexdrawercontrols.mustache
+++ b/theme/boost/templates/courseindexdrawercontrols.mustache
@@ -33,7 +33,7 @@
     >
         <i class="icon fa fa-ellipsis-v fa-fw m-0" aria-hidden="true"></i>
     </button>
-    <div class="dropdown-menu dropdown-menu-right">
+    <div class="dropdown-menu dropdown-menu-end">
         <a class="dropdown-item"
            href="#"
            data-action="expandallcourseindexsections"
diff --git a/theme/boost/templates/language_menu.mustache b/theme/boost/templates/language_menu.mustache
index 64d6b47d124..88541372d9c 100644
--- a/theme/boost/templates/language_menu.mustache
+++ b/theme/boost/templates/language_menu.mustache
@@ -50,7 +50,7 @@
             </span>
             <b class="caret"></b>
         </a>
-        <div role="menu" aria-labelledby="lang-menu-toggle" id="lang-action-menu" class="dropdown-menu dropdown-menu-right">
+        <div role="menu" aria-labelledby="lang-menu-toggle" id="lang-action-menu" class="dropdown-menu dropdown-menu-end">
             {{#items}}
                 {{#link}}
                     <a href="{{{url}}}" class="dropdown-item ps-5" role="menuitem" {{#isactive}}aria-current="true"{{/isactive}}
diff --git a/theme/classic/templates/core/user_menu.mustache b/theme/classic/templates/core/user_menu.mustache
index 42c08ba8de9..301bc33a365 100644
--- a/theme/classic/templates/core/user_menu.mustache
+++ b/theme/classic/templates/core/user_menu.mustache
@@ -69,7 +69,7 @@
                     {{> core/user_menu_metadata }}
                 </span>
             </a>
-            <div id="user-action-menu" class="dropdown-menu dropdown-menu-right">
+            <div id="user-action-menu" class="dropdown-menu dropdown-menu-end">
                 <div id="usermenu-carousel" class="carousel slide" data-touch="false" data-interval="false" data-keyboard="false">
                     <div class="carousel-inner">
                         <div id="carousel-item-main" class="carousel-item active" role="menu" tabindex="-1" aria-label="{{#str}}user{{/str}}">