@skyscanner/backpack-web 42.27.2 → 43.0.0-dev-v28150129018.1

package/bpk-component-card-list/src/BpkCardListRowRail/utils.js

@@ -98,7 +98,6 @@ export const usePageScrollSync = ({
   container,
   currentIndex,
   enabled,
-  initialPageIndex,
   initiallyShownCards,
   setCurrentIndex,
   visibilityList
@@ -106,26 +105,6 @@ export const usePageScrollSync = ({
   const isUserScrollingRef = useRef(false);
   const scrollEndTimeoutRef = useRef(null);
   const lastCurrentIndexRef = useRef(currentIndex);
-  const hasInitialScrolled = useRef(false);
-
-  // Effect 0: Initial scroll (instant, runs once on mount)
-  useEffect(() => {
-    if (hasInitialScrolled.current) {
-      return;
-    }
-    hasInitialScrolled.current = true;
-    if (!enabled || initialPageIndex === 0) {
-      return;
-    }
-    const targetCard = cardRefs.current?.[initialPageIndex * initiallyShownCards];
-    if (targetCard) {
-      targetCard.scrollIntoView({
-        behavior: 'instant',
-        block: 'nearest',
-        inline: 'start'
-      });
-    }
-  }, [cardRefs, enabled, initialPageIndex, initiallyShownCards]); // Run once on mount only
 
   // Effect 1: Programmatic scroll when currentIndex changes
   useEffect(() => {

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,15 +29,14 @@ 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];
     accessoryMobile?: (typeof ACCESSORY_MOBILE_TYPES)[keyof typeof ACCESSORY_MOBILE_TYPES];
     initiallyShownCardsDesktop?: number;
     initiallyShownCardsMobile?: number;
-    initiallyInViewCardIndex?: number;
-    chipGroup?: ReactElement;
+    chipGroup?: ReactElement<any>;
     buttonContent?: React.ReactNode;
     onButtonClick?: () => void;
     onExpandClick?: () => void;
@@ -53,7 +52,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;
@@ -70,7 +69,6 @@ type CardListRowRailProps = {
     accessory?: typeof ACCESSORY_DESKTOP_TYPES.pagination;
     isMobile?: boolean;
     accessibilityLabels?: AccessibilityLabels;
-    initiallyInViewCardIndex: number;
 };
 type CardListCarouselProps = {
     children: Array<ReactElement<HTMLDivElement | HTMLAnchorElement>>;
@@ -81,7 +79,6 @@ type CardListCarouselProps = {
     isMobile?: boolean;
     carouselLabel?: (initiallyShownCards: number, childrenLength: number) => string;
     slideLabel?: (index: number, childrenLength: number) => string;
-    initialPageIndex: number;
 };
 type CardListProps = CardListBaseProps;
 export default CardListProps;

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;
@@ -17,14 +17,14 @@ type Props = {
      * The "pagewrap" element id is a convention we use internally at Skyscanner. In most cases it should "just work".
      */
     getApplicationElement: () => HTMLElement | null;
-    nextMonthLabel: string;
-    previousMonthLabel: string;
     weekStartsOn: number;
-    calendarComponent: ReactComponent;
+    nextMonthLabel?: string | null;
+    previousMonthLabel?: string | null;
+    calendarComponent?: ReactComponent;
     /**
      * 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,193 +51,7 @@ type State = {
 declare class BpkDatepicker extends Component<Props, State> {
     inputRef: (ref: HTMLInputElement) => void;
     elementRef?: HTMLInputElement;
-    focusRef?: RefObject<HTMLInputElement>;
-    static defaultProps: {
-        calendarComponent: {
-            new (props: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
-                onDateClick: ((date: Date) => void) | null;
-                onDateKeyDown: ((event: KeyboardEvent) => void) | null;
-                month: Date;
-                minDate: Date;
-                maxDate: Date;
-            }> & {
-                [rest: string]: any;
-            }): {
-                componentDidUpdate(prevProps: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
-                    onDateClick: ((date: Date) => void) | null;
-                    onDateKeyDown: ((event: KeyboardEvent) => void) | null;
-                    month: Date;
-                    minDate: Date;
-                    maxDate: Date;
-                }> & {
-                    [rest: string]: any;
-                }): void;
-                handleDateFocus: (event: UIEvent, { date, source }: {
-                    date: Date;
-                    source: string;
-                }) => void;
-                handleDateSelect: (date: Date) => void;
-                handleMonthChange: (event: UIEvent, { month, source }: {
-                    month: Date;
-                    source: string;
-                }) => void;
-                handleDateKeyDown: (event: KeyboardEvent) => void;
-                render(): import("react/jsx-runtime").JSX.Element;
-                context: unknown;
-                setState<K extends keyof {
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                }>(state: {
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                } | ((prevState: Readonly<{
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                }>, props: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
-                    onDateClick: ((date: Date) => void) | null;
-                    onDateKeyDown: ((event: KeyboardEvent) => void) | null;
-                    month: Date;
-                    minDate: Date;
-                    maxDate: Date;
-                }> & {
-                    [rest: string]: any;
-                }>) => {
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                } | Pick<{
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                }, K> | null) | Pick<{
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                }, K> | null, callback?: (() => void) | undefined): void;
-                forceUpdate(callback?: (() => void) | undefined): void;
-                readonly props: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
-                    onDateClick: ((date: Date) => void) | null;
-                    onDateKeyDown: ((event: KeyboardEvent) => void) | null;
-                    month: Date;
-                    minDate: Date;
-                    maxDate: Date;
-                }> & {
-                    [rest: string]: any;
-                }>;
-                state: Readonly<{
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                }>;
-                refs: {
-                    [key: string]: import("react").ReactInstance;
-                };
-                componentDidMount?(): void;
-                shouldComponentUpdate?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
-                    onDateClick: ((date: Date) => void) | null;
-                    onDateKeyDown: ((event: KeyboardEvent) => void) | null;
-                    month: Date;
-                    minDate: Date;
-                    maxDate: Date;
-                }> & {
-                    [rest: string]: any;
-                }>, nextState: Readonly<{
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                }>, nextContext: any): boolean;
-                componentWillUnmount?(): void;
-                componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-                getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
-                    onDateClick: ((date: Date) => void) | null;
-                    onDateKeyDown: ((event: KeyboardEvent) => void) | null;
-                    month: Date;
-                    minDate: Date;
-                    maxDate: Date;
-                }> & {
-                    [rest: string]: any;
-                }>, prevState: Readonly<{
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                }>): any;
-                componentWillMount?(): void;
-                UNSAFE_componentWillMount?(): void;
-                componentWillReceiveProps?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
-                    onDateClick: ((date: Date) => void) | null;
-                    onDateKeyDown: ((event: KeyboardEvent) => void) | null;
-                    month: Date;
-                    minDate: Date;
-                    maxDate: Date;
-                }> & {
-                    [rest: string]: any;
-                }>, nextContext: any): void;
-                UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
-                    onDateClick: ((date: Date) => void) | null;
-                    onDateKeyDown: ((event: KeyboardEvent) => void) | null;
-                    month: Date;
-                    minDate: Date;
-                    maxDate: Date;
-                }> & {
-                    [rest: string]: any;
-                }>, nextContext: any): void;
-                componentWillUpdate?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
-                    onDateClick: ((date: Date) => void) | null;
-                    onDateKeyDown: ((event: KeyboardEvent) => void) | null;
-                    month: Date;
-                    minDate: Date;
-                    maxDate: Date;
-                }> & {
-                    [rest: string]: any;
-                }>, nextState: Readonly<{
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                }>, nextContext: any): void;
-                UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
-                    onDateClick: ((date: Date) => void) | null;
-                    onDateKeyDown: ((event: KeyboardEvent) => void) | null;
-                    month: Date;
-                    minDate: Date;
-                    maxDate: Date;
-                }> & {
-                    [rest: string]: any;
-                }>, nextState: Readonly<{
-                    preventKeyboardFocus: boolean;
-                    focusedDate: Date;
-                }>, nextContext: any): void;
-            };
-            defaultProps: {
-                fixedWidth: boolean;
-                maxDate: Date;
-                minDate: Date;
-                onDateSelect: null;
-                onMonthChange: null;
-                selectionConfiguration: {
-                    type: "single";
-                    date: null;
-                };
-                initiallyFocusedDate: null;
-                markToday: boolean;
-                markOutsideDays: boolean;
-            };
-            contextType?: import("react").Context<any> | undefined;
-        };
-        inputComponent: null;
-        dateModifiers: {};
-        inputProps: {};
-        fixedWidth: boolean;
-        markOutsideDays: boolean;
-        markToday: boolean;
-        maxDate: Date;
-        minDate: Date;
-        nextMonthLabel: null;
-        onDateSelect: null;
-        onOpenChange: null;
-        onMonthChange: null;
-        previousMonthLabel: null;
-        selectionConfiguration: {
-            type: "single";
-            date: null;
-        };
-        initiallyFocusedDate: null;
-        renderTarget: null;
-        isOpen: boolean;
-        valid: null;
-    };
+    focusRef?: Ref<HTMLDivElement>;
     constructor(props: Props);
     componentDidUpdate(prevProps: Props, prevState: State): void;
     onOpen: () => void;

package/bpk-component-datepicker/src/BpkDatepicker.js

@@ -18,7 +18,7 @@
 
 import { createRef, Component } from 'react';
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
-import { composeCalendar, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate, withCalendarState, CALENDAR_SELECTION_TYPE, DateUtils, BpkCalendarNav } from "../../bpk-component-calendar";
+import { composeCalendar, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate, withCalendarState, CALENDAR_SELECTION_TYPE, DEFAULT_MARK_TODAY, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE, DateUtils, BpkCalendarNav } from "../../bpk-component-calendar";
 import BpkInput, { withOpenEvents } from "../../bpk-component-input";
 import BpkModal from "../../bpk-component-modal";
 import BpkPopover from "../../bpk-component-popover";
@@ -26,35 +26,18 @@ import { setNativeValue, getDataComponentAttribute } from "../../bpk-react-utils
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const Input = withOpenEvents(BpkInput);
 const DefaultCalendar = withCalendarState(composeCalendar(BpkCalendarNav, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate));
+const DEFAULT_SELECTION_CONFIGURATION = {
+  type: CALENDAR_SELECTION_TYPE.single,
+  date: null
+};
 class BpkDatepicker extends Component {
-  static defaultProps = {
-    calendarComponent: DefaultCalendar,
-    inputComponent: null,
-    dateModifiers: {},
-    inputProps: {},
-    fixedWidth: true,
-    markOutsideDays: true,
-    markToday: DefaultCalendar.defaultProps.markToday,
-    maxDate: DefaultCalendar.defaultProps.maxDate,
-    minDate: DefaultCalendar.defaultProps.minDate,
-    nextMonthLabel: null,
-    onDateSelect: null,
-    onOpenChange: null,
-    onMonthChange: null,
-    previousMonthLabel: null,
-    selectionConfiguration: {
-      type: CALENDAR_SELECTION_TYPE.single,
-      date: null
-    },
-    initiallyFocusedDate: null,
-    renderTarget: null,
-    isOpen: false,
-    valid: null
-  };
   constructor(props) {
     super(props);
+    const {
+      isOpen = false
+    } = props;
     this.state = {
-      isOpen: props.isOpen
+      isOpen
     };
     this.focusRef = /*#__PURE__*/createRef();
     this.inputRef = ref => {
@@ -63,9 +46,12 @@ class BpkDatepicker extends Component {
   }
   componentDidUpdate(prevProps, prevState) {
     const {
-      isOpen
+      isOpen = false
     } = this.props;
-    if (prevProps.isOpen !== isOpen && prevState.isOpen !== isOpen) {
+    const {
+      isOpen: prevIsOpen = false
+    } = prevProps;
+    if (prevIsOpen !== isOpen && prevState.isOpen !== isOpen) {
       if (isOpen) {
         this.onOpen();
       } else {
@@ -74,19 +60,25 @@ class BpkDatepicker extends Component {
     }
   }
   onOpen = () => {
+    const {
+      onOpenChange = null
+    } = this.props;
     this.setState({
       isOpen: true
     });
-    if (this.props.onOpenChange) {
-      this.props.onOpenChange(true);
+    if (onOpenChange) {
+      onOpenChange(true);
     }
   };
   onClose = () => {
+    const {
+      onOpenChange = null
+    } = this.props;
     this.setState({
       isOpen: false
     });
-    if (this.props.onOpenChange) {
-      this.props.onOpenChange(false);
+    if (onOpenChange) {
+      onOpenChange(false);
     }
   };
 
@@ -133,23 +125,23 @@ class BpkDatepicker extends Component {
   };
   handleDateSelect = (startDate, endDate = null) => {
     const {
-      maxDate,
-      minDate,
+      maxDate = DEFAULT_MAX_DATE,
+      minDate = DEFAULT_MIN_DATE,
       onClose,
-      onDateSelect,
-      selectionConfiguration
+      onDateSelect = null,
+      selectionConfiguration = DEFAULT_SELECTION_CONFIGURATION
     } = this.props;
 
     // When the calendar is a single date we always want to close it when a date is selected
     // or if its a range calendar we only want to close the calendar when a range is selected.
     // If a custom onClose function is provided then we don't want to run the internal version.
-    if (selectionConfiguration && (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single || selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range && endDate) && !onClose) {
+    if ((selectionConfiguration.type === CALENDAR_SELECTION_TYPE.single || selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range && endDate) && !onClose) {
       this.onClose();
     }
     if (onDateSelect) {
       const newStartDate = DateUtils.dateToBoundaries(startDate, DateUtils.startOfDay(minDate), DateUtils.startOfDay(maxDate));
       const newEndDate = DateUtils.dateToBoundaries(endDate, DateUtils.startOfDay(minDate), DateUtils.startOfDay(maxDate));
-      if (selectionConfiguration && selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && (DateUtils.isAfter(newEndDate, selectionConfiguration.startDate) || DateUtils.isSameDay(newEndDate, selectionConfiguration.startDate))) {
+      if (selectionConfiguration.type === CALENDAR_SELECTION_TYPE.range && selectionConfiguration.startDate && !selectionConfiguration.endDate && (DateUtils.isAfter(newEndDate, selectionConfiguration.startDate) || DateUtils.isSameDay(newEndDate, selectionConfiguration.startDate))) {
         onDateSelect(selectionConfiguration.startDate, newEndDate);
         this.elementRef && setNativeValue(this.elementRef, this.props.formatDate(newEndDate));
       } else {
@@ -160,34 +152,35 @@ class BpkDatepicker extends Component {
   };
   render() {
     const {
-      calendarComponent: Calendar,
+      calendarComponent,
       changeMonthLabel,
       closeButtonText,
-      dateModifiers,
+      dateModifiers = {},
       daysOfWeek,
-      fixedWidth,
+      fixedWidth = true,
       formatDate,
       formatDateFull,
       formatMonth,
       getApplicationElement,
       id,
-      initiallyFocusedDate,
-      inputComponent,
-      inputProps,
-      markOutsideDays,
-      markToday,
-      maxDate,
-      minDate,
-      nextMonthLabel,
-      onMonthChange,
-      previousMonthLabel,
-      renderTarget,
-      selectionConfiguration,
+      initiallyFocusedDate = null,
+      inputComponent = null,
+      inputProps = {},
+      markOutsideDays = true,
+      markToday = DEFAULT_MARK_TODAY,
+      maxDate = DEFAULT_MAX_DATE,
+      minDate = DEFAULT_MIN_DATE,
+      nextMonthLabel = null,
+      onMonthChange = null,
+      previousMonthLabel = null,
+      renderTarget = null,
+      selectionConfiguration = DEFAULT_SELECTION_CONFIGURATION,
       title,
       valid,
       weekStartsOn,
       ...rest
     } = this.props;
+    const Calendar = calendarComponent || DefaultCalendar;
 
     // The following props are not used in render
     delete rest.onDateSelect;
@@ -252,6 +245,7 @@ class BpkDatepicker extends Component {
         isOpen: this.state.isOpen,
         label: title,
         closeButtonText: closeButtonText,
+        renderTarget: renderTarget,
         ...getDataComponentAttribute('Datepicker'),
         ...rest,
         children: /*#__PURE__*/_jsx(Calendar, {

package/bpk-component-dialog/src/BpkDialogInner.d.ts

@@ -51,13 +51,6 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<import("../../bpk-scrim-utils/src/withScrim").Props & Omit<Props, "dialogRef">>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
-    defaultProps: {
-        onClose: null;
-        isIphone: boolean;
-        isIpad: boolean;
-        containerClassName: null;
-        closeOnScrimClick: boolean;
-    };
     contextType?: import("react").Context<any> | undefined;
 };
 export default _default;

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-grid-toggle/src/BpkGridToggle.js

@@ -35,7 +35,10 @@ class BpkGridToggle extends Component {
     document.addEventListener('keydown', this.handleKeyDown);
   }
   componentWillUnmount() {
-    document.querySelector(this.props.targetContainer).classList.remove(GRID_CLASS_NAME);
+    const {
+      targetContainer = 'body'
+    } = this.props;
+    document.querySelector(targetContainer).classList.remove(GRID_CLASS_NAME);
     document.removeEventListener('keydown', this.handleKeyDown);
   }
   handleKeyDown = e => {
@@ -44,15 +47,18 @@ class BpkGridToggle extends Component {
     }
   };
   toggleGrid = e => {
+    const {
+      targetContainer = 'body'
+    } = this.props;
     e.preventDefault();
-    document.querySelector(this.props.targetContainer).classList.toggle(GRID_CLASS_NAME);
+    document.querySelector(targetContainer).classList.toggle(GRID_CLASS_NAME);
     this.setState(state => ({
       gridEnabled: !state.gridEnabled
     }));
   };
   render() {
     const {
-      className
+      className = null
     } = this.props;
     const {
       gridEnabled
@@ -73,8 +79,4 @@ BpkGridToggle.propTypes = {
   targetContainer: PropTypes.string,
   className: PropTypes.string
 };
-BpkGridToggle.defaultProps = {
-  targetContainer: 'body',
-  className: null
-};
 export default BpkGridToggle;