@skyscanner/backpack-web 33.0.0-beta.1 → 33.0.0

package/bpk-component-datatable/src/BpkDataTableHeader.d.ts

@@ -0,0 +1,27 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/// <reference types="react" />
+/**
+ * Internal component to render the header of a column.
+ * @returns {JSX.Element} data table header component
+ */
+declare const BpkDataTableHeader: ({ column }: {
+    column: any;
+}) => JSX.Element;
+export default BpkDataTableHeader;

package/bpk-component-datatable/src/BpkDataTableHeader.js

@@ -22,8 +22,8 @@ import BpkSmallArrowDownIcon from "../../bpk-component-icon/sm/arrow-down";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSmallArrowUpIcon from "../../bpk-component-icon/sm/arrow-up";
 import { withRtlSupport } from "../../bpk-component-icon";
-import { SORT_DIRECTION_TYPES } from "./common-types";
 import STYLES from "./BpkDataTableHeader.module.css";
+import { SORT_DIRECTION_TYPES } from "./common-types";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DownIcon = withRtlSupport(BpkSmallArrowDownIcon);

package/bpk-component-datatable/src/common-types.d.ts

@@ -0,0 +1,111 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/// <reference types="react" />
+export declare const SORT_DIRECTION_TYPES: {
+    readonly ASC: "ASC";
+    readonly DESC: "DESC";
+};
+export type BpkDataTableProps = {
+    rows: {
+        [key: string]: any;
+    };
+    columns: ColumnType[];
+    /**
+     * Table height. Please provide this value in rem.
+     */
+    height: number | string;
+    /**
+     * Table width. Please provide this value in rem.
+     * If not provided, the table will expand to fill the available space.
+     */
+    width?: number | string;
+    /**
+     * Height of the header row. Please provide this value in rem.
+     */
+    headerHeight?: number | string;
+    headerClassName?: string | null;
+    /**
+     * Height of a row (except for the header row). Please provide this value in rem.
+     */
+    rowHeight?: number | string;
+    rowStyle?: {};
+    rowClassName?: string | ((arg0: any) => string);
+    className?: string | null;
+    /**
+     * The data will be sorted by default based on this column.
+     */
+    defaultColumnSortIndex?: number;
+    /**
+     * For custom sorting, pass a sort function - must be memoized. It should return 1 if rowA is larger, and -1 if rowB is larger.
+     * You can also pass a string: basic, datetime, alphanumeric. By default, alphanumeric sorting will be applied.
+     */
+    sort?: string | ((rowA: {}, rowB: {}, columnId: string, desc: boolean) => number);
+    /**
+     * Use sortBy to specify which column the custom sorting will be applied to. To specify the column, use the accessor of the column.
+     */
+    sortBy?: string;
+    /**
+     * Use sortDirection to set the direction of sorting. By default, it will be ascending.
+     */
+    sortDirection?: (typeof SORT_DIRECTION_TYPES)[keyof typeof SORT_DIRECTION_TYPES];
+    /**
+     * Callback function that will be called when a row is clicked. The entire row object (originally passed in the data prop) will be passed to this function.
+     */
+    onRowClick?: (arg: {}) => void;
+    [rest: string]: any;
+};
+export type ColumnType = {
+    accessor: string;
+    /**
+     * Optional function to format the header data.
+     * @returns {string | JSX.Element} The formatted header data.
+     */
+    Header?: (arg: {
+        disableSortBy: boolean;
+        accessor: string;
+        label: string;
+    }) => JSX.Element | string;
+    disableSortBy?: boolean;
+    /**
+     * Width of the column. Please provide this value in rem.
+     */
+    width?: string | number;
+    /**
+     * Minimum width of the column. Please provide this value in rem.
+     */
+    minWidth?: string | number;
+    flexGrow?: number;
+    className?: string | null;
+    headerClassName?: string | null;
+    headerStyle?: {};
+    /**
+     * Optional function to format the cell data.
+     * @returns {string | JSX.Element} The formatted cell data.
+     */
+    Cell?: (arg: {
+        rowData: {};
+        rowIndex: number;
+        accessor: string;
+        columnIndex: number;
+        cellData: {};
+    }) => JSX.Element | string;
+    label?: string;
+    style?: {};
+    defaultSortDirection?: (typeof SORT_DIRECTION_TYPES)[keyof typeof SORT_DIRECTION_TYPES];
+};

package/bpk-component-datatable/src/utils.d.ts

@@ -0,0 +1,30 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ColumnType } from './common-types';
+/**
+ * This function abstracts the Cell and Header of the react-table API.
+ * The columns API defined in Backpack will therefore be independent of the react-table columns API which consumers don't need to be aware of.
+ * @param {Array} columns Array of column objects compatible with the API defined in Backpack
+ * @returns {Array} An array of column objects that can be directly passed to the hooks of the react-table library
+ *
+ */
+export declare const createColumnsSchema: (columns: ColumnType[]) => {
+    [key: string]: any;
+}[];
+export default createColumnsSchema;

package/bpk-component-flare/src/BpkFlareBar.js

@@ -18,9 +18,9 @@
 
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./bpk-flare-bar.module.css";
 import Pointer from "./__generated__/js/pointer";
 import CornerRadius from "./__generated__/js/corner-radius";
-import STYLES from "./bpk-flare-bar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import { useEffect, useState } from 'react';
-
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";

package/bpk-component-icon/src/withRtlSupport.js

@@ -17,7 +17,7 @@
  */
 
 import { cssModules } from "../../bpk-react-utils";
-import classNameModifierHOCFactory from "./classNameModifierHOCFactory";
 import STYLES from "./BpkIcon.module.css";
+import classNameModifierHOCFactory from "./classNameModifierHOCFactory";
 const getClassName = cssModules(STYLES);
 export default classNameModifierHOCFactory('withRtlSupport', [getClassName('bpk-icon--rtl-support')]);

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -19,7 +19,6 @@
 import { Component } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
-
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";

package/bpk-component-image/src/BpkImage.js

@@ -17,17 +17,15 @@
  */
 
 import { Component } from 'react';
-
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CSSTransition from 'react-transition-group/CSSTransition';
-
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkSpinner } from "../../bpk-component-spinner";
-import BORDER_RADIUS_STYLES from "./BpkImageBorderRadiusStyles";
 import STYLES from "./BpkImage.module.css";
+import BORDER_RADIUS_STYLES from "./BpkImageBorderRadiusStyles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

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

@@ -17,11 +17,10 @@
  */
 
 import { Component } from 'react';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
-
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";

package/bpk-component-input/src/BpkInput.js

@@ -19,8 +19,8 @@
 import { Component } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import BpkClearButton from "./BpkClearButton";
-import { CLEAR_BUTTON_MODES, defaultProps } from "./common-types";
 import STYLES from "./BpkInput.module.css";
+import { CLEAR_BUTTON_MODES, defaultProps } from "./common-types";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import { Component } from 'react';
 import debounce from 'lodash.debounce';
+import { Component } from 'react';
 import { cssModules, isRTL } from "../../bpk-react-utils";
 import STYLES from "./BpkMobileScrollContainer.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-modal/src/BpkModal.js

@@ -18,8 +18,8 @@
 
 import { withScrim } from "../../bpk-scrim-utils";
 import { Portal, cssModules, isDeviceIphone } from "../../bpk-react-utils";
-import BpkModalInner from "./BpkModalInner";
 import STYLES from "./BpkModal.module.css";
+import BpkModalInner from "./BpkModalInner";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const ScrimBpkModalInner = withScrim(BpkModalInner);

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js

@@ -19,8 +19,8 @@
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from "../../bpk-component-link";
 import { cssModules } from "../../bpk-react-utils";
-import { BAR_STYLES } from "./BpkNavigationBar";
 import STYLES from "./BpkNavigationBarButtonLink.module.css";
+import { BAR_STYLES } from "./BpkNavigationBar";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarButtonLink = ({

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js

@@ -19,8 +19,8 @@
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkIconButton from "../../bpk-component-close-button";
 import { cssModules } from "../../bpk-react-utils";
-import { BAR_STYLES } from "./BpkNavigationBar";
 import STYLES from "./BpkNavigationBarIconButton.module.css";
+import { BAR_STYLES } from "./BpkNavigationBar";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkNavigationBarIconButton = ({

package/bpk-component-popover/src/BpkPopover.js

@@ -19,8 +19,8 @@ import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { BpkButtonLink } from "../../bpk-component-link";
 import BpkCloseButton from "../../bpk-component-close-button";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import { ARROW_ID } from "./constants";
 import STYLES from "./BpkPopover.module.css";
+import { ARROW_ID } from "./constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -14,14 +14,14 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */import { createPopper } from '@popperjs/core';
+import PropTypes from 'prop-types';
 import { Component } from 'react';
-import { createPopper } from '@popperjs/core';
 import focusStore from 'a11y-focus-store';
 import { Portal, cssModules } from "../../bpk-react-utils";
 import keyboardFocusScope from "./keyboardFocusScope";
-import BpkPopover from "./BpkPopover";
 import STYLES from "./BpkPopover.module.css";
+import BpkPopover from "./BpkPopover";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/bpk-component-price/src/BpkPrice.js

@@ -17,8 +17,8 @@
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { SIZES, ALIGNS } from "./common-types";
 import STYLES from "./BpkPrice.module.css";
+import { SIZES, ALIGNS } from "./common-types";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-rating/src/BpkRating.js

@@ -18,8 +18,8 @@
 import clamp from 'lodash.clamp';
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { RATING_SIZES, RATING_SCALES } from "./common-types";
 import STYLES from "./BpkRating.module.css";
+import { RATING_SIZES, RATING_SCALES } from "./common-types";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -22,9 +22,9 @@ import { VariableSizeList as List } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { cssModules } from "../../bpk-react-utils";
 import { CALENDAR_SELECTION_TYPE, DateUtils } from "../../bpk-component-calendar";
+import STYLES from "./BpkScrollableCalendarGridList.module.css";
 import BpkScrollableCalendarGrid from "./BpkScrollableCalendarGrid";
 import { getMonthsArray, getMonthItemHeights } from "./utils";
-import STYLES from "./BpkScrollableCalendarGridList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 

package/bpk-component-scrollable-calendar/test-utils.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import format from 'date-fns/format';
+import { format } from 'date-fns/format';
 export const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
 export const formatDateFullArabic = date => {
   const dateString = 'EEEE, dd، MMMM، yyyy';

package/bpk-component-section-header/src/BpkSectionHeader.js

@@ -40,6 +40,7 @@ const BpkSectionHeader = ({
       className: getClassName('bpk-section-header__title'),
       children: title
     }), description && /*#__PURE__*/_jsx(BpkText, {
+      className: getClassName('bpk-section-header__description'),
       children: description
     })]
   }), button]

package/bpk-component-section-header/src/BpkSectionHeader.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-section-header{display:flex;justify-content:space-between;align-items:flex-start;background-color:rgba(0,0,0,0)}.bpk-section-header__title-description{display:flex;flex-direction:column}.bpk-section-header__title-description--default{color:#161616}.bpk-section-header__title-description--on-dark{color:#fff}.bpk-section-header__title{font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-section-header__title{font-size:1.5rem;line-height:1.75rem;font-weight:700}}
+.bpk-section-header{display:flex;justify-content:space-between;align-items:flex-start;background-color:rgba(0,0,0,0)}.bpk-section-header__title-description{display:flex;flex-direction:column}.bpk-section-header__title-description--default{color:#161616}.bpk-section-header__title-description--on-dark{color:#fff}.bpk-section-header__title{font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-section-header__title{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-section-header__description{padding-top:.25rem}

package/bpk-component-slider/src/BpkSlider.js

@@ -16,10 +16,9 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
-
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import Slider from 'react-slider';
+import PropTypes from 'prop-types';
 import { cssModules, isRTL } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -75,8 +75,8 @@ XlSpinner.defaultProps = {
   viewBox: "0 0 32 32"
 };
 import { cssModules } from "../../bpk-react-utils";
-import SPINNER_TYPES from "./spinnerTypes";
 import STYLES from "./BpkSpinner.module.css";
+import SPINNER_TYPES from "./spinnerTypes";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -75,8 +75,8 @@ LgSpinner.defaultProps = {
   viewBox: "0 0 24 24"
 };
 import { cssModules } from "../../bpk-react-utils";
-import SPINNER_TYPES from "./spinnerTypes";
 import STYLES from "./BpkSpinner.module.css";
+import SPINNER_TYPES from "./spinnerTypes";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-spinner/src/BpkSpinner.js

@@ -62,8 +62,8 @@ SmSpinner.defaultProps = {
   viewBox: "0 0 16 16"
 };
 import { cssModules } from "../../bpk-react-utils";
-import SPINNER_TYPES from "./spinnerTypes";
 import STYLES from "./BpkSpinner.module.css";
+import SPINNER_TYPES from "./spinnerTypes";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -20,9 +20,9 @@ import { Component } from 'react';
 import BpkLabel from "../../bpk-component-label";
 import BpkSelect from "../../bpk-component-select";
 import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkThemeToggle.module.css";
 import bpkCustomThemes from "./theming";
 import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
-import STYLES from "./BpkThemeToggle.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const inputId = 'theme-select';

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -23,8 +23,8 @@ The actual component that developers create (i.e. the default export from this p
 */
 
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import { ARROW_ID, TOOLTIP_TYPES } from "./constants";
 import STYLES from "./BpkTooltip.module.css";
+import { ARROW_ID, TOOLTIP_TYPES } from "./constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-tooltip/src/BpkTooltipPortal.js

@@ -16,12 +16,12 @@
  * limitations under the License.
  */
 
-import { cloneElement, Component } from 'react';
 import { createPopper } from '@popperjs/core';
+import { cloneElement, Component } from 'react';
 import { Portal, cssModules } from "../../bpk-react-utils";
 import BpkTooltip from "./BpkTooltip";
-import { TOOLTIP_TYPES } from "./constants";
 import STYLES from "./BpkTooltip.module.css";
+import { TOOLTIP_TYPES } from "./constants";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/bpk-mixins/_buttons.scss

@@ -566,3 +566,18 @@
     color: $bpk-text-disabled-day;
   }
 }
+
+/// Full width button. Modifies the bpk-button to horizontally fill its container
+///
+/// @require {mixin} bpk-button
+///
+/// @example scss
+///   .selector {
+///     @include bpk-button();
+///     @include bpk-button--full-width();
+///   }
+
+@mixin bpk-button--full-width {
+  display: block;
+  width: 100%;
+}

package/bpk-react-utils/index.d.ts

@@ -25,7 +25,8 @@ import deprecated from './src/deprecated';
 import { isDeviceIphone, isDeviceIpad, isDeviceIos } from './src/deviceDetection';
 import withDefaultProps from './src/withDefaultProps';
 import isRTL from './src/isRTL';
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, };
+import{ BpkDialogWrapper } from './src/BpkDialogWrapper/BpkDialogWrapper';
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper };
 declare const _default: {
     Portal: typeof Portal;
     TransitionInitialMount: ({ appearActiveClassName, appearClassName, children, transitionTimeout, }: {
@@ -54,5 +55,39 @@ declare const _default: {
     isDeviceIpad: () => boolean;
     isDeviceIos: () => boolean;
     isRTL: () => boolean;
+    BpkDialogWrapper: ({
+      ariaLabelledby,
+      children,
+      closeOnEscPressed,
+      closeOnScrimClick,
+      dialogClassName,
+      exiting,
+      id,
+      isOpen,
+      onClose,
+      timeout,
+      transitionClassNames
+    }: {
+      ariaLabelledby: string;
+      children: import("react").ReactNode;
+      closeOnEscPressed?: boolean;
+      closeOnScrimClick?: boolean;
+      dialogClassName?: string;
+      id: string | undefined;
+      isOpen: boolean;
+      onClose: (
+        arg0?: Event | KeyboardEvent | MouseEvent | PointerEvent | TouchEvent,
+        arg1?: {
+          source: 'ESCAPE' | 'DOCUMENT_CLICK';
+        },
+    ) => void | null;
+      exiting?: boolean;
+      transitionClassNames?: {
+        appear?: string,
+        appearActive?: string,
+        exit?: string
+      };
+      timeout?: {appear?: number, exit?: number};
+    }) => JSX.Element;
 };
 export default _default;

package/bpk-react-utils/index.js

@@ -25,7 +25,8 @@ import deprecated from "./src/deprecated";
 import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection";
 import withDefaultProps from "./src/withDefaultProps";
 import isRTL from "./src/isRTL";
-export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL };
+import { BpkDialogWrapper } from "./src/BpkDialogWrapper/BpkDialogWrapper";
+export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper };
 export default {
   Portal,
   TransitionInitialMount,
@@ -36,5 +37,6 @@ export default {
   isDeviceIphone,
   isDeviceIpad,
   isDeviceIos,
-  isRTL
+  isRTL,
+  BpkDialogWrapper
 };