@splendidlabz/utils 1.5.0-beta.6 → 1.5.1
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.
- package/CHANGELOG.md +28 -0
- package/dist/dom/accessibility.d.ts +28 -0
- package/dist/dom/actions/index.d.ts +3 -0
- package/dist/dom/actions/masonry.d.ts +3 -0
- package/dist/dom/actions/prefer-horizontal-scroll.d.ts +3 -0
- package/dist/dom/actions/sticky.d.ts +3 -0
- package/dist/dom/bounding-box.d.ts +39 -0
- package/dist/dom/clipboard.d.ts +5 -0
- package/dist/dom/cookie.d.ts +11 -0
- package/dist/dom/css-vars.d.ts +4 -0
- package/dist/dom/events.d.ts +18 -0
- package/dist/dom/focusable.d.ts +76 -0
- package/dist/dom/font-size.d.ts +5 -0
- package/dist/dom/get-element.d.ts +100 -0
- package/dist/dom/hash.d.ts +1 -0
- package/dist/dom/index.d.ts +22 -0
- package/dist/dom/keyboard.d.ts +30 -0
- package/dist/dom/local-store.d.ts +29 -0
- package/dist/dom/media.d.ts +3 -0
- package/dist/dom/observers/index.d.ts +3 -0
- package/dist/dom/observers/intersection-observer.d.ts +8 -0
- package/dist/dom/observers/mutation-observer.d.ts +7 -0
- package/dist/dom/observers/observer.d.ts +1 -0
- package/dist/dom/observers/resize-observer.d.ts +38 -0
- package/dist/dom/pkce.d.ts +6 -0
- package/dist/dom/query-params.d.ts +4 -0
- package/dist/dom/random-string.d.ts +7 -0
- package/dist/dom/sanitize.d.ts +8 -0
- package/dist/dom/session-store.d.ts +5 -0
- package/dist/dom/trap-focus.d.ts +28 -0
- package/dist/dom/ui/aria-current.d.ts +5 -0
- package/dist/dom/ui/inconsistent-button-fix.d.ts +12 -0
- package/dist/dom/ui/index.d.ts +4 -0
- package/dist/dom/ui/scroll-container.d.ts +1 -0
- package/dist/dom/ui/traverse-and-scramble.d.ts +19 -0
- package/dist/lib/arrays/index.d.ts +5 -0
- package/dist/lib/arrays/item-position.d.ts +14 -0
- package/dist/lib/arrays/join.d.ts +13 -0
- package/dist/lib/arrays/shuffle.d.ts +1 -0
- package/dist/lib/arrays/sort.d.ts +30 -0
- package/dist/lib/arrays/unique.d.ts +1 -0
- package/dist/lib/auth/index.d.ts +1 -0
- package/dist/lib/auth/route-manager.d.ts +25 -0
- package/dist/lib/checks.d.ts +29 -0
- package/dist/lib/date/days.d.ts +5 -0
- package/dist/lib/date/index.d.ts +3 -0
- package/dist/lib/date/months.d.ts +9 -0
- package/dist/lib/date/time.d.ts +8 -0
- package/dist/lib/form/form-data.d.ts +7 -0
- package/dist/lib/form/index.d.ts +2 -0
- package/dist/lib/form/sanitize.d.ts +58 -0
- package/dist/lib/functions/debounce.d.ts +1 -0
- package/dist/lib/functions/env.d.ts +1 -0
- package/dist/lib/functions/functional.d.ts +4 -0
- package/dist/lib/functions/index.d.ts +5 -0
- package/dist/lib/functions/throttle.d.ts +1 -0
- package/dist/lib/functions/timeout.d.ts +3 -0
- package/dist/lib/index.d.ts +13 -0
- package/dist/lib/numbers/index.d.ts +2 -0
- package/dist/lib/numbers/math.d.ts +2 -0
- package/dist/lib/objects/camelcase-keys.d.ts +1 -0
- package/dist/lib/objects/empty.d.ts +2 -0
- package/dist/lib/objects/equal.d.ts +2 -0
- package/dist/lib/objects/extend.d.ts +4 -0
- package/dist/lib/objects/flatten.d.ts +4 -0
- package/dist/lib/objects/index.d.ts +13 -0
- package/dist/lib/objects/json.d.ts +1 -0
- package/dist/lib/objects/loop.d.ts +2 -0
- package/dist/lib/objects/mix/mix.d.ts +1 -0
- package/dist/lib/objects/nested-property.d.ts +22 -0
- package/dist/lib/objects/normalize-object.d.ts +1 -0
- package/dist/lib/objects/omit-empty.d.ts +1 -0
- package/dist/lib/objects/size.d.ts +1 -0
- package/dist/lib/objects/split.d.ts +10 -0
- package/dist/lib/promises/index.d.ts +1 -0
- package/dist/lib/promises/reject.d.ts +3 -0
- package/dist/lib/sse.d.ts +16 -0
- package/dist/lib/strings/convert-case/convert-case.d.ts +8 -0
- package/dist/lib/strings/index.d.ts +4 -0
- package/dist/lib/strings/markdown.d.ts +23 -0
- package/dist/lib/strings/pluralize.d.ts +1 -0
- package/dist/lib/strings/query-string.d.ts +8 -0
- package/dist/lib/style/index.d.ts +1 -0
- package/dist/lib/symbols/index.d.ts +1 -0
- package/dist/lib/symbols/symbols.d.ts +2 -0
- package/dist/node/common.d.ts +1 -0
- package/dist/node/dirname.d.ts +7 -0
- package/dist/node/file-cache.d.ts +54 -0
- package/dist/node/file.d.ts +2 -0
- package/dist/node/hash.d.ts +1 -0
- package/dist/node/index.d.ts +7 -0
- package/dist/node/pkce.d.ts +6 -0
- package/dist/node/random-string.d.ts +2 -0
- package/dist/node/sanitize.d.ts +8 -0
- package/dom/accessibility.js +22 -0
- package/dom/actions/prefer-horizontal-scroll.js +4 -4
- package/dom/bounding-box.js +35 -7
- package/dom/focusable.js +119 -10
- package/dom/get-element.js +97 -5
- package/dom/keyboard.js +13 -8
- package/dom/observers/intersection-observer.js +1 -1
- package/dom/observers/mutation-observer.js +1 -1
- package/dom/observers/resize-observer.js +2 -2
- package/dom/sanitize.js +1 -1
- package/dom/trap-focus.js +18 -3
- package/dom/ui/inconsistent-button-fix.js +14 -2
- package/dom/ui/traverse-and-scramble.js +29 -8
- package/lib/arrays/join.js +7 -4
- package/lib/arrays/sort.js +37 -7
- package/lib/checks.js +26 -0
- package/lib/form/sanitize.js +34 -11
- package/lib/sse.js +4 -7
- package/lib/strings/markdown.js +12 -4
- package/node/file-cache.js +46 -7
- package/node/sanitize.js +1 -1
- package/package.json +32 -10
- package/tsconfig.json +23 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,33 @@
|
|
|
1
1
|
# @splendidlabz/utils
|
|
2
2
|
|
|
3
|
+
## 1.5.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- - Utils: Added getFocusableElements as alias of Focusables
|
|
8
|
+
- Styles: Adjusted `grid-with-breakout` children classes and CSS properties. Wrote docs for it.
|
|
9
|
+
|
|
10
|
+
## 1.5.0
|
|
11
|
+
|
|
12
|
+
### Minor Changes
|
|
13
|
+
|
|
14
|
+
- 859a2b0: Add utilities for SSE
|
|
15
|
+
- acf9faf: Improve sort function
|
|
16
|
+
- 8b17adc: Ready for next release
|
|
17
|
+
- 5fe7c51: - Just bumping
|
|
18
|
+
- Fix bug with `mix` erroring when a `null` or `undefined` source is passed to it. `mix` now ignores `null` and `undefined`.
|
|
19
|
+
- Adds `toDegrees`
|
|
20
|
+
- Adds `toRadians`
|
|
21
|
+
- Adds `getCSSValue` and `setCSSValue`. They're aliases for `getCSSVar` and `setCSSVar` but they're more descriptive for standard properties.
|
|
22
|
+
- Renamed `hasLabel` to `checkForAccessibleName`
|
|
23
|
+
- Add `getParentElement` to get the parent element of a DOM node. If it encounters an `ASTRO-ISLAND` and `ASTRO-SLOT`, it goes one level up.
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- df4f2d6: Simplified Markdown — so utils now contain a markdown function
|
|
28
|
+
- Include typescript checks!
|
|
29
|
+
- bb06596: Updates
|
|
30
|
+
|
|
3
31
|
## 1.5.0-beta.6
|
|
4
32
|
|
|
5
33
|
### Minor Changes
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Checks if an element has an accessible name through label or aria-labelledby
|
|
3
|
+
* @param {string} [label] - The label text
|
|
4
|
+
* @param {string} [labelledBy] - The aria-labelledby value
|
|
5
|
+
* @returns {boolean} True if the element has an accessible name
|
|
6
|
+
*/
|
|
7
|
+
export function hasAccessibleName(label?: string, labelledBy?: string): boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Checks if an element has an accessible name and logs a warning/error if it doesn't
|
|
10
|
+
* @param {Object} [options] - Options for checking accessible name
|
|
11
|
+
* @param {string} [options.name] - The name of the element being checked
|
|
12
|
+
* @param {string} [options.ariaLabel] - The aria-label value
|
|
13
|
+
* @param {string} [options.ariaLabelledBy] - The aria-labelledby value
|
|
14
|
+
* @param {'warn'|'error'} [options.severity='warn'] - Severity level for the message
|
|
15
|
+
* @returns {boolean} True if the element has an accessible name
|
|
16
|
+
*/
|
|
17
|
+
export function checkForAccessibleName({ name, ariaLabel, ariaLabelledBy, severity, }?: {
|
|
18
|
+
name?: string;
|
|
19
|
+
ariaLabel?: string;
|
|
20
|
+
ariaLabelledBy?: string;
|
|
21
|
+
severity?: "warn" | "error";
|
|
22
|
+
}): boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Checks if an ARIA popup value is valid
|
|
25
|
+
* @param {string} value - The ARIA popup value to check
|
|
26
|
+
* @returns {boolean} True if the value is invalid
|
|
27
|
+
*/
|
|
28
|
+
export function isInvalidAriaPopup(value: string): boolean;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Advanced boundingClientRect that contains information vertical and horizontal centers.
|
|
3
|
+
* @param {HTMLElement} element - The element to get the bounding box for
|
|
4
|
+
* @param {Object} [options] - Options for the bounding box calculation
|
|
5
|
+
* @param {boolean} [options.containsPadding=true] - Whether to include padding in the calculations
|
|
6
|
+
* @returns {Object} The bounding box object with additional center coordinates
|
|
7
|
+
* @property {number} x - The x coordinate
|
|
8
|
+
* @property {number} y - The y coordinate
|
|
9
|
+
* @property {number} width - The width
|
|
10
|
+
* @property {number} height - The height
|
|
11
|
+
* @property {number} top - The top coordinate
|
|
12
|
+
* @property {number} right - The right coordinate
|
|
13
|
+
* @property {number} bottom - The bottom coordinate
|
|
14
|
+
* @property {number} left - The left coordinate
|
|
15
|
+
* @property {number} xCenter - The horizontal center coordinate
|
|
16
|
+
* @property {number} yCenter - The vertical center coordinate
|
|
17
|
+
*/
|
|
18
|
+
export function boundingBox(element: HTMLElement, { containsPadding }?: {
|
|
19
|
+
containsPadding?: boolean;
|
|
20
|
+
}): any;
|
|
21
|
+
/**
|
|
22
|
+
* Gets the bounding box of an element relative to its ancestor
|
|
23
|
+
* @param {Object} params - Parameters for the calculation
|
|
24
|
+
* @param {HTMLElement} params.element - The element to get the bounding box for
|
|
25
|
+
* @param {HTMLElement} [params.ancestorElement] - The ancestor element to calculate position relative to. Defaults to parent element
|
|
26
|
+
* @returns {Object} The relative bounding box with center coordinates
|
|
27
|
+
* @property {number} top - Distance from ancestor's top
|
|
28
|
+
* @property {number} right - Distance from ancestor's right
|
|
29
|
+
* @property {number} bottom - Distance from ancestor's bottom
|
|
30
|
+
* @property {number} left - Distance from ancestor's left
|
|
31
|
+
* @property {number} width - The width
|
|
32
|
+
* @property {number} height - The height
|
|
33
|
+
* @property {number} xCenter - The horizontal center coordinate relative to ancestor
|
|
34
|
+
* @property {number} yCenter - The vertical center coordinate relative to ancestor
|
|
35
|
+
*/
|
|
36
|
+
export function boundingBoxRelativeToAncestor({ element, ancestorElement }: {
|
|
37
|
+
element: HTMLElement;
|
|
38
|
+
ancestorElement?: HTMLElement;
|
|
39
|
+
}): any;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Gets a cookie by name
|
|
3
|
+
* Thanks to https://stackoverflow.com/a/21125098
|
|
4
|
+
* @param {string} name Cookie name
|
|
5
|
+
* @returns string Cookie value
|
|
6
|
+
*/
|
|
7
|
+
export function getCookie(name: string): string;
|
|
8
|
+
export namespace cookies {
|
|
9
|
+
function get(name: any): string;
|
|
10
|
+
function set(name: any, value: any, days: any): void;
|
|
11
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export function addListeners(listeners: any): void;
|
|
2
|
+
export function removeListeners(listeners: any): void;
|
|
3
|
+
export function dispatchEvent(node: any, eventName: any, detail: any, options?: {}): void;
|
|
4
|
+
export function updateEvent(event: any, updates: any): CustomEvent<any>;
|
|
5
|
+
export function createListeners(listeners: any): {
|
|
6
|
+
readonly list: any;
|
|
7
|
+
add({ node, event, handler }: {
|
|
8
|
+
node: any;
|
|
9
|
+
event: any;
|
|
10
|
+
handler: any;
|
|
11
|
+
}): void;
|
|
12
|
+
remove({ node, event, handler }: {
|
|
13
|
+
node: any;
|
|
14
|
+
event: any;
|
|
15
|
+
handler: any;
|
|
16
|
+
}): void;
|
|
17
|
+
clear(): void;
|
|
18
|
+
};
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @typedef {Object} Focusables
|
|
3
|
+
* @property {number} length - Number of keyboard focusable elements
|
|
4
|
+
* @property {Array} all - All focusable elements that are visible and enabled
|
|
5
|
+
* @property {Array} keyboard - Elements that can be focused via keyboard (tabIndex > -1)
|
|
6
|
+
* @property {Array} keyboardOnly - Alias for keyboard focusable elements
|
|
7
|
+
* @property {HTMLElement|null} first - First keyboard focusable element
|
|
8
|
+
* @property {HTMLElement|null} last - Last keyboard focusable element
|
|
9
|
+
* @property {function(number): HTMLElement|null} next - Get next focusable element after the given index
|
|
10
|
+
* @property {function(number): HTMLElement|null} prev - Get previous focusable element before the given index
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* Gets all focusable elements within a container and provides methods to navigate between them.
|
|
14
|
+
* This is useful for implementing keyboard navigation, focus trapping, and accessibility features.
|
|
15
|
+
*
|
|
16
|
+
* @param {HTMLElement} [container=document.body] - The container element to search within. Only elements inside this container will be included.
|
|
17
|
+
* @returns {Focusables} Object containing focusable elements and navigation methods
|
|
18
|
+
* @example
|
|
19
|
+
* // Get focusable elements in a modal
|
|
20
|
+
* const modal = document.querySelector('.modal')
|
|
21
|
+
* const focusable = getFocusableElements(modal)
|
|
22
|
+
*
|
|
23
|
+
* // Get all focusable elements in document
|
|
24
|
+
* const allFocusable = getFocusableElements()
|
|
25
|
+
*
|
|
26
|
+
* // Focus the first element when modal opens
|
|
27
|
+
* focusable.first?.focus()
|
|
28
|
+
*
|
|
29
|
+
* // Handle tab key to trap focus
|
|
30
|
+
* modal.addEventListener('keydown', e => {
|
|
31
|
+
* if (e.key === 'Tab') {
|
|
32
|
+
* e.preventDefault()
|
|
33
|
+
* const currentIndex = focusable.keyboard.indexOf(document.activeElement)
|
|
34
|
+
* const nextElement = e.shiftKey
|
|
35
|
+
* ? focusable.prev(currentIndex)
|
|
36
|
+
* : focusable.next(currentIndex)
|
|
37
|
+
* nextElement?.focus()
|
|
38
|
+
* }
|
|
39
|
+
* })
|
|
40
|
+
*/
|
|
41
|
+
export function getFocusableElements(container?: HTMLElement): Focusables;
|
|
42
|
+
export function Focusable(container?: HTMLElement): Focusables;
|
|
43
|
+
export type Focusables = {
|
|
44
|
+
/**
|
|
45
|
+
* - Number of keyboard focusable elements
|
|
46
|
+
*/
|
|
47
|
+
length: number;
|
|
48
|
+
/**
|
|
49
|
+
* - All focusable elements that are visible and enabled
|
|
50
|
+
*/
|
|
51
|
+
all: any[];
|
|
52
|
+
/**
|
|
53
|
+
* - Elements that can be focused via keyboard (tabIndex > -1)
|
|
54
|
+
*/
|
|
55
|
+
keyboard: any[];
|
|
56
|
+
/**
|
|
57
|
+
* - Alias for keyboard focusable elements
|
|
58
|
+
*/
|
|
59
|
+
keyboardOnly: any[];
|
|
60
|
+
/**
|
|
61
|
+
* - First keyboard focusable element
|
|
62
|
+
*/
|
|
63
|
+
first: HTMLElement | null;
|
|
64
|
+
/**
|
|
65
|
+
* - Last keyboard focusable element
|
|
66
|
+
*/
|
|
67
|
+
last: HTMLElement | null;
|
|
68
|
+
/**
|
|
69
|
+
* - Get next focusable element after the given index
|
|
70
|
+
*/
|
|
71
|
+
next: (arg0: number) => HTMLElement | null;
|
|
72
|
+
/**
|
|
73
|
+
* - Get previous focusable element before the given index
|
|
74
|
+
*/
|
|
75
|
+
prev: (arg0: number) => HTMLElement | null;
|
|
76
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export function getUnit(value: any): any;
|
|
2
|
+
export function em(element?: HTMLElement, multiple?: number): number;
|
|
3
|
+
export function rem(multiple?: number): number;
|
|
4
|
+
export function lh(element?: HTMLElement, multiple?: number): number;
|
|
5
|
+
export function toPx(value: any, element?: any): number;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Gets the type of a DOM node
|
|
3
|
+
* @param {Node|NodeList|Array} node - The node to check
|
|
4
|
+
* @returns {'element'|'nodelist'|'array'|undefined} The type of the node
|
|
5
|
+
*/
|
|
6
|
+
export function getNodeType(node: Node | NodeList | any[]): "element" | "nodelist" | "array" | undefined;
|
|
7
|
+
/**
|
|
8
|
+
* Gets an element from a selector or returns the element if it's already an Element
|
|
9
|
+
* @param {string|Element} selector - CSS selector or Element
|
|
10
|
+
* @returns {Element|undefined} The matching element or undefined if not found
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* // Get element by selector
|
|
14
|
+
* const button = getElement('.button')
|
|
15
|
+
*
|
|
16
|
+
* // Pass through Element
|
|
17
|
+
* const element = document.querySelector('.button')
|
|
18
|
+
* const sameElement = getElement(element) // Returns element directly
|
|
19
|
+
*/
|
|
20
|
+
export function getElement(selector: string | Element): Element | undefined;
|
|
21
|
+
/**
|
|
22
|
+
* Gets all child elements of a node, handling Astro slots
|
|
23
|
+
* @param {Element} node - The parent node
|
|
24
|
+
* @returns {Element[]} Array of child elements
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* // Get children of a div
|
|
28
|
+
* const children = getChildrenElements(div)
|
|
29
|
+
*
|
|
30
|
+
* // Works with Astro slots
|
|
31
|
+
* const slotChildren = getChildrenElements(astroSlot)
|
|
32
|
+
*/
|
|
33
|
+
export function getChildrenElements(node: Element): Element[];
|
|
34
|
+
/**
|
|
35
|
+
* Gets the parent element, skipping Astro-specific nodes
|
|
36
|
+
* @param {Element} element - The element to get the parent of
|
|
37
|
+
* @returns {Element|null} The parent element, or null if no parent exists
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* // Get parent, skipping Astro slots
|
|
41
|
+
* const parent = getParentElement(element)
|
|
42
|
+
*/
|
|
43
|
+
export function getParentElement(element: Element): Element | null;
|
|
44
|
+
/**
|
|
45
|
+
* Gets all sibling elements of an element (excluding the element itself)
|
|
46
|
+
* @param {Element} element - The element to get siblings of
|
|
47
|
+
* @returns {Element[]} Array of sibling elements
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* // Get all siblings of an element
|
|
51
|
+
* const siblings = getSiblingElements(element)
|
|
52
|
+
*/
|
|
53
|
+
export function getSiblingElements(element: Element): Element[];
|
|
54
|
+
/**
|
|
55
|
+
* Gets the index of an element among its siblings
|
|
56
|
+
* @param {Element} element - The element to get the index of
|
|
57
|
+
* @returns {number} The index of the element (0-based)
|
|
58
|
+
*
|
|
59
|
+
* @example
|
|
60
|
+
* // Get position of element among siblings
|
|
61
|
+
* const index = getSelfIndex(element)
|
|
62
|
+
*/
|
|
63
|
+
export function getSelfIndex(element: Element): number;
|
|
64
|
+
/**
|
|
65
|
+
* Checks if an element is an ancestor of another element
|
|
66
|
+
* @param {Element} ancestor - The potential ancestor element
|
|
67
|
+
* @param {Element} element - The element to check
|
|
68
|
+
* @param {Object} [options] - Options for the search
|
|
69
|
+
* @param {number} [options.searchLevels=0] - Number of levels to search up, 0 for unlimited
|
|
70
|
+
* @returns {boolean} True if ancestor is an ancestor of element
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
* // Check if div is an ancestor of button
|
|
74
|
+
* const isParent = isAncestor(div, button)
|
|
75
|
+
*
|
|
76
|
+
* // Check if div is an ancestor within 2 levels
|
|
77
|
+
* const isCloseAncestor = isAncestor(div, button, { searchLevels: 2 })
|
|
78
|
+
*/
|
|
79
|
+
export function isAncestor(ancestor: Element, element: Element, { searchLevels }?: {
|
|
80
|
+
searchLevels?: number;
|
|
81
|
+
}): boolean;
|
|
82
|
+
/**
|
|
83
|
+
* Gets ancestor elements with their siblings, optionally limiting the search depth.
|
|
84
|
+
* Useful for finding the nearest ancestor that has siblings.
|
|
85
|
+
*
|
|
86
|
+
* @param {Element} element - The element to start searching from
|
|
87
|
+
* @param {Object} [options] - Options for the search
|
|
88
|
+
* @param {number|boolean} [options.limit=false] - Number of levels to search up, or false for unlimited
|
|
89
|
+
* @returns {Element[]|null} Array of sibling elements, or null if none found
|
|
90
|
+
*
|
|
91
|
+
* @example
|
|
92
|
+
* // Get siblings of nearest ancestor that has siblings
|
|
93
|
+
* const ancestorSiblings = getAncestorWithSiblings(element)
|
|
94
|
+
*
|
|
95
|
+
* // Search up to 2 levels
|
|
96
|
+
* const limitedSiblings = getAncestorWithSiblings(element, { limit: 2 })
|
|
97
|
+
*/
|
|
98
|
+
export function getAncestorWithSiblings(element: Element, { limit }?: {
|
|
99
|
+
limit?: number | boolean;
|
|
100
|
+
}): Element[] | null;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function sha256Hash(string: any): Promise<string>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export * from "./accessibility.js";
|
|
2
|
+
export * from "./actions/index.js";
|
|
3
|
+
export * from "./bounding-box.js";
|
|
4
|
+
export * from "./clipboard.js";
|
|
5
|
+
export * from "./cookie.js";
|
|
6
|
+
export * from "./css-vars.js";
|
|
7
|
+
export * from "./events.js";
|
|
8
|
+
export * from "./focusable.js";
|
|
9
|
+
export * from "./font-size.js";
|
|
10
|
+
export * from "./get-element.js";
|
|
11
|
+
export * from "./hash.js";
|
|
12
|
+
export * from "./keyboard.js";
|
|
13
|
+
export * from "./local-store.js";
|
|
14
|
+
export * from "./media.js";
|
|
15
|
+
export * from "./observers/index.js";
|
|
16
|
+
export * from "./pkce.js";
|
|
17
|
+
export * from "./query-params.js";
|
|
18
|
+
export * from "./random-string.js";
|
|
19
|
+
export * from "./sanitize.js";
|
|
20
|
+
export * from "./session-store.js";
|
|
21
|
+
export * from "./trap-focus.js";
|
|
22
|
+
export * from "./ui/index.js";
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Event is Tab (without shift)
|
|
3
|
+
* @param {KeyboardEvent} event - The keyboard event object
|
|
4
|
+
* @returns {boolean}
|
|
5
|
+
*/
|
|
6
|
+
export function isTab(event: KeyboardEvent): boolean;
|
|
7
|
+
/**
|
|
8
|
+
* Event is shift + Tab
|
|
9
|
+
* @param {KeyboardEvent} event - The keyboard event object
|
|
10
|
+
* @returns {boolean}
|
|
11
|
+
*/
|
|
12
|
+
export function isShiftTab(event: KeyboardEvent): boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Matches both Tab and Shift+Tab
|
|
15
|
+
* @param {string} key - The keyboard key to check
|
|
16
|
+
* @returns {boolean} Whether the key is Tab
|
|
17
|
+
*/
|
|
18
|
+
export function isTabKey(key: string): boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Event is an arrow key
|
|
21
|
+
* @param {string} key - The keyboard key to check
|
|
22
|
+
* @returns {boolean} Whether the key is an arrow key (Up, Down, Left, Right)
|
|
23
|
+
*/
|
|
24
|
+
export function isArrowKey(key: string): boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Event is Escape key
|
|
27
|
+
* @param {string} key - The keyboard key to check
|
|
28
|
+
* @returns {boolean} Whether the key is Escape
|
|
29
|
+
*/
|
|
30
|
+
export function isEscapeKey(key: string): boolean;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export namespace localStore {
|
|
2
|
+
/**
|
|
3
|
+
* Retrieves a value from localStorage
|
|
4
|
+
* @param {string} key - The key to retrieve from localStorage
|
|
5
|
+
* @returns {any} The stored value. Returns parsed JSON if the value was stored as JSON. Returns the original string if not JSON, or undefined if key doesn't exist
|
|
6
|
+
*/
|
|
7
|
+
function get(key: string): any;
|
|
8
|
+
/**
|
|
9
|
+
* Stores a value in localStorage
|
|
10
|
+
* @param {string} key - The key to store the value under
|
|
11
|
+
* @param {any} value - The value to store. Objects will be stringified to JSON
|
|
12
|
+
*/
|
|
13
|
+
function set(key: string, value: any): void;
|
|
14
|
+
/**
|
|
15
|
+
* Stores multiple key-value pairs in localStorage
|
|
16
|
+
* @param {Object|Map} data - An object or Map containing key-value pairs to store
|
|
17
|
+
*/
|
|
18
|
+
function setMultiple(data: any | Map<any, any>): void;
|
|
19
|
+
/**
|
|
20
|
+
* Removes a value from localStorage
|
|
21
|
+
* @param {string} key - The key to remove from localStorage
|
|
22
|
+
*/
|
|
23
|
+
function remove(key: string): void;
|
|
24
|
+
/**
|
|
25
|
+
* Removes multiple keys from localStorage
|
|
26
|
+
* @param {string[]} keys - Array of keys to remove from localStorage
|
|
27
|
+
*/
|
|
28
|
+
function removeMultiple(keys: string[]): void;
|
|
29
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function useObserverMethodOnTarget(target: any, observer: any, method?: string, options?: any): void;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Creates and manages a ResizeObserver instance to monitor size changes of a target element.
|
|
3
|
+
*
|
|
4
|
+
* @param {Element|Window|NodeList|Element[]} target - The element(s) to observe.
|
|
5
|
+
* - If window is provided, document.body will be observed instead.
|
|
6
|
+
* - If NodeList or Array of elements is provided, all elements will be observed.
|
|
7
|
+
* @param {Object} options - Configuration options for the resize observer
|
|
8
|
+
* @param {boolean} [options.observe=true] - Whether to start observing immediately. If false, the observer won't be created.
|
|
9
|
+
* @param {Function} [options.callback] - Optional callback function that will be called when resize changes are detected.
|
|
10
|
+
* If not provided, a 'resize-obs' event will be dispatched on the target.
|
|
11
|
+
* @param {Object} [options.observerOptions] - Additional options to pass to ResizeObserver.observe()
|
|
12
|
+
*
|
|
13
|
+
* @returns {Object} An object with methods to control the observer:
|
|
14
|
+
* - observe(target, options): Start observing a new target element
|
|
15
|
+
* - unobserve(target): Stop observing a target element
|
|
16
|
+
* - disconnect(): Disconnect the observer and stop all observations
|
|
17
|
+
* - destroy(): Alias for disconnect()
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* // Basic usage with callback
|
|
21
|
+
* resizeObserver(element, {
|
|
22
|
+
* callback: ({ entry, entries, observer }) => {
|
|
23
|
+
* console.log('Element resized:', entry.contentRect);
|
|
24
|
+
* }
|
|
25
|
+
* });
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* // Usage with event listener
|
|
29
|
+
* resizeObserver(element);
|
|
30
|
+
* element.addEventListener('resize-obs', ({ detail }) => {
|
|
31
|
+
* console.log('Element resized:', detail.entry.contentRect);
|
|
32
|
+
* });
|
|
33
|
+
*/
|
|
34
|
+
export function resizeObserver(target: Element | Window | NodeList | Element[], options: {
|
|
35
|
+
observe?: boolean;
|
|
36
|
+
callback?: Function;
|
|
37
|
+
observerOptions?: any;
|
|
38
|
+
}): any;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generates a random string.
|
|
3
|
+
* Ensures first character is a letter so it can be used in HTML ids and classes
|
|
4
|
+
* This can actually be used everywhere, not just in the browser.
|
|
5
|
+
*/
|
|
6
|
+
export function randomString(length: any): string;
|
|
7
|
+
export function uuid(): `${string}-${string}-${string}-${string}-${string}`;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Sanitizes values using DOMPurify
|
|
3
|
+
* @param {*} value - Value to sanitize (string, array, or object)
|
|
4
|
+
* @param {Object} [options={}] - DOMPurify options
|
|
5
|
+
* @returns {*} Sanitized value
|
|
6
|
+
* @throws {Error} If input is a string but DOMPurify fails
|
|
7
|
+
*/
|
|
8
|
+
export function sanitize(value: any, options?: any): any;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Traps focus within a set of focusable elements, creating a circular tab order
|
|
3
|
+
* @param {Object} params
|
|
4
|
+
* @param {KeyboardEvent} params.event - The keyboard event to handle
|
|
5
|
+
* @param {import('./focusable.js').Focusables} params.focusables - Object containing focusable elements
|
|
6
|
+
*/
|
|
7
|
+
export function trapFocus({ event, focusables }: {
|
|
8
|
+
event: KeyboardEvent;
|
|
9
|
+
focusables: import("./focusable.js").Focusables;
|
|
10
|
+
}): void;
|
|
11
|
+
/**
|
|
12
|
+
* Manages focus behavior when tabbing through content, with options to control focus on exit
|
|
13
|
+
* @param {Object} params
|
|
14
|
+
* @param {KeyboardEvent} params.event - The keyboard event to handle
|
|
15
|
+
* @param {HTMLElement} params.triggerNode - Element that triggered the focus trap
|
|
16
|
+
* @param {HTMLElement} params.contentNode - Container element that holds focusable content
|
|
17
|
+
* @param {import('./focusable.js').Focusables} params.focusables - Object containing focusable elements
|
|
18
|
+
* @param {'next'|'trigger'} [params.tabOutFocus='next'] - Where to focus when tabbing out: 'next' element or back to trigger
|
|
19
|
+
* @param {Function} [params.onLeave=()=>{}] - Callback when focus leaves content, receives 'forward' or 'back' direction
|
|
20
|
+
*/
|
|
21
|
+
export function manageFocus({ event, triggerNode, contentNode, focusables, tabOutFocus, onLeave, }: {
|
|
22
|
+
event: KeyboardEvent;
|
|
23
|
+
triggerNode: HTMLElement;
|
|
24
|
+
contentNode: HTMLElement;
|
|
25
|
+
focusables: import("./focusable.js").Focusables;
|
|
26
|
+
tabOutFocus?: "next" | "trigger";
|
|
27
|
+
onLeave?: Function;
|
|
28
|
+
}): void;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Fixes inconsistent button focus behavior across browsers.
|
|
3
|
+
*
|
|
4
|
+
* In some browsers (like Firefox), clicking a button doesn't focus it.
|
|
5
|
+
* This function ensures buttons are focused when clicked, making behavior consistent.
|
|
6
|
+
*
|
|
7
|
+
* @see {@link https://zellwk.com/blog/inconsistent-button-behavior/|Source}
|
|
8
|
+
* @example
|
|
9
|
+
* // Add the fix to your app
|
|
10
|
+
* inconsistentButtonFix()
|
|
11
|
+
*/
|
|
12
|
+
export function inconsistentButtonFix(): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function findScrollContainer(element: any, direction?: string): any;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Traverses a DOM node and scrambles its text content, excluding specified elements.
|
|
3
|
+
* Useful for creating placeholder/loading states or privacy features.
|
|
4
|
+
*
|
|
5
|
+
* @param {Element|ChildNode} node - The root element or node to start traversal from
|
|
6
|
+
* @param {Object} [options] - Options for traversal
|
|
7
|
+
* @param {string[]} [options.excludes=[]] - Array of CSS selectors to exclude from scrambling
|
|
8
|
+
* @example
|
|
9
|
+
* // Scramble all text in a container
|
|
10
|
+
* traverseAndScramble(document.querySelector('.container'))
|
|
11
|
+
*
|
|
12
|
+
* // Scramble text but exclude certain elements
|
|
13
|
+
* traverseAndScramble(document.body, {
|
|
14
|
+
* excludes: ['.no-scramble', '[data-no-scramble]']
|
|
15
|
+
* })
|
|
16
|
+
*/
|
|
17
|
+
export function traverseAndScramble(node: Element | ChildNode, { excludes }?: {
|
|
18
|
+
excludes?: string[];
|
|
19
|
+
}): void;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export function last(array: any, index: any): boolean;
|
|
2
|
+
/**
|
|
3
|
+
* Checks if the given index is the last item in the array
|
|
4
|
+
* @param {Array} array - The array to check
|
|
5
|
+
* @param {number} index - The index to check
|
|
6
|
+
* @returns {boolean} True if the index is the last item, false otherwise
|
|
7
|
+
*/
|
|
8
|
+
export function isLastItem(array: any[], index: number): boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Returns the last item in the array
|
|
11
|
+
* @param {Array} array - The array to get the last item from
|
|
12
|
+
* @returns {*} The last item in the array
|
|
13
|
+
*/
|
|
14
|
+
export function lastArrayItem(array: any[]): any;
|