@db-ux/react-core-components 4.9.0 → 4.10.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/CHANGELOG.md +17 -1
- package/README.md +97 -35
- package/dist/components/accordion/accordion.js +102 -86
- package/dist/components/accordion/model.d.ts +2 -2
- package/dist/components/accordion/model.js +4 -2
- package/dist/components/accordion-item/accordion-item.d.ts +2 -1
- package/dist/components/accordion-item/accordion-item.js +89 -56
- package/dist/components/accordion-item/model.d.ts +5 -1
- package/dist/components/badge/badge.js +72 -32
- package/dist/components/badge/model.d.ts +1 -1
- package/dist/components/badge/model.js +12 -1
- package/dist/components/brand/brand.js +60 -13
- package/dist/components/brand/model.d.ts +1 -1
- package/dist/components/button/button.js +75 -21
- package/dist/components/button/model.d.ts +1 -1
- package/dist/components/button/model.js +13 -2
- package/dist/components/card/card.js +65 -15
- package/dist/components/card/model.d.ts +1 -1
- package/dist/components/card/model.js +8 -2
- package/dist/components/checkbox/checkbox.js +163 -157
- package/dist/components/checkbox/model.d.ts +1 -1
- package/dist/components/custom-button/custom-button.js +65 -10
- package/dist/components/custom-button/model.d.ts +2 -2
- package/dist/components/custom-select/custom-select.js +509 -727
- package/dist/components/custom-select/model.d.ts +4 -4
- package/dist/components/custom-select/model.js +8 -1
- package/dist/components/custom-select-dropdown/custom-select-dropdown.js +62 -11
- package/dist/components/custom-select-dropdown/model.d.ts +1 -1
- package/dist/components/custom-select-dropdown/model.js +8 -1
- package/dist/components/custom-select-form-field/custom-select-form-field.js +57 -10
- package/dist/components/custom-select-form-field/model.d.ts +1 -1
- package/dist/components/custom-select-list/custom-select-list.js +60 -11
- package/dist/components/custom-select-list/model.d.ts +1 -1
- package/dist/components/custom-select-list-item/custom-select-list-item.js +89 -32
- package/dist/components/custom-select-list-item/model.d.ts +1 -1
- package/dist/components/custom-select-list-item/model.js +4 -1
- package/dist/components/divider/divider.js +60 -10
- package/dist/components/divider/model.d.ts +1 -1
- package/dist/components/divider/model.js +4 -2
- package/dist/components/drawer/drawer.js +118 -97
- package/dist/components/drawer/model.d.ts +1 -1
- package/dist/components/drawer/model.js +14 -4
- package/dist/components/header/header.js +143 -65
- package/dist/components/header/model.d.ts +1 -1
- package/dist/components/icon/icon.js +61 -12
- package/dist/components/icon/model.d.ts +1 -1
- package/dist/components/icon/model.js +11 -1
- package/dist/components/infotext/infotext.js +62 -12
- package/dist/components/infotext/model.d.ts +1 -1
- package/dist/components/input/input.js +198 -167
- package/dist/components/input/model.d.ts +1 -1
- package/dist/components/input/model.js +21 -5
- package/dist/components/link/link.js +70 -12
- package/dist/components/link/model.d.ts +1 -1
- package/dist/components/link/model.js +8 -3
- package/dist/components/navigation/model.d.ts +1 -1
- package/dist/components/navigation/navigation.js +57 -11
- package/dist/components/navigation-item/model.d.ts +6 -2
- package/dist/components/navigation-item/navigation-item.js +117 -81
- package/dist/components/notification/model.d.ts +1 -1
- package/dist/components/notification/model.js +12 -3
- package/dist/components/notification/notification.js +100 -32
- package/dist/components/page/model.d.ts +1 -1
- package/dist/components/page/model.js +4 -2
- package/dist/components/page/page.js +74 -46
- package/dist/components/popover/model.d.ts +1 -1
- package/dist/components/popover/popover.js +126 -125
- package/dist/components/radio/model.d.ts +1 -1
- package/dist/components/radio/radio.js +124 -85
- package/dist/components/section/model.d.ts +1 -1
- package/dist/components/section/section.js +59 -10
- package/dist/components/select/model.d.ts +1 -1
- package/dist/components/select/select.js +188 -191
- package/dist/components/stack/model.d.ts +1 -1
- package/dist/components/stack/model.js +14 -4
- package/dist/components/stack/stack.js +63 -10
- package/dist/components/switch/model.d.ts +1 -1
- package/dist/components/switch/switch.js +182 -150
- package/dist/components/tab-item/model.d.ts +1 -1
- package/dist/components/tab-item/tab-item.js +105 -76
- package/dist/components/tab-list/model.d.ts +1 -1
- package/dist/components/tab-list/tab-list.js +60 -11
- package/dist/components/tab-panel/model.d.ts +1 -1
- package/dist/components/tab-panel/tab-panel.js +59 -13
- package/dist/components/tabs/model.d.ts +3 -3
- package/dist/components/tabs/model.js +4 -2
- package/dist/components/tabs/tabs.js +191 -178
- package/dist/components/tag/model.d.ts +1 -1
- package/dist/components/tag/model.js +4 -1
- package/dist/components/tag/tag.js +91 -32
- package/dist/components/textarea/model.d.ts +1 -1
- package/dist/components/textarea/model.js +13 -2
- package/dist/components/textarea/textarea.js +165 -150
- package/dist/components/tooltip/model.d.ts +1 -1
- package/dist/components/tooltip/model.js +4 -1
- package/dist/components/tooltip/tooltip.js +119 -115
- package/dist/index.js +64 -81
- package/dist/shared/constants.js +32 -94
- package/dist/shared/figma.d.ts +12 -6
- package/dist/shared/model.js +73 -22
- package/dist/utils/document-click-listener.js +26 -29
- package/dist/utils/document-scroll-listener.js +30 -38
- package/dist/utils/floating-components.js +107 -358
- package/dist/utils/form-components.js +34 -60
- package/dist/utils/index.js +49 -167
- package/dist/utils/navigation.js +68 -135
- package/dist/utils/react.js +10 -15
- package/package.json +11 -8
- package/dist/components/accordion/index.js +0 -1
- package/dist/components/accordion-item/index.js +0 -1
- package/dist/components/accordion-item/model.js +0 -1
- package/dist/components/badge/index.js +0 -1
- package/dist/components/brand/index.js +0 -1
- package/dist/components/brand/model.js +0 -1
- package/dist/components/button/index.js +0 -1
- package/dist/components/card/index.js +0 -1
- package/dist/components/checkbox/index.js +0 -1
- package/dist/components/checkbox/model.js +0 -1
- package/dist/components/custom-button/index.js +0 -1
- package/dist/components/custom-button/model.js +0 -1
- package/dist/components/custom-select/index.js +0 -1
- package/dist/components/custom-select-dropdown/index.js +0 -1
- package/dist/components/custom-select-form-field/index.js +0 -1
- package/dist/components/custom-select-form-field/model.js +0 -1
- package/dist/components/custom-select-list/index.js +0 -1
- package/dist/components/custom-select-list/model.js +0 -1
- package/dist/components/custom-select-list-item/index.js +0 -1
- package/dist/components/divider/index.js +0 -1
- package/dist/components/drawer/index.js +0 -1
- package/dist/components/header/index.js +0 -1
- package/dist/components/header/model.js +0 -1
- package/dist/components/icon/index.js +0 -1
- package/dist/components/infotext/index.js +0 -1
- package/dist/components/infotext/model.js +0 -1
- package/dist/components/input/index.js +0 -1
- package/dist/components/link/index.js +0 -1
- package/dist/components/navigation/index.js +0 -1
- package/dist/components/navigation/model.js +0 -1
- package/dist/components/navigation-item/index.js +0 -1
- package/dist/components/navigation-item/model.js +0 -1
- package/dist/components/notification/index.js +0 -1
- package/dist/components/page/index.js +0 -1
- package/dist/components/popover/index.js +0 -1
- package/dist/components/popover/model.js +0 -1
- package/dist/components/radio/index.js +0 -1
- package/dist/components/radio/model.js +0 -1
- package/dist/components/section/index.js +0 -1
- package/dist/components/section/model.js +0 -1
- package/dist/components/select/index.js +0 -1
- package/dist/components/select/model.js +0 -1
- package/dist/components/stack/index.js +0 -1
- package/dist/components/switch/index.js +0 -1
- package/dist/components/switch/model.js +0 -1
- package/dist/components/tab-item/index.js +0 -1
- package/dist/components/tab-item/model.js +0 -1
- package/dist/components/tab-list/index.js +0 -1
- package/dist/components/tab-list/model.js +0 -1
- package/dist/components/tab-panel/index.js +0 -1
- package/dist/components/tab-panel/model.js +0 -1
- package/dist/components/tabs/index.js +0 -1
- package/dist/components/tag/index.js +0 -1
- package/dist/components/textarea/index.js +0 -1
- package/dist/components/tooltip/index.js +0 -1
- package/dist/shared/examples/index.js +0 -4
- package/dist/shared/figma.js +0 -1
- package/dist/shared/showcase/show-code-link.js +0 -51
package/dist/utils/index.js
CHANGED
|
@@ -1,167 +1,49 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
* @returns {boolean} `true` if the browser is Safari on iOS, otherwise `false`.
|
|
51
|
-
*/
|
|
52
|
-
export const isIOSSafari = () => {
|
|
53
|
-
if (typeof window === 'undefined' || typeof navigator === 'undefined')
|
|
54
|
-
return false;
|
|
55
|
-
const ua = navigator.userAgent;
|
|
56
|
-
// iOS detection
|
|
57
|
-
const isIOS = /iP(ad|hone|od)/.test(ua);
|
|
58
|
-
// Safari detection (not Chrome or Firefox on iOS)
|
|
59
|
-
const isSafari = !!ua.match(/Safari/) && !ua.match(/CriOS|FxiOS|OPiOS|EdgiOS/);
|
|
60
|
-
return isIOS && isSafari;
|
|
61
|
-
};
|
|
62
|
-
export const delay = (fn, ms) => new Promise(() => setTimeout(fn, ms));
|
|
63
|
-
/**
|
|
64
|
-
* Some frameworks like stencil would not add "true" as value for a prop
|
|
65
|
-
* if it is used in a framework like angular e.g.: [disabled]="myDisabledProp"
|
|
66
|
-
* @param originBool Some boolean to convert to string
|
|
67
|
-
*/
|
|
68
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
69
|
-
export const getBooleanAsString = (originBool) => {
|
|
70
|
-
if (originBool === undefined || originBool === null)
|
|
71
|
-
return;
|
|
72
|
-
if (typeof originBool === 'string') {
|
|
73
|
-
return String(originBool === 'true');
|
|
74
|
-
}
|
|
75
|
-
return String(originBool);
|
|
76
|
-
};
|
|
77
|
-
export const getBoolean = (originBool, propertyName) => {
|
|
78
|
-
if (originBool === undefined || originBool === null)
|
|
79
|
-
return;
|
|
80
|
-
if (typeof originBool === 'string') {
|
|
81
|
-
return Boolean(propertyName === originBool || originBool === 'true');
|
|
82
|
-
}
|
|
83
|
-
return Boolean(originBool);
|
|
84
|
-
};
|
|
85
|
-
export const getNumber = (originNumber, alternativeNumber) => {
|
|
86
|
-
if ((originNumber === undefined || originNumber === null) && (alternativeNumber === undefined || alternativeNumber === null)) {
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
return Number(originNumber !== null && originNumber !== void 0 ? originNumber : alternativeNumber);
|
|
90
|
-
};
|
|
91
|
-
/**
|
|
92
|
-
* Retrieves the step value for an input element.
|
|
93
|
-
*
|
|
94
|
-
* The step attribute can be a number or the special string "any".
|
|
95
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step
|
|
96
|
-
*
|
|
97
|
-
* @param step - The step value, which can be a number, string, or undefined.
|
|
98
|
-
* @returns The step value as a number or the string "any", or undefined.
|
|
99
|
-
*/
|
|
100
|
-
export const getStep = (step) => {
|
|
101
|
-
if (step === undefined || step === null) {
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
104
|
-
if (step === 'any') {
|
|
105
|
-
return 'any';
|
|
106
|
-
}
|
|
107
|
-
return Number(step);
|
|
108
|
-
};
|
|
109
|
-
/**
|
|
110
|
-
* Retrieves the input value based on the provided value and input type.
|
|
111
|
-
*
|
|
112
|
-
* If the input type is "number" or "range", the value is processed as a number.
|
|
113
|
-
* Otherwise, the value is returned as-is.
|
|
114
|
-
*
|
|
115
|
-
* @param value - The input value, which can be a number, string, or undefined.
|
|
116
|
-
* @param inputType - The type of the input, such as "number", "range", or other string types.
|
|
117
|
-
* @returns The processed input value as a string, number, or undefined.
|
|
118
|
-
*/
|
|
119
|
-
export const getInputValue = (value, inputType) => {
|
|
120
|
-
return inputType && ['number', 'range'].includes(inputType) ? getNumber(value) : value;
|
|
121
|
-
};
|
|
122
|
-
const toBool = (value) => typeof value === 'string' ? value === 'true' : value;
|
|
123
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
124
|
-
export const getHideProp = (show) => {
|
|
125
|
-
if (show === undefined || show === null) {
|
|
126
|
-
return undefined;
|
|
127
|
-
}
|
|
128
|
-
return getBooleanAsString(!toBool(show));
|
|
129
|
-
};
|
|
130
|
-
export const stringPropVisible = (givenString, showString) => {
|
|
131
|
-
if (showString === undefined) {
|
|
132
|
-
return !!givenString;
|
|
133
|
-
}
|
|
134
|
-
return toBool(showString) && Boolean(givenString);
|
|
135
|
-
};
|
|
136
|
-
export const getSearchInput = (element) => element.querySelector(`input[type="search"]`);
|
|
137
|
-
export const getOptionKey = (option, prefix) => {
|
|
138
|
-
var _a, _b;
|
|
139
|
-
const key = (_b = (_a = option.id) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : uuid();
|
|
140
|
-
return `${prefix}${key}`;
|
|
141
|
-
};
|
|
142
|
-
export const isKeyboardEvent = (event) => event.key !== undefined;
|
|
143
|
-
/**
|
|
144
|
-
* Maps semantic values to appropriate ARIA roles for notifications
|
|
145
|
-
* @param semantic - The semantic type of the notification
|
|
146
|
-
* @param role - The aria role of the notification
|
|
147
|
-
* @param ariaLive - The aria-live of the notification
|
|
148
|
-
* @returns The appropriate ARIA role or undefined for default behavior
|
|
149
|
-
*/
|
|
150
|
-
export const getNotificationRole = ({ semantic, role, ariaLive }) => {
|
|
151
|
-
if (role) {
|
|
152
|
-
return role;
|
|
153
|
-
}
|
|
154
|
-
if (ariaLive) {
|
|
155
|
-
return 'article';
|
|
156
|
-
}
|
|
157
|
-
switch (semantic) {
|
|
158
|
-
case 'critical':
|
|
159
|
-
case 'warning':
|
|
160
|
-
return 'alert';
|
|
161
|
-
case 'informational':
|
|
162
|
-
case 'successful':
|
|
163
|
-
return 'status';
|
|
164
|
-
default:
|
|
165
|
-
return 'article';
|
|
166
|
-
}
|
|
167
|
-
};
|
|
1
|
+
//#region src/utils/index.ts
|
|
2
|
+
var e = () => {
|
|
3
|
+
if (typeof window < "u") {
|
|
4
|
+
if (window.crypto?.randomUUID) return window.crypto.randomUUID();
|
|
5
|
+
if (window.crypto?.getRandomValues) return window.crypto.getRandomValues(new Uint32Array(3)).join("-");
|
|
6
|
+
}
|
|
7
|
+
return Math.random().toString().substring(2);
|
|
8
|
+
}, t = (e, n) => {
|
|
9
|
+
let r = e.children;
|
|
10
|
+
Object.values(r).forEach((e) => {
|
|
11
|
+
e.setAttribute(n.key, n.value), e.children.length > 0 && t(e, n);
|
|
12
|
+
});
|
|
13
|
+
}, n = (...e) => {
|
|
14
|
+
let t = "";
|
|
15
|
+
for (let n of e) if (n) if (typeof n == "string") t += `${n} `;
|
|
16
|
+
else for (let e in n) n[e] && (t += `${e} `);
|
|
17
|
+
return t.trim();
|
|
18
|
+
}, r = (e) => Array.isArray(e) && e.every((e) => typeof e == "string"), i = [
|
|
19
|
+
"Mac",
|
|
20
|
+
"iPhone",
|
|
21
|
+
"iPad",
|
|
22
|
+
"iPod"
|
|
23
|
+
], a = () => typeof window < "u" && i.some((e) => window.navigator.userAgent.includes(e)), o = () => {
|
|
24
|
+
if (typeof window > "u" || typeof navigator > "u") return !1;
|
|
25
|
+
let e = navigator.userAgent, t = /iP(ad|hone|od)/.test(e), n = !!e.match(/Safari/) && !e.match(/CriOS|FxiOS|OPiOS|EdgiOS/);
|
|
26
|
+
return t && n;
|
|
27
|
+
}, s = (e, t) => new Promise(() => setTimeout(e, t)), c = (e) => {
|
|
28
|
+
if (e != null) return String(typeof e == "string" ? e === "true" : e);
|
|
29
|
+
}, l = (e, t) => {
|
|
30
|
+
if (e != null) return typeof e == "string" ? t === e || e === "true" : !!e;
|
|
31
|
+
}, u = (e, t) => {
|
|
32
|
+
if (!(e == null && t == null)) return Number(e ?? t);
|
|
33
|
+
}, d = (e) => {
|
|
34
|
+
if (e != null) return e === "any" ? "any" : Number(e);
|
|
35
|
+
}, f = (e, t) => t && ["number", "range"].includes(t) ? u(e) : e, p = (e) => typeof e == "string" ? e === "true" : e, m = (e) => {
|
|
36
|
+
if (e != null) return c(!p(e));
|
|
37
|
+
}, h = (e, t) => (t === void 0 || p(t)) && !!e, g = (e) => e.querySelector("input[type=\"search\"]"), _ = (t, n) => `${n}${t.id ?? t.value ?? e()}`, v = (e) => e.key !== void 0, y = ({ semantic: e, role: t, ariaLive: n }) => {
|
|
38
|
+
if (t) return t;
|
|
39
|
+
if (n) return "article";
|
|
40
|
+
switch (e) {
|
|
41
|
+
case "critical":
|
|
42
|
+
case "warning": return "alert";
|
|
43
|
+
case "informational":
|
|
44
|
+
case "successful": return "status";
|
|
45
|
+
default: return "article";
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
//#endregion
|
|
49
|
+
export { t as addAttributeToChildren, n as cls, s as delay, l as getBoolean, c as getBooleanAsString, m as getHideProp, f as getInputValue, y as getNotificationRole, u as getNumber, _ as getOptionKey, g as getSearchInput, d as getStep, a as hasVoiceOver, r as isArrayOfStrings, o as isIOSSafari, v as isKeyboardEvent, h as stringPropVisible, e as uuid };
|
package/dist/utils/navigation.js
CHANGED
|
@@ -1,136 +1,69 @@
|
|
|
1
|
-
import { handleDataOutside } from
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
getTriangleTipY() {
|
|
68
|
-
if (!this.triangleData)
|
|
69
|
-
return 0;
|
|
70
|
-
// padding must be added to the y pos of the tip so that the y pos matches the cursor
|
|
71
|
-
const mouseYLimited = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;
|
|
72
|
-
if (this.triangleData.outsideVY === 'bottom') {
|
|
73
|
-
// add offset to tip y pos to match corrected sub-navigation y pos
|
|
74
|
-
return mouseYLimited + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height);
|
|
75
|
-
}
|
|
76
|
-
return mouseYLimited;
|
|
77
|
-
}
|
|
78
|
-
hasMouseEnteredSubNavigation() {
|
|
79
|
-
if (!this.triangleData) {
|
|
80
|
-
return false;
|
|
81
|
-
}
|
|
82
|
-
const isSubNavigationOnLeftSide = this.triangleData.outsideVX === 'right';
|
|
83
|
-
if (isSubNavigationOnLeftSide && this.mouseX < -1 * this.triangleData.padding) {
|
|
84
|
-
return true;
|
|
85
|
-
}
|
|
86
|
-
if (!isSubNavigationOnLeftSide && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding) {
|
|
87
|
-
return true;
|
|
88
|
-
}
|
|
89
|
-
return false;
|
|
90
|
-
}
|
|
91
|
-
getTriangleCoordinates(variant) {
|
|
92
|
-
if (!this.triangleData) {
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
95
|
-
if (variant === 'fill-gap') {
|
|
96
|
-
const itemHeight = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`;
|
|
97
|
-
const xStart = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
|
|
98
|
-
return {
|
|
99
|
-
lb: `${xStart} ${itemHeight}`,
|
|
100
|
-
lt: `${xStart} 0`,
|
|
101
|
-
rt: '100% 0',
|
|
102
|
-
rb: `100% ${itemHeight}`
|
|
103
|
-
};
|
|
104
|
-
}
|
|
105
|
-
const tipX = this.getTriangleTipX();
|
|
106
|
-
const tipY = this.getTriangleTipY();
|
|
107
|
-
const lb = `${tipX}px ${tipY}px`;
|
|
108
|
-
const lt = `${tipX}px ${tipY}px`;
|
|
109
|
-
return {
|
|
110
|
-
lb,
|
|
111
|
-
lt,
|
|
112
|
-
rt: '100% 0',
|
|
113
|
-
rb: '100% 100%'
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
followByMouseEvent(event) {
|
|
117
|
-
if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) {
|
|
118
|
-
return;
|
|
119
|
-
}
|
|
120
|
-
this.mouseX = event.clientX - this.triangleData.itemRect.left;
|
|
121
|
-
this.mouseY = event.clientY - this.triangleData.itemRect.top;
|
|
122
|
-
const isOverSubNavigation = this.hasMouseEnteredSubNavigation();
|
|
123
|
-
const coordinates = this.getTriangleCoordinates(isOverSubNavigation ? 'fill-gap' : 'safe-triangle');
|
|
124
|
-
if (!coordinates) {
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
this.element.style.setProperty('--db-navigation-item-clip-path', `polygon(${coordinates.lb}, ${coordinates.lt}, ${coordinates.rt}, ${coordinates.rb})`);
|
|
128
|
-
if (isOverSubNavigation) {
|
|
129
|
-
this.triangleData = undefined;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
export default {
|
|
134
|
-
isEventTargetNavigationItem,
|
|
135
|
-
NavigationItemSafeTriangle
|
|
1
|
+
import { handleDataOutside as e } from "./floating-components.js";
|
|
2
|
+
//#region src/utils/navigation.ts
|
|
3
|
+
var t = (e) => {
|
|
4
|
+
let { target: t } = e;
|
|
5
|
+
return !!(!t?.classList?.contains("db-navigation-item-expand-button") && t?.parentElement?.classList.contains("db-navigation-item"));
|
|
6
|
+
}, n = class {
|
|
7
|
+
constructor(e, t) {
|
|
8
|
+
this.parentSubNavigation = null, this.initialized = !1, this.mouseX = 0, this.mouseY = 0, this.element = e, this.subNavigation = t, !(!this.element || !this.subNavigation) && (this.parentSubNavigation = this.element?.closest(".db-sub-navigation"), this.parentSubNavigation && !this.element.closest(".db-drawer") && this.init());
|
|
9
|
+
}
|
|
10
|
+
init() {
|
|
11
|
+
let e = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;
|
|
12
|
+
this.element?.style.setProperty("--db-navigation-item-inline-size", `${e}px`), this.initialized = !0;
|
|
13
|
+
}
|
|
14
|
+
enableFollow() {
|
|
15
|
+
if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) return;
|
|
16
|
+
let t = e(this.subNavigation), n = this.element.getBoundingClientRect(), r = this.parentSubNavigation?.getBoundingClientRect().width ?? 0;
|
|
17
|
+
this.triangleData = {
|
|
18
|
+
itemRect: n,
|
|
19
|
+
parentElementWidth: r,
|
|
20
|
+
subNavigationHeight: this.subNavigation.getBoundingClientRect().height,
|
|
21
|
+
padding: (r - n.width) / 2,
|
|
22
|
+
outsideVX: t.vx,
|
|
23
|
+
outsideVY: t.vy
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
disableFollow() {
|
|
27
|
+
this.triangleData = void 0;
|
|
28
|
+
}
|
|
29
|
+
getTriangleTipX() {
|
|
30
|
+
return this.triangleData ? this.triangleData.outsideVX === "right" ? this.triangleData.itemRect.width - this.mouseX : Math.min(this.mouseX, this.triangleData.itemRect.width * .75) : 0;
|
|
31
|
+
}
|
|
32
|
+
getTriangleTipY() {
|
|
33
|
+
if (!this.triangleData) return 0;
|
|
34
|
+
let e = Math.max(Math.min(this.mouseY, this.triangleData.itemRect.height), 0) + this.triangleData.padding;
|
|
35
|
+
return this.triangleData.outsideVY === "bottom" ? e + (this.triangleData.subNavigationHeight - this.triangleData.padding * 2 - this.triangleData.itemRect.height) : e;
|
|
36
|
+
}
|
|
37
|
+
hasMouseEnteredSubNavigation() {
|
|
38
|
+
if (!this.triangleData) return !1;
|
|
39
|
+
let e = this.triangleData.outsideVX === "right";
|
|
40
|
+
return !!(e && this.mouseX < -1 * this.triangleData.padding || !e && this.mouseX > this.triangleData.parentElementWidth - this.triangleData.padding);
|
|
41
|
+
}
|
|
42
|
+
getTriangleCoordinates(e) {
|
|
43
|
+
if (!this.triangleData) return;
|
|
44
|
+
if (e === "fill-gap") {
|
|
45
|
+
let e = `${this.triangleData.itemRect.height + 2 * this.triangleData.padding}px`, t = `${this.triangleData.parentElementWidth - this.triangleData.padding}px`;
|
|
46
|
+
return {
|
|
47
|
+
lb: `${t} ${e}`,
|
|
48
|
+
lt: `${t} 0`,
|
|
49
|
+
rt: "100% 0",
|
|
50
|
+
rb: `100% ${e}`
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
let t = this.getTriangleTipX(), n = this.getTriangleTipY();
|
|
54
|
+
return {
|
|
55
|
+
lb: `${t}px ${n}px`,
|
|
56
|
+
lt: `${t}px ${n}px`,
|
|
57
|
+
rt: "100% 0",
|
|
58
|
+
rb: "100% 100%"
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
followByMouseEvent(e) {
|
|
62
|
+
if (!this.initialized || !this.triangleData || !this.element || !this.subNavigation) return;
|
|
63
|
+
this.mouseX = e.clientX - this.triangleData.itemRect.left, this.mouseY = e.clientY - this.triangleData.itemRect.top;
|
|
64
|
+
let t = this.hasMouseEnteredSubNavigation(), n = this.getTriangleCoordinates(t ? "fill-gap" : "safe-triangle");
|
|
65
|
+
n && (this.element.style.setProperty("--db-navigation-item-clip-path", `polygon(${n.lb}, ${n.lt}, ${n.rt}, ${n.rb})`), t && (this.triangleData = void 0));
|
|
66
|
+
}
|
|
136
67
|
};
|
|
68
|
+
//#endregion
|
|
69
|
+
export { n as NavigationItemSafeTriangle, t as isEventTargetNavigationItem };
|
package/dist/utils/react.js
CHANGED
|
@@ -1,15 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
};
|
|
12
|
-
export default {
|
|
13
|
-
getRootProps,
|
|
14
|
-
filterPassingProps
|
|
15
|
-
};
|
|
1
|
+
//#region src/utils/react.ts
|
|
2
|
+
var e = /* @__PURE__ */ "suppressHydrationWarning.suppressContentEditableWarning.translate.title.tabIndex.style.spellCheck.nonce.lang.hidden.draggable.dir.contextMenu.contentEditable.accessKey.is.inputMode.unselectable.security.results.vocab.typeof.rev.resource.rel.property.inlist.datatype.content.about.role.radioGroup.color.form.formAction.formEncType.formMethod.formNoValidate.formTarget.capture.dirName.download.ping".split("."), t = (t, n) => Object.keys(t).filter((t) => (t.startsWith("data-") || t.startsWith("aria-") || t.startsWith("default") || t.startsWith("auto") || t.startsWith("item") || t.startsWith("on") || e.includes(t)) && !n.includes(t)).reduce((e, n) => ({
|
|
3
|
+
...e,
|
|
4
|
+
[n]: t[n]
|
|
5
|
+
}), {}), n = (e, t) => Object.keys(e).filter((e) => t.includes(e)).reduce((t, n) => ({
|
|
6
|
+
...t,
|
|
7
|
+
[n]: e[n]
|
|
8
|
+
}), {});
|
|
9
|
+
//#endregion
|
|
10
|
+
export { t as filterPassingProps, n as getRootProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@db-ux/react-core-components",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.10.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React components for @db-ux/core-components",
|
|
6
6
|
"repository": {
|
|
@@ -17,18 +17,20 @@
|
|
|
17
17
|
"dist/"
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@db-ux/core-components": "4.
|
|
21
|
-
"@db-ux/core-foundations": "4.
|
|
20
|
+
"@db-ux/core-components": "4.10.0",
|
|
21
|
+
"@db-ux/core-foundations": "4.10.0"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@playwright/experimental-ct-react": "1.60.0",
|
|
25
|
-
"@types/react": "19.2.
|
|
25
|
+
"@types/react": "19.2.15",
|
|
26
|
+
"@vitejs/plugin-react": "4.5.2",
|
|
26
27
|
"cpr": "3.0.1",
|
|
27
|
-
"npm-run-all2": "
|
|
28
|
+
"npm-run-all2": "9.0.1",
|
|
28
29
|
"playwright": "1.60.0",
|
|
29
30
|
"react": "19.2.6",
|
|
30
31
|
"react-dom": "19.2.6",
|
|
31
|
-
"typescript": "5.9.3"
|
|
32
|
+
"typescript": "5.9.3",
|
|
33
|
+
"vite": "8.0.14"
|
|
32
34
|
},
|
|
33
35
|
"publishConfig": {
|
|
34
36
|
"registry": "https://registry.npmjs.org/",
|
|
@@ -36,7 +38,7 @@
|
|
|
36
38
|
},
|
|
37
39
|
"sideEffects": false,
|
|
38
40
|
"scripts": {
|
|
39
|
-
"build": "npm-run-all tsc --
|
|
41
|
+
"build": "npm-run-all --parallel tsc vite --sequential mv:*",
|
|
40
42
|
"mv:agent": "cpr agent ../../build-outputs/react/agent --overwrite",
|
|
41
43
|
"mv:changelog": "cpr CHANGELOG.md ../../build-outputs/react/CHANGELOG.md --overwrite",
|
|
42
44
|
"mv:dist": "cpr dist ../../build-outputs/react/dist --overwrite",
|
|
@@ -47,6 +49,7 @@
|
|
|
47
49
|
"test:components": "playwright test --config playwright.config.ts",
|
|
48
50
|
"test:components:ui": "playwright test --config playwright.config.ts --ui",
|
|
49
51
|
"test:windows": "playwright test --config playwright.screen-reader.win.ts",
|
|
50
|
-
"tsc": "tsc --project . --sourceMap false"
|
|
52
|
+
"tsc": "tsc --project . --sourceMap false",
|
|
53
|
+
"vite": "vite build"
|
|
51
54
|
}
|
|
52
55
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBAccordion } from './accordion';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBAccordionItem } from './accordion-item';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBBadge } from './badge';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBBrand } from './brand';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBButton } from './button';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBCard } from './card';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBCheckbox } from './checkbox';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBCustomButton } from './custom-button';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBCustomSelect } from './custom-select';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBCustomSelectDropdown } from './custom-select-dropdown';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBCustomSelectFormField } from './custom-select-form-field';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBCustomSelectList } from './custom-select-list';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBCustomSelectListItem } from './custom-select-list-item';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBDivider } from './divider';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBDrawer } from './drawer';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBHeader } from './header';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBIcon } from './icon';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBInfotext } from './infotext';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBInput } from './input';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBLink } from './link';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBNavigation } from './navigation';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBNavigationItem } from './navigation-item';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBNotification } from './notification';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBPage } from './page';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBPopover } from './popover';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DBRadio } from './radio';
|