@carbon/utilities 0.17.0 → 0.18.0-rc.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.
- package/README.md +37 -0
- package/es/carousel/index.d.ts +2 -0
- package/es/carousel/index.js +3 -1
- package/es/chunk-BYypO7fO.js +18 -0
- package/es/chunk-Bzxox1sl.d.ts +48 -0
- package/es/chunk-CYAX4TFi.js +80 -0
- package/es/chunk-Ci2WlFE4.js +437 -0
- package/es/chunk-DPUOAfLB.d.ts +55 -0
- package/{types/datePartsOrder/datePartsOrder.d.ts → es/datePartsOrder/index.d.ts} +6 -4
- package/es/datePartsOrder/index.js +21 -1
- package/es/dateTimeFormat/index.d.ts +9 -0
- package/es/dateTimeFormat/index.js +16 -1
- package/{types/documentLang/documentLang.d.ts → es/documentLang/index.d.ts} +5 -3
- package/es/documentLang/index.js +69 -1
- package/es/index.d.ts +8 -0
- package/es/index.js +10 -1
- package/es/makeDraggable/index.d.ts +46 -0
- package/es/makeDraggable/index.js +82 -1
- package/es/overflowHandler/index.d.ts +104 -0
- package/es/overflowHandler/index.js +95 -1
- package/lib/carousel/index.js +4 -1
- package/lib/chunk-C5VBwGBG.js +443 -0
- package/lib/chunk-Dc0mzKQx.js +107 -0
- package/lib/datePartsOrder/index.js +23 -1
- package/lib/dateTimeFormat/index.js +17 -1
- package/lib/documentLang/index.js +72 -1
- package/lib/index.js +24 -1
- package/lib/makeDraggable/index.js +84 -1
- package/lib/overflowHandler/index.js +99 -1
- package/package.json +29 -12
- package/scss/carousel/_carousel.scss +34 -2
- package/es/carousel/carousel.js +0 -1
- package/es/carousel/swipeEvents.js +0 -1
- package/es/carousel/types.js +0 -0
- package/es/datePartsOrder/datePartsOrder.js +0 -1
- package/es/dateTimeFormat/absolute.js +0 -1
- package/es/dateTimeFormat/relative.js +0 -1
- package/es/documentLang/documentLang.js +0 -1
- package/es/makeDraggable/makeDraggable.js +0 -1
- package/es/overflowHandler/overflowHandler.js +0 -1
- package/lib/carousel/carousel.js +0 -1
- package/lib/carousel/swipeEvents.js +0 -1
- package/lib/carousel/types.js +0 -1
- package/lib/datePartsOrder/datePartsOrder.js +0 -1
- package/lib/dateTimeFormat/absolute.js +0 -1
- package/lib/dateTimeFormat/relative.js +0 -1
- package/lib/documentLang/documentLang.js +0 -1
- package/lib/makeDraggable/makeDraggable.js +0 -1
- package/lib/overflowHandler/overflowHandler.js +0 -1
- package/types/carousel/carousel.d.ts +0 -14
- package/types/carousel/index.d.ts +0 -8
- package/types/carousel/swipeEvents.d.ts +0 -9
- package/types/carousel/types.d.ts +0 -36
- package/types/datePartsOrder/index.d.ts +0 -7
- package/types/dateTimeFormat/absolute.d.ts +0 -30
- package/types/dateTimeFormat/index.d.ts +0 -12
- package/types/dateTimeFormat/relative.d.ts +0 -10
- package/types/documentLang/index.d.ts +0 -7
- package/types/index.d.ts +0 -13
- package/types/makeDraggable/index.d.ts +0 -7
- package/types/makeDraggable/makeDraggable.d.ts +0 -38
- package/types/overflowHandler/index.d.ts +0 -7
- package/types/overflowHandler/overflowHandler.d.ts +0 -85
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
//#region src/datePartsOrder/datePartsOrder.d.ts
|
|
1
2
|
/**
|
|
2
3
|
* Copyright IBM Corp. 2025
|
|
3
4
|
*
|
|
@@ -6,8 +7,9 @@
|
|
|
6
7
|
*/
|
|
7
8
|
type Order = 'month-year' | 'year-month';
|
|
8
9
|
declare function getMonthYearOrder(locale: string): Order;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
declare const datePartsOrder: {
|
|
11
|
+
getMonthYearOrder: typeof getMonthYearOrder;
|
|
12
|
+
isMonthFirst: (locale: string) => boolean;
|
|
12
13
|
};
|
|
13
|
-
|
|
14
|
+
//#endregion
|
|
15
|
+
export { datePartsOrder };
|
|
@@ -1 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
//#region src/datePartsOrder/datePartsOrder.ts
|
|
2
|
+
const _orderCache = /* @__PURE__ */ new Map();
|
|
3
|
+
function getMonthYearOrder(locale) {
|
|
4
|
+
const cached = _orderCache.get(locale);
|
|
5
|
+
if (cached) return cached;
|
|
6
|
+
const parts = new Intl.DateTimeFormat(locale, {
|
|
7
|
+
year: "numeric",
|
|
8
|
+
month: "long"
|
|
9
|
+
}).formatToParts(new Date(2e3, 0, 1));
|
|
10
|
+
const order = parts.findIndex((p) => p.type === "month") < parts.findIndex((p) => p.type === "year") ? "month-year" : "year-month";
|
|
11
|
+
_orderCache.set(locale, order);
|
|
12
|
+
return order;
|
|
13
|
+
}
|
|
14
|
+
const isMonthFirst = (locale) => getMonthYearOrder(locale) === "month-year";
|
|
15
|
+
const datePartsOrder = {
|
|
16
|
+
getMonthYearOrder,
|
|
17
|
+
isMonthFirst
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
//#endregion
|
|
21
|
+
export { datePartsOrder };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { n as relative_d_exports, t as absolute_d_exports } from "../chunk-Bzxox1sl.js";
|
|
2
|
+
|
|
3
|
+
//#region src/dateTimeFormat/index.d.ts
|
|
4
|
+
declare const dateTimeFormat: {
|
|
5
|
+
relative: typeof relative_d_exports;
|
|
6
|
+
absolute: typeof absolute_d_exports;
|
|
7
|
+
};
|
|
8
|
+
//#endregion
|
|
9
|
+
export { dateTimeFormat };
|
|
@@ -1 +1,16 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { n as relative_exports, t as absolute_exports } from "../chunk-CYAX4TFi.js";
|
|
2
|
+
|
|
3
|
+
//#region src/dateTimeFormat/index.ts
|
|
4
|
+
/**
|
|
5
|
+
* Copyright IBM Corp. 2024
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
const dateTimeFormat = {
|
|
11
|
+
relative: relative_exports,
|
|
12
|
+
absolute: absolute_exports
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
//#endregion
|
|
16
|
+
export { dateTimeFormat };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
//#region src/documentLang/documentLang.d.ts
|
|
1
2
|
/**
|
|
2
3
|
* Copyright IBM Corp. 2025
|
|
3
4
|
*
|
|
@@ -11,7 +12,7 @@ type Subscriber = (lang: string) => void;
|
|
|
11
12
|
*
|
|
12
13
|
* @returns {string} The current document language code.
|
|
13
14
|
*/
|
|
14
|
-
|
|
15
|
+
declare function getDocumentLang(): string;
|
|
15
16
|
/**
|
|
16
17
|
* Subscribes to changes on the `<html>` element's `lang` attribute.
|
|
17
18
|
* Uses a shared MutationObserver under the hood to watch for attribute
|
|
@@ -21,5 +22,6 @@ export declare function getDocumentLang(): string;
|
|
|
21
22
|
* it changes.
|
|
22
23
|
* @returns {() => void} A function that, when called, removes this subscription
|
|
23
24
|
*/
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
declare function subscribeDocumentLangChange(callback: Subscriber): () => void;
|
|
26
|
+
//#endregion
|
|
27
|
+
export { getDocumentLang, subscribeDocumentLangChange };
|
package/es/documentLang/index.js
CHANGED
|
@@ -1 +1,69 @@
|
|
|
1
|
-
|
|
1
|
+
//#region src/documentLang/documentLang.ts
|
|
2
|
+
/**
|
|
3
|
+
* Copyright IBM Corp. 2025
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
const isBrowser = typeof document !== "undefined";
|
|
9
|
+
let currentLang = isBrowser ? document.documentElement.lang : "";
|
|
10
|
+
let updateScheduled = false;
|
|
11
|
+
let subscribers = [];
|
|
12
|
+
let observerInitialized = false;
|
|
13
|
+
/**
|
|
14
|
+
* Internal callback for MutationObserver to dispatch lang changes.
|
|
15
|
+
* debounced into a microtask, and avoiding redundant notifications.
|
|
16
|
+
*/
|
|
17
|
+
function handleMutations() {
|
|
18
|
+
if (!isBrowser) return;
|
|
19
|
+
if (updateScheduled) return;
|
|
20
|
+
updateScheduled = true;
|
|
21
|
+
queueMicrotask(() => {
|
|
22
|
+
updateScheduled = false;
|
|
23
|
+
const newLang = document.documentElement.lang;
|
|
24
|
+
if (newLang === currentLang) return;
|
|
25
|
+
currentLang = newLang;
|
|
26
|
+
for (const callback of subscribers) callback(newLang);
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Initializes a shared MutationObserver for the <html> lang attribute.
|
|
31
|
+
*/
|
|
32
|
+
function initObserver() {
|
|
33
|
+
if (!isBrowser || observerInitialized) return;
|
|
34
|
+
observerInitialized = true;
|
|
35
|
+
new MutationObserver(handleMutations).observe(document.documentElement, {
|
|
36
|
+
attributes: true,
|
|
37
|
+
attributeFilter: ["lang"]
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Retrieves the current document language. Falls back to the browser's
|
|
42
|
+
* `navigator.language` if the `<html>` lang attribute is empty.
|
|
43
|
+
*
|
|
44
|
+
* @returns {string} The current document language code.
|
|
45
|
+
*/
|
|
46
|
+
function getDocumentLang() {
|
|
47
|
+
return isBrowser ? document.documentElement.lang || window.navigator.language || "" : "";
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Subscribes to changes on the `<html>` element's `lang` attribute.
|
|
51
|
+
* Uses a shared MutationObserver under the hood to watch for attribute
|
|
52
|
+
* mutations.
|
|
53
|
+
*
|
|
54
|
+
* @param {Subscriber} callback - Invoked with the new language code whenever
|
|
55
|
+
* it changes.
|
|
56
|
+
* @returns {() => void} A function that, when called, removes this subscription
|
|
57
|
+
*/
|
|
58
|
+
function subscribeDocumentLangChange(callback) {
|
|
59
|
+
if (!isBrowser) return () => {};
|
|
60
|
+
if (!observerInitialized) initObserver();
|
|
61
|
+
subscribers.push(callback);
|
|
62
|
+
return () => {
|
|
63
|
+
subscribers = subscribers.filter((cb) => cb !== callback);
|
|
64
|
+
if (subscribers.length === 0) observerInitialized = false;
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
//#endregion
|
|
69
|
+
export { getDocumentLang, subscribeDocumentLangChange };
|
package/es/index.d.ts
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { a as InitCarousel, i as Config, n as CarouselResponse, o as TranslationKey, r as CarouselStackHistory, t as initCarousel } from "./chunk-DPUOAfLB.js";
|
|
2
|
+
import { datePartsOrder } from "./datePartsOrder/index.js";
|
|
3
|
+
import { dateTimeFormat } from "./dateTimeFormat/index.js";
|
|
4
|
+
import { getDocumentLang, subscribeDocumentLangChange } from "./documentLang/index.js";
|
|
5
|
+
import { makeDraggable } from "./makeDraggable/index.js";
|
|
6
|
+
import { OverflowHandler, OverflowHandlerOptions, UpdateOverflowHandlerOptions, createOverflowHandler, getSize, updateOverflowHandler } from "./overflowHandler/index.js";
|
|
7
|
+
export * from "@internationalized/number";
|
|
8
|
+
export { CarouselResponse, CarouselStackHistory, Config, InitCarousel, OverflowHandler, OverflowHandlerOptions, TranslationKey, UpdateOverflowHandlerOptions, createOverflowHandler, datePartsOrder, dateTimeFormat, getDocumentLang, getSize, initCarousel, makeDraggable, subscribeDocumentLangChange, updateOverflowHandler };
|
package/es/index.js
CHANGED
|
@@ -1 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import { t as initCarousel } from "./chunk-Ci2WlFE4.js";
|
|
2
|
+
import { datePartsOrder } from "./datePartsOrder/index.js";
|
|
3
|
+
import { dateTimeFormat } from "./dateTimeFormat/index.js";
|
|
4
|
+
import { getDocumentLang, subscribeDocumentLangChange } from "./documentLang/index.js";
|
|
5
|
+
import { makeDraggable } from "./makeDraggable/index.js";
|
|
6
|
+
import { createOverflowHandler, getSize, updateOverflowHandler } from "./overflowHandler/index.js";
|
|
7
|
+
|
|
8
|
+
export * from "@internationalized/number"
|
|
9
|
+
|
|
10
|
+
export { createOverflowHandler, datePartsOrder, dateTimeFormat, getDocumentLang, getSize, initCarousel, makeDraggable, subscribeDocumentLangChange, updateOverflowHandler };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
//#region src/makeDraggable/makeDraggable.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* Copyright IBM Corp. 2025, 2025
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
interface DraggableProps {
|
|
9
|
+
/**
|
|
10
|
+
* HTML element to move.
|
|
11
|
+
*/
|
|
12
|
+
el: HTMLElement;
|
|
13
|
+
/**
|
|
14
|
+
* HTML element to initiate the drag (e.g., header).
|
|
15
|
+
*/
|
|
16
|
+
dragHandle?: HTMLElement;
|
|
17
|
+
/**
|
|
18
|
+
* HTML element to focus on drag for keyboard interaction (e.g., Drag Icon).
|
|
19
|
+
*/
|
|
20
|
+
focusableDragHandle?: HTMLElement;
|
|
21
|
+
/**
|
|
22
|
+
* Pixel value that defines the distance to move when dragging with arrow
|
|
23
|
+
* keys.
|
|
24
|
+
*/
|
|
25
|
+
dragStep?: number;
|
|
26
|
+
/**
|
|
27
|
+
* Pixel value that defines the distance to move when dragging with
|
|
28
|
+
* shift+arrow keys.
|
|
29
|
+
*/
|
|
30
|
+
shiftDragStep?: number;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Makes a given element draggable using a handle element.
|
|
34
|
+
*@param draggable - object which accepts el and optional attributes handle,focusableInHandle,dragStep and shiftDragStep
|
|
35
|
+
*/
|
|
36
|
+
declare const makeDraggable: ({
|
|
37
|
+
el,
|
|
38
|
+
dragHandle,
|
|
39
|
+
focusableDragHandle,
|
|
40
|
+
dragStep,
|
|
41
|
+
shiftDragStep
|
|
42
|
+
}: DraggableProps) => {
|
|
43
|
+
cleanup: () => void;
|
|
44
|
+
};
|
|
45
|
+
//#endregion
|
|
46
|
+
export { makeDraggable };
|
|
@@ -1 +1,82 @@
|
|
|
1
|
-
|
|
1
|
+
//#region src/makeDraggable/makeDraggable.ts
|
|
2
|
+
/**
|
|
3
|
+
* Makes a given element draggable using a handle element.
|
|
4
|
+
*@param draggable - object which accepts el and optional attributes handle,focusableInHandle,dragStep and shiftDragStep
|
|
5
|
+
*/
|
|
6
|
+
const makeDraggable = ({ el, dragHandle, focusableDragHandle, dragStep, shiftDragStep }) => {
|
|
7
|
+
if (dragHandle) {
|
|
8
|
+
dragHandle.style.cursor = "move";
|
|
9
|
+
el.style.cursor = "default";
|
|
10
|
+
} else el.style.cursor = "move";
|
|
11
|
+
let isDragging = false;
|
|
12
|
+
let offsetX = 0;
|
|
13
|
+
let offsetY = 0;
|
|
14
|
+
const dispatch = (type, detail) => {
|
|
15
|
+
const eventInit = {
|
|
16
|
+
detail,
|
|
17
|
+
bubbles: true
|
|
18
|
+
};
|
|
19
|
+
el.dispatchEvent(new CustomEvent(type, eventInit));
|
|
20
|
+
};
|
|
21
|
+
const onKeyDown = (e) => {
|
|
22
|
+
if (e.key === "Enter") isDragging = !isDragging;
|
|
23
|
+
if (isDragging) dispatch("dragstart", { keyboard: true });
|
|
24
|
+
else dispatch("dragend", { keyboard: true });
|
|
25
|
+
if (!isDragging) return;
|
|
26
|
+
const distance = e.shiftKey ? shiftDragStep ?? 32 : dragStep ?? 8;
|
|
27
|
+
switch (e.key) {
|
|
28
|
+
case "Enter":
|
|
29
|
+
case " ":
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
break;
|
|
32
|
+
case "ArrowLeft":
|
|
33
|
+
el.style.left = `${el.offsetLeft - distance}px`;
|
|
34
|
+
break;
|
|
35
|
+
case "ArrowRight":
|
|
36
|
+
el.style.left = `${el.offsetLeft + distance}px`;
|
|
37
|
+
break;
|
|
38
|
+
case "ArrowUp":
|
|
39
|
+
el.style.top = `${el.offsetTop - distance}px`;
|
|
40
|
+
break;
|
|
41
|
+
case "ArrowDown":
|
|
42
|
+
el.style.top = `${el.offsetTop + distance}px`;
|
|
43
|
+
break;
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const onMouseDown = (e) => {
|
|
47
|
+
const target = e.target;
|
|
48
|
+
if (!(target instanceof Node)) return;
|
|
49
|
+
if (!(dragHandle ? dragHandle.contains(target) : el.contains(target))) return;
|
|
50
|
+
offsetX = e.clientX - el.offsetLeft;
|
|
51
|
+
offsetY = e.clientY - el.offsetTop;
|
|
52
|
+
isDragging = true;
|
|
53
|
+
dispatch("dragstart", { mouse: true });
|
|
54
|
+
document.addEventListener("mousemove", onMouseMove);
|
|
55
|
+
document.addEventListener("mouseup", onMouseUp, { once: true });
|
|
56
|
+
};
|
|
57
|
+
const onMouseMove = (e) => {
|
|
58
|
+
if (!isDragging) return;
|
|
59
|
+
el.style.left = `${e.clientX - offsetX}px`;
|
|
60
|
+
el.style.top = `${e.clientY - offsetY}px`;
|
|
61
|
+
};
|
|
62
|
+
const onMouseUp = () => {
|
|
63
|
+
if (!isDragging) return;
|
|
64
|
+
isDragging = false;
|
|
65
|
+
dispatch("dragend", { mouse: true });
|
|
66
|
+
document.removeEventListener("mousemove", onMouseMove);
|
|
67
|
+
};
|
|
68
|
+
if (dragHandle) dragHandle.addEventListener("mousedown", onMouseDown);
|
|
69
|
+
else el.addEventListener("mousedown", onMouseDown);
|
|
70
|
+
focusableDragHandle?.addEventListener("keydown", onKeyDown);
|
|
71
|
+
const draggableCleanup = () => {
|
|
72
|
+
if (dragHandle) dragHandle.removeEventListener("mousedown", onMouseDown);
|
|
73
|
+
else el.removeEventListener("mousedown", onMouseDown);
|
|
74
|
+
focusableDragHandle?.removeEventListener("keydown", onKeyDown);
|
|
75
|
+
document.removeEventListener("mousemove", onMouseMove);
|
|
76
|
+
document.removeEventListener("mouseup", onMouseUp);
|
|
77
|
+
};
|
|
78
|
+
return { cleanup: draggableCleanup };
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
//#endregion
|
|
82
|
+
export { makeDraggable };
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
//#region src/overflowHandler/overflowHandler.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* Copyright IBM Corp. 2025, 2026
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Calculates the size (width or height) of a given HTML element.
|
|
10
|
+
*
|
|
11
|
+
* This function performs an expensive calculation by temporarily changing the
|
|
12
|
+
* display style of the element if it is not currently visible. It then uses
|
|
13
|
+
* `getBoundingClientRect` to retrieve the size of the element.
|
|
14
|
+
*
|
|
15
|
+
* @param el - The HTML element whose size is to be calculated.
|
|
16
|
+
* @param dimension - The dimension to measure ('width' or 'height').
|
|
17
|
+
* @returns The size of the element in pixels. Returns 0 if the element is not provided.
|
|
18
|
+
*/
|
|
19
|
+
declare function getSize(el: HTMLElement | undefined, dimension: 'width' | 'height'): number;
|
|
20
|
+
/**
|
|
21
|
+
* Options for updating the overflow handler.
|
|
22
|
+
* Determines which items should be visible and which should be hidden
|
|
23
|
+
* based on the container size, item sizes, and other constraints.
|
|
24
|
+
*/
|
|
25
|
+
interface UpdateOverflowHandlerOptions {
|
|
26
|
+
/** The container element that holds the items. */
|
|
27
|
+
container: HTMLElement;
|
|
28
|
+
/** An array of item elements to be managed for overflow. */
|
|
29
|
+
items: HTMLElement[];
|
|
30
|
+
/** An element that represents the offset, which can be shown or hidden based on overflow. Identified by `data-offset` attribute. */
|
|
31
|
+
offset: HTMLElement | undefined;
|
|
32
|
+
/** An array of sizes corresponding to each item in the `items` array. */
|
|
33
|
+
sizes: number[];
|
|
34
|
+
/** An array of sizes corresponding to each item in the fixed items array. */
|
|
35
|
+
fixedSizes: number[];
|
|
36
|
+
/** The size of the offset element. */
|
|
37
|
+
offsetSize: number;
|
|
38
|
+
/** The maximum number of items that can be visible at once. If undefined, all items can be visible. */
|
|
39
|
+
maxVisibleItems?: number;
|
|
40
|
+
/** The dimension to consider for overflow, either 'width' or 'height'. */
|
|
41
|
+
dimension: 'width' | 'height';
|
|
42
|
+
/** A callback function that is called when the visible or hidden items change. */
|
|
43
|
+
onChange: (visibleItems: HTMLElement[], hiddenItems: HTMLElement[]) => void;
|
|
44
|
+
/** An array of previously hidden items to compare against the new hidden items. */
|
|
45
|
+
previousHiddenItems?: HTMLElement[];
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Updates the overflow handler by determining which items should be visible and which should be hidden.
|
|
49
|
+
*
|
|
50
|
+
* @param options - Configuration options for updating the overflow handler.
|
|
51
|
+
* @returns An array of hidden items after the update.
|
|
52
|
+
*/
|
|
53
|
+
declare function updateOverflowHandler({
|
|
54
|
+
container,
|
|
55
|
+
items,
|
|
56
|
+
offset,
|
|
57
|
+
sizes,
|
|
58
|
+
fixedSizes,
|
|
59
|
+
offsetSize,
|
|
60
|
+
maxVisibleItems,
|
|
61
|
+
dimension,
|
|
62
|
+
onChange,
|
|
63
|
+
previousHiddenItems
|
|
64
|
+
}: UpdateOverflowHandlerOptions): HTMLElement[];
|
|
65
|
+
/**
|
|
66
|
+
* Options for initializing an overflow handler.
|
|
67
|
+
*/
|
|
68
|
+
interface OverflowHandlerOptions {
|
|
69
|
+
/**
|
|
70
|
+
* The container element that holds the items. along with offset item
|
|
71
|
+
*/
|
|
72
|
+
container: HTMLElement;
|
|
73
|
+
/**
|
|
74
|
+
* Maximum number of visible items. If provided, only this number of items will be shown.
|
|
75
|
+
*/
|
|
76
|
+
maxVisibleItems?: number;
|
|
77
|
+
/**
|
|
78
|
+
* Callback function invoked when the visible and hidden items change.
|
|
79
|
+
* @param visibleItems - The array of items that are currently visible.
|
|
80
|
+
* @param hiddenItems - The array of items that are currently hidden.
|
|
81
|
+
*/
|
|
82
|
+
onChange: (visibleItems: HTMLElement[], hiddenItems: HTMLElement[]) => void;
|
|
83
|
+
/**
|
|
84
|
+
* The dimension to consider for overflow calculations. Defaults to 'width'.
|
|
85
|
+
*/
|
|
86
|
+
dimension?: 'width' | 'height';
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* Represents an instance of an overflow handler.
|
|
90
|
+
*/
|
|
91
|
+
interface OverflowHandler {
|
|
92
|
+
/**
|
|
93
|
+
* Disconnects the overflow handler, cleaning up any event listeners or resources.
|
|
94
|
+
*/
|
|
95
|
+
disconnect: () => void;
|
|
96
|
+
}
|
|
97
|
+
declare function createOverflowHandler({
|
|
98
|
+
container,
|
|
99
|
+
maxVisibleItems,
|
|
100
|
+
onChange,
|
|
101
|
+
dimension
|
|
102
|
+
}: OverflowHandlerOptions): OverflowHandler;
|
|
103
|
+
//#endregion
|
|
104
|
+
export { OverflowHandler, OverflowHandlerOptions, UpdateOverflowHandlerOptions, createOverflowHandler, getSize, updateOverflowHandler };
|
|
@@ -1 +1,95 @@
|
|
|
1
|
-
|
|
1
|
+
//#region src/overflowHandler/overflowHandler.ts
|
|
2
|
+
/**
|
|
3
|
+
* Copyright IBM Corp. 2025, 2026
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Calculates the size (width or height) of a given HTML element.
|
|
10
|
+
*
|
|
11
|
+
* This function performs an expensive calculation by temporarily changing the
|
|
12
|
+
* display style of the element if it is not currently visible. It then uses
|
|
13
|
+
* `getBoundingClientRect` to retrieve the size of the element.
|
|
14
|
+
*
|
|
15
|
+
* @param el - The HTML element whose size is to be calculated.
|
|
16
|
+
* @param dimension - The dimension to measure ('width' or 'height').
|
|
17
|
+
* @returns The size of the element in pixels. Returns 0 if the element is not provided.
|
|
18
|
+
*/
|
|
19
|
+
function getSize(el, dimension) {
|
|
20
|
+
if (!el) return 0;
|
|
21
|
+
const originalDisplay = el.style.display;
|
|
22
|
+
if (!el.offsetParent && getComputedStyle(el).display === "none") el.style.display = "inline-block";
|
|
23
|
+
const size = el.getBoundingClientRect()[dimension];
|
|
24
|
+
el.style.display = originalDisplay;
|
|
25
|
+
return size;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Updates the overflow handler by determining which items should be visible and which should be hidden.
|
|
29
|
+
*
|
|
30
|
+
* @param options - Configuration options for updating the overflow handler.
|
|
31
|
+
* @returns An array of hidden items after the update.
|
|
32
|
+
*/
|
|
33
|
+
function updateOverflowHandler({ container, items, offset, sizes, fixedSizes, offsetSize, maxVisibleItems, dimension, onChange, previousHiddenItems = [] }) {
|
|
34
|
+
const containerSize = dimension === "width" ? container.clientWidth : container.clientHeight;
|
|
35
|
+
let visibleItems = [];
|
|
36
|
+
let hiddenItems = [];
|
|
37
|
+
const totalSize = sizes.reduce((sum, size) => sum + size, 0);
|
|
38
|
+
const totalFixedSize = fixedSizes.reduce((sum, size) => sum + size, 0);
|
|
39
|
+
if (totalSize + totalFixedSize <= containerSize) {
|
|
40
|
+
visibleItems = maxVisibleItems ? items.slice(0, maxVisibleItems) : [...items];
|
|
41
|
+
hiddenItems = maxVisibleItems ? items.slice(maxVisibleItems) : [];
|
|
42
|
+
} else {
|
|
43
|
+
const available = containerSize - offsetSize;
|
|
44
|
+
let accumulated = 0;
|
|
45
|
+
for (let i = 0; i < items.length; i++) {
|
|
46
|
+
const size = sizes[i];
|
|
47
|
+
if (accumulated + size + totalFixedSize <= available && (!maxVisibleItems || visibleItems.length < maxVisibleItems)) {
|
|
48
|
+
visibleItems.push(items[i]);
|
|
49
|
+
accumulated += size;
|
|
50
|
+
} else hiddenItems.push(items[i]);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
if (previousHiddenItems.length === hiddenItems.length && previousHiddenItems.every((item, index) => item === hiddenItems[index])) return previousHiddenItems;
|
|
54
|
+
visibleItems.forEach((item) => item.removeAttribute("data-hidden"));
|
|
55
|
+
hiddenItems.forEach((item) => item.setAttribute("data-hidden", ""));
|
|
56
|
+
if (offset) offset.toggleAttribute("data-hidden", hiddenItems.length === 0);
|
|
57
|
+
onChange(visibleItems, hiddenItems);
|
|
58
|
+
return hiddenItems;
|
|
59
|
+
}
|
|
60
|
+
function createOverflowHandler({ container, maxVisibleItems, onChange, dimension = "width" }) {
|
|
61
|
+
if (!(container instanceof HTMLElement)) throw new Error("container must be an HTMLElement");
|
|
62
|
+
if (typeof onChange !== "function") throw new Error("onChange must be a function");
|
|
63
|
+
if (maxVisibleItems !== void 0 && (!Number.isInteger(maxVisibleItems) || maxVisibleItems <= 0)) throw new Error("maxVisibleItems must be a positive integer");
|
|
64
|
+
const children = Array.from(container.children).filter((item) => item instanceof HTMLElement);
|
|
65
|
+
const offset = children.find((item) => item.hasAttribute("data-offset"));
|
|
66
|
+
const fixedItems = children.filter((item) => item.hasAttribute("data-fixed"));
|
|
67
|
+
const items = children.filter((item) => item !== offset && !fixedItems.includes(item));
|
|
68
|
+
const fixedSizes = fixedItems.map((item) => getSize(item, dimension));
|
|
69
|
+
const sizes = items.map((item) => getSize(item, dimension));
|
|
70
|
+
const offsetSize = getSize(offset, dimension);
|
|
71
|
+
let previousHiddenItems = [];
|
|
72
|
+
function update() {
|
|
73
|
+
previousHiddenItems = updateOverflowHandler({
|
|
74
|
+
container,
|
|
75
|
+
items,
|
|
76
|
+
offset,
|
|
77
|
+
sizes,
|
|
78
|
+
fixedSizes,
|
|
79
|
+
offsetSize,
|
|
80
|
+
maxVisibleItems,
|
|
81
|
+
dimension,
|
|
82
|
+
onChange,
|
|
83
|
+
previousHiddenItems
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
const resizeObserver = new ResizeObserver(() => requestAnimationFrame(update));
|
|
87
|
+
resizeObserver.observe(container);
|
|
88
|
+
requestAnimationFrame(update);
|
|
89
|
+
return { disconnect() {
|
|
90
|
+
resizeObserver.disconnect();
|
|
91
|
+
} };
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
//#endregion
|
|
95
|
+
export { createOverflowHandler, getSize, updateOverflowHandler };
|
package/lib/carousel/index.js
CHANGED
|
@@ -1 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
2
|
+
const require_carousel = require('../chunk-C5VBwGBG.js');
|
|
3
|
+
|
|
4
|
+
exports.initCarousel = require_carousel.initCarousel;
|