@skyscanner/backpack-web 42.25.0 → 42.26.0-dev-v27635015998.1

package/README.md

@@ -25,65 +25,65 @@ To contribute please see [contributing.md](CONTRIBUTING.md).
 ## List of packages
 
 [`bpk-animate-height`](/packages/bpk-animate-height)
-[`bpk-component-accordion`](/packages/bpk-component-accordion)
-[`bpk-component-autosuggest`](/packages/bpk-component-autosuggest)
-[`bpk-component-badge`](/packages/bpk-component-badge)
-[`bpk-component-banner-alert`](/packages/bpk-component-banner-alert)
-[`bpk-component-barchart`](/packages/bpk-component-barchart)
-[`bpk-component-blockquote`](/packages/bpk-component-blockquote)
-[`bpk-component-bottom-sheet`](/packages/bpk-component-bottom-sheet)
-[`bpk-component-breadcrumb`](/packages/bpk-component-breadcrumb)
-[`bpk-component-breakpoint`](/packages/bpk-component-breakpoint)
-[`bpk-component-button`](/packages/bpk-component-button)
-[`bpk-component-calendar`](/packages/bpk-component-calendar)
-[`bpk-component-card`](/packages/bpk-component-card)
-[`bpk-component-checkbox`](/packages/bpk-component-checkbox)
-[`bpk-component-chip`](/packages/bpk-component-chip)
-[`bpk-component-close-button`](/packages/bpk-component-close-button)
-[`bpk-component-code`](/packages/bpk-component-code)
-[`bpk-component-datatable`](/packages/bpk-component-datatable)
-[`bpk-component-datepicker`](/packages/bpk-component-datepicker)
-[`bpk-component-description-list`](/packages/bpk-component-description-list)
-[`bpk-component-dialog`](/packages/bpk-component-dialog)
-[`bpk-component-drawer`](/packages/bpk-component-drawer)
-[`bpk-component-fieldset`](/packages/bpk-component-fieldset)
-[`bpk-component-form-validation`](/packages/bpk-component-form-validation)
-[`bpk-component-graphic-promotion`](/packages/bpk-component-graphic-promotion)
-[`bpk-component-grid-toggle`](/packages/bpk-component-grid-toggle)
-[`bpk-component-horizontal-nav`](/packages/bpk-component-horizontal-nav)
-[`bpk-component-icon`](/packages/bpk-component-icon)
-[`bpk-component-image`](/packages/bpk-component-image)
-[`bpk-component-infinite-scroll`](/packages/bpk-component-infinite-scroll)
-[`bpk-component-input`](/packages/bpk-component-input)
-[`bpk-component-label`](/packages/bpk-component-label)
-[`bpk-component-link`](/packages/bpk-component-link)
-[`bpk-component-list`](/packages/bpk-component-list)
-[`bpk-component-loading-button`](/packages/bpk-component-loading-button)
-[`bpk-component-mobile-scroll-container`](/packages/bpk-component-mobile-scroll-container)
-[`bpk-component-modal`](/packages/bpk-component-modal)
-[`bpk-component-navigation-bar`](/packages/bpk-component-navigation-bar)
-[`bpk-component-nudger`](/packages/bpk-component-nudger)
-[`bpk-component-page-indicator`](/packages/bpk-component-page-indicator)
-[`bpk-component-pagination`](/packages/bpk-component-pagination)
-[`bpk-component-panel`](/packages/bpk-component-panel)
-[`bpk-component-phone-input`](/packages/bpk-component-phone-input)
-[`bpk-component-popover`](/packages/bpk-component-popover)
-[`bpk-component-price-range`](/packages/bpk-component-price-range)
-[`bpk-component-progress`](/packages/bpk-component-progress)
-[`bpk-component-radio`](/packages/bpk-component-radio)
-[`bpk-component-rtl-toggle`](/packages/bpk-component-rtl-toggle)
-[`bpk-component-section-list`](/packages/bpk-component-section-list)
-[`bpk-component-select`](/packages/bpk-component-select)
-[`bpk-component-slider`](/packages/bpk-component-slider)
-[`bpk-component-spinner`](/packages/bpk-component-spinner)
-[`bpk-component-star-rating`](/packages/bpk-component-star-rating)
-[`bpk-component-switch`](/packages/bpk-component-switch)
-[`bpk-component-table`](/packages/bpk-component-table)
-[`bpk-component-text`](/packages/bpk-component-text)
-[`bpk-component-textarea`](/packages/bpk-component-textarea)
+[`bpk-component-accordion`](/packages/backpack-web/src/bpk-component-accordion)
+[`bpk-component-autosuggest`](/packages/backpack-web/src/bpk-component-autosuggest)
+[`bpk-component-badge`](/packages/backpack-web/src/bpk-component-badge)
+[`bpk-component-banner-alert`](/packages/backpack-web/src/bpk-component-banner-alert)
+[`bpk-component-barchart`](/packages/backpack-web/src/bpk-component-barchart)
+[`bpk-component-blockquote`](/packages/backpack-web/src/bpk-component-blockquote)
+[`bpk-component-bottom-sheet`](/packages/backpack-web/src/bpk-component-bottom-sheet)
+[`bpk-component-breadcrumb`](/packages/backpack-web/src/bpk-component-breadcrumb)
+[`bpk-component-breakpoint`](/packages/backpack-web/src/bpk-component-breakpoint)
+[`bpk-component-button`](/packages/backpack-web/src/bpk-component-button)
+[`bpk-component-calendar`](/packages/backpack-web/src/bpk-component-calendar)
+[`bpk-component-card`](/packages/backpack-web/src/bpk-component-card)
+[`bpk-component-checkbox`](/packages/backpack-web/src/bpk-component-checkbox)
+[`bpk-component-chip`](/packages/backpack-web/src/bpk-component-chip)
+[`bpk-component-close-button`](/packages/backpack-web/src/bpk-component-close-button)
+[`bpk-component-code`](/packages/backpack-web/src/bpk-component-code)
+[`bpk-component-datatable`](/packages/backpack-web/src/bpk-component-datatable)
+[`bpk-component-datepicker`](/packages/backpack-web/src/bpk-component-datepicker)
+[`bpk-component-description-list`](/packages/backpack-web/src/bpk-component-description-list)
+[`bpk-component-dialog`](/packages/backpack-web/src/bpk-component-dialog)
+[`bpk-component-drawer`](/packages/backpack-web/src/bpk-component-drawer)
+[`bpk-component-fieldset`](/packages/backpack-web/src/bpk-component-fieldset)
+[`bpk-component-form-validation`](/packages/backpack-web/src/bpk-component-form-validation)
+[`bpk-component-graphic-promotion`](/packages/backpack-web/src/bpk-component-graphic-promotion)
+[`bpk-component-grid-toggle`](/packages/backpack-web/src/bpk-component-grid-toggle)
+[`bpk-component-horizontal-nav`](/packages/backpack-web/src/bpk-component-horizontal-nav)
+[`bpk-component-icon`](/packages/backpack-web/src/bpk-component-icon)
+[`bpk-component-image`](/packages/backpack-web/src/bpk-component-image)
+[`bpk-component-infinite-scroll`](/packages/backpack-web/src/bpk-component-infinite-scroll)
+[`bpk-component-input`](/packages/backpack-web/src/bpk-component-input)
+[`bpk-component-label`](/packages/backpack-web/src/bpk-component-label)
+[`bpk-component-link`](/packages/backpack-web/src/bpk-component-link)
+[`bpk-component-list`](/packages/backpack-web/src/bpk-component-list)
+[`bpk-component-loading-button`](/packages/backpack-web/src/bpk-component-loading-button)
+[`bpk-component-mobile-scroll-container`](/packages/backpack-web/src/bpk-component-mobile-scroll-container)
+[`bpk-component-modal`](/packages/backpack-web/src/bpk-component-modal)
+[`bpk-component-navigation-bar`](/packages/backpack-web/src/bpk-component-navigation-bar)
+[`bpk-component-nudger`](/packages/backpack-web/src/bpk-component-nudger)
+[`bpk-component-page-indicator`](/packages/backpack-web/src/bpk-component-page-indicator)
+[`bpk-component-pagination`](/packages/backpack-web/src/bpk-component-pagination)
+[`bpk-component-panel`](/packages/backpack-web/src/bpk-component-panel)
+[`bpk-component-phone-input`](/packages/backpack-web/src/bpk-component-phone-input)
+[`bpk-component-popover`](/packages/backpack-web/src/bpk-component-popover)
+[`bpk-component-price-range`](/packages/backpack-web/src/bpk-component-price-range)
+[`bpk-component-progress`](/packages/backpack-web/src/bpk-component-progress)
+[`bpk-component-radio`](/packages/backpack-web/src/bpk-component-radio)
+[`bpk-component-rtl-toggle`](/packages/backpack-web/src/bpk-component-rtl-toggle)
+[`bpk-component-section-list`](/packages/backpack-web/src/bpk-component-section-list)
+[`bpk-component-select`](/packages/backpack-web/src/bpk-component-select)
+[`bpk-component-slider`](/packages/backpack-web/src/bpk-component-slider)
+[`bpk-component-spinner`](/packages/backpack-web/src/bpk-component-spinner)
+[`bpk-component-star-rating`](/packages/backpack-web/src/bpk-component-star-rating)
+[`bpk-component-switch`](/packages/backpack-web/src/bpk-component-switch)
+[`bpk-component-table`](/packages/backpack-web/src/bpk-component-table)
+[`bpk-component-text`](/packages/backpack-web/src/bpk-component-text)
+[`bpk-component-textarea`](/packages/backpack-web/src/bpk-component-textarea)
 [`bpk-theming`](/packages/bpk-theming)
-[`bpk-component-ticket`](/packages/bpk-component-ticket)
-[`bpk-component-tooltip`](/packages/bpk-component-tooltip)
+[`bpk-component-ticket`](/packages/backpack-web/src/bpk-component-ticket)
+[`bpk-component-tooltip`](/packages/backpack-web/src/bpk-component-tooltip)
 [`bpk-react-utils`](/packages/bpk-react-utils)
 [`bpk-mixins`](/packages/bpk-mixins)
 [`bpk-stylesheets`](/packages/bpk-stylesheets)

package/bpk-component-accordion/src/BpkAccordionItem.d.ts

@@ -7,7 +7,7 @@ export type BpkAccordionItemProps = {
     className?: string;
     expanded?: boolean;
     initiallyExpanded?: boolean;
-    icon?: ReactElement;
+    icon?: ReactElement<any>;
     onClick?: () => void;
     tagName?: 'span' | 'p' | 'text' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     textStyle?: (typeof TEXT_STYLES)[keyof typeof TEXT_STYLES];

package/bpk-component-accordion/src/withAccordionItemState.d.ts

@@ -1,8 +1,8 @@
 import type { ComponentType } from 'react';
 import type { BpkAccordionItemProps } from './BpkAccordionItem';
 type Props = {
-    initiallyExpanded: boolean;
-    expanded: boolean;
+    initiallyExpanded?: boolean;
+    expanded?: boolean;
     onClick?: () => void;
 };
 type State = {
@@ -34,11 +34,6 @@ declare const withAccordionItemState: <P extends BpkAccordionItemProps>(Composed
         UNSAFE_componentWillUpdate?(nextProps: Readonly<P & Props>, nextState: Readonly<State>, nextContext: any): void;
     };
     displayName: string;
-    defaultProps: {
-        initiallyExpanded: boolean;
-        expanded: boolean;
-        onClick: null;
-    };
     contextType?: import("react").Context<any> | undefined;
 };
 export default withAccordionItemState;

package/bpk-component-accordion/src/withAccordionItemState.js

@@ -22,15 +22,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const withAccordionItemState = ComposedComponent => {
   class WithAccordionItemState extends Component {
     static displayName = wrapDisplayName(ComposedComponent, 'withAccordionItemState');
-    static defaultProps = {
-      initiallyExpanded: false,
-      expanded: false,
-      onClick: null
-    };
     constructor(props) {
       super(props);
+      const {
+        initiallyExpanded = false
+      } = props;
       this.state = {
-        expanded: props.initiallyExpanded
+        expanded: initiallyExpanded
       };
     }
     onClick = () => {

package/bpk-component-accordion/src/withSingleItemAccordionState.d.ts

@@ -9,7 +9,7 @@ type State = {
 declare const withSingleItemAccordionState: <P extends BpkAccordionProps>(ComposedComponent: ComponentType<P>) => {
     new (props: P & Props): {
         openAccordionItem: (key?: string | number | null) => void;
-        renderAccordionItem: (accordionItem: ReactElement) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        renderAccordionItem: (accordionItem: ReactElement<any>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
         render(): import("react/jsx-runtime").JSX.Element;
         context: unknown;
         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;

package/bpk-component-aria-live/src/BpkAriaLive.d.ts

@@ -6,7 +6,7 @@ export declare const POLITENESS_SETTINGS: {
 };
 export type PolitenessSetting = (typeof POLITENESS_SETTINGS)[keyof typeof POLITENESS_SETTINGS];
 export type Props = {
-    children: ReactElement | string;
+    children: ReactElement<any> | string;
     politenessSetting?: PolitenessSetting;
     visible?: boolean;
     className?: string | null;

package/bpk-component-aria-live/src/BpkAriaLive.story-helpers.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 type AriaLiveDemoProps = {
-    preamble?: ReactElement | null;
-    children: ReactElement;
+    preamble?: ReactElement<any> | null;
+    children: ReactElement<any>;
     className?: string | null;
     style?: {};
     visible?: Boolean;

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.d.ts

@@ -37,7 +37,7 @@ export type BpkAutoSuggestProps<T> = {
     }) => void;
     onSuggestionsFetchRequested: (value: string) => void;
     onSuggestionsClearRequested: () => void;
-    renderSuggestion: (suggestion: T) => ReactElement;
+    renderSuggestion: (suggestion: T) => ReactElement<any>;
     id: string;
     enterKeyHint?: EnterKeyHintType;
     getA11yResultsMessage: (resultCount: number) => string;
@@ -45,20 +45,20 @@ export type BpkAutoSuggestProps<T> = {
     isDesktop?: boolean;
     onLoad?: (inputValue: string) => void;
     onClick?: () => void;
-    renderBesideInput?: () => ReactElement;
+    renderBesideInput?: () => ReactElement<any>;
     showClear?: boolean;
     theme?: Partial<BpkAutoSuggestTheme>;
     highlightFirstSuggestion?: boolean;
     shouldRenderSuggestions?: (value?: string) => boolean;
     multiSection?: boolean;
     getSectionSuggestions?: (section: T) => T[];
-    renderSectionTitle?: (section: T) => ReactElement | null;
+    renderSectionTitle?: (section: T) => ReactElement<any> | null;
     alwaysRenderSuggestions?: boolean;
     onInputValueChange?: (input: {
         method: string;
         newValue: string;
     }) => void;
-    renderInputComponent?: (inputProps: BpkInputRenderProps) => ReactElement;
+    renderInputComponent?: (inputProps: BpkInputRenderProps) => ReactElement<any>;
     onSuggestionHighlighted?: (data: {
         suggestion: T | null;
     }) => void;

package/bpk-component-badge/src/BpkBadge.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.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))}
+.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))}

package/bpk-component-banner-alert/src/AnimateAndFade.d.ts

@@ -1,8 +1,8 @@
 import { Component } from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 type Props = {
-    animateOnEnter: boolean;
-    animateOnLeave: boolean;
+    animateOnEnter?: boolean;
+    animateOnLeave?: boolean;
     children: ReactNode | string;
     show: boolean;
     className?: string | undefined;
@@ -16,15 +16,12 @@ type State = {
 };
 declare class AnimateAndFade extends Component<Props, State> {
     toggleImmediately: boolean;
-    static defaultProps: {
-        animateOnEnter: boolean;
-        animateOnLeave: boolean;
-    };
     constructor(props: Props);
     componentDidMount(): void;
     componentDidUpdate(prevProps: Props): void;
     onAnimateHeightComplete: () => void;
     onFadeComplete: () => void;
+    nodeRef: RefObject<HTMLElement>;
     toggle: () => void;
     render(): import("react/jsx-runtime").JSX.Element | null;
 }

package/bpk-component-banner-alert/src/AnimateAndFade.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
+import { Component, cloneElement, createRef, isValidElement } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkAnimateHeight from "../../bpk-animate-height";
@@ -26,14 +26,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ANIMATION_DURATION = parseInt(durationSm, 10);
 class AnimateAndFade extends Component {
-  static defaultProps = {
-    animateOnEnter: false,
-    animateOnLeave: false
-  };
   constructor(props) {
     super(props);
-    this.toggleImmediately = this.props.show && this.props.animateOnEnter;
-    const initiallyShown = this.toggleImmediately ? false : this.props.show;
+    const {
+      animateOnEnter = false,
+      show
+    } = props;
+    this.toggleImmediately = show && animateOnEnter;
+    const initiallyShown = this.toggleImmediately ? false : show;
     this.state = {
       isExpanded: initiallyShown,
       visible: initiallyShown,
@@ -78,6 +78,7 @@ class AnimateAndFade extends Component {
       });
     }
   };
+  nodeRef = /*#__PURE__*/createRef();
   toggle = () => {
     if (this.state.visible && this.state.isExpanded) {
       this.setState({
@@ -93,8 +94,8 @@ class AnimateAndFade extends Component {
   };
   render() {
     const {
-      animateOnEnter,
-      animateOnLeave,
+      animateOnEnter = false,
+      animateOnLeave = false,
       children,
       className
     } = this.props;
@@ -119,6 +120,7 @@ class AnimateAndFade extends Component {
           appear: animateOnEnter,
           onTransitionEnd: this.onFadeComplete,
           children: this.state.visible && /*#__PURE__*/_jsx(CSSTransition, {
+            nodeRef: this.nodeRef,
             classNames: {
               exit: getClassName('bpk-animate-and-fade--leave'),
               exitActive: getClassName('bpk-animate-and-fade--leave-active'),
@@ -131,7 +133,9 @@ class AnimateAndFade extends Component {
               enter: ANIMATION_DURATION * 2,
               exit: ANIMATION_DURATION * 2
             },
-            children: children
+            children: /*#__PURE__*/isValidElement(children) ? /*#__PURE__*/cloneElement(children, {
+              ref: this.nodeRef
+            }) : children
           })
         })]
       })

package/bpk-component-banner-alert/src/withBannerAlertState.d.ts

@@ -71,16 +71,6 @@ declare const withBannerAlertState: <P extends BpkBannerAlertProps>(WrappedCompo
         }>, nextContext: any): void;
     };
     displayName: string;
-    defaultProps: {
-        onDismiss: null;
-        onExpandToggle: null;
-        onHide: null;
-        expanded: boolean;
-        show: boolean;
-        hideAfter: null;
-        animateOnLeave: boolean;
-        children: null;
-    };
     contextType?: import("react").Context<any> | undefined;
 };
 export default withBannerAlertState;

package/bpk-component-banner-alert/src/withBannerAlertState.js

@@ -22,20 +22,10 @@ import BpkBannerAlertExpandable from "./BpkBannerAlertExpandable";
 import { jsx as _jsx } from "react/jsx-runtime";
 const withBannerAlertState = WrappedComponent => {
   class component extends Component {
-    static defaultProps = {
-      onDismiss: null,
-      onExpandToggle: null,
-      onHide: null,
-      expanded: false,
-      show: true,
-      hideAfter: null,
-      animateOnLeave: false,
-      children: null
-    };
     constructor(props) {
       super(props);
       this.state = {
-        expanded: props.expanded,
+        expanded: props.expanded ?? false,
         show: true
       };
       this.hideIntervalId = null;
@@ -84,8 +74,8 @@ const withBannerAlertState = WrappedComponent => {
     };
     render() {
       const {
-        animateOnLeave,
-        children,
+        animateOnLeave = false,
+        children = null,
         expanded,
         hideAfter,
         onDismiss,

package/bpk-component-barchart/src/BpkBarchart.js

@@ -37,34 +37,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const spacing = remToPx('.375rem');
 const lineHeight = remToPx(lineHeightSm);
+const DEFAULT_X_AXIS_MARGIN = 2 * (lineHeight + spacing);
+const DEFAULT_Y_AXIS_MARGIN = 4 * lineHeight + spacing;
+const DEFAULT_Y_AXIS_DOMAIN = [null, null];
+const DEFAULT_GET_BAR_LABEL = (point, xScaleDataKey, yScaleDataKey) => `${point[xScaleDataKey]} - ${point[yScaleDataKey]}`;
+const DEFAULT_GET_BAR_SELECTION = () => false;
 const getMaxYValue = (dataPoints, outlierPercentage) => {
   const meanValue = dataPoints.reduce((d, t) => d + t, 0) / dataPoints.length;
   const maxYValue = Math.max(...dataPoints);
   return outlierPercentage ? Math.min(maxYValue, meanValue * (outlierPercentage / 100) + meanValue) : maxYValue;
 };
 class BpkBarchart extends Component {
-  static defaultProps = {
-    leadingScrollIndicatorClassName: null,
-    trailingScrollIndicatorClassName: null,
-    outlierPercentage: null,
-    showGridlines: false,
-    xAxisMargin: 2 * (lineHeight + spacing),
-    xAxisTickValue: identity,
-    xAxisTickOffset: 0,
-    xAxisTickEvery: 1,
-    yAxisMargin: 4 * lineHeight + spacing,
-    yAxisTickValue: identity,
-    yAxisNumTicks: null,
-    yAxisDomain: [null, null],
-    onBarClick: null,
-    onBarHover: null,
-    onBarFocus: null,
-    // Using type any here as xScaleDataKey or yScaleDataKey are strings and there is an issue that strings are not valid keys
-    getBarLabel: (point, xScaleDataKey, yScaleDataKey) => `${point[xScaleDataKey]} - ${point[yScaleDataKey]}`,
-    getBarSelection: () => false,
-    BarComponent: BpkBarchartBar,
-    disableDataTable: false
-  };
   constructor(props) {
     super(props);
     this.state = {
@@ -97,31 +80,31 @@ class BpkBarchart extends Component {
   };
   render() {
     const {
-      BarComponent,
+      BarComponent = BpkBarchartBar,
       data,
-      disableDataTable,
-      getBarLabel,
-      getBarSelection,
+      disableDataTable = false,
+      getBarLabel = DEFAULT_GET_BAR_LABEL,
+      getBarSelection = DEFAULT_GET_BAR_SELECTION,
       initialHeight,
       initialWidth,
-      leadingScrollIndicatorClassName,
-      onBarClick,
-      onBarFocus,
-      onBarHover,
-      outlierPercentage,
-      showGridlines,
-      trailingScrollIndicatorClassName,
+      leadingScrollIndicatorClassName = null,
+      onBarClick = null,
+      onBarFocus = null,
+      onBarHover = null,
+      outlierPercentage = null,
+      showGridlines = false,
+      trailingScrollIndicatorClassName = null,
       xAxisLabel,
-      xAxisMargin,
-      xAxisTickEvery,
-      xAxisTickOffset,
-      xAxisTickValue,
+      xAxisMargin = DEFAULT_X_AXIS_MARGIN,
+      xAxisTickEvery = 1,
+      xAxisTickOffset = 0,
+      xAxisTickValue = identity,
       xScaleDataKey,
-      yAxisDomain,
+      yAxisDomain = DEFAULT_Y_AXIS_DOMAIN,
       yAxisLabel,
-      yAxisMargin,
-      yAxisNumTicks,
-      yAxisTickValue,
+      yAxisMargin = DEFAULT_Y_AXIS_MARGIN,
+      yAxisNumTicks = null,
+      yAxisTickValue = identity,
       yScaleDataKey,
       ...rest
     } = this.props;

package/bpk-component-barchart/src/BpkBarchartBar.js

@@ -34,15 +34,15 @@ const handleKeyboardEvent = callback => event => {
 const borderRadius = remToPx(borderRadiusXs);
 const BpkBarchartBar = props => {
   const {
-    className,
+    className = null,
     height,
     label,
-    onClick,
-    onFocus,
-    onHover,
-    outlier,
-    padding,
-    selected,
+    onClick = null,
+    onFocus = null,
+    onHover = null,
+    outlier = false,
+    padding = 0,
+    selected = false,
     width,
     x,
     y,
@@ -98,13 +98,4 @@ BpkBarchartBar.propTypes = {
   padding: PropTypes.number,
   selected: PropTypes.bool
 };
-BpkBarchartBar.defaultProps = {
-  className: null,
-  onClick: null,
-  onHover: null,
-  onFocus: null,
-  outlier: false,
-  padding: 0,
-  selected: false
-};
 export default BpkBarchartBar;

package/bpk-component-barchart/src/BpkBarchartBars.js

@@ -49,15 +49,15 @@ const BpkBarchartBars = props => {
     BarComponent,
     data,
     getBarLabel,
-    getBarSelection,
+    getBarSelection = () => false,
     height,
-    innerPadding,
+    innerPadding = 0.35,
     margin,
     maxYValue,
-    onBarClick,
-    onBarFocus,
-    onBarHover,
-    outerPadding,
+    onBarClick = null,
+    onBarFocus = null,
+    onBarHover = null,
+    outerPadding = 0.35,
     xScale,
     xScaleDataKey,
     yScale,
@@ -130,12 +130,4 @@ BpkBarchartBars.propTypes = {
   onBarHover: PropTypes.func,
   onBarFocus: PropTypes.func
 };
-BpkBarchartBars.defaultProps = {
-  outerPadding: 0.35,
-  innerPadding: 0.35,
-  onBarClick: null,
-  onBarHover: null,
-  onBarFocus: null,
-  getBarSelection: () => false
-};
 export default BpkBarchartBars;

package/bpk-component-barchart/src/BpkChartAxis.js

@@ -72,14 +72,14 @@ const getAxisConfig = ({
 const BpkChartAxis = props => {
   const {
     height,
-    label,
+    label = null,
     margin,
-    numTicks,
+    numTicks = null,
     orientation,
     scale,
-    tickEvery,
-    tickOffset,
-    tickValue,
+    tickEvery = 1,
+    tickOffset = 0,
+    tickValue = identity,
     width,
     ...rest
   } = props;
@@ -131,11 +131,4 @@ BpkChartAxis.propTypes = {
   tickOffset: PropTypes.number,
   tickEvery: PropTypes.number
 };
-BpkChartAxis.defaultProps = {
-  tickOffset: 0,
-  tickEvery: 1,
-  tickValue: identity,
-  numTicks: null,
-  label: null
-};
 export default BpkChartAxis;

package/bpk-component-barchart/src/BpkChartDataTable.js

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkChartDataTable = props => {
   const {
-    data,
+    data = null,
     xAxisLabel,
     xScaleDataKey,
     yAxisLabel,
@@ -61,7 +61,4 @@ BpkChartDataTable.propTypes = {
   xAxisLabel: PropTypes.string.isRequired,
   yAxisLabel: PropTypes.string.isRequired
 };
-BpkChartDataTable.defaultProps = {
-  data: null
-};
 export default BpkChartDataTable;

package/bpk-component-barchart/src/BpkChartGridLines.js

@@ -25,11 +25,11 @@ const BpkChartGridLines = props => {
   const {
     height,
     margin,
-    numTicks,
+    numTicks = null,
     orientation,
     scale,
-    tickEvery,
-    tickOffset,
+    tickEvery = 1,
+    tickOffset = 0,
     width,
     ...rest
   } = props;
@@ -75,9 +75,4 @@ BpkChartGridLines.propTypes = {
   tickOffset: PropTypes.number,
   tickEvery: PropTypes.number
 };
-BpkChartGridLines.defaultProps = {
-  numTicks: null,
-  tickOffset: 0,
-  tickEvery: 1
-};
 export default BpkChartGridLines;