@skyscanner/backpack-web 25.1.0 → 25.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bpk-component-badge/src/BpkBadge.js +4 -4
- package/bpk-component-breakpoint/index.d.ts +21 -0
- package/bpk-component-breakpoint/src/BpkBreakpoint.d.ts +39 -0
- package/bpk-component-breakpoint/src/BpkBreakpoint.js +18 -24
- package/bpk-component-button/src/BpkButtonV2/BpkButton.js +7 -7
- package/bpk-component-calendar/index.d.ts +4 -1
- package/bpk-component-calendar/src/BpkCalendarContainer.d.ts +15 -7
- package/bpk-component-calendar/src/BpkCalendarContainer.js +4 -2
- package/bpk-component-calendar/src/BpkCalendarDate.d.ts +12 -12
- package/bpk-component-calendar/src/BpkCalendarGrid.d.ts +4 -4
- package/bpk-component-calendar/src/BpkCalendarGridHeader.d.ts +1 -1
- package/bpk-component-calendar/src/Week.d.ts +9 -9
- package/bpk-component-calendar/src/Week.js +2 -2
- package/bpk-component-card/src/BpkCardWrapper.module.css +1 -1
- package/bpk-component-card/src/BpkDividedCard.js +3 -3
- package/bpk-component-chip/src/BpkDismissibleChip.js +3 -3
- package/bpk-component-chip/src/BpkSelectableChip.js +7 -7
- package/bpk-component-datepicker/index.d.ts +23 -0
- package/bpk-component-datepicker/src/BpkDatepicker.d.ts +533 -0
- package/bpk-component-datepicker/src/BpkDatepicker.js +9 -46
- package/bpk-component-datepicker/src/themeAttributes.js +1 -0
- package/bpk-component-image/index.d.ts +27 -0
- package/bpk-component-image/src/BpkBackgroundImage.d.ts +50 -0
- package/bpk-component-image/src/BpkBackgroundImage.js +4 -16
- package/bpk-component-image/src/BpkImage.d.ts +48 -0
- package/bpk-component-image/src/BpkImage.js +10 -36
- package/bpk-component-image/src/BpkImageBorderRadiusStyles.d.ts +23 -0
- package/bpk-component-image/src/BpkImageBorderRadiusStyles.js +3 -1
- package/bpk-component-image/src/withLazyLoading.d.ts +73 -0
- package/bpk-component-image/src/withLazyLoading.js +18 -28
- package/bpk-component-image/src/withLoadingBehavior.d.ts +57 -0
- package/bpk-component-image/src/withLoadingBehavior.js +3 -2
- package/bpk-component-input/index.d.ts +2 -16
- package/bpk-component-input/src/BpkClearButton.d.ts +5 -9
- package/bpk-component-input/src/BpkInput.d.ts +16 -21
- package/bpk-component-input/src/common-types.d.ts +3 -6
- package/bpk-component-input/src/common-types.js +0 -1
- package/bpk-component-input/src/withOpenEvents.d.ts +56 -97
- package/bpk-component-input/src/withOpenEvents.js +0 -1
- package/bpk-component-modal/src/BpkModal.js +13 -13
- package/bpk-component-modal/src/BpkModalInner.js +10 -10
- package/bpk-component-radio/src/BpkRadio.module.css +1 -1
- package/bpk-component-scrollable-calendar/index.d.ts +25 -0
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.d.ts +596 -0
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.d.ts +32 -0
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.js +21 -28
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.d.ts +29 -0
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js +8 -7
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts +56 -0
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js +8 -15
- package/bpk-component-scrollable-calendar/src/utils.d.ts +21 -0
- package/bpk-component-scrollable-calendar/src/utils.js +1 -1
- package/bpk-component-scrollable-calendar/test-utils.d.ts +52 -0
- package/bpk-component-scrollable-calendar/test-utils.js +2 -2
- package/bpk-component-text/src/BpkText.js +4 -4
- package/bpk-scrim-utils/src/withScrim.js +33 -31
- package/package.json +4 -4
|
@@ -7,7 +7,7 @@ exports.default = exports.BADGE_TYPES = void 0;
|
|
|
7
7
|
var _bpkReactUtils = require("../../bpk-react-utils");
|
|
8
8
|
var _BpkBadgeModule = _interopRequireDefault(require("./BpkBadge.module.css"));
|
|
9
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
-
const _excluded = ["
|
|
10
|
+
const _excluded = ["centered", "className", "docked", "type"];
|
|
11
11
|
/*
|
|
12
12
|
* Backpack - Skyscanner's Design System
|
|
13
13
|
*
|
|
@@ -57,10 +57,10 @@ const badgeTypeClassNames = {
|
|
|
57
57
|
};
|
|
58
58
|
const BpkBadge = _ref => {
|
|
59
59
|
let {
|
|
60
|
-
type = BADGE_TYPES.normal,
|
|
61
|
-
docked = null,
|
|
62
60
|
centered = false,
|
|
63
|
-
className = null
|
|
61
|
+
className = null,
|
|
62
|
+
docked = null,
|
|
63
|
+
type = BADGE_TYPES.normal
|
|
64
64
|
} = _ref,
|
|
65
65
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
66
66
|
const classNames = getClassName('bpk-badge', badgeTypeClassNames[type], docked === 'right' && 'bpk-badge--docked-right', docked === 'left' && 'bpk-badge--docked-left', centered && 'bpk-badge--centered', className);
|
|
@@ -0,0 +1,21 @@
|
|
|
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 BpkBreakpoint, { BREAKPOINTS } from './src/BpkBreakpoint';
|
|
20
|
+
export { BREAKPOINTS };
|
|
21
|
+
export default BpkBreakpoint;
|
|
@@ -0,0 +1,39 @@
|
|
|
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 } from 'react';
|
|
20
|
+
declare const BREAKPOINTS: {
|
|
21
|
+
readonly SMALL_MOBILE: any;
|
|
22
|
+
readonly MOBILE: any;
|
|
23
|
+
readonly SMALL_TABLET: any;
|
|
24
|
+
readonly SMALL_TABLET_ONLY: any;
|
|
25
|
+
readonly TABLET: any;
|
|
26
|
+
readonly TABLET_ONLY: any;
|
|
27
|
+
readonly ABOVE_MOBILE: any;
|
|
28
|
+
readonly ABOVE_TABLET: any;
|
|
29
|
+
readonly ABOVE_DESKTOP: any;
|
|
30
|
+
readonly DESKTOP_ONLY: any;
|
|
31
|
+
};
|
|
32
|
+
type Props = {
|
|
33
|
+
children: ReactNode | ((matches: boolean) => ReactNode | null);
|
|
34
|
+
query: string | (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
|
|
35
|
+
legacy?: boolean;
|
|
36
|
+
};
|
|
37
|
+
declare const BpkBreakpoint: ({ children, legacy, query }: Props) => JSX.Element;
|
|
38
|
+
export { BREAKPOINTS };
|
|
39
|
+
export default BpkBreakpoint;
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.BREAKPOINTS = void 0;
|
|
7
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
8
7
|
var _reactResponsive = _interopRequireDefault(require("react-responsive/dist/react-responsive"));
|
|
9
8
|
var _base = _interopRequireDefault(require("@skyscanner/bpk-foundations-web/tokens/base.common"));
|
|
10
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -25,7 +24,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
25
24
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
26
25
|
* See the License for the specific language governing permissions and
|
|
27
26
|
* limitations under the License.
|
|
28
|
-
*/
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
30
|
+
|
|
31
|
+
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
32
|
+
|
|
33
|
+
const BREAKPOINTS = {
|
|
29
34
|
SMALL_MOBILE: _base.default.breakpointQuerySmallMobile,
|
|
30
35
|
MOBILE: _base.default.breakpointQueryMobile,
|
|
31
36
|
SMALL_TABLET: _base.default.breakpointQuerySmallTablet,
|
|
@@ -33,34 +38,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
33
38
|
TABLET: _base.default.breakpointQueryTablet,
|
|
34
39
|
TABLET_ONLY: _base.default.breakpointQueryTabletOnly,
|
|
35
40
|
ABOVE_MOBILE: _base.default.breakpointQueryAboveMobile,
|
|
36
|
-
ABOVE_TABLET: _base.default.breakpointQueryAboveTablet
|
|
41
|
+
ABOVE_TABLET: _base.default.breakpointQueryAboveTablet,
|
|
42
|
+
ABOVE_DESKTOP: _base.default.breakpointQueryAboveDesktop,
|
|
43
|
+
DESKTOP_ONLY: _base.default.breakpointQueryDesktopOnly
|
|
37
44
|
};
|
|
38
45
|
exports.BREAKPOINTS = BREAKPOINTS;
|
|
39
|
-
const BpkBreakpoint =
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
46
|
+
const BpkBreakpoint = ({
|
|
47
|
+
children,
|
|
48
|
+
legacy = false,
|
|
49
|
+
query
|
|
50
|
+
}) => {
|
|
51
|
+
if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
|
|
52
|
+
console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
|
|
53
|
+
}
|
|
44
54
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactResponsive.default, {
|
|
45
55
|
query: query,
|
|
46
56
|
children: children
|
|
47
57
|
});
|
|
48
58
|
};
|
|
49
|
-
const queryValidator = (props, ...rest) => {
|
|
50
|
-
if (!props.legacy) {
|
|
51
|
-
return _propTypes.default.oneOf(Object.keys(BREAKPOINTS).map(key => BREAKPOINTS[key])).isRequired(props, ...rest);
|
|
52
|
-
}
|
|
53
|
-
return _propTypes.default.string.isRequired(props, ...rest);
|
|
54
|
-
};
|
|
55
|
-
BpkBreakpoint.propTypes = {
|
|
56
|
-
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
|
|
57
|
-
query: queryValidator,
|
|
58
|
-
// eslint-disable-line react/require-default-props
|
|
59
|
-
legacy: _propTypes.default.bool // eslint-disable-line react/no-unused-prop-types
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
BpkBreakpoint.defaultProps = {
|
|
63
|
-
legacy: false
|
|
64
|
-
};
|
|
65
59
|
var _default = BpkBreakpoint;
|
|
66
60
|
exports.default = _default;
|
|
@@ -8,7 +8,7 @@ var _bpkReactUtils = require("../../../bpk-react-utils");
|
|
|
8
8
|
var _commonTypes = require("./common-types");
|
|
9
9
|
var _BpkButtonModule = _interopRequireDefault(require("./BpkButton.module.css"));
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
const _excluded = ["
|
|
11
|
+
const _excluded = ["blank", "children", "className", "disabled", "href", "iconOnly", "onClick", "rel", "size", "submit", "type"];
|
|
12
12
|
/*
|
|
13
13
|
* Backpack - Skyscanner's Design System
|
|
14
14
|
*
|
|
@@ -37,17 +37,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
37
37
|
const getCommonClassName = (0, _bpkReactUtils.cssModules)(_BpkButtonModule.default);
|
|
38
38
|
const BpkButtonV2 = _ref => {
|
|
39
39
|
let {
|
|
40
|
+
blank = false,
|
|
40
41
|
children,
|
|
41
|
-
type = _commonTypes.BUTTON_TYPES.primary,
|
|
42
|
-
size = _commonTypes.SIZE_TYPES.small,
|
|
43
42
|
className = null,
|
|
44
|
-
href = null,
|
|
45
43
|
disabled = false,
|
|
44
|
+
href = null,
|
|
45
|
+
iconOnly = false,
|
|
46
46
|
onClick = () => {},
|
|
47
|
+
rel: propRel = undefined,
|
|
48
|
+
size = _commonTypes.SIZE_TYPES.small,
|
|
47
49
|
submit = false,
|
|
48
|
-
|
|
49
|
-
blank = false,
|
|
50
|
-
rel: propRel = undefined
|
|
50
|
+
type = _commonTypes.BUTTON_TYPES.primary
|
|
51
51
|
} = _ref,
|
|
52
52
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
53
53
|
const classNames = getCommonClassName('bpk-button', size === _commonTypes.SIZE_TYPES.large && 'bpk-button--large', iconOnly && 'bpk-button--icon-only', iconOnly && size === _commonTypes.SIZE_TYPES.large && 'bpk-button--large-icon-only', `bpk-button--${type}`, className);
|
|
@@ -18,13 +18,16 @@
|
|
|
18
18
|
|
|
19
19
|
import BpkCalendarContainer, { withCalendarState } from './src/BpkCalendarContainer';
|
|
20
20
|
import BpkCalendarGrid, { BpkCalendarGridWithTransition } from './src/BpkCalendarGrid';
|
|
21
|
+
import type { Props as BpkCalendarGridProps } from './src/BpkCalendarGrid';
|
|
21
22
|
import BpkCalendarGridHeader from './src/BpkCalendarGridHeader';
|
|
22
23
|
import BpkCalendarNav from './src/BpkCalendarNav';
|
|
23
24
|
import BpkCalendarDate, { ROW_TYPES, SELECTION_TYPES } from './src/BpkCalendarDate';
|
|
25
|
+
import type { Props as BpkCalendarDateProps } from './src/BpkCalendarDate';
|
|
24
26
|
import composeCalendar from './src/composeCalendar';
|
|
25
27
|
import { CALENDAR_SELECTION_TYPE } from './src/custom-proptypes';
|
|
28
|
+
import type { DaysOfWeek, ReactComponent, WeekDay, WeekDayKey, SelectionConfiguration } from './src/custom-proptypes';
|
|
26
29
|
import CustomPropTypes, { BpkCalendarGridPropTypes, BpkCalendarDatePropTypes } from './src/custom-proptypes-legacy';
|
|
27
30
|
import * as DateUtils from './src/date-utils';
|
|
28
31
|
import themeAttributes from './src/themeAttributes';
|
|
29
32
|
export default BpkCalendarContainer;
|
|
30
|
-
export { BpkCalendarGrid, BpkCalendarGridHeader, BpkCalendarNav, BpkCalendarDate, DateUtils, CALENDAR_SELECTION_TYPE, ROW_TYPES, SELECTION_TYPES, composeCalendar, withCalendarState, themeAttributes, BpkCalendarGridWithTransition, CustomPropTypes, BpkCalendarGridPropTypes, BpkCalendarDatePropTypes, };
|
|
33
|
+
export { BpkCalendarGrid, BpkCalendarGridHeader, BpkCalendarNav, BpkCalendarDate, DateUtils, CALENDAR_SELECTION_TYPE, DaysOfWeek, ReactComponent, WeekDay, WeekDayKey, SelectionConfiguration, ROW_TYPES, SELECTION_TYPES, composeCalendar, withCalendarState, themeAttributes, BpkCalendarGridWithTransition, CustomPropTypes, BpkCalendarGridPropTypes, BpkCalendarDatePropTypes, BpkCalendarGridProps, BpkCalendarDateProps };
|
|
@@ -19,28 +19,32 @@
|
|
|
19
19
|
import type { ComponentType } from 'react';
|
|
20
20
|
import type { SelectionConfiguration } from './custom-proptypes';
|
|
21
21
|
type Props = {
|
|
22
|
-
fixedWidth
|
|
23
|
-
maxDate
|
|
24
|
-
minDate
|
|
22
|
+
fixedWidth?: boolean;
|
|
23
|
+
maxDate?: Date;
|
|
24
|
+
minDate?: Date;
|
|
25
25
|
onDateSelect?: ((date: Date, newDate?: Date) => void) | null;
|
|
26
26
|
onMonthChange?: ((event: UIEvent, { month, source }: {
|
|
27
27
|
month: Date;
|
|
28
28
|
source: string;
|
|
29
29
|
}) => void) | null;
|
|
30
|
-
selectionConfiguration
|
|
31
|
-
initiallyFocusedDate
|
|
30
|
+
selectionConfiguration?: SelectionConfiguration;
|
|
31
|
+
initiallyFocusedDate?: Date | null;
|
|
32
|
+
markToday?: boolean;
|
|
33
|
+
markOutsideDays?: boolean;
|
|
32
34
|
};
|
|
33
35
|
type InjectedProps = {
|
|
34
36
|
onDateClick: ((date: Date) => void) | null;
|
|
35
37
|
onDateKeyDown: ((event: KeyboardEvent) => void) | null;
|
|
36
38
|
month: Date;
|
|
37
39
|
};
|
|
38
|
-
type CalendarProps<P> = Omit<P & Props, keyof InjectedProps
|
|
40
|
+
type CalendarProps<P> = Omit<P & Props, keyof InjectedProps> & {
|
|
41
|
+
[rest: string]: any;
|
|
42
|
+
};
|
|
39
43
|
type State = {
|
|
40
44
|
preventKeyboardFocus: boolean;
|
|
41
45
|
focusedDate: Date;
|
|
42
46
|
};
|
|
43
|
-
declare const withCalendarState: <P extends
|
|
47
|
+
declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>) => {
|
|
44
48
|
new (props: CalendarProps<P>): {
|
|
45
49
|
UNSAFE_componentWillReceiveProps(nextProps: CalendarProps<P>): void;
|
|
46
50
|
handleDateFocus: (event: UIEvent, { date, source }: {
|
|
@@ -87,6 +91,8 @@ declare const withCalendarState: <P extends {}>(Calendar: ComponentType<P & Inje
|
|
|
87
91
|
date: null;
|
|
88
92
|
};
|
|
89
93
|
initiallyFocusedDate: null;
|
|
94
|
+
markToday: boolean;
|
|
95
|
+
markOutsideDays: boolean;
|
|
90
96
|
};
|
|
91
97
|
contextType?: import("react").Context<any> | undefined;
|
|
92
98
|
};
|
|
@@ -457,6 +463,8 @@ declare const _default: {
|
|
|
457
463
|
date: null;
|
|
458
464
|
};
|
|
459
465
|
initiallyFocusedDate: null;
|
|
466
|
+
markToday: boolean;
|
|
467
|
+
markOutsideDays: boolean;
|
|
460
468
|
};
|
|
461
469
|
contextType?: import("react").Context<any> | undefined;
|
|
462
470
|
};
|
|
@@ -134,7 +134,7 @@ const withCalendarState = Calendar => {
|
|
|
134
134
|
};
|
|
135
135
|
if (onDateSelect) {
|
|
136
136
|
const newDate = (0, _dateUtils.dateToBoundaries)(date, (0, _dateUtils.startOfDay)(this.props.minDate), (0, _dateUtils.startOfDay)(this.props.maxDate));
|
|
137
|
-
if (selectionConfiguration.type === _customProptypes.CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && ((0, _dateUtils.isAfter)(newDate, selectionConfiguration.startDate) || (0, _dateUtils.isSameDay)(newDate, selectionConfiguration.startDate))) {
|
|
137
|
+
if (selectionConfiguration && selectionConfiguration.type === _customProptypes.CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && ((0, _dateUtils.isAfter)(newDate, selectionConfiguration.startDate) || (0, _dateUtils.isSameDay)(newDate, selectionConfiguration.startDate))) {
|
|
138
138
|
onDateSelect(selectionConfiguration.startDate, newDate);
|
|
139
139
|
} else {
|
|
140
140
|
onDateSelect(newDate);
|
|
@@ -275,7 +275,9 @@ const withCalendarState = Calendar => {
|
|
|
275
275
|
type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
|
|
276
276
|
date: null
|
|
277
277
|
},
|
|
278
|
-
initiallyFocusedDate: null
|
|
278
|
+
initiallyFocusedDate: null,
|
|
279
|
+
markToday: true,
|
|
280
|
+
markOutsideDays: true
|
|
279
281
|
});
|
|
280
282
|
return BpkCalendarContainer;
|
|
281
283
|
};
|
|
@@ -38,19 +38,19 @@ export type Props = DefaultProps & {
|
|
|
38
38
|
date: Date;
|
|
39
39
|
};
|
|
40
40
|
type DefaultProps = {
|
|
41
|
-
className
|
|
42
|
-
isBlocked
|
|
43
|
-
isFocused
|
|
44
|
-
isKeyboardFocusable
|
|
45
|
-
isOutside
|
|
46
|
-
isSelected
|
|
47
|
-
isToday
|
|
48
|
-
modifiers
|
|
49
|
-
onClick
|
|
50
|
-
onDateKeyDown
|
|
41
|
+
className?: string | null;
|
|
42
|
+
isBlocked?: boolean;
|
|
43
|
+
isFocused?: boolean;
|
|
44
|
+
isKeyboardFocusable?: boolean;
|
|
45
|
+
isOutside?: boolean;
|
|
46
|
+
isSelected?: boolean;
|
|
47
|
+
isToday?: boolean;
|
|
48
|
+
modifiers?: DateModifiers;
|
|
49
|
+
onClick?: ((date: Date) => void) | null;
|
|
50
|
+
onDateKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
|
|
51
51
|
preventKeyboardFocus?: boolean;
|
|
52
|
-
selectionType
|
|
53
|
-
style
|
|
52
|
+
selectionType?: SelectionTypes;
|
|
53
|
+
style?: {};
|
|
54
54
|
};
|
|
55
55
|
declare class BpkCalendarDate extends PureComponent<Props> {
|
|
56
56
|
static defaultProps: DefaultProps;
|
|
@@ -20,9 +20,9 @@ import type { ElementType } from 'react';
|
|
|
20
20
|
import { Component } from 'react';
|
|
21
21
|
import type { DateModifiers, SelectionConfiguration } from './custom-proptypes';
|
|
22
22
|
type DefaultProps = {
|
|
23
|
-
className
|
|
24
|
-
dateModifiers
|
|
25
|
-
focusedDate
|
|
23
|
+
className?: string | null;
|
|
24
|
+
dateModifiers?: DateModifiers;
|
|
25
|
+
focusedDate?: Date | null;
|
|
26
26
|
cellClassName: string | null;
|
|
27
27
|
isKeyboardFocusable: boolean;
|
|
28
28
|
markOutsideDays: boolean;
|
|
@@ -36,7 +36,7 @@ type DefaultProps = {
|
|
|
36
36
|
ignoreOutsideDate: boolean;
|
|
37
37
|
dateProps: {};
|
|
38
38
|
};
|
|
39
|
-
type Props = DefaultProps & {
|
|
39
|
+
export type Props = DefaultProps & {
|
|
40
40
|
DateComponent: ElementType;
|
|
41
41
|
formatDateFull: (date: Date) => Date | string;
|
|
42
42
|
month: Date;
|
|
@@ -33,15 +33,15 @@ export type Props = DefaultProps & {
|
|
|
33
33
|
[rest: string]: any;
|
|
34
34
|
};
|
|
35
35
|
type DefaultProps = {
|
|
36
|
-
dateProps
|
|
37
|
-
focusedDate
|
|
38
|
-
ignoreOutsideDate
|
|
39
|
-
maxDate
|
|
40
|
-
minDate
|
|
41
|
-
onDateClick
|
|
42
|
-
onDateKeyDown
|
|
43
|
-
cellClassName
|
|
44
|
-
selectionConfiguration
|
|
36
|
+
dateProps?: {};
|
|
37
|
+
focusedDate?: Date | number | null;
|
|
38
|
+
ignoreOutsideDate?: boolean;
|
|
39
|
+
maxDate?: Date | null;
|
|
40
|
+
minDate?: Date | null;
|
|
41
|
+
onDateClick?: () => void;
|
|
42
|
+
onDateKeyDown?: () => void;
|
|
43
|
+
cellClassName?: string | null;
|
|
44
|
+
selectionConfiguration?: SelectionConfiguration;
|
|
45
45
|
};
|
|
46
46
|
declare class Week extends Component<Props> {
|
|
47
47
|
static defaultProps: DefaultProps;
|
|
@@ -209,10 +209,10 @@ class Week extends _react.Component {
|
|
|
209
209
|
// If selected date is changing, and it'll be included as part
|
|
210
210
|
// of either the week we're rendering now or the next week we'll
|
|
211
211
|
// render, component should update.
|
|
212
|
-
if (this.props.selectionConfiguration
|
|
212
|
+
if (this.props.selectionConfiguration?.type === _customProptypes.CALENDAR_SELECTION_TYPE.single && this.props.selectionConfiguration.date) {
|
|
213
213
|
return singleDateHandler(this.props, nextProps);
|
|
214
214
|
}
|
|
215
|
-
if (this.props.selectionConfiguration
|
|
215
|
+
if (this.props.selectionConfiguration?.type === _customProptypes.CALENDAR_SELECTION_TYPE.range) {
|
|
216
216
|
return rangeDateHandler(this.props, nextProps);
|
|
217
217
|
}
|
|
218
218
|
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-wrapper{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.75rem;box-shadow:0 0 0 2px var(--background-color) }.bpk-no-touch-support .bpk-card-wrapper:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card-wrapper:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card-wrapper::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);border-radius:.75rem}@media screen\0 {.bpk-card-wrapper::after{z-index:-1}}.bpk-card-wrapper:active::after{box-shadow:none}.bpk-card-wrapper--header{border-radius:.5rem .5rem 0 0;background-color:var(--background-color);overflow:hidden}.bpk-card-wrapper--content{position:relative;border-radius:0 0 .75rem .75rem;overflow:hidden}.bpk-card-wrapper--content::before,.bpk-card-wrapper--content::after{position:absolute;top:0;content:' ';z-index:2;width:1.5rem;height:1.5rem;background-color:transparent;box-shadow:1rem 0 0 0 var(--background-color);overflow:hidden;border-radius:.75rem}.bpk-card-wrapper--content::before{left:0;transform:rotate(225deg)}.bpk-card-wrapper--content::after{right:0;transform:rotate(-45deg)}
|
|
18
|
+
@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-card-wrapper{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.75rem;box-shadow:0 0 0 2px var(--background-color) }.bpk-no-touch-support .bpk-card-wrapper:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card-wrapper:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card-wrapper::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);border-radius:.75rem}@media screen\0 {.bpk-card-wrapper::after{z-index:-1}}.bpk-card-wrapper:active::after{box-shadow:none}.bpk-card-wrapper--header{border-radius:.5rem .5rem 0 0;background-color:var(--background-color);cursor:default;overflow:hidden}.bpk-card-wrapper--content{position:relative;border-radius:0 0 .75rem .75rem;overflow:hidden}.bpk-card-wrapper--content::before,.bpk-card-wrapper--content::after{position:absolute;top:0;content:' ';z-index:2;width:1.5rem;height:1.5rem;background-color:transparent;box-shadow:1rem 0 0 0 var(--background-color);overflow:hidden;border-radius:.75rem}.bpk-card-wrapper--content::before{left:0;transform:rotate(225deg)}.bpk-card-wrapper--content::after{right:0;transform:rotate(-45deg)}.bpk-card-wrapper:has(.bpk-card-wrapper--header:active)::after{box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);opacity:1}
|
|
@@ -8,7 +8,7 @@ var _bpkReactUtils = require("../../bpk-react-utils");
|
|
|
8
8
|
var _BpkCard = _interopRequireDefault(require("./BpkCard"));
|
|
9
9
|
var _BpkDividedCardModule = _interopRequireDefault(require("./BpkDividedCard.module.css"));
|
|
10
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
-
const _excluded = ["
|
|
11
|
+
const _excluded = ["className", "href", "isElevated", "orientation", "primaryContent", "secondaryContent"];
|
|
12
12
|
/*
|
|
13
13
|
* Backpack - Skyscanner's Design System
|
|
14
14
|
*
|
|
@@ -42,10 +42,10 @@ const ORIENTATION = {
|
|
|
42
42
|
exports.ORIENTATION = ORIENTATION;
|
|
43
43
|
const BpkDividedCard = _ref => {
|
|
44
44
|
let {
|
|
45
|
-
orientation = ORIENTATION.horizontal,
|
|
46
|
-
href = null,
|
|
47
45
|
className = null,
|
|
46
|
+
href = null,
|
|
48
47
|
isElevated = true,
|
|
48
|
+
orientation = ORIENTATION.horizontal,
|
|
49
49
|
primaryContent,
|
|
50
50
|
secondaryContent
|
|
51
51
|
} = _ref,
|
|
@@ -10,7 +10,7 @@ var _BpkSelectableChip = _interopRequireDefault(require("./BpkSelectableChip"));
|
|
|
10
10
|
var _commonTypes = require("./commonTypes");
|
|
11
11
|
var _BpkSelectableChipModule = _interopRequireDefault(require("./BpkSelectableChip.module.css"));
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
const _excluded = ["className", "
|
|
13
|
+
const _excluded = ["className", "leadingAccessoryView", "type"];
|
|
14
14
|
/*
|
|
15
15
|
* Backpack - Skyscanner's Design System
|
|
16
16
|
*
|
|
@@ -46,8 +46,8 @@ const getClassName = (0, _bpkReactUtils.cssModules)(_BpkSelectableChipModule.def
|
|
|
46
46
|
const BpkDismissibleChip = _ref => {
|
|
47
47
|
let {
|
|
48
48
|
className,
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
leadingAccessoryView = null,
|
|
50
|
+
type = _commonTypes.CHIP_TYPES.default
|
|
51
51
|
} = _ref,
|
|
52
52
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
53
53
|
const iconClassNames = getClassName(`bpk-chip--${type}-dismissible__trailing-accessory-view`);
|
|
@@ -9,7 +9,7 @@ var _bpkComponentText = _interopRequireWildcard(require("../../bpk-component-tex
|
|
|
9
9
|
var _BpkSelectableChipModule = _interopRequireDefault(require("./BpkSelectableChip.module.css"));
|
|
10
10
|
var _commonTypes = require("./commonTypes");
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
-
const _excluded = ["
|
|
12
|
+
const _excluded = ["accessibilityLabel", "children", "className", "disabled", "leadingAccessoryView", "role", "selected", "trailingAccessoryView", "type"];
|
|
13
13
|
/*
|
|
14
14
|
* Backpack - Skyscanner's Design System
|
|
15
15
|
*
|
|
@@ -40,15 +40,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
40
40
|
const getClassName = (0, _bpkReactUtils.cssModules)(_BpkSelectableChipModule.default);
|
|
41
41
|
const BpkSelectableChip = _ref => {
|
|
42
42
|
let {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
trailingAccessoryView = null,
|
|
43
|
+
accessibilityLabel,
|
|
44
|
+
children,
|
|
46
45
|
className,
|
|
47
46
|
disabled = false,
|
|
48
47
|
leadingAccessoryView = null,
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
role = 'checkbox',
|
|
49
|
+
selected = false,
|
|
50
|
+
trailingAccessoryView = null,
|
|
51
|
+
type = _commonTypes.CHIP_TYPES.default
|
|
52
52
|
} = _ref,
|
|
53
53
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
54
54
|
const classNames = getClassName('bpk-chip', `bpk-chip--${type}`, disabled && 'bpk-chip--disabled', disabled && `bpk-chip--${type}-disabled`, !disabled && selected && `bpk-chip--${type}-selected`, className);
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Backpack - Skyscanner's Design System
|
|
3
|
+
*
|
|
4
|
+
* Copyright 2016 Skyscanner Ltd
|
|
5
|
+
*
|
|
6
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
7
|
+
* you may not use this file except in compliance with the License.
|
|
8
|
+
* You may obtain a copy of the License at
|
|
9
|
+
*
|
|
10
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
11
|
+
*
|
|
12
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
13
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
14
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
|
+
* See the License for the specific language governing permissions and
|
|
16
|
+
* limitations under the License.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
import { CALENDAR_SELECTION_TYPE } from '../bpk-component-calendar';
|
|
20
|
+
import BpkDatepicker from './src/BpkDatepicker';
|
|
21
|
+
import themeAttributes from './src/themeAttributes';
|
|
22
|
+
export default BpkDatepicker;
|
|
23
|
+
export { CALENDAR_SELECTION_TYPE, themeAttributes };
|