@skyscanner/backpack-web 29.4.0 → 29.4.2

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 (47) hide show
  1. package/bpk-component-banner-alert/src/withBannerAlertState.d.ts +86 -143
  2. package/bpk-component-barchart/src/BpkBarchart.js +24 -2
  3. package/bpk-component-barchart/src/BpkChartAxis.js +2 -2
  4. package/bpk-component-breakpoint/src/BpkBreakpoint.d.ts +3 -0
  5. package/bpk-component-button/index.js +1 -1
  6. package/bpk-component-button/src/BpkButtonV2/BpkButton.d.ts +1 -16
  7. package/bpk-component-button/src/BpkButtonV2/BpkButton.js +4 -3
  8. package/bpk-component-calendar/index.d.ts +1 -1
  9. package/bpk-component-calendar/src/BpkCalendarContainer.d.ts +21 -331
  10. package/bpk-component-calendar/src/BpkCalendarDate.d.ts +8 -1
  11. package/bpk-component-calendar/src/BpkCalendarGrid.d.ts +15 -0
  12. package/bpk-component-calendar/src/BpkCalendarGridHeader.d.ts +9 -0
  13. package/bpk-component-calendar/src/BpkCalendarNav.d.ts +4 -0
  14. package/bpk-component-calendar/src/composeCalendar.d.ts +42 -1
  15. package/bpk-component-card-button/src/BpkSaveButton.js +1 -1
  16. package/bpk-component-chip/src/BpkDismissibleChip.d.ts +2 -7
  17. package/bpk-component-datatable/src/BpkDataTable.js +50 -1
  18. package/bpk-component-datepicker/src/BpkDatepicker.d.ts +25 -461
  19. package/bpk-component-dialog/src/common-types.d.ts +12 -0
  20. package/bpk-component-drawer/src/BpkDrawer.js +24 -4
  21. package/bpk-component-fieldset/src/BpkFieldset.js +3 -0
  22. package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css +1 -1
  23. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.d.ts +23 -31
  24. package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js +24 -17
  25. package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js +25 -17
  26. package/bpk-component-image/src/BpkImage.d.ts +4 -1
  27. package/bpk-component-input/src/common-types.d.ts +17 -3
  28. package/bpk-component-input/src/common-types.js +7 -0
  29. package/bpk-component-input/src/withOpenEvents.d.ts +13 -1
  30. package/bpk-component-list/src/BpkList.js +4 -1
  31. package/bpk-component-map/index.js +1 -1
  32. package/bpk-component-map/src/BpkMap.js +6 -0
  33. package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.d.ts +21 -32
  34. package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.js +2 -3
  35. package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +25 -20
  36. package/bpk-component-modal/src/BpkModal.d.ts +7 -1
  37. package/bpk-component-modal/src/BpkModalInner.d.ts +4 -1
  38. package/bpk-component-navigation-bar/src/BpkNavigationBar.js +1 -0
  39. package/bpk-component-nudger/src/BpkConfigurableNudger.d.ts +16 -0
  40. package/bpk-component-nudger/src/common-types.d.ts +17 -1
  41. package/bpk-component-nudger/src/common-types.js +22 -1
  42. package/bpk-component-overlay/src/BpkOverlay.d.ts +8 -3
  43. package/bpk-component-popover/src/BpkPopoverPortal.js +50 -24
  44. package/bpk-component-progress/src/BpkProgress.js +25 -19
  45. package/bpk-component-select/src/BpkSelect.js +7 -5
  46. package/bpk-component-tooltip/src/BpkTooltipPortal.d.ts +12 -0
  47. package/package.json +1 -1
package/bpk-component-datepicker/src/BpkDatepicker.d.ts CHANGED
@@ -28,11 +28,20 @@ type Props = {
28
28
  formatMonth: (date: Date) => string;
29
29
  id: string;
30
30
  title: string;
31
+ /**
32
+ * Because this component uses a modal on mobile viewports, you need to let it know what
33
+ * the root element of your application is by returning its DOM node via this prop
34
+ * This is to "hide" your application from screen readers whilst the datepicker is open.
35
+ * The "pagewrap" element id is a convention we use internally at Skyscanner. In most cases it should "just work".
36
+ */
31
37
  getApplicationElement: () => HTMLElement | null;
32
38
  nextMonthLabel: string;
33
39
  previousMonthLabel: string;
34
40
  weekStartsOn: number;
35
41
  calendarComponent: ReactComponent;
42
+ /**
43
+ * By default BpkInput. If passed, it should be a DOM node with a ref attached to it.
44
+ */
36
45
  inputComponent: ReactElement | null;
37
46
  dateModifiers?: {};
38
47
  fixedWidth?: boolean;
@@ -61,52 +70,7 @@ declare class BpkDatepicker extends Component<Props, State> {
61
70
  inputRef: React.RefObject<HTMLInputElement>;
62
71
  static defaultProps: {
63
72
  calendarComponent: {
64
- new (props: Omit<{
65
- changeMonthLabel?: string | null | undefined;
66
- daysOfWeek: DaysOfWeek;
67
- formatDateFull: (date: Date) => string | Date;
68
- formatMonth: (date: Date) => string | Date;
69
- id: string;
70
- maxDate: Date;
71
- minDate: Date;
72
- month: Date;
73
- nextMonthLabel?: string | null | undefined;
74
- previousMonthLabel?: string | null | undefined;
75
- weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
76
- className?: string | null | undefined;
77
- dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
78
- fixedWidth?: boolean | undefined;
79
- focusedDate?: Date | null | undefined;
80
- markOutsideDays?: boolean | undefined;
81
- markToday?: boolean | undefined;
82
- onMonthChange?: ((event: UIEvent, { month, source }: {
83
- month: Date;
84
- source: string;
85
- }) => void) | null | undefined;
86
- onDateClick?: ((date: Date) => void) | null | undefined;
87
- onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
88
- preventKeyboardFocus?: boolean | undefined;
89
- selectionConfiguration?: SelectionConfiguration | undefined;
90
- gridClassName?: string | null | undefined;
91
- weekDayKey?: string | undefined;
92
- navProps?: {} | null | undefined;
93
- headerProps?: {} | null | undefined;
94
- gridProps?: {} | null | undefined;
95
- dateProps?: {} | null | undefined;
96
- } & {
97
- fixedWidth?: boolean | undefined;
98
- maxDate?: Date | undefined;
99
- minDate?: Date | undefined;
100
- onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
101
- onMonthChange?: ((event: UIEvent, { month, source }: {
102
- month: Date;
103
- source: string;
104
- }) => void) | null | undefined;
105
- selectionConfiguration?: SelectionConfiguration | undefined;
106
- initiallyFocusedDate?: Date | null | undefined;
107
- markToday?: boolean | undefined;
108
- markOutsideDays?: boolean | undefined;
109
- }, keyof {
73
+ new (props: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
110
74
  onDateClick: ((date: Date) => void) | null;
111
75
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
112
76
  month: Date;
@@ -115,52 +79,7 @@ declare class BpkDatepicker extends Component<Props, State> {
115
79
  }> & {
116
80
  [rest: string]: any;
117
81
  }): {
118
- UNSAFE_componentWillReceiveProps(nextProps: Omit<{
119
- changeMonthLabel?: string | null | undefined;
120
- daysOfWeek: DaysOfWeek;
121
- formatDateFull: (date: Date) => string | Date;
122
- formatMonth: (date: Date) => string | Date;
123
- id: string;
124
- maxDate: Date;
125
- minDate: Date;
126
- month: Date;
127
- nextMonthLabel?: string | null | undefined;
128
- previousMonthLabel?: string | null | undefined;
129
- weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
130
- className?: string | null | undefined;
131
- dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
132
- fixedWidth?: boolean | undefined;
133
- focusedDate?: Date | null | undefined;
134
- markOutsideDays?: boolean | undefined;
135
- markToday?: boolean | undefined;
136
- onMonthChange?: ((event: UIEvent, { month, source }: {
137
- month: Date;
138
- source: string;
139
- }) => void) | null | undefined;
140
- onDateClick?: ((date: Date) => void) | null | undefined;
141
- onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
142
- preventKeyboardFocus?: boolean | undefined;
143
- selectionConfiguration?: SelectionConfiguration | undefined;
144
- gridClassName?: string | null | undefined;
145
- weekDayKey?: string | undefined;
146
- navProps?: {} | null | undefined;
147
- headerProps?: {} | null | undefined;
148
- gridProps?: {} | null | undefined;
149
- dateProps?: {} | null | undefined;
150
- } & {
151
- fixedWidth?: boolean | undefined;
152
- maxDate?: Date | undefined;
153
- minDate?: Date | undefined;
154
- onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
155
- onMonthChange?: ((event: UIEvent, { month, source }: {
156
- month: Date;
157
- source: string;
158
- }) => void) | null | undefined;
159
- selectionConfiguration?: SelectionConfiguration | undefined;
160
- initiallyFocusedDate?: Date | null | undefined;
161
- markToday?: boolean | undefined;
162
- markOutsideDays?: boolean | undefined;
163
- }, keyof {
82
+ UNSAFE_componentWillReceiveProps(nextProps: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
164
83
  onDateClick: ((date: Date) => void) | null;
165
84
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
166
85
  month: Date;
@@ -190,52 +109,7 @@ declare class BpkDatepicker extends Component<Props, State> {
190
109
  } | ((prevState: Readonly<{
191
110
  preventKeyboardFocus: boolean;
192
111
  focusedDate: Date;
193
- }>, props: Readonly<Omit<{
194
- changeMonthLabel?: string | null | undefined;
195
- daysOfWeek: DaysOfWeek;
196
- formatDateFull: (date: Date) => string | Date;
197
- formatMonth: (date: Date) => string | Date;
198
- id: string;
199
- maxDate: Date;
200
- minDate: Date;
201
- month: Date;
202
- nextMonthLabel?: string | null | undefined;
203
- previousMonthLabel?: string | null | undefined;
204
- weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
205
- className?: string | null | undefined;
206
- dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
207
- fixedWidth?: boolean | undefined;
208
- focusedDate?: Date | null | undefined;
209
- markOutsideDays?: boolean | undefined;
210
- markToday?: boolean | undefined;
211
- onMonthChange?: ((event: UIEvent, { month, source }: {
212
- month: Date;
213
- source: string;
214
- }) => void) | null | undefined;
215
- onDateClick?: ((date: Date) => void) | null | undefined;
216
- onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
217
- preventKeyboardFocus?: boolean | undefined;
218
- selectionConfiguration?: SelectionConfiguration | undefined;
219
- gridClassName?: string | null | undefined;
220
- weekDayKey?: string | undefined;
221
- navProps?: {} | null | undefined;
222
- headerProps?: {} | null | undefined;
223
- gridProps?: {} | null | undefined;
224
- dateProps?: {} | null | undefined;
225
- } & {
226
- fixedWidth?: boolean | undefined;
227
- maxDate?: Date | undefined;
228
- minDate?: Date | undefined;
229
- onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
230
- onMonthChange?: ((event: UIEvent, { month, source }: {
231
- month: Date;
232
- source: string;
233
- }) => void) | null | undefined;
234
- selectionConfiguration?: SelectionConfiguration | undefined;
235
- initiallyFocusedDate?: Date | null | undefined;
236
- markToday?: boolean | undefined;
237
- markOutsideDays?: boolean | undefined;
238
- }, keyof {
112
+ }>, props: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
239
113
  onDateClick: ((date: Date) => void) | null;
240
114
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
241
115
  month: Date;
@@ -254,52 +128,7 @@ declare class BpkDatepicker extends Component<Props, State> {
254
128
  focusedDate: Date;
255
129
  }, K> | null, callback?: (() => void) | undefined): void;
256
130
  forceUpdate(callback?: (() => void) | undefined): void;
257
- readonly props: Readonly<Omit<{
258
- changeMonthLabel?: string | null | undefined;
259
- daysOfWeek: DaysOfWeek;
260
- formatDateFull: (date: Date) => string | Date;
261
- formatMonth: (date: Date) => string | Date;
262
- id: string;
263
- maxDate: Date;
264
- minDate: Date;
265
- month: Date;
266
- nextMonthLabel?: string | null | undefined;
267
- previousMonthLabel?: string | null | undefined;
268
- weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
269
- className?: string | null | undefined;
270
- dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
271
- fixedWidth?: boolean | undefined;
272
- focusedDate?: Date | null | undefined;
273
- markOutsideDays?: boolean | undefined;
274
- markToday?: boolean | undefined;
275
- onMonthChange?: ((event: UIEvent, { month, source }: {
276
- month: Date;
277
- source: string;
278
- }) => void) | null | undefined;
279
- onDateClick?: ((date: Date) => void) | null | undefined;
280
- onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
281
- preventKeyboardFocus?: boolean | undefined;
282
- selectionConfiguration?: SelectionConfiguration | undefined;
283
- gridClassName?: string | null | undefined;
284
- weekDayKey?: string | undefined;
285
- navProps?: {} | null | undefined;
286
- headerProps?: {} | null | undefined;
287
- gridProps?: {} | null | undefined;
288
- dateProps?: {} | null | undefined;
289
- } & {
290
- fixedWidth?: boolean | undefined;
291
- maxDate?: Date | undefined;
292
- minDate?: Date | undefined;
293
- onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
294
- onMonthChange?: ((event: UIEvent, { month, source }: {
295
- month: Date;
296
- source: string;
297
- }) => void) | null | undefined;
298
- selectionConfiguration?: SelectionConfiguration | undefined;
299
- initiallyFocusedDate?: Date | null | undefined;
300
- markToday?: boolean | undefined;
301
- markOutsideDays?: boolean | undefined;
302
- }, keyof {
131
+ readonly props: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
303
132
  onDateClick: ((date: Date) => void) | null;
304
133
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
305
134
  month: Date;
@@ -318,52 +147,7 @@ declare class BpkDatepicker extends Component<Props, State> {
318
147
  [key: string]: import("react").ReactInstance;
319
148
  };
320
149
  componentDidMount?(): void;
321
- shouldComponentUpdate?(nextProps: Readonly<Omit<{
322
- changeMonthLabel?: string | null | undefined;
323
- daysOfWeek: DaysOfWeek;
324
- formatDateFull: (date: Date) => string | Date;
325
- formatMonth: (date: Date) => string | Date;
326
- id: string;
327
- maxDate: Date;
328
- minDate: Date;
329
- month: Date;
330
- nextMonthLabel?: string | null | undefined;
331
- previousMonthLabel?: string | null | undefined;
332
- weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
333
- className?: string | null | undefined;
334
- dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
335
- fixedWidth?: boolean | undefined;
336
- focusedDate?: Date | null | undefined;
337
- markOutsideDays?: boolean | undefined;
338
- markToday?: boolean | undefined;
339
- onMonthChange?: ((event: UIEvent, { month, source }: {
340
- month: Date;
341
- source: string;
342
- }) => void) | null | undefined;
343
- onDateClick?: ((date: Date) => void) | null | undefined;
344
- onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
345
- preventKeyboardFocus?: boolean | undefined;
346
- selectionConfiguration?: SelectionConfiguration | undefined;
347
- gridClassName?: string | null | undefined;
348
- weekDayKey?: string | undefined;
349
- navProps?: {} | null | undefined;
350
- headerProps?: {} | null | undefined;
351
- gridProps?: {} | null | undefined;
352
- dateProps?: {} | null | undefined;
353
- } & {
354
- fixedWidth?: boolean | undefined;
355
- maxDate?: Date | undefined;
356
- minDate?: Date | undefined;
357
- onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
358
- onMonthChange?: ((event: UIEvent, { month, source }: {
359
- month: Date;
360
- source: string;
361
- }) => void) | null | undefined;
362
- selectionConfiguration?: SelectionConfiguration | undefined;
363
- initiallyFocusedDate?: Date | null | undefined;
364
- markToday?: boolean | undefined;
365
- markOutsideDays?: boolean | undefined;
366
- }, keyof {
150
+ shouldComponentUpdate?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
367
151
  onDateClick: ((date: Date) => void) | null;
368
152
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
369
153
  month: Date;
@@ -377,52 +161,7 @@ declare class BpkDatepicker extends Component<Props, State> {
377
161
  }>, nextContext: any): boolean;
378
162
  componentWillUnmount?(): void;
379
163
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
380
- getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<{
381
- changeMonthLabel?: string | null | undefined;
382
- daysOfWeek: DaysOfWeek;
383
- formatDateFull: (date: Date) => string | Date;
384
- formatMonth: (date: Date) => string | Date;
385
- id: string;
386
- maxDate: Date;
387
- minDate: Date;
388
- month: Date;
389
- nextMonthLabel?: string | null | undefined;
390
- previousMonthLabel?: string | null | undefined;
391
- weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
392
- className?: string | null | undefined;
393
- dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
394
- fixedWidth?: boolean | undefined;
395
- focusedDate?: Date | null | undefined;
396
- markOutsideDays?: boolean | undefined;
397
- markToday?: boolean | undefined;
398
- onMonthChange?: ((event: UIEvent, { month, source }: {
399
- month: Date;
400
- source: string;
401
- }) => void) | null | undefined;
402
- onDateClick?: ((date: Date) => void) | null | undefined;
403
- onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
404
- preventKeyboardFocus?: boolean | undefined;
405
- selectionConfiguration?: SelectionConfiguration | undefined;
406
- gridClassName?: string | null | undefined;
407
- weekDayKey?: string | undefined;
408
- navProps?: {} | null | undefined;
409
- headerProps?: {} | null | undefined;
410
- gridProps?: {} | null | undefined;
411
- dateProps?: {} | null | undefined;
412
- } & {
413
- fixedWidth?: boolean | undefined;
414
- maxDate?: Date | undefined;
415
- minDate?: Date | undefined;
416
- onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
417
- onMonthChange?: ((event: UIEvent, { month, source }: {
418
- month: Date;
419
- source: string;
420
- }) => void) | null | undefined;
421
- selectionConfiguration?: SelectionConfiguration | undefined;
422
- initiallyFocusedDate?: Date | null | undefined;
423
- markToday?: boolean | undefined;
424
- markOutsideDays?: boolean | undefined;
425
- }, keyof {
164
+ getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
426
165
  onDateClick: ((date: Date) => void) | null;
427
166
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
428
167
  month: Date;
@@ -434,52 +173,7 @@ declare class BpkDatepicker extends Component<Props, State> {
434
173
  preventKeyboardFocus: boolean;
435
174
  focusedDate: Date;
436
175
  }>): any;
437
- componentDidUpdate?(prevProps: Readonly<Omit<{
438
- changeMonthLabel?: string | null | undefined;
439
- daysOfWeek: DaysOfWeek;
440
- formatDateFull: (date: Date) => string | Date;
441
- formatMonth: (date: Date) => string | Date;
442
- id: string;
443
- maxDate: Date;
444
- minDate: Date;
445
- month: Date;
446
- nextMonthLabel?: string | null | undefined;
447
- previousMonthLabel?: string | null | undefined;
448
- weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
449
- className?: string | null | undefined;
450
- dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
451
- fixedWidth?: boolean | undefined;
452
- focusedDate?: Date | null | undefined;
453
- markOutsideDays?: boolean | undefined;
454
- markToday?: boolean | undefined;
455
- onMonthChange?: ((event: UIEvent, { month, source }: {
456
- month: Date;
457
- source: string;
458
- }) => void) | null | undefined;
459
- onDateClick?: ((date: Date) => void) | null | undefined;
460
- onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
461
- preventKeyboardFocus?: boolean | undefined;
462
- selectionConfiguration?: SelectionConfiguration | undefined;
463
- gridClassName?: string | null | undefined;
464
- weekDayKey?: string | undefined;
465
- navProps?: {} | null | undefined;
466
- headerProps?: {} | null | undefined;
467
- gridProps?: {} | null | undefined;
468
- dateProps?: {} | null | undefined;
469
- } & {
470
- fixedWidth?: boolean | undefined;
471
- maxDate?: Date | undefined;
472
- minDate?: Date | undefined;
473
- onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
474
- onMonthChange?: ((event: UIEvent, { month, source }: {
475
- month: Date;
476
- source: string;
477
- }) => void) | null | undefined;
478
- selectionConfiguration?: SelectionConfiguration | undefined;
479
- initiallyFocusedDate?: Date | null | undefined;
480
- markToday?: boolean | undefined;
481
- markOutsideDays?: boolean | undefined;
482
- }, keyof {
176
+ componentDidUpdate?(prevProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
483
177
  onDateClick: ((date: Date) => void) | null;
484
178
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
485
179
  month: Date;
@@ -493,52 +187,7 @@ declare class BpkDatepicker extends Component<Props, State> {
493
187
  }>, snapshot?: any): void;
494
188
  componentWillMount?(): void;
495
189
  UNSAFE_componentWillMount?(): void;
496
- componentWillReceiveProps?(nextProps: Readonly<Omit<{
497
- changeMonthLabel?: string | null | undefined;
498
- daysOfWeek: DaysOfWeek;
499
- formatDateFull: (date: Date) => string | Date;
500
- formatMonth: (date: Date) => string | Date;
501
- id: string;
502
- maxDate: Date;
503
- minDate: Date;
504
- month: Date;
505
- nextMonthLabel?: string | null | undefined;
506
- previousMonthLabel?: string | null | undefined;
507
- weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
508
- className?: string | null | undefined;
509
- dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
510
- fixedWidth?: boolean | undefined;
511
- focusedDate?: Date | null | undefined;
512
- markOutsideDays?: boolean | undefined;
513
- markToday?: boolean | undefined;
514
- onMonthChange?: ((event: UIEvent, { month, source }: {
515
- month: Date;
516
- source: string;
517
- }) => void) | null | undefined;
518
- onDateClick?: ((date: Date) => void) | null | undefined;
519
- onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
520
- preventKeyboardFocus?: boolean | undefined;
521
- selectionConfiguration?: SelectionConfiguration | undefined;
522
- gridClassName?: string | null | undefined;
523
- weekDayKey?: string | undefined;
524
- navProps?: {} | null | undefined;
525
- headerProps?: {} | null | undefined;
526
- gridProps?: {} | null | undefined;
527
- dateProps?: {} | null | undefined;
528
- } & {
529
- fixedWidth?: boolean | undefined;
530
- maxDate?: Date | undefined;
531
- minDate?: Date | undefined;
532
- onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
533
- onMonthChange?: ((event: UIEvent, { month, source }: {
534
- month: Date;
535
- source: string;
536
- }) => void) | null | undefined;
537
- selectionConfiguration?: SelectionConfiguration | undefined;
538
- initiallyFocusedDate?: Date | null | undefined;
539
- markToday?: boolean | undefined;
540
- markOutsideDays?: boolean | undefined;
541
- }, keyof {
190
+ componentWillReceiveProps?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
542
191
  onDateClick: ((date: Date) => void) | null;
543
192
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
544
193
  month: Date;
@@ -547,52 +196,7 @@ declare class BpkDatepicker extends Component<Props, State> {
547
196
  }> & {
548
197
  [rest: string]: any;
549
198
  }>, nextContext: any): void;
550
- componentWillUpdate?(nextProps: Readonly<Omit<{
551
- changeMonthLabel?: string | null | undefined;
552
- daysOfWeek: DaysOfWeek;
553
- formatDateFull: (date: Date) => string | Date;
554
- formatMonth: (date: Date) => string | Date;
555
- id: string;
556
- maxDate: Date;
557
- minDate: Date;
558
- month: Date;
559
- nextMonthLabel?: string | null | undefined;
560
- previousMonthLabel?: string | null | undefined;
561
- weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
562
- className?: string | null | undefined;
563
- dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
564
- fixedWidth?: boolean | undefined;
565
- focusedDate?: Date | null | undefined;
566
- markOutsideDays?: boolean | undefined;
567
- markToday?: boolean | undefined;
568
- onMonthChange?: ((event: UIEvent, { month, source }: {
569
- month: Date;
570
- source: string;
571
- }) => void) | null | undefined;
572
- onDateClick?: ((date: Date) => void) | null | undefined;
573
- onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
574
- preventKeyboardFocus?: boolean | undefined;
575
- selectionConfiguration?: SelectionConfiguration | undefined;
576
- gridClassName?: string | null | undefined;
577
- weekDayKey?: string | undefined;
578
- navProps?: {} | null | undefined;
579
- headerProps?: {} | null | undefined;
580
- gridProps?: {} | null | undefined;
581
- dateProps?: {} | null | undefined;
582
- } & {
583
- fixedWidth?: boolean | undefined;
584
- maxDate?: Date | undefined;
585
- minDate?: Date | undefined;
586
- onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
587
- onMonthChange?: ((event: UIEvent, { month, source }: {
588
- month: Date;
589
- source: string;
590
- }) => void) | null | undefined;
591
- selectionConfiguration?: SelectionConfiguration | undefined;
592
- initiallyFocusedDate?: Date | null | undefined;
593
- markToday?: boolean | undefined;
594
- markOutsideDays?: boolean | undefined;
595
- }, keyof {
199
+ componentWillUpdate?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
596
200
  onDateClick: ((date: Date) => void) | null;
597
201
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
598
202
  month: Date;
@@ -604,52 +208,7 @@ declare class BpkDatepicker extends Component<Props, State> {
604
208
  preventKeyboardFocus: boolean;
605
209
  focusedDate: Date;
606
210
  }>, nextContext: any): void;
607
- UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<{
608
- changeMonthLabel?: string | null | undefined;
609
- daysOfWeek: DaysOfWeek;
610
- formatDateFull: (date: Date) => string | Date;
611
- formatMonth: (date: Date) => string | Date;
612
- id: string;
613
- maxDate: Date;
614
- minDate: Date;
615
- month: Date;
616
- nextMonthLabel?: string | null | undefined;
617
- previousMonthLabel?: string | null | undefined;
618
- weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
619
- className?: string | null | undefined;
620
- dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
621
- fixedWidth?: boolean | undefined;
622
- focusedDate?: Date | null | undefined;
623
- markOutsideDays?: boolean | undefined;
624
- markToday?: boolean | undefined;
625
- onMonthChange?: ((event: UIEvent, { month, source }: {
626
- month: Date;
627
- source: string;
628
- }) => void) | null | undefined;
629
- onDateClick?: ((date: Date) => void) | null | undefined;
630
- onDateKeyDown?: ((event: KeyboardEvent) => void) | null | undefined;
631
- preventKeyboardFocus?: boolean | undefined;
632
- selectionConfiguration?: SelectionConfiguration | undefined;
633
- gridClassName?: string | null | undefined;
634
- weekDayKey?: string | undefined;
635
- navProps?: {} | null | undefined;
636
- headerProps?: {} | null | undefined;
637
- gridProps?: {} | null | undefined;
638
- dateProps?: {} | null | undefined;
639
- } & {
640
- fixedWidth?: boolean | undefined;
641
- maxDate?: Date | undefined;
642
- minDate?: Date | undefined;
643
- onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
644
- onMonthChange?: ((event: UIEvent, { month, source }: {
645
- month: Date;
646
- source: string;
647
- }) => void) | null | undefined;
648
- selectionConfiguration?: SelectionConfiguration | undefined;
649
- initiallyFocusedDate?: Date | null | undefined;
650
- markToday?: boolean | undefined;
651
- markOutsideDays?: boolean | undefined;
652
- }, keyof {
211
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
653
212
  onDateClick: ((date: Date) => void) | null;
654
213
  onDateKeyDown: ((event: KeyboardEvent) => void) | null;
655
214
  month: Date;
@@ -674,7 +233,12 @@ declare class BpkDatepicker extends Component<Props, State> {
674
233
  };
675
234
  initiallyFocusedDate: null;
676
235
  markToday: boolean;
677
- markOutsideDays: boolean;
236
+ markOutsideDays: boolean; /**
237
+ * Gets the correct value for the input field
238
+ * @param {Object} selectionConfiguration current selection configuration
239
+ * @param {Function} formatDate function supplied to format date
240
+ * @returns {String} date value
241
+ */
678
242
  };
679
243
  contextType?: import("react").Context<any> | undefined;
680
244
  };
package/bpk-component-dialog/src/common-types.d.ts CHANGED
@@ -27,16 +27,28 @@ export type DialogInnerProps = {
27
27
  id: string;
28
28
  children: ReactNode;
29
29
  dialogRef: (ref: HTMLElement | null | undefined) => void;
30
+ /**
31
+ * Because this component uses a modal on mobile viewports, you need to let it know what
32
+ * the root element of your application is by returning its DOM node via this prop
33
+ * This is to "hide" your application from screen readers whilst the dialog is open.
34
+ * The "pagewrap" element id is a convention we use internally at Skyscanner. In most cases it should "just work".
35
+ */
30
36
  getApplicationElement: () => HTMLElement | null;
31
37
  className?: string;
32
38
  contentClassName?: string;
33
39
  flare?: boolean;
40
+ /**
41
+ * This will change the style of the default flare view. Should you wish to apply an image to the flare you would pass the image using the CSS property `background-image`.
42
+ */
34
43
  flareClassName?: string;
35
44
  };
36
45
  export type Props = Omit<DialogInnerProps, 'dialogRef'> & {
37
46
  dialogRef?: (ref: HTMLElement | null | undefined) => void;
38
47
  isOpen: boolean;
39
48
  renderTarget?: () => HTMLElement | null;
49
+ /**
50
+ * This property is only required when `dismissible` is true.
51
+ */
40
52
  onClose?: (event?: TouchEvent | MouseEvent | KeyboardEvent) => void | null;
41
53
  closeLabel?: string;
42
54
  dismissible?: boolean;
package/bpk-component-drawer/src/BpkDrawer.js CHANGED
@@ -24,9 +24,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
24
24
  const getClassName = cssModules(STYLES);
25
25
  const BpkScrimDrawerContent = withScrim(BpkDrawerContent);
26
26
  class BpkDrawer extends Component {
27
- static defaultProps = {
28
- renderTarget: null
29
- };
30
27
  constructor() {
31
28
  super();
32
29
  this.state = {
@@ -73,8 +70,31 @@ class BpkDrawer extends Component {
73
70
  }
74
71
  }
75
72
  BpkDrawer.propTypes = {
73
+ id: PropTypes.string.isRequired,
74
+ children: PropTypes.node.isRequired,
76
75
  isOpen: PropTypes.bool.isRequired,
77
76
  onClose: PropTypes.func.isRequired,
78
- renderTarget: PropTypes.func
77
+ title: PropTypes.string.isRequired,
78
+ /**
79
+ * **Note:** In order to "hide" your application from screen readers whilst the drawer is open you need to let it know what
80
+ * the root element for your application is by returning it's DOM node via the function passed to the
81
+ * `getApplicationElement` prop (see the example above). The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
82
+ */
83
+ getApplicationElement: PropTypes.func.isRequired,
84
+ renderTarget: PropTypes.func,
85
+ dialogRef: PropTypes.func,
86
+ className: PropTypes.string,
87
+ contentClassName: PropTypes.string,
88
+ closeLabel: PropTypes.string,
89
+ closeText: PropTypes.string,
90
+ hideTitle: PropTypes.bool
91
+ };
92
+ BpkDrawer.defaultProps = {
93
+ renderTarget: null,
94
+ className: null,
95
+ contentClassName: null,
96
+ closeLabel: null,
97
+ closeText: null,
98
+ hideTitle: false
79
99
  };
80
100
  export default BpkDrawer;
package/bpk-component-fieldset/src/BpkFieldset.js CHANGED
@@ -119,6 +119,9 @@ const labelPropType = (props, propName) => {
119
119
  };
120
120
  export const propTypes = {
121
121
  children: PropTypes.element.isRequired,
122
+ /**
123
+ * Required when `isCheckbox` is false.
124
+ */
122
125
  label: labelPropType,
123
126
  disabled: PropTypes.bool,
124
127
  valid: PropTypes.bool,
package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25),0px 4px 14px 0px rgba(37,32,31,0.25)}@media (max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;margin:0 0 auto auto;padding:0;color:#fff}.bpk-floating-notification__icon{margin-right:0.5rem;margin-left:0.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-right:0.5rem}
18
+ @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,0.25),0px 4px 14px 0px rgba(37,32,31,0.25)}@media (max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;padding:0;color:#fff;margin-inline-start:auto}.bpk-floating-notification__icon{margin-right:0.5rem;margin-left:0.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:0.5rem}