@gouvfr-lasuite/ui-kit 0.16.1 → 0.17.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/index.d.ts CHANGED
@@ -4,6 +4,7 @@ import { CunninghamProvider as CunninghamProvider_2 } from '@openfun/cunningham-
4
4
  import { CursorProps } from 'react-arborist';
5
5
  import { default as default_2 } from 'react';
6
6
  import { Dispatch } from 'react';
7
+ import { HTMLAttributes } from 'react';
7
8
  import { JSX } from 'react/jsx-runtime';
8
9
  import { Key } from 'react-stately';
9
10
  import { LabelHTMLAttributes } from 'react';
@@ -53,12 +54,24 @@ export declare type AddShareUserListProps<UserType> = {
53
54
  onSelectRole: (role: string) => void;
54
55
  };
55
56
 
57
+ export declare const AVATAR_COLORS: string[];
58
+
56
59
  export declare type AvatarProps = {
57
60
  fullName: string;
58
61
  size?: "xsmall" | "small" | "medium" | "large";
59
62
  forceColor?: string;
63
+ backgroundColor?: (typeof AVATAR_COLORS)[number];
60
64
  };
61
65
 
66
+ export declare const Badge: ({ children, uppercased, type, className, ...props }: PropsWithChildren<BadgeProps>) => JSX.Element;
67
+
68
+ declare type BadgeProps = HTMLAttributes<HTMLDivElement> & {
69
+ uppercased?: boolean;
70
+ type?: BadgeType;
71
+ };
72
+
73
+ declare type BadgeType = "accent" | "neutral" | "danger" | "success" | "warning" | "info";
74
+
62
75
  export declare type BaseTreeViewData<T> = {
63
76
  id: string;
64
77
  childrenCount?: number;
@@ -79,99 +92,296 @@ export declare const containerSizeMap: Record<IconSize, number>;
79
92
  export declare const cunninghamConfig: {
80
93
  themes: {
81
94
  default: {
82
- theme: {
95
+ globals: {
83
96
  colors: {
84
- "primary-text": string;
85
- "primary-050": string;
86
- "primary-100": string;
87
- "primary-150": string;
88
- "primary-200": string;
89
- "primary-300": string;
90
- "primary-400": string;
91
- "primary-500": string;
92
- "primary-600": string;
93
- "primary-700": string;
94
- "primary-800": string;
95
- "primary-900": string;
96
- "secondary-text": string;
97
- "secondary-100": string;
98
- "secondary-200": string;
99
- "secondary-300": string;
100
- "secondary-400": string;
101
- "secondary-500": string;
102
- "secondary-600": string;
103
- "secondary-700": string;
104
- "secondary-800": string;
105
- "secondary-900": string;
106
- "greyscale-text": string;
107
- "greyscale-000": string;
108
- "greyscale-050": string;
109
- "greyscale-100": string;
110
- "greyscale-200": string;
111
- "greyscale-250": string;
112
- "greyscale-300": string;
113
- "greyscale-350": string;
114
- "greyscale-400": string;
115
- "greyscale-500": string;
116
- "greyscale-600": string;
117
- "greyscale-700": string;
118
- "greyscale-750": string;
119
- "greyscale-800": string;
120
- "greyscale-900": string;
121
- "greyscale-950": string;
122
- "greyscale-1000": string;
123
- "success-text": string;
124
- "success-100": string;
125
- "success-200": string;
126
- "success-300": string;
127
- "success-400": string;
128
- "success-500": string;
129
- "success-600": string;
130
- "success-700": string;
131
- "success-800": string;
132
- "success-900": string;
133
- "info-text": string;
97
+ "brand-050": string;
98
+ "brand-100": string;
99
+ "brand-150": string;
100
+ "brand-200": string;
101
+ "brand-250": string;
102
+ "brand-300": string;
103
+ "brand-350": string;
104
+ "brand-400": string;
105
+ "brand-450": string;
106
+ "brand-500": string;
107
+ "brand-550": string;
108
+ "brand-600": string;
109
+ "brand-650": string;
110
+ "brand-700": string;
111
+ "brand-750": string;
112
+ "brand-800": string;
113
+ "brand-850": string;
114
+ "brand-900": string;
115
+ "brand-950": string;
116
+ "gray-000": string;
117
+ "gray-025": string;
118
+ "gray-050": string;
119
+ "gray-100": string;
120
+ "gray-150": string;
121
+ "gray-200": string;
122
+ "gray-250": string;
123
+ "gray-300": string;
124
+ "gray-350": string;
125
+ "gray-400": string;
126
+ "gray-450": string;
127
+ "gray-500": string;
128
+ "gray-550": string;
129
+ "gray-600": string;
130
+ "gray-650": string;
131
+ "gray-700": string;
132
+ "gray-750": string;
133
+ "gray-800": string;
134
+ "gray-850": string;
135
+ "gray-900": string;
136
+ "gray-950": string;
137
+ "gray-1000": string;
138
+ "info-050": string;
134
139
  "info-100": string;
140
+ "info-150": string;
135
141
  "info-200": string;
142
+ "info-250": string;
136
143
  "info-300": string;
144
+ "info-350": string;
137
145
  "info-400": string;
146
+ "info-450": string;
138
147
  "info-500": string;
148
+ "info-550": string;
139
149
  "info-600": string;
150
+ "info-650": string;
140
151
  "info-700": string;
152
+ "info-750": string;
141
153
  "info-800": string;
154
+ "info-850": string;
142
155
  "info-900": string;
143
- "warning-text": string;
156
+ "info-950": string;
157
+ "success-050": string;
158
+ "success-100": string;
159
+ "success-150": string;
160
+ "success-200": string;
161
+ "success-250": string;
162
+ "success-300": string;
163
+ "success-350": string;
164
+ "success-400": string;
165
+ "success-450": string;
166
+ "success-500": string;
167
+ "success-550": string;
168
+ "success-600": string;
169
+ "success-650": string;
170
+ "success-700": string;
171
+ "success-750": string;
172
+ "success-800": string;
173
+ "success-850": string;
174
+ "success-900": string;
175
+ "success-950": string;
176
+ "warning-050": string;
144
177
  "warning-100": string;
178
+ "warning-150": string;
145
179
  "warning-200": string;
180
+ "warning-250": string;
146
181
  "warning-300": string;
182
+ "warning-350": string;
147
183
  "warning-400": string;
184
+ "warning-450": string;
148
185
  "warning-500": string;
186
+ "warning-550": string;
149
187
  "warning-600": string;
188
+ "warning-650": string;
150
189
  "warning-700": string;
190
+ "warning-750": string;
151
191
  "warning-800": string;
192
+ "warning-850": string;
152
193
  "warning-900": string;
153
- "danger-text": string;
154
- "danger-050": string;
155
- "danger-100": string;
156
- "danger-200": string;
157
- "danger-300": string;
158
- "danger-400": string;
159
- "danger-500": string;
160
- "danger-600": string;
161
- "danger-700": string;
162
- "danger-800": string;
163
- "danger-900": string;
164
- "blue-500": string;
194
+ "warning-950": string;
195
+ "error-050": string;
196
+ "error-100": string;
197
+ "error-150": string;
198
+ "error-200": string;
199
+ "error-250": string;
200
+ "error-300": string;
201
+ "error-350": string;
202
+ "error-400": string;
203
+ "error-450": string;
204
+ "error-500": string;
205
+ "error-550": string;
206
+ "error-600": string;
207
+ "error-650": string;
208
+ "error-700": string;
209
+ "error-750": string;
210
+ "error-800": string;
211
+ "error-850": string;
212
+ "error-900": string;
213
+ "error-950": string;
214
+ "red-050": string;
215
+ "red-100": string;
216
+ "red-150": string;
217
+ "red-200": string;
218
+ "red-250": string;
219
+ "red-300": string;
220
+ "red-350": string;
221
+ "red-400": string;
222
+ "red-450": string;
223
+ "red-500": string;
224
+ "red-550": string;
225
+ "red-600": string;
226
+ "red-650": string;
227
+ "red-700": string;
228
+ "red-750": string;
229
+ "red-800": string;
230
+ "red-850": string;
231
+ "red-900": string;
232
+ "red-950": string;
233
+ "orange-050": string;
234
+ "orange-100": string;
235
+ "orange-150": string;
236
+ "orange-200": string;
237
+ "orange-250": string;
238
+ "orange-300": string;
239
+ "orange-350": string;
240
+ "orange-400": string;
241
+ "orange-450": string;
242
+ "orange-500": string;
243
+ "orange-550": string;
244
+ "orange-600": string;
245
+ "orange-650": string;
246
+ "orange-700": string;
247
+ "orange-750": string;
248
+ "orange-800": string;
249
+ "orange-850": string;
250
+ "orange-900": string;
251
+ "orange-950": string;
252
+ "brown-050": string;
253
+ "brown-100": string;
254
+ "brown-150": string;
255
+ "brown-200": string;
256
+ "brown-250": string;
257
+ "brown-300": string;
258
+ "brown-350": string;
259
+ "brown-400": string;
260
+ "brown-450": string;
165
261
  "brown-500": string;
166
- "cyan-500": string;
167
- "gold-500": string;
262
+ "brown-550": string;
263
+ "brown-600": string;
264
+ "brown-650": string;
265
+ "brown-700": string;
266
+ "brown-750": string;
267
+ "brown-800": string;
268
+ "brown-850": string;
269
+ "brown-900": string;
270
+ "brown-950": string;
271
+ "yellow-050": string;
272
+ "yellow-100": string;
273
+ "yellow-150": string;
274
+ "yellow-200": string;
275
+ "yellow-250": string;
276
+ "yellow-300": string;
277
+ "yellow-350": string;
278
+ "yellow-400": string;
279
+ "yellow-450": string;
280
+ "yellow-500": string;
281
+ "yellow-550": string;
282
+ "yellow-600": string;
283
+ "yellow-650": string;
284
+ "yellow-700": string;
285
+ "yellow-750": string;
286
+ "yellow-800": string;
287
+ "yellow-850": string;
288
+ "yellow-900": string;
289
+ "yellow-950": string;
290
+ "green-050": string;
291
+ "green-100": string;
292
+ "green-150": string;
293
+ "green-200": string;
294
+ "green-250": string;
295
+ "green-300": string;
296
+ "green-350": string;
297
+ "green-400": string;
298
+ "green-450": string;
168
299
  "green-500": string;
169
- "olive-500": string;
170
- "orange-500": string;
300
+ "green-550": string;
301
+ "green-600": string;
302
+ "green-650": string;
303
+ "green-700": string;
304
+ "green-750": string;
305
+ "green-800": string;
306
+ "green-850": string;
307
+ "green-900": string;
308
+ "green-950": string;
309
+ "blue1-050": string;
310
+ "blue1-100": string;
311
+ "blue1-150": string;
312
+ "blue1-200": string;
313
+ "blue1-250": string;
314
+ "blue1-300": string;
315
+ "blue1-350": string;
316
+ "blue1-400": string;
317
+ "blue1-450": string;
318
+ "blue1-500": string;
319
+ "blue1-550": string;
320
+ "blue1-600": string;
321
+ "blue1-650": string;
322
+ "blue1-700": string;
323
+ "blue1-750": string;
324
+ "blue1-800": string;
325
+ "blue1-850": string;
326
+ "blue1-900": string;
327
+ "blue1-950": string;
328
+ "blue2-050": string;
329
+ "blue2-100": string;
330
+ "blue2-150": string;
331
+ "blue2-200": string;
332
+ "blue2-250": string;
333
+ "blue2-300": string;
334
+ "blue2-350": string;
335
+ "blue2-400": string;
336
+ "blue2-450": string;
337
+ "blue2-500": string;
338
+ "blue2-550": string;
339
+ "blue2-600": string;
340
+ "blue2-650": string;
341
+ "blue2-700": string;
342
+ "blue2-750": string;
343
+ "blue2-800": string;
344
+ "blue2-850": string;
345
+ "blue2-900": string;
346
+ "blue2-950": string;
347
+ "purple-050": string;
348
+ "purple-100": string;
349
+ "purple-150": string;
350
+ "purple-200": string;
351
+ "purple-250": string;
352
+ "purple-300": string;
353
+ "purple-350": string;
354
+ "purple-400": string;
355
+ "purple-450": string;
171
356
  "purple-500": string;
172
- "red-500": string;
173
- "yellow-500": string;
174
- "rose-500": string;
357
+ "purple-550": string;
358
+ "purple-600": string;
359
+ "purple-650": string;
360
+ "purple-700": string;
361
+ "purple-750": string;
362
+ "purple-800": string;
363
+ "purple-850": string;
364
+ "purple-900": string;
365
+ "purple-950": string;
366
+ "pink-050": string;
367
+ "pink-100": string;
368
+ "pink-150": string;
369
+ "pink-200": string;
370
+ "pink-250": string;
371
+ "pink-300": string;
372
+ "pink-350": string;
373
+ "pink-400": string;
374
+ "pink-450": string;
375
+ "pink-500": string;
376
+ "pink-550": string;
377
+ "pink-600": string;
378
+ "pink-650": string;
379
+ "pink-700": string;
380
+ "pink-750": string;
381
+ "pink-800": string;
382
+ "pink-850": string;
383
+ "pink-900": string;
384
+ "pink-950": string;
175
385
  };
176
386
  font: {
177
387
  sizes: {
@@ -246,62 +456,8 @@ export declare const cunninghamConfig: {
246
456
  "medium-height": string;
247
457
  "medium-text-height": string;
248
458
  "border-radius": string;
249
- "small-height": string;
250
- primary: {
251
- "background--color": string;
252
- "background--color-hover": string;
253
- "background--color-active": string;
254
- "background--color-disabled": string;
255
- color: string;
256
- "color-hover": string;
257
- "color-active": string;
258
- "color-focus-visible": string;
259
- disabled: string;
260
- };
261
- "primary-text": {
262
- "background--color": string;
263
- "background--color-hover": string;
264
- "background--color-active": string;
265
- "background--color-focus-visible": string;
266
- "background--color-disabled": string;
267
- color: string;
268
- "color-hover": string;
269
- disabled: string;
270
- };
271
- secondary: {
272
- "background--color-hover": string;
273
- "background--color-active": string;
274
- "background--color-focus-visible": string;
275
- "background--disabled": string;
276
- color: string;
277
- "border--color": string;
278
- "border--color-hover": string;
279
- "border--color-disabled": string;
280
- disabled: string;
281
- };
282
- tertiary: {
283
- "background--color": string;
284
- "background--color-focus-visible": string;
285
- "background--color-hover": string;
286
- "background--color-active": string;
287
- "background--disabled": string;
288
- color: string;
289
- disabled: string;
290
- };
291
- "tertiary-text": {
292
- "background--color-hover": string;
293
- "color-hover": string;
294
- color: string;
295
- disabled: string;
296
- };
297
- danger: {
298
- "color-hover": string;
299
- "background--color": string;
300
- "background--color-hover": string;
301
- "background--color-focus-visible": string;
302
- "background--color-disabled": string;
303
- "color-disabled": string;
304
- };
459
+ "border-radius--active": string;
460
+ "border-radius--focus": string;
305
461
  };
306
462
  datagrid: {
307
463
  "header--color": string;
@@ -310,73 +466,6 @@ export declare const cunninghamConfig: {
310
466
  "body--background-color-hover": string;
311
467
  };
312
468
  "forms-checkbox": {
313
- "border-radius": string;
314
- "border-color": string;
315
- "background-color--hover": string;
316
- "border--color-disabled": string;
317
- "border--color": string;
318
- "background--disabled": string;
319
- "background--enable": string;
320
- "check--disabled": string;
321
- "check--enable": string;
322
- color: string;
323
- "label--color": string;
324
- "label--size": string;
325
- "label--weight": string;
326
- "text--color": string;
327
- "text--size": string;
328
- "text--weight": string;
329
- "text--color-disabled": string;
330
- };
331
- "forms-labelledbox": {
332
- "label-color--small": string;
333
- "label-color--small--disabled": string;
334
- "label-color--big": string;
335
- "label-color--big--disabled": string;
336
- };
337
- "forms-radio": {
338
- "border-color": string;
339
- "background-color": string;
340
- "accent-color": string;
341
- "accent-color-disabled": string;
342
- };
343
- "forms-switch": {
344
- "border--color-disabled": string;
345
- "border--color": string;
346
- "handle-background-color": string;
347
- "handle-background-color--disabled": string;
348
- "rail-background-color--disabled": string;
349
- "accent-color": string;
350
- };
351
- "forms-textarea": {
352
- "label-color--focus": string;
353
- "border-radius": string;
354
- "border-color": string;
355
- "box-shadow--color--hover": string;
356
- "box-shadow--color--focus": string;
357
- "value-color": string;
358
- "value-color--disabled": string;
359
- "font-size": string;
360
- };
361
- "forms-input": {
362
- "label-color--focus": string;
363
- "border-radius": string;
364
- "border-color": string;
365
- "box-shadow--color--hover": string;
366
- "box-shadow--color--focus": string;
367
- "value-color": string;
368
- "value-color--disabled": string;
369
- "font-size": string;
370
- };
371
- "forms-select": {
372
- "label-color--focus": string;
373
- "item-font-size": string;
374
- "border-radius": string;
375
- "border-radius-hover": string;
376
- "border-color": string;
377
- "box-shadow--color--hover": string;
378
- "box-shadow--color--focus": string;
379
- "value-color": string;
380
469
  "font-size": string;
381
470
  };
382
471
  badge: {
@@ -598,20 +687,22 @@ export declare const LaGaufre: () => JSX.Element;
598
687
  * - `size`: The size of the CTA.
599
688
  * - `color`: The color of the CTA.
600
689
  */
601
- export declare const LanguagePicker: ({ languages, onChange, size, color, fullWidth }: LanguagePickerProps) => JSX.Element;
690
+ export declare const LanguagePicker: ({ languages, onChange, size, color, variant, fullWidth, }: LanguagePickerProps) => JSX.Element;
602
691
 
603
692
  export declare type LanguagePickerProps = {
604
693
  languages: DropdownMenuOption[];
605
694
  onChange?: (language: string) => void;
606
695
  color?: ButtonProps["color"];
696
+ variant?: ButtonProps["variant"];
607
697
  size?: ButtonProps["size"];
608
698
  fullWidth?: ButtonProps["fullWidth"];
609
699
  };
610
700
 
611
- export declare const LeftPanel: ({ children, isOpen, }: PropsWithChildren<LeftPanelProps>) => JSX.Element;
701
+ export declare const LeftPanel: ({ children, isOpen, hasHeader, }: PropsWithChildren<LeftPanelProps>) => JSX.Element;
612
702
 
613
703
  export declare type LeftPanelProps = {
614
704
  isOpen?: boolean;
705
+ hasHeader?: boolean;
615
706
  };
616
707
 
617
708
  declare type Link = {
@@ -1018,13 +1109,19 @@ export declare type QuickSearchProps = {
1018
1109
  children?: ReactNode;
1019
1110
  };
1020
1111
 
1112
+ declare type ResponsiveStates = {
1113
+ isMobile: boolean;
1114
+ isTablet: boolean;
1115
+ isDesktop: boolean;
1116
+ };
1117
+
1021
1118
  export declare const SearchUserItem: <UserType>({ user, }: SearchUserItemProps<UserType>) => JSX.Element;
1022
1119
 
1023
1120
  declare type SearchUserItemProps<UserType> = {
1024
1121
  user: UserData<UserType>;
1025
1122
  };
1026
1123
 
1027
- export declare const ShareInvitationItem: <UserType, InvitationType>({ invitation, roles, updateRole, deleteInvitation, canUpdate, roleTopMessage, }: ShareInvitationItemProps<UserType, InvitationType>) => JSX.Element;
1124
+ export declare const ShareInvitationItem: <UserType, InvitationType>({ invitation, roles, updateRole, deleteInvitation, canUpdate, showMoreActionsButton, roleTopMessage, }: ShareInvitationItemProps<UserType, InvitationType>) => JSX.Element;
1028
1125
 
1029
1126
  export declare type ShareInvitationItemProps<UserType, InvitationType> = {
1030
1127
  invitation: InvitationData<UserType, InvitationType>;
@@ -1033,6 +1130,7 @@ export declare type ShareInvitationItemProps<UserType, InvitationType> = {
1033
1130
  deleteInvitation?: (invitation: InvitationData<UserType, InvitationType>) => void;
1034
1131
  canUpdate?: boolean;
1035
1132
  roleTopMessage?: string;
1133
+ showMoreActionsButton?: boolean;
1036
1134
  };
1037
1135
 
1038
1136
  export declare const ShareMemberItem: <UserType, AccessType>({ accessData, roles, updateRole, deleteAccess, canUpdate, roleTopMessage, }: ShareMemberItemProps<UserType, AccessType>) => JSX.Element;
@@ -1274,6 +1372,27 @@ export declare type TreeViewProps<T> = {
1274
1372
 
1275
1373
  export declare const TreeViewSeparator: ({ top, left }: CursorProps) => JSX.Element;
1276
1374
 
1375
+ /**
1376
+ * useArrowRoving
1377
+ *
1378
+ * Hook to manage keyboard navigation with ArrowLeft / ArrowRight inside a toolbar of actions.
1379
+ * - ArrowLeft / ArrowRight → move focus between buttons in the same container (roving focus).
1380
+ * - Enter → still activate the focused button normally, except right after roving
1381
+ * where the hook suppresses the "phantom click" (to avoid triggering actions by mistake).
1382
+ *
1383
+ * Usage:
1384
+ * const actionsRef = useRef<HTMLDivElement | null>(null);
1385
+ * useArrowRoving(actionsRef.current);
1386
+ *
1387
+ * return (
1388
+ * <div ref={actionsRef}>
1389
+ * <button>Option 1</button>
1390
+ * <button>Option 2</button>
1391
+ * </div>
1392
+ * );
1393
+ */
1394
+ export declare function useArrowRoving(container: HTMLElement | null): void;
1395
+
1277
1396
  /**
1278
1397
  * Hook for using custom translations with type safety.
1279
1398
  *
@@ -1295,7 +1414,7 @@ export declare const useDropdownMenu: () => {
1295
1414
  setIsOpen: Dispatch<SetStateAction<boolean>>;
1296
1415
  };
1297
1416
 
1298
- export declare const UserAvatar: ({ fullName, size, forceColor, }: AvatarProps) => JSX.Element;
1417
+ export declare const UserAvatar: ({ fullName, size, forceColor, backgroundColor: color, }: AvatarProps) => JSX.Element;
1299
1418
 
1300
1419
  export declare type UserData<T> = T & {
1301
1420
  id: string;
@@ -1303,11 +1422,7 @@ export declare type UserData<T> = T & {
1303
1422
  email: string;
1304
1423
  };
1305
1424
 
1306
- export declare const useResponsive: () => {
1307
- isMobile: boolean;
1308
- isTablet: boolean;
1309
- isDesktop: boolean;
1310
- };
1425
+ export declare const useResponsive: () => ResponsiveStates;
1311
1426
 
1312
1427
  /**
1313
1428
  * User menu component.