@skyscanner/backpack-web 33.8.0 → 33.8.1

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

@@ -44,7 +44,6 @@ const getMaxYValue = (dataPoints, outlierPercentage) => {
 };
 class BpkBarchart extends Component {
   static defaultProps = {
-    className: null,
     leadingScrollIndicatorClassName: null,
     trailingScrollIndicatorClassName: null,
     outlierPercentage: null,
@@ -99,7 +98,6 @@ class BpkBarchart extends Component {
   render() {
     const {
       BarComponent,
-      className,
       data,
       disableDataTable,
       getBarLabel,
@@ -134,10 +132,6 @@ class BpkBarchart extends Component {
       right: 0,
       bottom: xAxisMargin
     });
-    const classNames = [getClassName('bpk-barchart')];
-    if (className) {
-      classNames.push(className);
-    }
     const width = this.state.width - margin.left - margin.right;
     const height = this.state.height - margin.bottom - margin.top;
     const maxYValue = getMaxYValue(data.map(d => d[yScaleDataKey]), outlierPercentage);
@@ -156,7 +150,7 @@ class BpkBarchart extends Component {
         yAxisLabel: yAxisLabel
       }), /*#__PURE__*/_jsxs("svg", {
         xmlns: "http://www.w3.org/2000/svg",
-        className: classNames.join(' '),
+        className: getClassName('bpk-barchart'),
         width: this.state.width,
         height: this.state.height,
         ref: svgEl => {
@@ -236,7 +230,6 @@ BpkBarchart.propTypes = {
   yAxisLabel: PropTypes.string.isRequired,
   initialWidth: PropTypes.number.isRequired,
   initialHeight: PropTypes.number.isRequired,
-  className: PropTypes.string,
   leadingScrollIndicatorClassName: PropTypes.string,
   trailingScrollIndicatorClassName: PropTypes.string,
   /**

package/bpk-component-close-button/src/BpkCloseButton.js

@@ -56,7 +56,7 @@ BpkCloseButton.propTypes = {
   onClick: PropTypes.func.isRequired,
   className: PropTypes.string,
   customIcon: PropTypes.func,
-  onDark: PropTypes.Boolean
+  onDark: PropTypes.bool
 };
 BpkCloseButton.defaultProps = {
   className: null,

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

@@ -21,7 +21,6 @@ import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 import { composeCalendar, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate, withCalendarState, CALENDAR_SELECTION_TYPE, DateUtils, BpkCalendarNav } from "../../bpk-component-calendar";
 import BpkInput, { withOpenEvents } from "../../bpk-component-input";
 import BpkModal from "../../bpk-component-modal";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkPopover from "../../bpk-component-popover";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const Input = withOpenEvents(BpkInput);
@@ -242,12 +241,10 @@ class BpkDatepicker extends Component {
       }) : /*#__PURE__*/_jsx(BpkPopover, {
         id: `${id}-popover`,
         target: input,
-        renderTarget: renderTarget,
         onClose: this.props.onClose || this.onClose,
         isOpen: this.state.isOpen,
         label: title,
         closeButtonText: closeButtonText,
-        tabIndex: 0,
         ...rest,
         children: /*#__PURE__*/_jsx(Calendar, {
           ...calendarProps,

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

@@ -18,6 +18,5 @@
 
 import { themeAttributes as calendarAttributes } from "../../bpk-component-calendar";
 import { themeAttributes as modalAttributes } from "../../bpk-component-modal";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { themeAttributes as popoverAttributes } from "../../bpk-component-popover";
 export default [...calendarAttributes, ...popoverAttributes, ...modalAttributes].filter((attribute, index, attributes) => attributes.indexOf(attribute) === index);

package/bpk-component-loading-button/src/BpkLoadingButton.js

@@ -60,14 +60,22 @@ const getLoadingIcon = props => {
 const BpkLoadingButton = props => {
   const {
     children,
+    destructive,
     disabled,
+    featured,
     icon,
     iconDisabled,
     iconLoading,
     iconOnly,
     iconPosition,
     large,
+    link,
+    linkOnDark,
     loading,
+    primaryOnDark,
+    primaryOnLight,
+    secondary,
+    secondaryOnDark,
     ...rest
   } = props;
   const showBtnDisabled = disabled || loading;
@@ -77,28 +85,28 @@ const BpkLoadingButton = props => {
   const loadingIcon = getLoadingIcon(props);
   const iconClassNames = getClassName('bpk-loading-button__icon');
   let type = BUTTON_TYPES.primary;
-  if (props.link) {
+  if (link) {
     type = BUTTON_TYPES.link;
   }
-  if (props.linkOnDark) {
+  if (linkOnDark) {
     type = BUTTON_TYPES.linkOnDark;
   }
-  if (props.featured) {
+  if (featured) {
     type = BUTTON_TYPES.featured;
   }
-  if (props.destructive) {
+  if (destructive) {
     type = BUTTON_TYPES.destructive;
   }
-  if (props.secondaryOnDark) {
+  if (secondaryOnDark) {
     type = BUTTON_TYPES.secondaryOnDark;
   }
-  if (props.secondary) {
+  if (secondary) {
     type = BUTTON_TYPES.secondary;
   }
-  if (props.primaryOnLight) {
+  if (primaryOnLight) {
     type = BUTTON_TYPES.primaryOnLight;
   }
-  if (props.primaryOnDark) {
+  if (primaryOnDark) {
     type = BUTTON_TYPES.primaryOnDark;
   }
   return /*#__PURE__*/_jsx(BpkButtonV2, {

package/bpk-component-popover/index.d.ts

@@ -0,0 +1,5 @@
+import BpkPopover, { type Props } from './src/BpkPopover';
+import themeAttributes from './src/themeAttributes';
+export type BpkPopoverProps = Props;
+export { themeAttributes, };
+export default BpkPopover;

package/bpk-component-popover/index.js

@@ -14,7 +14,7 @@
  * 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 BpkPopoverPortal, { propTypes as bpkPopoverPortalPropTypes, defaultProps as bpkPopoverPortalDefaultProps } from "./src/BpkPopoverPortal";
+ */import BpkPopover from "./src/BpkPopover";
 import themeAttributes from "./src/themeAttributes";
-export { themeAttributes, bpkPopoverPortalPropTypes, bpkPopoverPortalDefaultProps };
-export default BpkPopoverPortal;
+export { themeAttributes };
+export default BpkPopover;

package/bpk-component-popover/src/BpkPopover.d.ts

@@ -0,0 +1,26 @@
+import type { SyntheticEvent, ReactNode, ReactElement } from 'react';
+import type { Placement } from '@floating-ui/react';
+declare const EVENT_SOURCES: {
+    CLOSE_BUTTON: string;
+    CLOSE_LINK: string;
+};
+export type Props = {
+    children: ReactNode;
+    closeButtonText: string;
+    id: string;
+    label: string;
+    onClose: (event: SyntheticEvent<HTMLButtonElement>, props: {
+        source: (typeof EVENT_SOURCES)[keyof typeof EVENT_SOURCES];
+    }) => void;
+    className?: string | null;
+    closeButtonIcon?: boolean;
+    closeButtonProps?: Object;
+    isOpen?: boolean;
+    labelAsTitle?: boolean;
+    padded?: boolean;
+    placement?: Placement;
+    showArrow?: Boolean;
+    target: ReactElement<any>;
+};
+declare const BpkPopover: ({ children, className, closeButtonIcon, closeButtonProps, closeButtonText, id, isOpen, label, labelAsTitle, onClose, padded, placement, showArrow, target, ...rest }: Props) => JSX.Element;
+export default BpkPopover;

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

@@ -14,20 +14,30 @@
  * 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 { useState, useRef, cloneElement, isValidElement } from 'react';
+import { useFloating, autoUpdate, offset, useClick, useDismiss, useInteractions, FloatingFocusManager, arrow, FloatingArrow, flip, shift } from '@floating-ui/react';
+import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from "../../bpk-component-link";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import { ARROW_ID } from "./constants";
 import STYLES from "./BpkPopover.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const EVENT_SOURCES = {
   CLOSE_BUTTON: 'CLOSE_BUTTON',
   CLOSE_LINK: 'CLOSE_LINK'
 };
-const bindEventSource = (source, callback) => event => {
+
+// The stroke width is used to set the border width of the arrow.
+const strokeWidth = 0.0625;
+const bindEventSource = (source, callback, event) => {
   if (event.persist) {
     event.persist();
   }
@@ -35,110 +45,131 @@ const bindEventSource = (source, callback) => event => {
     source
   });
 };
-const BpkPopover = props => {
+const BpkPopover = ({
+  children,
+  className = null,
+  closeButtonIcon = true,
+  closeButtonProps = {},
+  closeButtonText,
+  id,
+  isOpen = false,
+  label,
+  labelAsTitle = false,
+  onClose,
+  padded = true,
+  placement = 'bottom',
+  showArrow = true,
+  target,
+  ...rest
+}) => {
+  const [isOpenState, setIsOpenState] = useState(isOpen);
+  const arrowRef = useRef(null);
   const {
-    children,
-    className,
-    closeButtonIcon,
-    closeButtonProps,
-    closeButtonText,
-    id,
-    label,
-    labelAsTitle,
-    onClose,
-    padded,
-    ...rest
-  } = props;
-  const classNames = [getClassName('bpk-popover')];
-  const bodyClassNames = [];
-
-  // outer classNames
-  if (className) {
-    classNames.push(className);
-  }
+    context,
+    floatingStyles,
+    refs
+  } = useFloating({
+    open: isOpenState,
+    onOpenChange: setIsOpenState,
+    placement,
+    middleware: [showArrow && offset(17), flip({
+      crossAxis: true
+    }), shift(), showArrow && arrow({
+      element: arrowRef
+    })],
+    whileElementsMounted: autoUpdate
+  });
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
 
-  // inner classNames
-  if (padded) {
-    bodyClassNames.push(getClassName('bpk-popover__body--padded'));
-  }
+  // Merge all the interactions into prop getters
+  const {
+    getFloatingProps,
+    getReferenceProps
+  } = useInteractions([click, dismiss]);
+  const targetElement = /*#__PURE__*/isValidElement(target) ? ( /*#__PURE__*/cloneElement(target, {
+    ...getReferenceProps(),
+    // @ts-ignore - we're adding a popover ref to the target element so we can position the popover relative to it
+    ref: refs.setReference
+  })) : /*#__PURE__*/_jsx("div", {
+    ref: refs.setReference,
+    ...getReferenceProps(),
+    children: target
+  });
+  const classNames = getClassName('bpk-popover', className);
+  const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
   const labelId = `bpk-popover-label-${id}`;
-  return /*#__PURE__*/_jsx(TransitionInitialMount, {
-    appearClassName: getClassName('bpk-popover--appear'),
-    appearActiveClassName: getClassName('bpk-popover--appear-active'),
-    transitionTimeout: 200,
-    children: /*#__PURE__*/_jsxs("section", {
-      id: id,
-      tabIndex: "-1",
-      role: "dialog",
-      "aria-labelledby": labelId,
-      className: classNames.join(' '),
-      ...rest,
-      children: [/*#__PURE__*/_jsx("span", {
-        id: ARROW_ID,
-        className: getClassName('bpk-popover__arrow'),
-        role: "presentation",
-        "data-popper-arrow": true
-      }), labelAsTitle ? /*#__PURE__*/_jsxs("header", {
-        className: getClassName('bpk-popover__header'),
-        children: [/*#__PURE__*/_jsx(BpkText, {
-          tagName: "h2",
-          id: labelId,
-          textStyle: TEXT_STYLES.label1,
-          children: label
-        }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        , {
-          className: getClassName('bpk-popover__close-button'),
-          label: closeButtonText,
-          onClick: bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, props.onClose),
-          ...closeButtonProps
-        }) : /*#__PURE__*/_jsx(BpkButtonLink, {
-          onClick: bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose),
-          ...closeButtonProps,
-          children: closeButtonText
-        })]
-      }) : /*#__PURE__*/_jsx("span", {
-        id: labelId,
-        className: getClassName('bpk-popover__label'),
-        children: label
-      }), /*#__PURE__*/_jsx("div", {
-        className: bodyClassNames.join(' '),
-        children: children
-      }), !labelAsTitle && /*#__PURE__*/_jsx("footer", {
-        className: getClassName('bpk-popover__footer'),
-        children: /*#__PURE__*/_jsx(BpkButtonLink, {
-          onClick: bindEventSource(EVENT_SOURCES.CLOSE_LINK, props.onClose),
-          ...closeButtonProps,
-          children: closeButtonText
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [targetElement, isOpenState && /*#__PURE__*/_jsx(FloatingFocusManager, {
+      context: context,
+      modal: false,
+      children: /*#__PURE__*/_jsx("div", {
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        children: /*#__PURE__*/_jsx(TransitionInitialMount, {
+          appearClassName: getClassName('bpk-popover--appear'),
+          appearActiveClassName: getClassName('bpk-popover--appear-active'),
+          transitionTimeout: 200,
+          children: /*#__PURE__*/_jsxs("section", {
+            id: id,
+            tabIndex: -1,
+            role: "dialog",
+            "aria-labelledby": labelId,
+            className: classNames,
+            ...rest,
+            children: [showArrow && /*#__PURE__*/_jsx(FloatingArrow, {
+              ref: arrowRef,
+              context: context,
+              id: ARROW_ID,
+              className: getClassName('bpk-popover__arrow'),
+              role: "presentation",
+              stroke: surfaceHighlightDay,
+              strokeWidth: strokeWidth
+            }), labelAsTitle ? /*#__PURE__*/_jsxs("header", {
+              className: getClassName('bpk-popover__header'),
+              children: [/*#__PURE__*/_jsx(BpkText, {
+                tagName: "h2",
+                id: labelId,
+                textStyle: TEXT_STYLES.label1,
+                children: label
+              }), "\xA0", closeButtonIcon ? /*#__PURE__*/_jsx(BpkCloseButton, {
+                label: closeButtonText,
+                onClick: event => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_BUTTON, onClose, event);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps
+              }) : /*#__PURE__*/_jsx(BpkButtonLink, {
+                onClick: event => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps,
+                children: closeButtonText
+              })]
+            }) : /*#__PURE__*/_jsx("span", {
+              id: labelId,
+              className: getClassName('bpk-popover__label'),
+              children: label
+            }), /*#__PURE__*/_jsx("div", {
+              className: bodyClassNames,
+              children: children
+            }), !labelAsTitle && /*#__PURE__*/_jsx("footer", {
+              className: getClassName('bpk-popover__footer'),
+              children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                onClick: event => {
+                  bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
+                  setIsOpenState(false);
+                },
+                ...closeButtonProps,
+                children: closeButtonText
+              })
+            })]
+          })
         })
-      })]
-    })
+      })
+    })]
   });
 };
-export const propTypes = {
-  children: PropTypes.node.isRequired,
-  closeButtonText: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  closeButtonIcon: PropTypes.bool,
-  closeButtonProps: PropTypes.object,
-  labelAsTitle: PropTypes.bool,
-  padded: PropTypes.bool
-};
-export const defaultProps = {
-  className: null,
-  closeButtonIcon: true,
-  closeButtonProps: null,
-  labelAsTitle: false,
-  padded: true
-};
-BpkPopover.propTypes = {
-  ...propTypes
-};
-BpkPopover.defaultProps = {
-  ...defaultProps
-};
 export default BpkPopover;

package/bpk-component-popover/src/BpkPopover.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-popover-portal{z-index:900}@media(max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{position:absolute;width:1.5rem;height:1.5rem;transform:rotate(45deg);border:.0625rem solid rgba(0,0,0,0);background:inherit}.bpk-popover-portal[data-popper-placement=top] .bpk-popover__arrow{bottom:-0.6875rem;border-right-color:#e0e4e9;border-bottom-color:#e0e4e9}.bpk-popover-portal[data-popper-placement=right] .bpk-popover__arrow{left:-0.6875rem;border-bottom-color:#e0e4e9;border-left-color:#e0e4e9}.bpk-popover-portal[data-popper-placement=bottom] .bpk-popover__arrow{top:-0.6875rem;border-top-color:#e0e4e9;border-left-color:#e0e4e9}.bpk-popover-portal[data-popper-placement=left] .bpk-popover__arrow{right:-0.6875rem;border-top-color:#e0e4e9;border-right-color:#e0e4e9}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__close-button{float:right}html[dir=rtl] .bpk-popover__close-button{float:left}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}
+.bpk-popover-portal{z-index:900}@media(max-width: 32rem){.bpk-popover-portal{margin-right:1rem;margin-left:1rem}}.bpk-popover{transition:opacity 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}@media(min-width: 32.0625rem){.bpk-popover{max-width:32rem;transition:opacity 50ms ease-in-out}}.bpk-popover--appear{opacity:0}.bpk-popover--appear-active{opacity:1}.bpk-popover__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-popover__arrow[data-hide]{visibility:hidden}.bpk-popover__body--padded{padding:1rem}.bpk-popover__header{display:flex;padding:1rem;justify-content:space-between;box-shadow:0 -1px 0 0 #e0e4e9 inset}.bpk-popover__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-popover__footer{padding:.5rem 1rem;text-align:right;box-shadow:0 1px 0 0 #e0e4e9 inset}html[dir=rtl] .bpk-popover__footer{text-align:left}

package/bpk-component-popover/src/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const ARROW_ID = "js-bpk-popover-arrow";
+declare const _default: {
+    ARROW_ID: string;
+};
+export default _default;

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

@@ -14,7 +14,9 @@
  * 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.
- */export const ARROW_ID = 'js-bpk-popover-arrow';
+ */
+
+export const ARROW_ID = 'js-bpk-popover-arrow';
 export default {
   ARROW_ID
 };

package/bpk-component-popover/src/themeAttributes.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any[];
+export default _default;

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

@@ -14,5 +14,8 @@
  * 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 { themeAttributes as linkAttributes } from "../../bpk-component-link";
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { themeAttributes as linkAttributes } from "../../bpk-component-link";
 export default [...linkAttributes];

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

@@ -42,22 +42,20 @@ const BpkPrice = props => {
     ...rest,
     children: [/*#__PURE__*/_jsxs("div", {
       className: getClassName(previousPrice && 'bpk-price__leading', isAlignRight && 'bpk-price__leading--right', leadingClassName),
-      children: [previousPrice && /*#__PURE__*/_jsx(BpkText
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      , {
+      children: [previousPrice && /*#__PURE__*/_jsx("span", {
         className: getClassName('bpk-price__previous-price'),
-        textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
-        tagName: "span",
-        children: previousPrice
-      }), previousPrice && leadingText && /*#__PURE__*/_jsx(BpkText, {
-        textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
-        tagName: "span"
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
+          tagName: "span",
+          children: previousPrice
+        })
+      }), previousPrice && leadingText && /*#__PURE__*/_jsx("span", {
         className: getClassName('bpk-price__separator'),
-        children: "\uD802\uDD1F"
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
+          tagName: "span",
+          children: "\uD802\uDD1F"
+        })
       }), leadingText && /*#__PURE__*/_jsx(BpkText, {
         textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
         tagName: "span",
@@ -65,22 +63,20 @@ const BpkPrice = props => {
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: getClassName(isAlignRight && 'bpk-price__column-container'),
-      children: [/*#__PURE__*/_jsx(BpkText, {
-        textStyle: isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
+      children: [/*#__PURE__*/_jsx("span", {
         className: getClassName('bpk-price__price', !isAlignRight && 'bpk-price__spacing'),
-        tagName: "span",
-        children: price
-      }), trailingText && /*#__PURE__*/_jsx(BpkText, {
-        textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
-        tagName: "span"
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl,
+          tagName: "span",
+          children: price
+        })
+      }), trailingText && /*#__PURE__*/_jsx("span", {
         className: getClassName('bpk-price__trailing'),
-        children: trailingText
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm,
+          tagName: "span",
+          children: trailingText
+        })
       })]
     })]
   });

package/bpk-component-price/src/BpkPrice.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-price{display:flex;flex-direction:column;color:#626971}.bpk-price--right{text-align:right}html[dir=rtl] .bpk-price--right{text-align:left}.bpk-price__leading{display:flex;flex-direction:row}.bpk-price__leading--right{flex-direction:row-reverse}.bpk-price__previous-price{text-decoration-line:line-through}.bpk-price__separator{margin:0 .25rem}.bpk-price__column-container{display:flex;flex-direction:column}.bpk-price__price{color:#161616;word-break:break-all}.bpk-price__spacing::after{content:"";margin-right:.25rem}html[dir=rtl] .bpk-price__spacing::after{margin-right:unset;margin-left:.25rem}.bpk-price__trailing{white-space:nowrap}
+.bpk-price{display:flex;flex-direction:column;color:#626971}.bpk-price--right{text-align:right}html[dir=rtl] .bpk-price--right{text-align:left}.bpk-price__leading{display:flex;flex-direction:row}.bpk-price__leading--right{display:flex;flex-direction:row-reverse}.bpk-price__previous-price{display:flex;text-decoration-line:line-through}.bpk-price__separator{display:flex;margin:0 .25rem}.bpk-price__column-container{display:flex;flex-direction:column}.bpk-price__price{display:contents;color:#161616;word-break:break-all}.bpk-price__spacing::after{content:"";margin-right:.25rem}html[dir=rtl] .bpk-price__spacing::after{margin-right:unset;margin-left:.25rem}.bpk-price__trailing{display:contents;white-space:nowrap}

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

@@ -32,14 +32,13 @@ const BpkScrollableCalendarGrid = ({
   const classNames = getClassName('bpk-scrollable-calendar-grid', className);
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
-    children: [/*#__PURE__*/_jsx(BpkText
-    // TODO: className to be removed
-    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-    , {
+    children: [/*#__PURE__*/_jsx("span", {
       className: getClassName('bpk-scrollable-calendar-grid__title'),
-      tagName: "h1",
-      textStyle: TEXT_STYLES.heading4,
-      children: formatMonth(month)
+      children: /*#__PURE__*/_jsx(BpkText, {
+        tagName: "h1",
+        textStyle: TEXT_STYLES.heading4,
+        children: formatMonth(month)
+      })
     }), /*#__PURE__*/_jsx(BpkCalendarGrid, {
       month: month,
       ignoreOutsideDate: true,

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-scrollable-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-scrollable-calendar-grid__title{margin-top:1.5rem}
+.bpk-scrollable-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-scrollable-calendar-grid__title{display:block;margin-top:1.5rem}

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

@@ -83,10 +83,6 @@ const BpkScrollableCalendarGridList = props => {
       focusedDate: focusedDate,
       preventKeyboardFocus: rest.preventKeyboardFocus,
       "aria-hidden": index !== 1
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
-      className: getClassName('bpk-scrollable-calendar-grid-list__item')
     })
   });
   const calculateOffsetInPixels = numberOfMonths => {

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-scrollable-calendar-grid-list__item{display:inline-table}
+.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}

package/bpk-component-slider/src/BpkSlider.d.ts

@@ -1,16 +1,15 @@
 /// <reference types="react" />
-import PropTypes from 'prop-types';
-type Props = {
-    className?: string | null;
+export type Props = {
+    max: number;
+    min: number;
+    minDistance?: number;
+    step?: number;
+    onChange: (value: number[] | number) => void;
+    onAfterChange?: (value: number[] | number) => void;
+    value: number[] | number;
+    ariaLabel: string[];
+    ariaValuetext?: string[];
     [rest: string]: any;
 };
-declare const BpkSlider: {
-    (props: Props): JSX.Element;
-    propTypes: {
-        className: PropTypes.Requireable<string>;
-    };
-    defaultProps: {
-        className: null;
-    };
-};
+declare const BpkSlider: ({ ariaLabel, ariaValuetext, max, min, minDistance, onAfterChange, onChange, step, value, ...rest }: Props) => JSX.Element;
 export default BpkSlider;

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

@@ -16,45 +16,59 @@
  * 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 * as Slider from '@radix-ui/react-slider';
 import { cssModules, isRTL } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkSlider = props => {
-  const {
-    className,
-    ...rest
-  } = props;
+const BpkSlider = ({
+  ariaLabel,
+  ariaValuetext,
+  max,
+  min,
+  minDistance,
+  onAfterChange,
+  onChange,
+  step,
+  value,
+  ...rest
+}) => {
   const invert = isRTL();
-  const classNames = [getClassName('bpk-slider')];
-  const thumbClassNames = [getClassName('bpk-slider__handle')];
-  const trackClassNames = [getClassName('bpk-slider__bar')];
-  const isRange = (rest.value || rest.defaultValue || []).length > 1;
-  if (isRange) {
-    classNames.push(getClassName('bpk-slider--range'));
-  }
-  if (className) {
-    classNames.push(getClassName(className));
-  }
-  return /*#__PURE__*/_jsx(Slider, {
+  const currentValue = Array.isArray(value) ? value : [value];
+  const processSliderValues = (sliderValues, callback) => {
+    const val = sliderValues.length === 1 ? sliderValues[0] : sliderValues;
+    if (callback) {
+      callback(val);
+    }
+  };
+  const handleOnChange = sliderValues => {
+    processSliderValues(sliderValues, onChange);
+  };
+  const handleOnAfterChange = sliderValues => {
+    processSliderValues(sliderValues, onAfterChange);
+  };
+  return /*#__PURE__*/_jsxs(Slider.Root, {
+    className: getClassName('bpk-slider'),
+    defaultValue: currentValue,
+    min: min,
+    max: max,
+    step: step || 1,
+    onValueChange: handleOnChange,
+    onValueCommit: handleOnAfterChange,
+    inverted: invert,
+    minStepsBetweenThumbs: minDistance,
     ...rest,
-    withTracks: true,
-    snapDragDisabled: false,
-    invert: invert,
-    className: classNames.join(' '),
-    thumbClassName: thumbClassNames.join(' '),
-    thumbActiveClassName: getClassName('bpk-slider__handle--active'),
-    trackClassName: trackClassNames.join(' ')
+    children: [/*#__PURE__*/_jsx(Slider.Track, {
+      className: getClassName('bpk-slider__track'),
+      children: /*#__PURE__*/_jsx(Slider.Range, {
+        className: getClassName('bpk-slider__range')
+      })
+    }), currentValue.map((val, index) => /*#__PURE__*/_jsx(Slider.Thumb, {
+      "aria-label": ariaLabel[index],
+      "aria-valuetext": ariaValuetext ? ariaValuetext[index] : val.toString(),
+      className: getClassName('bpk-slider__thumb'),
+      "aria-valuenow": currentValue[index]
+    }, ariaLabel[index]))]
   });
 };
-BpkSlider.propTypes = {
-  className: PropTypes.string
-};
-BpkSlider.defaultProps = {
-  className: null
-};
 export default BpkSlider;

package/bpk-component-slider/src/BpkSlider.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-slider{height:1.25rem;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bpk-slider__handle{display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border-radius:50%;background-color:#0062e3;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-slider__handle::after{position:absolute;content:"";width:2.5rem;height:2.5rem;border-radius:50%}.bpk-slider__handle--active{transform:scale(1.2) translate3d(0, 0, 0);background-color:#154679}.bpk-slider__bar{top:calc(50% - 0.125rem);height:.25rem;border-radius:.5rem;background-color:#c1c7cf}.bpk-slider>div[class$="0"]{background-color:#0062e3;background-color:var(--bpk-slider-bar-color, rgb(0, 98, 227))}.bpk-slider--range>div[class$="0"]{background-color:#c1c7cf}.bpk-slider--range>div[class$="1"]{background-color:#0062e3;background-color:var(--bpk-slider-bar-color, rgb(0, 98, 227))}
+.bpk-slider{position:relative;display:flex;height:1.25rem;align-items:center;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;user-select:none}.bpk-slider__track{position:relative;height:.25rem;flex-grow:1;background-color:#c1c7cf}.bpk-slider__range{position:absolute;height:100%;background-color:#0062e3}.bpk-slider__thumb{display:block;width:1.25rem;height:1.25rem;border-radius:50%;background-color:#0062e3;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-slider__thumb::after{position:absolute;content:"";width:2.5rem;height:2.5rem;border-radius:50%}.bpk-slider__thumb:active{transform:scale(1.2) translate3d(0, 0, 0);background-color:#154679}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "33.8.0",
+  "version": "33.8.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,7 +22,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@popperjs/core": "^2.11.5",
+    "@floating-ui/react": "^0.26.12",
+    "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-slider": "^1.1.2",
     "@react-google-maps/api": "^2.12.0",
     "@skyscanner/bpk-foundations-web": "^17.11.0",
     "@skyscanner/bpk-svgs": "^19.3.0",
@@ -39,7 +41,6 @@
     "object-assign": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3",
-    "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-virtualized-auto-sizer": "1.0.20",
     "react-window": "^1.8.7"

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

@@ -1,219 +0,0 @@
-/*
- * 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 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 BpkPopover from "./BpkPopover";
-import keyboardFocusScope from "./keyboardFocusScope";
-import STYLES from "./BpkPopover.module.css";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-class BpkPopoverPortal extends Component {
-  constructor() {
-    super();
-    this.popper = null;
-    this.previousTargetElement = null;
-  }
-  onRender = (popoverElement, targetElement) => {
-    this.position(popoverElement, targetElement);
-  };
-
-  // The order of events here is as follows:
-  // - `onClose` is called by `Portal`
-  // - The consumer changes `isOpen` to `false`
-  // - `beforeClose` is called by `Portal`
-  // - `beforeClose` calls the `done` callback which closes the `Portal`
-
-  // `onClose` is called by the `Portal` to inform the consumer that `isOpen` should be made false.
-  // Before we pass this information to the consumer, we want to note if restoring focus should be suppressed
-  onClose = (event, information) => {
-    // If the user has clicked outside the popover then we don't want focus to be restored
-    // otherwise it will be stolen back from the element they clicked on.
-    // Here we suppress restoring focus before the consumer is told about the close and updates state.
-    this.suppressRestoreFocus = information.source === 'DOCUMENT_CLICK';
-    if (this.props.onClose) {
-      this.props.onClose(event, information);
-    }
-  };
-
-  // `beforeClose` is called by the `Portal` when `isOpen` is changed to false.
-  // As a result, `onClose` is called first, followed by `beforeClose`.
-  beforeClose = done => {
-    if (this.popper) {
-      this.popper.destroy();
-      this.popper = null;
-      this.previousTargetElement = null;
-    }
-    keyboardFocusScope.unscopeFocus();
-    if (!this.suppressRestoreFocus) {
-      focusStore.restoreFocus();
-      this.suppressRestoreFocus = false;
-    }
-    done();
-  };
-  position(popoverElement, targetElement) {
-    if (!targetElement) {
-      return;
-    }
-    const targetElementHasChanged = targetElement !== this.previousTargetElement;
-    if (targetElementHasChanged && this.popper) {
-      this.popper.destroy();
-      this.popper = null;
-    }
-
-    // Custom modifier that makes the arrow display at the edge of the target.
-    const applyArrowHide = {
-      name: 'applyArrowHide',
-      enabled: true,
-      phase: 'write',
-      fn({
-        state
-      }) {
-        const {
-          arrow
-        } = state.elements;
-        if (arrow) {
-          if (state.modifiersData.arrow.centerOffset !== 0) {
-            arrow.setAttribute('data-hide', '');
-          } else {
-            arrow.removeAttribute('data-hide');
-          }
-        }
-      }
-    };
-
-    // The default modifiers for the popper
-    // Note that GPU acceleration should be disabled otherwise Popper will use `translate3d`
-    // which can cause blurriness in Safari and Chrome.
-    const stdModifiers = [{
-      name: 'computeStyles',
-      options: {
-        gpuAcceleration: false
-      }
-    }, {
-      name: 'offset',
-      options: {
-        offset: [0, 17]
-      }
-    }, applyArrowHide];
-    if (!this.popper) {
-      this.popper = createPopper(targetElement, popoverElement, {
-        placement: this.props.placement,
-        onFirstUpdate: () => {
-          if (targetElement) {
-            targetElement.focus();
-          }
-          focusStore.storeFocus();
-          keyboardFocusScope.scopeFocus(popoverElement);
-        },
-        modifiers: this.props.popperModifiers ? [...this.props.popperModifiers, ...stdModifiers] : stdModifiers
-      });
-    }
-    this.previousTargetElement = targetElement;
-    if (this.popper) {
-      this.popper.update();
-    }
-  }
-  render() {
-    const {
-      isOpen,
-      onClose,
-      placement,
-      popperModifiers,
-      portalClassName,
-      portalStyle,
-      renderTarget,
-      target,
-      ...rest
-    } = this.props;
-    const classNames = [getClassName('bpk-popover-portal')];
-    if (portalClassName) {
-      classNames.push(portalClassName);
-    }
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [typeof target !== 'function' && target, /*#__PURE__*/_jsx(Portal, {
-        beforeClose: this.beforeClose
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
-        className: classNames.join(' '),
-        isOpen: isOpen,
-        onClose: this.onClose,
-        onRender: this.onRender,
-        style: portalStyle,
-        renderTarget: renderTarget,
-        target: target,
-        children: /*#__PURE__*/_jsx(BpkPopover, {
-          onClose: this.onClose,
-          ...rest
-        })
-      })]
-    });
-  }
-}
-export const propTypes = {
-  // BpkPopover props - when migrating the popover to TS, we can import the type from BpkPopover
-  children: PropTypes.node.isRequired,
-  closeButtonText: PropTypes.string.isRequired,
-  id: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  closeButtonIcon: PropTypes.bool,
-  closeButtonProps: PropTypes.object,
-  labelAsTitle: PropTypes.bool,
-  padded: PropTypes.bool,
-  // BpkPopoverPortal additional props
-  /**
-   * In order to attach the popover to a regular DOM element, provide a function which returns it to `target`.
-   * `target` can be a DOM element with a `ref` attached to it or a function that returns a DOM element.
-   */
-  target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  portalStyle: PropTypes.object,
-  portalClassName: PropTypes.string,
-  renderTarget: PropTypes.func,
-  /**
-   * Please refer to the [documentation](https://popper.js.org/docs/v2/modifiers/) for the underlying positioning library "Popper.js".
-   * You can achieve various behaviours such as allowing the popover to overflow the viewport etc.
-   */
-  popperModifiers: PropTypes.arrayOf(PropTypes.object)
-};
-export const defaultProps = {
-  // BpkPopover props - when migrating the popover to TS, we can import the type from BpkPopover
-  className: null,
-  closeButtonIcon: true,
-  closeButtonProps: null,
-  labelAsTitle: false,
-  padded: true,
-  // BpkPopoverPortal additional props
-  placement: 'bottom',
-  portalStyle: null,
-  portalClassName: null,
-  renderTarget: null,
-  popperModifiers: null
-};
-BpkPopoverPortal.propTypes = {
-  ...propTypes
-};
-BpkPopoverPortal.defaultProps = {
-  ...defaultProps
-};
-export default BpkPopoverPortal;

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

@@ -1,76 +0,0 @@
-/*
- * 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.
- */
-
-// This code is based on that from `a11y-focus-scope`.
-// Instead of completely preventing focus leaving the target element,
-// it only prevents it leaving due to keyboard events.
-// Clicks outside the target element will move focus as normal.
-
-import focusin from 'focusin';
-import tabbable from 'tabbable';
-let polyfilled = false;
-let focusTrapped = false;
-const init = element => {
-  // lazily polyfill focusin for firefox
-  if (!polyfilled) {
-    focusin.polyfill();
-    polyfilled = true;
-  }
-  const focus = () => {
-    (tabbable(element)[0] || element).focus();
-  };
-  const enableFocusTrapping = () => {
-    focusTrapped = true;
-  };
-  const disableFocusTrapping = () => {
-    focusTrapped = false;
-  };
-  const checkFocus = event => {
-    if (!focusTrapped) {
-      return;
-    }
-    if (element !== event.target && !element.contains(event.target)) {
-      focus();
-    }
-  };
-  focus();
-
-  // As we only want to trap focus for keyboard navigation, we enable focus trapping on keydown and disable it again on keyup.
-  // This means that focus is trapped when pressing the tab key, but not trapped for other navigation events such as mouse clicks.
-  document.addEventListener('keydown', enableFocusTrapping);
-  document.addEventListener('focusin', checkFocus);
-  document.addEventListener('keyup', disableFocusTrapping);
-  return () => {
-    document.removeEventListener('keydown', enableFocusTrapping);
-    document.removeEventListener('focusin', checkFocus);
-    document.removeEventListener('keyup', disableFocusTrapping);
-  };
-};
-let teardownFn;
-const scopeFocus = element => {
-  if (teardownFn) teardownFn();
-  teardownFn = init(element);
-};
-const unscopeFocus = () => {
-  if (teardownFn) teardownFn();
-  teardownFn = null;
-};
-export default {
-  scopeFocus,
-  unscopeFocus
-};