@skyscanner/backpack-web 42.23.0 → 42.24.0-dev-v27250828403.1

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/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-banner-alert/src/AnimateAndFade.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 type Props = {
     animateOnEnter: boolean;
     animateOnLeave: boolean;
@@ -25,6 +25,7 @@ declare class AnimateAndFade extends Component<Props, State> {
     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";
@@ -78,6 +78,7 @@ class AnimateAndFade extends Component {
       });
     }
   };
+  nodeRef = /*#__PURE__*/createRef();
   toggle = () => {
     if (this.state.visible && this.state.isExpanded) {
       this.setState({
@@ -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-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;

package/bpk-component-calendar/src/custom-proptypes.d.ts

@@ -25,4 +25,4 @@ export type DaysOfWeek = WeekDay[];
 export type DateModifiers = {
     [key: string]: Function;
 };
-export type ReactComponent = string | ((props: any) => ReactElement);
+export type ReactComponent = string | ((props: any) => ReactElement<any>);

package/bpk-component-card-list/src/common-types.d.ts

@@ -17,7 +17,7 @@ declare const ACCESSORY_MOBILE_TYPES: {
     readonly button: "button";
 };
 type ExpandProps = {
-    children: string | ReactElement;
+    children: string | ReactElement<any>;
     collapsed: boolean;
     onExpandToggle: () => void;
 };
@@ -29,7 +29,7 @@ type AccessibilityLabels = {
     slideLabel?: (index: number, childrenLength: number) => string;
 };
 type CardListBaseProps = {
-    cardList: ReactElement[];
+    cardList: Array<ReactElement<any>>;
     layoutMobile: LayoutMobile;
     layoutDesktop: LayoutDesktop;
     accessoryDesktop?: (typeof ACCESSORY_DESKTOP_TYPES)[keyof typeof ACCESSORY_DESKTOP_TYPES];
@@ -37,7 +37,7 @@ type CardListBaseProps = {
     initiallyShownCardsDesktop?: number;
     initiallyShownCardsMobile?: number;
     initiallyInViewCardIndex?: number;
-    chipGroup?: ReactElement;
+    chipGroup?: ReactElement<any>;
     buttonContent?: React.ReactNode;
     onButtonClick?: () => void;
     onExpandClick?: () => void;
@@ -53,7 +53,7 @@ type TitleProps = {
     description?: never;
 };
 type CardListGridStackProps = {
-    children: ReactElement[];
+    children: Array<ReactElement<any>>;
     initiallyShownCards: number;
     layout: typeof LAYOUTS.grid | typeof LAYOUTS.stack;
     accessory?: typeof ACCESSORY_DESKTOP_TYPES.expand | typeof ACCESSORY_DESKTOP_TYPES.button | typeof ACCESSORY_MOBILE_TYPES.expand | typeof ACCESSORY_MOBILE_TYPES.button;

package/bpk-component-chatbot-input/src/hooks/useChatbotInput.d.ts

@@ -16,7 +16,7 @@ interface UseChatbotInputOptions {
     onKeyDown?: (e: KeyboardEvent) => void;
 }
 interface UseChatbotInputReturn {
-    inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement>;
+    inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
     isFocused: boolean;
     isDisabled: boolean;
     isOverLimit: boolean;

package/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 interface UseTextAreaAutoResizeProps {
-    ref: RefObject<HTMLTextAreaElement>;
+    ref: RefObject<HTMLTextAreaElement | null>;
     value: string;
     enabled?: boolean;
     maxLines?: number;

package/bpk-component-datepicker/src/BpkDatepicker.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import type { ReactElement, RefObject } from 'react';
+import type { ReactElement, Ref } from 'react';
 import type { DaysOfWeek, ReactComponent, SelectionConfiguration } from '../../bpk-component-calendar';
 type Props = {
     changeMonthLabel: string;
@@ -24,7 +24,7 @@ type Props = {
     /**
      * By default BpkInput. If passed, it should be a DOM node with a ref attached to it.
      */
-    inputComponent: ReactElement | null;
+    inputComponent: ReactElement<any> | null;
     dateModifiers?: {};
     fixedWidth?: boolean;
     inputProps?: {};
@@ -51,7 +51,7 @@ type State = {
 declare class BpkDatepicker extends Component<Props, State> {
     inputRef: (ref: HTMLInputElement) => void;
     elementRef?: HTMLInputElement;
-    focusRef?: RefObject<HTMLInputElement>;
+    focusRef?: Ref<HTMLDivElement>;
     static defaultProps: {
         calendarComponent: {
             new (props: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {

package/bpk-component-drawer/src/BpkDrawerContent.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode, RefObject } from 'react';
+import type { ReactNode, Ref } from 'react';
 type Props = {
     children: ReactNode;
-    dialogRef: () => RefObject<HTMLElement>;
+    dialogRef: Ref<HTMLElement>;
     onCloseAnimationComplete: () => void;
     onClose: () => void;
     id: string;

package/bpk-component-drawer/src/BpkDrawerContent.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { useCallback, useRef } from 'react';
 import { Transition } from 'react-transition-group';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
@@ -66,7 +67,18 @@ const BpkDrawerContent = ({
     contentClassNames.push(contentClassName);
   }
   const headingId = `bpk-drawer-heading-${id}`;
+  const nodeRef = useRef(null);
+  const setRefs = useCallback(el => {
+    nodeRef.current = el;
+    const consumerRef = dialogRef;
+    if (typeof consumerRef === 'function') {
+      consumerRef(el);
+    } else if (consumerRef) {
+      consumerRef.current = el;
+    }
+  }, [dialogRef]);
   return /*#__PURE__*/_jsx(Transition, {
+    nodeRef: nodeRef,
     timeout: {
       enter: 0,
       exit: parseInt(animations.durationSm, 10)
@@ -85,7 +97,7 @@ const BpkDrawerContent = ({
         '--dynamic-width': width
       },
       className: [drawerClassNames.join(' '), getClassName(`bpk-drawer--${status}`, mobileModalDisplay ? `bpk-drawer__modal-mobile-view--${status}` : undefined)].join(' '),
-      ref: dialogRef,
+      ref: setRefs,
       ...rest,
       children: [/*#__PURE__*/_jsxs("header", {
         className: getClassName('bpk-drawer__header'),

package/bpk-component-fieldset/src/BpkFieldset.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 type BaseProps = {
-    children: ReactElement;
+    children: ReactElement<any>;
     disabled?: boolean;
     valid?: boolean | null;
     required?: boolean;

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from "../../bpk-component-aria-live";
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
@@ -31,6 +31,7 @@ export const NOTIFICATION_TYPES = {
 };
 const BpkFloatingNotification = props => {
   const [showMessage, setShowMessage] = useState(true);
+  const nodeRef = useRef(null);
   const {
     animateOnEnter = true,
     animateOnExit = true,
@@ -54,6 +55,7 @@ const BpkFloatingNotification = props => {
   });
   return /*#__PURE__*/_jsx(CSSTransition, {
     in: showMessage,
+    nodeRef: nodeRef,
     classNames: {
       exit: getClassName('bpk-floating-notification--leave'),
       exitActive: getClassName('bpk-floating-notification--leave-active'),
@@ -66,6 +68,7 @@ const BpkFloatingNotification = props => {
     exit: animateOnExit,
     onExited: onExit,
     children: /*#__PURE__*/_jsxs("div", {
+      ref: nodeRef,
       className: classNames,
       ...getDataComponentAttribute('FloatingNotification'),
       ...rest,

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

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import type { ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 type Props = {
     animateOnEnter: boolean;
     animateOnLeave: boolean;
@@ -25,6 +25,7 @@ declare class AnimateAndFade extends Component<Props, State> {
     componentDidUpdate(prevProps: Props): void;
     onAnimateHeightComplete: () => void;
     onFadeComplete: () => void;
+    nodeRef: RefObject<HTMLElement>;
     toggle: () => void;
     render(): import("react/jsx-runtime").JSX.Element | null;
 }

package/bpk-component-info-banner/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";
@@ -78,6 +78,7 @@ class AnimateAndFade extends Component {
       });
     }
   };
+  nodeRef = /*#__PURE__*/createRef();
   toggle = () => {
     if (this.state.visible && this.state.isExpanded) {
       this.setState({
@@ -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-input/src/withOpenEvents.d.ts

@@ -40,7 +40,7 @@ declare const withOpenEvents: <P extends object>(WithOpenEventsInputComponent: C
         handleTouchEnd: (event: UIEvent) => void;
         handleFocus: () => void;
         handleBlur: () => void;
-        render(): ReactElement;
+        render(): ReactElement<any>;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<P & import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & Omit<EventHandlers, "inputMode" | "aria-readonly" | "readOnly"> & WithOpenEventsProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;

package/bpk-component-layout/src/BpkProvider.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, JSX } from 'react';
 export interface BpkProviderProps {
     children: ReactNode;
 }

package/bpk-component-map/src/BpkBasicMapMarker.d.ts

@@ -1,15 +1,8 @@
-import PropTypes from 'prop-types';
 import type { ReactNode } from 'react';
 import { type LatLong } from './common-types';
 type Props = {
     children: ReactNode;
     position: LatLong;
 };
-declare const BpkBasicMapMarker: {
-    (props: Props): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        position: any;
-    };
-};
+declare const BpkBasicMapMarker: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkBasicMapMarker;

package/bpk-component-map/src/BpkBasicMapMarker.js

@@ -16,13 +16,11 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkOverlayView from "./BpkOverlayView";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { LatLongPropType } from "./common-types";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getPixelPositionOffset = (width, height) => ({
   x: -(width / 2),
@@ -42,8 +40,4 @@ const BpkBasicMapMarker = props => {
     children: children
   });
 };
-BpkBasicMapMarker.propTypes = {
-  children: PropTypes.node.isRequired,
-  position: LatLongPropType.isRequired
-};
 export default BpkBasicMapMarker;

package/bpk-component-map/src/BpkIconMarker.js

@@ -24,12 +24,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkIconMarker = props => {
   const {
-    buttonProps,
-    className,
+    buttonProps = null,
+    className = null,
     icon,
-    onClick,
+    onClick = null,
     position,
-    selected,
+    selected = false,
     ...rest
   } = props;
   const wrapperClassNames = getClassName('bpk-icon-marker__wrapper', selected && 'bpk-icon-marker__wrapper--selected', className);
@@ -64,10 +64,4 @@ BpkIconMarker.propTypes = {
   selected: PropTypes.bool,
   buttonProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
 };
-BpkIconMarker.defaultProps = {
-  className: null,
-  onClick: null,
-  selected: false,
-  buttonProps: null
-};
 export default BpkIconMarker;

package/bpk-component-map/src/BpkIconMarkerBackground.js

@@ -20,9 +20,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkIconMarkerBackground = props => {
   const {
-    disabled,
-    interactive,
-    selected,
+    disabled = false,
+    interactive = false,
+    selected = false,
     ...rest
   } = props;
   const classNames = getClassName('bpk-icon-marker-background', interactive && 'bpk-icon-marker-background--interactive', disabled && 'bpk-icon-marker-background--disabled', selected && 'bpk-icon-marker-background--selected');
@@ -61,9 +61,4 @@ const BpkIconMarkerBackground = props => {
     })
   );
 };
-BpkIconMarkerBackground.defaultProps = {
-  disabled: false,
-  interactive: false,
-  selected: false
-};
 export default BpkIconMarkerBackground;