@skyscanner/backpack-web 42.27.3 → 43.0.0-dev-v28150129018.1
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-accordion/src/BpkAccordionItem.d.ts +1 -1
- package/bpk-component-accordion/src/withAccordionItemState.d.ts +2 -7
- package/bpk-component-accordion/src/withAccordionItemState.js +4 -6
- package/bpk-component-accordion/src/withSingleItemAccordionState.d.ts +1 -1
- package/bpk-component-aria-live/src/BpkAriaLive.d.ts +1 -1
- package/bpk-component-aria-live/src/BpkAriaLive.story-helpers.d.ts +2 -2
- package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.d.ts +4 -4
- package/bpk-component-badge/src/BpkBadge.module.css +1 -1
- package/bpk-component-banner-alert/src/AnimateAndFade.d.ts +4 -7
- package/bpk-component-banner-alert/src/AnimateAndFade.js +14 -10
- package/bpk-component-banner-alert/src/withBannerAlertState.d.ts +0 -10
- package/bpk-component-banner-alert/src/withBannerAlertState.js +3 -13
- package/bpk-component-barchart/src/BpkBarchart.js +24 -41
- package/bpk-component-barchart/src/BpkBarchartBar.js +7 -16
- package/bpk-component-barchart/src/BpkBarchartBars.js +6 -14
- package/bpk-component-barchart/src/BpkChartAxis.js +5 -12
- package/bpk-component-barchart/src/BpkChartDataTable.js +1 -4
- package/bpk-component-barchart/src/BpkChartGridLines.js +3 -8
- package/bpk-component-calendar/index.d.ts +2 -2
- package/bpk-component-calendar/index.js +2 -2
- package/bpk-component-calendar/src/BpkCalendarContainer.d.ts +3 -28
- package/bpk-component-calendar/src/BpkCalendarContainer.js +47 -34
- package/bpk-component-calendar/src/BpkCalendarDate.d.ts +0 -1
- package/bpk-component-calendar/src/BpkCalendarDate.js +32 -31
- package/bpk-component-calendar/src/BpkCalendarGrid.d.ts +13 -14
- package/bpk-component-calendar/src/BpkCalendarGrid.js +28 -37
- package/bpk-component-calendar/src/BpkCalendarGridHeader.d.ts +0 -4
- package/bpk-component-calendar/src/BpkCalendarGridHeader.js +2 -6
- package/bpk-component-calendar/src/BpkCalendarGridTransition.d.ts +0 -5
- package/bpk-component-calendar/src/BpkCalendarGridTransition.js +0 -5
- package/bpk-component-calendar/src/BpkCalendarWeek.d.ts +0 -1
- package/bpk-component-calendar/src/BpkCalendarWeek.js +19 -27
- package/bpk-component-calendar/src/custom-proptypes.d.ts +1 -1
- package/bpk-component-card-list/src/BpkCardList.js +0 -3
- package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.js +1 -3
- package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.js +1 -14
- package/bpk-component-card-list/src/BpkCardListRowRail/utils.d.ts +1 -2
- package/bpk-component-card-list/src/BpkCardListRowRail/utils.js +0 -21
- package/bpk-component-card-list/src/common-types.d.ts +4 -7
- package/bpk-component-chatbot-input/src/hooks/useChatbotInput.d.ts +1 -1
- package/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.d.ts +1 -1
- package/bpk-component-datepicker/src/BpkDatepicker.d.ts +6 -192
- package/bpk-component-datepicker/src/BpkDatepicker.js +47 -53
- package/bpk-component-dialog/src/BpkDialogInner.d.ts +0 -7
- package/bpk-component-drawer/src/BpkDrawerContent.d.ts +2 -2
- package/bpk-component-drawer/src/BpkDrawerContent.js +13 -1
- package/bpk-component-fieldset/src/BpkFieldset.d.ts +1 -1
- package/bpk-component-floating-notification/src/BpkFloatingNotification.js +4 -1
- package/bpk-component-grid-toggle/src/BpkGridToggle.js +9 -7
- package/bpk-component-image/src/BpkBackgroundImage.d.ts +1 -9
- package/bpk-component-image/src/BpkBackgroundImage.js +18 -18
- package/bpk-component-image/src/BpkImage.d.ts +1 -8
- package/bpk-component-image/src/BpkImage.js +10 -18
- package/bpk-component-image/src/withLazyLoading.d.ts +0 -4
- package/bpk-component-image/src/withLazyLoading.js +2 -6
- package/bpk-component-infinite-scroll/src/withInfiniteScroll.js +6 -8
- package/bpk-component-info-banner/src/AnimateAndFade.d.ts +4 -7
- package/bpk-component-info-banner/src/AnimateAndFade.js +14 -10
- package/bpk-component-info-banner/src/withBannerAlertState.d.ts +0 -10
- package/bpk-component-info-banner/src/withBannerAlertState.js +3 -13
- package/bpk-component-input/index.d.ts +2 -2
- package/bpk-component-input/index.js +2 -2
- package/bpk-component-input/src/BpkInput.d.ts +0 -13
- package/bpk-component-input/src/BpkInput.js +13 -12
- package/bpk-component-input/src/common-types.d.ts +0 -32
- package/bpk-component-input/src/common-types.js +1 -56
- package/bpk-component-input/src/withOpenEvents.d.ts +1 -12
- package/bpk-component-input/src/withOpenEvents.js +2 -14
- package/bpk-component-layout/src/types.d.ts +19 -35
- package/bpk-component-map/src/BpkBasicMapMarker.d.ts +1 -8
- package/bpk-component-map/src/BpkBasicMapMarker.js +0 -6
- package/bpk-component-map/src/BpkIconMarker.js +4 -10
- package/bpk-component-map/src/BpkIconMarkerBackground.js +3 -8
- package/bpk-component-map/src/BpkMap.js +14 -30
- package/bpk-component-map/src/withGoogleMapsScript.js +4 -8
- package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.d.ts +0 -1
- package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +1 -5
- package/bpk-component-modal/index.d.ts +1 -2
- package/bpk-component-modal/index.js +1 -3
- package/bpk-component-navigation-bar/src/BpkNavigationBar.d.ts +2 -2
- package/bpk-component-phone-input/src/BpkPhoneInput.js +6 -14
- package/bpk-component-popover/src/BpkPopover.d.ts +1 -1
- package/bpk-component-popover/src/BpkPopover.js +1 -1
- package/bpk-component-progress/src/BpkProgress.d.ts +0 -8
- package/bpk-component-progress/src/BpkProgress.js +10 -16
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.d.ts +0 -14
- package/bpk-component-section-list/src/BpkSectionListItem.js +4 -10
- package/bpk-component-section-list/src/BpkSectionListSection.js +1 -4
- package/bpk-component-segmented-control/src/BpkSegmentedControl.d.ts +1 -1
- package/bpk-component-select/src/BpkSelect.d.ts +1 -1
- package/bpk-component-slider/src/BpkSlider.js +1 -1
- package/bpk-component-spinner/src/SpinnerLayout.story-helpers.d.ts +1 -7
- package/bpk-component-spinner/src/SpinnerLayout.story-helpers.js +0 -4
- package/bpk-component-split-input/src/BpkInputField.d.ts +2 -6
- package/bpk-component-split-input/src/BpkInputField.js +2 -6
- package/bpk-component-split-input/src/BpkSplitInput.d.ts +0 -6
- package/bpk-component-split-input/src/BpkSplitInput.js +7 -13
- package/bpk-component-star-rating/src/withInteractiveStarRatingState.d.ts +0 -3
- package/bpk-component-star-rating/src/withInteractiveStarRatingState.js +0 -3
- package/bpk-component-ticket/src/BpkTicket.js +6 -14
- package/bpk-mixins/_badges.scss +3 -3
- package/bpk-react-utils/index.d.ts +3 -1
- package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js +1 -0
- package/bpk-react-utils/src/Portal.d.ts +10 -22
- package/bpk-react-utils/src/Portal.js +22 -19
- package/bpk-react-utils/src/TransitionInitialMount.d.ts +4 -2
- package/bpk-react-utils/src/TransitionInitialMount.js +23 -14
- package/bpk-scrim-utils/index.d.ts +0 -7
- package/bpk-scrim-utils/src/withScrim.d.ts +0 -7
- package/bpk-scrim-utils/src/withScrim.js +10 -15
- package/bpk-stylesheets/base.css +1 -1
- package/bpk-stylesheets/font.css +1 -1
- package/bpk-stylesheets/font.scss +65 -3
- package/bpk-stylesheets/theme-backpack-dark.css +4 -0
- package/bpk-stylesheets/theme-backpack-light.css +7 -3
- package/package.json +3 -3
- package/bpk-component-modal/src/legacy-prop-types.js +0 -74
|
@@ -7,7 +7,7 @@ export type BpkAccordionItemProps = {
|
|
|
7
7
|
className?: string;
|
|
8
8
|
expanded?: boolean;
|
|
9
9
|
initiallyExpanded?: boolean;
|
|
10
|
-
icon?: ReactElement
|
|
10
|
+
icon?: ReactElement<any>;
|
|
11
11
|
onClick?: () => void;
|
|
12
12
|
tagName?: 'span' | 'p' | 'text' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
13
13
|
textStyle?: (typeof TEXT_STYLES)[keyof typeof TEXT_STYLES];
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import type { ComponentType } from 'react';
|
|
2
2
|
import type { BpkAccordionItemProps } from './BpkAccordionItem';
|
|
3
3
|
type Props = {
|
|
4
|
-
initiallyExpanded
|
|
5
|
-
expanded
|
|
4
|
+
initiallyExpanded?: boolean;
|
|
5
|
+
expanded?: boolean;
|
|
6
6
|
onClick?: () => void;
|
|
7
7
|
};
|
|
8
8
|
type State = {
|
|
@@ -34,11 +34,6 @@ declare const withAccordionItemState: <P extends BpkAccordionItemProps>(Composed
|
|
|
34
34
|
UNSAFE_componentWillUpdate?(nextProps: Readonly<P & Props>, nextState: Readonly<State>, nextContext: any): void;
|
|
35
35
|
};
|
|
36
36
|
displayName: string;
|
|
37
|
-
defaultProps: {
|
|
38
|
-
initiallyExpanded: boolean;
|
|
39
|
-
expanded: boolean;
|
|
40
|
-
onClick: null;
|
|
41
|
-
};
|
|
42
37
|
contextType?: import("react").Context<any> | undefined;
|
|
43
38
|
};
|
|
44
39
|
export default withAccordionItemState;
|
|
@@ -22,15 +22,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
22
22
|
const withAccordionItemState = ComposedComponent => {
|
|
23
23
|
class WithAccordionItemState extends Component {
|
|
24
24
|
static displayName = wrapDisplayName(ComposedComponent, 'withAccordionItemState');
|
|
25
|
-
static defaultProps = {
|
|
26
|
-
initiallyExpanded: false,
|
|
27
|
-
expanded: false,
|
|
28
|
-
onClick: null
|
|
29
|
-
};
|
|
30
25
|
constructor(props) {
|
|
31
26
|
super(props);
|
|
27
|
+
const {
|
|
28
|
+
initiallyExpanded = false
|
|
29
|
+
} = props;
|
|
32
30
|
this.state = {
|
|
33
|
-
expanded:
|
|
31
|
+
expanded: initiallyExpanded
|
|
34
32
|
};
|
|
35
33
|
}
|
|
36
34
|
onClick = () => {
|
|
@@ -9,7 +9,7 @@ type State = {
|
|
|
9
9
|
declare const withSingleItemAccordionState: <P extends BpkAccordionProps>(ComposedComponent: ComponentType<P>) => {
|
|
10
10
|
new (props: P & Props): {
|
|
11
11
|
openAccordionItem: (key?: string | number | null) => void;
|
|
12
|
-
renderAccordionItem: (accordionItem: ReactElement) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
12
|
+
renderAccordionItem: (accordionItem: ReactElement<any>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
|
|
13
13
|
render(): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
context: unknown;
|
|
15
15
|
setState<K extends "expanded">(state: State | ((prevState: Readonly<State>, props: Readonly<P & Props>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
|
|
@@ -6,7 +6,7 @@ export declare const POLITENESS_SETTINGS: {
|
|
|
6
6
|
};
|
|
7
7
|
export type PolitenessSetting = (typeof POLITENESS_SETTINGS)[keyof typeof POLITENESS_SETTINGS];
|
|
8
8
|
export type Props = {
|
|
9
|
-
children: ReactElement | string;
|
|
9
|
+
children: ReactElement<any> | string;
|
|
10
10
|
politenessSetting?: PolitenessSetting;
|
|
11
11
|
visible?: boolean;
|
|
12
12
|
className?: string | null;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ReactElement } from 'react';
|
|
2
2
|
type AriaLiveDemoProps = {
|
|
3
|
-
preamble?: ReactElement | null;
|
|
4
|
-
children: ReactElement
|
|
3
|
+
preamble?: ReactElement<any> | null;
|
|
4
|
+
children: ReactElement<any>;
|
|
5
5
|
className?: string | null;
|
|
6
6
|
style?: {};
|
|
7
7
|
visible?: Boolean;
|
|
@@ -37,7 +37,7 @@ export type BpkAutoSuggestProps<T> = {
|
|
|
37
37
|
}) => void;
|
|
38
38
|
onSuggestionsFetchRequested: (value: string) => void;
|
|
39
39
|
onSuggestionsClearRequested: () => void;
|
|
40
|
-
renderSuggestion: (suggestion: T) => ReactElement
|
|
40
|
+
renderSuggestion: (suggestion: T) => ReactElement<any>;
|
|
41
41
|
id: string;
|
|
42
42
|
enterKeyHint?: EnterKeyHintType;
|
|
43
43
|
getA11yResultsMessage: (resultCount: number) => string;
|
|
@@ -45,20 +45,20 @@ export type BpkAutoSuggestProps<T> = {
|
|
|
45
45
|
isDesktop?: boolean;
|
|
46
46
|
onLoad?: (inputValue: string) => void;
|
|
47
47
|
onClick?: () => void;
|
|
48
|
-
renderBesideInput?: () => ReactElement
|
|
48
|
+
renderBesideInput?: () => ReactElement<any>;
|
|
49
49
|
showClear?: boolean;
|
|
50
50
|
theme?: Partial<BpkAutoSuggestTheme>;
|
|
51
51
|
highlightFirstSuggestion?: boolean;
|
|
52
52
|
shouldRenderSuggestions?: (value?: string) => boolean;
|
|
53
53
|
multiSection?: boolean;
|
|
54
54
|
getSectionSuggestions?: (section: T) => T[];
|
|
55
|
-
renderSectionTitle?: (section: T) => ReactElement | null;
|
|
55
|
+
renderSectionTitle?: (section: T) => ReactElement<any> | null;
|
|
56
56
|
alwaysRenderSuggestions?: boolean;
|
|
57
57
|
onInputValueChange?: (input: {
|
|
58
58
|
method: string;
|
|
59
59
|
newValue: string;
|
|
60
60
|
}) => void;
|
|
61
|
-
renderInputComponent?: (inputProps: BpkInputRenderProps) => ReactElement
|
|
61
|
+
renderInputComponent?: (inputProps: BpkInputRenderProps) => ReactElement<any>;
|
|
62
62
|
onSuggestionHighlighted?: (data: {
|
|
63
63
|
suggestion: T | null;
|
|
64
64
|
}) => void;
|
|
@@ -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
|
-
.bpk-badge{display:inline-flex;padding:.25rem .5rem;align-items:center;border-radius:var(--bpk-badge-border-radius, 0.25rem);margin:0;font-size:.
|
|
18
|
+
.bpk-badge{display:inline-flex;padding:.25rem .5rem;align-items:center;border-radius:var(--bpk-badge-border-radius, 0.25rem);margin:0;font-size:.75rem;line-height:1rem;font-weight:400;font-size:var(--bpk-badge-font-size, 0.75rem);font-weight:var(--bpk-badge-font-weight, 400);line-height:var(--bpk-badge-line-height, 1rem)}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir=rtl] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir=rtl] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--warning{background-color:var(--bpk-badge-warning-background-color, rgb(239, 243, 248));color:var(--bpk-badge-warning-text-color, rgb(22, 22, 22));fill:var(--bpk-badge-warning-icon-color, rgb(245, 93, 66))}.bpk-badge--success{background-color:var(--bpk-badge-success-background-color, rgb(239, 243, 248));color:var(--bpk-badge-success-text-color, rgb(22, 22, 22));fill:var(--bpk-badge-success-icon-color, rgb(12, 131, 138))}.bpk-badge--critical{background-color:var(--bpk-badge-critical-background-color, rgb(239, 243, 248));color:var(--bpk-badge-critical-text-color, rgb(22, 22, 22));fill:var(--bpk-badge-critical-icon-color, rgb(231, 8, 102))}.bpk-badge--normal{background-color:var(--bpk-badge-normal-background-color, rgb(239, 243, 248));color:var(--bpk-badge-normal-text-color, rgb(22, 22, 22));fill:var(--bpk-badge-normal-icon-color, rgb(22, 22, 22))}.bpk-badge--inverse{background-color:var(--bpk-badge-inverse-background-color, rgb(255, 255, 255));color:var(--bpk-badge-inverse-text-color, rgb(22, 22, 22));fill:var(--bpk-badge-inverse-icon-color, rgb(22, 22, 22))}.bpk-badge--outline{box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px var(--bpk-badge-outline-text-color, rgb(255, 255, 255));background-color:var(--bpk-badge-outline-background-color, transparent);color:var(--bpk-badge-outline-text-color, rgb(255, 255, 255));fill:var(--bpk-badge-outline-icon-color, rgb(255, 255, 255))}.bpk-badge--strong{background-color:var(--bpk-badge-strong-background-color, rgb(5, 32, 60));color:var(--bpk-badge-strong-text-color, rgb(255, 255, 255));fill:var(--bpk-badge-strong-icon-color, rgb(255, 255, 255))}.bpk-badge--brand{background-color:var(--bpk-badge-brand-background-color, rgb(0, 98, 227));color:var(--bpk-badge-brand-text-color, rgb(255, 255, 255));fill:var(--bpk-badge-brand-icon-color, rgb(255, 255, 255))}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Component } from 'react';
|
|
2
|
-
import type { ReactNode } from 'react';
|
|
2
|
+
import type { ReactNode, RefObject } from 'react';
|
|
3
3
|
type Props = {
|
|
4
|
-
animateOnEnter
|
|
5
|
-
animateOnLeave
|
|
4
|
+
animateOnEnter?: boolean;
|
|
5
|
+
animateOnLeave?: boolean;
|
|
6
6
|
children: ReactNode | string;
|
|
7
7
|
show: boolean;
|
|
8
8
|
className?: string | undefined;
|
|
@@ -16,15 +16,12 @@ type State = {
|
|
|
16
16
|
};
|
|
17
17
|
declare class AnimateAndFade extends Component<Props, State> {
|
|
18
18
|
toggleImmediately: boolean;
|
|
19
|
-
static defaultProps: {
|
|
20
|
-
animateOnEnter: boolean;
|
|
21
|
-
animateOnLeave: boolean;
|
|
22
|
-
};
|
|
23
19
|
constructor(props: Props);
|
|
24
20
|
componentDidMount(): void;
|
|
25
21
|
componentDidUpdate(prevProps: Props): void;
|
|
26
22
|
onAnimateHeightComplete: () => void;
|
|
27
23
|
onFadeComplete: () => void;
|
|
24
|
+
nodeRef: RefObject<HTMLElement>;
|
|
28
25
|
toggle: () => void;
|
|
29
26
|
render(): import("react/jsx-runtime").JSX.Element | null;
|
|
30
27
|
}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import { Component } from 'react';
|
|
19
|
+
import { Component, cloneElement, createRef, isValidElement } from 'react';
|
|
20
20
|
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
21
21
|
import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
|
|
22
22
|
import BpkAnimateHeight from "../../bpk-animate-height";
|
|
@@ -26,14 +26,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
26
26
|
const getClassName = cssModules(STYLES);
|
|
27
27
|
const ANIMATION_DURATION = parseInt(durationSm, 10);
|
|
28
28
|
class AnimateAndFade extends Component {
|
|
29
|
-
static defaultProps = {
|
|
30
|
-
animateOnEnter: false,
|
|
31
|
-
animateOnLeave: false
|
|
32
|
-
};
|
|
33
29
|
constructor(props) {
|
|
34
30
|
super(props);
|
|
35
|
-
|
|
36
|
-
|
|
31
|
+
const {
|
|
32
|
+
animateOnEnter = false,
|
|
33
|
+
show
|
|
34
|
+
} = props;
|
|
35
|
+
this.toggleImmediately = show && animateOnEnter;
|
|
36
|
+
const initiallyShown = this.toggleImmediately ? false : show;
|
|
37
37
|
this.state = {
|
|
38
38
|
isExpanded: initiallyShown,
|
|
39
39
|
visible: initiallyShown,
|
|
@@ -78,6 +78,7 @@ class AnimateAndFade extends Component {
|
|
|
78
78
|
});
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
|
+
nodeRef = /*#__PURE__*/createRef();
|
|
81
82
|
toggle = () => {
|
|
82
83
|
if (this.state.visible && this.state.isExpanded) {
|
|
83
84
|
this.setState({
|
|
@@ -93,8 +94,8 @@ class AnimateAndFade extends Component {
|
|
|
93
94
|
};
|
|
94
95
|
render() {
|
|
95
96
|
const {
|
|
96
|
-
animateOnEnter,
|
|
97
|
-
animateOnLeave,
|
|
97
|
+
animateOnEnter = false,
|
|
98
|
+
animateOnLeave = false,
|
|
98
99
|
children,
|
|
99
100
|
className
|
|
100
101
|
} = this.props;
|
|
@@ -119,6 +120,7 @@ class AnimateAndFade extends Component {
|
|
|
119
120
|
appear: animateOnEnter,
|
|
120
121
|
onTransitionEnd: this.onFadeComplete,
|
|
121
122
|
children: this.state.visible && /*#__PURE__*/_jsx(CSSTransition, {
|
|
123
|
+
nodeRef: this.nodeRef,
|
|
122
124
|
classNames: {
|
|
123
125
|
exit: getClassName('bpk-animate-and-fade--leave'),
|
|
124
126
|
exitActive: getClassName('bpk-animate-and-fade--leave-active'),
|
|
@@ -131,7 +133,9 @@ class AnimateAndFade extends Component {
|
|
|
131
133
|
enter: ANIMATION_DURATION * 2,
|
|
132
134
|
exit: ANIMATION_DURATION * 2
|
|
133
135
|
},
|
|
134
|
-
children: children
|
|
136
|
+
children: /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, {
|
|
137
|
+
ref: this.nodeRef
|
|
138
|
+
}) : children
|
|
135
139
|
})
|
|
136
140
|
})]
|
|
137
141
|
})
|
|
@@ -71,16 +71,6 @@ declare const withBannerAlertState: <P extends BpkBannerAlertProps>(WrappedCompo
|
|
|
71
71
|
}>, nextContext: any): void;
|
|
72
72
|
};
|
|
73
73
|
displayName: string;
|
|
74
|
-
defaultProps: {
|
|
75
|
-
onDismiss: null;
|
|
76
|
-
onExpandToggle: null;
|
|
77
|
-
onHide: null;
|
|
78
|
-
expanded: boolean;
|
|
79
|
-
show: boolean;
|
|
80
|
-
hideAfter: null;
|
|
81
|
-
animateOnLeave: boolean;
|
|
82
|
-
children: null;
|
|
83
|
-
};
|
|
84
74
|
contextType?: import("react").Context<any> | undefined;
|
|
85
75
|
};
|
|
86
76
|
export default withBannerAlertState;
|
|
@@ -22,20 +22,10 @@ import BpkBannerAlertExpandable from "./BpkBannerAlertExpandable";
|
|
|
22
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
23
|
const withBannerAlertState = WrappedComponent => {
|
|
24
24
|
class component extends Component {
|
|
25
|
-
static defaultProps = {
|
|
26
|
-
onDismiss: null,
|
|
27
|
-
onExpandToggle: null,
|
|
28
|
-
onHide: null,
|
|
29
|
-
expanded: false,
|
|
30
|
-
show: true,
|
|
31
|
-
hideAfter: null,
|
|
32
|
-
animateOnLeave: false,
|
|
33
|
-
children: null
|
|
34
|
-
};
|
|
35
25
|
constructor(props) {
|
|
36
26
|
super(props);
|
|
37
27
|
this.state = {
|
|
38
|
-
expanded: props.expanded,
|
|
28
|
+
expanded: props.expanded ?? false,
|
|
39
29
|
show: true
|
|
40
30
|
};
|
|
41
31
|
this.hideIntervalId = null;
|
|
@@ -84,8 +74,8 @@ const withBannerAlertState = WrappedComponent => {
|
|
|
84
74
|
};
|
|
85
75
|
render() {
|
|
86
76
|
const {
|
|
87
|
-
animateOnLeave,
|
|
88
|
-
children,
|
|
77
|
+
animateOnLeave = false,
|
|
78
|
+
children = null,
|
|
89
79
|
expanded,
|
|
90
80
|
hideAfter,
|
|
91
81
|
onDismiss,
|
|
@@ -37,34 +37,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
37
37
|
const getClassName = cssModules(STYLES);
|
|
38
38
|
const spacing = remToPx('.375rem');
|
|
39
39
|
const lineHeight = remToPx(lineHeightSm);
|
|
40
|
+
const DEFAULT_X_AXIS_MARGIN = 2 * (lineHeight + spacing);
|
|
41
|
+
const DEFAULT_Y_AXIS_MARGIN = 4 * lineHeight + spacing;
|
|
42
|
+
const DEFAULT_Y_AXIS_DOMAIN = [null, null];
|
|
43
|
+
const DEFAULT_GET_BAR_LABEL = (point, xScaleDataKey, yScaleDataKey) => `${point[xScaleDataKey]} - ${point[yScaleDataKey]}`;
|
|
44
|
+
const DEFAULT_GET_BAR_SELECTION = () => false;
|
|
40
45
|
const getMaxYValue = (dataPoints, outlierPercentage) => {
|
|
41
46
|
const meanValue = dataPoints.reduce((d, t) => d + t, 0) / dataPoints.length;
|
|
42
47
|
const maxYValue = Math.max(...dataPoints);
|
|
43
48
|
return outlierPercentage ? Math.min(maxYValue, meanValue * (outlierPercentage / 100) + meanValue) : maxYValue;
|
|
44
49
|
};
|
|
45
50
|
class BpkBarchart extends Component {
|
|
46
|
-
static defaultProps = {
|
|
47
|
-
leadingScrollIndicatorClassName: null,
|
|
48
|
-
trailingScrollIndicatorClassName: null,
|
|
49
|
-
outlierPercentage: null,
|
|
50
|
-
showGridlines: false,
|
|
51
|
-
xAxisMargin: 2 * (lineHeight + spacing),
|
|
52
|
-
xAxisTickValue: identity,
|
|
53
|
-
xAxisTickOffset: 0,
|
|
54
|
-
xAxisTickEvery: 1,
|
|
55
|
-
yAxisMargin: 4 * lineHeight + spacing,
|
|
56
|
-
yAxisTickValue: identity,
|
|
57
|
-
yAxisNumTicks: null,
|
|
58
|
-
yAxisDomain: [null, null],
|
|
59
|
-
onBarClick: null,
|
|
60
|
-
onBarHover: null,
|
|
61
|
-
onBarFocus: null,
|
|
62
|
-
// Using type any here as xScaleDataKey or yScaleDataKey are strings and there is an issue that strings are not valid keys
|
|
63
|
-
getBarLabel: (point, xScaleDataKey, yScaleDataKey) => `${point[xScaleDataKey]} - ${point[yScaleDataKey]}`,
|
|
64
|
-
getBarSelection: () => false,
|
|
65
|
-
BarComponent: BpkBarchartBar,
|
|
66
|
-
disableDataTable: false
|
|
67
|
-
};
|
|
68
51
|
constructor(props) {
|
|
69
52
|
super(props);
|
|
70
53
|
this.state = {
|
|
@@ -97,31 +80,31 @@ class BpkBarchart extends Component {
|
|
|
97
80
|
};
|
|
98
81
|
render() {
|
|
99
82
|
const {
|
|
100
|
-
BarComponent,
|
|
83
|
+
BarComponent = BpkBarchartBar,
|
|
101
84
|
data,
|
|
102
|
-
disableDataTable,
|
|
103
|
-
getBarLabel,
|
|
104
|
-
getBarSelection,
|
|
85
|
+
disableDataTable = false,
|
|
86
|
+
getBarLabel = DEFAULT_GET_BAR_LABEL,
|
|
87
|
+
getBarSelection = DEFAULT_GET_BAR_SELECTION,
|
|
105
88
|
initialHeight,
|
|
106
89
|
initialWidth,
|
|
107
|
-
leadingScrollIndicatorClassName,
|
|
108
|
-
onBarClick,
|
|
109
|
-
onBarFocus,
|
|
110
|
-
onBarHover,
|
|
111
|
-
outlierPercentage,
|
|
112
|
-
showGridlines,
|
|
113
|
-
trailingScrollIndicatorClassName,
|
|
90
|
+
leadingScrollIndicatorClassName = null,
|
|
91
|
+
onBarClick = null,
|
|
92
|
+
onBarFocus = null,
|
|
93
|
+
onBarHover = null,
|
|
94
|
+
outlierPercentage = null,
|
|
95
|
+
showGridlines = false,
|
|
96
|
+
trailingScrollIndicatorClassName = null,
|
|
114
97
|
xAxisLabel,
|
|
115
|
-
xAxisMargin,
|
|
116
|
-
xAxisTickEvery,
|
|
117
|
-
xAxisTickOffset,
|
|
118
|
-
xAxisTickValue,
|
|
98
|
+
xAxisMargin = DEFAULT_X_AXIS_MARGIN,
|
|
99
|
+
xAxisTickEvery = 1,
|
|
100
|
+
xAxisTickOffset = 0,
|
|
101
|
+
xAxisTickValue = identity,
|
|
119
102
|
xScaleDataKey,
|
|
120
|
-
yAxisDomain,
|
|
103
|
+
yAxisDomain = DEFAULT_Y_AXIS_DOMAIN,
|
|
121
104
|
yAxisLabel,
|
|
122
|
-
yAxisMargin,
|
|
123
|
-
yAxisNumTicks,
|
|
124
|
-
yAxisTickValue,
|
|
105
|
+
yAxisMargin = DEFAULT_Y_AXIS_MARGIN,
|
|
106
|
+
yAxisNumTicks = null,
|
|
107
|
+
yAxisTickValue = identity,
|
|
125
108
|
yScaleDataKey,
|
|
126
109
|
...rest
|
|
127
110
|
} = this.props;
|
|
@@ -34,15 +34,15 @@ const handleKeyboardEvent = callback => event => {
|
|
|
34
34
|
const borderRadius = remToPx(borderRadiusXs);
|
|
35
35
|
const BpkBarchartBar = props => {
|
|
36
36
|
const {
|
|
37
|
-
className,
|
|
37
|
+
className = null,
|
|
38
38
|
height,
|
|
39
39
|
label,
|
|
40
|
-
onClick,
|
|
41
|
-
onFocus,
|
|
42
|
-
onHover,
|
|
43
|
-
outlier,
|
|
44
|
-
padding,
|
|
45
|
-
selected,
|
|
40
|
+
onClick = null,
|
|
41
|
+
onFocus = null,
|
|
42
|
+
onHover = null,
|
|
43
|
+
outlier = false,
|
|
44
|
+
padding = 0,
|
|
45
|
+
selected = false,
|
|
46
46
|
width,
|
|
47
47
|
x,
|
|
48
48
|
y,
|
|
@@ -98,13 +98,4 @@ BpkBarchartBar.propTypes = {
|
|
|
98
98
|
padding: PropTypes.number,
|
|
99
99
|
selected: PropTypes.bool
|
|
100
100
|
};
|
|
101
|
-
BpkBarchartBar.defaultProps = {
|
|
102
|
-
className: null,
|
|
103
|
-
onClick: null,
|
|
104
|
-
onHover: null,
|
|
105
|
-
onFocus: null,
|
|
106
|
-
outlier: false,
|
|
107
|
-
padding: 0,
|
|
108
|
-
selected: false
|
|
109
|
-
};
|
|
110
101
|
export default BpkBarchartBar;
|
|
@@ -49,15 +49,15 @@ const BpkBarchartBars = props => {
|
|
|
49
49
|
BarComponent,
|
|
50
50
|
data,
|
|
51
51
|
getBarLabel,
|
|
52
|
-
getBarSelection,
|
|
52
|
+
getBarSelection = () => false,
|
|
53
53
|
height,
|
|
54
|
-
innerPadding,
|
|
54
|
+
innerPadding = 0.35,
|
|
55
55
|
margin,
|
|
56
56
|
maxYValue,
|
|
57
|
-
onBarClick,
|
|
58
|
-
onBarFocus,
|
|
59
|
-
onBarHover,
|
|
60
|
-
outerPadding,
|
|
57
|
+
onBarClick = null,
|
|
58
|
+
onBarFocus = null,
|
|
59
|
+
onBarHover = null,
|
|
60
|
+
outerPadding = 0.35,
|
|
61
61
|
xScale,
|
|
62
62
|
xScaleDataKey,
|
|
63
63
|
yScale,
|
|
@@ -130,12 +130,4 @@ BpkBarchartBars.propTypes = {
|
|
|
130
130
|
onBarHover: PropTypes.func,
|
|
131
131
|
onBarFocus: PropTypes.func
|
|
132
132
|
};
|
|
133
|
-
BpkBarchartBars.defaultProps = {
|
|
134
|
-
outerPadding: 0.35,
|
|
135
|
-
innerPadding: 0.35,
|
|
136
|
-
onBarClick: null,
|
|
137
|
-
onBarHover: null,
|
|
138
|
-
onBarFocus: null,
|
|
139
|
-
getBarSelection: () => false
|
|
140
|
-
};
|
|
141
133
|
export default BpkBarchartBars;
|
|
@@ -72,14 +72,14 @@ const getAxisConfig = ({
|
|
|
72
72
|
const BpkChartAxis = props => {
|
|
73
73
|
const {
|
|
74
74
|
height,
|
|
75
|
-
label,
|
|
75
|
+
label = null,
|
|
76
76
|
margin,
|
|
77
|
-
numTicks,
|
|
77
|
+
numTicks = null,
|
|
78
78
|
orientation,
|
|
79
79
|
scale,
|
|
80
|
-
tickEvery,
|
|
81
|
-
tickOffset,
|
|
82
|
-
tickValue,
|
|
80
|
+
tickEvery = 1,
|
|
81
|
+
tickOffset = 0,
|
|
82
|
+
tickValue = identity,
|
|
83
83
|
width,
|
|
84
84
|
...rest
|
|
85
85
|
} = props;
|
|
@@ -131,11 +131,4 @@ BpkChartAxis.propTypes = {
|
|
|
131
131
|
tickOffset: PropTypes.number,
|
|
132
132
|
tickEvery: PropTypes.number
|
|
133
133
|
};
|
|
134
|
-
BpkChartAxis.defaultProps = {
|
|
135
|
-
tickOffset: 0,
|
|
136
|
-
tickEvery: 1,
|
|
137
|
-
tickValue: identity,
|
|
138
|
-
numTicks: null,
|
|
139
|
-
label: null
|
|
140
|
-
};
|
|
141
134
|
export default BpkChartAxis;
|
|
@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
22
22
|
const getClassName = cssModules(STYLES);
|
|
23
23
|
const BpkChartDataTable = props => {
|
|
24
24
|
const {
|
|
25
|
-
data,
|
|
25
|
+
data = null,
|
|
26
26
|
xAxisLabel,
|
|
27
27
|
xScaleDataKey,
|
|
28
28
|
yAxisLabel,
|
|
@@ -61,7 +61,4 @@ BpkChartDataTable.propTypes = {
|
|
|
61
61
|
xAxisLabel: PropTypes.string.isRequired,
|
|
62
62
|
yAxisLabel: PropTypes.string.isRequired
|
|
63
63
|
};
|
|
64
|
-
BpkChartDataTable.defaultProps = {
|
|
65
|
-
data: null
|
|
66
|
-
};
|
|
67
64
|
export default BpkChartDataTable;
|
|
@@ -25,11 +25,11 @@ const BpkChartGridLines = props => {
|
|
|
25
25
|
const {
|
|
26
26
|
height,
|
|
27
27
|
margin,
|
|
28
|
-
numTicks,
|
|
28
|
+
numTicks = null,
|
|
29
29
|
orientation,
|
|
30
30
|
scale,
|
|
31
|
-
tickEvery,
|
|
32
|
-
tickOffset,
|
|
31
|
+
tickEvery = 1,
|
|
32
|
+
tickOffset = 0,
|
|
33
33
|
width,
|
|
34
34
|
...rest
|
|
35
35
|
} = props;
|
|
@@ -75,9 +75,4 @@ BpkChartGridLines.propTypes = {
|
|
|
75
75
|
tickOffset: PropTypes.number,
|
|
76
76
|
tickEvery: PropTypes.number
|
|
77
77
|
};
|
|
78
|
-
BpkChartGridLines.defaultProps = {
|
|
79
|
-
numTicks: null,
|
|
80
|
-
tickOffset: 0,
|
|
81
|
-
tickEvery: 1
|
|
82
|
-
};
|
|
83
78
|
export default BpkChartGridLines;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import BpkCalendarContainer, { withCalendarState } from './src/BpkCalendarContainer';
|
|
1
|
+
import BpkCalendarContainer, { DEFAULT_MARK_TODAY, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE, withCalendarState } from './src/BpkCalendarContainer';
|
|
2
2
|
import BpkCalendarDate, { ROW_TYPES, SELECTION_TYPES } from './src/BpkCalendarDate';
|
|
3
3
|
import BpkCalendarGrid, { BpkCalendarGridWithTransition } from './src/BpkCalendarGrid';
|
|
4
4
|
import BpkCalendarGridHeader from './src/BpkCalendarGridHeader';
|
|
@@ -12,4 +12,4 @@ import type { Props as BpkCalendarDateProps } from './src/BpkCalendarDate';
|
|
|
12
12
|
import type { Props as BpkCalendarGridProps } from './src/BpkCalendarGrid';
|
|
13
13
|
import type { DaysOfWeek, ReactComponent, WeekDay, WeekDayKey, SelectionConfiguration } from './src/custom-proptypes';
|
|
14
14
|
export default BpkCalendarContainer;
|
|
15
|
-
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, BpkCalendarDateProps, BpkCalendarGridProps, };
|
|
15
|
+
export { BpkCalendarGrid, BpkCalendarGridHeader, BpkCalendarNav, BpkCalendarDate, DateUtils, CALENDAR_SELECTION_TYPE, DEFAULT_MARK_TODAY, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE, DaysOfWeek, ReactComponent, WeekDay, WeekDayKey, SelectionConfiguration, ROW_TYPES, SELECTION_TYPES, composeCalendar, withCalendarState, themeAttributes, BpkCalendarGridWithTransition, CustomPropTypes, BpkCalendarGridPropTypes, BpkCalendarDatePropTypes, BpkCalendarDateProps, BpkCalendarGridProps, };
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import BpkCalendarContainer, { withCalendarState } from "./src/BpkCalendarContainer";
|
|
19
|
+
import BpkCalendarContainer, { DEFAULT_MARK_TODAY, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE, withCalendarState } from "./src/BpkCalendarContainer";
|
|
20
20
|
import BpkCalendarDate, { ROW_TYPES, SELECTION_TYPES } from "./src/BpkCalendarDate";
|
|
21
21
|
import BpkCalendarGrid, { BpkCalendarGridWithTransition } from "./src/BpkCalendarGrid";
|
|
22
22
|
import BpkCalendarGridHeader from "./src/BpkCalendarGridHeader";
|
|
@@ -28,4 +28,4 @@ import CustomPropTypes, { BpkCalendarGridPropTypes, BpkCalendarDatePropTypes //
|
|
|
28
28
|
import * as DateUtils from "./src/date-utils";
|
|
29
29
|
import themeAttributes from "./src/themeAttributes";
|
|
30
30
|
export default BpkCalendarContainer;
|
|
31
|
-
export { BpkCalendarGrid, BpkCalendarGridHeader, BpkCalendarNav, BpkCalendarDate, DateUtils, CALENDAR_SELECTION_TYPE, ROW_TYPES, SELECTION_TYPES, composeCalendar, withCalendarState, themeAttributes, BpkCalendarGridWithTransition, CustomPropTypes, BpkCalendarGridPropTypes, BpkCalendarDatePropTypes };
|
|
31
|
+
export { BpkCalendarGrid, BpkCalendarGridHeader, BpkCalendarNav, BpkCalendarDate, DateUtils, CALENDAR_SELECTION_TYPE, DEFAULT_MARK_TODAY, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE, ROW_TYPES, SELECTION_TYPES, composeCalendar, withCalendarState, themeAttributes, BpkCalendarGridWithTransition, CustomPropTypes, BpkCalendarGridPropTypes, BpkCalendarDatePropTypes };
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import type { ComponentType } from 'react';
|
|
2
2
|
import type { SelectionConfiguration } from './custom-proptypes';
|
|
3
|
+
export declare const DEFAULT_MARK_TODAY = true;
|
|
4
|
+
export declare const DEFAULT_MAX_DATE: Date;
|
|
5
|
+
export declare const DEFAULT_MIN_DATE: Date;
|
|
3
6
|
export type Props = {
|
|
4
7
|
/**
|
|
5
8
|
* If set to true (default), it sets a fixed width on the calendar container. This is necessary to support transitions and to create the right size for the Datepicker component.
|
|
@@ -76,20 +79,6 @@ declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>)
|
|
|
76
79
|
componentWillUpdate?(nextProps: Readonly<CalendarProps<P>>, nextState: Readonly<State>, nextContext: any): void;
|
|
77
80
|
UNSAFE_componentWillUpdate?(nextProps: Readonly<CalendarProps<P>>, nextState: Readonly<State>, nextContext: any): void;
|
|
78
81
|
};
|
|
79
|
-
defaultProps: {
|
|
80
|
-
fixedWidth: boolean;
|
|
81
|
-
maxDate: Date;
|
|
82
|
-
minDate: Date;
|
|
83
|
-
onDateSelect: null;
|
|
84
|
-
onMonthChange: null;
|
|
85
|
-
selectionConfiguration: {
|
|
86
|
-
type: "single";
|
|
87
|
-
date: null;
|
|
88
|
-
};
|
|
89
|
-
initiallyFocusedDate: null;
|
|
90
|
-
markToday: boolean;
|
|
91
|
-
markOutsideDays: boolean;
|
|
92
|
-
};
|
|
93
82
|
contextType?: import("react").Context<any> | undefined;
|
|
94
83
|
};
|
|
95
84
|
declare const _default: {
|
|
@@ -126,20 +115,6 @@ declare const _default: {
|
|
|
126
115
|
componentWillUpdate?(nextProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, nextState: Readonly<State>, nextContext: any): void;
|
|
127
116
|
UNSAFE_componentWillUpdate?(nextProps: Readonly<CalendarProps<import("./composeCalendar").Props>>, nextState: Readonly<State>, nextContext: any): void;
|
|
128
117
|
};
|
|
129
|
-
defaultProps: {
|
|
130
|
-
fixedWidth: boolean;
|
|
131
|
-
maxDate: Date;
|
|
132
|
-
minDate: Date;
|
|
133
|
-
onDateSelect: null;
|
|
134
|
-
onMonthChange: null;
|
|
135
|
-
selectionConfiguration: {
|
|
136
|
-
type: "single";
|
|
137
|
-
date: null;
|
|
138
|
-
};
|
|
139
|
-
initiallyFocusedDate: null;
|
|
140
|
-
markToday: boolean;
|
|
141
|
-
markOutsideDays: boolean;
|
|
142
|
-
};
|
|
143
118
|
contextType?: import("react").Context<any> | undefined;
|
|
144
119
|
};
|
|
145
120
|
export default _default;
|