Merge branch 'main' into main-lmp-api-change-responsive-values

Orange-OpenSource · Sep 5, 2022 · 95dbb37 · 95dbb37
2 parents 0ce84a4 + 7022542
commit 95dbb37
Show file tree

Hide file tree

Showing 60 changed files with 957 additions and 555 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
  },
  {
  "path": "./dist/css/boosted.css",
- "maxSize": "36.5 kB"
+ "maxSize": "36.75 kB"
  },
  {
  "path": "./dist/css/boosted.min.css",
- "maxSize": "33.5 kB"
+ "maxSize": "33.75 kB"
  },
  {
  "path": "./dist/js/boosted.bundle.js",
@@ -50,7 +50,7 @@
  },
  {
  "path": "./dist/js/boosted.js",
- "maxSize": "33.75 kB"
+ "maxSize": "34.0 kB"
  },
  {
  "path": "./dist/js/boosted.min.js",

diff --git a/.cspell.json b/.cspell.json
@@ -85,12 +85,12 @@
  "offcanvas",
  "offcanvases",
  "opensource",
+ "paginations",
  "Packagist",
  "pinterest",
  "popperjs",
  "Poupard",
  "prebuild",
- "precompiled",
  "preconnect",
  "preconnecting",
  "prefersreducedmotion",

diff --git a/config.yml b/config.yml
@@ -97,8 +97,8 @@ params:
  js_hash: "sha384-GBfyQzRj/34bRvjbWfsgvYvEqkV+YniZdXAuu66ZVhSPIdzVzVouXBJBjpd58tcY"
  js_bundle: "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boosted.bundle.min.js"
  js_bundle_hash: "sha384-NkAB+hiFHsv6dxwL0C4lJtfq1RblxY6+DRFn5QZDpgCdwB5RiOGjaJB0Weq0uCy3"
- popper: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected].5/dist/umd/popper.min.js"
- popper_hash: "sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
+ popper: "https://cdn.jsdelivr.net/npm/@popperjs/[email protected].6/dist/umd/popper.min.js"
+ popper_hash: "sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
  focus_visible: "https://cdn.jsdelivr.net/npm/[email protected]/dist/focus-visible.min.js"
  focus_visible_hash: "sha384-xRa5B8rCDfdg0npZcxAh+RXswrbFk3g6dlHVeABeluN8EIwdyljz/LqJgc2R3KNA"
 

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
@@ -95,7 +95,8 @@ class Dropdown extends BaseComponent {
 
  this._popper = null
  this._parent = this._element.parentNode // dropdown wrapper
- this._menu = SelectorEngine.findOne(SELECTOR_MENU, this._parent)
+ // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/
+ this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] || SelectorEngine.prev(this._element, SELECTOR_MENU)[0]
  this._inNavbar = this._detectNavbar()
  }
 
@@ -405,7 +406,8 @@ class Dropdown extends BaseComponent {
 
  event.preventDefault()
 
- const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode)
+ // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/
+ const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || SelectorEngine.next(this, SELECTOR_DATA_TOGGLE)[0]
  const instance = Dropdown.getOrCreateInstance(getToggleButton)
 
  if (isUpOrDownEvent) {

diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
@@ -1458,6 +1458,67 @@ describe('Dropdown', () => {
  })
  })
 
+ it('should be able to identify clicked dropdown, even with multiple dropdowns in the same tag', () => {
+ fixtureEl.innerHTML = [
+ '<div class="dropdown">',
+ ' <button id="dropdown1" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>',
+ ' <div id="menu1" class="dropdown-menu">',
+ ' <a class="dropdown-item" href="#">Dropdown item</a>',
+ ' </div>',
+ ' <button id="dropdown2" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>',
+ ' <div id="menu2" class="dropdown-menu">',
+ ' <a class="dropdown-item" href="#">Dropdown item</a>',
+ ' </div>',
+ '</div>'
+ ].join('')
+
+ const dropdownToggle1 = fixtureEl.querySelector('#dropdown1')
+ const dropdownToggle2 = fixtureEl.querySelector('#dropdown2')
+ const dropdownMenu1 = fixtureEl.querySelector('#menu1')
+ const dropdownMenu2 = fixtureEl.querySelector('#menu2')
+ const spy = spyOn(Dropdown, 'getOrCreateInstance').and.callThrough()
+
+ dropdownToggle1.click()
+ expect(spy).toHaveBeenCalledWith(dropdownToggle1)
+
+ dropdownToggle2.click()
+ expect(spy).toHaveBeenCalledWith(dropdownToggle2)
+
+ dropdownMenu1.click()
+ expect(spy).toHaveBeenCalledWith(dropdownToggle1)
+
+ dropdownMenu2.click()
+ expect(spy).toHaveBeenCalledWith(dropdownToggle2)
+ })
+
+ it('should be able to show the proper menu, even with multiple dropdowns in the same tag', () => {
+ fixtureEl.innerHTML = [
+ '<div class="dropdown">',
+ ' <button id="dropdown1" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>',
+ ' <div id="menu1" class="dropdown-menu">',
+ ' <a class="dropdown-item" href="#">Dropdown item</a>',
+ ' </div>',
+ ' <button id="dropdown2" class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown toggle</button>',
+ ' <div id="menu2" class="dropdown-menu">',
+ ' <a class="dropdown-item" href="#">Dropdown item</a>',
+ ' </div>',
+ '</div>'
+ ].join('')
+
+ const dropdownToggle1 = fixtureEl.querySelector('#dropdown1')
+ const dropdownToggle2 = fixtureEl.querySelector('#dropdown2')
+ const dropdownMenu1 = fixtureEl.querySelector('#menu1')
+ const dropdownMenu2 = fixtureEl.querySelector('#menu2')
+
+ dropdownToggle1.click()
+ expect(dropdownMenu1).toHaveClass('show')
+ expect(dropdownMenu2).not.toHaveClass('show')
+
+ dropdownToggle2.click()
+ expect(dropdownMenu1).not.toHaveClass('show')
+ expect(dropdownMenu2).toHaveClass('show')
+ })
+
  it('should fire hide and hidden event without a clickEvent if event type is not click', () => {
  return new Promise(resolve => {
  fixtureEl.innerHTML = [