@skyscanner/backpack-web 29.0.1 → 29.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bpk-component-button/index.d.ts +24 -0
- package/bpk-component-button/src/BpkButtonV2/common-types.d.ts +1 -1
- package/bpk-component-card-button/index.js +20 -0
- package/bpk-component-card-button/src/BpkSaveButton.d.ts +45 -0
- package/bpk-component-card-button/src/BpkSaveButton.js +74 -0
- package/bpk-component-card-button/src/BpkSaveButton.module.css +18 -0
- package/bpk-component-datatable/src/BpkDataTable.js +7 -7
- package/bpk-component-datatable/src/utils.js +13 -4
- package/bpk-component-datepicker/src/BpkDatepicker.d.ts +422 -231
- package/bpk-component-dialog/src/BpkDialog.js +5 -1
- package/bpk-component-dialog/src/common-types.d.ts +19 -1
- package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js +3 -4
- package/bpk-component-nudger/src/BpkConfigurableNudger.js +0 -1
- package/bpk-component-nudger/src/common-types.d.ts +2 -1
- package/bpk-react-utils/src/deviceDetection.js +14 -1
- package/package.json +3 -3
|
@@ -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
|
+
};
|
|
@@ -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;
|
|
@@ -0,0 +1,20 @@
|
|
|
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 BpkSaveButton, { SIZE_TYPES, STYLE_TYPES } from "./src/BpkSaveButton";
|
|
20
|
+
export { BpkSaveButton, SIZE_TYPES, STYLE_TYPES };
|
|
@@ -0,0 +1,45 @@
|
|
|
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 type { ReactNode, MouseEvent } from 'react';
|
|
20
|
+
export declare const SIZE_TYPES: {
|
|
21
|
+
default: 'default';
|
|
22
|
+
small: 'small';
|
|
23
|
+
};
|
|
24
|
+
export type SizeType = (typeof SIZE_TYPES)[keyof typeof SIZE_TYPES];
|
|
25
|
+
export declare const STYLE_TYPES: {
|
|
26
|
+
default: 'default';
|
|
27
|
+
contained: 'contained';
|
|
28
|
+
onDark: 'onDark';
|
|
29
|
+
};
|
|
30
|
+
export type StyleType = (typeof STYLE_TYPES)[keyof typeof STYLE_TYPES];
|
|
31
|
+
type Props = {
|
|
32
|
+
checked: boolean;
|
|
33
|
+
accessibilityLabel: string;
|
|
34
|
+
onCheckedChange: (e: MouseEvent) => void;
|
|
35
|
+
size?: SizeType;
|
|
36
|
+
style?: StyleType;
|
|
37
|
+
};
|
|
38
|
+
declare const BpkSaveButton: ({
|
|
39
|
+
checked,
|
|
40
|
+
accessibilityLabel,
|
|
41
|
+
onCheckedChange,
|
|
42
|
+
size,
|
|
43
|
+
style,
|
|
44
|
+
}: Props) => JSX.Element;
|
|
45
|
+
export default BpkSaveButton;
|
|
@@ -0,0 +1,74 @@
|
|
|
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 { useState } from 'react';
|
|
20
|
+
import BpkButtonV2 from "../../bpk-component-button/src/BpkButtonV2/BpkButton";
|
|
21
|
+
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
22
|
+
import BpkHeartIcon from "../../bpk-component-icon/lg/heart";
|
|
23
|
+
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
24
|
+
import BpkHeartOutlineIcon from "../../bpk-component-icon/lg/heart--outline";
|
|
25
|
+
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
26
|
+
import BpkHeartIconSm from "../../bpk-component-icon/sm/heart";
|
|
27
|
+
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
28
|
+
import BpkHeartOutlineIconSm from "../../bpk-component-icon/sm/heart--outline";
|
|
29
|
+
import { withLargeButtonAlignment } from "../../bpk-component-icon";
|
|
30
|
+
import { cssModules } from "../../bpk-react-utils";
|
|
31
|
+
import STYLES from "./BpkSaveButton.module.css";
|
|
32
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
33
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
34
|
+
export const SIZE_TYPES = {
|
|
35
|
+
default: 'default',
|
|
36
|
+
small: 'small'
|
|
37
|
+
};
|
|
38
|
+
export const STYLE_TYPES = {
|
|
39
|
+
default: 'default',
|
|
40
|
+
contained: 'contained',
|
|
41
|
+
onDark: 'onDark'
|
|
42
|
+
};
|
|
43
|
+
const getClassName = cssModules(STYLES);
|
|
44
|
+
const AlignedHeartIcon = withLargeButtonAlignment(BpkHeartIcon);
|
|
45
|
+
const AlignedHeartOutlineIcon = withLargeButtonAlignment(BpkHeartOutlineIcon);
|
|
46
|
+
const AlignedHeartIconSm = withLargeButtonAlignment(BpkHeartIconSm);
|
|
47
|
+
const AlignedHeartOutlineIconSm = withLargeButtonAlignment(BpkHeartOutlineIconSm);
|
|
48
|
+
const BpkSaveButton = ({
|
|
49
|
+
accessibilityLabel,
|
|
50
|
+
checked,
|
|
51
|
+
onCheckedChange,
|
|
52
|
+
size = SIZE_TYPES.default,
|
|
53
|
+
style = STYLE_TYPES.default
|
|
54
|
+
}) => {
|
|
55
|
+
const [toggle, setToggle] = useState(false);
|
|
56
|
+
const smallSize = size === SIZE_TYPES.small;
|
|
57
|
+
const HeartIcon = smallSize ? AlignedHeartIconSm : AlignedHeartIcon;
|
|
58
|
+
const HeartOutLineIcon = smallSize ? AlignedHeartOutlineIconSm : AlignedHeartOutlineIcon;
|
|
59
|
+
return /*#__PURE__*/_jsxs(BpkButtonV2, {
|
|
60
|
+
"aria-label": accessibilityLabel,
|
|
61
|
+
className: getClassName('bpk-save-button', smallSize && 'bpk-save-button__small', `bpk-save-button__${style}`),
|
|
62
|
+
onClick: e => {
|
|
63
|
+
setToggle(true);
|
|
64
|
+
onCheckedChange(e);
|
|
65
|
+
},
|
|
66
|
+
iconOnly: true,
|
|
67
|
+
children: [/*#__PURE__*/_jsx(HeartIcon, {
|
|
68
|
+
className: getClassName('bpk-save-button__icon', 'bpk-save-button__heartIcon', toggle && checked && 'bpk-save-button__heartIcon--toggle', `bpk-save-button__heartIcon--${checked ? 'show' : 'hide'}`, `bpk-save-button__heartIcon--${style}`)
|
|
69
|
+
}), /*#__PURE__*/_jsx(HeartOutLineIcon, {
|
|
70
|
+
className: getClassName('bpk-save-button__icon', 'bpk-save-button__heartOutlineIcon', `bpk-save-button__heartOutlineIcon--${checked ? 'hide' : 'show'}`, `bpk-save-button__heartOutlineIcon--${style}`)
|
|
71
|
+
})]
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
export default BpkSaveButton;
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes heart-beat{0%,100%{transform:translate(-50%, -50%) scale(1)}10%{transform:translate(-50%, -50%) scale(1.4)}20%{transform:translate(-50%, -50%) scale(1.2)}30%{transform:translate(-50%, -50%) scale(1.3)}50%{transform:translate(-50%, -50%) scale(1.25)}70%{transform:translate(-50%, -50%) scale(1.25)}}.bpk-save-button{position:relative;width:2.5rem;height:2.5rem;padding:0.5rem;border-radius:50%;background-color:transparent}.bpk-no-touch-support .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}:global(.bpk-no-touch-support) .bpk-save-button:hover:not(:active):not(:disabled){background-color:transparent}.bpk-save-button:active{background-color:transparent}.bpk-save-button__icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:#161616}.bpk-save-button__icon:hover{color:#161616}.bpk-save-button__heartOutlineIcon{z-index:1;opacity:1}.bpk-save-button__heartOutlineIcon--show:hover{transition:opacity 200ms ease-in-out;opacity:0}.bpk-save-button__heartOutlineIcon--hide{opacity:0}.bpk-save-button__heartOutlineIcon--onDark{color:#fff}.bpk-save-button__heartIcon{z-index:2;color:#0062e3;opacity:0}.bpk-save-button__heartIcon--toggle{animation:heart-beat 1s 0s 1 ease-out;animation-fill-mode:forwards}.bpk-save-button__heartIcon--show{opacity:1}.bpk-save-button__heartIcon--show:hover{color:#0062e3}.bpk-save-button__heartIcon--hide:hover{transition:opacity 200ms ease-in-out;color:#161616;opacity:1}.bpk-save-button__heartIcon--onDark{color:#fff}.bpk-save-button__heartIcon--onDark:hover{color:#fff}.bpk-save-button__small{width:2rem;height:2rem;min-height:2rem}.bpk-save-button__contained{background-color:rgba(255,255,255,0.8)}.bpk-no-touch-support .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}:global(.bpk-no-touch-support) .bpk-save-button__contained:hover:not(:active):not(:disabled){background-color:rgba(255,255,255,0.8)}.bpk-save-button__contained:active{background-color:rgba(255,255,255,0.8)}
|
|
@@ -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:
|
|
177
|
-
rowHeight:
|
|
176
|
+
headerHeight: '3.75rem',
|
|
177
|
+
rowHeight: '3.75rem',
|
|
178
178
|
className: null,
|
|
179
179
|
defaultColumnSortIndex: 0,
|
|
180
180
|
sort: null,
|
|
@@ -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
|
-
*/
|
|
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
|
-
|
|
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
|
});
|
|
@@ -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:
|
|
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
|
-
|
|
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
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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;
|
|
@@ -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,
|
|
@@ -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
|
|
40
|
+
onClose?: (event?: TouchEvent | MouseEvent | KeyboardEvent) => void | null;
|
|
23
41
|
closeLabel?: string;
|
|
24
42
|
dismissible?: boolean;
|
|
25
43
|
headerIcon?: ReactNode;
|
|
@@ -18,8 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
import { cssModules } from "../../bpk-react-utils";
|
|
20
20
|
import BpkText from "../../bpk-component-text";
|
|
21
|
-
|
|
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(
|
|
133
|
-
|
|
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 */,
|
|
@@ -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`.
|
|
@@ -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?:
|
|
30
|
+
buttonType?: keyof typeof BUTTON_TYPES;
|
|
30
31
|
title?: string;
|
|
31
32
|
subtitle?: string;
|
|
32
33
|
icon?: ReactNode;
|
|
@@ -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
|
-
|
|
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
|
|
3
|
+
"version": "29.2.0",
|
|
4
4
|
"description": "Backpack Design System web library",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@popperjs/core": "^2.11.5",
|
|
26
26
|
"@react-google-maps/api": "^2.12.0",
|
|
27
|
-
"@skyscanner/bpk-foundations-web": "^17.
|
|
28
|
-
"@skyscanner/bpk-svgs": "^18.1.
|
|
27
|
+
"@skyscanner/bpk-foundations-web": "^17.1.0",
|
|
28
|
+
"@skyscanner/bpk-svgs": "^18.1.1",
|
|
29
29
|
"a11y-focus-scope": "^1.1.3",
|
|
30
30
|
"a11y-focus-store": "^1.0.0",
|
|
31
31
|
"d3-path": "^2.0.0",
|