@skyscanner/backpack-web 29.0.1 → 29.1.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 (12) hide show
  1. package/bpk-component-button/index.d.ts +24 -0
  2. package/bpk-component-button/src/BpkButtonV2/common-types.d.ts +1 -1
  3. package/bpk-component-datatable/src/BpkDataTable.js +7 -7
  4. package/bpk-component-datatable/src/utils.js +13 -4
  5. package/bpk-component-datepicker/src/BpkDatepicker.d.ts +422 -231
  6. package/bpk-component-dialog/src/BpkDialog.js +5 -1
  7. package/bpk-component-dialog/src/common-types.d.ts +19 -1
  8. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js +3 -4
  9. package/bpk-component-nudger/src/BpkConfigurableNudger.js +0 -1
  10. package/bpk-component-nudger/src/common-types.d.ts +2 -1
  11. package/bpk-react-utils/src/deviceDetection.js +14 -1
  12. package/package.json +1 -1
package/bpk-component-button/index.d.ts ADDED
@@ -0,0 +1,24 @@
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 BpkButtonV2 from './src/BpkButtonV2/BpkButton';
20
+ export { BUTTON_TYPES, SIZE_TYPES } from './src/BpkButtonV2/common-types';
21
+
22
+ export {
23
+ BpkButtonV2,
24
+ };
package/bpk-component-button/src/BpkButtonV2/common-types.d.ts CHANGED
@@ -42,7 +42,7 @@ export type Props = {
42
42
  className?: string | null;
43
43
  disabled?: boolean;
44
44
  iconOnly?: boolean;
45
- onClick?: (event: MouseEvent) => void;
45
+ onClick?: (event: MouseEvent<any>) => void;
46
46
  rel?: string | undefined;
47
47
  submit?: boolean;
48
48
  href?: string | null;
package/bpk-component-datatable/src/BpkDataTable.js CHANGED
@@ -21,7 +21,7 @@ import { cssModules } from "../../bpk-react-utils";
21
21
  import STYLES from "./BpkDataTable.module.css";
22
22
  import { SORT_DIRECTION_TYPES } from "./sort-types";
23
23
  import BpkDataTableHeader from "./BpkDataTableHeader";
24
- import { getColumns } from "./utils";
24
+ import { pxToRem, getColumns } from "./utils";
25
25
  import { jsx as _jsx } from "react/jsx-runtime";
26
26
  import { jsxs as _jsxs } from "react/jsx-runtime";
27
27
  const getClassName = cssModules(STYLES);
@@ -93,8 +93,8 @@ const BpkDataTable = props => {
93
93
  return /*#__PURE__*/_jsxs("div", {
94
94
  ...getTableProps({
95
95
  style: {
96
- width,
97
- height
96
+ width: pxToRem(width),
97
+ height: pxToRem(height)
98
98
  },
99
99
  className: classNames
100
100
  }),
@@ -103,7 +103,7 @@ const BpkDataTable = props => {
103
103
  children: headerGroups.map(headerGroup => /*#__PURE__*/_jsx("div", {
104
104
  ...headerGroup.getHeaderGroupProps({
105
105
  style: {
106
- height: headerHeight
106
+ height: pxToRem(headerHeight)
107
107
  },
108
108
  className: headerClassNames
109
109
  }),
@@ -133,7 +133,7 @@ const BpkDataTable = props => {
133
133
  ...row.getRowProps({
134
134
  style: {
135
135
  ...rowStyle,
136
- height: rowHeight
136
+ height: pxToRem(rowHeight)
137
137
  },
138
138
  className: getRowClassNames(rowClassName, i)
139
139
  }),
@@ -173,8 +173,8 @@ BpkDataTable.propTypes = {
173
173
  };
174
174
  BpkDataTable.defaultProps = {
175
175
  width: null,
176
- headerHeight: 60,
177
- rowHeight: 60,
176
+ headerHeight: '3.75rem',
177
+ rowHeight: '3.75rem',
178
178
  className: null,
179
179
  defaultColumnSortIndex: 0,
180
180
  sort: null,
package/bpk-component-datatable/src/utils.js CHANGED
@@ -14,10 +14,19 @@
14
14
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
- */ // TODO: Remove these functions once we want to change the API to match the react-table library API
17
+ */const ROOT_FONT_SIZE_PX = 16;
18
+ export const pxToRem = value => {
19
+ let parsed = value;
20
+ if (typeof value === 'number' || typeof value === 'string' && value.includes('px')) {
21
+ console.warn("Height in px is deprecated. Please pass the equivalent value in rem.");
22
+ parsed = `${value / ROOT_FONT_SIZE_PX}rem`;
23
+ }
24
+ return parsed;
25
+ };
26
+ // TODO: Remove this function once we want to change the API to match the react-table library API
18
27
  // To maintain backwards compatibility with the old API of BpkDataTable which takes columns as children
19
28
  // The `react-table` library however expects columns as an array of objects
20
- // eslint-disable-next-line import/prefer-default-export
29
+
21
30
  export const getColumns = columns => columns.map(column => {
22
31
  const {
23
32
  cellDataGetter,
@@ -96,8 +105,8 @@ export const getColumns = columns => columns.map(column => {
96
105
  headerClassName,
97
106
  headerStyle,
98
107
  label,
99
- minWidth,
108
+ minWidth: pxToRem(minWidth),
100
109
  style,
101
- width
110
+ width: pxToRem(width)
102
111
  };
103
112
  });
package/bpk-component-datepicker/src/BpkDatepicker.d.ts CHANGED
@@ -17,6 +17,7 @@
17
17
  */
18
18
 
19
19
  import { Component } from 'react';
20
+ import type { ReactElement } from 'react';
20
21
  import type { DaysOfWeek, ReactComponent, SelectionConfiguration } from '../../bpk-component-calendar';
21
22
  type Props = {
22
23
  changeMonthLabel: string;
@@ -32,7 +33,7 @@ type Props = {
32
33
  previousMonthLabel: string;
33
34
  weekStartsOn: number;
34
35
  calendarComponent: ReactComponent;
35
- inputComponent: ReactComponent;
36
+ inputComponent: ReactElement | null;
36
37
  dateModifiers?: {};
37
38
  fixedWidth?: boolean;
38
39
  inputProps?: {};
@@ -60,75 +61,113 @@ declare class BpkDatepicker extends Component<Props, State> {
60
61
  inputRef: React.RefObject<HTMLInputElement>;
61
62
  static defaultProps: {
62
63
  calendarComponent: {
63
- new (props: {
64
- className?: string | null | undefined;
65
- id: string;
64
+ new (props: Omit<{
66
65
  changeMonthLabel?: string | null | undefined;
66
+ daysOfWeek: DaysOfWeek;
67
+ formatDateFull: (date: Date) => string | Date;
67
68
  formatMonth: (date: Date) => string | Date;
69
+ id: string;
68
70
  maxDate: Date;
69
71
  minDate: Date;
72
+ month: Date;
70
73
  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
74
  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
75
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
85
- dateProps?: {} | null | undefined;
76
+ className?: string | null | undefined;
77
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
78
+ fixedWidth?: boolean | undefined;
86
79
  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;
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;
91
90
  gridClassName?: string | null | undefined;
92
- gridProps?: {} | null | undefined;
93
- headerProps?: {} | null | undefined;
91
+ weekDayKey?: string | undefined;
94
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;
95
100
  onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
96
- initiallyFocusedDate: Date | null;
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 {
110
+ onDateClick: ((date: Date) => void) | null;
111
+ onDateKeyDown: ((event: KeyboardEvent) => void) | null;
112
+ month: Date;
113
+ minDate: Date;
114
+ maxDate: Date;
115
+ }> & {
116
+ [rest: string]: any;
97
117
  }): {
98
- UNSAFE_componentWillReceiveProps(nextProps: {
99
- className?: string | null | undefined;
100
- id: string;
118
+ UNSAFE_componentWillReceiveProps(nextProps: Omit<{
101
119
  changeMonthLabel?: string | null | undefined;
120
+ daysOfWeek: DaysOfWeek;
121
+ formatDateFull: (date: Date) => string | Date;
102
122
  formatMonth: (date: Date) => string | Date;
123
+ id: string;
103
124
  maxDate: Date;
104
125
  minDate: Date;
126
+ month: Date;
105
127
  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
128
  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
129
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
120
- dateProps?: {} | null | undefined;
130
+ className?: string | null | undefined;
131
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
132
+ fixedWidth?: boolean | undefined;
121
133
  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;
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;
126
144
  gridClassName?: string | null | undefined;
127
- gridProps?: {} | null | undefined;
128
- headerProps?: {} | null | undefined;
145
+ weekDayKey?: string | undefined;
129
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;
130
154
  onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
131
- initiallyFocusedDate: Date | null;
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 {
164
+ onDateClick: ((date: Date) => void) | null;
165
+ onDateKeyDown: ((event: KeyboardEvent) => void) | null;
166
+ month: Date;
167
+ minDate: Date;
168
+ maxDate: Date;
169
+ }> & {
170
+ [rest: string]: any;
132
171
  }): void;
133
172
  handleDateFocus: (event: UIEvent, { date, source }: {
134
173
  date: Date;
@@ -151,40 +190,59 @@ declare class BpkDatepicker extends Component<Props, State> {
151
190
  } | ((prevState: Readonly<{
152
191
  preventKeyboardFocus: boolean;
153
192
  focusedDate: Date;
154
- }>, props: Readonly<{
155
- className?: string | null | undefined;
156
- id: string;
193
+ }>, props: Readonly<Omit<{
157
194
  changeMonthLabel?: string | null | undefined;
195
+ daysOfWeek: DaysOfWeek;
196
+ formatDateFull: (date: Date) => string | Date;
158
197
  formatMonth: (date: Date) => string | Date;
198
+ id: string;
159
199
  maxDate: Date;
160
200
  minDate: Date;
201
+ month: Date;
161
202
  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
203
  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
204
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
176
- dateProps?: {} | null | undefined;
205
+ className?: string | null | undefined;
206
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
207
+ fixedWidth?: boolean | undefined;
177
208
  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;
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;
182
219
  gridClassName?: string | null | undefined;
183
- gridProps?: {} | null | undefined;
184
- headerProps?: {} | null | undefined;
220
+ weekDayKey?: string | undefined;
185
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;
186
229
  onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
187
- initiallyFocusedDate: Date | null;
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 {
239
+ onDateClick: ((date: Date) => void) | null;
240
+ onDateKeyDown: ((event: KeyboardEvent) => void) | null;
241
+ month: Date;
242
+ minDate: Date;
243
+ maxDate: Date;
244
+ }> & {
245
+ [rest: string]: any;
188
246
  }>) => {
189
247
  preventKeyboardFocus: boolean;
190
248
  focusedDate: Date;
@@ -196,40 +254,59 @@ declare class BpkDatepicker extends Component<Props, State> {
196
254
  focusedDate: Date;
197
255
  }, K> | null, callback?: (() => void) | undefined): void;
198
256
  forceUpdate(callback?: (() => void) | undefined): void;
199
- readonly props: Readonly<{
200
- className?: string | null | undefined;
201
- id: string;
257
+ readonly props: Readonly<Omit<{
202
258
  changeMonthLabel?: string | null | undefined;
259
+ daysOfWeek: DaysOfWeek;
260
+ formatDateFull: (date: Date) => string | Date;
203
261
  formatMonth: (date: Date) => string | Date;
262
+ id: string;
204
263
  maxDate: Date;
205
264
  minDate: Date;
265
+ month: Date;
206
266
  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
267
  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
268
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
221
- dateProps?: {} | null | undefined;
269
+ className?: string | null | undefined;
270
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
271
+ fixedWidth?: boolean | undefined;
222
272
  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;
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;
227
283
  gridClassName?: string | null | undefined;
228
- gridProps?: {} | null | undefined;
229
- headerProps?: {} | null | undefined;
284
+ weekDayKey?: string | undefined;
230
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;
231
293
  onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
232
- initiallyFocusedDate: Date | null;
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 {
303
+ onDateClick: ((date: Date) => void) | null;
304
+ onDateKeyDown: ((event: KeyboardEvent) => void) | null;
305
+ month: Date;
306
+ minDate: Date;
307
+ maxDate: Date;
308
+ }> & {
309
+ [rest: string]: any;
233
310
  }> & Readonly<{
234
311
  children?: import("react").ReactNode;
235
312
  }>;
@@ -241,231 +318,345 @@ declare class BpkDatepicker extends Component<Props, State> {
241
318
  [key: string]: import("react").ReactInstance;
242
319
  };
243
320
  componentDidMount?(): void;
244
- shouldComponentUpdate?(nextProps: Readonly<{
245
- className?: string | null | undefined;
246
- id: string;
321
+ shouldComponentUpdate?(nextProps: Readonly<Omit<{
247
322
  changeMonthLabel?: string | null | undefined;
323
+ daysOfWeek: DaysOfWeek;
324
+ formatDateFull: (date: Date) => string | Date;
248
325
  formatMonth: (date: Date) => string | Date;
326
+ id: string;
249
327
  maxDate: Date;
250
328
  minDate: Date;
329
+ month: Date;
251
330
  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
331
  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
332
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
266
- dateProps?: {} | null | undefined;
333
+ className?: string | null | undefined;
334
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
335
+ fixedWidth?: boolean | undefined;
267
336
  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;
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;
272
347
  gridClassName?: string | null | undefined;
273
- gridProps?: {} | null | undefined;
274
- headerProps?: {} | null | undefined;
348
+ weekDayKey?: string | undefined;
275
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;
276
357
  onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
277
- initiallyFocusedDate: Date | null;
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 {
367
+ onDateClick: ((date: Date) => void) | null;
368
+ onDateKeyDown: ((event: KeyboardEvent) => void) | null;
369
+ month: Date;
370
+ minDate: Date;
371
+ maxDate: Date;
372
+ }> & {
373
+ [rest: string]: any;
278
374
  }>, nextState: Readonly<{
279
375
  preventKeyboardFocus: boolean;
280
376
  focusedDate: Date;
281
377
  }>, nextContext: any): boolean;
282
378
  componentWillUnmount?(): void;
283
379
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
284
- getSnapshotBeforeUpdate?(prevProps: Readonly<{
285
- className?: string | null | undefined;
286
- id: string;
380
+ getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<{
287
381
  changeMonthLabel?: string | null | undefined;
382
+ daysOfWeek: DaysOfWeek;
383
+ formatDateFull: (date: Date) => string | Date;
288
384
  formatMonth: (date: Date) => string | Date;
385
+ id: string;
289
386
  maxDate: Date;
290
387
  minDate: Date;
388
+ month: Date;
291
389
  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
390
  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
391
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
306
- dateProps?: {} | null | undefined;
392
+ className?: string | null | undefined;
393
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
394
+ fixedWidth?: boolean | undefined;
307
395
  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;
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;
312
406
  gridClassName?: string | null | undefined;
313
- gridProps?: {} | null | undefined;
314
- headerProps?: {} | null | undefined;
407
+ weekDayKey?: string | undefined;
315
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;
316
416
  onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
317
- initiallyFocusedDate: Date | null;
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 {
426
+ onDateClick: ((date: Date) => void) | null;
427
+ onDateKeyDown: ((event: KeyboardEvent) => void) | null;
428
+ month: Date;
429
+ minDate: Date;
430
+ maxDate: Date;
431
+ }> & {
432
+ [rest: string]: any;
318
433
  }>, prevState: Readonly<{
319
434
  preventKeyboardFocus: boolean;
320
435
  focusedDate: Date;
321
436
  }>): any;
322
- componentDidUpdate?(prevProps: Readonly<{
323
- className?: string | null | undefined;
324
- id: string;
437
+ componentDidUpdate?(prevProps: Readonly<Omit<{
325
438
  changeMonthLabel?: string | null | undefined;
439
+ daysOfWeek: DaysOfWeek;
440
+ formatDateFull: (date: Date) => string | Date;
326
441
  formatMonth: (date: Date) => string | Date;
442
+ id: string;
327
443
  maxDate: Date;
328
444
  minDate: Date;
445
+ month: Date;
329
446
  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
447
  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
448
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
344
- dateProps?: {} | null | undefined;
449
+ className?: string | null | undefined;
450
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
451
+ fixedWidth?: boolean | undefined;
345
452
  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;
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;
350
463
  gridClassName?: string | null | undefined;
351
- gridProps?: {} | null | undefined;
352
- headerProps?: {} | null | undefined;
464
+ weekDayKey?: string | undefined;
353
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;
354
473
  onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
355
- initiallyFocusedDate: Date | null;
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 {
483
+ onDateClick: ((date: Date) => void) | null;
484
+ onDateKeyDown: ((event: KeyboardEvent) => void) | null;
485
+ month: Date;
486
+ minDate: Date;
487
+ maxDate: Date;
488
+ }> & {
489
+ [rest: string]: any;
356
490
  }>, prevState: Readonly<{
357
491
  preventKeyboardFocus: boolean;
358
492
  focusedDate: Date;
359
493
  }>, snapshot?: any): void;
360
494
  componentWillMount?(): void;
361
495
  UNSAFE_componentWillMount?(): void;
362
- componentWillReceiveProps?(nextProps: Readonly<{
363
- className?: string | null | undefined;
364
- id: string;
496
+ componentWillReceiveProps?(nextProps: Readonly<Omit<{
365
497
  changeMonthLabel?: string | null | undefined;
498
+ daysOfWeek: DaysOfWeek;
499
+ formatDateFull: (date: Date) => string | Date;
366
500
  formatMonth: (date: Date) => string | Date;
501
+ id: string;
367
502
  maxDate: Date;
368
503
  minDate: Date;
504
+ month: Date;
369
505
  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
506
  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
507
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
384
- dateProps?: {} | null | undefined;
508
+ className?: string | null | undefined;
509
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
510
+ fixedWidth?: boolean | undefined;
385
511
  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;
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;
390
522
  gridClassName?: string | null | undefined;
391
- gridProps?: {} | null | undefined;
392
- headerProps?: {} | null | undefined;
523
+ weekDayKey?: string | undefined;
393
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;
394
532
  onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
395
- initiallyFocusedDate: Date | null;
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 {
542
+ onDateClick: ((date: Date) => void) | null;
543
+ onDateKeyDown: ((event: KeyboardEvent) => void) | null;
544
+ month: Date;
545
+ minDate: Date;
546
+ maxDate: Date;
547
+ }> & {
548
+ [rest: string]: any;
396
549
  }>, nextContext: any): void;
397
- componentWillUpdate?(nextProps: Readonly<{
398
- className?: string | null | undefined;
399
- id: string;
550
+ componentWillUpdate?(nextProps: Readonly<Omit<{
400
551
  changeMonthLabel?: string | null | undefined;
552
+ daysOfWeek: DaysOfWeek;
553
+ formatDateFull: (date: Date) => string | Date;
401
554
  formatMonth: (date: Date) => string | Date;
555
+ id: string;
402
556
  maxDate: Date;
403
557
  minDate: Date;
558
+ month: Date;
404
559
  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
560
  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
561
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
419
- dateProps?: {} | null | undefined;
562
+ className?: string | null | undefined;
563
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
564
+ fixedWidth?: boolean | undefined;
420
565
  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;
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;
425
576
  gridClassName?: string | null | undefined;
426
- gridProps?: {} | null | undefined;
427
- headerProps?: {} | null | undefined;
577
+ weekDayKey?: string | undefined;
428
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;
429
586
  onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
430
- initiallyFocusedDate: Date | null;
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 {
596
+ onDateClick: ((date: Date) => void) | null;
597
+ onDateKeyDown: ((event: KeyboardEvent) => void) | null;
598
+ month: Date;
599
+ minDate: Date;
600
+ maxDate: Date;
601
+ }> & {
602
+ [rest: string]: any;
431
603
  }>, nextState: Readonly<{
432
604
  preventKeyboardFocus: boolean;
433
605
  focusedDate: Date;
434
606
  }>, nextContext: any): void;
435
- UNSAFE_componentWillUpdate?(nextProps: Readonly<{
436
- className?: string | null | undefined;
437
- id: string;
607
+ UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<{
438
608
  changeMonthLabel?: string | null | undefined;
609
+ daysOfWeek: DaysOfWeek;
610
+ formatDateFull: (date: Date) => string | Date;
439
611
  formatMonth: (date: Date) => string | Date;
612
+ id: string;
440
613
  maxDate: Date;
441
614
  minDate: Date;
615
+ month: Date;
442
616
  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
617
  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
618
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
457
- dateProps?: {} | null | undefined;
619
+ className?: string | null | undefined;
620
+ dateModifiers?: import("../../bpk-component-calendar/src/custom-proptypes").DateModifiers | undefined;
621
+ fixedWidth?: boolean | undefined;
458
622
  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;
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;
463
633
  gridClassName?: string | null | undefined;
464
- gridProps?: {} | null | undefined;
465
- headerProps?: {} | null | undefined;
634
+ weekDayKey?: string | undefined;
466
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;
467
643
  onDateSelect?: ((date: Date, newDate?: Date | undefined) => void) | null | undefined;
468
- initiallyFocusedDate: Date | null;
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 {
653
+ onDateClick: ((date: Date) => void) | null;
654
+ onDateKeyDown: ((event: KeyboardEvent) => void) | null;
655
+ month: Date;
656
+ minDate: Date;
657
+ maxDate: Date;
658
+ }> & {
659
+ [rest: string]: any;
469
660
  }>, nextState: Readonly<{
470
661
  preventKeyboardFocus: boolean;
471
662
  focusedDate: Date;
package/bpk-component-dialog/src/BpkDialog.js CHANGED
@@ -32,12 +32,16 @@ const BpkDialog = ({
32
32
  headerIcon = null,
33
33
  headerIconType = HEADER_ICON_TYPES.primary,
34
34
  isOpen,
35
- onClose = () => {},
35
+ onClose,
36
36
  renderTarget = () => null,
37
37
  ...rest
38
38
  }) => {
39
39
  const headerIconClassNames = getClassName('bpk-dialog__icon', `bpk-dialog__icon--${headerIconType}`);
40
40
  const closeButtonClassNames = getClassName('bpk-dialog__close-button');
41
+ if (!onClose && dismissible === true) {
42
+ // eslint-disable-next-line no-console
43
+ console.warn('BpkDialog: dismissible is true but no onClose prop was provided. Dialog will not be dismissible.');
44
+ }
41
45
  return /*#__PURE__*/_jsx(Portal, {
42
46
  isOpen: isOpen,
43
47
  onClose: onClose,
package/bpk-component-dialog/src/common-types.d.ts CHANGED
@@ -1,3 +1,21 @@
1
+ /*
2
+ * Backpack - Skyscanner's Design System
3
+ *
4
+ * Copyright 2022 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
+
1
19
  import type { ReactNode } from 'react';
2
20
  export declare const HEADER_ICON_TYPES: {
3
21
  readonly primary: "primary";
@@ -19,7 +37,7 @@ export type Props = Omit<DialogInnerProps, 'dialogRef'> & {
19
37
  dialogRef?: (ref: HTMLElement | null | undefined) => void;
20
38
  isOpen: boolean;
21
39
  renderTarget?: () => HTMLElement | null;
22
- onClose: (event?: TouchEvent | MouseEvent | KeyboardEvent) => void | null;
40
+ onClose?: (event?: TouchEvent | MouseEvent | KeyboardEvent) => void | null;
23
41
  closeLabel?: string;
24
42
  dismissible?: boolean;
25
43
  headerIcon?: ReactNode;
package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js CHANGED
@@ -18,8 +18,7 @@
18
18
 
19
19
  import { cssModules } from "../../bpk-react-utils";
20
20
  import BpkText from "../../bpk-component-text";
21
- // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
22
- import BpkButton from "../../bpk-component-button";
21
+ import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
23
22
  import STYLES from "./BpkGraphicPromo.module.css";
24
23
  import { jsx as _jsx } from "react/jsx-runtime";
25
24
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -129,8 +128,8 @@ const BpkGraphicPromo = ({
129
128
  tagName: "p",
130
129
  className: getClassName('bpk-graphic-promo__subheading'),
131
130
  children: subheading
132
- }), /*#__PURE__*/_jsx(BpkButton, {
133
- primaryOnDark: true,
131
+ }), /*#__PURE__*/_jsx(BpkButtonV2, {
132
+ type: BUTTON_TYPES.primaryOnDark,
134
133
  className: getClassName('bpk-graphic-promo__cta'),
135
134
  onClick: onClickWrapper,
136
135
  tabIndex: -1 /* button is not focusable for accessibility */,
package/bpk-component-nudger/src/BpkConfigurableNudger.js CHANGED
@@ -16,7 +16,6 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
20
19
  import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
21
20
  import { withButtonAlignment } from "../../bpk-component-icon";
22
21
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
package/bpk-component-nudger/src/common-types.d.ts CHANGED
@@ -17,6 +17,7 @@
17
17
  */
18
18
 
19
19
  import type { ReactNode } from "react";
20
+ import type { BUTTON_TYPES } from "../../bpk-component-button/src/BpkButtonV2/common-types";
20
21
  export type CommonProps = {
21
22
  id: string;
22
23
  min: string | number;
@@ -26,7 +27,7 @@ export type CommonProps = {
26
27
  className?: string | null;
27
28
  increaseButtonLabel: string;
28
29
  decreaseButtonLabel: string;
29
- buttonType?: string;
30
+ buttonType?: keyof typeof BUTTON_TYPES;
30
31
  title?: string;
31
32
  subtitle?: string;
32
33
  icon?: ReactNode;
package/bpk-react-utils/src/deviceDetection.js CHANGED
@@ -16,7 +16,20 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
+ /*
20
+ Checks if the current device is an iPhone as reported by the user agent.
21
+ */
19
22
  const isDeviceIphone = () => /iPhone/i.test(typeof window !== 'undefined' ? window.navigator.userAgent : '');
20
- const isDeviceIpad = () => /iPad/i.test(typeof window !== 'undefined' ? window.navigator.userAgent : '');
23
+
24
+ /*
25
+ Checks if the current device is an iPad as reported by the user agent for older generation iPads
26
+ or by checking the number of touch points for newer generation iPads as in newer devices the user agent
27
+ reports as a Macintosh.
28
+ */
29
+ const isDeviceIpad = () => /iPad/i.test(typeof window !== 'undefined' ? window.navigator.userAgent : '') || /Macintosh/.test(typeof window !== 'undefined' ? window.navigator.userAgent : '') && window.navigator.maxTouchPoints > 2;
30
+
31
+ /*
32
+ Checks if the current device is an iOS device.
33
+ */
21
34
  const isDeviceIos = () => isDeviceIphone() || isDeviceIpad();
22
35
  export { isDeviceIphone, isDeviceIpad, isDeviceIos };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "29.0.1",
3
+ "version": "29.1.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",