@hummingbirdui/hummingbird
Version:
An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.
366 lines (365 loc) • 15.4 kB
JavaScript
import { b as requireBaseComponent, r as requireEventHandler, c as requireManipulator, a as requireUtil, g as getDefaultExportFromCjs } from "../utils/base-component.js";
import { r as require$$0 } from "../utils/tooltip.js";
import { r as requireSelectorEngine } from "../utils/selector-engine.js";
var dropdown$1 = { exports: {} };
/*!
* Bootstrap dropdown.js v5.3.8 (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
var dropdown = dropdown$1.exports;
var hasRequiredDropdown;
function requireDropdown() {
if (hasRequiredDropdown) return dropdown$1.exports;
hasRequiredDropdown = 1;
(function(module, exports) {
(function(global, factory) {
module.exports = factory(require$$0, requireBaseComponent(), requireEventHandler(), requireManipulator(), requireSelectorEngine(), requireUtil());
})(dropdown, function(Popper, BaseComponent, EventHandler, Manipulator, SelectorEngine, index_js) {
function _interopNamespaceDefault(e) {
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
if (e) {
for (const k in e) {
if (k !== "default") {
const d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: () => e[k]
});
}
}
}
n.default = e;
return Object.freeze(n);
}
const Popper__namespace = /* @__PURE__ */ _interopNamespaceDefault(Popper);
const NAME = "dropdown";
const DATA_KEY = "bs.dropdown";
const EVENT_KEY = `.${DATA_KEY}`;
const DATA_API_KEY = ".data-api";
const ESCAPE_KEY = "Escape";
const TAB_KEY = "Tab";
const ARROW_UP_KEY = "ArrowUp";
const ARROW_DOWN_KEY = "ArrowDown";
const RIGHT_MOUSE_BUTTON = 2;
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_KEYDOWN_DATA_API = `keydown${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`;
const CLASS_NAME_SHOW = "show";
const CLASS_NAME_DROPUP = "dropup";
const CLASS_NAME_DROPEND = "dropend";
const CLASS_NAME_DROPSTART = "dropstart";
const CLASS_NAME_DROPUP_CENTER = "dropup-center";
const CLASS_NAME_DROPDOWN_CENTER = "dropdown-center";
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)';
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`;
const SELECTOR_MENU = ".dropdown-menu";
const SELECTOR_NAVBAR = ".navbar";
const SELECTOR_NAVBAR_NAV = ".navbar-nav";
const SELECTOR_VISIBLE_ITEMS = ".dropdown-menu .dropdown-item:not(.disabled):not(:disabled)";
const PLACEMENT_TOP = index_js.isRTL() ? "top-end" : "top-start";
const PLACEMENT_TOPEND = index_js.isRTL() ? "top-start" : "top-end";
const PLACEMENT_BOTTOM = index_js.isRTL() ? "bottom-end" : "bottom-start";
const PLACEMENT_BOTTOMEND = index_js.isRTL() ? "bottom-start" : "bottom-end";
const PLACEMENT_RIGHT = index_js.isRTL() ? "left-start" : "right-start";
const PLACEMENT_LEFT = index_js.isRTL() ? "right-start" : "left-start";
const PLACEMENT_TOPCENTER = "top";
const PLACEMENT_BOTTOMCENTER = "bottom";
const Default = {
autoClose: true,
boundary: "clippingParents",
display: "dynamic",
offset: [0, 2],
popperConfig: null,
reference: "toggle"
};
const DefaultType = {
autoClose: "(boolean|string)",
boundary: "(string|element)",
display: "string",
offset: "(array|string|function)",
popperConfig: "(null|object|function)",
reference: "(string|element|object)"
};
class Dropdown2 extends BaseComponent {
constructor(element, config) {
super(element, config);
this._popper = null;
this._parent = this._element.parentNode;
this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] || SelectorEngine.prev(this._element, SELECTOR_MENU)[0] || SelectorEngine.findOne(SELECTOR_MENU, this._parent);
this._inNavbar = this._detectNavbar();
}
// Getters
static get Default() {
return Default;
}
static get DefaultType() {
return DefaultType;
}
static get NAME() {
return NAME;
}
// Public
toggle() {
return this._isShown() ? this.hide() : this.show();
}
show() {
if (index_js.isDisabled(this._element) || this._isShown()) {
return;
}
const relatedTarget = {
relatedTarget: this._element
};
const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, relatedTarget);
if (showEvent.defaultPrevented) {
return;
}
this._createPopper();
if ("ontouchstart" in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) {
for (const element of [].concat(...document.body.children)) {
EventHandler.on(element, "mouseover", index_js.noop);
}
}
this._element.focus();
this._element.setAttribute("aria-expanded", true);
this._menu.classList.add(CLASS_NAME_SHOW);
this._element.classList.add(CLASS_NAME_SHOW);
EventHandler.trigger(this._element, EVENT_SHOWN, relatedTarget);
}
hide() {
if (index_js.isDisabled(this._element) || !this._isShown()) {
return;
}
const relatedTarget = {
relatedTarget: this._element
};
this._completeHide(relatedTarget);
}
dispose() {
if (this._popper) {
this._popper.destroy();
}
super.dispose();
}
update() {
this._inNavbar = this._detectNavbar();
if (this._popper) {
this._popper.update();
}
}
// Private
_completeHide(relatedTarget) {
const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget);
if (hideEvent.defaultPrevented) {
return;
}
if ("ontouchstart" in document.documentElement) {
for (const element of [].concat(...document.body.children)) {
EventHandler.off(element, "mouseover", index_js.noop);
}
}
if (this._popper) {
this._popper.destroy();
}
this._menu.classList.remove(CLASS_NAME_SHOW);
this._element.classList.remove(CLASS_NAME_SHOW);
this._element.setAttribute("aria-expanded", "false");
Manipulator.removeDataAttribute(this._menu, "popper");
EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget);
}
_getConfig(config) {
config = super._getConfig(config);
if (typeof config.reference === "object" && !index_js.isElement(config.reference) && typeof config.reference.getBoundingClientRect !== "function") {
throw new TypeError(`${NAME.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);
}
return config;
}
_createPopper() {
if (typeof Popper__namespace === "undefined") {
throw new TypeError("Bootstrap's dropdowns require Popper (https://popper.js.org/docs/v2/)");
}
let referenceElement = this._element;
if (this._config.reference === "parent") {
referenceElement = this._parent;
} else if (index_js.isElement(this._config.reference)) {
referenceElement = index_js.getElement(this._config.reference);
} else if (typeof this._config.reference === "object") {
referenceElement = this._config.reference;
}
const popperConfig = this._getPopperConfig();
this._popper = Popper__namespace.createPopper(referenceElement, this._menu, popperConfig);
}
_isShown() {
return this._menu.classList.contains(CLASS_NAME_SHOW);
}
_getPlacement() {
const parentDropdown = this._parent;
if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) {
return PLACEMENT_RIGHT;
}
if (parentDropdown.classList.contains(CLASS_NAME_DROPSTART)) {
return PLACEMENT_LEFT;
}
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP_CENTER)) {
return PLACEMENT_TOPCENTER;
}
if (parentDropdown.classList.contains(CLASS_NAME_DROPDOWN_CENTER)) {
return PLACEMENT_BOTTOMCENTER;
}
const isEnd = getComputedStyle(this._menu).getPropertyValue("--bs-position").trim() === "end";
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) {
return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP;
}
return isEnd ? PLACEMENT_BOTTOMEND : PLACEMENT_BOTTOM;
}
_detectNavbar() {
return this._element.closest(SELECTOR_NAVBAR) !== null;
}
_getOffset() {
const {
offset
} = this._config;
if (typeof offset === "string") {
return offset.split(",").map((value) => Number.parseInt(value, 10));
}
if (typeof offset === "function") {
return (popperData) => offset(popperData, this._element);
}
return offset;
}
_getPopperConfig() {
const defaultBsPopperConfig = {
placement: this._getPlacement(),
modifiers: [{
name: "preventOverflow",
options: {
boundary: this._config.boundary
}
}, {
name: "offset",
options: {
offset: this._getOffset()
}
}]
};
if (this._inNavbar || this._config.display === "static") {
Manipulator.setDataAttribute(this._menu, "popper", "static");
defaultBsPopperConfig.modifiers = [{
name: "applyStyles",
enabled: false
}];
}
return {
...defaultBsPopperConfig,
...index_js.execute(this._config.popperConfig, [void 0, defaultBsPopperConfig])
};
}
_selectMenuItem({
key,
target
}) {
const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter((element) => index_js.isVisible(element));
if (!items.length) {
return;
}
index_js.getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus();
}
// Static
static jQueryInterface(config) {
return this.each(function() {
const data = Dropdown2.getOrCreateInstance(this, config);
if (typeof config !== "string") {
return;
}
if (typeof data[config] === "undefined") {
throw new TypeError(`No method named "${config}"`);
}
data[config]();
});
}
static clearMenus(event) {
if (event.button === RIGHT_MOUSE_BUTTON || event.type === "keyup" && event.key !== TAB_KEY) {
return;
}
const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN);
for (const toggle of openToggles) {
const context = Dropdown2.getInstance(toggle);
if (!context || context._config.autoClose === false) {
continue;
}
const composedPath = event.composedPath();
const isMenuTarget = composedPath.includes(context._menu);
if (composedPath.includes(context._element) || context._config.autoClose === "inside" && !isMenuTarget || context._config.autoClose === "outside" && isMenuTarget) {
continue;
}
if (context._menu.contains(event.target) && (event.type === "keyup" && event.key === TAB_KEY || /input|select|option|textarea|form/i.test(event.target.tagName))) {
continue;
}
const relatedTarget = {
relatedTarget: context._element
};
if (event.type === "click") {
relatedTarget.clickEvent = event;
}
context._completeHide(relatedTarget);
}
}
static dataApiKeydownHandler(event) {
const isInput = /input|textarea/i.test(event.target.tagName);
const isEscapeEvent = event.key === ESCAPE_KEY;
const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key);
if (!isUpOrDownEvent && !isEscapeEvent) {
return;
}
if (isInput && !isEscapeEvent) {
return;
}
event.preventDefault();
const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || SelectorEngine.next(this, SELECTOR_DATA_TOGGLE)[0] || SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode);
const instance = Dropdown2.getOrCreateInstance(getToggleButton);
if (isUpOrDownEvent) {
event.stopPropagation();
instance.show();
instance._selectMenuItem(event);
return;
}
if (instance._isShown()) {
event.stopPropagation();
instance.hide();
getToggleButton.focus();
}
}
}
EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_DATA_TOGGLE, Dropdown2.dataApiKeydownHandler);
EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_MENU, Dropdown2.dataApiKeydownHandler);
EventHandler.on(document, EVENT_CLICK_DATA_API, Dropdown2.clearMenus);
EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown2.clearMenus);
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function(event) {
event.preventDefault();
Dropdown2.getOrCreateInstance(this).toggle();
});
index_js.defineJQueryPlugin(Dropdown2);
return Dropdown2;
});
})(dropdown$1);
return dropdown$1.exports;
}
var dropdownExports = requireDropdown();
const BsDropdown = /* @__PURE__ */ getDefaultExportFromCjs(dropdownExports);
var DropdownEvents = /* @__PURE__ */ ((DropdownEvents2) => {
DropdownEvents2["SHOW"] = "show.bs.dropdown";
DropdownEvents2["SHOWN"] = "shown.bs.dropdown";
DropdownEvents2["HIDE"] = "hide.bs.dropdown";
DropdownEvents2["HIDDEN"] = "hidden.bs.dropdown";
return DropdownEvents2;
})(DropdownEvents || {});
const Dropdown = BsDropdown;
Dropdown.Events = DropdownEvents;
export {
Dropdown as default
};
//# sourceMappingURL=dropdown.js.map