@nysds/nys-dropdownmenu 1.19.1 → 1.19.2
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.
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import "./nys-dropdownmenuitem";
|
|
3
|
+
/**
|
|
4
|
+
* Dropdown menus enable users to select an action from a list of options.
|
|
5
|
+
* They’re commonly used to save space by grouping related actions, or to provide actions in a confined space.
|
|
6
|
+
*
|
|
7
|
+
* @summary Action menu with auto-positioning, keyboard support, and screen reader integration.
|
|
8
|
+
* @element nys-dropdownmenu
|
|
9
|
+
*
|
|
10
|
+
* @example Basic dropdown
|
|
11
|
+
* ```html
|
|
12
|
+
* <button id="my-trigger">Actions</button>
|
|
13
|
+
* <nys-dropdownmenu for="my-trigger">
|
|
14
|
+
* <nys-dropdownmenuitem label="Edit" link="/edit"></nys-dropdownmenuitem>
|
|
15
|
+
* <nys-dropdownmenuitem label="Delete" link="/delete"></nys-dropdownmenuitem>
|
|
16
|
+
* </nys-dropdownmenu>
|
|
17
|
+
* ```
|
|
18
|
+
*
|
|
19
|
+
* @example Positioned dropdown
|
|
20
|
+
* ```html
|
|
21
|
+
* <button id="settings-btn">Settings</button>
|
|
22
|
+
* <nys-dropdownmenu for="settings-btn" position="top-start">
|
|
23
|
+
* <nys-dropdownmenuitem label="Profile" link="/profile"></nys-dropdownmenuitem>
|
|
24
|
+
* <nys-dropdownmenuitem label="Logout" link="/logout"></nys-dropdownmenuitem>
|
|
25
|
+
* </nys-dropdownmenu>
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
type Position = "bottom-start" | "bottom-end" | "top-start" | "top-end";
|
|
29
|
+
export declare class NysDropdownMenu extends LitElement {
|
|
30
|
+
static styles: import("lit").CSSResult;
|
|
31
|
+
for: string;
|
|
32
|
+
showDropdown: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Accessible label for the menu. Used as `aria-label` on the `<ul role="menu">` element.
|
|
35
|
+
* @default ""
|
|
36
|
+
*/
|
|
37
|
+
label: string;
|
|
38
|
+
/**
|
|
39
|
+
* Preferred position relative to trigger.
|
|
40
|
+
* @default "bottom-end"
|
|
41
|
+
*/
|
|
42
|
+
position: Position | null;
|
|
43
|
+
private _trigger;
|
|
44
|
+
private _menuElement;
|
|
45
|
+
private _ariaTarget;
|
|
46
|
+
private _lastFocusedIndex;
|
|
47
|
+
private readonly GAP;
|
|
48
|
+
private _resizeObserver;
|
|
49
|
+
/**
|
|
50
|
+
* Lifecycle Methods
|
|
51
|
+
* --------------------------------------------------------------------------
|
|
52
|
+
*/
|
|
53
|
+
constructor();
|
|
54
|
+
connectedCallback(): void;
|
|
55
|
+
disconnectedCallback(): void;
|
|
56
|
+
firstUpdated(): Promise<void>;
|
|
57
|
+
/**
|
|
58
|
+
* Functions
|
|
59
|
+
* --------------------------------------------------------------------------
|
|
60
|
+
*/
|
|
61
|
+
private _findTrigger;
|
|
62
|
+
private _connectTrigger;
|
|
63
|
+
private _toggleDropdown;
|
|
64
|
+
private _closeDropdown;
|
|
65
|
+
private _getMenuItems;
|
|
66
|
+
private _handleDocumentClick;
|
|
67
|
+
private _focusOnItem;
|
|
68
|
+
private applyInverseTransform;
|
|
69
|
+
/**
|
|
70
|
+
* Position Logic
|
|
71
|
+
* --------------------------------------------------------------------------
|
|
72
|
+
*/
|
|
73
|
+
/**
|
|
74
|
+
* The controller function for positioning the dropdown menu.
|
|
75
|
+
* The logic diverts to if user sets position or we auto position the dropdown menu
|
|
76
|
+
*/
|
|
77
|
+
private _positionMenu;
|
|
78
|
+
private _setUserPosition;
|
|
79
|
+
/**
|
|
80
|
+
* Auto Positioning of the dropdown menu relies on the best surrounding space available
|
|
81
|
+
* to select the desirable position.
|
|
82
|
+
*/
|
|
83
|
+
private _autoPosition;
|
|
84
|
+
/**
|
|
85
|
+
* Checks if the dropdown menu fits inside the viewport on the given side of the trigger.
|
|
86
|
+
* Overrides user set position for auto-positioning if user's desire space is not available
|
|
87
|
+
*/
|
|
88
|
+
private _checkSpaceAvailable;
|
|
89
|
+
private _checkPositionFits;
|
|
90
|
+
/**
|
|
91
|
+
* This position is called for when user's set position didn't fit OR auto positioning when default position doesn't fit
|
|
92
|
+
* We look for the best alternative positions in order of preference base on the set position (e.g. bottom-start => bottom-end).
|
|
93
|
+
* @param userPosition
|
|
94
|
+
* @param space
|
|
95
|
+
* @param menuRect
|
|
96
|
+
*/
|
|
97
|
+
private _findBestAlternative;
|
|
98
|
+
private _findMostAvailableSpace;
|
|
99
|
+
/**
|
|
100
|
+
* A valid ideal position has been chosen.
|
|
101
|
+
* This function calculates the coordinate of the trigger to properly position the dropdown menu.
|
|
102
|
+
* @param position
|
|
103
|
+
* @returns
|
|
104
|
+
*/
|
|
105
|
+
private _calculateCoordinates;
|
|
106
|
+
private _applyPosition;
|
|
107
|
+
/**
|
|
108
|
+
* Event Handlers
|
|
109
|
+
* --------------------------------------------------------------------------
|
|
110
|
+
*/
|
|
111
|
+
private _handleMenuClick;
|
|
112
|
+
private _handleTriggerKeydown;
|
|
113
|
+
private _handleMenuKeydown;
|
|
114
|
+
private _handleWindowScroll;
|
|
115
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
116
|
+
}
|
|
117
|
+
export {};
|
package/dist/nys-dropdownmenu.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
1
|
+
import { LitElement as f, unsafeCSS as _, html as u } from "lit";
|
|
2
|
+
import { property as d } from "lit/decorators.js";
|
|
3
3
|
/*!
|
|
4
4
|
* █▄ █ █ █ █▀▀▀█ █▀▀▄ █▀▀▀█
|
|
5
5
|
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
|
|
6
6
|
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
|
|
7
7
|
*
|
|
8
|
-
* Dropdownmenu Component v1.19.
|
|
8
|
+
* Dropdownmenu Component v1.19.2
|
|
9
9
|
* Part of the New York State Design System
|
|
10
10
|
* Repository: https://github.com/its-hcd/nysds
|
|
11
11
|
* License: MIT
|
|
@@ -17,7 +17,7 @@ var v = Object.defineProperty, c = (h, e, t, n) => {
|
|
|
17
17
|
return o && v(e, t, o), o;
|
|
18
18
|
};
|
|
19
19
|
let x = 0;
|
|
20
|
-
const m = class m extends
|
|
20
|
+
const m = class m extends f {
|
|
21
21
|
constructor() {
|
|
22
22
|
super(...arguments), this.label = "", this.href = "", this.disabled = !1, this.target = "_self", this.prefixIcon = "", this.divider = "";
|
|
23
23
|
}
|
|
@@ -44,8 +44,8 @@ const m = class m extends w {
|
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
46
|
const e = !!this.href;
|
|
47
|
-
return
|
|
48
|
-
${e ?
|
|
47
|
+
return u`<li class="nys-dropdownmenuitem" role="presentation">
|
|
48
|
+
${e ? u` <a
|
|
49
49
|
class=${this.disabled ? "disabled" : ""}
|
|
50
50
|
href=${this.disabled ? "" : this.href}
|
|
51
51
|
role="menuitem"
|
|
@@ -55,9 +55,9 @@ const m = class m extends w {
|
|
|
55
55
|
@click="${this._handleClick}"
|
|
56
56
|
target="${this.target}"
|
|
57
57
|
>
|
|
58
|
-
${this.prefixIcon ?
|
|
58
|
+
${this.prefixIcon ? u`<nys-icon size="16" name=${this.prefixIcon}></nys-icon>` : ""}
|
|
59
59
|
${this.label}</a
|
|
60
|
-
>` :
|
|
60
|
+
>` : u`
|
|
61
61
|
<button
|
|
62
62
|
class=${this.disabled ? "disabled" : ""}
|
|
63
63
|
type="button"
|
|
@@ -68,7 +68,7 @@ const m = class m extends w {
|
|
|
68
68
|
?disabled=${this.disabled}
|
|
69
69
|
@click="${this._handleClick}"
|
|
70
70
|
>
|
|
71
|
-
${this.prefixIcon ?
|
|
71
|
+
${this.prefixIcon ? u`<nys-icon size="16" name=${this.prefixIcon}></nys-icon>` : ""}
|
|
72
72
|
${this.label}
|
|
73
73
|
</button>
|
|
74
74
|
`}
|
|
@@ -76,42 +76,42 @@ const m = class m extends w {
|
|
|
76
76
|
}
|
|
77
77
|
};
|
|
78
78
|
m.styles = _(g), m.shadowRootOptions = {
|
|
79
|
-
...
|
|
79
|
+
...f.shadowRootOptions,
|
|
80
80
|
delegatesFocus: !0
|
|
81
81
|
};
|
|
82
|
-
let
|
|
82
|
+
let a = m;
|
|
83
83
|
c([
|
|
84
|
-
|
|
85
|
-
],
|
|
84
|
+
d({ type: String })
|
|
85
|
+
], a.prototype, "label");
|
|
86
86
|
c([
|
|
87
|
-
|
|
88
|
-
],
|
|
87
|
+
d({ type: String })
|
|
88
|
+
], a.prototype, "href");
|
|
89
89
|
c([
|
|
90
|
-
|
|
91
|
-
],
|
|
90
|
+
d({ type: Boolean, reflect: !0 })
|
|
91
|
+
], a.prototype, "disabled");
|
|
92
92
|
c([
|
|
93
|
-
|
|
94
|
-
],
|
|
93
|
+
d({ type: String })
|
|
94
|
+
], a.prototype, "target");
|
|
95
95
|
c([
|
|
96
|
-
|
|
97
|
-
],
|
|
96
|
+
d({ type: String })
|
|
97
|
+
], a.prototype, "prefixIcon");
|
|
98
98
|
c([
|
|
99
|
-
|
|
100
|
-
],
|
|
101
|
-
customElements.get("nys-dropdownmenuitem") || customElements.define("nys-dropdownmenuitem",
|
|
102
|
-
var k = Object.defineProperty,
|
|
99
|
+
d({ type: String })
|
|
100
|
+
], a.prototype, "divider");
|
|
101
|
+
customElements.get("nys-dropdownmenuitem") || customElements.define("nys-dropdownmenuitem", a);
|
|
102
|
+
var k = Object.defineProperty, w = (h, e, t, n) => {
|
|
103
103
|
for (var o = void 0, i = h.length - 1, s; i >= 0; i--)
|
|
104
104
|
(s = h[i]) && (o = s(e, t, o) || o);
|
|
105
105
|
return o && k(e, t, o), o;
|
|
106
106
|
};
|
|
107
107
|
let E = 0;
|
|
108
|
-
const y = class y extends
|
|
108
|
+
const y = class y extends f {
|
|
109
109
|
/**
|
|
110
110
|
* Lifecycle Methods
|
|
111
111
|
* --------------------------------------------------------------------------
|
|
112
112
|
*/
|
|
113
113
|
constructor() {
|
|
114
|
-
super(), this.for = "", this.showDropdown = !1, this.position = null, this._trigger = null, this._menuElement = null, this._ariaTarget = null, this._lastFocusedIndex = 0, this.GAP = 4, this._resizeObserver = null, this._toggleDropdown = async () => {
|
|
114
|
+
super(), this.for = "", this.showDropdown = !1, this.label = "", this.position = null, this._trigger = null, this._menuElement = null, this._ariaTarget = null, this._lastFocusedIndex = 0, this.GAP = 4, this._resizeObserver = null, this._toggleDropdown = async () => {
|
|
115
115
|
this.showDropdown = !this.showDropdown, this._ariaTarget?.setAttribute("aria-expanded", String(this.showDropdown)), this.showDropdown ? (window.addEventListener("scroll", this._handleWindowScroll, !0), this._resizeObserver = new ResizeObserver(() => {
|
|
116
116
|
this.showDropdown && this._positionMenu();
|
|
117
117
|
}), this._resizeObserver.observe(document.documentElement), document.addEventListener("click", this._handleDocumentClick), this._menuElement = this.shadowRoot?.querySelector(
|
|
@@ -314,31 +314,34 @@ const y = class y extends w {
|
|
|
314
314
|
});
|
|
315
315
|
}
|
|
316
316
|
render() {
|
|
317
|
-
return
|
|
317
|
+
return u`<div
|
|
318
318
|
class="nys-dropdownmenu ${this.showDropdown ? "active" : ""}"
|
|
319
319
|
for=${this.for}
|
|
320
320
|
?hidden=${!this.showDropdown}
|
|
321
321
|
>
|
|
322
|
-
<ul role="menu">
|
|
322
|
+
<ul role="menu" aria-label=${this.label || "Menu"}>
|
|
323
323
|
<slot></slot>
|
|
324
324
|
</ul>
|
|
325
325
|
</div>`;
|
|
326
326
|
}
|
|
327
327
|
};
|
|
328
328
|
y.styles = _(g);
|
|
329
|
-
let
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
],
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
],
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
],
|
|
339
|
-
|
|
329
|
+
let l = y;
|
|
330
|
+
w([
|
|
331
|
+
d({ type: String, reflect: !0 })
|
|
332
|
+
], l.prototype, "for");
|
|
333
|
+
w([
|
|
334
|
+
d({ type: Boolean })
|
|
335
|
+
], l.prototype, "showDropdown");
|
|
336
|
+
w([
|
|
337
|
+
d({ type: String })
|
|
338
|
+
], l.prototype, "label");
|
|
339
|
+
w([
|
|
340
|
+
d({ type: String, reflect: !0 })
|
|
341
|
+
], l.prototype, "position");
|
|
342
|
+
customElements.get("nys-dropdownmenu") || customElements.define("nys-dropdownmenu", l);
|
|
340
343
|
export {
|
|
341
|
-
|
|
342
|
-
|
|
344
|
+
l as NysDropdownMenu,
|
|
345
|
+
a as NysDropdownMenuItem
|
|
343
346
|
};
|
|
344
347
|
//# sourceMappingURL=nys-dropdownmenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nys-dropdownmenu.js","sources":["../src/nys-dropdownmenuitem.ts","../src/nys-dropdownmenu.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-dropdownmenu.scss?inline\";\n\nlet dropdownMenuItemIdCounter = 0;\n\n/**\n * **Slotted component.** Displays an individual dropdown item within `nys-dropdown` with label.\n *\n * The `nys-dropdownitem` is used as customizable item within the dropdown so users don't have to raw code <ul>, <li>, <a href>\n * and have the benefit of default customization.\n *\n * @summary Dropdown item to display label and provide href link.\n * @element nys-dropdownmenuitem\n *\n * @example Basic item\n * ```html\n * <nys-dropdownmenuitem label=\"Edit\" link=\"/edit\"></nys-dropdownmenuitem>\n * ```\n *\n * @example Disabled item\n * ```html\n * <nys-dropdownmenuitem label=\"Delete\" link=\"/delete\" disabled></nys-dropdownmenuitem>\n * ```\n */\nexport class NysDropdownMenuItem extends LitElement {\n static styles = unsafeCSS(styles);\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: String }) label = \"\";\n @property({ type: String }) href = \"\";\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: String }) target = \"_self\";\n @property({ type: String }) prefixIcon = \"\";\n @property({ type: String }) divider = \"\";\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-dropdownmenuitem-${Date.now()}-${dropdownMenuItemIdCounter++}`;\n }\n }\n\n private _handleClick(e: Event) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n\n this.dispatchEvent(\n new CustomEvent(\"nys-click\", {\n bubbles: true,\n composed: true,\n detail: {\n id: this.id,\n label: this.label,\n ...(this.href && { href: this.href }),\n },\n }),\n );\n }\n\n render() {\n const isLink = !!this.href;\n\n return html`<li class=\"nys-dropdownmenuitem\" role=\"presentation\">\n ${isLink\n ? html` <a\n class=${this.disabled ? \"disabled\" : \"\"}\n href=${this.disabled ? \"\" : this.href}\n role=\"menuitem\"\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n aria-label=${this.label}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n @click=\"${this._handleClick}\"\n target=\"${this.target}\"\n >\n ${this.prefixIcon\n ? html`<nys-icon size=\"16\" name=${this.prefixIcon}></nys-icon>`\n : \"\"}\n ${this.label}</a\n >`\n : html`\n <button\n class=${this.disabled ? \"disabled\" : \"\"}\n type=\"button\"\n role=\"menuitem\"\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n aria-label=${this.label}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n ?disabled=${this.disabled}\n @click=\"${this._handleClick}\"\n >\n ${this.prefixIcon\n ? html`<nys-icon size=\"16\" name=${this.prefixIcon}></nys-icon>`\n : \"\"}\n ${this.label}\n </button>\n `}\n </li>`;\n }\n}\n\nif (!customElements.get(\"nys-dropdownmenuitem\")) {\n customElements.define(\"nys-dropdownmenuitem\", NysDropdownMenuItem);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport \"./nys-dropdownmenuitem\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-dropdownmenu.scss?inline\";\n\nlet dropdownMenuIdCounter = 0;\n\n/**\n * Dropdown menus enable users to select an action from a list of options.\n * They’re commonly used to save space by grouping related actions, or to provide actions in a confined space.\n *\n * @summary Action menu with auto-positioning, keyboard support, and screen reader integration.\n * @element nys-dropdownmenu\n *\n * @example Basic dropdown\n * ```html\n * <button id=\"my-trigger\">Actions</button>\n * <nys-dropdownmenu for=\"my-trigger\">\n * <nys-dropdownmenuitem label=\"Edit\" link=\"/edit\"></nys-dropdownmenuitem>\n * <nys-dropdownmenuitem label=\"Delete\" link=\"/delete\"></nys-dropdownmenuitem>\n * </nys-dropdownmenu>\n * ```\n *\n * @example Positioned dropdown\n * ```html\n * <button id=\"settings-btn\">Settings</button>\n * <nys-dropdownmenu for=\"settings-btn\" position=\"top-start\">\n * <nys-dropdownmenuitem label=\"Profile\" link=\"/profile\"></nys-dropdownmenuitem>\n * <nys-dropdownmenuitem label=\"Logout\" link=\"/logout\"></nys-dropdownmenuitem>\n * </nys-dropdownmenu>\n * ```\n */\n\ntype Position = \"bottom-start\" | \"bottom-end\" | \"top-start\" | \"top-end\";\n\ninterface PositionCoordinates {\n top: number;\n left: number;\n}\n\ninterface SpaceAvailable {\n top: number;\n bottom: number;\n start: number;\n end: number;\n}\n\nexport class NysDropdownMenu extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) for = \"\";\n @property({ type: Boolean }) showDropdown = false;\n\n /**\n * Preferred position relative to trigger.\n * @default \"bottom-end\"\n */\n @property({ type: String, reflect: true }) position: Position | null = null;\n\n private _trigger: HTMLElement | null = null;\n private _menuElement: HTMLElement | null = null;\n private _ariaTarget: HTMLElement | null = null;\n private _lastFocusedIndex: number = 0;\n private readonly GAP = 4;\n private _resizeObserver: ResizeObserver | null = null;\n\n /**\n * Lifecycle Methods\n * --------------------------------------------------------------------------\n */\n\n constructor() {\n super();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.id) {\n this.id = `nys-dropdownmenu-${Date.now()}-${dropdownMenuIdCounter++}`;\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n }\n\n async firstUpdated() {\n await this.updateComplete;\n this.applyInverseTransform();\n this._connectTrigger();\n this._handleMenuClick();\n }\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _findTrigger() {\n const targetId = this.for;\n if (!targetId) return null;\n\n // lightDOM search\n let htmlElement = document.getElementById(targetId);\n if (htmlElement) return htmlElement;\n\n // Search recursively through shadow DOMs (e.g. for nys-label within other component's shadowDOM)\n const findInShadows = (root: ParentNode): HTMLElement | null => {\n for (const el of Array.from(root.querySelectorAll(\"*\"))) {\n const shadowElement = el.shadowRoot;\n if (shadowElement) {\n const found = shadowElement.getElementById(targetId);\n if (found) return found;\n\n const deeper = findInShadows(shadowElement);\n if (deeper) return deeper;\n }\n }\n return null;\n };\n\n return findInShadows(document);\n }\n\n private _connectTrigger() {\n const trigger = this._findTrigger();\n if (!trigger) return;\n\n this._trigger = trigger;\n\n const ariaTarget =\n trigger.tagName.toLowerCase() === \"nys-button\"\n ? (trigger.shadowRoot?.querySelector(\"button\") ?? trigger)\n : trigger;\n\n ariaTarget.setAttribute(\"aria-haspopup\", \"menu\");\n ariaTarget.setAttribute(\"aria-expanded\", \"false\");\n\n this._ariaTarget = ariaTarget;\n\n this._trigger.addEventListener(\"click\", this._toggleDropdown);\n this._trigger.addEventListener(\"keydown\", this._handleTriggerKeydown);\n }\n\n private _toggleDropdown = async () => {\n this.showDropdown = !this.showDropdown;\n\n this._ariaTarget?.setAttribute(\"aria-expanded\", String(this.showDropdown));\n\n if (this.showDropdown) {\n window.addEventListener(\"scroll\", this._handleWindowScroll, true);\n this._resizeObserver = new ResizeObserver(() => {\n if (this.showDropdown) {\n this._positionMenu();\n }\n });\n this._resizeObserver.observe(document.documentElement);\n\n document.addEventListener(\"click\", this._handleDocumentClick);\n\n this._menuElement = this.shadowRoot?.querySelector(\n \".nys-dropdownmenu\",\n ) as HTMLElement | null;\n this._menuElement!.addEventListener(\"keydown\", this._handleMenuKeydown);\n\n await this.updateComplete;\n this._positionMenu();\n this._focusOnItem(this._lastFocusedIndex);\n } else {\n window.removeEventListener(\"scroll\", this._handleWindowScroll, true);\n document.removeEventListener(\"click\", this._handleDocumentClick);\n this._menuElement!.removeEventListener(\n \"keydown\",\n this._handleMenuKeydown,\n );\n\n this._resizeObserver?.disconnect();\n this._resizeObserver = null;\n }\n };\n\n private _closeDropdown() {\n this.showDropdown = false;\n this._ariaTarget?.setAttribute(\"aria-expanded\", \"false\");\n this._trigger?.focus();\n }\n\n private _getMenuItems(): HTMLElement[] {\n const slot = this.shadowRoot?.querySelector(\"slot\");\n const assigned = slot?.assignedElements({ flatten: true }) || [];\n\n return assigned.filter(\n (el) => el && !el.hasAttribute(\"disabled\"),\n ) as HTMLElement[];\n }\n\n private _handleDocumentClick = (event: MouseEvent) => {\n if (!this.showDropdown) return;\n\n const path = event?.composedPath();\n\n const clickedInsideMenu = path.includes(this);\n const clickedTrigger = this._trigger && path.includes(this._trigger);\n\n if (!clickedInsideMenu && !clickedTrigger) {\n this._closeDropdown();\n }\n };\n\n private async _focusOnItem(index: number = 0) {\n await new Promise((resolve) => requestAnimationFrame(resolve));\n const items = this._getMenuItems();\n const target = items[Math.min(index, items.length - 1)];\n if (!target) return;\n\n target.focus();\n }\n\n // In some iframes (like Storybook's) or embedded containers , parent elements may have CSS transforms applied, creating a new coordinate context.\n // This function removes such transforms to prevent them from affecting tooltip positioning calculations.\n private applyInverseTransform() {\n document.querySelectorAll('div[scale=\"1\"]').forEach((el) => {\n (el as HTMLElement).style.transform = \"none\";\n });\n }\n\n /**\n * Position Logic\n * --------------------------------------------------------------------------\n */\n\n /**\n * The controller function for positioning the dropdown menu.\n * The logic diverts to if user sets position or we auto position the dropdown menu\n */\n private _positionMenu() {\n if (!this._trigger) return;\n\n this._menuElement = this.shadowRoot?.querySelector(\n \".nys-dropdownmenu\",\n ) as HTMLElement | null;\n if (!this._menuElement) return;\n\n // Decide position based on user preference OR auto position if no position chosen\n const finalPosition = this.position\n ? this._setUserPosition(this.position)\n : this._autoPosition();\n\n // Apply the calculated position\n const coords = this._calculateCoordinates(finalPosition);\n this._applyPosition(coords);\n }\n\n private _setUserPosition(userPosition: Position): Position {\n const space = this._checkSpaceAvailable();\n const menuRect = this._menuElement!.getBoundingClientRect();\n\n const userPositionFits = this._checkPositionFits(\n userPosition,\n space,\n menuRect,\n );\n\n if (userPositionFits) {\n return userPosition;\n }\n\n // User position doesn't fit, find best alternative\n return this._findBestAlternative(userPosition, space, menuRect);\n }\n\n /**\n * Auto Positioning of the dropdown menu relies on the best surrounding space available\n * to select the desirable position.\n */\n private _autoPosition(): Position {\n const space = this._checkSpaceAvailable();\n const menuRect = this._menuElement!.getBoundingClientRect();\n\n const defaultPosition: Position = \"bottom-end\";\n\n if (this._checkPositionFits(defaultPosition, space, menuRect)) {\n return defaultPosition;\n }\n\n return this._findBestAlternative(defaultPosition, space, menuRect);\n }\n\n /**\n * Checks if the dropdown menu fits inside the viewport on the given side of the trigger.\n * Overrides user set position for auto-positioning if user's desire space is not available\n */\n private _checkSpaceAvailable(): SpaceAvailable {\n if (!this._trigger) {\n return { top: 0, bottom: 0, start: 0, end: 0 };\n }\n\n const triggerRect = this._trigger.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n return {\n top: triggerRect.top,\n bottom: viewportHeight - triggerRect.bottom,\n start: triggerRect.left,\n end: viewportWidth - triggerRect.right,\n };\n }\n\n private _checkPositionFits(\n position: Position,\n space: SpaceAvailable,\n menuRect: DOMRect,\n ): boolean {\n const menuWidth = menuRect.width;\n const menuHeight = menuRect.height;\n\n const [vertical, horizontal] = position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"start\" | \"end\",\n ];\n\n const verticalFits =\n vertical === \"bottom\"\n ? space.bottom >= menuHeight + this.GAP\n : space.top >= menuHeight + this.GAP;\n\n const horizontalFits =\n horizontal === \"start\"\n ? space.end >= menuWidth\n : space.start >= menuWidth;\n return verticalFits && horizontalFits;\n }\n\n /**\n * This position is called for when user's set position didn't fit OR auto positioning when default position doesn't fit\n * We look for the best alternative positions in order of preference base on the set position (e.g. bottom-start => bottom-end).\n * @param userPosition\n * @param space\n * @param menuRect\n */\n private _findBestAlternative(\n userPosition: Position,\n space: SpaceAvailable,\n menuRect: DOMRect,\n ): Position {\n const [vertical, horizontal] = userPosition.split(\"-\") as [\n \"top\" | \"bottom\",\n \"start\" | \"end\",\n ];\n\n const alternatives: Position[] = [\n `${vertical === \"bottom\" ? \"top\" : \"bottom\"}-${horizontal}`, // Flip vertical\n `${vertical}-${horizontal === \"start\" ? \"end\" : \"start\"}`, // Flip horizontal\n `${vertical === \"bottom\" ? \"top\" : \"bottom\"}-${horizontal === \"start\" ? \"end\" : \"start\"}`, // Flip both\n ];\n\n for (const altPosition of alternatives) {\n if (this._checkPositionFits(altPosition, space, menuRect)) {\n return altPosition;\n }\n }\n\n // Fallback: nothing fits, return position with most space\n return this._findMostAvailableSpace(space) as Position;\n }\n\n private _findMostAvailableSpace(space: SpaceAvailable): Position {\n const vertical = space.bottom >= space.top ? \"bottom\" : \"top\";\n const horizontal = space.start >= space.end ? \"start\" : \"end\";\n\n return `${vertical}-${horizontal}`;\n }\n\n /**\n * A valid ideal position has been chosen.\n * This function calculates the coordinate of the trigger to properly position the dropdown menu.\n * @param position\n * @returns\n */\n private _calculateCoordinates(position: Position): PositionCoordinates {\n if (!this._trigger || !this._menuElement) {\n return { top: 0, left: 0 };\n }\n\n const triggerRect = this._trigger.getBoundingClientRect();\n const menuRect = this._menuElement.getBoundingClientRect();\n\n const [vertical, horizontal] = position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"start\" | \"end\",\n ];\n\n let top = 0;\n let left = 0;\n\n // Vertical position\n if (vertical === \"bottom\") {\n top = triggerRect.bottom + this.GAP;\n } else {\n top = triggerRect.top - menuRect.height - this.GAP;\n }\n\n // Horizontal position\n if (horizontal === \"start\") {\n left = triggerRect.left;\n } else {\n left = triggerRect.right - menuRect.width;\n }\n\n return { top, left };\n }\n\n private _applyPosition(coords: PositionCoordinates) {\n if (!this._menuElement) return;\n\n this._menuElement.style.top = `${coords.top}px`;\n this._menuElement.style.left = `${coords.left}px`;\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n private _handleMenuClick() {\n this.addEventListener(\"nys-click\", (e: Event) => {\n const items = this._getMenuItems();\n const targetCrumb = (e as CustomEvent).detail?.id;\n const index = items.findIndex((item) => item.id === targetCrumb);\n if (index !== -1) this._lastFocusedIndex = index;\n this._closeDropdown();\n });\n }\n\n private _handleTriggerKeydown = (event: KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n this._toggleDropdown();\n }\n\n if (event.key === \"Escape\" && this.showDropdown) {\n event.preventDefault();\n this._closeDropdown();\n }\n };\n\n private _handleMenuKeydown = (event: KeyboardEvent) => {\n const items = this._getMenuItems();\n const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n switch (event.key) {\n case \"Escape\":\n event.preventDefault();\n this._closeDropdown();\n break;\n case \"ArrowDown\":\n case \"ArrowRight\":\n event.preventDefault();\n const nextIndex =\n currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this._lastFocusedIndex = nextIndex;\n items[nextIndex].focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n event.preventDefault();\n const prevIndex =\n currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this._lastFocusedIndex = prevIndex;\n items[prevIndex].focus();\n break;\n case \"Tab\":\n if (currentIndex >= items.length - 1 && !event.shiftKey) {\n this._closeDropdown();\n }\n break;\n default:\n break;\n }\n };\n\n private _handleWindowScroll = () => {\n if (this.showDropdown) {\n this._positionMenu();\n }\n };\n\n render() {\n return html`<div\n class=\"nys-dropdownmenu ${this.showDropdown ? \"active\" : \"\"}\"\n for=${this.for}\n ?hidden=${!this.showDropdown}\n >\n <ul role=\"menu\">\n <slot></slot>\n </ul>\n </div>`;\n }\n}\n\nif (!customElements.get(\"nys-dropdownmenu\")) {\n customElements.define(\"nys-dropdownmenu\", NysDropdownMenu);\n}\n"],"names":["dropdownMenuItemIdCounter","_NysDropdownMenuItem","LitElement","isLink","html","unsafeCSS","styles","NysDropdownMenuItem","__decorateClass","property","dropdownMenuIdCounter","_NysDropdownMenu","event","path","clickedInsideMenu","clickedTrigger","items","currentIndex","nextIndex","prevIndex","targetId","htmlElement","findInShadows","root","el","shadowElement","found","deeper","trigger","ariaTarget","index","resolve","target","finalPosition","coords","userPosition","space","menuRect","defaultPosition","triggerRect","viewportWidth","viewportHeight","position","menuWidth","menuHeight","vertical","horizontal","verticalFits","horizontalFits","alternatives","altPosition","top","left","targetCrumb","item","NysDropdownMenu"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"nys-dropdownmenu.js","sources":["../src/nys-dropdownmenuitem.ts","../src/nys-dropdownmenu.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-dropdownmenu.scss?inline\";\n\nlet dropdownMenuItemIdCounter = 0;\n\n/**\n * **Slotted component.** Displays an individual dropdown item within `nys-dropdown` with label.\n *\n * The `nys-dropdownitem` is used as customizable item within the dropdown so users don't have to raw code <ul>, <li>, <a href>\n * and have the benefit of default customization.\n *\n * @summary Dropdown item to display label and provide href link.\n * @element nys-dropdownmenuitem\n *\n * @example Basic item\n * ```html\n * <nys-dropdownmenuitem label=\"Edit\" link=\"/edit\"></nys-dropdownmenuitem>\n * ```\n *\n * @example Disabled item\n * ```html\n * <nys-dropdownmenuitem label=\"Delete\" link=\"/delete\" disabled></nys-dropdownmenuitem>\n * ```\n */\nexport class NysDropdownMenuItem extends LitElement {\n static styles = unsafeCSS(styles);\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: String }) label = \"\";\n @property({ type: String }) href = \"\";\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: String }) target = \"_self\";\n @property({ type: String }) prefixIcon = \"\";\n @property({ type: String }) divider = \"\";\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-dropdownmenuitem-${Date.now()}-${dropdownMenuItemIdCounter++}`;\n }\n }\n\n private _handleClick(e: Event) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n\n this.dispatchEvent(\n new CustomEvent(\"nys-click\", {\n bubbles: true,\n composed: true,\n detail: {\n id: this.id,\n label: this.label,\n ...(this.href && { href: this.href }),\n },\n }),\n );\n }\n\n render() {\n const isLink = !!this.href;\n\n return html`<li class=\"nys-dropdownmenuitem\" role=\"presentation\">\n ${isLink\n ? html` <a\n class=${this.disabled ? \"disabled\" : \"\"}\n href=${this.disabled ? \"\" : this.href}\n role=\"menuitem\"\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n aria-label=${this.label}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n @click=\"${this._handleClick}\"\n target=\"${this.target}\"\n >\n ${this.prefixIcon\n ? html`<nys-icon size=\"16\" name=${this.prefixIcon}></nys-icon>`\n : \"\"}\n ${this.label}</a\n >`\n : html`\n <button\n class=${this.disabled ? \"disabled\" : \"\"}\n type=\"button\"\n role=\"menuitem\"\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n aria-label=${this.label}\n tabindex=${this.disabled ? \"-1\" : \"0\"}\n ?disabled=${this.disabled}\n @click=\"${this._handleClick}\"\n >\n ${this.prefixIcon\n ? html`<nys-icon size=\"16\" name=${this.prefixIcon}></nys-icon>`\n : \"\"}\n ${this.label}\n </button>\n `}\n </li>`;\n }\n}\n\nif (!customElements.get(\"nys-dropdownmenuitem\")) {\n customElements.define(\"nys-dropdownmenuitem\", NysDropdownMenuItem);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport \"./nys-dropdownmenuitem\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-dropdownmenu.scss?inline\";\n\nlet dropdownMenuIdCounter = 0;\n\n/**\n * Dropdown menus enable users to select an action from a list of options.\n * They’re commonly used to save space by grouping related actions, or to provide actions in a confined space.\n *\n * @summary Action menu with auto-positioning, keyboard support, and screen reader integration.\n * @element nys-dropdownmenu\n *\n * @example Basic dropdown\n * ```html\n * <button id=\"my-trigger\">Actions</button>\n * <nys-dropdownmenu for=\"my-trigger\">\n * <nys-dropdownmenuitem label=\"Edit\" link=\"/edit\"></nys-dropdownmenuitem>\n * <nys-dropdownmenuitem label=\"Delete\" link=\"/delete\"></nys-dropdownmenuitem>\n * </nys-dropdownmenu>\n * ```\n *\n * @example Positioned dropdown\n * ```html\n * <button id=\"settings-btn\">Settings</button>\n * <nys-dropdownmenu for=\"settings-btn\" position=\"top-start\">\n * <nys-dropdownmenuitem label=\"Profile\" link=\"/profile\"></nys-dropdownmenuitem>\n * <nys-dropdownmenuitem label=\"Logout\" link=\"/logout\"></nys-dropdownmenuitem>\n * </nys-dropdownmenu>\n * ```\n */\n\ntype Position = \"bottom-start\" | \"bottom-end\" | \"top-start\" | \"top-end\";\n\ninterface PositionCoordinates {\n top: number;\n left: number;\n}\n\ninterface SpaceAvailable {\n top: number;\n bottom: number;\n start: number;\n end: number;\n}\n\nexport class NysDropdownMenu extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) for = \"\";\n @property({ type: Boolean }) showDropdown = false;\n\n /**\n * Accessible label for the menu. Used as `aria-label` on the `<ul role=\"menu\">` element.\n * @default \"\"\n */\n @property({ type: String }) label = \"\";\n\n /**\n * Preferred position relative to trigger.\n * @default \"bottom-end\"\n */\n @property({ type: String, reflect: true }) position: Position | null = null;\n\n private _trigger: HTMLElement | null = null;\n private _menuElement: HTMLElement | null = null;\n private _ariaTarget: HTMLElement | null = null;\n private _lastFocusedIndex: number = 0;\n private readonly GAP = 4;\n private _resizeObserver: ResizeObserver | null = null;\n\n /**\n * Lifecycle Methods\n * --------------------------------------------------------------------------\n */\n\n constructor() {\n super();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.id) {\n this.id = `nys-dropdownmenu-${Date.now()}-${dropdownMenuIdCounter++}`;\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n }\n\n async firstUpdated() {\n await this.updateComplete;\n this.applyInverseTransform();\n this._connectTrigger();\n this._handleMenuClick();\n }\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _findTrigger() {\n const targetId = this.for;\n if (!targetId) return null;\n\n // lightDOM search\n let htmlElement = document.getElementById(targetId);\n if (htmlElement) return htmlElement;\n\n // Search recursively through shadow DOMs (e.g. for nys-label within other component's shadowDOM)\n const findInShadows = (root: ParentNode): HTMLElement | null => {\n for (const el of Array.from(root.querySelectorAll(\"*\"))) {\n const shadowElement = el.shadowRoot;\n if (shadowElement) {\n const found = shadowElement.getElementById(targetId);\n if (found) return found;\n\n const deeper = findInShadows(shadowElement);\n if (deeper) return deeper;\n }\n }\n return null;\n };\n\n return findInShadows(document);\n }\n\n private _connectTrigger() {\n const trigger = this._findTrigger();\n if (!trigger) return;\n\n this._trigger = trigger;\n\n const ariaTarget =\n trigger.tagName.toLowerCase() === \"nys-button\"\n ? (trigger.shadowRoot?.querySelector(\"button\") ?? trigger)\n : trigger;\n\n ariaTarget.setAttribute(\"aria-haspopup\", \"menu\");\n ariaTarget.setAttribute(\"aria-expanded\", \"false\");\n\n this._ariaTarget = ariaTarget;\n\n this._trigger.addEventListener(\"click\", this._toggleDropdown);\n this._trigger.addEventListener(\"keydown\", this._handleTriggerKeydown);\n }\n\n private _toggleDropdown = async () => {\n this.showDropdown = !this.showDropdown;\n\n this._ariaTarget?.setAttribute(\"aria-expanded\", String(this.showDropdown));\n\n if (this.showDropdown) {\n window.addEventListener(\"scroll\", this._handleWindowScroll, true);\n this._resizeObserver = new ResizeObserver(() => {\n if (this.showDropdown) {\n this._positionMenu();\n }\n });\n this._resizeObserver.observe(document.documentElement);\n\n document.addEventListener(\"click\", this._handleDocumentClick);\n\n this._menuElement = this.shadowRoot?.querySelector(\n \".nys-dropdownmenu\",\n ) as HTMLElement | null;\n this._menuElement!.addEventListener(\"keydown\", this._handleMenuKeydown);\n\n await this.updateComplete;\n this._positionMenu();\n this._focusOnItem(this._lastFocusedIndex);\n } else {\n window.removeEventListener(\"scroll\", this._handleWindowScroll, true);\n document.removeEventListener(\"click\", this._handleDocumentClick);\n this._menuElement!.removeEventListener(\n \"keydown\",\n this._handleMenuKeydown,\n );\n\n this._resizeObserver?.disconnect();\n this._resizeObserver = null;\n }\n };\n\n private _closeDropdown() {\n this.showDropdown = false;\n this._ariaTarget?.setAttribute(\"aria-expanded\", \"false\");\n this._trigger?.focus();\n }\n\n private _getMenuItems(): HTMLElement[] {\n const slot = this.shadowRoot?.querySelector(\"slot\");\n const assigned = slot?.assignedElements({ flatten: true }) || [];\n\n return assigned.filter(\n (el) => el && !el.hasAttribute(\"disabled\"),\n ) as HTMLElement[];\n }\n\n private _handleDocumentClick = (event: MouseEvent) => {\n if (!this.showDropdown) return;\n\n const path = event?.composedPath();\n\n const clickedInsideMenu = path.includes(this);\n const clickedTrigger = this._trigger && path.includes(this._trigger);\n\n if (!clickedInsideMenu && !clickedTrigger) {\n this._closeDropdown();\n }\n };\n\n private async _focusOnItem(index: number = 0) {\n await new Promise((resolve) => requestAnimationFrame(resolve));\n const items = this._getMenuItems();\n const target = items[Math.min(index, items.length - 1)];\n if (!target) return;\n\n target.focus();\n }\n\n // In some iframes (like Storybook's) or embedded containers , parent elements may have CSS transforms applied, creating a new coordinate context.\n // This function removes such transforms to prevent them from affecting tooltip positioning calculations.\n private applyInverseTransform() {\n document.querySelectorAll('div[scale=\"1\"]').forEach((el) => {\n (el as HTMLElement).style.transform = \"none\";\n });\n }\n\n /**\n * Position Logic\n * --------------------------------------------------------------------------\n */\n\n /**\n * The controller function for positioning the dropdown menu.\n * The logic diverts to if user sets position or we auto position the dropdown menu\n */\n private _positionMenu() {\n if (!this._trigger) return;\n\n this._menuElement = this.shadowRoot?.querySelector(\n \".nys-dropdownmenu\",\n ) as HTMLElement | null;\n if (!this._menuElement) return;\n\n // Decide position based on user preference OR auto position if no position chosen\n const finalPosition = this.position\n ? this._setUserPosition(this.position)\n : this._autoPosition();\n\n // Apply the calculated position\n const coords = this._calculateCoordinates(finalPosition);\n this._applyPosition(coords);\n }\n\n private _setUserPosition(userPosition: Position): Position {\n const space = this._checkSpaceAvailable();\n const menuRect = this._menuElement!.getBoundingClientRect();\n\n const userPositionFits = this._checkPositionFits(\n userPosition,\n space,\n menuRect,\n );\n\n if (userPositionFits) {\n return userPosition;\n }\n\n // User position doesn't fit, find best alternative\n return this._findBestAlternative(userPosition, space, menuRect);\n }\n\n /**\n * Auto Positioning of the dropdown menu relies on the best surrounding space available\n * to select the desirable position.\n */\n private _autoPosition(): Position {\n const space = this._checkSpaceAvailable();\n const menuRect = this._menuElement!.getBoundingClientRect();\n\n const defaultPosition: Position = \"bottom-end\";\n\n if (this._checkPositionFits(defaultPosition, space, menuRect)) {\n return defaultPosition;\n }\n\n return this._findBestAlternative(defaultPosition, space, menuRect);\n }\n\n /**\n * Checks if the dropdown menu fits inside the viewport on the given side of the trigger.\n * Overrides user set position for auto-positioning if user's desire space is not available\n */\n private _checkSpaceAvailable(): SpaceAvailable {\n if (!this._trigger) {\n return { top: 0, bottom: 0, start: 0, end: 0 };\n }\n\n const triggerRect = this._trigger.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n return {\n top: triggerRect.top,\n bottom: viewportHeight - triggerRect.bottom,\n start: triggerRect.left,\n end: viewportWidth - triggerRect.right,\n };\n }\n\n private _checkPositionFits(\n position: Position,\n space: SpaceAvailable,\n menuRect: DOMRect,\n ): boolean {\n const menuWidth = menuRect.width;\n const menuHeight = menuRect.height;\n\n const [vertical, horizontal] = position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"start\" | \"end\",\n ];\n\n const verticalFits =\n vertical === \"bottom\"\n ? space.bottom >= menuHeight + this.GAP\n : space.top >= menuHeight + this.GAP;\n\n const horizontalFits =\n horizontal === \"start\"\n ? space.end >= menuWidth\n : space.start >= menuWidth;\n return verticalFits && horizontalFits;\n }\n\n /**\n * This position is called for when user's set position didn't fit OR auto positioning when default position doesn't fit\n * We look for the best alternative positions in order of preference base on the set position (e.g. bottom-start => bottom-end).\n * @param userPosition\n * @param space\n * @param menuRect\n */\n private _findBestAlternative(\n userPosition: Position,\n space: SpaceAvailable,\n menuRect: DOMRect,\n ): Position {\n const [vertical, horizontal] = userPosition.split(\"-\") as [\n \"top\" | \"bottom\",\n \"start\" | \"end\",\n ];\n\n const alternatives: Position[] = [\n `${vertical === \"bottom\" ? \"top\" : \"bottom\"}-${horizontal}`, // Flip vertical\n `${vertical}-${horizontal === \"start\" ? \"end\" : \"start\"}`, // Flip horizontal\n `${vertical === \"bottom\" ? \"top\" : \"bottom\"}-${horizontal === \"start\" ? \"end\" : \"start\"}`, // Flip both\n ];\n\n for (const altPosition of alternatives) {\n if (this._checkPositionFits(altPosition, space, menuRect)) {\n return altPosition;\n }\n }\n\n // Fallback: nothing fits, return position with most space\n return this._findMostAvailableSpace(space) as Position;\n }\n\n private _findMostAvailableSpace(space: SpaceAvailable): Position {\n const vertical = space.bottom >= space.top ? \"bottom\" : \"top\";\n const horizontal = space.start >= space.end ? \"start\" : \"end\";\n\n return `${vertical}-${horizontal}`;\n }\n\n /**\n * A valid ideal position has been chosen.\n * This function calculates the coordinate of the trigger to properly position the dropdown menu.\n * @param position\n * @returns\n */\n private _calculateCoordinates(position: Position): PositionCoordinates {\n if (!this._trigger || !this._menuElement) {\n return { top: 0, left: 0 };\n }\n\n const triggerRect = this._trigger.getBoundingClientRect();\n const menuRect = this._menuElement.getBoundingClientRect();\n\n const [vertical, horizontal] = position.split(\"-\") as [\n \"top\" | \"bottom\",\n \"start\" | \"end\",\n ];\n\n let top = 0;\n let left = 0;\n\n // Vertical position\n if (vertical === \"bottom\") {\n top = triggerRect.bottom + this.GAP;\n } else {\n top = triggerRect.top - menuRect.height - this.GAP;\n }\n\n // Horizontal position\n if (horizontal === \"start\") {\n left = triggerRect.left;\n } else {\n left = triggerRect.right - menuRect.width;\n }\n\n return { top, left };\n }\n\n private _applyPosition(coords: PositionCoordinates) {\n if (!this._menuElement) return;\n\n this._menuElement.style.top = `${coords.top}px`;\n this._menuElement.style.left = `${coords.left}px`;\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n private _handleMenuClick() {\n this.addEventListener(\"nys-click\", (e: Event) => {\n const items = this._getMenuItems();\n const targetCrumb = (e as CustomEvent).detail?.id;\n const index = items.findIndex((item) => item.id === targetCrumb);\n if (index !== -1) this._lastFocusedIndex = index;\n this._closeDropdown();\n });\n }\n\n private _handleTriggerKeydown = (event: KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n this._toggleDropdown();\n }\n\n if (event.key === \"Escape\" && this.showDropdown) {\n event.preventDefault();\n this._closeDropdown();\n }\n };\n\n private _handleMenuKeydown = (event: KeyboardEvent) => {\n const items = this._getMenuItems();\n const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n switch (event.key) {\n case \"Escape\":\n event.preventDefault();\n this._closeDropdown();\n break;\n case \"ArrowDown\":\n case \"ArrowRight\":\n event.preventDefault();\n const nextIndex =\n currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this._lastFocusedIndex = nextIndex;\n items[nextIndex].focus();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n event.preventDefault();\n const prevIndex =\n currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this._lastFocusedIndex = prevIndex;\n items[prevIndex].focus();\n break;\n case \"Tab\":\n if (currentIndex >= items.length - 1 && !event.shiftKey) {\n this._closeDropdown();\n }\n break;\n default:\n break;\n }\n };\n\n private _handleWindowScroll = () => {\n if (this.showDropdown) {\n this._positionMenu();\n }\n };\n\n render() {\n return html`<div\n class=\"nys-dropdownmenu ${this.showDropdown ? \"active\" : \"\"}\"\n for=${this.for}\n ?hidden=${!this.showDropdown}\n >\n <ul role=\"menu\" aria-label=${this.label || \"Menu\"}>\n <slot></slot>\n </ul>\n </div>`;\n }\n}\n\nif (!customElements.get(\"nys-dropdownmenu\")) {\n customElements.define(\"nys-dropdownmenu\", NysDropdownMenu);\n}\n"],"names":["dropdownMenuItemIdCounter","_NysDropdownMenuItem","LitElement","isLink","html","unsafeCSS","styles","NysDropdownMenuItem","__decorateClass","property","dropdownMenuIdCounter","_NysDropdownMenu","event","path","clickedInsideMenu","clickedTrigger","items","currentIndex","nextIndex","prevIndex","targetId","htmlElement","findInShadows","root","el","shadowElement","found","deeper","trigger","ariaTarget","index","resolve","target","finalPosition","coords","userPosition","space","menuRect","defaultPosition","triggerRect","viewportWidth","viewportHeight","position","menuWidth","menuHeight","vertical","horizontal","verticalFits","horizontalFits","alternatives","altPosition","top","left","targetCrumb","item","NysDropdownMenu"],"mappings":"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"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* **Slotted component.** Displays an individual dropdown item within `nys-dropdown` with label.
|
|
4
|
+
*
|
|
5
|
+
* The `nys-dropdownitem` is used as customizable item within the dropdown so users don't have to raw code <ul>, <li>, <a href>
|
|
6
|
+
* and have the benefit of default customization.
|
|
7
|
+
*
|
|
8
|
+
* @summary Dropdown item to display label and provide href link.
|
|
9
|
+
* @element nys-dropdownmenuitem
|
|
10
|
+
*
|
|
11
|
+
* @example Basic item
|
|
12
|
+
* ```html
|
|
13
|
+
* <nys-dropdownmenuitem label="Edit" link="/edit"></nys-dropdownmenuitem>
|
|
14
|
+
* ```
|
|
15
|
+
*
|
|
16
|
+
* @example Disabled item
|
|
17
|
+
* ```html
|
|
18
|
+
* <nys-dropdownmenuitem label="Delete" link="/delete" disabled></nys-dropdownmenuitem>
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare class NysDropdownMenuItem extends LitElement {
|
|
22
|
+
static styles: import("lit").CSSResult;
|
|
23
|
+
static shadowRootOptions: {
|
|
24
|
+
delegatesFocus: boolean;
|
|
25
|
+
clonable?: boolean;
|
|
26
|
+
customElementRegistry?: CustomElementRegistry;
|
|
27
|
+
mode: ShadowRootMode;
|
|
28
|
+
serializable?: boolean;
|
|
29
|
+
slotAssignment?: SlotAssignmentMode;
|
|
30
|
+
};
|
|
31
|
+
label: string;
|
|
32
|
+
href: string;
|
|
33
|
+
disabled: boolean;
|
|
34
|
+
target: string;
|
|
35
|
+
prefixIcon: string;
|
|
36
|
+
divider: string;
|
|
37
|
+
connectedCallback(): void;
|
|
38
|
+
private _handleClick;
|
|
39
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
40
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-dropdownmenu",
|
|
3
|
-
"version": "1.19.
|
|
3
|
+
"version": "1.19.2",
|
|
4
4
|
"description": "The Dropdownmenu component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-dropdownmenu.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -20,10 +20,10 @@
|
|
|
20
20
|
"test": "vite build && wtr",
|
|
21
21
|
"build:watch": "tsc --emitDeclarationOnly && vite build --watch",
|
|
22
22
|
"test:watch": "vite build && wtr --watch",
|
|
23
|
-
"lit-analyze": "lit-analyzer '
|
|
23
|
+
"lit-analyze": "lit-analyzer 'src/**/*.ts'"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@nysds/nys-icon": "^1.19.
|
|
26
|
+
"@nysds/nys-icon": "^1.19.2"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"lit": "^3.3.1",
|
|
@@ -41,5 +41,6 @@
|
|
|
41
41
|
"forms"
|
|
42
42
|
],
|
|
43
43
|
"author": "New York State Design System Team",
|
|
44
|
-
"license": "MIT"
|
|
44
|
+
"license": "MIT",
|
|
45
|
+
"sideEffects": true
|
|
45
46
|
}
|