Fix handling of transitionend events dispatched by nested elements
Properly handle events from nested elements
Change `emulateTransitionEnd` to `executeAfterTransition` &&
The current config can cause the "body" to become stale. Specifically,
if the entire body element is swapped out for a new body element, then
the backdrop will continue to append itself to the original body element,
since it's stored in memory as a reference on this object.
This also no longer allows an explicit null to be passed to Backdrop's rootElement
This still accomplishes the laziness of "not finding the rootElement
until the Backdrop is created" to avoid problems of the JavaScript
being included inside <head> (so, before body is available).
Looking around on js components I found out many checks, different expressed but with same purpose.
Some of them are trying to parse string to element, others, jQuery element to js simple nodeElement etc
With this Pr, I am trying to give a standard way to parse an element
So this pr:
* Creates `getElement` helper that tries to parse an argument to element or null
* Changes `isElement` to make explicit checks and return Boolean
* fixes tests deficiencies
* Force each plugin that extends base-components to implement a static method `NAME()`
* Remove redundant `NAME` argument from 'Utils.defineJQueryPlugin' & fix test
* test: add test if user clicks on input not contained within dropdown-menu
* fix: click on inputs that are not contained within dropdown-menu prevent dropdown from closing
Moves more functionality to `base-component`, transferring the responsibility of disposal to parent class.
Each component, dusting disposal, sets its protected properties to `null`. So the same can be done in one place for all children components .
* Initialize default value of rootElement before using
* Remove redundant test | put rootElement tests together
Co-authored-by: GeoSot <geo.sotis@gmail.com>
- Since bootstrap is not changing the default value of `elementContext`
option, changing the value of `altBoundary` option is not needed for
any modifier in real
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* test: update spec for sibling adjacent mouseenter/mouseleave events
there is a regression introduced by #33310 - this would have catched that
* fix: fixup regression for mouseenter/mouseleave events introduced by #33310
the old logic only worked for parent-child movement since it checked for the relatedTarget to contain the delegateTarget - this should be fixed with this
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* respect /share modal's backdrop functionality, keeping consistency
* listen click events over backdrop (only) and trigger `hide()` without add/remove event tricks
* achieve to hide foreign open offcanvas instances without glitches `if (allReadyOpen && allReadyOpen !== target)`, in case another is going to be open, when user clicks on trigger button
* Create backdrop.js util
* revert breaking changes
remove PromiseTimout usage
revert class name
* one more test | change bundlewatch.config
* add config obj to backdrop helper | tests for rootElement | use transitionend helper
* Minor tweaks — Renaming
Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>
After some research, I found out that EventHandler saves all the custom events per element using namespace, and is capable of removing handlers using only the element and its namespace (`DATA_KEY`).
So, probably is better to utilize the base-component to do the same job.
* remove stopPropagation from button click event
* test for delegated click events
* ensure button children can open menu
* test to ensure clicking button opens the menu
* check current element and parents
* allow dropdown form click events to bubble
* Update docs to use new .show behavior and clarify some copy for first example
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* show() should bail if the trigger has `disabled` attribute
* use 'isDisabled' helper
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Accept data-bs-body option in the configuration object as well
Tweak jqueryInterface, add some more tests
* Fix Markdown table formatting and tweak the wording on backdrop
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add a new offcanvas component
* offcanvas.js: switch to string constants and `event.key`
* Remove unneeded code
* Sass optimizations
* Fixes
Make sure the element is hidden and not offscreen when inactive
fix close icon negative margins
Add content in right & bottom examples
Re-fix bottom offcanvas height not to cover all viewport
* Wording tweaks
* update tests and offcanvas class
* separate scrollbar functionality and use it in offcanvas
* Update .bundlewatch.config.json
* fix focus
* update btn-close / fix focus on close
* add aria-modal and role
return focus on trigger when offcanvas is closed
change body scrolling timings
* move common code to reusable functions
* add aria-labelledby
* Replace lorem ipsum text
* fix focus when offcanvas is closed
* updates
* revert modal, add tests for scrollbar
* show backdrop by default
* Update offcanvas.md
* Update offcanvas CSS to better match modals
- Add background-clip for borders
- Move from outline to border (less clever, more consistent)
- Add scss-docs in vars
* Revamp offcanvas docs
- Add static example to show and explain the components
- Split live examples and rename them
- Simplify example content
- Expand docs notes elsewhere
- Add sass docs
* Add .offcanvas-title instead of .modal-title
* Rename offcanvas example to offcanvas-navbar to reflect it's purpose
* labelledby references title and not header
* Add default shadow to offcanvas
* enable offcanvas-body to fill all the remaining wrapper area
* Be more descriptive, on Accessibility area
* remove redundant classes
* ensure in case of an already open offcanvas, not to open another one
* bring back backdrop|scroll combinations
* bring back toggling class
* refactor scrollbar method, plus tests
* add check if element is not full-width, according to #30621
* revert all in modal
* use documentElement innerWidth
* Rename classes to -start and -end
Also copyedit some docs wording
* omit some things on scrollbar
* PASS BrowserStack tests
-- IOS devices, Android devices and Browsers on Mac, hide scrollbar by default and appear it, only while scrolling.
* Rename '_handleClosing' to '_addEventListeners'
* change pipe usage to comma
* change Data.getData to Data.get
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
* modal: don't add margin & padding when sticky is not full width
* Check if element is shorter than window
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>
The test method on regexes behaves different than the match method on strings in the presence of the global modifier.
Add a unit test for sanitizing the same template twice.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add function type for `popperConfig` option
* Update .bundlewatch.config.json
* copy edits
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Create the popper instance first
Make sure that popper instance has been created first and then apply the
styling on the dropdown(menu)
* Use `data-bs-popper` attibute to check popper
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Removes the &[style] selector that was used for resetting Popper styles
- Separate Popper-based alignment from static alignment with `data-bs-popover` attribute that separates the --bs-position and custom right/left properties
Co-Authored-By: Rohit Sharma <rohit2sharma95@gmail.com>
* added checks to getSelector in util to prevent returning hrefs that are invalid selectors
* restored compatibility for the class selector and added test cases for keeping urls from being returned as a selector
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Emit events on the dropdown button
Emit the events on `.dropdown-toggle` button and then bubble up
* Add migration note for events
* Update the docs for events
* Add unit test to check the event bubbling
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Remove the margin from dropdown in favor of Popper
- Set the default margin to 0 for dropdowns (To remove the Popper's warning)
- Set the required offset in dropdown's defaults
* Remove the margin from the popover component
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* tooltip: move common code to a reusable function
* tooltip: return early in `show()`
Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Change from Error to TypeError
* Convert the `NAME` to upper case to make the consistency in the error message
* Update the remaining tests to be stricter
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Adds the ability to use objects implementing the virtual element interface as the value for the reference option of a dropdown config.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
The default Popper `fallbackPlacements` value is `[oppositePlacement]`.
- The default value was previously (in v4) `'flip'` that can be achieved by passing the single value in the array, like — `[oppositePlacement]`. Keeping `null` also sets the `fallbackPlacements` to `[oppositePlacement]` (Default value in Popper)
- It's better to have **clockwise** (`['top', 'right', 'bottom', 'left']`) fallback options so that tooltip/popover can be placed to another side even if the opposite placement doesn't fit.
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
