@axa-fr/design-system-slash-react 1.1.1-alpha.98 → 1.2.0-RC.1

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 (55) hide show
  1. package/dist/Action/Action.js +1 -1
  2. package/dist/Alert/Alert.d.ts +2 -1
  3. package/dist/Alert/Alert.js +2 -2
  4. package/dist/Form/Checkbox/CheckboxInput.js +8 -3
  5. package/dist/Form/Choice/Choice.d.ts +2 -1
  6. package/dist/Form/Choice/Choice.js +11 -9
  7. package/dist/Form/Choice/ChoiceInput.js +12 -6
  8. package/dist/Form/Date/DateInput.d.ts +40 -6
  9. package/dist/Form/Date/DateInput.js +8 -4
  10. package/dist/Form/File/FileInput.js +4 -1
  11. package/dist/Form/MultiSelect/MultiSelectInput.js +4 -1
  12. package/dist/Form/Number/NumberInput.js +4 -1
  13. package/dist/Form/Pass/PassInput.js +6 -2
  14. package/dist/Form/Radio/RadioInput.d.ts +1 -0
  15. package/dist/Form/Radio/RadioInput.js +5 -2
  16. package/dist/Form/Select/Select.d.ts +310 -5
  17. package/dist/Form/Select/Select.js +7 -4
  18. package/dist/Form/Select/SelectBase.d.ts +1 -1
  19. package/dist/Form/Select/SelectBase.js +3 -2
  20. package/dist/Form/Select/SelectDefault.d.ts +3 -2
  21. package/dist/Form/Select/SelectDefault.js +6 -8
  22. package/dist/Form/Select/SelectDefaultWithOptions.d.ts +9 -0
  23. package/dist/Form/Select/SelectDefaultWithOptions.js +18 -0
  24. package/dist/Form/Select/SelectInput.d.ts +386 -6
  25. package/dist/Form/Select/SelectInput.js +4 -1
  26. package/dist/Form/Text/TextInput.js +7 -2
  27. package/dist/Form/Textarea/TextareaInput.js +4 -1
  28. package/dist/Form/core/Field.d.ts +2 -1
  29. package/dist/Form/core/Field.js +5 -2
  30. package/dist/Form/core/FieldError.d.ts +2 -1
  31. package/dist/Form/core/FieldError.js +2 -2
  32. package/dist/Form/core/LegacyField.d.ts +3 -2
  33. package/dist/Form/core/LegacyField.js +2 -2
  34. package/dist/Form/core/useAriaInvalid.d.ts +2 -0
  35. package/dist/Form/core/useAriaInvalid.js +2 -0
  36. package/dist/Link/CustomLink.d.ts +8 -0
  37. package/dist/Link/CustomLink.js +6 -0
  38. package/dist/Link/Link.d.ts +4 -9
  39. package/dist/Link/Link.js +9 -5
  40. package/dist/Link/LinkAnchor.d.ts +10 -0
  41. package/dist/Link/LinkAnchor.js +10 -0
  42. package/dist/Link/linkClassName.d.ts +1 -0
  43. package/dist/Link/linkClassName.js +1 -0
  44. package/dist/ModalAgent/Modal.js +1 -1
  45. package/dist/Restitution/HeaderRestitution.js +1 -1
  46. package/dist/Restitution/SectionRestitutionTitle.js +1 -1
  47. package/dist/Table/Pagination/Items.d.ts +2 -1
  48. package/dist/Table/Pagination/Items.js +9 -5
  49. package/dist/Table/Pagination/Paging.d.ts +1 -1
  50. package/dist/Table/Pagination/Paging.js +2 -2
  51. package/dist/Title/Title.d.ts +3 -1
  52. package/dist/Title/Title.js +6 -5
  53. package/dist/index.d.ts +1 -0
  54. package/dist/index.js +1 -0
  55. package/package.json +4 -4
@@ -1,8 +1,388 @@
1
- import { ComponentProps, PropsWithChildren, ReactNode } from "react";
2
- import { LegacyField } from "../core";
3
- import { Select } from "./Select";
4
- type Props = ComponentProps<typeof LegacyField> & ComponentProps<typeof Select> & {
1
+ import { OptionHTMLAttributes, ReactNode } from "react";
2
+ declare const SelectInput: import("react").ForwardRefExoticComponent<(Omit<Omit<{
3
+ message?: string;
4
+ messageType?: import("../core").MessageTypes;
5
+ } & {
6
+ className?: string;
7
+ classModifier?: string;
8
+ forceDisplayMessage?: boolean;
9
+ children: ReactNode;
10
+ setStateMemoryFn?: typeof import("../core/FieldForm").setStateMemory;
11
+ onChangeByStateFn?: typeof import("../core/FieldForm").onChangeByState;
12
+ setStateOnBlurFn?: typeof import("../core/FieldForm").setStateOnBlur;
13
+ setStateOnFocusFn?: typeof import("../core/FieldForm").setStateOnFocus;
14
+ initialState?: {
15
+ hasLostFocusOnce: boolean;
16
+ hasFocus: boolean;
17
+ hasChange: boolean;
18
+ memory: {
19
+ message?: string;
20
+ messageType?: import("../core").MessageTypes;
21
+ };
22
+ };
23
+ }, "children"> & {
24
+ label: ReactNode;
25
+ children?: ReactNode;
26
+ id?: string;
27
+ classModifier?: string;
28
+ classNameContainerLabel?: string;
29
+ classNameContainerInput?: string;
30
+ isVisible?: boolean;
31
+ roleContainer?: string;
32
+ ariaLabelContainer?: string;
33
+ isLabelContainerLinkedToInput?: boolean;
34
+ errorId?: string;
35
+ } & Omit<Omit<{
36
+ form?: string | undefined | undefined;
37
+ slot?: string | undefined | undefined;
38
+ style?: import("react").CSSProperties | undefined;
39
+ title?: string | undefined | undefined;
40
+ ref?: import("react").Ref<HTMLSelectElement> | undefined;
41
+ key?: import("react").Key | null | undefined;
42
+ defaultChecked?: boolean | undefined | undefined;
43
+ defaultValue?: string | number | readonly string[] | undefined;
44
+ suppressContentEditableWarning?: boolean | undefined | undefined;
45
+ suppressHydrationWarning?: boolean | undefined | undefined;
46
+ accessKey?: string | undefined | undefined;
47
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
48
+ autoFocus?: boolean | undefined | undefined;
49
+ className?: string | undefined | undefined;
50
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
51
+ contextMenu?: string | undefined | undefined;
52
+ dir?: string | undefined | undefined;
53
+ draggable?: (boolean | "true" | "false") | undefined;
54
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
55
+ hidden?: boolean | undefined | undefined;
56
+ id?: string | undefined | undefined;
57
+ lang?: string | undefined | undefined;
58
+ nonce?: string | undefined | undefined;
59
+ spellCheck?: (boolean | "true" | "false") | undefined;
60
+ tabIndex?: number | undefined | undefined;
61
+ translate?: "yes" | "no" | undefined | undefined;
62
+ radioGroup?: string | undefined | undefined;
63
+ role?: import("react").AriaRole | undefined;
64
+ about?: string | undefined | undefined;
65
+ content?: string | undefined | undefined;
66
+ datatype?: string | undefined | undefined;
67
+ inlist?: any;
68
+ prefix?: string | undefined | undefined;
69
+ property?: string | undefined | undefined;
70
+ rel?: string | undefined | undefined;
71
+ resource?: string | undefined | undefined;
72
+ rev?: string | undefined | undefined;
73
+ typeof?: string | undefined | undefined;
74
+ vocab?: string | undefined | undefined;
75
+ autoCorrect?: string | undefined | undefined;
76
+ autoSave?: string | undefined | undefined;
77
+ color?: string | undefined | undefined;
78
+ itemProp?: string | undefined | undefined;
79
+ itemScope?: boolean | undefined | undefined;
80
+ itemType?: string | undefined | undefined;
81
+ itemID?: string | undefined | undefined;
82
+ itemRef?: string | undefined | undefined;
83
+ results?: number | undefined | undefined;
84
+ security?: string | undefined | undefined;
85
+ unselectable?: "on" | "off" | undefined | undefined;
86
+ popover?: "" | "auto" | "manual" | undefined | undefined;
87
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
88
+ popoverTarget?: string | undefined | undefined;
89
+ inert?: boolean | undefined | undefined;
90
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
91
+ is?: string | undefined | undefined;
92
+ "aria-activedescendant"?: string | undefined | undefined;
93
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
94
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
95
+ "aria-braillelabel"?: string | undefined | undefined;
96
+ "aria-brailleroledescription"?: string | undefined | undefined;
97
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
98
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
99
+ "aria-colcount"?: number | undefined | undefined;
100
+ "aria-colindex"?: number | undefined | undefined;
101
+ "aria-colindextext"?: string | undefined | undefined;
102
+ "aria-colspan"?: number | undefined | undefined;
103
+ "aria-controls"?: string | undefined | undefined;
104
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
105
+ "aria-describedby"?: string | undefined | undefined;
106
+ "aria-description"?: string | undefined | undefined;
107
+ "aria-details"?: string | undefined | undefined;
108
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
109
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
110
+ "aria-errormessage"?: string | undefined | undefined;
111
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
112
+ "aria-flowto"?: string | undefined | undefined;
113
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
114
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
115
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
116
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
117
+ "aria-keyshortcuts"?: string | undefined | undefined;
118
+ "aria-label"?: string | undefined | undefined;
119
+ "aria-labelledby"?: string | undefined | undefined;
120
+ "aria-level"?: number | undefined | undefined;
121
+ "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
122
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
123
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
124
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
125
+ "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
126
+ "aria-owns"?: string | undefined | undefined;
127
+ "aria-placeholder"?: string | undefined | undefined;
128
+ "aria-posinset"?: number | undefined | undefined;
129
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
130
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
131
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
132
+ "aria-required"?: (boolean | "true" | "false") | undefined;
133
+ "aria-roledescription"?: string | undefined | undefined;
134
+ "aria-rowcount"?: number | undefined | undefined;
135
+ "aria-rowindex"?: number | undefined | undefined;
136
+ "aria-rowindextext"?: string | undefined | undefined;
137
+ "aria-rowspan"?: number | undefined | undefined;
138
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
139
+ "aria-setsize"?: number | undefined | undefined;
140
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
141
+ "aria-valuemax"?: number | undefined | undefined;
142
+ "aria-valuemin"?: number | undefined | undefined;
143
+ "aria-valuenow"?: number | undefined | undefined;
144
+ "aria-valuetext"?: string | undefined | undefined;
145
+ children: ReactNode | undefined;
146
+ dangerouslySetInnerHTML?: {
147
+ __html: string | TrustedHTML;
148
+ } | undefined | undefined;
149
+ onCopy?: import("react").ClipboardEventHandler<HTMLSelectElement> | undefined;
150
+ onCopyCapture?: import("react").ClipboardEventHandler<HTMLSelectElement> | undefined;
151
+ onCut?: import("react").ClipboardEventHandler<HTMLSelectElement> | undefined;
152
+ onCutCapture?: import("react").ClipboardEventHandler<HTMLSelectElement> | undefined;
153
+ onPaste?: import("react").ClipboardEventHandler<HTMLSelectElement> | undefined;
154
+ onPasteCapture?: import("react").ClipboardEventHandler<HTMLSelectElement> | undefined;
155
+ onCompositionEnd?: import("react").CompositionEventHandler<HTMLSelectElement> | undefined;
156
+ onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLSelectElement> | undefined;
157
+ onCompositionStart?: import("react").CompositionEventHandler<HTMLSelectElement> | undefined;
158
+ onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLSelectElement> | undefined;
159
+ onCompositionUpdate?: import("react").CompositionEventHandler<HTMLSelectElement> | undefined;
160
+ onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLSelectElement> | undefined;
161
+ onFocus?: import("react").FocusEventHandler<HTMLSelectElement> | undefined;
162
+ onFocusCapture?: import("react").FocusEventHandler<HTMLSelectElement> | undefined;
163
+ onBlur?: import("react").FocusEventHandler<HTMLSelectElement> | undefined;
164
+ onBlurCapture?: import("react").FocusEventHandler<HTMLSelectElement> | undefined;
165
+ onChange?: import("react").ChangeEventHandler<HTMLSelectElement> | undefined;
166
+ onChangeCapture?: import("react").FormEventHandler<HTMLSelectElement> | undefined;
167
+ onBeforeInput?: import("react").FormEventHandler<HTMLSelectElement> | undefined;
168
+ onBeforeInputCapture?: import("react").FormEventHandler<HTMLSelectElement> | undefined;
169
+ onInput?: import("react").FormEventHandler<HTMLSelectElement> | undefined;
170
+ onInputCapture?: import("react").FormEventHandler<HTMLSelectElement> | undefined;
171
+ onReset?: import("react").FormEventHandler<HTMLSelectElement> | undefined;
172
+ onResetCapture?: import("react").FormEventHandler<HTMLSelectElement> | undefined;
173
+ onSubmit?: import("react").FormEventHandler<HTMLSelectElement> | undefined;
174
+ onSubmitCapture?: import("react").FormEventHandler<HTMLSelectElement> | undefined;
175
+ onInvalid?: import("react").FormEventHandler<HTMLSelectElement> | undefined;
176
+ onInvalidCapture?: import("react").FormEventHandler<HTMLSelectElement> | undefined;
177
+ onLoad?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
178
+ onLoadCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
179
+ onError?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
180
+ onErrorCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
181
+ onKeyDown?: import("react").KeyboardEventHandler<HTMLSelectElement> | undefined;
182
+ onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLSelectElement> | undefined;
183
+ onKeyPress?: import("react").KeyboardEventHandler<HTMLSelectElement> | undefined;
184
+ onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLSelectElement> | undefined;
185
+ onKeyUp?: import("react").KeyboardEventHandler<HTMLSelectElement> | undefined;
186
+ onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLSelectElement> | undefined;
187
+ onAbort?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
188
+ onAbortCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
189
+ onCanPlay?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
190
+ onCanPlayCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
191
+ onCanPlayThrough?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
192
+ onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
193
+ onDurationChange?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
194
+ onDurationChangeCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
195
+ onEmptied?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
196
+ onEmptiedCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
197
+ onEncrypted?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
198
+ onEncryptedCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
199
+ onEnded?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
200
+ onEndedCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
201
+ onLoadedData?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
202
+ onLoadedDataCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
203
+ onLoadedMetadata?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
204
+ onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
205
+ onLoadStart?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
206
+ onLoadStartCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
207
+ onPause?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
208
+ onPauseCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
209
+ onPlay?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
210
+ onPlayCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
211
+ onPlaying?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
212
+ onPlayingCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
213
+ onProgress?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
214
+ onProgressCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
215
+ onRateChange?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
216
+ onRateChangeCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
217
+ onResize?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
218
+ onResizeCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
219
+ onSeeked?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
220
+ onSeekedCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
221
+ onSeeking?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
222
+ onSeekingCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
223
+ onStalled?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
224
+ onStalledCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
225
+ onSuspend?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
226
+ onSuspendCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
227
+ onTimeUpdate?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
228
+ onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
229
+ onVolumeChange?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
230
+ onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
231
+ onWaiting?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
232
+ onWaitingCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
233
+ onAuxClick?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
234
+ onAuxClickCapture?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
235
+ onClick?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
236
+ onClickCapture?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
237
+ onContextMenu?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
238
+ onContextMenuCapture?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
239
+ onDoubleClick?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
240
+ onDoubleClickCapture?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
241
+ onDrag?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
242
+ onDragCapture?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
243
+ onDragEnd?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
244
+ onDragEndCapture?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
245
+ onDragEnter?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
246
+ onDragEnterCapture?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
247
+ onDragExit?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
248
+ onDragExitCapture?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
249
+ onDragLeave?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
250
+ onDragLeaveCapture?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
251
+ onDragOver?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
252
+ onDragOverCapture?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
253
+ onDragStart?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
254
+ onDragStartCapture?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
255
+ onDrop?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
256
+ onDropCapture?: import("react").DragEventHandler<HTMLSelectElement> | undefined;
257
+ onMouseDown?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
258
+ onMouseDownCapture?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
259
+ onMouseEnter?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
260
+ onMouseLeave?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
261
+ onMouseMove?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
262
+ onMouseMoveCapture?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
263
+ onMouseOut?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
264
+ onMouseOutCapture?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
265
+ onMouseOver?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
266
+ onMouseOverCapture?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
267
+ onMouseUp?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
268
+ onMouseUpCapture?: import("react").MouseEventHandler<HTMLSelectElement> | undefined;
269
+ onSelect?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
270
+ onSelectCapture?: import("react").ReactEventHandler<HTMLSelectElement> | undefined;
271
+ onTouchCancel?: import("react").TouchEventHandler<HTMLSelectElement> | undefined;
272
+ onTouchCancelCapture?: import("react").TouchEventHandler<HTMLSelectElement> | undefined;
273
+ onTouchEnd?: import("react").TouchEventHandler<HTMLSelectElement> | undefined;
274
+ onTouchEndCapture?: import("react").TouchEventHandler<HTMLSelectElement> | undefined;
275
+ onTouchMove?: import("react").TouchEventHandler<HTMLSelectElement> | undefined;
276
+ onTouchMoveCapture?: import("react").TouchEventHandler<HTMLSelectElement> | undefined;
277
+ onTouchStart?: import("react").TouchEventHandler<HTMLSelectElement> | undefined;
278
+ onTouchStartCapture?: import("react").TouchEventHandler<HTMLSelectElement> | undefined;
279
+ onPointerDown?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
280
+ onPointerDownCapture?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
281
+ onPointerMove?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
282
+ onPointerMoveCapture?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
283
+ onPointerUp?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
284
+ onPointerUpCapture?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
285
+ onPointerCancel?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
286
+ onPointerCancelCapture?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
287
+ onPointerEnter?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
288
+ onPointerLeave?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
289
+ onPointerOver?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
290
+ onPointerOverCapture?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
291
+ onPointerOut?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
292
+ onPointerOutCapture?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
293
+ onGotPointerCapture?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
294
+ onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
295
+ onLostPointerCapture?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
296
+ onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLSelectElement> | undefined;
297
+ onScroll?: import("react").UIEventHandler<HTMLSelectElement> | undefined;
298
+ onScrollCapture?: import("react").UIEventHandler<HTMLSelectElement> | undefined;
299
+ onWheel?: import("react").WheelEventHandler<HTMLSelectElement> | undefined;
300
+ onWheelCapture?: import("react").WheelEventHandler<HTMLSelectElement> | undefined;
301
+ onAnimationStart?: import("react").AnimationEventHandler<HTMLSelectElement> | undefined;
302
+ onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLSelectElement> | undefined;
303
+ onAnimationEnd?: import("react").AnimationEventHandler<HTMLSelectElement> | undefined;
304
+ onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLSelectElement> | undefined;
305
+ onAnimationIteration?: import("react").AnimationEventHandler<HTMLSelectElement> | undefined;
306
+ onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSelectElement> | undefined;
307
+ onToggle?: import("react").ToggleEventHandler<HTMLSelectElement> | undefined;
308
+ onBeforeToggle?: import("react").ToggleEventHandler<HTMLSelectElement> | undefined;
309
+ onTransitionCancel?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
310
+ onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
311
+ onTransitionEnd?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
312
+ onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
313
+ onTransitionRun?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
314
+ onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
315
+ onTransitionStart?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
316
+ onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLSelectElement> | undefined;
317
+ classModifier?: string | undefined;
318
+ disabled?: boolean | undefined | undefined;
319
+ name?: string | undefined | undefined;
320
+ value?: string | number | readonly string[] | undefined;
321
+ required?: boolean | undefined | undefined;
322
+ autoComplete?: string | undefined | undefined;
323
+ multiple?: boolean | undefined | undefined;
324
+ placeholder?: string | undefined;
325
+ size?: number | undefined | undefined;
326
+ forceDisplayPlaceholder?: boolean | undefined;
327
+ }, "ref"> & import("react").RefAttributes<HTMLSelectElement> & {
328
+ options?: OptionHTMLAttributes<HTMLOptionElement>[];
329
+ mode?: "default" | "base";
330
+ } & {
331
+ children?: ReactNode | undefined;
332
+ }, "ref"> & import("react").RefAttributes<HTMLSelectElement> & {
5
333
  helpMessage?: ReactNode;
6
- };
7
- declare const SelectInput: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<Props>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
334
+ options: OptionHTMLAttributes<HTMLOptionElement>[];
335
+ } & {
336
+ children?: ReactNode | undefined;
337
+ }, "ref"> | Omit<Omit<{
338
+ message?: string;
339
+ messageType?: import("../core").MessageTypes;
340
+ } & {
341
+ className?: string;
342
+ classModifier?: string;
343
+ forceDisplayMessage?: boolean;
344
+ children: ReactNode;
345
+ setStateMemoryFn?: typeof import("../core/FieldForm").setStateMemory;
346
+ onChangeByStateFn?: typeof import("../core/FieldForm").onChangeByState;
347
+ setStateOnBlurFn?: typeof import("../core/FieldForm").setStateOnBlur;
348
+ setStateOnFocusFn?: typeof import("../core/FieldForm").setStateOnFocus;
349
+ initialState?: {
350
+ hasLostFocusOnce: boolean;
351
+ hasFocus: boolean;
352
+ hasChange: boolean;
353
+ memory: {
354
+ message?: string;
355
+ messageType?: import("../core").MessageTypes;
356
+ };
357
+ };
358
+ }, "children"> & {
359
+ label: ReactNode;
360
+ children?: ReactNode;
361
+ id?: string;
362
+ classModifier?: string;
363
+ classNameContainerLabel?: string;
364
+ classNameContainerInput?: string;
365
+ isVisible?: boolean;
366
+ roleContainer?: string;
367
+ ariaLabelContainer?: string;
368
+ isLabelContainerLinkedToInput?: boolean;
369
+ errorId?: string;
370
+ } & Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
371
+ options?: OptionHTMLAttributes<HTMLOptionElement>[];
372
+ classModifier?: string;
373
+ } & import("react").RefAttributes<HTMLSelectElement> & {
374
+ options: OptionHTMLAttributes<HTMLOptionElement>[];
375
+ forceDisplayPlaceholder?: boolean;
376
+ placeholder?: string;
377
+ }, "ref"> & import("react").RefAttributes<HTMLSelectElement> & {
378
+ options?: OptionHTMLAttributes<HTMLOptionElement>[];
379
+ mode?: "default" | "base";
380
+ } & {
381
+ children?: ReactNode | undefined;
382
+ }, "ref"> & import("react").RefAttributes<HTMLSelectElement> & {
383
+ helpMessage?: ReactNode;
384
+ options: OptionHTMLAttributes<HTMLOptionElement>[];
385
+ } & {
386
+ children?: ReactNode | undefined;
387
+ }, "ref">) & import("react").RefAttributes<HTMLSelectElement>>;
8
388
  export { SelectInput };
@@ -2,11 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { forwardRef, useId, } from "react";
3
3
  import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
4
4
  import { Select } from "./Select";
5
+ import { useAriaInvalid } from "../core/useAriaInvalid";
5
6
  const SelectInput = forwardRef(({ classModifier = "", message, children, helpMessage, id, disabled = false, label, classNameContainerLabel, classNameContainerInput, messageType, isVisible, forceDisplayMessage, className, required, ...otherSelectProps }, inputRef) => {
6
7
  const generatedId = useId();
8
+ const errorUseId = useId();
7
9
  const inputId = id ?? generatedId;
8
10
  const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
9
- return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__select", classModifier: inputFieldClassModifier, children: [_jsx(Select, { id: inputId, disabled: disabled, classModifier: inputClassModifier, ref: inputRef, required: required, ...otherSelectProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
11
+ const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
12
+ return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: [_jsxs(FieldInput, { className: "af-form__select", classModifier: inputFieldClassModifier, children: [_jsx(Select, { id: inputId, disabled: disabled, classModifier: inputClassModifier, ref: inputRef, required: required, "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...otherSelectProps }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
10
13
  });
11
14
  SelectInput.displayName = "SelectInput";
12
15
  export { SelectInput };
@@ -1,7 +1,12 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { forwardRef } from "react";
2
+ import { forwardRef, useId } from "react";
3
3
  import { Field } from "../core";
4
4
  import { Text } from "./Text";
5
- const TextInput = forwardRef(({ children, ...props }, inputRef) => (_jsx(Field, { ...props, renderInput: ({ id, classModifier }) => (_jsx(Text, { id: id, classModifier: classModifier, ref: inputRef, ...props })), children: children })));
5
+ import { useAriaInvalid } from "../core/useAriaInvalid";
6
+ const TextInput = forwardRef(({ children, message, forceDisplayMessage, messageType, ...props }, inputRef) => {
7
+ const errorUseId = useId();
8
+ const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
9
+ return (_jsx(Field, { ...props, renderInput: ({ id, classModifier }) => (_jsx(Text, { id: id, classModifier: classModifier, ref: inputRef, "aria-describedby": errorUseId, "aria-invalid": isInvalid, ...props })), errorId: errorUseId, forceDisplayMessage: forceDisplayMessage, message: message, children: children }));
10
+ });
6
11
  TextInput.displayName = "TextInput";
7
12
  export { TextInput };
@@ -5,12 +5,15 @@ import "@axa-fr/design-system-slash-css/dist/Form/core/FormCore.scss";
5
5
  import { forwardRef, useId } from "react";
6
6
  import { FieldInput, HelpMessage, LegacyField, useInputClassModifier, } from "../core";
7
7
  import { Textarea } from "./Textarea";
8
+ import { useAriaInvalid } from "../core/useAriaInvalid";
8
9
  const TextareaInput = forwardRef(({ id, classModifier = "", message, children, helpMessage, classNameContainerLabel, classNameContainerInput, label, messageType, isVisible, forceDisplayMessage, className, rows = 5, cols = 50, disabled = false, required, ...textareaInputProps }, inputRef) => {
9
10
  const rowModifier = `${classModifier} label-top`;
10
11
  const inputUseId = useId();
12
+ const errorUseId = useId();
11
13
  const inputId = id ?? inputUseId;
12
14
  const { inputClassModifier, inputFieldClassModifier } = useInputClassModifier(classModifier, disabled, Boolean(children), required);
13
- return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, children: [_jsxs(FieldInput, { className: "af-form__textarea", classModifier: `${rowModifier} ${inputFieldClassModifier}`, children: [_jsx(Textarea, { ...textareaInputProps, id: inputId, rows: rows, cols: cols, classModifier: inputClassModifier, disabled: disabled, ref: inputRef }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
15
+ const isInvalid = useAriaInvalid(message, forceDisplayMessage, messageType);
16
+ return (_jsxs(LegacyField, { label: label, id: inputId, message: message, messageType: messageType, isVisible: isVisible, forceDisplayMessage: forceDisplayMessage, className: className, classModifier: inputFieldClassModifier, classNameContainerLabel: classNameContainerLabel, classNameContainerInput: classNameContainerInput, errorId: errorUseId, children: [_jsxs(FieldInput, { className: "af-form__textarea", classModifier: `${rowModifier} ${inputFieldClassModifier}`, children: [_jsx(Textarea, { ...textareaInputProps, id: inputId, rows: rows, cols: cols, classModifier: inputClassModifier, disabled: disabled, ref: inputRef, "aria-describedby": errorUseId, "aria-invalid": isInvalid }), children] }), _jsx(HelpMessage, { message: helpMessage, isVisible: !message })] }));
14
17
  });
15
18
  TextareaInput.displayName = "TextareaInput";
16
19
  export { TextareaInput };
@@ -17,8 +17,9 @@ type InputProps = {
17
17
  required?: boolean;
18
18
  disabled?: boolean;
19
19
  helpMessage?: ReactNode;
20
+ errorId?: string;
20
21
  };
21
- export declare const Field: ({ classNameContainerInput, classNameContainerLabel, label, forceDisplayMessage, message, messageType, required, classModifier, children, disabled, helpMessage, id, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, renderInput, }: InputProps & {
22
+ export declare const Field: ({ classNameContainerInput, classNameContainerLabel, label, forceDisplayMessage, message, messageType, required, classModifier, children, disabled, helpMessage, id, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, errorId, renderInput, }: InputProps & {
22
23
  renderInput: (props: {
23
24
  id: string;
24
25
  classModifier: string;
@@ -3,7 +3,7 @@ import classNames from "classnames";
3
3
  import { useId } from "react";
4
4
  import { FieldError, FormClassManager, HelpMessage, useInputClassModifier, } from ".";
5
5
  import { getComponentClassName } from "../../utilities";
6
- export const Field = ({ classNameContainerInput = "col-md-10", classNameContainerLabel = "col-md-2", label, forceDisplayMessage, message, messageType, required, classModifier = "", children, disabled = false, helpMessage, id, isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, renderInput, }) => {
6
+ export const Field = ({ classNameContainerInput = "col-md-10", classNameContainerLabel = "col-md-2", label, forceDisplayMessage, message, messageType, required, classModifier = "", children, disabled = false, helpMessage, id, isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, errorId, renderInput, }) => {
7
7
  const inputUseId = useId();
8
8
  const inputId = id ?? inputUseId;
9
9
  const actualRequired = required || classModifier.includes("required");
@@ -18,5 +18,8 @@ export const Field = ({ classNameContainerInput = "col-md-10", classNameContaine
18
18
  "af-form__group--required": actualRequired,
19
19
  }), role: roleContainer, "aria-label": ariaLabelContainer, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx("label", { className: classNames("af-form__group-label", {
20
20
  "af-form__group-label--required": actualRequired,
21
- }), htmlFor: isLabelContainerLinkedToInput ? inputId : undefined, children: label }) }), _jsxs("div", { className: classNameContainerInput, children: [_jsxs("div", { className: fieldContainerClassName, children: [renderInput({ id: inputId, classModifier: inputClassModifier }), children] }), forceDisplayMessage ? (_jsx(FieldError, { message: message, messageType: messageType })) : (_jsx(HelpMessage, { message: helpMessage }))] })] }));
21
+ }), htmlFor: isLabelContainerLinkedToInput ? inputId : undefined, children: label }) }), _jsxs("div", { className: classNameContainerInput, children: [_jsxs("div", { className: fieldContainerClassName, children: [renderInput({
22
+ id: inputId,
23
+ classModifier: inputClassModifier,
24
+ }), children] }), forceDisplayMessage ? (_jsx(FieldError, { message: message, messageType: messageType, errorId: errorId })) : (_jsx(HelpMessage, { message: helpMessage }))] })] }));
22
25
  };
@@ -2,6 +2,7 @@ import { MessageTypes } from "./MessageTypes";
2
2
  type FieldProps = {
3
3
  message?: string | null;
4
4
  messageType?: MessageTypes;
5
+ errorId?: string;
5
6
  };
6
- export declare const FieldError: ({ message, messageType, }: FieldProps) => "" | import("react/jsx-runtime").JSX.Element | null;
7
+ export declare const FieldError: ({ message, messageType, errorId, }: FieldProps) => "" | import("react/jsx-runtime").JSX.Element | null;
7
8
  export {};
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { getComponentClassName } from "../../utilities";
3
3
  import { MessageTypes } from "./MessageTypes";
4
4
  const DEFAULT_CLASS_NAME = "af-form__message";
5
- export const FieldError = ({ message = null, messageType = MessageTypes.error, }) => {
5
+ export const FieldError = ({ message = null, messageType = MessageTypes.error, errorId = undefined, }) => {
6
6
  const className = getComponentClassName(DEFAULT_CLASS_NAME, messageType, DEFAULT_CLASS_NAME);
7
- return (message && (_jsxs("small", { className: className, children: [_jsx("span", { className: "glyphicon glyphicon-exclamation-sign" }), _jsx("span", { className: `af-form__${messageType}-text`, children: message })] })));
7
+ return (message && (_jsxs("small", { className: className, children: [_jsx("span", { className: "glyphicon glyphicon-exclamation-sign" }), _jsx("span", { id: errorId, className: `af-form__${messageType}-text`, children: message })] })));
8
8
  };
@@ -1,4 +1,4 @@
1
- import type { ComponentPropsWithoutRef, ReactNode } from "react";
1
+ import { type ComponentPropsWithoutRef, type ReactNode } from "react";
2
2
  import { FieldForm } from "./FieldForm";
3
3
  type FieldProps = Omit<ComponentPropsWithoutRef<typeof FieldForm>, "children"> & {
4
4
  label: ReactNode;
@@ -11,6 +11,7 @@ type FieldProps = Omit<ComponentPropsWithoutRef<typeof FieldForm>, "children"> &
11
11
  roleContainer?: string;
12
12
  ariaLabelContainer?: string;
13
13
  isLabelContainerLinkedToInput?: boolean;
14
+ errorId?: string;
14
15
  };
15
- export declare const LegacyField: ({ id, message, messageType, label, children, forceDisplayMessage, classModifier, className, classNameContainerLabel, classNameContainerInput, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, }: FieldProps) => import("react/jsx-runtime").JSX.Element | null;
16
+ export declare const LegacyField: ({ id, message, messageType, label, children, forceDisplayMessage, classModifier, className, classNameContainerLabel, classNameContainerInput, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, errorId, }: FieldProps) => import("react/jsx-runtime").JSX.Element | null;
16
17
  export {};
@@ -4,12 +4,12 @@ import { getComponentClassName } from "../../utilities";
4
4
  import { FieldError } from "./FieldError";
5
5
  import { FieldForm } from "./FieldForm";
6
6
  import { MessageTypes } from "./MessageTypes";
7
- export const LegacyField = ({ id = "", message = "", messageType = MessageTypes.error, label, children, forceDisplayMessage, classModifier = "", className, classNameContainerLabel = "col-md-2", classNameContainerInput = "col-md-10", isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, }) => {
7
+ export const LegacyField = ({ id = "", message = "", messageType = MessageTypes.error, label, children, forceDisplayMessage, classModifier = "", className, classNameContainerLabel = "col-md-2", classNameContainerInput = "col-md-10", isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, errorId, }) => {
8
8
  if (!isVisible) {
9
9
  return null;
10
10
  }
11
11
  const componentClassName = getComponentClassName(className, classModifier, "row af-form__group");
12
12
  return (_jsxs("div", { className: componentClassName, role: roleContainer, "aria-label": ariaLabelContainer, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx("label", { className: classNames({
13
13
  "af-form__group-label--required": classModifier.includes("required"),
14
- }, "af-form__group-label"), htmlFor: isLabelContainerLinkedToInput ? id : undefined, children: label }) }), _jsxs(FieldForm, { className: classNameContainerInput, message: message, messageType: messageType, forceDisplayMessage: forceDisplayMessage, children: [children, _jsx(FieldError, { message: message, messageType: messageType })] })] }));
14
+ }, "af-form__group-label"), htmlFor: isLabelContainerLinkedToInput ? id : undefined, children: label }) }), _jsxs(FieldForm, { className: classNameContainerInput, message: message, messageType: messageType, forceDisplayMessage: forceDisplayMessage, children: [children, _jsx(FieldError, { message: message, messageType: messageType, errorId: errorId })] })] }));
15
15
  };
@@ -0,0 +1,2 @@
1
+ import { MessageTypes } from ".";
2
+ export declare const useAriaInvalid: (message?: string, forceDisplayMessage?: boolean, messageType?: MessageTypes) => boolean;
@@ -0,0 +1,2 @@
1
+ import { MessageTypes } from ".";
2
+ export const useAriaInvalid = (message, forceDisplayMessage, messageType) => Boolean(message && forceDisplayMessage && messageType === MessageTypes.error);
@@ -0,0 +1,8 @@
1
+ import { ReactNode } from "react";
2
+ type CustomLinkProps = {
3
+ render: (props: {
4
+ className: string;
5
+ }) => ReactNode;
6
+ };
7
+ declare const CustomLink: (props: CustomLinkProps) => ReactNode;
8
+ export { CustomLink, type CustomLinkProps };
@@ -0,0 +1,6 @@
1
+ import { linkClassName } from "./linkClassName";
2
+ const CustomLink = (props) => {
3
+ const { render } = props;
4
+ return render({ className: linkClassName, ...props });
5
+ };
6
+ export { CustomLink };
@@ -1,10 +1,5 @@
1
- import { type ComponentProps, type ElementType, type ReactNode } from "react";
2
1
  import "@axa-fr/design-system-slash-css/dist/Link/Link.scss";
3
- export type LinkProps<C extends ElementType> = {
4
- component?: C;
5
- leftIcon?: ReactNode;
6
- rightIcon?: ReactNode;
7
- className?: string;
8
- disabled?: boolean;
9
- } & ComponentProps<C>;
10
- export declare const Link: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
2
+ import { type CustomLinkProps } from "./CustomLink";
3
+ import { type LinkComponentProps } from "./LinkAnchor";
4
+ export type LinkProps = LinkComponentProps | CustomLinkProps;
5
+ export declare const Link: import("react").ForwardRefExoticComponent<(CustomLinkProps | Omit<LinkComponentProps, "ref">) & import("react").RefAttributes<HTMLAnchorElement>>;
package/dist/Link/Link.js CHANGED
@@ -1,8 +1,12 @@
1
- import { jsxs as _jsxs } from "react/jsx-runtime";
2
- import classnames from "classnames";
3
- import { forwardRef, } from "react";
1
+ import { jsx as _jsx } from "react/jsx-runtime";
4
2
  import "@axa-fr/design-system-slash-css/dist/Link/Link.scss";
5
- export const Link = forwardRef(({ className, component: Component = "a", leftIcon, rightIcon, target, rel, disabled, children, ...props }, ref) => {
6
- return (_jsxs(Component, { className: classnames("af-slash-link", className), target: target, rel: target === "_blank" ? "noopener noreferrer" : rel, "aria-disabled": disabled ?? props["aria-disabled"], ...props, ref: ref, children: [leftIcon, children, rightIcon] }));
3
+ import { forwardRef } from "react";
4
+ import { CustomLink } from "./CustomLink";
5
+ import { LinkAnchor } from "./LinkAnchor";
6
+ export const Link = forwardRef((props, ref) => {
7
+ if ("render" in props) {
8
+ return _jsx(CustomLink, { ...props });
9
+ }
10
+ return _jsx(LinkAnchor, { ...props, ref: ref });
7
11
  });
8
12
  Link.displayName = "Link";
@@ -0,0 +1,10 @@
1
+ import { ComponentPropsWithRef, type ReactNode } from "react";
2
+ type AnchorLinkProps = {
3
+ leftIcon?: ReactNode;
4
+ rightIcon?: ReactNode;
5
+ className?: string;
6
+ disabled?: boolean;
7
+ };
8
+ type LinkComponentProps = ComponentPropsWithRef<"a"> & AnchorLinkProps;
9
+ declare const LinkAnchor: import("react").ForwardRefExoticComponent<Omit<LinkComponentProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
10
+ export { LinkAnchor, type LinkComponentProps };