Skip to content

Commit c62379c

Browse files
authored
chore(core): Add type declaration files for core packages (#224)
1 parent fe012c3 commit c62379c

File tree

26 files changed

+1022
-0
lines changed

26 files changed

+1022
-0
lines changed
Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
/**
2+
* Implements ARIA active descendant keyboard navigation.
3+
*
4+
* @example
5+
* ```ts
6+
* import * as ActiveDescendant from "makeup-active-descendant";
7+
*
8+
* const widgetEl = document.querySelector(".widget");
9+
* const focusEl = widgetEl.querySelector("input");
10+
* const containerEl = widgetEl.querySelector("ul");
11+
*
12+
* const activeDescendant = ActiveDescendant.createLinear(widgetEl, focusEl, containerEl, "li");
13+
*
14+
* widgetEl.addEventListener("activeDescendantChange", function (e) {
15+
* console.log(e.detail);
16+
* });
17+
* ```
18+
*/
19+
20+
import type { AutoInitOption, AutoResetOption, AxisOption } from "makeup-navigation-emitter";
21+
22+
/**
23+
* Options for creating a linear active descendant
24+
*/
25+
export interface ActiveDescendantOptions {
26+
/**
27+
* The HTML class name that will be applied to the ARIA active descendant element (default: 'active-descendant')
28+
*/
29+
activeDescendantClassName?: string;
30+
/**
31+
* Declares the initial active descendant item (default: "none")
32+
* - "none": no index position is set (useful in programmatic active-descendant)
33+
* - "interactive": first non aria-disabled or hidden element
34+
* - "ariaChecked": first element with aria-checked=true (useful in ARIA menu)
35+
* - "ariaSelected": first element with aria-selected=true (useful in ARIA tabs)
36+
* - "ariaSelectedOrInteractive": first element with aria-selected=true, falling back to "interactive" if not found (useful in ARIA listbox)
37+
* - number: specific index position of items (throws error if non-interactive)
38+
*/
39+
autoInit?: AutoInitOption;
40+
/**
41+
* Declares the active descendant item after a reset and/or when keyboard focus exits the widget (default: "none")
42+
* - "none": no index position is set (useful in programmatic active-descendant)
43+
* - "current": index remains current (radio button like behaviour)
44+
* - "interactive": index moves to first non aria-disabled or hidden element
45+
* - "ariaChecked": index moves to first element with aria-checked=true
46+
* - "ariaSelected": index moves to first element with aria-selected=true
47+
* - number: specific index position of items (throws error if non-interactive)
48+
*/
49+
autoReset?: AutoResetOption;
50+
/**
51+
* Specify true to scroll the container as activeDescendant changes (default: false)
52+
*/
53+
autoScroll?: boolean;
54+
/**
55+
* Specify 'x' for left/right arrow keys, 'y' for up/down arrow keys, or 'both' (default: 'both')
56+
*/
57+
axis?: AxisOption;
58+
/**
59+
* CSS selector of descendant elements that will be ignored by the navigation emitters key event delegation
60+
* (i.e. these elements will _not_ operate the active descendant) (default: null)
61+
*/
62+
ignoreByDelegateSelector?: string | null;
63+
/**
64+
* Specify whether arrow keys should wrap/loop (default: false)
65+
*/
66+
wrap?: boolean;
67+
}
68+
69+
/**
70+
* Event detail for activeDescendantInit event
71+
*/
72+
export interface ActiveDescendantInitEventDetail {
73+
/** All items that match item selector */
74+
items: HTMLElement[];
75+
/** Index position before initialization */
76+
fromIndex: number | null;
77+
/** Index position after initialization */
78+
toIndex: number | null;
79+
}
80+
81+
/**
82+
* Event detail for activeDescendantChange event
83+
*/
84+
export interface ActiveDescendantChangeEventDetail {
85+
/** Index position before change */
86+
fromIndex: number | null;
87+
/** Index position after change */
88+
toIndex: number | null;
89+
}
90+
91+
/**
92+
* Event detail for activeDescendantReset event
93+
*/
94+
export interface ActiveDescendantResetEventDetail {
95+
/** Index position before reset */
96+
fromIndex: number | null;
97+
/** Index position after reset */
98+
toIndex: number | null;
99+
}
100+
101+
/**
102+
* Event detail for activeDescendantMutation event
103+
*/
104+
export interface ActiveDescendantMutationEventDetail {
105+
/** Index position before mutation */
106+
fromIndex: number | null;
107+
/** Index position after mutation */
108+
toIndex: number | null;
109+
}
110+
111+
/**
112+
* Active descendant instance
113+
*/
114+
export interface LinearActiveDescendant {
115+
/** The index position of the current active descendant */
116+
index: number | null;
117+
/** The current item at the index position */
118+
currentItem: HTMLElement | undefined;
119+
/** All items that match item selector */
120+
items: HTMLElement[];
121+
/** Whether arrow keys should wrap/loop */
122+
wrap: boolean;
123+
/**
124+
* Will force a reset to the value specified by `autoReset`
125+
*/
126+
reset(): void;
127+
/**
128+
* Destroys all event listeners
129+
*/
130+
destroy(): void;
131+
}
132+
133+
/**
134+
* Creates a linear active descendant instance
135+
* @param el - Root widget element
136+
* @param focusEl - The focusable element that will have aria-activedescendant set
137+
* @param itemContainerEl - The element that contains the "descendant" items
138+
* @param itemSelector - CSS selector for navigation items
139+
* @param selectedOptions - Optional configuration
140+
* @returns Active descendant instance
141+
*/
142+
export function createLinear(
143+
el: HTMLElement,
144+
focusEl: HTMLElement,
145+
itemContainerEl: HTMLElement,
146+
itemSelector: string,
147+
selectedOptions?: ActiveDescendantOptions
148+
): LinearActiveDescendant;
149+

packages/core/makeup-active-descendant/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44
"version": "0.7.10",
55
"main": "./dist/cjs/index.js",
66
"module": "./dist/mjs/index.js",
7+
"types": "./dist/index.d.ts",
78
"exports": {
89
".": {
10+
"types": "./dist/index.d.ts",
911
"import": "./dist/mjs/index.js",
1012
"require": "./dist/cjs/index.js"
1113
}
@@ -30,6 +32,7 @@
3032
"makeup-next-id": "^0.5.7"
3133
},
3234
"files": [
35+
"dist/index.d.ts",
3336
"dist/cjs/index.js",
3437
"dist/mjs/index.js",
3538
"dist/mjs/package.json",
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* Emits custom 'focusExit' event when keyboard focus has exited an element and all of its descendants.
3+
*
4+
* @example
5+
* ```ts
6+
* import * as ExitEmitter from "makeup-exit-emitter";
7+
*
8+
* const el = document.getElementById("widget1");
9+
*
10+
* ExitEmitter.addFocusExit(el);
11+
*
12+
* el.addEventListener("focusExit", function (e) {
13+
* console.log(this, e);
14+
* });
15+
* ```
16+
*/
17+
18+
/**
19+
* Event detail for focusExit event
20+
*/
21+
export interface FocusExitEventDetail {
22+
/** The element that previously had focus */
23+
fromElement: HTMLElement | null;
24+
/** The element that now has focus (undefined if focus left the window) */
25+
toElement: HTMLElement | undefined;
26+
}
27+
28+
/**
29+
* Adds focus exit tracking to an element
30+
* @param el - Element to track focus exit for
31+
* @returns The exit emitter instance (or null if already exists)
32+
*/
33+
export function addFocusExit(el: HTMLElement): FocusExitEmitter | null;
34+
35+
/**
36+
* Removes focus exit tracking from an element
37+
* @param el - Element to remove focus exit tracking from
38+
*/
39+
export function removeFocusExit(el: HTMLElement): void;
40+
41+
/**
42+
* Focus exit emitter instance (internal, returned by addFocusExit)
43+
* @internal
44+
*/
45+
export interface FocusExitEmitter {
46+
/** The element being tracked */
47+
el: HTMLElement;
48+
/** The currently focused element within the tracked element */
49+
currentFocusElement: HTMLElement | null;
50+
/** Removes all event listeners */
51+
removeEventListeners(): void;
52+
}
53+

packages/core/makeup-exit-emitter/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44
"version": "0.5.7",
55
"main": "./dist/cjs/index.js",
66
"module": "./dist/mjs/index.js",
7+
"types": "./dist/index.d.ts",
78
"exports": {
89
".": {
10+
"types": "./dist/index.d.ts",
911
"import": "./dist/mjs/index.js",
1012
"require": "./dist/cjs/index.js"
1113
}
@@ -29,6 +31,7 @@
2931
"makeup-next-id": "^0.5.7"
3032
},
3133
"files": [
34+
"dist/index.d.ts",
3235
"dist/cjs/index.js",
3336
"dist/mjs/index.js",
3437
"dist/mjs/package.json",

0 commit comments

Comments
 (0)