@genesislcap/foundation-header 14.424.1-alpha-cfc2887.0 → 14.425.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/dist/custom-elements.json +155 -155
- package/dist/react.cjs +132 -30
- package/dist/react.mjs +132 -30
- package/package.json +23 -26
|
@@ -33,6 +33,161 @@
|
|
|
33
33
|
}
|
|
34
34
|
]
|
|
35
35
|
},
|
|
36
|
+
{
|
|
37
|
+
"kind": "javascript-module",
|
|
38
|
+
"path": "src/config/config.ts",
|
|
39
|
+
"declarations": [
|
|
40
|
+
{
|
|
41
|
+
"kind": "variable",
|
|
42
|
+
"name": "defaultHeaderConfig",
|
|
43
|
+
"type": {
|
|
44
|
+
"text": "HeaderConfig"
|
|
45
|
+
},
|
|
46
|
+
"default": "{\n name: 'foundation-header',\n templateOptions: defaultTemplateOptions,\n}",
|
|
47
|
+
"description": "Default HeaderConfig DI implementation.",
|
|
48
|
+
"privacy": "public"
|
|
49
|
+
}
|
|
50
|
+
],
|
|
51
|
+
"exports": [
|
|
52
|
+
{
|
|
53
|
+
"kind": "js",
|
|
54
|
+
"name": "defaultHeaderConfig",
|
|
55
|
+
"declaration": {
|
|
56
|
+
"name": "defaultHeaderConfig",
|
|
57
|
+
"module": "src/config/config.ts"
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
]
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"kind": "javascript-module",
|
|
64
|
+
"path": "src/config/configure.ts",
|
|
65
|
+
"declarations": [
|
|
66
|
+
{
|
|
67
|
+
"kind": "function",
|
|
68
|
+
"name": "configure",
|
|
69
|
+
"parameters": [
|
|
70
|
+
{
|
|
71
|
+
"name": "config",
|
|
72
|
+
"type": {
|
|
73
|
+
"text": "Partial<HeaderConfig>"
|
|
74
|
+
},
|
|
75
|
+
"description": "A partial HeaderConfig."
|
|
76
|
+
}
|
|
77
|
+
],
|
|
78
|
+
"description": "A function that allows configuring the header micro-frontend with name and templateOptions.",
|
|
79
|
+
"privacy": "public"
|
|
80
|
+
}
|
|
81
|
+
],
|
|
82
|
+
"exports": [
|
|
83
|
+
{
|
|
84
|
+
"kind": "js",
|
|
85
|
+
"name": "configure",
|
|
86
|
+
"declaration": {
|
|
87
|
+
"name": "configure",
|
|
88
|
+
"module": "src/config/configure.ts"
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
]
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"kind": "javascript-module",
|
|
95
|
+
"path": "src/config/index.ts",
|
|
96
|
+
"declarations": [],
|
|
97
|
+
"exports": [
|
|
98
|
+
{
|
|
99
|
+
"kind": "js",
|
|
100
|
+
"name": "*",
|
|
101
|
+
"declaration": {
|
|
102
|
+
"name": "*",
|
|
103
|
+
"package": "./config"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"kind": "js",
|
|
108
|
+
"name": "*",
|
|
109
|
+
"declaration": {
|
|
110
|
+
"name": "*",
|
|
111
|
+
"package": "./configure"
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"kind": "js",
|
|
116
|
+
"name": "*",
|
|
117
|
+
"declaration": {
|
|
118
|
+
"name": "*",
|
|
119
|
+
"package": "./targetId"
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
]
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
"kind": "javascript-module",
|
|
126
|
+
"path": "src/config/targetId.ts",
|
|
127
|
+
"declarations": [],
|
|
128
|
+
"exports": []
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"kind": "javascript-module",
|
|
132
|
+
"path": "src/config/templates.ts",
|
|
133
|
+
"declarations": [
|
|
134
|
+
{
|
|
135
|
+
"kind": "variable",
|
|
136
|
+
"name": "templateOptionsByDesiginSystemPrefix",
|
|
137
|
+
"type": {
|
|
138
|
+
"text": "Record<string, TemplateComponents>"
|
|
139
|
+
},
|
|
140
|
+
"default": "{\n zero: {\n icon: 'zero-icon',\n button: 'zero-button',\n connectionIndicator: 'zero-connection-indicator',\n aiIndicator: 'zero-ai-indicator',\n environmentIndicator: 'zero-environment-indicator',\n select: 'zero-select',\n option: 'zero-option',\n flyout: 'zero-flyout',\n provider: 'zero-design-system-provider',\n },\n rapid: {\n icon: 'rapid-icon',\n button: 'rapid-button',\n connectionIndicator: 'rapid-connection-indicator',\n aiIndicator: 'rapid-ai-indicator',\n environmentIndicator: 'rapid-environment-indicator',\n select: 'rapid-select',\n option: 'rapid-option',\n flyout: 'rapid-flyout',\n provider: 'rapid-design-system-provider',\n },\n}",
|
|
141
|
+
"description": "templateOptionsByDesiginSystemPrefix.",
|
|
142
|
+
"privacy": "public"
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"kind": "variable",
|
|
146
|
+
"name": "defaultTemplateOptions",
|
|
147
|
+
"type": {
|
|
148
|
+
"text": "TemplateOptions"
|
|
149
|
+
},
|
|
150
|
+
"description": "defaultTemplateOptions.",
|
|
151
|
+
"deprecated": "- Use `rapidTemplateOptions` instead.",
|
|
152
|
+
"privacy": "public"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"kind": "variable",
|
|
156
|
+
"name": "rapidTemplateOptions",
|
|
157
|
+
"type": {
|
|
158
|
+
"text": "TemplateOptions"
|
|
159
|
+
},
|
|
160
|
+
"description": "rapidTemplateOptions.",
|
|
161
|
+
"privacy": "public"
|
|
162
|
+
}
|
|
163
|
+
],
|
|
164
|
+
"exports": [
|
|
165
|
+
{
|
|
166
|
+
"kind": "js",
|
|
167
|
+
"name": "templateOptionsByDesiginSystemPrefix",
|
|
168
|
+
"declaration": {
|
|
169
|
+
"name": "templateOptionsByDesiginSystemPrefix",
|
|
170
|
+
"module": "src/config/templates.ts"
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
{
|
|
174
|
+
"kind": "js",
|
|
175
|
+
"name": "defaultTemplateOptions",
|
|
176
|
+
"declaration": {
|
|
177
|
+
"name": "defaultTemplateOptions",
|
|
178
|
+
"module": "src/config/templates.ts"
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"kind": "js",
|
|
183
|
+
"name": "rapidTemplateOptions",
|
|
184
|
+
"declaration": {
|
|
185
|
+
"name": "rapidTemplateOptions",
|
|
186
|
+
"module": "src/config/templates.ts"
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
]
|
|
190
|
+
},
|
|
36
191
|
{
|
|
37
192
|
"kind": "javascript-module",
|
|
38
193
|
"path": "src/components/control-panel.ts",
|
|
@@ -255,161 +410,6 @@
|
|
|
255
410
|
}
|
|
256
411
|
]
|
|
257
412
|
},
|
|
258
|
-
{
|
|
259
|
-
"kind": "javascript-module",
|
|
260
|
-
"path": "src/config/config.ts",
|
|
261
|
-
"declarations": [
|
|
262
|
-
{
|
|
263
|
-
"kind": "variable",
|
|
264
|
-
"name": "defaultHeaderConfig",
|
|
265
|
-
"type": {
|
|
266
|
-
"text": "HeaderConfig"
|
|
267
|
-
},
|
|
268
|
-
"default": "{\n name: 'foundation-header',\n templateOptions: defaultTemplateOptions,\n}",
|
|
269
|
-
"description": "Default HeaderConfig DI implementation.",
|
|
270
|
-
"privacy": "public"
|
|
271
|
-
}
|
|
272
|
-
],
|
|
273
|
-
"exports": [
|
|
274
|
-
{
|
|
275
|
-
"kind": "js",
|
|
276
|
-
"name": "defaultHeaderConfig",
|
|
277
|
-
"declaration": {
|
|
278
|
-
"name": "defaultHeaderConfig",
|
|
279
|
-
"module": "src/config/config.ts"
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
]
|
|
283
|
-
},
|
|
284
|
-
{
|
|
285
|
-
"kind": "javascript-module",
|
|
286
|
-
"path": "src/config/configure.ts",
|
|
287
|
-
"declarations": [
|
|
288
|
-
{
|
|
289
|
-
"kind": "function",
|
|
290
|
-
"name": "configure",
|
|
291
|
-
"parameters": [
|
|
292
|
-
{
|
|
293
|
-
"name": "config",
|
|
294
|
-
"type": {
|
|
295
|
-
"text": "Partial<HeaderConfig>"
|
|
296
|
-
},
|
|
297
|
-
"description": "A partial HeaderConfig."
|
|
298
|
-
}
|
|
299
|
-
],
|
|
300
|
-
"description": "A function that allows configuring the header micro-frontend with name and templateOptions.",
|
|
301
|
-
"privacy": "public"
|
|
302
|
-
}
|
|
303
|
-
],
|
|
304
|
-
"exports": [
|
|
305
|
-
{
|
|
306
|
-
"kind": "js",
|
|
307
|
-
"name": "configure",
|
|
308
|
-
"declaration": {
|
|
309
|
-
"name": "configure",
|
|
310
|
-
"module": "src/config/configure.ts"
|
|
311
|
-
}
|
|
312
|
-
}
|
|
313
|
-
]
|
|
314
|
-
},
|
|
315
|
-
{
|
|
316
|
-
"kind": "javascript-module",
|
|
317
|
-
"path": "src/config/index.ts",
|
|
318
|
-
"declarations": [],
|
|
319
|
-
"exports": [
|
|
320
|
-
{
|
|
321
|
-
"kind": "js",
|
|
322
|
-
"name": "*",
|
|
323
|
-
"declaration": {
|
|
324
|
-
"name": "*",
|
|
325
|
-
"package": "./config"
|
|
326
|
-
}
|
|
327
|
-
},
|
|
328
|
-
{
|
|
329
|
-
"kind": "js",
|
|
330
|
-
"name": "*",
|
|
331
|
-
"declaration": {
|
|
332
|
-
"name": "*",
|
|
333
|
-
"package": "./configure"
|
|
334
|
-
}
|
|
335
|
-
},
|
|
336
|
-
{
|
|
337
|
-
"kind": "js",
|
|
338
|
-
"name": "*",
|
|
339
|
-
"declaration": {
|
|
340
|
-
"name": "*",
|
|
341
|
-
"package": "./targetId"
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
]
|
|
345
|
-
},
|
|
346
|
-
{
|
|
347
|
-
"kind": "javascript-module",
|
|
348
|
-
"path": "src/config/targetId.ts",
|
|
349
|
-
"declarations": [],
|
|
350
|
-
"exports": []
|
|
351
|
-
},
|
|
352
|
-
{
|
|
353
|
-
"kind": "javascript-module",
|
|
354
|
-
"path": "src/config/templates.ts",
|
|
355
|
-
"declarations": [
|
|
356
|
-
{
|
|
357
|
-
"kind": "variable",
|
|
358
|
-
"name": "templateOptionsByDesiginSystemPrefix",
|
|
359
|
-
"type": {
|
|
360
|
-
"text": "Record<string, TemplateComponents>"
|
|
361
|
-
},
|
|
362
|
-
"default": "{\n zero: {\n icon: 'zero-icon',\n button: 'zero-button',\n connectionIndicator: 'zero-connection-indicator',\n aiIndicator: 'zero-ai-indicator',\n environmentIndicator: 'zero-environment-indicator',\n select: 'zero-select',\n option: 'zero-option',\n flyout: 'zero-flyout',\n provider: 'zero-design-system-provider',\n },\n rapid: {\n icon: 'rapid-icon',\n button: 'rapid-button',\n connectionIndicator: 'rapid-connection-indicator',\n aiIndicator: 'rapid-ai-indicator',\n environmentIndicator: 'rapid-environment-indicator',\n select: 'rapid-select',\n option: 'rapid-option',\n flyout: 'rapid-flyout',\n provider: 'rapid-design-system-provider',\n },\n}",
|
|
363
|
-
"description": "templateOptionsByDesiginSystemPrefix.",
|
|
364
|
-
"privacy": "public"
|
|
365
|
-
},
|
|
366
|
-
{
|
|
367
|
-
"kind": "variable",
|
|
368
|
-
"name": "defaultTemplateOptions",
|
|
369
|
-
"type": {
|
|
370
|
-
"text": "TemplateOptions"
|
|
371
|
-
},
|
|
372
|
-
"description": "defaultTemplateOptions.",
|
|
373
|
-
"deprecated": "- Use `rapidTemplateOptions` instead.",
|
|
374
|
-
"privacy": "public"
|
|
375
|
-
},
|
|
376
|
-
{
|
|
377
|
-
"kind": "variable",
|
|
378
|
-
"name": "rapidTemplateOptions",
|
|
379
|
-
"type": {
|
|
380
|
-
"text": "TemplateOptions"
|
|
381
|
-
},
|
|
382
|
-
"description": "rapidTemplateOptions.",
|
|
383
|
-
"privacy": "public"
|
|
384
|
-
}
|
|
385
|
-
],
|
|
386
|
-
"exports": [
|
|
387
|
-
{
|
|
388
|
-
"kind": "js",
|
|
389
|
-
"name": "templateOptionsByDesiginSystemPrefix",
|
|
390
|
-
"declaration": {
|
|
391
|
-
"name": "templateOptionsByDesiginSystemPrefix",
|
|
392
|
-
"module": "src/config/templates.ts"
|
|
393
|
-
}
|
|
394
|
-
},
|
|
395
|
-
{
|
|
396
|
-
"kind": "js",
|
|
397
|
-
"name": "defaultTemplateOptions",
|
|
398
|
-
"declaration": {
|
|
399
|
-
"name": "defaultTemplateOptions",
|
|
400
|
-
"module": "src/config/templates.ts"
|
|
401
|
-
}
|
|
402
|
-
},
|
|
403
|
-
{
|
|
404
|
-
"kind": "js",
|
|
405
|
-
"name": "rapidTemplateOptions",
|
|
406
|
-
"declaration": {
|
|
407
|
-
"name": "rapidTemplateOptions",
|
|
408
|
-
"module": "src/config/templates.ts"
|
|
409
|
-
}
|
|
410
|
-
}
|
|
411
|
-
]
|
|
412
|
-
},
|
|
413
413
|
{
|
|
414
414
|
"kind": "javascript-module",
|
|
415
415
|
"path": "src/main/index.ts",
|
package/dist/react.cjs
CHANGED
|
@@ -5,46 +5,148 @@
|
|
|
5
5
|
|
|
6
6
|
'use strict';
|
|
7
7
|
|
|
8
|
-
const { provideReactWrapper } = require('@microsoft/fast-react-wrapper');
|
|
9
8
|
const React = require('react');
|
|
10
9
|
const { ControlPanel: ControlPanelWC } = require('./esm/components/control-panel.js');
|
|
11
10
|
const { Navigation: NavigationWC, RapidHeader: RapidHeaderWC, ZeroHeader: ZeroHeaderWC } = require('./esm/main/main.js');
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
function _mergeRefs(...refs) {
|
|
13
|
+
return (value) => {
|
|
14
|
+
for (const ref of refs) {
|
|
15
|
+
if (typeof ref === 'function') ref(value);
|
|
16
|
+
else if (ref != null) ref.current = value;
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
}
|
|
14
20
|
|
|
15
|
-
const ControlPanel =
|
|
21
|
+
const ControlPanel = React.forwardRef(function ControlPanel(props, ref) {
|
|
22
|
+
const { children, ...rest } = props;
|
|
23
|
+
return React.createElement(customElements.getName(ControlPanelWC) ?? 'control-panel', { ...rest, ref }, children);
|
|
24
|
+
});
|
|
16
25
|
|
|
17
|
-
const Navigation =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
const Navigation = React.forwardRef(function Navigation(props, ref) {
|
|
27
|
+
const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
|
|
28
|
+
const _innerRef = React.useRef(null);
|
|
29
|
+
const _onLuminanceIconClickedRef = React.useRef(onLuminanceIconClicked);
|
|
30
|
+
_onLuminanceIconClickedRef.current = onLuminanceIconClicked;
|
|
31
|
+
const _onMiscIconClickedRef = React.useRef(onMiscIconClicked);
|
|
32
|
+
_onMiscIconClickedRef.current = onMiscIconClicked;
|
|
33
|
+
const _onNotificationIconClickedRef = React.useRef(onNotificationIconClicked);
|
|
34
|
+
_onNotificationIconClickedRef.current = onNotificationIconClicked;
|
|
35
|
+
const _onLanguageChangedRef = React.useRef(onLanguageChanged);
|
|
36
|
+
_onLanguageChangedRef.current = onLanguageChanged;
|
|
37
|
+
const _onLogoutClickedRef = React.useRef(onLogoutClicked);
|
|
38
|
+
_onLogoutClickedRef.current = onLogoutClicked;
|
|
39
|
+
const _onNavButtonClickedRef = React.useRef(onNavButtonClicked);
|
|
40
|
+
_onNavButtonClickedRef.current = onNavButtonClicked;
|
|
41
|
+
React.useLayoutEffect(() => {
|
|
42
|
+
const el = _innerRef.current;
|
|
43
|
+
if (!el) return;
|
|
44
|
+
const _onLuminanceIconClickedFn = (e) => _onLuminanceIconClickedRef.current?.(e);
|
|
45
|
+
el.addEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
46
|
+
const _onMiscIconClickedFn = (e) => _onMiscIconClickedRef.current?.(e);
|
|
47
|
+
el.addEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
48
|
+
const _onNotificationIconClickedFn = (e) => _onNotificationIconClickedRef.current?.(e);
|
|
49
|
+
el.addEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
50
|
+
const _onLanguageChangedFn = (e) => _onLanguageChangedRef.current?.(e);
|
|
51
|
+
el.addEventListener('language-changed', _onLanguageChangedFn);
|
|
52
|
+
const _onLogoutClickedFn = (e) => _onLogoutClickedRef.current?.(e);
|
|
53
|
+
el.addEventListener('logout-clicked', _onLogoutClickedFn);
|
|
54
|
+
const _onNavButtonClickedFn = (e) => _onNavButtonClickedRef.current?.(e);
|
|
55
|
+
el.addEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
56
|
+
return () => {
|
|
57
|
+
el.removeEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
58
|
+
el.removeEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
59
|
+
el.removeEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
60
|
+
el.removeEventListener('language-changed', _onLanguageChangedFn);
|
|
61
|
+
el.removeEventListener('logout-clicked', _onLogoutClickedFn);
|
|
62
|
+
el.removeEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
63
|
+
};
|
|
64
|
+
}, []);
|
|
65
|
+
return React.createElement(customElements.getName(NavigationWC) ?? 'foundation-header', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
|
|
26
66
|
});
|
|
27
67
|
|
|
28
|
-
const ZeroHeader =
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
68
|
+
const ZeroHeader = React.forwardRef(function ZeroHeader(props, ref) {
|
|
69
|
+
const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
|
|
70
|
+
const _innerRef = React.useRef(null);
|
|
71
|
+
const _onLuminanceIconClickedRef = React.useRef(onLuminanceIconClicked);
|
|
72
|
+
_onLuminanceIconClickedRef.current = onLuminanceIconClicked;
|
|
73
|
+
const _onMiscIconClickedRef = React.useRef(onMiscIconClicked);
|
|
74
|
+
_onMiscIconClickedRef.current = onMiscIconClicked;
|
|
75
|
+
const _onNotificationIconClickedRef = React.useRef(onNotificationIconClicked);
|
|
76
|
+
_onNotificationIconClickedRef.current = onNotificationIconClicked;
|
|
77
|
+
const _onLanguageChangedRef = React.useRef(onLanguageChanged);
|
|
78
|
+
_onLanguageChangedRef.current = onLanguageChanged;
|
|
79
|
+
const _onLogoutClickedRef = React.useRef(onLogoutClicked);
|
|
80
|
+
_onLogoutClickedRef.current = onLogoutClicked;
|
|
81
|
+
const _onNavButtonClickedRef = React.useRef(onNavButtonClicked);
|
|
82
|
+
_onNavButtonClickedRef.current = onNavButtonClicked;
|
|
83
|
+
React.useLayoutEffect(() => {
|
|
84
|
+
const el = _innerRef.current;
|
|
85
|
+
if (!el) return;
|
|
86
|
+
const _onLuminanceIconClickedFn = (e) => _onLuminanceIconClickedRef.current?.(e);
|
|
87
|
+
el.addEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
88
|
+
const _onMiscIconClickedFn = (e) => _onMiscIconClickedRef.current?.(e);
|
|
89
|
+
el.addEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
90
|
+
const _onNotificationIconClickedFn = (e) => _onNotificationIconClickedRef.current?.(e);
|
|
91
|
+
el.addEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
92
|
+
const _onLanguageChangedFn = (e) => _onLanguageChangedRef.current?.(e);
|
|
93
|
+
el.addEventListener('language-changed', _onLanguageChangedFn);
|
|
94
|
+
const _onLogoutClickedFn = (e) => _onLogoutClickedRef.current?.(e);
|
|
95
|
+
el.addEventListener('logout-clicked', _onLogoutClickedFn);
|
|
96
|
+
const _onNavButtonClickedFn = (e) => _onNavButtonClickedRef.current?.(e);
|
|
97
|
+
el.addEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
98
|
+
return () => {
|
|
99
|
+
el.removeEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
100
|
+
el.removeEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
101
|
+
el.removeEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
102
|
+
el.removeEventListener('language-changed', _onLanguageChangedFn);
|
|
103
|
+
el.removeEventListener('logout-clicked', _onLogoutClickedFn);
|
|
104
|
+
el.removeEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
105
|
+
};
|
|
106
|
+
}, []);
|
|
107
|
+
return React.createElement(customElements.getName(ZeroHeaderWC) ?? 'zero-header', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
|
|
37
108
|
});
|
|
38
109
|
|
|
39
|
-
const RapidHeader =
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
110
|
+
const RapidHeader = React.forwardRef(function RapidHeader(props, ref) {
|
|
111
|
+
const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
|
|
112
|
+
const _innerRef = React.useRef(null);
|
|
113
|
+
const _onLuminanceIconClickedRef = React.useRef(onLuminanceIconClicked);
|
|
114
|
+
_onLuminanceIconClickedRef.current = onLuminanceIconClicked;
|
|
115
|
+
const _onMiscIconClickedRef = React.useRef(onMiscIconClicked);
|
|
116
|
+
_onMiscIconClickedRef.current = onMiscIconClicked;
|
|
117
|
+
const _onNotificationIconClickedRef = React.useRef(onNotificationIconClicked);
|
|
118
|
+
_onNotificationIconClickedRef.current = onNotificationIconClicked;
|
|
119
|
+
const _onLanguageChangedRef = React.useRef(onLanguageChanged);
|
|
120
|
+
_onLanguageChangedRef.current = onLanguageChanged;
|
|
121
|
+
const _onLogoutClickedRef = React.useRef(onLogoutClicked);
|
|
122
|
+
_onLogoutClickedRef.current = onLogoutClicked;
|
|
123
|
+
const _onNavButtonClickedRef = React.useRef(onNavButtonClicked);
|
|
124
|
+
_onNavButtonClickedRef.current = onNavButtonClicked;
|
|
125
|
+
React.useLayoutEffect(() => {
|
|
126
|
+
const el = _innerRef.current;
|
|
127
|
+
if (!el) return;
|
|
128
|
+
const _onLuminanceIconClickedFn = (e) => _onLuminanceIconClickedRef.current?.(e);
|
|
129
|
+
el.addEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
130
|
+
const _onMiscIconClickedFn = (e) => _onMiscIconClickedRef.current?.(e);
|
|
131
|
+
el.addEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
132
|
+
const _onNotificationIconClickedFn = (e) => _onNotificationIconClickedRef.current?.(e);
|
|
133
|
+
el.addEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
134
|
+
const _onLanguageChangedFn = (e) => _onLanguageChangedRef.current?.(e);
|
|
135
|
+
el.addEventListener('language-changed', _onLanguageChangedFn);
|
|
136
|
+
const _onLogoutClickedFn = (e) => _onLogoutClickedRef.current?.(e);
|
|
137
|
+
el.addEventListener('logout-clicked', _onLogoutClickedFn);
|
|
138
|
+
const _onNavButtonClickedFn = (e) => _onNavButtonClickedRef.current?.(e);
|
|
139
|
+
el.addEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
140
|
+
return () => {
|
|
141
|
+
el.removeEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
142
|
+
el.removeEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
143
|
+
el.removeEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
144
|
+
el.removeEventListener('language-changed', _onLanguageChangedFn);
|
|
145
|
+
el.removeEventListener('logout-clicked', _onLogoutClickedFn);
|
|
146
|
+
el.removeEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
147
|
+
};
|
|
148
|
+
}, []);
|
|
149
|
+
return React.createElement(customElements.getName(RapidHeaderWC) ?? 'rapid-header', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
|
|
48
150
|
});
|
|
49
151
|
|
|
50
152
|
module.exports = {
|
package/dist/react.mjs
CHANGED
|
@@ -3,44 +3,146 @@
|
|
|
3
3
|
* Generated from custom-elements manifest.
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
|
|
7
6
|
import React from 'react';
|
|
8
7
|
import { ControlPanel as ControlPanelWC } from './esm/components/control-panel.js';
|
|
9
8
|
import { Navigation as NavigationWC, RapidHeader as RapidHeaderWC, ZeroHeader as ZeroHeaderWC } from './esm/main/main.js';
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
function _mergeRefs(...refs) {
|
|
11
|
+
return (value) => {
|
|
12
|
+
for (const ref of refs) {
|
|
13
|
+
if (typeof ref === 'function') ref(value);
|
|
14
|
+
else if (ref != null) ref.current = value;
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
}
|
|
12
18
|
|
|
13
|
-
export const ControlPanel =
|
|
19
|
+
export const ControlPanel = React.forwardRef(function ControlPanel(props, ref) {
|
|
20
|
+
const { children, ...rest } = props;
|
|
21
|
+
return React.createElement(customElements.getName(ControlPanelWC) ?? 'control-panel', { ...rest, ref }, children);
|
|
22
|
+
});
|
|
14
23
|
|
|
15
|
-
export const Navigation =
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
+
export const Navigation = React.forwardRef(function Navigation(props, ref) {
|
|
25
|
+
const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
|
|
26
|
+
const _innerRef = React.useRef(null);
|
|
27
|
+
const _onLuminanceIconClickedRef = React.useRef(onLuminanceIconClicked);
|
|
28
|
+
_onLuminanceIconClickedRef.current = onLuminanceIconClicked;
|
|
29
|
+
const _onMiscIconClickedRef = React.useRef(onMiscIconClicked);
|
|
30
|
+
_onMiscIconClickedRef.current = onMiscIconClicked;
|
|
31
|
+
const _onNotificationIconClickedRef = React.useRef(onNotificationIconClicked);
|
|
32
|
+
_onNotificationIconClickedRef.current = onNotificationIconClicked;
|
|
33
|
+
const _onLanguageChangedRef = React.useRef(onLanguageChanged);
|
|
34
|
+
_onLanguageChangedRef.current = onLanguageChanged;
|
|
35
|
+
const _onLogoutClickedRef = React.useRef(onLogoutClicked);
|
|
36
|
+
_onLogoutClickedRef.current = onLogoutClicked;
|
|
37
|
+
const _onNavButtonClickedRef = React.useRef(onNavButtonClicked);
|
|
38
|
+
_onNavButtonClickedRef.current = onNavButtonClicked;
|
|
39
|
+
React.useLayoutEffect(() => {
|
|
40
|
+
const el = _innerRef.current;
|
|
41
|
+
if (!el) return;
|
|
42
|
+
const _onLuminanceIconClickedFn = (e) => _onLuminanceIconClickedRef.current?.(e);
|
|
43
|
+
el.addEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
44
|
+
const _onMiscIconClickedFn = (e) => _onMiscIconClickedRef.current?.(e);
|
|
45
|
+
el.addEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
46
|
+
const _onNotificationIconClickedFn = (e) => _onNotificationIconClickedRef.current?.(e);
|
|
47
|
+
el.addEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
48
|
+
const _onLanguageChangedFn = (e) => _onLanguageChangedRef.current?.(e);
|
|
49
|
+
el.addEventListener('language-changed', _onLanguageChangedFn);
|
|
50
|
+
const _onLogoutClickedFn = (e) => _onLogoutClickedRef.current?.(e);
|
|
51
|
+
el.addEventListener('logout-clicked', _onLogoutClickedFn);
|
|
52
|
+
const _onNavButtonClickedFn = (e) => _onNavButtonClickedRef.current?.(e);
|
|
53
|
+
el.addEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
54
|
+
return () => {
|
|
55
|
+
el.removeEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
56
|
+
el.removeEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
57
|
+
el.removeEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
58
|
+
el.removeEventListener('language-changed', _onLanguageChangedFn);
|
|
59
|
+
el.removeEventListener('logout-clicked', _onLogoutClickedFn);
|
|
60
|
+
el.removeEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
61
|
+
};
|
|
62
|
+
}, []);
|
|
63
|
+
return React.createElement(customElements.getName(NavigationWC) ?? 'foundation-header', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
|
|
24
64
|
});
|
|
25
65
|
|
|
26
|
-
export const ZeroHeader =
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
66
|
+
export const ZeroHeader = React.forwardRef(function ZeroHeader(props, ref) {
|
|
67
|
+
const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
|
|
68
|
+
const _innerRef = React.useRef(null);
|
|
69
|
+
const _onLuminanceIconClickedRef = React.useRef(onLuminanceIconClicked);
|
|
70
|
+
_onLuminanceIconClickedRef.current = onLuminanceIconClicked;
|
|
71
|
+
const _onMiscIconClickedRef = React.useRef(onMiscIconClicked);
|
|
72
|
+
_onMiscIconClickedRef.current = onMiscIconClicked;
|
|
73
|
+
const _onNotificationIconClickedRef = React.useRef(onNotificationIconClicked);
|
|
74
|
+
_onNotificationIconClickedRef.current = onNotificationIconClicked;
|
|
75
|
+
const _onLanguageChangedRef = React.useRef(onLanguageChanged);
|
|
76
|
+
_onLanguageChangedRef.current = onLanguageChanged;
|
|
77
|
+
const _onLogoutClickedRef = React.useRef(onLogoutClicked);
|
|
78
|
+
_onLogoutClickedRef.current = onLogoutClicked;
|
|
79
|
+
const _onNavButtonClickedRef = React.useRef(onNavButtonClicked);
|
|
80
|
+
_onNavButtonClickedRef.current = onNavButtonClicked;
|
|
81
|
+
React.useLayoutEffect(() => {
|
|
82
|
+
const el = _innerRef.current;
|
|
83
|
+
if (!el) return;
|
|
84
|
+
const _onLuminanceIconClickedFn = (e) => _onLuminanceIconClickedRef.current?.(e);
|
|
85
|
+
el.addEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
86
|
+
const _onMiscIconClickedFn = (e) => _onMiscIconClickedRef.current?.(e);
|
|
87
|
+
el.addEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
88
|
+
const _onNotificationIconClickedFn = (e) => _onNotificationIconClickedRef.current?.(e);
|
|
89
|
+
el.addEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
90
|
+
const _onLanguageChangedFn = (e) => _onLanguageChangedRef.current?.(e);
|
|
91
|
+
el.addEventListener('language-changed', _onLanguageChangedFn);
|
|
92
|
+
const _onLogoutClickedFn = (e) => _onLogoutClickedRef.current?.(e);
|
|
93
|
+
el.addEventListener('logout-clicked', _onLogoutClickedFn);
|
|
94
|
+
const _onNavButtonClickedFn = (e) => _onNavButtonClickedRef.current?.(e);
|
|
95
|
+
el.addEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
96
|
+
return () => {
|
|
97
|
+
el.removeEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
98
|
+
el.removeEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
99
|
+
el.removeEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
100
|
+
el.removeEventListener('language-changed', _onLanguageChangedFn);
|
|
101
|
+
el.removeEventListener('logout-clicked', _onLogoutClickedFn);
|
|
102
|
+
el.removeEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
103
|
+
};
|
|
104
|
+
}, []);
|
|
105
|
+
return React.createElement(customElements.getName(ZeroHeaderWC) ?? 'zero-header', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
|
|
35
106
|
});
|
|
36
107
|
|
|
37
|
-
export const RapidHeader =
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
108
|
+
export const RapidHeader = React.forwardRef(function RapidHeader(props, ref) {
|
|
109
|
+
const { onLuminanceIconClicked, onMiscIconClicked, onNotificationIconClicked, onLanguageChanged, onLogoutClicked, onNavButtonClicked, children, ...rest } = props;
|
|
110
|
+
const _innerRef = React.useRef(null);
|
|
111
|
+
const _onLuminanceIconClickedRef = React.useRef(onLuminanceIconClicked);
|
|
112
|
+
_onLuminanceIconClickedRef.current = onLuminanceIconClicked;
|
|
113
|
+
const _onMiscIconClickedRef = React.useRef(onMiscIconClicked);
|
|
114
|
+
_onMiscIconClickedRef.current = onMiscIconClicked;
|
|
115
|
+
const _onNotificationIconClickedRef = React.useRef(onNotificationIconClicked);
|
|
116
|
+
_onNotificationIconClickedRef.current = onNotificationIconClicked;
|
|
117
|
+
const _onLanguageChangedRef = React.useRef(onLanguageChanged);
|
|
118
|
+
_onLanguageChangedRef.current = onLanguageChanged;
|
|
119
|
+
const _onLogoutClickedRef = React.useRef(onLogoutClicked);
|
|
120
|
+
_onLogoutClickedRef.current = onLogoutClicked;
|
|
121
|
+
const _onNavButtonClickedRef = React.useRef(onNavButtonClicked);
|
|
122
|
+
_onNavButtonClickedRef.current = onNavButtonClicked;
|
|
123
|
+
React.useLayoutEffect(() => {
|
|
124
|
+
const el = _innerRef.current;
|
|
125
|
+
if (!el) return;
|
|
126
|
+
const _onLuminanceIconClickedFn = (e) => _onLuminanceIconClickedRef.current?.(e);
|
|
127
|
+
el.addEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
128
|
+
const _onMiscIconClickedFn = (e) => _onMiscIconClickedRef.current?.(e);
|
|
129
|
+
el.addEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
130
|
+
const _onNotificationIconClickedFn = (e) => _onNotificationIconClickedRef.current?.(e);
|
|
131
|
+
el.addEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
132
|
+
const _onLanguageChangedFn = (e) => _onLanguageChangedRef.current?.(e);
|
|
133
|
+
el.addEventListener('language-changed', _onLanguageChangedFn);
|
|
134
|
+
const _onLogoutClickedFn = (e) => _onLogoutClickedRef.current?.(e);
|
|
135
|
+
el.addEventListener('logout-clicked', _onLogoutClickedFn);
|
|
136
|
+
const _onNavButtonClickedFn = (e) => _onNavButtonClickedRef.current?.(e);
|
|
137
|
+
el.addEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
138
|
+
return () => {
|
|
139
|
+
el.removeEventListener('luminance-icon-clicked', _onLuminanceIconClickedFn);
|
|
140
|
+
el.removeEventListener('misc-icon-clicked', _onMiscIconClickedFn);
|
|
141
|
+
el.removeEventListener('notification-icon-clicked', _onNotificationIconClickedFn);
|
|
142
|
+
el.removeEventListener('language-changed', _onLanguageChangedFn);
|
|
143
|
+
el.removeEventListener('logout-clicked', _onLogoutClickedFn);
|
|
144
|
+
el.removeEventListener('nav-button-clicked', _onNavButtonClickedFn);
|
|
145
|
+
};
|
|
146
|
+
}, []);
|
|
147
|
+
return React.createElement(customElements.getName(RapidHeaderWC) ?? 'rapid-header', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
|
|
46
148
|
});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-header",
|
|
3
3
|
"description": "Genesis Foundation Header",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.425.0",
|
|
5
5
|
"license": "SEE LICENSE IN license.txt",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/foundation-header.d.ts",
|
|
@@ -84,29 +84,29 @@
|
|
|
84
84
|
}
|
|
85
85
|
},
|
|
86
86
|
"devDependencies": {
|
|
87
|
-
"@genesislcap/foundation-testing": "14.
|
|
88
|
-
"@genesislcap/genx": "14.
|
|
89
|
-
"@genesislcap/rollup-builder": "14.
|
|
90
|
-
"@genesislcap/ts-builder": "14.
|
|
91
|
-
"@genesislcap/uvu-playwright-builder": "14.
|
|
92
|
-
"@genesislcap/vite-builder": "14.
|
|
93
|
-
"@genesislcap/webpack-builder": "14.
|
|
87
|
+
"@genesislcap/foundation-testing": "14.425.0",
|
|
88
|
+
"@genesislcap/genx": "14.425.0",
|
|
89
|
+
"@genesislcap/rollup-builder": "14.425.0",
|
|
90
|
+
"@genesislcap/ts-builder": "14.425.0",
|
|
91
|
+
"@genesislcap/uvu-playwright-builder": "14.425.0",
|
|
92
|
+
"@genesislcap/vite-builder": "14.425.0",
|
|
93
|
+
"@genesislcap/webpack-builder": "14.425.0"
|
|
94
94
|
},
|
|
95
95
|
"dependencies": {
|
|
96
|
-
"@genesislcap/foundation-ai": "14.
|
|
97
|
-
"@genesislcap/foundation-auth": "14.
|
|
98
|
-
"@genesislcap/foundation-comms": "14.
|
|
99
|
-
"@genesislcap/foundation-events": "14.
|
|
100
|
-
"@genesislcap/foundation-i18n": "14.
|
|
101
|
-
"@genesislcap/foundation-logger": "14.
|
|
102
|
-
"@genesislcap/foundation-login": "14.
|
|
103
|
-
"@genesislcap/foundation-shell": "14.
|
|
104
|
-
"@genesislcap/foundation-ui": "14.
|
|
105
|
-
"@genesislcap/foundation-user": "14.
|
|
106
|
-
"@genesislcap/foundation-utils": "14.
|
|
107
|
-
"@genesislcap/foundation-zero": "14.
|
|
108
|
-
"@genesislcap/rapid-design-system": "14.
|
|
109
|
-
"@genesislcap/web-core": "14.
|
|
96
|
+
"@genesislcap/foundation-ai": "14.425.0",
|
|
97
|
+
"@genesislcap/foundation-auth": "14.425.0",
|
|
98
|
+
"@genesislcap/foundation-comms": "14.425.0",
|
|
99
|
+
"@genesislcap/foundation-events": "14.425.0",
|
|
100
|
+
"@genesislcap/foundation-i18n": "14.425.0",
|
|
101
|
+
"@genesislcap/foundation-logger": "14.425.0",
|
|
102
|
+
"@genesislcap/foundation-login": "14.425.0",
|
|
103
|
+
"@genesislcap/foundation-shell": "14.425.0",
|
|
104
|
+
"@genesislcap/foundation-ui": "14.425.0",
|
|
105
|
+
"@genesislcap/foundation-user": "14.425.0",
|
|
106
|
+
"@genesislcap/foundation-utils": "14.425.0",
|
|
107
|
+
"@genesislcap/foundation-zero": "14.425.0",
|
|
108
|
+
"@genesislcap/rapid-design-system": "14.425.0",
|
|
109
|
+
"@genesislcap/web-core": "14.425.0"
|
|
110
110
|
},
|
|
111
111
|
"repository": {
|
|
112
112
|
"type": "git",
|
|
@@ -117,8 +117,5 @@
|
|
|
117
117
|
"access": "public"
|
|
118
118
|
},
|
|
119
119
|
"customElements": "dist/custom-elements.json",
|
|
120
|
-
"
|
|
121
|
-
"@microsoft/fast-react-wrapper": ">=0.3.0"
|
|
122
|
-
},
|
|
123
|
-
"gitHead": "0460a55fc4d9bde4d0e6e11db51125a371bf5b4d"
|
|
120
|
+
"gitHead": "c49bb94fbc3a74e84f18c7445398af116e1a58bb"
|
|
124
121
|
}
|