@design-factory/core 21.1.0 → 22.0.0-next.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/{accordion-D9ba0XYq.js → accordion-DUFLBQkV.js} +90 -28
- package/alert-Db6cG6JE.js +125 -0
- package/{collapse-Bn8iHKrd.js → collapse-D8Jo56k9.js} +2 -2
- package/{common-DFyZvkII.js → common-CP4amR0Z.js} +2 -2
- package/components/accordion/accordion.d.ts +80 -22
- package/components/accordion/index.js +1 -1
- package/components/alert/alert.d.ts +77 -8
- package/components/alert/common.d.ts +9 -9
- package/components/alert/index.js +2 -3
- package/components/carousel/index.js +2 -2
- package/components/collapse/index.js +1 -1
- package/components/drawer/drawer.d.ts +13 -0
- package/components/drawer/index.js +1 -1
- package/components/dropdown/dropdown.d.ts +110 -0
- package/components/dropdown/index.d.ts +1 -0
- package/components/dropdown/index.js +5 -0
- package/components/modal/index.js +1 -1
- package/components/pagination/index.js +1 -1
- package/components/progressbar/index.js +1 -1
- package/components/rating/index.js +1 -1
- package/components/slider/index.js +1 -1
- package/components/slider/slider.d.ts +23 -4
- package/components/toast/index.js +1 -1
- package/components/tooltip/index.d.ts +1 -0
- package/components/tooltip/index.js +174 -0
- package/components/tooltip/tooltip.d.ts +63 -0
- package/components/tree/index.js +1 -1
- package/{directive-CNNSo5Yn.js → directive-CMT2vEDg.js} +7 -4
- package/{drawer-CoBXUPyv.js → drawer-D4xSbhcT.js} +19 -5
- package/dropdown-Bjj2ql6d.js +246 -0
- package/index.d.ts +3 -1
- package/index.js +45 -39
- package/isFocusable-C2iRr0zh.js +72 -0
- package/{modal-BH9nrwVz.js → modal-CQWh2Sm5.js} +3 -3
- package/package.json +1 -1
- package/{pagination-BQWusWXN.js → pagination-DIRcpdRE.js} +2 -2
- package/{progressbar-S1pNn5rM.js → progressbar-Bth8r3Qu.js} +2 -2
- package/{promise-D-RZVPuv.js → promise-CkIc0KKt.js} +3 -3
- package/{rating-DWgGgwk3.js → rating-DLsgFSyB.js} +2 -2
- package/services/extendWidget.d.ts +1 -1
- package/services/focusElement.js +2 -2
- package/services/focustrack.js +2 -2
- package/services/matchMedia.js +1 -1
- package/services/mousetrack.d.ts +34 -0
- package/services/mousetrack.js +41 -0
- package/services/navManager.js +2 -2
- package/services/pointerdownPosition.js +1 -1
- package/services/portal.js +1 -1
- package/services/positioning.d.ts +101 -0
- package/services/positioning.js +104 -0
- package/services/resizeObserver.js +1 -1
- package/services/siblingsInert.js +1 -1
- package/services/transitions/baseTransitions.js +8 -8
- package/services/transitions/collapse.d.ts +4 -0
- package/services/transitions/collapse.js +23 -19
- package/services/transitions/cssTransitions.js +2 -2
- package/services/transitions/simpleClassTransition.js +1 -1
- package/{slider-Br_Qiopx.js → slider-tH5g55yQ.js} +132 -97
- package/{toaster-BUBzFeJM.js → toaster-BS9qeRLF.js} +3 -3
- package/{tree-vD7ZkV8Z.js → tree-DW6iLxdw.js} +2 -2
- package/types.d.ts +8 -1
- package/utils/debounceSignal.d.ts +11 -0
- package/utils/debounceSignal.js +18 -0
- package/utils/directive.js +1 -1
- package/utils/edgeState.d.ts +23 -0
- package/utils/edgeState.js +43 -0
- package/utils/internal/isFocusable.d.ts +40 -0
- package/utils/stores.d.ts +2 -16
- package/utils/stores.js +5 -24
- package/utils/writables.d.ts +27 -13
- package/utils/writables.js +12 -11
- package/{writables-DYGjj5T3.js → writables-_7BriMb2.js} +37 -12
- package/accordion-B0vs8JWM.cjs +0 -314
- package/alert-AhaliJ17.cjs +0 -9
- package/alert-Cb9FhbFQ.js +0 -10
- package/collapse-BnWw4Hnc.cjs +0 -94
- package/common-B5jS-Ih_.cjs +0 -73
- package/components/accordion/index.cjs +0 -7
- package/components/alert/index.cjs +0 -5
- package/components/carousel/index.cjs +0 -292
- package/components/collapse/index.cjs +0 -5
- package/components/drawer/index.cjs +0 -5
- package/components/modal/index.cjs +0 -8
- package/components/pagination/index.cjs +0 -5
- package/components/progressbar/index.cjs +0 -5
- package/components/rating/index.cjs +0 -5
- package/components/slider/index.cjs +0 -5
- package/components/toast/index.cjs +0 -7
- package/components/tree/index.cjs +0 -5
- package/config.cjs +0 -36
- package/directive-DyTodNPd.cjs +0 -523
- package/drawer-Ca_ktkEs.cjs +0 -328
- package/index.cjs +0 -134
- package/isFocusable-Ckwus82R.js +0 -32
- package/isFocusable-DfzDLeAN.cjs +0 -31
- package/modal-Dxdw2Pkv.cjs +0 -252
- package/pagination-BLVa1UsZ.cjs +0 -254
- package/progressbar-RopgvVeA.cjs +0 -86
- package/promise-CxCD3NYv.cjs +0 -118
- package/rating-DZ3OQgtt.cjs +0 -183
- package/scrollbars-f651ntzz.cjs +0 -33
- package/services/extendWidget.cjs +0 -41
- package/services/floatingUI.cjs +0 -111
- package/services/floatingUI.d.ts +0 -76
- package/services/floatingUI.js +0 -111
- package/services/focusElement.cjs +0 -46
- package/services/focustrack.cjs +0 -47
- package/services/hash.cjs +0 -15
- package/services/intersection.cjs +0 -53
- package/services/matchMedia.cjs +0 -14
- package/services/navManager.cjs +0 -166
- package/services/pointerdownPosition.cjs +0 -60
- package/services/portal.cjs +0 -42
- package/services/resizeObserver.cjs +0 -54
- package/services/siblingsInert.cjs +0 -44
- package/services/transitions/baseTransitions.cjs +0 -186
- package/services/transitions/collapse.cjs +0 -40
- package/services/transitions/cssTransitions.cjs +0 -32
- package/services/transitions/simpleClassTransition.cjs +0 -37
- package/slider-pgDq1V5r.cjs +0 -807
- package/textDirection-zqcZ5-eK.cjs +0 -3
- package/toaster-Dlube4Ya.cjs +0 -161
- package/tree-Chcy4ulJ.cjs +0 -228
- package/types.cjs +0 -6
- package/utils/directive.cjs +0 -28
- package/utils/func.cjs +0 -7
- package/utils/id.cjs +0 -5
- package/utils/stores.cjs +0 -172
- package/utils/widget.cjs +0 -8
- package/utils/writables.cjs +0 -16
- package/writables-Dt68gADJ.cjs +0 -102
|
@@ -221,10 +221,13 @@ function clsx() {
|
|
|
221
221
|
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
222
222
|
return n;
|
|
223
223
|
}
|
|
224
|
-
const isBrowserHTMLElement = BROWSER ? (
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
224
|
+
const isBrowserHTMLElement = BROWSER ? (
|
|
225
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
226
|
+
((element) => {
|
|
227
|
+
const contentWindow = element?.ownerDocument?.defaultView ?? window;
|
|
228
|
+
return element instanceof contentWindow.HTMLElement;
|
|
229
|
+
})
|
|
230
|
+
) : (
|
|
228
231
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
229
232
|
((element) => false)
|
|
230
233
|
);
|
|
@@ -4,12 +4,12 @@ import { createPointerdownPositionDirective } from "./services/pointerdownPositi
|
|
|
4
4
|
import { portal } from "./services/portal.js";
|
|
5
5
|
import { siblingsInert } from "./services/siblingsInert.js";
|
|
6
6
|
import { createTransition } from "./services/transitions/baseTransitions.js";
|
|
7
|
-
import { b as bindDirective, i as createBrowserStoreDirective, s as mergeDirectives, g as createAttributesDirective, q as isBrowserHTMLElement, f as conditionalDirective, o as directiveSubscribe } from "./directive-
|
|
7
|
+
import { b as bindDirective, i as createBrowserStoreDirective, s as mergeDirectives, g as createAttributesDirective, q as isBrowserHTMLElement, f as conditionalDirective, o as directiveSubscribe } from "./directive-CMT2vEDg.js";
|
|
8
8
|
import { noop } from "./utils/func.js";
|
|
9
9
|
import { a as revertScrollbars, r as removeScrollbars } from "./scrollbars-ChGk75QR.js";
|
|
10
10
|
import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
|
|
11
11
|
import { createWidgetFactory } from "./utils/widget.js";
|
|
12
|
-
import {
|
|
12
|
+
import { d as typeBoolean, j as typeNumberOrNull, f as typeFunction, g as typeHTMLElementOrNull, k as typeString, e as typeBooleanOrNull, c as createTypeEnum } from "./writables-_7BriMb2.js";
|
|
13
13
|
import { g as getTextDirection } from "./textDirection-cNgt24LJ.js";
|
|
14
14
|
function getDrawerDefaultConfig() {
|
|
15
15
|
return {
|
|
@@ -18,6 +18,7 @@ function getDrawerDefaultConfig() {
|
|
|
18
18
|
}
|
|
19
19
|
const defaultDrawerConfig = {
|
|
20
20
|
animated: true,
|
|
21
|
+
backdropAnimated: null,
|
|
21
22
|
ariaDescribedBy: "",
|
|
22
23
|
ariaLabelledBy: "",
|
|
23
24
|
backdropClass: "",
|
|
@@ -36,6 +37,7 @@ const defaultDrawerConfig = {
|
|
|
36
37
|
onResizingChange: noop,
|
|
37
38
|
resizable: false,
|
|
38
39
|
backdrop: true,
|
|
40
|
+
closeOnBackdropClick: true,
|
|
39
41
|
bodyScroll: false,
|
|
40
42
|
size: null,
|
|
41
43
|
focusOnInit: true,
|
|
@@ -44,6 +46,7 @@ const defaultDrawerConfig = {
|
|
|
44
46
|
};
|
|
45
47
|
const configValidator = {
|
|
46
48
|
animated: typeBoolean,
|
|
49
|
+
backdropAnimated: typeBooleanOrNull,
|
|
47
50
|
ariaDescribedBy: typeString,
|
|
48
51
|
ariaLabelledBy: typeString,
|
|
49
52
|
backdropClass: typeString,
|
|
@@ -62,6 +65,7 @@ const configValidator = {
|
|
|
62
65
|
onResizingChange: typeFunction,
|
|
63
66
|
resizable: typeBoolean,
|
|
64
67
|
backdrop: typeBoolean,
|
|
68
|
+
closeOnBackdropClick: typeBoolean,
|
|
65
69
|
bodyScroll: typeBoolean,
|
|
66
70
|
size: typeNumberOrNull,
|
|
67
71
|
focusOnInit: typeBoolean,
|
|
@@ -73,6 +77,7 @@ const createDrawer = createWidgetFactory(
|
|
|
73
77
|
(config) => {
|
|
74
78
|
const [
|
|
75
79
|
{
|
|
80
|
+
backdropAnimated$: _backdropAnimated$,
|
|
76
81
|
backdrop$: _backdrop$,
|
|
77
82
|
backdropTransition$,
|
|
78
83
|
backdropClass$,
|
|
@@ -96,6 +101,7 @@ const createDrawer = createWidgetFactory(
|
|
|
96
101
|
focusOnInit$,
|
|
97
102
|
configuration$,
|
|
98
103
|
position$,
|
|
104
|
+
closeOnBackdropClick$,
|
|
99
105
|
...stateProps
|
|
100
106
|
},
|
|
101
107
|
patch
|
|
@@ -156,9 +162,13 @@ const createDrawer = createWidgetFactory(
|
|
|
156
162
|
}
|
|
157
163
|
}))
|
|
158
164
|
);
|
|
165
|
+
const backdropAnimated$ = asWritable(
|
|
166
|
+
computed(() => _backdropAnimated$() ?? animated$()),
|
|
167
|
+
(val) => _backdropAnimated$.set(val)
|
|
168
|
+
);
|
|
159
169
|
const backdropTransition = createTransition({
|
|
160
170
|
props: {
|
|
161
|
-
animated:
|
|
171
|
+
animated: backdropAnimated$,
|
|
162
172
|
transition: backdropTransition$
|
|
163
173
|
}
|
|
164
174
|
});
|
|
@@ -189,7 +199,11 @@ const createDrawer = createWidgetFactory(
|
|
|
189
199
|
"data-agnos-ignore-inert": true$
|
|
190
200
|
},
|
|
191
201
|
events: {
|
|
192
|
-
click: () =>
|
|
202
|
+
click: () => {
|
|
203
|
+
if (closeOnBackdropClick$()) {
|
|
204
|
+
void transition.api.hide();
|
|
205
|
+
}
|
|
206
|
+
}
|
|
193
207
|
}
|
|
194
208
|
}));
|
|
195
209
|
const direction$ = computed(() => {
|
|
@@ -222,11 +236,11 @@ const createDrawer = createWidgetFactory(
|
|
|
222
236
|
let isResizing = false;
|
|
223
237
|
return {
|
|
224
238
|
onMove(event2) {
|
|
225
|
-
setSize(startSize + directionFactor * direction * (event2[clientXorY] - startPos));
|
|
226
239
|
if (!isResizing) {
|
|
227
240
|
isResizing = true;
|
|
228
241
|
onResizingChange$()(true);
|
|
229
242
|
}
|
|
243
|
+
setSize(startSize + directionFactor * direction * (event2[clientXorY] - startPos));
|
|
230
244
|
},
|
|
231
245
|
onEnd() {
|
|
232
246
|
drawerElement.style[isVertical ? "height" : "width"] = "";
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import { computed, readable, derived } from "@amadeus-it-group/tansu";
|
|
2
|
+
import { createHasFocus } from "./services/focustrack.js";
|
|
3
|
+
import { createNavManager } from "./services/navManager.js";
|
|
4
|
+
import { typePlacementArray, createPositioning } from "./services/positioning.js";
|
|
5
|
+
import { s as mergeDirectives, g as createAttributesDirective, d as browserDirective, o as directiveSubscribe, b as bindDirective } from "./directive-CMT2vEDg.js";
|
|
6
|
+
import { noop } from "./utils/func.js";
|
|
7
|
+
import { generateId } from "./utils/id.js";
|
|
8
|
+
import { i as isFocusable, f as findPreviousFocusableElement, a as findNextFocusableElement, b as findNextElementSkippingSubtree, c as findNextElement } from "./isFocusable-C2iRr0zh.js";
|
|
9
|
+
import { writablesForProps, bindableProp, stateStores } from "./utils/stores.js";
|
|
10
|
+
import { createWidgetFactory } from "./utils/widget.js";
|
|
11
|
+
import { f as typeFunction, d as typeBoolean, c as createTypeEnum } from "./writables-_7BriMb2.js";
|
|
12
|
+
const defaultDropdownConfig = {
|
|
13
|
+
opened: false,
|
|
14
|
+
onOpenedChange: noop,
|
|
15
|
+
placement: ["bottom-start", "bottom-end", "top-start", "top-end"],
|
|
16
|
+
container: null,
|
|
17
|
+
size: "md"
|
|
18
|
+
};
|
|
19
|
+
function getDropdownDefaultConfig() {
|
|
20
|
+
return { ...defaultDropdownConfig };
|
|
21
|
+
}
|
|
22
|
+
const commonDropdownConfigValidator = {
|
|
23
|
+
opened: typeBoolean,
|
|
24
|
+
onOpenedChange: typeFunction,
|
|
25
|
+
placement: typePlacementArray,
|
|
26
|
+
container: createTypeEnum(["body", null]),
|
|
27
|
+
size: createTypeEnum(["sm", "md", "lg"])
|
|
28
|
+
};
|
|
29
|
+
const createDropdown = createWidgetFactory(
|
|
30
|
+
"dropdown",
|
|
31
|
+
(config) => {
|
|
32
|
+
const [{ placement$, opened$: _dirtyOpened$, container$, onOpenedChange$, ...stateProps }, patch] = writablesForProps(defaultDropdownConfig, config, commonDropdownConfigValidator);
|
|
33
|
+
const opened$ = bindableProp(_dirtyOpened$, onOpenedChange$);
|
|
34
|
+
const id$ = computed(generateId);
|
|
35
|
+
const menuId$ = computed(generateId);
|
|
36
|
+
const {
|
|
37
|
+
directive: navDirective,
|
|
38
|
+
focusPrevious,
|
|
39
|
+
focusNext,
|
|
40
|
+
focusFirst,
|
|
41
|
+
focusLast,
|
|
42
|
+
refreshElements
|
|
43
|
+
} = createNavManager();
|
|
44
|
+
let anchorElement;
|
|
45
|
+
const menuItemSelector = '.df-dropdown-item:not(:disabled):not([aria-disabled="true"])';
|
|
46
|
+
const navManagerConfig$ = readable({
|
|
47
|
+
keys: {
|
|
48
|
+
Tab: ({ event, directiveElement }) => {
|
|
49
|
+
if (anchorElement) {
|
|
50
|
+
if (positioningBeforeRef$()) {
|
|
51
|
+
event.preventDefault();
|
|
52
|
+
anchorElement.focus();
|
|
53
|
+
} else {
|
|
54
|
+
const next = findNextFocusableElement(
|
|
55
|
+
anchorElement,
|
|
56
|
+
(element) => directiveElement.contains(element) ? findNextElementSkippingSubtree(directiveElement) : findNextElement(element)
|
|
57
|
+
);
|
|
58
|
+
if (next && !directiveElement.contains(next)) {
|
|
59
|
+
event.preventDefault();
|
|
60
|
+
next.focus();
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
"Shift+Tab": ({ event }) => {
|
|
66
|
+
if (anchorElement) {
|
|
67
|
+
event.preventDefault();
|
|
68
|
+
(positioningBeforeRef$() ? findPreviousFocusableElement(anchorElement) : anchorElement)?.focus();
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
ArrowUp: ({ event }) => {
|
|
72
|
+
event.preventDefault();
|
|
73
|
+
focusPrevious({ event });
|
|
74
|
+
},
|
|
75
|
+
ArrowDown: ({ event }) => {
|
|
76
|
+
event.preventDefault();
|
|
77
|
+
focusNext({ event });
|
|
78
|
+
},
|
|
79
|
+
Home: ({ event }) => {
|
|
80
|
+
event.preventDefault();
|
|
81
|
+
focusFirst({ event });
|
|
82
|
+
},
|
|
83
|
+
End: ({ event }) => {
|
|
84
|
+
event.preventDefault();
|
|
85
|
+
focusLast({ event });
|
|
86
|
+
},
|
|
87
|
+
Escape: ({ event }) => {
|
|
88
|
+
event.preventDefault();
|
|
89
|
+
toggle(false);
|
|
90
|
+
anchorElement?.focus();
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
selector: (menuElement) => menuElement.querySelectorAll(menuItemSelector)
|
|
94
|
+
});
|
|
95
|
+
const positioning = createPositioning({
|
|
96
|
+
props: {
|
|
97
|
+
placement: placement$,
|
|
98
|
+
strategy: "absolute"
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
const positioningBeforeRef$ = computed(() => positioning.stores.placement$()?.startsWith("top"));
|
|
102
|
+
const { directive: hasFocusDirective, hasFocus$ } = createHasFocus();
|
|
103
|
+
let previousHasFocus = false;
|
|
104
|
+
const autoClose$ = derived(hasFocus$, (hasFocus) => {
|
|
105
|
+
if (previousHasFocus && !hasFocus) {
|
|
106
|
+
toggle(false);
|
|
107
|
+
}
|
|
108
|
+
previousHasFocus = hasFocus;
|
|
109
|
+
});
|
|
110
|
+
function toggle(opened) {
|
|
111
|
+
opened$.update((currentOpened) => {
|
|
112
|
+
return opened !== void 0 ? opened : !currentOpened;
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
const menuIdIfNeeded$ = computed(() => opened$() && container$() === "body" ? menuId$() : void 0);
|
|
116
|
+
const idIfOpen$ = computed(() => opened$() ? id$() : void 0);
|
|
117
|
+
return {
|
|
118
|
+
...stateStores({ opened$, ...stateProps }),
|
|
119
|
+
patch,
|
|
120
|
+
api: {
|
|
121
|
+
open: () => toggle(true),
|
|
122
|
+
close: () => toggle(false),
|
|
123
|
+
toggle
|
|
124
|
+
},
|
|
125
|
+
directives: {
|
|
126
|
+
menuDirective: mergeDirectives(
|
|
127
|
+
positioning.directives.floatingDirective,
|
|
128
|
+
bindDirective(navDirective, navManagerConfig$),
|
|
129
|
+
hasFocusDirective,
|
|
130
|
+
directiveSubscribe(autoClose$),
|
|
131
|
+
createAttributesDirective(() => ({
|
|
132
|
+
events: {
|
|
133
|
+
// Clicking a non-interactive region of the menu (separator, padding, headers, aria-disabled items)
|
|
134
|
+
// would otherwise blur focus to <body> and trigger the focus-loss auto-close. Prevent the focus shift
|
|
135
|
+
// so the menu stays open; only enabled items are allowed to move focus and then close on click.
|
|
136
|
+
mousedown: (event) => {
|
|
137
|
+
let { currentTarget, target } = event;
|
|
138
|
+
while (target && target !== currentTarget) {
|
|
139
|
+
if (isFocusable(target)) {
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
target = target.parentElement;
|
|
143
|
+
}
|
|
144
|
+
event.preventDefault();
|
|
145
|
+
},
|
|
146
|
+
// Selecting an enabled menu item performs its action and closes the menu. Click also covers keyboard
|
|
147
|
+
// activation (Enter on link/button, Space on button), which dispatches a bubbling click event.
|
|
148
|
+
// The walk is bounded at `currentTarget` (this menu): an item belonging to an enclosing dropdown
|
|
149
|
+
// (e.g. when this menu is nested inside another dropdown's item) is never reached, so it cannot
|
|
150
|
+
// close this menu.
|
|
151
|
+
click: (event) => {
|
|
152
|
+
let { currentTarget, target } = event;
|
|
153
|
+
while (target && target !== currentTarget) {
|
|
154
|
+
if (target.matches(menuItemSelector)) {
|
|
155
|
+
toggle(false);
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
target = target.parentElement;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
attributes: {
|
|
163
|
+
id: menuIdIfNeeded$
|
|
164
|
+
}
|
|
165
|
+
}))
|
|
166
|
+
),
|
|
167
|
+
dropdownDirective: createAttributesDirective(() => ({
|
|
168
|
+
attributes: {
|
|
169
|
+
id: id$,
|
|
170
|
+
"aria-owns": menuIdIfNeeded$,
|
|
171
|
+
"aria-live": readable(`polite`),
|
|
172
|
+
// The host only holds the menu content while opened, so it is hidden from the accessibility tree when closed.
|
|
173
|
+
"aria-hidden": computed(() => opened$() ? void 0 : "true")
|
|
174
|
+
}
|
|
175
|
+
})),
|
|
176
|
+
anchorDirective: mergeDirectives(
|
|
177
|
+
positioning.directives.referenceDirective,
|
|
178
|
+
browserDirective((anchor) => {
|
|
179
|
+
anchorElement = anchor;
|
|
180
|
+
return {
|
|
181
|
+
destroy: () => {
|
|
182
|
+
if (anchorElement === anchor) {
|
|
183
|
+
anchorElement = void 0;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
}),
|
|
188
|
+
hasFocusDirective,
|
|
189
|
+
createAttributesDirective(() => ({
|
|
190
|
+
events: {
|
|
191
|
+
click: () => toggle(),
|
|
192
|
+
keydown: (event) => {
|
|
193
|
+
const key = event.key;
|
|
194
|
+
if (opened$()) {
|
|
195
|
+
if (key === "ArrowDown") {
|
|
196
|
+
event.preventDefault();
|
|
197
|
+
refreshElements(true);
|
|
198
|
+
focusFirst();
|
|
199
|
+
} else if (key === "ArrowUp") {
|
|
200
|
+
event.preventDefault();
|
|
201
|
+
refreshElements(true);
|
|
202
|
+
focusLast();
|
|
203
|
+
} else if (key === "Escape") {
|
|
204
|
+
event.preventDefault();
|
|
205
|
+
toggle(false);
|
|
206
|
+
} else if (key === "Tab") {
|
|
207
|
+
const before = positioningBeforeRef$();
|
|
208
|
+
if (!!event.shiftKey === before) {
|
|
209
|
+
event.preventDefault();
|
|
210
|
+
refreshElements(true);
|
|
211
|
+
(before ? focusLast : focusFirst)();
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
} else if (key === "Enter" || key === " ") {
|
|
215
|
+
event.preventDefault();
|
|
216
|
+
toggle(true);
|
|
217
|
+
requestAnimationFrame(() => {
|
|
218
|
+
refreshElements(true);
|
|
219
|
+
const menuElement = document.getElementById(menuIdIfNeeded$() ?? id$());
|
|
220
|
+
const activeItem = menuElement?.querySelector(
|
|
221
|
+
`.df-dropdown-item.df-active:not(:disabled):not([aria-disabled="true"])`
|
|
222
|
+
);
|
|
223
|
+
if (activeItem) {
|
|
224
|
+
activeItem.focus();
|
|
225
|
+
} else {
|
|
226
|
+
focusFirst();
|
|
227
|
+
}
|
|
228
|
+
});
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
},
|
|
232
|
+
attributes: {
|
|
233
|
+
"aria-haspopup": readable("true"),
|
|
234
|
+
"aria-expanded": computed(() => `${opened$()}`),
|
|
235
|
+
"aria-controls": idIfOpen$
|
|
236
|
+
}
|
|
237
|
+
}))
|
|
238
|
+
)
|
|
239
|
+
}
|
|
240
|
+
};
|
|
241
|
+
}
|
|
242
|
+
);
|
|
243
|
+
export {
|
|
244
|
+
createDropdown as c,
|
|
245
|
+
getDropdownDefaultConfig as g
|
|
246
|
+
};
|
package/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * from './types';
|
|
|
2
2
|
export * from './components/accordion';
|
|
3
3
|
export * from './components/alert';
|
|
4
4
|
export * from './components/collapse';
|
|
5
|
+
export * from './components/dropdown';
|
|
5
6
|
export * from './components/modal';
|
|
6
7
|
export * from './components/pagination';
|
|
7
8
|
export * from './components/progressbar';
|
|
@@ -12,12 +13,13 @@ export * from './components/tree';
|
|
|
12
13
|
export * from './components/drawer';
|
|
13
14
|
export * from './config';
|
|
14
15
|
export * from './services/extendWidget';
|
|
15
|
-
export * from './services/floatingUI';
|
|
16
16
|
export * from './services/focustrack';
|
|
17
17
|
export * from './services/intersection';
|
|
18
18
|
export * from './services/matchMedia';
|
|
19
|
+
export * from './services/mousetrack';
|
|
19
20
|
export * from './services/navManager';
|
|
20
21
|
export * from './services/portal';
|
|
22
|
+
export * from './services/positioning';
|
|
21
23
|
export * from './services/resizeObserver';
|
|
22
24
|
export * from './services/siblingsInert';
|
|
23
25
|
export * from './services/hash';
|
package/index.js
CHANGED
|
@@ -1,32 +1,34 @@
|
|
|
1
1
|
import { FACTORY_WIDGET_NAME, INVALID_VALUE } from "./types.js";
|
|
2
|
-
import { c, a, f, g } from "./accordion-
|
|
3
|
-
import { c as c2
|
|
4
|
-
import { c as c3, g as
|
|
5
|
-
import { c as c4, g as
|
|
6
|
-
import { c as c5, g as
|
|
7
|
-
import { c as c6, g as
|
|
8
|
-
import { c as c7, g as
|
|
9
|
-
import { c as c8, g as
|
|
10
|
-
import {
|
|
11
|
-
import { c as c10, g as
|
|
12
|
-
import { c as c11, g as
|
|
2
|
+
import { c, a, f, g } from "./accordion-DUFLBQkV.js";
|
|
3
|
+
import { c as c2 } from "./alert-Db6cG6JE.js";
|
|
4
|
+
import { c as c3, g as g2 } from "./collapse-D8Jo56k9.js";
|
|
5
|
+
import { c as c4, g as g3 } from "./dropdown-Bjj2ql6d.js";
|
|
6
|
+
import { c as c5, g as g4, m, a as a2, b } from "./modal-CQWh2Sm5.js";
|
|
7
|
+
import { c as c6, g as g5 } from "./pagination-DIRcpdRE.js";
|
|
8
|
+
import { c as c7, g as g6 } from "./progressbar-Bth8r3Qu.js";
|
|
9
|
+
import { c as c8, g as g7 } from "./rating-DLsgFSyB.js";
|
|
10
|
+
import { c as c9, g as g8 } from "./slider-tH5g55yQ.js";
|
|
11
|
+
import { T, c as c10, d, g as g9 } from "./toaster-BS9qeRLF.js";
|
|
12
|
+
import { c as c11, g as g10 } from "./tree-DW6iLxdw.js";
|
|
13
|
+
import { c as c12, g as g11 } from "./drawer-D4xSbhcT.js";
|
|
13
14
|
import { createWidgetsConfig, mergeInto } from "./config.js";
|
|
14
15
|
import { extendWidgetProps } from "./services/extendWidget.js";
|
|
15
|
-
import { createFloatingUI } from "./services/floatingUI.js";
|
|
16
16
|
import { activeElement$, createHasFocus } from "./services/focustrack.js";
|
|
17
17
|
import { createIntersection } from "./services/intersection.js";
|
|
18
18
|
import { createMatchMedia } from "./services/matchMedia.js";
|
|
19
|
+
import { createHasMouseInside } from "./services/mousetrack.js";
|
|
19
20
|
import { createNavManager, getKeyName, isInternalInputNavigation } from "./services/navManager.js";
|
|
20
21
|
import { portal } from "./services/portal.js";
|
|
22
|
+
import { createPositioning, typePlacement, typePlacementArray } from "./services/positioning.js";
|
|
21
23
|
import { createResizeObserver, createResizeObserverMap } from "./services/resizeObserver.js";
|
|
22
24
|
import { siblingsInert } from "./services/siblingsInert.js";
|
|
23
25
|
import { hash$ } from "./services/hash.js";
|
|
24
26
|
import { createTransition, noAnimation } from "./services/transitions/baseTransitions.js";
|
|
25
27
|
import { createCSSTransition, getTransitionDurationMs, hasTransition } from "./services/transitions/cssTransitions.js";
|
|
26
28
|
import { createSimpleClassTransition } from "./services/transitions/simpleClassTransition.js";
|
|
27
|
-
import { a as a3, b as b2, c as
|
|
28
|
-
import {
|
|
29
|
-
import { c as
|
|
29
|
+
import { a as a3, b as b2, c as c13, d as d2, e, f as f2, g as g12, h, i, j, k, l, m as m2, n, o, p, q, r, s, t, u, v } from "./directive-CMT2vEDg.js";
|
|
30
|
+
import { bindableProp, createPatch, false$, findChangedProperties, idWithDefault, isStore, mergeConfigStores, normalizeConfigStores, stateStores, toReadableStore, toWritableStore, true$, writableWithDefault, writablesForProps, writablesWithDefault } from "./utils/stores.js";
|
|
31
|
+
import { c as c14, a as a4, t as t2, b as b3, d as d3, e as e2, f as f3, g as g13, h as h2, i as i2, j as j2, k as k2, l as l2 } from "./writables-_7BriMb2.js";
|
|
30
32
|
export {
|
|
31
33
|
FACTORY_WIDGET_NAME,
|
|
32
34
|
INVALID_VALUE,
|
|
@@ -34,8 +36,7 @@ export {
|
|
|
34
36
|
activeElement$,
|
|
35
37
|
a3 as attributesData,
|
|
36
38
|
b2 as bindDirective,
|
|
37
|
-
|
|
38
|
-
bindableDerived,
|
|
39
|
+
c13 as bindDirectiveNoArg,
|
|
39
40
|
bindableProp,
|
|
40
41
|
d2 as browserDirective,
|
|
41
42
|
e as classDirective,
|
|
@@ -50,27 +51,30 @@ export {
|
|
|
50
51
|
c3 as createCollapse,
|
|
51
52
|
j as createConditionalBrowserStoreArrayDirective,
|
|
52
53
|
k as createConditionalStoreArrayDirective,
|
|
53
|
-
|
|
54
|
-
|
|
54
|
+
c12 as createDrawer,
|
|
55
|
+
c4 as createDropdown,
|
|
55
56
|
createHasFocus,
|
|
57
|
+
createHasMouseInside,
|
|
56
58
|
createIntersection,
|
|
57
59
|
createMatchMedia,
|
|
58
|
-
|
|
60
|
+
c5 as createModal,
|
|
59
61
|
createNavManager,
|
|
60
|
-
|
|
62
|
+
c6 as createPagination,
|
|
61
63
|
createPatch,
|
|
62
|
-
|
|
63
|
-
c7 as
|
|
64
|
+
createPositioning,
|
|
65
|
+
c7 as createProgressbar,
|
|
66
|
+
c8 as createRating,
|
|
64
67
|
createResizeObserver,
|
|
65
68
|
createResizeObserverMap,
|
|
66
69
|
createSimpleClassTransition,
|
|
67
|
-
|
|
70
|
+
c9 as createSlider,
|
|
68
71
|
l as createStoreArrayDirective,
|
|
69
72
|
m2 as createStoreDirective,
|
|
70
|
-
|
|
73
|
+
c10 as createToast,
|
|
71
74
|
createTransition,
|
|
72
|
-
|
|
73
|
-
|
|
75
|
+
c11 as createTree,
|
|
76
|
+
c14 as createTypeEnum,
|
|
77
|
+
a4 as createTypeStringSpacedArray,
|
|
74
78
|
createWidgetsConfig,
|
|
75
79
|
d as defaultToasterProps,
|
|
76
80
|
n as directiveAttributes,
|
|
@@ -81,9 +85,9 @@ export {
|
|
|
81
85
|
false$,
|
|
82
86
|
findChangedProperties,
|
|
83
87
|
g as getAccordionDefaultConfig,
|
|
84
|
-
g2 as
|
|
85
|
-
g3 as getCollapseDefaultConfig,
|
|
88
|
+
g2 as getCollapseDefaultConfig,
|
|
86
89
|
g11 as getDrawerDefaultConfig,
|
|
90
|
+
g3 as getDropdownDefaultConfig,
|
|
87
91
|
getKeyName,
|
|
88
92
|
g4 as getModalDefaultConfig,
|
|
89
93
|
g5 as getPaginationDefaultConfig,
|
|
@@ -118,16 +122,18 @@ export {
|
|
|
118
122
|
toReadableStore,
|
|
119
123
|
toWritableStore,
|
|
120
124
|
true$,
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
125
|
+
b3 as typeArray,
|
|
126
|
+
d3 as typeBoolean,
|
|
127
|
+
e2 as typeBooleanOrNull,
|
|
128
|
+
f3 as typeFunction,
|
|
129
|
+
g13 as typeHTMLElementOrNull,
|
|
130
|
+
h2 as typeNumber,
|
|
131
|
+
i2 as typeNumberInRangeFactory,
|
|
132
|
+
j2 as typeNumberOrNull,
|
|
133
|
+
typePlacement,
|
|
134
|
+
typePlacementArray,
|
|
135
|
+
k2 as typeString,
|
|
136
|
+
l2 as typeStringOrNull,
|
|
131
137
|
writableWithDefault,
|
|
132
138
|
writablesForProps,
|
|
133
139
|
writablesWithDefault
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
const isInertOrInvisible = (element) => {
|
|
2
|
+
let curElement = element;
|
|
3
|
+
while (curElement) {
|
|
4
|
+
const style = getComputedStyle(curElement);
|
|
5
|
+
if (curElement.inert || curElement.hidden || style.display === "none" || style.visibility === "hidden") {
|
|
6
|
+
return true;
|
|
7
|
+
}
|
|
8
|
+
curElement = curElement.parentElement;
|
|
9
|
+
}
|
|
10
|
+
return false;
|
|
11
|
+
};
|
|
12
|
+
const checkNotDisabled = (element) => {
|
|
13
|
+
if (element.disabled) {
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
const parentFieldset = element.parentElement?.closest("fieldset");
|
|
17
|
+
return parentFieldset ? checkNotDisabled(parentFieldset) : true;
|
|
18
|
+
};
|
|
19
|
+
const isFocusableOtherTags = (element) => element.isContentEditable || !!element.hasAttribute("tabindex");
|
|
20
|
+
const isFocusableByTagName = {
|
|
21
|
+
INPUT: (element) => element.type !== "hidden" && checkNotDisabled(element),
|
|
22
|
+
SELECT: checkNotDisabled,
|
|
23
|
+
TEXTAREA: checkNotDisabled,
|
|
24
|
+
BUTTON: checkNotDisabled,
|
|
25
|
+
A: (element) => !!element.href || isFocusableOtherTags(element)
|
|
26
|
+
};
|
|
27
|
+
const isFocusable = (element) => {
|
|
28
|
+
return document.contains(element) && !isInertOrInvisible(element) && (isFocusableByTagName[element.tagName] ?? isFocusableOtherTags)(element);
|
|
29
|
+
};
|
|
30
|
+
const findNextElementSkippingSubtree = (element) => {
|
|
31
|
+
let curElement = element;
|
|
32
|
+
while (curElement) {
|
|
33
|
+
if (curElement.nextElementSibling) {
|
|
34
|
+
return curElement.nextElementSibling;
|
|
35
|
+
}
|
|
36
|
+
curElement = curElement.parentElement;
|
|
37
|
+
}
|
|
38
|
+
return null;
|
|
39
|
+
};
|
|
40
|
+
const findNextElement = (element) => (
|
|
41
|
+
// First descend into the first child, if any; otherwise skip past this element's subtree.
|
|
42
|
+
element.firstElementChild ?? findNextElementSkippingSubtree(element)
|
|
43
|
+
);
|
|
44
|
+
const findPreviousElement = (element) => {
|
|
45
|
+
const previousSibling = element.previousElementSibling;
|
|
46
|
+
if (previousSibling) {
|
|
47
|
+
let curElement = previousSibling;
|
|
48
|
+
while (curElement.lastElementChild) {
|
|
49
|
+
curElement = curElement.lastElementChild;
|
|
50
|
+
}
|
|
51
|
+
return curElement;
|
|
52
|
+
}
|
|
53
|
+
return element.parentElement;
|
|
54
|
+
};
|
|
55
|
+
const findNextFocusableElement = (element, findNextElementFn = findNextElement) => {
|
|
56
|
+
let nextElement = findNextElementFn(element);
|
|
57
|
+
while (nextElement) {
|
|
58
|
+
if (isFocusable(nextElement)) {
|
|
59
|
+
return nextElement;
|
|
60
|
+
}
|
|
61
|
+
nextElement = findNextElementFn(nextElement);
|
|
62
|
+
}
|
|
63
|
+
return null;
|
|
64
|
+
};
|
|
65
|
+
const findPreviousFocusableElement = (element, findPreviousElementFn = findPreviousElement) => findNextFocusableElement(element, findPreviousElementFn);
|
|
66
|
+
export {
|
|
67
|
+
findNextFocusableElement as a,
|
|
68
|
+
findNextElementSkippingSubtree as b,
|
|
69
|
+
findNextElement as c,
|
|
70
|
+
findPreviousFocusableElement as f,
|
|
71
|
+
isFocusable as i
|
|
72
|
+
};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { computed, readable } from "@amadeus-it-group/tansu";
|
|
2
|
-
import {
|
|
2
|
+
import { d as typeBoolean, f as typeFunction, k as typeString, g as typeHTMLElementOrNull } from "./writables-_7BriMb2.js";
|
|
3
3
|
import { writablesForProps, stateStores } from "./utils/stores.js";
|
|
4
4
|
import { createTransition } from "./services/transitions/baseTransitions.js";
|
|
5
|
-
import { p as promiseFromStore } from "./promise-
|
|
5
|
+
import { p as promiseFromStore } from "./promise-CkIc0KKt.js";
|
|
6
6
|
import { noop } from "./utils/func.js";
|
|
7
7
|
import { r as removeScrollbars, a as revertScrollbars } from "./scrollbars-ChGk75QR.js";
|
|
8
|
-
import { u as registrationArray, b as bindDirective, g as createAttributesDirective, d as browserDirective, s as mergeDirectives, o as directiveSubscribe, c as bindDirectiveNoArg } from "./directive-
|
|
8
|
+
import { u as registrationArray, b as bindDirective, g as createAttributesDirective, d as browserDirective, s as mergeDirectives, o as directiveSubscribe, c as bindDirectiveNoArg } from "./directive-CMT2vEDg.js";
|
|
9
9
|
import { portal } from "./services/portal.js";
|
|
10
10
|
import { siblingsInert } from "./services/siblingsInert.js";
|
|
11
11
|
import { createWidgetFactory } from "./utils/widget.js";
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { computed } from "@amadeus-it-group/tansu";
|
|
2
2
|
import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
|
|
3
|
-
import {
|
|
3
|
+
import { k as typeString, f as typeFunction, d as typeBoolean, h as typeNumber, m as clamp, n as isNumber } from "./writables-_7BriMb2.js";
|
|
4
4
|
import { noop } from "./utils/func.js";
|
|
5
|
-
import { g as createAttributesDirective } from "./directive-
|
|
5
|
+
import { g as createAttributesDirective } from "./directive-CMT2vEDg.js";
|
|
6
6
|
import { createWidgetFactory } from "./utils/widget.js";
|
|
7
7
|
const PAGE_LINK_DEFAULT = "#";
|
|
8
8
|
const defaultConfig = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { f as typeFunction, k as typeString, h as typeNumber, m as clamp } from "./writables-_7BriMb2.js";
|
|
2
2
|
import { writablesForProps, stateStores } from "./utils/stores.js";
|
|
3
3
|
import { computed, readable } from "@amadeus-it-group/tansu";
|
|
4
|
-
import { g as createAttributesDirective } from "./directive-
|
|
4
|
+
import { g as createAttributesDirective } from "./directive-CMT2vEDg.js";
|
|
5
5
|
import { createWidgetFactory } from "./utils/widget.js";
|
|
6
6
|
const defaultConfig = {
|
|
7
7
|
min: 0,
|
|
@@ -112,8 +112,8 @@ const promiseWithResolve = () => {
|
|
|
112
112
|
};
|
|
113
113
|
export {
|
|
114
114
|
promiseStoreToValueStore as a,
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
115
|
+
promiseWithResolve as b,
|
|
116
|
+
promiseFromEvent as c,
|
|
117
|
+
promiseFromTimeout as d,
|
|
118
118
|
promiseFromStore as p
|
|
119
119
|
};
|