@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.
Files changed (117) hide show
  1. package/bpk-component-accordion/src/BpkAccordionItem.d.ts +1 -1
  2. package/bpk-component-accordion/src/withAccordionItemState.d.ts +2 -7
  3. package/bpk-component-accordion/src/withAccordionItemState.js +4 -6
  4. package/bpk-component-accordion/src/withSingleItemAccordionState.d.ts +1 -1
  5. package/bpk-component-aria-live/src/BpkAriaLive.d.ts +1 -1
  6. package/bpk-component-aria-live/src/BpkAriaLive.story-helpers.d.ts +2 -2
  7. package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.d.ts +4 -4
  8. package/bpk-component-badge/src/BpkBadge.module.css +1 -1
  9. package/bpk-component-banner-alert/src/AnimateAndFade.d.ts +4 -7
  10. package/bpk-component-banner-alert/src/AnimateAndFade.js +14 -10
  11. package/bpk-component-banner-alert/src/withBannerAlertState.d.ts +0 -10
  12. package/bpk-component-banner-alert/src/withBannerAlertState.js +3 -13
  13. package/bpk-component-barchart/src/BpkBarchart.js +24 -41
  14. package/bpk-component-barchart/src/BpkBarchartBar.js +7 -16
  15. package/bpk-component-barchart/src/BpkBarchartBars.js +6 -14
  16. package/bpk-component-barchart/src/BpkChartAxis.js +5 -12
  17. package/bpk-component-barchart/src/BpkChartDataTable.js +1 -4
  18. package/bpk-component-barchart/src/BpkChartGridLines.js +3 -8
  19. package/bpk-component-calendar/index.d.ts +2 -2
  20. package/bpk-component-calendar/index.js +2 -2
  21. package/bpk-component-calendar/src/BpkCalendarContainer.d.ts +3 -28
  22. package/bpk-component-calendar/src/BpkCalendarContainer.js +47 -34
  23. package/bpk-component-calendar/src/BpkCalendarDate.d.ts +0 -1
  24. package/bpk-component-calendar/src/BpkCalendarDate.js +32 -31
  25. package/bpk-component-calendar/src/BpkCalendarGrid.d.ts +13 -14
  26. package/bpk-component-calendar/src/BpkCalendarGrid.js +28 -37
  27. package/bpk-component-calendar/src/BpkCalendarGridHeader.d.ts +0 -4
  28. package/bpk-component-calendar/src/BpkCalendarGridHeader.js +2 -6
  29. package/bpk-component-calendar/src/BpkCalendarGridTransition.d.ts +0 -5
  30. package/bpk-component-calendar/src/BpkCalendarGridTransition.js +0 -5
  31. package/bpk-component-calendar/src/BpkCalendarWeek.d.ts +0 -1
  32. package/bpk-component-calendar/src/BpkCalendarWeek.js +19 -27
  33. package/bpk-component-calendar/src/custom-proptypes.d.ts +1 -1
  34. package/bpk-component-card-list/src/BpkCardList.js +0 -3
  35. package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.js +1 -3
  36. package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.js +1 -14
  37. package/bpk-component-card-list/src/BpkCardListRowRail/utils.d.ts +1 -2
  38. package/bpk-component-card-list/src/BpkCardListRowRail/utils.js +0 -21
  39. package/bpk-component-card-list/src/common-types.d.ts +4 -7
  40. package/bpk-component-chatbot-input/src/hooks/useChatbotInput.d.ts +1 -1
  41. package/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.d.ts +1 -1
  42. package/bpk-component-datepicker/src/BpkDatepicker.d.ts +6 -192
  43. package/bpk-component-datepicker/src/BpkDatepicker.js +47 -53
  44. package/bpk-component-dialog/src/BpkDialogInner.d.ts +0 -7
  45. package/bpk-component-drawer/src/BpkDrawerContent.d.ts +2 -2
  46. package/bpk-component-drawer/src/BpkDrawerContent.js +13 -1
  47. package/bpk-component-fieldset/src/BpkFieldset.d.ts +1 -1
  48. package/bpk-component-floating-notification/src/BpkFloatingNotification.js +4 -1
  49. package/bpk-component-grid-toggle/src/BpkGridToggle.js +9 -7
  50. package/bpk-component-image/src/BpkBackgroundImage.d.ts +1 -9
  51. package/bpk-component-image/src/BpkBackgroundImage.js +18 -18
  52. package/bpk-component-image/src/BpkImage.d.ts +1 -8
  53. package/bpk-component-image/src/BpkImage.js +10 -18
  54. package/bpk-component-image/src/withLazyLoading.d.ts +0 -4
  55. package/bpk-component-image/src/withLazyLoading.js +2 -6
  56. package/bpk-component-infinite-scroll/src/withInfiniteScroll.js +6 -8
  57. package/bpk-component-info-banner/src/AnimateAndFade.d.ts +4 -7
  58. package/bpk-component-info-banner/src/AnimateAndFade.js +14 -10
  59. package/bpk-component-info-banner/src/withBannerAlertState.d.ts +0 -10
  60. package/bpk-component-info-banner/src/withBannerAlertState.js +3 -13
  61. package/bpk-component-input/index.d.ts +2 -2
  62. package/bpk-component-input/index.js +2 -2
  63. package/bpk-component-input/src/BpkInput.d.ts +0 -13
  64. package/bpk-component-input/src/BpkInput.js +13 -12
  65. package/bpk-component-input/src/common-types.d.ts +0 -32
  66. package/bpk-component-input/src/common-types.js +1 -56
  67. package/bpk-component-input/src/withOpenEvents.d.ts +1 -12
  68. package/bpk-component-input/src/withOpenEvents.js +2 -14
  69. package/bpk-component-layout/src/types.d.ts +19 -35
  70. package/bpk-component-map/src/BpkBasicMapMarker.d.ts +1 -8
  71. package/bpk-component-map/src/BpkBasicMapMarker.js +0 -6
  72. package/bpk-component-map/src/BpkIconMarker.js +4 -10
  73. package/bpk-component-map/src/BpkIconMarkerBackground.js +3 -8
  74. package/bpk-component-map/src/BpkMap.js +14 -30
  75. package/bpk-component-map/src/withGoogleMapsScript.js +4 -8
  76. package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.d.ts +0 -1
  77. package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +1 -5
  78. package/bpk-component-modal/index.d.ts +1 -2
  79. package/bpk-component-modal/index.js +1 -3
  80. package/bpk-component-navigation-bar/src/BpkNavigationBar.d.ts +2 -2
  81. package/bpk-component-phone-input/src/BpkPhoneInput.js +6 -14
  82. package/bpk-component-popover/src/BpkPopover.d.ts +1 -1
  83. package/bpk-component-popover/src/BpkPopover.js +1 -1
  84. package/bpk-component-progress/src/BpkProgress.d.ts +0 -8
  85. package/bpk-component-progress/src/BpkProgress.js +10 -16
  86. package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.d.ts +0 -14
  87. package/bpk-component-section-list/src/BpkSectionListItem.js +4 -10
  88. package/bpk-component-section-list/src/BpkSectionListSection.js +1 -4
  89. package/bpk-component-segmented-control/src/BpkSegmentedControl.d.ts +1 -1
  90. package/bpk-component-select/src/BpkSelect.d.ts +1 -1
  91. package/bpk-component-slider/src/BpkSlider.js +1 -1
  92. package/bpk-component-spinner/src/SpinnerLayout.story-helpers.d.ts +1 -7
  93. package/bpk-component-spinner/src/SpinnerLayout.story-helpers.js +0 -4
  94. package/bpk-component-split-input/src/BpkInputField.d.ts +2 -6
  95. package/bpk-component-split-input/src/BpkInputField.js +2 -6
  96. package/bpk-component-split-input/src/BpkSplitInput.d.ts +0 -6
  97. package/bpk-component-split-input/src/BpkSplitInput.js +7 -13
  98. package/bpk-component-star-rating/src/withInteractiveStarRatingState.d.ts +0 -3
  99. package/bpk-component-star-rating/src/withInteractiveStarRatingState.js +0 -3
  100. package/bpk-component-ticket/src/BpkTicket.js +6 -14
  101. package/bpk-mixins/_badges.scss +3 -3
  102. package/bpk-react-utils/index.d.ts +3 -1
  103. package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js +1 -0
  104. package/bpk-react-utils/src/Portal.d.ts +10 -22
  105. package/bpk-react-utils/src/Portal.js +22 -19
  106. package/bpk-react-utils/src/TransitionInitialMount.d.ts +4 -2
  107. package/bpk-react-utils/src/TransitionInitialMount.js +23 -14
  108. package/bpk-scrim-utils/index.d.ts +0 -7
  109. package/bpk-scrim-utils/src/withScrim.d.ts +0 -7
  110. package/bpk-scrim-utils/src/withScrim.js +10 -15
  111. package/bpk-stylesheets/base.css +1 -1
  112. package/bpk-stylesheets/font.css +1 -1
  113. package/bpk-stylesheets/font.scss +65 -3
  114. package/bpk-stylesheets/theme-backpack-dark.css +4 -0
  115. package/bpk-stylesheets/theme-backpack-light.css +7 -3
  116. package/package.json +3 -3
  117. 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: boolean;
5
- expanded: boolean;
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: props.initiallyExpanded
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:.875rem;line-height:1.25rem;font-weight:400;font-size:var(--bpk-badge-font-size, 0.875rem);font-weight:var(--bpk-badge-font-weight, 400);line-height:var(--bpk-badge-line-height, 1.25rem)}.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))}
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: boolean;
5
- animateOnLeave: boolean;
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
- this.toggleImmediately = this.props.show && this.props.animateOnEnter;
36
- const initiallyShown = this.toggleImmediately ? false : this.props.show;
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;