@skyscanner/backpack-web 25.2.0 → 25.3.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.
Files changed (16) hide show
  1. package/bpk-component-calendar/index.d.ts +2 -1
  2. package/bpk-component-calendar/src/BpkCalendarContainer.d.ts +6 -0
  3. package/bpk-component-calendar/src/BpkCalendarContainer.js +3 -1
  4. package/bpk-component-datepicker/index.d.ts +23 -0
  5. package/bpk-component-datepicker/src/BpkDatepicker.d.ts +533 -0
  6. package/bpk-component-datepicker/src/BpkDatepicker.js +9 -46
  7. package/bpk-component-datepicker/src/themeAttributes.js +1 -0
  8. package/bpk-component-input/index.d.ts +2 -16
  9. package/bpk-component-input/src/BpkClearButton.d.ts +5 -9
  10. package/bpk-component-input/src/BpkInput.d.ts +16 -21
  11. package/bpk-component-input/src/common-types.d.ts +3 -6
  12. package/bpk-component-input/src/common-types.js +0 -1
  13. package/bpk-component-input/src/withOpenEvents.d.ts +56 -97
  14. package/bpk-component-input/src/withOpenEvents.js +0 -1
  15. package/bpk-scrim-utils/src/withScrim.js +7 -2
  16. package/package.json +1 -1
package/bpk-component-calendar/index.d.ts CHANGED
@@ -25,8 +25,9 @@ import BpkCalendarDate, { ROW_TYPES, SELECTION_TYPES } from './src/BpkCalendarDa
25
25
  import type { Props as BpkCalendarDateProps } from './src/BpkCalendarDate';
26
26
  import composeCalendar from './src/composeCalendar';
27
27
  import { CALENDAR_SELECTION_TYPE } from './src/custom-proptypes';
28
+ import type { DaysOfWeek, ReactComponent, WeekDay, WeekDayKey, SelectionConfiguration } from './src/custom-proptypes';
28
29
  import CustomPropTypes, { BpkCalendarGridPropTypes, BpkCalendarDatePropTypes } from './src/custom-proptypes-legacy';
29
30
  import * as DateUtils from './src/date-utils';
30
31
  import themeAttributes from './src/themeAttributes';
31
32
  export default BpkCalendarContainer;
32
- export { BpkCalendarGrid, BpkCalendarGridHeader, BpkCalendarNav, BpkCalendarDate, DateUtils, CALENDAR_SELECTION_TYPE, ROW_TYPES, SELECTION_TYPES, composeCalendar, withCalendarState, themeAttributes, BpkCalendarGridWithTransition, CustomPropTypes, BpkCalendarGridPropTypes, BpkCalendarDatePropTypes, BpkCalendarDateProps, BpkCalendarGridProps, };
33
+ export { BpkCalendarGrid, BpkCalendarGridHeader, BpkCalendarNav, BpkCalendarDate, DateUtils, CALENDAR_SELECTION_TYPE, DaysOfWeek, ReactComponent, WeekDay, WeekDayKey, SelectionConfiguration, ROW_TYPES, SELECTION_TYPES, composeCalendar, withCalendarState, themeAttributes, BpkCalendarGridWithTransition, CustomPropTypes, BpkCalendarGridPropTypes, BpkCalendarDatePropTypes, BpkCalendarGridProps, BpkCalendarDateProps };
package/bpk-component-calendar/src/BpkCalendarContainer.d.ts CHANGED
@@ -29,6 +29,8 @@ type Props = {
29
29
  }) => void) | null;
30
30
  selectionConfiguration?: SelectionConfiguration;
31
31
  initiallyFocusedDate?: Date | null;
32
+ markToday?: boolean;
33
+ markOutsideDays?: boolean;
32
34
  };
33
35
  type InjectedProps = {
34
36
  onDateClick: ((date: Date) => void) | null;
@@ -89,6 +91,8 @@ declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>)
89
91
  date: null;
90
92
  };
91
93
  initiallyFocusedDate: null;
94
+ markToday: boolean;
95
+ markOutsideDays: boolean;
92
96
  };
93
97
  contextType?: import("react").Context<any> | undefined;
94
98
  };
@@ -459,6 +463,8 @@ declare const _default: {
459
463
  date: null;
460
464
  };
461
465
  initiallyFocusedDate: null;
466
+ markToday: boolean;
467
+ markOutsideDays: boolean;
462
468
  };
463
469
  contextType?: import("react").Context<any> | undefined;
464
470
  };
package/bpk-component-calendar/src/BpkCalendarContainer.js CHANGED
@@ -275,7 +275,9 @@ const withCalendarState = Calendar => {
275
275
  type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
276
276
  date: null
277
277
  },
278
- initiallyFocusedDate: null
278
+ initiallyFocusedDate: null,
279
+ markToday: true,
280
+ markOutsideDays: true
279
281
  });
280
282
  return BpkCalendarContainer;
281
283
  };
package/bpk-component-datepicker/index.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+
19
+ import { CALENDAR_SELECTION_TYPE } from '../bpk-component-calendar';
20
+ import BpkDatepicker from './src/BpkDatepicker';
21
+ import themeAttributes from './src/themeAttributes';
22
+ export default BpkDatepicker;
23
+ export { CALENDAR_SELECTION_TYPE, themeAttributes };
package/bpk-component-datepicker/src/BpkDatepicker.d.ts ADDED
@@ -0,0 +1,533 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2016 Skyscanner Ltd
5
+ *
6
+ * Licensed under the Apache License, Version 2.0 (the "License");
7
+ * you may not use this file except in compliance with the License.
8
+ * You may obtain a copy of the License at
9
+ *
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software
13
+ * distributed under the License is distributed on an "AS IS" BASIS,
14
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
+ * See the License for the specific language governing permissions and
16
+ * limitations under the License.
17
+ */
18
+
19
+ import { Component } from 'react';
20
+ import type { DaysOfWeek, ReactComponent, SelectionConfiguration } from '../../bpk-component-calendar';
21
+ type Props = {
22
+ changeMonthLabel: string;
23
+ closeButtonText: string;
24
+ daysOfWeek: DaysOfWeek;
25
+ formatDate: (date: Date) => string;
26
+ formatDateFull: (date: Date) => string;
27
+ formatMonth: (date: Date) => string;
28
+ id: string;
29
+ title: string;
30
+ getApplicationElement: () => HTMLElement | null;
31
+ nextMonthLabel: string;
32
+ previousMonthLabel: string;
33
+ weekStartsOn: number;
34
+ calendarComponent: ReactComponent;
35
+ inputComponent: ReactComponent;
36
+ dateModifiers?: {};
37
+ fixedWidth?: boolean;
38
+ inputProps?: {};
39
+ markOutsideDays?: boolean;
40
+ markToday?: boolean;
41
+ maxDate?: Date;
42
+ minDate?: Date;
43
+ onDateSelect?: ((date: Date, newDate?: Date) => void) | null;
44
+ onMonthChange?: ((event: UIEvent, { month, source }: {
45
+ month: Date;
46
+ source: string;
47
+ }) => void) | null;
48
+ onOpenChange?: (arg0: boolean) => void | null;
49
+ selectionConfiguration?: SelectionConfiguration;
50
+ initiallyFocusedDate?: Date;
51
+ renderTarget?: null | HTMLElement | (() => null | HTMLElement);
52
+ isOpen?: boolean;
53
+ valid?: boolean;
54
+ onClose?: () => void;
55
+ };
56
+ type State = {
57
+ isOpen: boolean;
58
+ };
59
+ declare class BpkDatepicker extends Component<Props, State> {
60
+ inputRef: React.RefObject<HTMLInputElement>;
61
+ static defaultProps: {
62
+ calendarComponent: {
63
+ new (props: {
64
+ className?: string | null | undefined;
65
+ id: string;
66
+ changeMonthLabel?: string | null | undefined;
67
+ formatMonth: (date: Date) => string | Date;
68
+ maxDate: Date;
69
+ minDate: Date;
70
+ nextMonthLabel?: string | null | undefined;
71
+ onMonthChange?: (((event: UIEvent, { month, source }: {
72
+ month: Date;
73
+ source: string;
74
+ }) => void) & ((event: UIEvent, { month, source }: {
75
+ month: Date;
76
+ source: string;
77
+ }) => void)) | null | undefined;
78
+ previousMonthLabel?: string | null | undefined;
79
+ preventKeyboardFocus?: boolean | undefined;
80
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
81
+ formatDateFull: (date: Date) => string | Date;
82
+ markToday?: boolean | undefined;
83
+ markOutsideDays?: boolean | undefined;
84
+ weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
85
+ dateProps?: {} | null | undefined;
86
+ focusedDate?: Date | null | undefined;
87
+ selectionConfiguration: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationSingle | import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationRange;
88
+ weekDayKey?: string | undefined;
89
+ daysOfWeek: DaysOfWeek;
90
+ fixedWidth: boolean;
91
+ gridClassName?: string | null | undefined;
92
+ gridProps?: {} | null | undefined;
93
+ headerProps?: {} | null | undefined;
94
+ navProps?: {} | null | undefined;
95
+ onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
96
+ initiallyFocusedDate: Date | null;
97
+ }): {
98
+ UNSAFE_componentWillReceiveProps(nextProps: {
99
+ className?: string | null | undefined;
100
+ id: string;
101
+ changeMonthLabel?: string | null | undefined;
102
+ formatMonth: (date: Date) => string | Date;
103
+ maxDate: Date;
104
+ minDate: Date;
105
+ nextMonthLabel?: string | null | undefined;
106
+ onMonthChange?: (((event: UIEvent, { month, source }: {
107
+ month: Date;
108
+ source: string;
109
+ }) => void) & ((event: UIEvent, { month, source }: {
110
+ month: Date;
111
+ source: string;
112
+ }) => void)) | null | undefined;
113
+ previousMonthLabel?: string | null | undefined;
114
+ preventKeyboardFocus?: boolean | undefined;
115
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
116
+ formatDateFull: (date: Date) => string | Date;
117
+ markToday?: boolean | undefined;
118
+ markOutsideDays?: boolean | undefined;
119
+ weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
120
+ dateProps?: {} | null | undefined;
121
+ focusedDate?: Date | null | undefined;
122
+ selectionConfiguration: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationSingle | import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationRange;
123
+ weekDayKey?: string | undefined;
124
+ daysOfWeek: DaysOfWeek;
125
+ fixedWidth: boolean;
126
+ gridClassName?: string | null | undefined;
127
+ gridProps?: {} | null | undefined;
128
+ headerProps?: {} | null | undefined;
129
+ navProps?: {} | null | undefined;
130
+ onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
131
+ initiallyFocusedDate: Date | null;
132
+ }): void;
133
+ handleDateFocus: (event: UIEvent, { date, source }: {
134
+ date: Date;
135
+ source: string;
136
+ }) => void;
137
+ handleDateSelect: (date: Date) => void;
138
+ handleMonthChange: (event: UIEvent, { month, source }: {
139
+ month: Date;
140
+ source: string;
141
+ }) => void;
142
+ handleDateKeyDown: (event: KeyboardEvent) => void;
143
+ render(): JSX.Element;
144
+ context: any;
145
+ setState<K extends keyof {
146
+ preventKeyboardFocus: boolean;
147
+ focusedDate: Date;
148
+ }>(state: {
149
+ preventKeyboardFocus: boolean;
150
+ focusedDate: Date;
151
+ } | ((prevState: Readonly<{
152
+ preventKeyboardFocus: boolean;
153
+ focusedDate: Date;
154
+ }>, props: Readonly<{
155
+ className?: string | null | undefined;
156
+ id: string;
157
+ changeMonthLabel?: string | null | undefined;
158
+ formatMonth: (date: Date) => string | Date;
159
+ maxDate: Date;
160
+ minDate: Date;
161
+ nextMonthLabel?: string | null | undefined;
162
+ onMonthChange?: (((event: UIEvent, { month, source }: {
163
+ month: Date;
164
+ source: string;
165
+ }) => void) & ((event: UIEvent, { month, source }: {
166
+ month: Date;
167
+ source: string;
168
+ }) => void)) | null | undefined;
169
+ previousMonthLabel?: string | null | undefined;
170
+ preventKeyboardFocus?: boolean | undefined;
171
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
172
+ formatDateFull: (date: Date) => string | Date;
173
+ markToday?: boolean | undefined;
174
+ markOutsideDays?: boolean | undefined;
175
+ weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
176
+ dateProps?: {} | null | undefined;
177
+ focusedDate?: Date | null | undefined;
178
+ selectionConfiguration: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationSingle | import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationRange;
179
+ weekDayKey?: string | undefined;
180
+ daysOfWeek: DaysOfWeek;
181
+ fixedWidth: boolean;
182
+ gridClassName?: string | null | undefined;
183
+ gridProps?: {} | null | undefined;
184
+ headerProps?: {} | null | undefined;
185
+ navProps?: {} | null | undefined;
186
+ onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
187
+ initiallyFocusedDate: Date | null;
188
+ }>) => {
189
+ preventKeyboardFocus: boolean;
190
+ focusedDate: Date;
191
+ } | Pick<{
192
+ preventKeyboardFocus: boolean;
193
+ focusedDate: Date;
194
+ }, K> | null) | Pick<{
195
+ preventKeyboardFocus: boolean;
196
+ focusedDate: Date;
197
+ }, K> | null, callback?: (() => void) | undefined): void;
198
+ forceUpdate(callback?: (() => void) | undefined): void;
199
+ readonly props: Readonly<{
200
+ className?: string | null | undefined;
201
+ id: string;
202
+ changeMonthLabel?: string | null | undefined;
203
+ formatMonth: (date: Date) => string | Date;
204
+ maxDate: Date;
205
+ minDate: Date;
206
+ nextMonthLabel?: string | null | undefined;
207
+ onMonthChange?: (((event: UIEvent, { month, source }: {
208
+ month: Date;
209
+ source: string;
210
+ }) => void) & ((event: UIEvent, { month, source }: {
211
+ month: Date;
212
+ source: string;
213
+ }) => void)) | null | undefined;
214
+ previousMonthLabel?: string | null | undefined;
215
+ preventKeyboardFocus?: boolean | undefined;
216
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
217
+ formatDateFull: (date: Date) => string | Date;
218
+ markToday?: boolean | undefined;
219
+ markOutsideDays?: boolean | undefined;
220
+ weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
221
+ dateProps?: {} | null | undefined;
222
+ focusedDate?: Date | null | undefined;
223
+ selectionConfiguration: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationSingle | import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationRange;
224
+ weekDayKey?: string | undefined;
225
+ daysOfWeek: DaysOfWeek;
226
+ fixedWidth: boolean;
227
+ gridClassName?: string | null | undefined;
228
+ gridProps?: {} | null | undefined;
229
+ headerProps?: {} | null | undefined;
230
+ navProps?: {} | null | undefined;
231
+ onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
232
+ initiallyFocusedDate: Date | null;
233
+ }> & Readonly<{
234
+ children?: import("react").ReactNode;
235
+ }>;
236
+ state: Readonly<{
237
+ preventKeyboardFocus: boolean;
238
+ focusedDate: Date;
239
+ }>;
240
+ refs: {
241
+ [key: string]: import("react").ReactInstance;
242
+ };
243
+ componentDidMount?(): void;
244
+ shouldComponentUpdate?(nextProps: Readonly<{
245
+ className?: string | null | undefined;
246
+ id: string;
247
+ changeMonthLabel?: string | null | undefined;
248
+ formatMonth: (date: Date) => string | Date;
249
+ maxDate: Date;
250
+ minDate: Date;
251
+ nextMonthLabel?: string | null | undefined;
252
+ onMonthChange?: (((event: UIEvent, { month, source }: {
253
+ month: Date;
254
+ source: string;
255
+ }) => void) & ((event: UIEvent, { month, source }: {
256
+ month: Date;
257
+ source: string;
258
+ }) => void)) | null | undefined;
259
+ previousMonthLabel?: string | null | undefined;
260
+ preventKeyboardFocus?: boolean | undefined;
261
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
262
+ formatDateFull: (date: Date) => string | Date;
263
+ markToday?: boolean | undefined;
264
+ markOutsideDays?: boolean | undefined;
265
+ weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
266
+ dateProps?: {} | null | undefined;
267
+ focusedDate?: Date | null | undefined;
268
+ selectionConfiguration: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationSingle | import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationRange;
269
+ weekDayKey?: string | undefined;
270
+ daysOfWeek: DaysOfWeek;
271
+ fixedWidth: boolean;
272
+ gridClassName?: string | null | undefined;
273
+ gridProps?: {} | null | undefined;
274
+ headerProps?: {} | null | undefined;
275
+ navProps?: {} | null | undefined;
276
+ onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
277
+ initiallyFocusedDate: Date | null;
278
+ }>, nextState: Readonly<{
279
+ preventKeyboardFocus: boolean;
280
+ focusedDate: Date;
281
+ }>, nextContext: any): boolean;
282
+ componentWillUnmount?(): void;
283
+ componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
284
+ getSnapshotBeforeUpdate?(prevProps: Readonly<{
285
+ className?: string | null | undefined;
286
+ id: string;
287
+ changeMonthLabel?: string | null | undefined;
288
+ formatMonth: (date: Date) => string | Date;
289
+ maxDate: Date;
290
+ minDate: Date;
291
+ nextMonthLabel?: string | null | undefined;
292
+ onMonthChange?: (((event: UIEvent, { month, source }: {
293
+ month: Date;
294
+ source: string;
295
+ }) => void) & ((event: UIEvent, { month, source }: {
296
+ month: Date;
297
+ source: string;
298
+ }) => void)) | null | undefined;
299
+ previousMonthLabel?: string | null | undefined;
300
+ preventKeyboardFocus?: boolean | undefined;
301
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
302
+ formatDateFull: (date: Date) => string | Date;
303
+ markToday?: boolean | undefined;
304
+ markOutsideDays?: boolean | undefined;
305
+ weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
306
+ dateProps?: {} | null | undefined;
307
+ focusedDate?: Date | null | undefined;
308
+ selectionConfiguration: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationSingle | import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationRange;
309
+ weekDayKey?: string | undefined;
310
+ daysOfWeek: DaysOfWeek;
311
+ fixedWidth: boolean;
312
+ gridClassName?: string | null | undefined;
313
+ gridProps?: {} | null | undefined;
314
+ headerProps?: {} | null | undefined;
315
+ navProps?: {} | null | undefined;
316
+ onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
317
+ initiallyFocusedDate: Date | null;
318
+ }>, prevState: Readonly<{
319
+ preventKeyboardFocus: boolean;
320
+ focusedDate: Date;
321
+ }>): any;
322
+ componentDidUpdate?(prevProps: Readonly<{
323
+ className?: string | null | undefined;
324
+ id: string;
325
+ changeMonthLabel?: string | null | undefined;
326
+ formatMonth: (date: Date) => string | Date;
327
+ maxDate: Date;
328
+ minDate: Date;
329
+ nextMonthLabel?: string | null | undefined;
330
+ onMonthChange?: (((event: UIEvent, { month, source }: {
331
+ month: Date;
332
+ source: string;
333
+ }) => void) & ((event: UIEvent, { month, source }: {
334
+ month: Date;
335
+ source: string;
336
+ }) => void)) | null | undefined;
337
+ previousMonthLabel?: string | null | undefined;
338
+ preventKeyboardFocus?: boolean | undefined;
339
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
340
+ formatDateFull: (date: Date) => string | Date;
341
+ markToday?: boolean | undefined;
342
+ markOutsideDays?: boolean | undefined;
343
+ weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
344
+ dateProps?: {} | null | undefined;
345
+ focusedDate?: Date | null | undefined;
346
+ selectionConfiguration: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationSingle | import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationRange;
347
+ weekDayKey?: string | undefined;
348
+ daysOfWeek: DaysOfWeek;
349
+ fixedWidth: boolean;
350
+ gridClassName?: string | null | undefined;
351
+ gridProps?: {} | null | undefined;
352
+ headerProps?: {} | null | undefined;
353
+ navProps?: {} | null | undefined;
354
+ onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
355
+ initiallyFocusedDate: Date | null;
356
+ }>, prevState: Readonly<{
357
+ preventKeyboardFocus: boolean;
358
+ focusedDate: Date;
359
+ }>, snapshot?: any): void;
360
+ componentWillMount?(): void;
361
+ UNSAFE_componentWillMount?(): void;
362
+ componentWillReceiveProps?(nextProps: Readonly<{
363
+ className?: string | null | undefined;
364
+ id: string;
365
+ changeMonthLabel?: string | null | undefined;
366
+ formatMonth: (date: Date) => string | Date;
367
+ maxDate: Date;
368
+ minDate: Date;
369
+ nextMonthLabel?: string | null | undefined;
370
+ onMonthChange?: (((event: UIEvent, { month, source }: {
371
+ month: Date;
372
+ source: string;
373
+ }) => void) & ((event: UIEvent, { month, source }: {
374
+ month: Date;
375
+ source: string;
376
+ }) => void)) | null | undefined;
377
+ previousMonthLabel?: string | null | undefined;
378
+ preventKeyboardFocus?: boolean | undefined;
379
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
380
+ formatDateFull: (date: Date) => string | Date;
381
+ markToday?: boolean | undefined;
382
+ markOutsideDays?: boolean | undefined;
383
+ weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
384
+ dateProps?: {} | null | undefined;
385
+ focusedDate?: Date | null | undefined;
386
+ selectionConfiguration: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationSingle | import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationRange;
387
+ weekDayKey?: string | undefined;
388
+ daysOfWeek: DaysOfWeek;
389
+ fixedWidth: boolean;
390
+ gridClassName?: string | null | undefined;
391
+ gridProps?: {} | null | undefined;
392
+ headerProps?: {} | null | undefined;
393
+ navProps?: {} | null | undefined;
394
+ onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
395
+ initiallyFocusedDate: Date | null;
396
+ }>, nextContext: any): void;
397
+ componentWillUpdate?(nextProps: Readonly<{
398
+ className?: string | null | undefined;
399
+ id: string;
400
+ changeMonthLabel?: string | null | undefined;
401
+ formatMonth: (date: Date) => string | Date;
402
+ maxDate: Date;
403
+ minDate: Date;
404
+ nextMonthLabel?: string | null | undefined;
405
+ onMonthChange?: (((event: UIEvent, { month, source }: {
406
+ month: Date;
407
+ source: string;
408
+ }) => void) & ((event: UIEvent, { month, source }: {
409
+ month: Date;
410
+ source: string;
411
+ }) => void)) | null | undefined;
412
+ previousMonthLabel?: string | null | undefined;
413
+ preventKeyboardFocus?: boolean | undefined;
414
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
415
+ formatDateFull: (date: Date) => string | Date;
416
+ markToday?: boolean | undefined;
417
+ markOutsideDays?: boolean | undefined;
418
+ weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
419
+ dateProps?: {} | null | undefined;
420
+ focusedDate?: Date | null | undefined;
421
+ selectionConfiguration: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationSingle | import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationRange;
422
+ weekDayKey?: string | undefined;
423
+ daysOfWeek: DaysOfWeek;
424
+ fixedWidth: boolean;
425
+ gridClassName?: string | null | undefined;
426
+ gridProps?: {} | null | undefined;
427
+ headerProps?: {} | null | undefined;
428
+ navProps?: {} | null | undefined;
429
+ onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
430
+ initiallyFocusedDate: Date | null;
431
+ }>, nextState: Readonly<{
432
+ preventKeyboardFocus: boolean;
433
+ focusedDate: Date;
434
+ }>, nextContext: any): void;
435
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<{
436
+ className?: string | null | undefined;
437
+ id: string;
438
+ changeMonthLabel?: string | null | undefined;
439
+ formatMonth: (date: Date) => string | Date;
440
+ maxDate: Date;
441
+ minDate: Date;
442
+ nextMonthLabel?: string | null | undefined;
443
+ onMonthChange?: (((event: UIEvent, { month, source }: {
444
+ month: Date;
445
+ source: string;
446
+ }) => void) & ((event: UIEvent, { month, source }: {
447
+ month: Date;
448
+ source: string;
449
+ }) => void)) | null | undefined;
450
+ previousMonthLabel?: string | null | undefined;
451
+ preventKeyboardFocus?: boolean | undefined;
452
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
453
+ formatDateFull: (date: Date) => string | Date;
454
+ markToday?: boolean | undefined;
455
+ markOutsideDays?: boolean | undefined;
456
+ weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
457
+ dateProps?: {} | null | undefined;
458
+ focusedDate?: Date | null | undefined;
459
+ selectionConfiguration: import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationSingle | import("../../bpk-component-calendar/src/custom-proptypes").SelectionConfigurationRange;
460
+ weekDayKey?: string | undefined;
461
+ daysOfWeek: DaysOfWeek;
462
+ fixedWidth: boolean;
463
+ gridClassName?: string | null | undefined;
464
+ gridProps?: {} | null | undefined;
465
+ headerProps?: {} | null | undefined;
466
+ navProps?: {} | null | undefined;
467
+ onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
468
+ initiallyFocusedDate: Date | null;
469
+ }>, nextState: Readonly<{
470
+ preventKeyboardFocus: boolean;
471
+ focusedDate: Date;
472
+ }>, nextContext: any): void;
473
+ };
474
+ defaultProps: {
475
+ fixedWidth: boolean;
476
+ maxDate: Date;
477
+ minDate: Date;
478
+ onDateSelect: null;
479
+ onMonthChange: null;
480
+ selectionConfiguration: {
481
+ type: "single";
482
+ date: null;
483
+ };
484
+ initiallyFocusedDate: null;
485
+ markToday: boolean;
486
+ markOutsideDays: boolean;
487
+ };
488
+ contextType?: import("react").Context<any> | undefined;
489
+ };
490
+ inputComponent: null;
491
+ dateModifiers: {};
492
+ inputProps: {};
493
+ fixedWidth: boolean;
494
+ markOutsideDays: boolean;
495
+ markToday: boolean;
496
+ maxDate: Date;
497
+ minDate: Date;
498
+ nextMonthLabel: null;
499
+ onDateSelect: null;
500
+ onOpenChange: null;
501
+ onMonthChange: null;
502
+ previousMonthLabel: null;
503
+ selectionConfiguration: {
504
+ type: "single";
505
+ date: null;
506
+ };
507
+ initiallyFocusedDate: null;
508
+ renderTarget: null;
509
+ isOpen: boolean;
510
+ valid: null;
511
+ };
512
+ constructor(props: Props);
513
+ componentDidUpdate(prevProps: Props, prevState: State): void;
514
+ onOpen: () => void;
515
+ onClose: () => void;
516
+ /**
517
+ * Gets the correct label for the input field to be supplied to the aria-label
518
+ * @param {Object} selectionConfiguration current selection configuration
519
+ * @param {Function} formatDateFull function supplied to format date
520
+ * @returns {String} date string
521
+ */
522
+ getLabel: (selectionConfiguration: SelectionConfiguration, formatDateFull: (date: Date) => string) => string;
523
+ /**
524
+ * Gets the correct value for the input field
525
+ * @param {Object} selectionConfiguration current selection configuration
526
+ * @param {Function} formatDate function supplied to format date
527
+ * @returns {String} date value
528
+ */
529
+ getValue: (selectionConfiguration: SelectionConfiguration, formatDate: (date: Date) => string) => string;
530
+ handleDateSelect: (startDate: Date, endDate?: Date | null) => void;
531
+ render(): JSX.Element;
532
+ }
533
+ export default BpkDatepicker;
package/bpk-component-datepicker/src/BpkDatepicker.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _propTypes = _interopRequireDefault(require("prop-types"));
8
7
  var _react = require("react");
9
8
  var _bpkComponentInput = _interopRequireWildcard(require("../../bpk-component-input"));
10
9
  var _bpkComponentModal = _interopRequireDefault(require("../../bpk-component-modal"));
@@ -15,9 +14,9 @@ var _bpkComponentCalendar = require("../../bpk-component-calendar");
15
14
  var _BpkDatepickerModule = _interopRequireDefault(require("./BpkDatepicker.module.css"));
16
15
  var _jsxRuntime = require("react/jsx-runtime");
17
16
  const _excluded = ["calendarComponent", "changeMonthLabel", "closeButtonText", "dateModifiers", "daysOfWeek", "fixedWidth", "formatDate", "formatDateFull", "formatMonth", "getApplicationElement", "id", "initiallyFocusedDate", "inputComponent", "inputProps", "markOutsideDays", "markToday", "maxDate", "minDate", "nextMonthLabel", "onMonthChange", "previousMonthLabel", "renderTarget", "selectionConfiguration", "title", "valid", "weekStartsOn"];
17
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
18
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
19
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
20
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
22
21
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
23
22
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -40,13 +39,14 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
40
39
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
41
40
  * See the License for the specific language governing permissions and
42
41
  * limitations under the License.
43
- */
42
+ */ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
44
43
  const getClassName = (0, _bpkReactUtils.cssModules)(_BpkDatepickerModule.default);
45
44
  const Input = (0, _bpkComponentInput.withOpenEvents)(_bpkComponentInput.default);
46
45
  const DefaultCalendar = (0, _bpkComponentCalendar.withCalendarState)((0, _bpkComponentCalendar.composeCalendar)(_bpkComponentCalendar.BpkCalendarNav, _bpkComponentCalendar.BpkCalendarGridHeader, _bpkComponentCalendar.BpkCalendarGrid, _bpkComponentCalendar.BpkCalendarDate));
47
46
  class BpkDatepicker extends _react.Component {
48
47
  constructor(props) {
49
48
  super(props);
49
+ _defineProperty(this, "inputRef", void 0);
50
50
  _defineProperty(this, "onOpen", () => {
51
51
  this.setState({
52
52
  isOpen: true
@@ -115,13 +115,13 @@ class BpkDatepicker extends _react.Component {
115
115
  // When the calendar is a single date we always want to close it when a date is selected
116
116
  // or if its a range calendar we only want to close the calendar when a range is selected.
117
117
  // If a custom onClose function is provided then we don't want to run the internal version.
118
- if ((selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single || selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range && endDate) && !onClose) {
118
+ if (selectionConfiguration && (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single || selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range && endDate) && !onClose) {
119
119
  this.onClose();
120
120
  }
121
121
  if (onDateSelect) {
122
122
  const newStartDate = _bpkComponentCalendar.DateUtils.dateToBoundaries(startDate, _bpkComponentCalendar.DateUtils.startOfDay(minDate), _bpkComponentCalendar.DateUtils.startOfDay(maxDate));
123
123
  const newEndDate = _bpkComponentCalendar.DateUtils.dateToBoundaries(endDate, _bpkComponentCalendar.DateUtils.startOfDay(minDate), _bpkComponentCalendar.DateUtils.startOfDay(maxDate));
124
- if (selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && (_bpkComponentCalendar.DateUtils.isAfter(newEndDate, selectionConfiguration.startDate) || _bpkComponentCalendar.DateUtils.isSameDay(newEndDate, selectionConfiguration.startDate))) {
124
+ if (selectionConfiguration && selectionConfiguration.type === _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && (_bpkComponentCalendar.DateUtils.isAfter(newEndDate, selectionConfiguration.startDate) || _bpkComponentCalendar.DateUtils.isSameDay(newEndDate, selectionConfiguration.startDate))) {
125
125
  onDateSelect(selectionConfiguration.startDate, newEndDate);
126
126
  } else {
127
127
  onDateSelect(newStartDate);
@@ -249,50 +249,13 @@ class BpkDatepicker extends _react.Component {
249
249
  });
250
250
  }
251
251
  }
252
- BpkDatepicker.propTypes = {
253
- // Required
254
- changeMonthLabel: _propTypes.default.string.isRequired,
255
- closeButtonText: _propTypes.default.string.isRequired,
256
- daysOfWeek: _bpkComponentCalendar.CustomPropTypes.DaysOfWeek.isRequired,
257
- formatDate: _propTypes.default.func.isRequired,
258
- formatDateFull: _propTypes.default.func.isRequired,
259
- formatMonth: _propTypes.default.func.isRequired,
260
- id: _propTypes.default.string.isRequired,
261
- title: _propTypes.default.string.isRequired,
262
- getApplicationElement: _propTypes.default.func.isRequired,
263
- nextMonthLabel: _propTypes.default.string.isRequired,
264
- previousMonthLabel: _propTypes.default.string.isRequired,
265
- weekStartsOn: _propTypes.default.number.isRequired,
266
- // Optional
267
- calendarComponent: _propTypes.default.elementType,
268
- inputComponent: _propTypes.default.elementType,
269
- dateModifiers: _bpkComponentCalendar.CustomPropTypes.DateModifiers,
270
- fixedWidth: _propTypes.default.bool,
271
- inputProps: _propTypes.default.object,
272
- // eslint-disable-line react/forbid-prop-types
273
- markOutsideDays: _propTypes.default.bool,
274
- markToday: _propTypes.default.bool,
275
- maxDate: _propTypes.default.instanceOf(Date),
276
- minDate: _propTypes.default.instanceOf(Date),
277
- onDateSelect: _propTypes.default.func,
278
- onOpenChange: _propTypes.default.func,
279
- onMonthChange: _propTypes.default.func,
280
- selectionConfiguration: _bpkComponentCalendar.CustomPropTypes.SelectionConfiguration,
281
- initiallyFocusedDate: _propTypes.default.instanceOf(Date),
282
- renderTarget: _propTypes.default.func,
283
- isOpen: _propTypes.default.bool,
284
- valid: _propTypes.default.bool,
285
- // Disabling this as if we set a default property for this value it causes the internal onClose function to stop working for default setup
286
- // eslint-disable-next-line react/require-default-props
287
- onClose: _propTypes.default.func
288
- };
289
- BpkDatepicker.defaultProps = {
252
+ _defineProperty(BpkDatepicker, "defaultProps", {
290
253
  calendarComponent: DefaultCalendar,
291
254
  inputComponent: null,
292
- dateModifiers: DefaultCalendar.defaultProps.dateModifiers,
255
+ dateModifiers: {},
293
256
  inputProps: {},
294
257
  fixedWidth: true,
295
- markOutsideDays: DefaultCalendar.defaultProps.markOutsideDays,
258
+ markOutsideDays: true,
296
259
  markToday: DefaultCalendar.defaultProps.markToday,
297
260
  maxDate: DefaultCalendar.defaultProps.maxDate,
298
261
  minDate: DefaultCalendar.defaultProps.minDate,
@@ -309,6 +272,6 @@ BpkDatepicker.defaultProps = {
309
272
  renderTarget: null,
310
273
  isOpen: false,
311
274
  valid: null
312
- };
275
+ });
313
276
  var _default = BpkDatepicker;
314
277
  exports.default = _default;
package/bpk-component-datepicker/src/themeAttributes.js CHANGED
@@ -24,5 +24,6 @@ var _bpkComponentPopover = require("../../bpk-component-popover");
24
24
  * See the License for the specific language governing permissions and
25
25
  * limitations under the License.
26
26
  */
27
+ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
27
28
  var _default = [..._bpkComponentCalendar.themeAttributes, ..._bpkComponentPopover.themeAttributes, ..._bpkComponentModal.themeAttributes].filter((attribute, index, attributes) => attributes.indexOf(attribute) === index);
28
29
  exports.default = _default;
package/bpk-component-input/index.d.ts CHANGED
@@ -18,22 +18,8 @@
18
18
 
19
19
  import BpkInput from './src/BpkInput';
20
20
  import withOpenEvents from './src/withOpenEvents';
21
- import {
22
- propTypes,
23
- defaultProps,
24
- CLEAR_BUTTON_MODES,
25
- INPUT_TYPES,
26
- type Props,
27
- } from './src/common-types';
21
+ import { propTypes, defaultProps, CLEAR_BUTTON_MODES, INPUT_TYPES, type Props } from './src/common-types';
28
22
  import themeAttributes from './src/themeAttributes';
29
-
30
23
  export default BpkInput;
31
24
  export type BpkInputProps = Props;
32
- export {
33
- propTypes,
34
- defaultProps,
35
- withOpenEvents,
36
- INPUT_TYPES,
37
- CLEAR_BUTTON_MODES,
38
- themeAttributes,
39
- };
25
+ export { propTypes, defaultProps, withOpenEvents, INPUT_TYPES, CLEAR_BUTTON_MODES, themeAttributes, };
package/bpk-component-input/src/BpkClearButton.d.ts CHANGED
@@ -16,13 +16,9 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- type Props = {
20
- label: string;
21
- };
22
- declare const BpkClearButton: ({
23
- className,
24
- label,
25
- onClick,
26
- ...rest
27
- }: Props) => JSX.Element;
19
+ import type { ComponentProps } from 'react';
20
+ interface Props extends ComponentProps<'button'> {
21
+ label: string;
22
+ }
23
+ declare const BpkClearButton: ({ className, label, onClick, ...rest }: Props) => JSX.Element;
28
24
  export default BpkClearButton;
package/bpk-component-input/src/BpkInput.d.ts CHANGED
@@ -17,30 +17,25 @@
17
17
  */
18
18
 
19
19
  import { Component } from 'react';
20
-
21
20
  import type { Props } from './common-types';
22
-
23
21
  type State = {
24
- persistClearButton: boolean;
22
+ persistClearButton: boolean;
25
23
  };
26
24
  declare class BpkInput extends Component<Props, State> {
27
- static defaultProps: {
28
- type: 'text';
29
- className: null;
30
- valid: null;
31
- large: boolean;
32
- docked: boolean;
33
- dockedFirst: boolean;
34
- dockedMiddle: boolean;
35
- dockedLast: boolean;
36
- inputRef: null;
37
- clearButtonMode: 'never';
38
- clearButtonLabel: null;
39
- onClear: null;
40
- };
41
-
42
- constructor(props: Props);
43
-
44
- render(): JSX.Element;
25
+ static defaultProps: {
26
+ type: "text";
27
+ valid: null;
28
+ large: boolean;
29
+ docked: boolean;
30
+ dockedFirst: boolean;
31
+ dockedMiddle: boolean;
32
+ dockedLast: boolean;
33
+ inputRef: null;
34
+ clearButtonMode: "never";
35
+ clearButtonLabel: null;
36
+ onClear: null;
37
+ };
38
+ constructor(props: Props);
39
+ render(): JSX.Element;
45
40
  }
46
41
  export default BpkInput;
package/bpk-component-input/src/common-types.d.ts CHANGED
@@ -16,8 +16,8 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import type PropTypes from 'prop-types';
20
- import type { SyntheticEvent } from 'react';
19
+ import PropTypes from 'prop-types';
20
+ import type { ComponentProps, SyntheticEvent } from 'react';
21
21
  export declare const CLEAR_BUTTON_MODES: {
22
22
  readonly never: "never";
23
23
  readonly whileEditing: "whileEditing";
@@ -30,12 +30,11 @@ export declare const INPUT_TYPES: {
30
30
  readonly password: "password";
31
31
  readonly tel: "tel";
32
32
  };
33
- type BaseProps = {
33
+ type BaseProps = ComponentProps<'input'> & {
34
34
  id: string;
35
35
  name: string;
36
36
  value: string;
37
37
  type?: typeof INPUT_TYPES[keyof typeof INPUT_TYPES];
38
- className?: string | null;
39
38
  valid?: boolean | null;
40
39
  large?: boolean;
41
40
  docked?: boolean;
@@ -43,7 +42,6 @@ type BaseProps = {
43
42
  dockedMiddle?: boolean;
44
43
  dockedLast?: boolean;
45
44
  inputRef?: ((ref: HTMLInputElement) => void) | null;
46
- [rest: string]: any;
47
45
  };
48
46
  export type PropsWithoutClearButonMode = BaseProps & {
49
47
  clearButtonMode?: 'never';
@@ -76,7 +74,6 @@ export declare const propTypes: {
76
74
  };
77
75
  export declare const defaultProps: {
78
76
  type: "text";
79
- className: null;
80
77
  valid: null;
81
78
  large: boolean;
82
79
  docked: boolean;
package/bpk-component-input/src/common-types.js CHANGED
@@ -78,7 +78,6 @@ const propTypes = {
78
78
  exports.propTypes = propTypes;
79
79
  const defaultProps = {
80
80
  type: INPUT_TYPES.text,
81
- className: null,
82
81
  valid: null,
83
82
  large: false,
84
83
  docked: false,
package/bpk-component-input/src/withOpenEvents.d.ts CHANGED
@@ -16,106 +16,65 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import type { ComponentType, ReactElement, UIEvent } from 'react';
20
-
19
+ import type { ComponentType, ReactElement, UIEvent, ComponentProps } from 'react';
21
20
  type WithOpenEventsProps = {
22
- isOpen?: boolean;
23
- onOpen?: () => void;
24
- hasTouchSupport?: boolean;
21
+ isOpen?: boolean;
22
+ onOpen?: () => void;
23
+ hasTouchSupport?: boolean;
25
24
  };
26
- type InputProps = {
27
- className?: string | null;
28
- onClick?: (event: UIEvent) => void;
29
- onFocus?: (event: UIEvent) => void;
30
- onBlur?: (event: UIEvent) => void;
31
- onTouchEnd?: (event: UIEvent) => void;
32
- onKeyDown?: (event: UIEvent) => void;
33
- onKeyUp?: (event: UIEvent) => void;
25
+ type EventHandlers = {
26
+ onClick?: (event: UIEvent) => void;
27
+ onFocus?: (event: UIEvent) => void;
28
+ onBlur?: (event: UIEvent) => void;
29
+ onTouchEnd?: (event: UIEvent) => void;
30
+ onKeyDown?: (event: UIEvent) => void;
31
+ onKeyUp?: (event: UIEvent) => void;
32
+ readOnly?: string;
33
+ 'aria-readonly'?: boolean;
34
34
  };
35
- declare const withOpenEvents: <P extends InputProps>(
36
- InputComponent: ComponentType<P>,
37
- ) => {
38
- new (props: P & WithOpenEventsProps): {
39
- focusCanOpen: boolean;
40
- handleTouchEnd: (event: UIEvent) => void;
41
- handleFocus: () => void;
42
- handleBlur: () => void;
43
- render(): ReactElement;
44
- context: any;
45
- setState<K extends never>(
46
- state:
47
- | {}
48
- | ((
49
- prevState: Readonly<{}>,
50
- props: Readonly<P & WithOpenEventsProps>, // eslint-disable-line no-shadow
51
- ) => {} | Pick<{}, K> | null)
52
- | Pick<{}, K>
53
- | null,
54
- callback?: (() => void) | undefined,
55
- ): void;
56
- forceUpdate(callback?: (() => void) | undefined): void;
57
- readonly props: Readonly<P & WithOpenEventsProps> &
58
- Readonly<{
59
- children?: import('react').ReactNode;
60
- }>;
61
- state: Readonly<{}>;
62
- refs: {
63
- [key: string]: import('react').ReactInstance;
35
+ type InputProps = ComponentProps<'input'> & Omit<EventHandlers, 'readOnly' | 'aria-readonly'>;
36
+ declare const withOpenEvents: <P extends object>(InputComponent: ComponentType<P>) => {
37
+ new (props: P & WithOpenEventsProps & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly">): {
38
+ focusCanOpen: boolean;
39
+ handleTouchEnd: (event: UIEvent) => void;
40
+ handleFocus: () => void;
41
+ handleBlur: () => void;
42
+ render(): ReactElement;
43
+ context: any;
44
+ setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
45
+ forceUpdate(callback?: (() => void) | undefined): void;
46
+ readonly props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps> & Readonly<{
47
+ children?: import("react").ReactNode;
48
+ }>;
49
+ state: Readonly<{}>;
50
+ refs: {
51
+ [key: string]: import("react").ReactInstance;
52
+ };
53
+ componentDidMount?(): void;
54
+ shouldComponentUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): boolean;
55
+ componentWillUnmount?(): void;
56
+ componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
57
+ getSnapshotBeforeUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>): any;
58
+ componentDidUpdate?(prevProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, prevState: Readonly<{}>, snapshot?: any): void;
59
+ componentWillMount?(): void;
60
+ UNSAFE_componentWillMount?(): void;
61
+ componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
62
+ UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextContext: any): void;
63
+ componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
64
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "aria-readonly" | "readOnly"> & WithOpenEventsProps>, nextState: Readonly<{}>, nextContext: any): void;
65
+ };
66
+ displayName: string;
67
+ defaultProps: {
68
+ isOpen: boolean;
69
+ hasTouchSupport: boolean;
70
+ onOpen: null;
71
+ onClick: null;
72
+ onFocus: null;
73
+ onBlur: null;
74
+ onTouchEnd: null;
75
+ onKeyDown: null;
76
+ onKeyUp: null;
64
77
  };
65
- componentDidMount?(): void;
66
- shouldComponentUpdate?(
67
- nextProps: Readonly<P & WithOpenEventsProps>,
68
- nextState: Readonly<{}>,
69
- nextContext: any,
70
- ): boolean;
71
- componentWillUnmount?(): void;
72
- componentDidCatch?(
73
- error: Error,
74
- errorInfo: import('react').ErrorInfo,
75
- ): void;
76
- getSnapshotBeforeUpdate?(
77
- prevProps: Readonly<P & WithOpenEventsProps>,
78
- prevState: Readonly<{}>,
79
- ): any;
80
- componentDidUpdate?(
81
- prevProps: Readonly<P & WithOpenEventsProps>,
82
- prevState: Readonly<{}>,
83
- snapshot?: any,
84
- ): void;
85
- componentWillMount?(): void;
86
- UNSAFE_componentWillMount?(): void;
87
- componentWillReceiveProps?(
88
- nextProps: Readonly<P & WithOpenEventsProps>,
89
- nextContext: any,
90
- ): void;
91
- UNSAFE_componentWillReceiveProps?(
92
- nextProps: Readonly<P & WithOpenEventsProps>,
93
- nextContext: any,
94
- ): void;
95
- componentWillUpdate?(
96
- nextProps: Readonly<P & WithOpenEventsProps>,
97
- nextState: Readonly<{}>,
98
- nextContext: any,
99
- ): void;
100
- UNSAFE_componentWillUpdate?(
101
- nextProps: Readonly<P & WithOpenEventsProps>,
102
- nextState: Readonly<{}>,
103
- nextContext: any,
104
- ): void;
105
- };
106
- displayName: string;
107
- defaultProps: {
108
- isOpen: boolean;
109
- hasTouchSupport: boolean;
110
- onOpen: null;
111
- className: null;
112
- onClick: null;
113
- onFocus: null;
114
- onBlur: null;
115
- onTouchEnd: null;
116
- onKeyDown: null;
117
- onKeyUp: null;
118
- };
119
- contextType?: import('react').Context<any> | undefined;
78
+ contextType?: import("react").Context<any> | undefined;
120
79
  };
121
80
  export default withOpenEvents;
package/bpk-component-input/src/withOpenEvents.js CHANGED
@@ -135,7 +135,6 @@ const withOpenEvents = InputComponent => {
135
135
  hasTouchSupport: !!(typeof window !== 'undefined' && 'ontouchstart' in window),
136
136
  onOpen: null,
137
137
  // Input props
138
- className: null,
139
138
  onClick: null,
140
139
  onFocus: null,
141
140
  onBlur: null,
package/bpk-scrim-utils/src/withScrim.js CHANGED
@@ -73,9 +73,14 @@ const withScrim = WrappedComponent => {
73
73
  */
74
74
  if (isIphone || isIpad) {
75
75
  (0, _scrollUtils.storeScroll)();
76
- (0, _scrollUtils.lockScroll)();
77
76
  (0, _scrollUtils.fixBody)();
78
77
  }
78
+ /**
79
+ * lockScroll and the associated unlockScroll is how we control the scroll behaviour of the application when the scrim is active.
80
+ * The desired behaviour is to prevent the user from scrolling content behind the scrim. The above iOS fixes are in place because lockScroll alone does not solve due to iOS specific issues.
81
+ */
82
+
83
+ (0, _scrollUtils.lockScroll)();
79
84
  if (applicationElement) {
80
85
  applicationElement.setAttribute('aria-hidden', 'true');
81
86
  }
@@ -93,9 +98,9 @@ const withScrim = WrappedComponent => {
93
98
  const applicationElement = getApplicationElement();
94
99
  if (isIphone || isIpad) {
95
100
  setTimeout(_scrollUtils.restoreScroll, 0);
96
- (0, _scrollUtils.unlockScroll)();
97
101
  (0, _scrollUtils.unfixBody)();
98
102
  }
103
+ (0, _scrollUtils.unlockScroll)();
99
104
  if (applicationElement) {
100
105
  applicationElement.removeAttribute('aria-hidden');
101
106
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "25.2.0",
3
+ "version": "25.3.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",