inclusive-elements 0.5.0-beta.2 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -14,7 +14,9 @@ const n = class n extends HTMLElement {
|
|
|
14
14
|
e(this, "cleanup");
|
|
15
15
|
e(this, "prevInnerHTML");
|
|
16
16
|
e(this, "tabPressed", !1);
|
|
17
|
-
e(this, "onMouseEnter",
|
|
17
|
+
e(this, "onMouseEnter", () => {
|
|
18
|
+
window.matchMedia("(hover: hover) and (pointer: fine)").matches && this.afterDelay(this.show);
|
|
19
|
+
});
|
|
18
20
|
e(this, "onFocus", () => {
|
|
19
21
|
this.tabPressed && this.show();
|
|
20
22
|
});
|
|
@@ -65,7 +67,7 @@ const n = class n extends HTMLElement {
|
|
|
65
67
|
}
|
|
66
68
|
hide() {
|
|
67
69
|
var t;
|
|
68
|
-
clearTimeout(this.timeout), (t = this.cleanup) == null || t.call(this), this.showing && (this.showing = !1, f(this.tooltip).then(() => {
|
|
70
|
+
clearTimeout(this.timeout), (t = this.cleanup) == null || t.call(this), this.showing && (this.showing = !1, this.tooltip && f(this.tooltip).then(() => {
|
|
69
71
|
this.tooltip && (this.tooltip.hidden = !0);
|
|
70
72
|
}), this.dispatchEvent(new Event("close")));
|
|
71
73
|
}
|
|
@@ -1,29 +1,31 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { autoUpdate as
|
|
5
|
-
import { cancel as
|
|
6
|
-
import { focusable as
|
|
7
|
-
import { shouldOpenInNewTab as
|
|
8
|
-
class
|
|
1
|
+
var l = Object.defineProperty;
|
|
2
|
+
var f = (a, s, t) => s in a ? l(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
|
|
3
|
+
var h = (a, s, t) => (f(a, typeof s != "symbol" ? s + "" : s, t), t);
|
|
4
|
+
import { autoUpdate as b, computePosition as m, shift as k, flip as g, size as v } from "@floating-ui/dom";
|
|
5
|
+
import { cancel as u, hello as d, goodbye as p } from "hello-goodbye";
|
|
6
|
+
import { focusable as w } from "tabbable";
|
|
7
|
+
import { shouldOpenInNewTab as y } from "./inclusive-elements11.js";
|
|
8
|
+
class D extends HTMLElement {
|
|
9
9
|
constructor() {
|
|
10
10
|
super();
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
!
|
|
11
|
+
h(this, "cleanup");
|
|
12
|
+
h(this, "onButtonClick", (t) => {
|
|
13
|
+
!y(t) && !this.disabled && (this.open = !this.open, t.preventDefault());
|
|
14
14
|
});
|
|
15
|
-
|
|
15
|
+
h(this, "onButtonKeyDown", (t) => {
|
|
16
16
|
var e;
|
|
17
|
-
t.key === "ArrowDown" && !this.disabled && (t.preventDefault(), this.open = !0, (e =
|
|
17
|
+
t.key === "ArrowDown" && !this.disabled && (t.preventDefault(), this.open = !0, this.content && ((e = w(this.content)[0]) == null || e.focus()));
|
|
18
18
|
});
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
h(this, "onKeyDown", (t) => {
|
|
20
|
+
var e;
|
|
21
|
+
t.key === "Escape" && this.open && (t.preventDefault(), t.stopPropagation(), this.open = !1, (e = this.button) == null || e.focus());
|
|
21
22
|
});
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
h(this, "onFocusOut", (t) => {
|
|
24
|
+
t.relatedTarget instanceof Node && !this.contains(t.relatedTarget) && (this.open = !1);
|
|
24
25
|
});
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
h(this, "onContentClick", (t) => {
|
|
27
|
+
var e;
|
|
28
|
+
t.target instanceof Element && t.target.closest("[role=menuitem], [role=menuitemradio]") && (this.open = !1, (e = this.button) == null || e.focus(), t.stopPropagation());
|
|
27
29
|
});
|
|
28
30
|
const t = document.createElement("template");
|
|
29
31
|
t.innerHTML = `
|
|
@@ -35,12 +37,18 @@ class A extends HTMLElement {
|
|
|
35
37
|
return ["open"];
|
|
36
38
|
}
|
|
37
39
|
connectedCallback() {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
40
|
+
var t, e, n, o;
|
|
41
|
+
this.backdrop.hidden = !this.open, this.content && (this.content.hidden = !this.open), (t = this.button) == null || t.setAttribute(
|
|
42
|
+
"aria-expanded",
|
|
43
|
+
this.open ? "true" : "false"
|
|
44
|
+
), setTimeout(() => {
|
|
45
|
+
var i, c;
|
|
46
|
+
((i = this.content) == null ? void 0 : i.getAttribute("role")) === "menu" && ((c = this.button) == null || c.setAttribute("aria-haspopup", "true"));
|
|
47
|
+
}), (e = this.button) == null || e.addEventListener("click", this.onButtonClick), (n = this.button) == null || n.addEventListener("keydown", this.onButtonKeyDown), this.addEventListener("keydown", this.onKeyDown), this.addEventListener("focusout", this.onFocusOut), (o = this.content) == null || o.addEventListener("click", this.onContentClick);
|
|
41
48
|
}
|
|
42
49
|
disconnectedCallback() {
|
|
43
|
-
|
|
50
|
+
var t, e, n, o, i;
|
|
51
|
+
u(this.backdrop), this.content && u(this.content), (t = this.button) == null || t.removeAttribute("aria-expanded"), (e = this.button) == null || e.removeAttribute("aria-haspopup"), (n = this.button) == null || n.removeEventListener("click", this.onButtonClick), (o = this.button) == null || o.removeEventListener("keydown", this.onButtonKeyDown), this.removeEventListener("keydown", this.onKeyDown), this.removeEventListener("focusout", this.onFocusOut), (i = this.content) == null || i.removeEventListener("click", this.onContentClick);
|
|
44
52
|
}
|
|
45
53
|
get open() {
|
|
46
54
|
return this.hasAttribute("open");
|
|
@@ -51,52 +59,57 @@ class A extends HTMLElement {
|
|
|
51
59
|
get disabled() {
|
|
52
60
|
return this.hasAttribute("disabled");
|
|
53
61
|
}
|
|
54
|
-
attributeChangedCallback(t, e,
|
|
55
|
-
t === "open" && (
|
|
62
|
+
attributeChangedCallback(t, e, n) {
|
|
63
|
+
t === "open" && (n !== null ? this.wasOpened() : this.wasClosed());
|
|
56
64
|
}
|
|
57
65
|
wasOpened() {
|
|
58
|
-
|
|
66
|
+
var e, n;
|
|
67
|
+
if (!((e = this.content) != null && e.hidden))
|
|
59
68
|
return;
|
|
60
|
-
this.content.hidden = !1, this.content.style.position = "fixed", this.backdrop.hidden = !1,
|
|
69
|
+
this.content.hidden = !1, this.content.style.position = "fixed", this.backdrop.hidden = !1, d(this.content), d(this.backdrop), (n = this.button) == null || n.setAttribute("aria-expanded", "true"), this.button && (this.cleanup = b(
|
|
61
70
|
this.button,
|
|
62
71
|
this.content,
|
|
63
72
|
() => {
|
|
64
|
-
|
|
73
|
+
!this.button || !this.content || m(this.button, this.content, {
|
|
65
74
|
strategy: "fixed",
|
|
66
75
|
placement: this.getAttribute("placement") || "bottom",
|
|
67
76
|
middleware: [
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
77
|
+
k(),
|
|
78
|
+
g(),
|
|
79
|
+
v({
|
|
71
80
|
apply: ({
|
|
72
|
-
availableWidth:
|
|
81
|
+
availableWidth: o,
|
|
73
82
|
availableHeight: i,
|
|
74
|
-
placement:
|
|
83
|
+
placement: c
|
|
75
84
|
}) => {
|
|
76
|
-
|
|
85
|
+
if (!this.content)
|
|
86
|
+
return;
|
|
87
|
+
this.content.dataset.placement = c, Object.assign(this.content.style, {
|
|
77
88
|
maxWidth: "",
|
|
78
89
|
maxHeight: ""
|
|
79
90
|
});
|
|
80
|
-
const
|
|
81
|
-
|
|
91
|
+
const r = getComputedStyle(
|
|
92
|
+
this.content
|
|
93
|
+
);
|
|
94
|
+
o -= parseInt(r.marginLeft) + parseInt(r.marginRight), (r.maxWidth === "none" || o < parseInt(r.maxWidth)) && (this.content.style.maxWidth = `${o}px`), i -= parseInt(r.marginTop) + parseInt(r.marginBottom), (r.maxHeight === "none" || i < parseInt(r.maxHeight)) && (this.content.style.maxHeight = `${i}px`);
|
|
82
95
|
}
|
|
83
96
|
})
|
|
84
97
|
]
|
|
85
|
-
}).then(({ x:
|
|
86
|
-
Object.assign(this.content.style, {
|
|
87
|
-
left: `${
|
|
98
|
+
}).then(({ x: o, y: i }) => {
|
|
99
|
+
this.content && Object.assign(this.content.style, {
|
|
100
|
+
left: `${o}px`,
|
|
88
101
|
top: `${i}px`
|
|
89
102
|
});
|
|
90
103
|
});
|
|
91
104
|
},
|
|
92
105
|
{ ancestorScroll: !1 }
|
|
93
|
-
);
|
|
106
|
+
));
|
|
94
107
|
const t = this.content.querySelector("[autofocus]");
|
|
95
108
|
t ? t.focus() : this.content.focus(), this.dispatchEvent(new Event("open"));
|
|
96
109
|
}
|
|
97
110
|
wasClosed() {
|
|
98
|
-
var t;
|
|
99
|
-
this.content.hidden || (this.button.setAttribute("aria-expanded", "false"), (
|
|
111
|
+
var t, e, n;
|
|
112
|
+
(t = this.content) != null && t.hidden || ((e = this.button) == null || e.setAttribute("aria-expanded", "false"), (n = this.cleanup) == null || n.call(this), p(this.backdrop).then(() => this.backdrop.hidden = !0), this.content && p(this.content).then(() => this.content.hidden = !0), this.dispatchEvent(new Event("close")));
|
|
100
113
|
}
|
|
101
114
|
get backdrop() {
|
|
102
115
|
var t;
|
|
@@ -110,5 +123,5 @@ class A extends HTMLElement {
|
|
|
110
123
|
}
|
|
111
124
|
}
|
|
112
125
|
export {
|
|
113
|
-
|
|
126
|
+
D as default
|
|
114
127
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "inclusive-elements",
|
|
3
|
-
"version": "0.5.0
|
|
3
|
+
"version": "0.5.0",
|
|
4
4
|
"description": "Accessible, lightweight, unstyled implementations of common UI controls.",
|
|
5
5
|
"module": "dist/inclusive-elements.js",
|
|
6
6
|
"type": "module",
|
|
@@ -18,17 +18,17 @@
|
|
|
18
18
|
"release": "release-it"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@floating-ui/dom": "^1.
|
|
22
|
-
"focus-trap": "^7.5
|
|
23
|
-
"hello-goodbye": "^0.2.
|
|
21
|
+
"@floating-ui/dom": "^1.7.4",
|
|
22
|
+
"focus-trap": "^7.6.5",
|
|
23
|
+
"hello-goodbye": "^0.2.2",
|
|
24
24
|
"tabbable": "^6.2.0"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@release-it/conventional-changelog": "^5.1.1",
|
|
28
28
|
"prettier": "^2.8.8",
|
|
29
29
|
"release-it": "^15.11.0",
|
|
30
|
-
"typescript": "^5.
|
|
31
|
-
"vite": "^4.
|
|
30
|
+
"typescript": "^5.9.2",
|
|
31
|
+
"vite": "^4.5.14"
|
|
32
32
|
},
|
|
33
33
|
"release-it": {
|
|
34
34
|
"git": {
|
|
@@ -52,5 +52,6 @@
|
|
|
52
52
|
},
|
|
53
53
|
"prettier": {
|
|
54
54
|
"singleQuote": true
|
|
55
|
-
}
|
|
55
|
+
},
|
|
56
|
+
"packageManager": "pnpm@10.17.1+sha512.17c560fca4867ae9473a3899ad84a88334914f379be46d455cbf92e5cf4b39d34985d452d2583baf19967fa76cb5c17bc9e245529d0b98745721aa7200ecaf7a"
|
|
56
57
|
}
|