@db-ux/react-core-components 4.9.1 → 4.10.0-esm-94516f3

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.
Files changed (131) hide show
  1. package/CHANGELOG.md +9 -1
  2. package/README.md +97 -35
  3. package/dist/components/accordion/accordion.js +102 -86
  4. package/dist/components/accordion/model.js +4 -2
  5. package/dist/components/accordion-item/accordion-item.d.ts +2 -1
  6. package/dist/components/accordion-item/accordion-item.js +89 -56
  7. package/dist/components/accordion-item/model.d.ts +4 -0
  8. package/dist/components/badge/badge.js +72 -32
  9. package/dist/components/badge/model.js +12 -1
  10. package/dist/components/brand/brand.js +60 -13
  11. package/dist/components/button/button.js +75 -21
  12. package/dist/components/button/model.js +13 -2
  13. package/dist/components/card/card.js +65 -15
  14. package/dist/components/card/model.js +8 -2
  15. package/dist/components/checkbox/checkbox.js +163 -157
  16. package/dist/components/custom-button/custom-button.js +65 -10
  17. package/dist/components/custom-select/custom-select.js +509 -727
  18. package/dist/components/custom-select/model.js +8 -1
  19. package/dist/components/custom-select-dropdown/custom-select-dropdown.js +62 -11
  20. package/dist/components/custom-select-dropdown/model.js +8 -1
  21. package/dist/components/custom-select-form-field/custom-select-form-field.js +57 -10
  22. package/dist/components/custom-select-list/custom-select-list.js +60 -11
  23. package/dist/components/custom-select-list-item/custom-select-list-item.js +89 -32
  24. package/dist/components/custom-select-list-item/model.js +4 -1
  25. package/dist/components/divider/divider.js +60 -10
  26. package/dist/components/divider/model.js +4 -2
  27. package/dist/components/drawer/drawer.js +118 -97
  28. package/dist/components/drawer/model.js +14 -4
  29. package/dist/components/header/header.js +143 -65
  30. package/dist/components/icon/icon.js +61 -12
  31. package/dist/components/icon/model.js +11 -1
  32. package/dist/components/infotext/infotext.js +62 -12
  33. package/dist/components/input/input.js +198 -167
  34. package/dist/components/input/model.js +21 -5
  35. package/dist/components/link/link.js +70 -12
  36. package/dist/components/link/model.js +8 -3
  37. package/dist/components/navigation/navigation.js +57 -11
  38. package/dist/components/navigation-item/model.d.ts +4 -0
  39. package/dist/components/navigation-item/navigation-item.js +117 -81
  40. package/dist/components/notification/model.js +12 -3
  41. package/dist/components/notification/notification.js +100 -32
  42. package/dist/components/page/model.js +4 -2
  43. package/dist/components/page/page.js +74 -46
  44. package/dist/components/popover/popover.js +126 -125
  45. package/dist/components/radio/radio.js +124 -85
  46. package/dist/components/section/section.js +59 -10
  47. package/dist/components/select/select.js +188 -191
  48. package/dist/components/stack/model.js +14 -4
  49. package/dist/components/stack/stack.js +63 -10
  50. package/dist/components/switch/switch.js +182 -150
  51. package/dist/components/tab-item/tab-item.js +105 -76
  52. package/dist/components/tab-list/tab-list.js +60 -11
  53. package/dist/components/tab-panel/tab-panel.js +59 -13
  54. package/dist/components/tabs/model.js +4 -2
  55. package/dist/components/tabs/tabs.js +191 -178
  56. package/dist/components/tag/model.js +4 -1
  57. package/dist/components/tag/tag.js +91 -32
  58. package/dist/components/textarea/model.js +13 -2
  59. package/dist/components/textarea/textarea.js +165 -150
  60. package/dist/components/tooltip/model.js +4 -1
  61. package/dist/components/tooltip/tooltip.js +119 -115
  62. package/dist/index.js +64 -81
  63. package/dist/shared/constants.js +32 -94
  64. package/dist/shared/figma.d.ts +12 -6
  65. package/dist/shared/model.js +73 -22
  66. package/dist/utils/document-click-listener.js +26 -29
  67. package/dist/utils/document-scroll-listener.js +30 -38
  68. package/dist/utils/floating-components.js +107 -358
  69. package/dist/utils/form-components.js +34 -60
  70. package/dist/utils/index.js +49 -167
  71. package/dist/utils/navigation.js +68 -135
  72. package/dist/utils/react.js +10 -15
  73. package/package.json +11 -8
  74. package/dist/components/accordion/index.js +0 -1
  75. package/dist/components/accordion-item/index.js +0 -1
  76. package/dist/components/accordion-item/model.js +0 -1
  77. package/dist/components/badge/index.js +0 -1
  78. package/dist/components/brand/index.js +0 -1
  79. package/dist/components/brand/model.js +0 -1
  80. package/dist/components/button/index.js +0 -1
  81. package/dist/components/card/index.js +0 -1
  82. package/dist/components/checkbox/index.js +0 -1
  83. package/dist/components/checkbox/model.js +0 -1
  84. package/dist/components/custom-button/index.js +0 -1
  85. package/dist/components/custom-button/model.js +0 -1
  86. package/dist/components/custom-select/index.js +0 -1
  87. package/dist/components/custom-select-dropdown/index.js +0 -1
  88. package/dist/components/custom-select-form-field/index.js +0 -1
  89. package/dist/components/custom-select-form-field/model.js +0 -1
  90. package/dist/components/custom-select-list/index.js +0 -1
  91. package/dist/components/custom-select-list/model.js +0 -1
  92. package/dist/components/custom-select-list-item/index.js +0 -1
  93. package/dist/components/divider/index.js +0 -1
  94. package/dist/components/drawer/index.js +0 -1
  95. package/dist/components/header/index.js +0 -1
  96. package/dist/components/header/model.js +0 -1
  97. package/dist/components/icon/index.js +0 -1
  98. package/dist/components/infotext/index.js +0 -1
  99. package/dist/components/infotext/model.js +0 -1
  100. package/dist/components/input/index.js +0 -1
  101. package/dist/components/link/index.js +0 -1
  102. package/dist/components/navigation/index.js +0 -1
  103. package/dist/components/navigation/model.js +0 -1
  104. package/dist/components/navigation-item/index.js +0 -1
  105. package/dist/components/navigation-item/model.js +0 -1
  106. package/dist/components/notification/index.js +0 -1
  107. package/dist/components/page/index.js +0 -1
  108. package/dist/components/popover/index.js +0 -1
  109. package/dist/components/popover/model.js +0 -1
  110. package/dist/components/radio/index.js +0 -1
  111. package/dist/components/radio/model.js +0 -1
  112. package/dist/components/section/index.js +0 -1
  113. package/dist/components/section/model.js +0 -1
  114. package/dist/components/select/index.js +0 -1
  115. package/dist/components/select/model.js +0 -1
  116. package/dist/components/stack/index.js +0 -1
  117. package/dist/components/switch/index.js +0 -1
  118. package/dist/components/switch/model.js +0 -1
  119. package/dist/components/tab-item/index.js +0 -1
  120. package/dist/components/tab-item/model.js +0 -1
  121. package/dist/components/tab-list/index.js +0 -1
  122. package/dist/components/tab-list/model.js +0 -1
  123. package/dist/components/tab-panel/index.js +0 -1
  124. package/dist/components/tab-panel/model.js +0 -1
  125. package/dist/components/tabs/index.js +0 -1
  126. package/dist/components/tag/index.js +0 -1
  127. package/dist/components/textarea/index.js +0 -1
  128. package/dist/components/tooltip/index.js +0 -1
  129. package/dist/shared/examples/index.js +0 -4
  130. package/dist/shared/figma.js +0 -1
  131. package/dist/shared/showcase/show-code-link.js +0 -51
@@ -1,167 +1,49 @@
1
- export const uuid = () => {
2
- var _a, _b;
3
- if (typeof window !== 'undefined') {
4
- if ((_a = window.crypto) === null || _a === void 0 ? void 0 : _a.randomUUID) {
5
- return window.crypto.randomUUID();
6
- }
7
- else if ((_b = window.crypto) === null || _b === void 0 ? void 0 : _b.getRandomValues) {
8
- return window.crypto.getRandomValues(new Uint32Array(3)).join('-');
9
- }
10
- }
11
- return Math.random().toString().substring(2);
12
- };
13
- export const addAttributeToChildren = (element, attribute) => {
14
- const children = element.children;
15
- Object.values(children).forEach((child) => {
16
- child.setAttribute(attribute.key, attribute.value);
17
- if (child.children.length > 0) {
18
- addAttributeToChildren(child, attribute);
19
- }
20
- });
21
- };
22
- export const cls = (...args) => {
23
- let result = '';
24
- for (const arg of args) {
25
- if (arg) {
26
- if (typeof arg === 'string') {
27
- result += `${arg} `;
28
- }
29
- else {
30
- for (const key in arg) {
31
- if (arg[key]) {
32
- result += `${key} `;
33
- }
34
- }
35
- }
36
- }
37
- }
38
- return result.trim();
39
- };
40
- export const isArrayOfStrings = (value) => Array.isArray(value) && value.every(item => typeof item === 'string');
41
- const appleOs = ['Mac', 'iPhone', 'iPad', 'iPod'];
42
- export const hasVoiceOver = () => typeof window !== 'undefined' && appleOs.some(os => window.navigator.userAgent.includes(os));
43
- /**
44
- * Determines if the current browser is Safari running on an iOS device.
45
- *
46
- * This function checks the user agent string to verify both iOS platform
47
- * (iPad, iPhone, or iPod) and Safari browser, excluding other browsers
48
- * such as Chrome, Firefox, Opera, and Edge on iOS.
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 };
@@ -1,136 +1,69 @@
1
- import { handleDataOutside } from './floating-components';
2
- export const isEventTargetNavigationItem = (event) => {
3
- var _a, _b;
4
- const { target } = event;
5
- return Boolean(!((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('db-navigation-item-expand-button')) && ((_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('db-navigation-item')));
6
- };
7
- export class NavigationItemSafeTriangle {
8
- constructor(element, subNavigation) {
9
- var _a;
10
- this.parentSubNavigation = null;
11
- this.initialized = false;
12
- this.mouseX = 0;
13
- this.mouseY = 0;
14
- this.element = element;
15
- this.subNavigation = subNavigation;
16
- if (!this.element || !this.subNavigation) {
17
- return;
18
- }
19
- this.parentSubNavigation = (_a = this.element) === null || _a === void 0 ? void 0 : _a.closest('.db-sub-navigation');
20
- /*
21
- * only initiate if:
22
- * 1. item is not at root navigation level
23
- * 2. item is not in the mobile navigation / within db-drawer
24
- */
25
- if (this.parentSubNavigation && !this.element.closest('.db-drawer')) {
26
- this.init();
27
- }
28
- }
29
- init() {
30
- var _a, _b, _c;
31
- const parentElementWidth = (_b = (_a = this.parentSubNavigation) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
32
- // the triangle has the width of the sub-navigation, current nav-item can be wider.
33
- // so the width of the triangle must be adapted to a possibly wider nav-item.
34
- (_c = this.element) === null || _c === void 0 ? void 0 : _c.style.setProperty('--db-navigation-item-inline-size', `${parentElementWidth}px`);
35
- this.initialized = true;
36
- }
37
- enableFollow() {
38
- var _a, _b;
39
- if (!this.initialized || this.triangleData || !this.element || !this.subNavigation) {
40
- return;
41
- }
42
- const dataOutsidePair = handleDataOutside(this.subNavigation);
43
- const itemRect = this.element.getBoundingClientRect();
44
- const parentElementWidth = (_b = (_a = this.parentSubNavigation) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) !== null && _b !== void 0 ? _b : 0;
45
- this.triangleData = {
46
- itemRect,
47
- parentElementWidth,
48
- subNavigationHeight: this.subNavigation.getBoundingClientRect().height,
49
- padding: (parentElementWidth - itemRect.width) / 2,
50
- outsideVX: dataOutsidePair.vx,
51
- outsideVY: dataOutsidePair.vy
52
- };
53
- }
54
- disableFollow() {
55
- this.triangleData = undefined;
56
- }
57
- getTriangleTipX() {
58
- if (!this.triangleData)
59
- return 0;
60
- if (this.triangleData.outsideVX === 'right') {
61
- // vertical flipped triangle needs an inverted x pos
62
- return this.triangleData.itemRect.width - this.mouseX;
63
- }
64
- // triangle stops shrinking from 75% x pos
65
- return Math.min(this.mouseX, this.triangleData.itemRect.width * 0.75);
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 };
@@ -1,15 +1,10 @@
1
- const reactHtmlAttributes = ['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',
2
- // other attributes for button,input,etc.
3
- 'form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'capture', 'dirName', 'download', 'ping'];
4
- export const filterPassingProps = (props, propsPassingFilter) => Object.keys(props).filter(key => (key.startsWith('data-') || key.startsWith('aria-') || key.startsWith('default') || key.startsWith('auto') || key.startsWith('item') || key.startsWith('on') || reactHtmlAttributes.includes(key)) && !propsPassingFilter.includes(key)).reduce((obj, key) => {
5
- return Object.assign(Object.assign({}, obj), { [key]: props[key] });
6
- }, {});
7
- export const getRootProps = (props, rooProps) => {
8
- return Object.keys(props).filter(key => rooProps.includes(key)).reduce((obj, key) => {
9
- return Object.assign(Object.assign({}, obj), { [key]: props[key] });
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.9.1",
3
+ "version": "4.10.0-esm-94516f3",
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.9.1",
21
- "@db-ux/core-foundations": "4.9.1"
20
+ "@db-ux/core-components": "4.10.0-esm-94516f3",
21
+ "@db-ux/core-foundations": "4.10.0-esm-94516f3"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@playwright/experimental-ct-react": "1.60.0",
25
- "@types/react": "19.2.14",
25
+ "@types/react": "19.2.15",
26
+ "@vitejs/plugin-react": "6.0.2",
26
27
  "cpr": "3.0.1",
27
- "npm-run-all2": "8.0.4",
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 --parallel mv:*",
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';