@db-ux/react-core-components 4.9.1 → 4.10.0-esm-f121fc3
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 +9 -2
- package/README.md +97 -35
- package/dist/components/accordion/accordion.d.ts +1 -1
- package/dist/components/accordion/accordion.js +102 -86
- package/dist/components/accordion/index.d.ts +1 -1
- package/dist/components/accordion/model.d.ts +1 -1
- package/dist/components/accordion/model.js +4 -2
- package/dist/components/accordion-item/accordion-item.d.ts +3 -2
- package/dist/components/accordion-item/accordion-item.js +89 -56
- package/dist/components/accordion-item/index.d.ts +1 -1
- package/dist/components/accordion-item/model.d.ts +5 -1
- package/dist/components/badge/badge.d.ts +1 -1
- package/dist/components/badge/badge.js +72 -32
- package/dist/components/badge/index.d.ts +1 -1
- package/dist/components/badge/model.d.ts +1 -1
- package/dist/components/badge/model.js +12 -1
- package/dist/components/brand/brand.d.ts +1 -1
- package/dist/components/brand/brand.js +60 -13
- package/dist/components/brand/index.d.ts +1 -1
- package/dist/components/brand/model.d.ts +1 -1
- package/dist/components/button/button.d.ts +1 -1
- package/dist/components/button/button.js +75 -21
- package/dist/components/button/index.d.ts +1 -1
- package/dist/components/button/model.d.ts +1 -1
- package/dist/components/button/model.js +13 -2
- package/dist/components/card/card.d.ts +1 -1
- package/dist/components/card/card.js +65 -15
- package/dist/components/card/index.d.ts +1 -1
- package/dist/components/card/model.d.ts +1 -1
- package/dist/components/card/model.js +8 -2
- package/dist/components/checkbox/checkbox.d.ts +1 -1
- package/dist/components/checkbox/checkbox.js +163 -157
- package/dist/components/checkbox/index.d.ts +1 -1
- package/dist/components/checkbox/model.d.ts +1 -1
- package/dist/components/custom-button/custom-button.d.ts +1 -1
- package/dist/components/custom-button/custom-button.js +65 -10
- package/dist/components/custom-button/index.d.ts +1 -1
- package/dist/components/custom-button/model.d.ts +2 -2
- package/dist/components/custom-select/custom-select.d.ts +1 -1
- package/dist/components/custom-select/custom-select.js +509 -727
- package/dist/components/custom-select/index.d.ts +1 -1
- package/dist/components/custom-select/model.d.ts +3 -3
- package/dist/components/custom-select/model.js +8 -1
- package/dist/components/custom-select-dropdown/custom-select-dropdown.d.ts +1 -1
- package/dist/components/custom-select-dropdown/custom-select-dropdown.js +62 -11
- package/dist/components/custom-select-dropdown/index.d.ts +1 -1
- 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.d.ts +1 -1
- package/dist/components/custom-select-form-field/custom-select-form-field.js +57 -10
- package/dist/components/custom-select-form-field/index.d.ts +1 -1
- package/dist/components/custom-select-form-field/model.d.ts +1 -1
- package/dist/components/custom-select-list/custom-select-list.d.ts +1 -1
- package/dist/components/custom-select-list/custom-select-list.js +60 -11
- package/dist/components/custom-select-list/index.d.ts +1 -1
- package/dist/components/custom-select-list/model.d.ts +1 -1
- package/dist/components/custom-select-list-item/custom-select-list-item.d.ts +2 -2
- package/dist/components/custom-select-list-item/custom-select-list-item.js +89 -32
- package/dist/components/custom-select-list-item/index.d.ts +1 -1
- 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.d.ts +1 -1
- package/dist/components/divider/divider.js +60 -10
- package/dist/components/divider/index.d.ts +1 -1
- package/dist/components/divider/model.d.ts +1 -1
- package/dist/components/divider/model.js +4 -2
- package/dist/components/drawer/drawer.d.ts +2 -2
- package/dist/components/drawer/drawer.js +118 -97
- package/dist/components/drawer/index.d.ts +1 -1
- package/dist/components/drawer/model.d.ts +1 -1
- package/dist/components/drawer/model.js +14 -4
- package/dist/components/header/header.d.ts +1 -1
- package/dist/components/header/header.js +143 -65
- package/dist/components/header/index.d.ts +1 -1
- package/dist/components/header/model.d.ts +1 -1
- package/dist/components/icon/icon.d.ts +1 -1
- package/dist/components/icon/icon.js +61 -12
- package/dist/components/icon/index.d.ts +1 -1
- package/dist/components/icon/model.d.ts +1 -1
- package/dist/components/icon/model.js +11 -1
- package/dist/components/infotext/index.d.ts +1 -1
- package/dist/components/infotext/infotext.d.ts +1 -1
- package/dist/components/infotext/infotext.js +62 -12
- package/dist/components/infotext/model.d.ts +1 -1
- package/dist/components/input/index.d.ts +1 -1
- package/dist/components/input/input.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/index.d.ts +1 -1
- package/dist/components/link/link.d.ts +1 -1
- 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/index.d.ts +1 -1
- package/dist/components/navigation/model.d.ts +1 -1
- package/dist/components/navigation/navigation.d.ts +1 -1
- package/dist/components/navigation/navigation.js +57 -11
- package/dist/components/navigation-item/index.d.ts +1 -1
- package/dist/components/navigation-item/model.d.ts +6 -2
- package/dist/components/navigation-item/navigation-item.d.ts +1 -1
- package/dist/components/navigation-item/navigation-item.js +117 -81
- package/dist/components/notification/index.d.ts +1 -1
- package/dist/components/notification/model.d.ts +1 -1
- package/dist/components/notification/model.js +12 -3
- package/dist/components/notification/notification.d.ts +2 -2
- package/dist/components/notification/notification.js +100 -32
- package/dist/components/page/index.d.ts +1 -1
- package/dist/components/page/model.d.ts +1 -1
- package/dist/components/page/model.js +4 -2
- package/dist/components/page/page.d.ts +1 -1
- package/dist/components/page/page.js +74 -46
- package/dist/components/popover/index.d.ts +1 -1
- package/dist/components/popover/model.d.ts +1 -1
- package/dist/components/popover/popover.d.ts +1 -1
- package/dist/components/popover/popover.js +126 -125
- package/dist/components/radio/index.d.ts +1 -1
- package/dist/components/radio/model.d.ts +1 -1
- package/dist/components/radio/radio.d.ts +1 -1
- package/dist/components/radio/radio.js +124 -85
- package/dist/components/section/index.d.ts +1 -1
- package/dist/components/section/model.d.ts +1 -1
- package/dist/components/section/section.d.ts +1 -1
- package/dist/components/section/section.js +59 -10
- package/dist/components/select/index.d.ts +1 -1
- package/dist/components/select/model.d.ts +1 -1
- package/dist/components/select/select.d.ts +1 -1
- package/dist/components/select/select.js +188 -191
- package/dist/components/stack/index.d.ts +1 -1
- package/dist/components/stack/model.d.ts +1 -1
- package/dist/components/stack/model.js +14 -4
- package/dist/components/stack/stack.d.ts +1 -1
- package/dist/components/stack/stack.js +63 -10
- package/dist/components/switch/index.d.ts +1 -1
- package/dist/components/switch/model.d.ts +1 -1
- package/dist/components/switch/switch.d.ts +1 -1
- package/dist/components/switch/switch.js +182 -150
- package/dist/components/tab-item/index.d.ts +1 -1
- package/dist/components/tab-item/model.d.ts +1 -1
- package/dist/components/tab-item/tab-item.d.ts +1 -1
- package/dist/components/tab-item/tab-item.js +105 -76
- package/dist/components/tab-list/index.d.ts +1 -1
- package/dist/components/tab-list/model.d.ts +1 -1
- package/dist/components/tab-list/tab-list.d.ts +1 -1
- package/dist/components/tab-list/tab-list.js +60 -11
- package/dist/components/tab-panel/index.d.ts +1 -1
- package/dist/components/tab-panel/model.d.ts +1 -1
- package/dist/components/tab-panel/tab-panel.d.ts +1 -1
- package/dist/components/tab-panel/tab-panel.js +59 -13
- package/dist/components/tabs/index.d.ts +1 -1
- package/dist/components/tabs/model.d.ts +1 -1
- package/dist/components/tabs/model.js +4 -2
- package/dist/components/tabs/tabs.d.ts +1 -1
- package/dist/components/tabs/tabs.js +191 -178
- package/dist/components/tag/index.d.ts +1 -1
- package/dist/components/tag/model.d.ts +1 -1
- package/dist/components/tag/model.js +4 -1
- package/dist/components/tag/tag.d.ts +1 -1
- package/dist/components/tag/tag.js +91 -32
- package/dist/components/textarea/index.d.ts +1 -1
- package/dist/components/textarea/model.d.ts +1 -1
- package/dist/components/textarea/model.js +13 -2
- package/dist/components/textarea/textarea.d.ts +1 -1
- package/dist/components/textarea/textarea.js +165 -150
- package/dist/components/tooltip/index.d.ts +1 -1
- package/dist/components/tooltip/model.d.ts +1 -1
- package/dist/components/tooltip/model.js +4 -1
- package/dist/components/tooltip/tooltip.d.ts +1 -1
- package/dist/components/tooltip/tooltip.js +119 -115
- package/dist/index.d.ts +26 -26
- 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.d.ts +1 -1
- package/dist/utils/index.js +49 -167
- package/dist/utils/navigation.js +68 -135
- package/dist/utils/react.js +10 -15
- package/package.json +13 -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-esm-f121fc3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "React components for @db-ux/core-components",
|
|
6
6
|
"repository": {
|
|
@@ -17,18 +17,21 @@
|
|
|
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-esm-f121fc3",
|
|
21
|
+
"@db-ux/core-foundations": "4.10.0-esm-f121fc3"
|
|
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": "6.0.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
|
-
"
|
|
32
|
+
"tsc-esm-fix": "3.1.2",
|
|
33
|
+
"typescript": "5.9.3",
|
|
34
|
+
"vite": "8.0.14"
|
|
32
35
|
},
|
|
33
36
|
"publishConfig": {
|
|
34
37
|
"registry": "https://registry.npmjs.org/",
|
|
@@ -36,7 +39,7 @@
|
|
|
36
39
|
},
|
|
37
40
|
"sideEffects": false,
|
|
38
41
|
"scripts": {
|
|
39
|
-
"build": "npm-run-all tsc --
|
|
42
|
+
"build": "npm-run-all --parallel tsc vite --sequential tsc:esm-fix mv:*",
|
|
40
43
|
"mv:agent": "cpr agent ../../build-outputs/react/agent --overwrite",
|
|
41
44
|
"mv:changelog": "cpr CHANGELOG.md ../../build-outputs/react/CHANGELOG.md --overwrite",
|
|
42
45
|
"mv:dist": "cpr dist ../../build-outputs/react/dist --overwrite",
|
|
@@ -47,6 +50,8 @@
|
|
|
47
50
|
"test:components": "playwright test --config playwright.config.ts",
|
|
48
51
|
"test:components:ui": "playwright test --config playwright.config.ts --ui",
|
|
49
52
|
"test:windows": "playwright test --config playwright.screen-reader.win.ts",
|
|
50
|
-
"tsc": "tsc --project . --sourceMap false"
|
|
53
|
+
"tsc": "tsc --project . --sourceMap false",
|
|
54
|
+
"tsc:esm-fix": "tsc-esm-fix dist",
|
|
55
|
+
"vite": "vite build"
|
|
51
56
|
}
|
|
52
57
|
}
|
|
@@ -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 {};
|