@skyscanner/backpack-web 34.16.0 → 35.0.0

package/bpk-theming/src/BpkThemeProvider.js

@@ -17,7 +17,6 @@
  */
 
 import PropTypes from 'prop-types';
-import { Component } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 const uniq = (arr = []) => {
   const seen = {};
@@ -50,35 +49,25 @@ const createStyle = (theme, themeAttributes) => {
   }
   return style;
 };
-class BpkThemeProvider extends Component {
-  getChildContext() {
-    return {
-      theme: this.props.theme
-    };
-  }
-  render() {
-    const {
-      children,
-      component: WrapperComponent,
-      style: userStyle,
-      theme,
-      themeAttributes,
-      ...rest
-    } = this.props;
-    const dedupedThemeAttributes = uniq(themeAttributes);
-    const style = createStyle(theme, dedupedThemeAttributes);
-    return /*#__PURE__*/_jsx(WrapperComponent, {
-      style: {
-        ...userStyle,
-        ...style
-      },
-      ...rest,
-      children: children
-    });
-  }
-}
-BpkThemeProvider.childContextTypes = {
-  theme: PropTypes.object // eslint-disable-line react/forbid-prop-types
+const BpkThemeProvider = props => {
+  const {
+    children,
+    component: WrapperComponent,
+    style: userStyle,
+    theme,
+    themeAttributes,
+    ...rest
+  } = props;
+  const dedupedThemeAttributes = uniq(themeAttributes);
+  const style = createStyle(theme, dedupedThemeAttributes);
+  return /*#__PURE__*/_jsx(WrapperComponent, {
+    style: {
+      ...userStyle,
+      ...style
+    },
+    ...rest,
+    children: children
+  });
 };
 const themeAttributesPropType = (props, propName, componentName) => {
   const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "34.16.0",
+  "version": "35.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,7 +24,9 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-compose-refs": "^1.1.0",
     "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-use-previous": "^1.1.0",
     "@react-google-maps/api": "^2.19.3",
     "@skyscanner/bpk-foundations-web": "^18.1.0",
     "@skyscanner/bpk-svgs": "^19.3.0",
@@ -47,8 +49,8 @@
   },
   "peerDependencies": {
     "node-sass": ">= 7",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^17.0.2 - 18.3.1",
+    "react-dom": "^17.0.2 - 18.3.1",
     "react-transition-group": "^4.4.5",
     "sass": "^1",
     "sass-embedded": "^1"

package/bpk-component-nudger/src/BpkConfigurableNudger.d.ts

@@ -1,26 +0,0 @@
-import { type CommonProps } from './common-types';
-type Props = CommonProps & {
-    inputClassName?: string | null;
-    /**
-     * A simple function that will allow you to set the format of the display value e.g. local dates or times.
-     */
-    formatValue: (arg0: any) => string;
-    /**
-     * Function that handle the incrementing of the current selected value.
-     */
-    incrementValue: (arg0: any) => string | number;
-    /**
-     * Function that handle the decrementing of the current selected value.
-     */
-    decrementValue: (arg0: any) => string | number;
-    /**
-     * Given `a` and `b`:
-     *   - If `a` is less than `b` then `compareValues(a, b)` should return a value less than `0`
-     *   - If  `a` and `b` are equal then `compareValues(a, b)` should return exactly `0`
-     *   - If `a` is greater than `b` then `compareValues(a, b)` should return a value greater than `0`
-     * We use this along with the `min` and `max` values to determine when we should disable the increment and decrement buttons. This is inspired by the `compareFunction` in [Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#Description)
-     */
-    compareValues: (arg0: any, arg1: any) => number;
-};
-declare const BpkConfigurableNudger: ({ buttonType, className, compareValues, decreaseButtonLabel, decrementValue, formatValue, id, increaseButtonLabel, incrementValue, inputClassName, max, min, name, onChange, value, ...rest }: Props) => JSX.Element;
-export default BpkConfigurableNudger;

package/bpk-component-nudger/src/BpkConfigurableNudger.js

@@ -1,96 +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 { useRef } from 'react';
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
-import { withButtonAlignment } from "../../bpk-component-icon";
-import MinusIcon from "../../bpk-component-icon/sm/minus";
-import PlusIcon from "../../bpk-component-icon/sm/plus";
-import { cssModules, setNativeValue } from "../../bpk-react-utils";
-import STYLES from "./BpkNudger.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const AlignedMinusIcon = withButtonAlignment(MinusIcon);
-const AlignedPlusIcon = withButtonAlignment(PlusIcon);
-const BpkConfigurableNudger = ({
-  buttonType = 'secondary',
-  className = null,
-  compareValues,
-  decreaseButtonLabel,
-  decrementValue,
-  formatValue,
-  id,
-  increaseButtonLabel,
-  incrementValue,
-  inputClassName = null,
-  max,
-  min,
-  name,
-  onChange,
-  value,
-  ...rest
-}) => {
-  const classNames = getClassName('bpk-nudger', className);
-  const maxButtonDisabled = compareValues(value, max) >= 0;
-  const minButtonDisabled = compareValues(value, min) <= 0;
-  const inputStyles = getClassName('bpk-nudger__input', inputClassName && inputClassName, buttonType === 'secondaryOnDark' && 'bpk-nudger__input--secondary-on-dark');
-  const inputRef = useRef(null);
-  return /*#__PURE__*/_jsxs("div", {
-    className: classNames,
-    children: [/*#__PURE__*/_jsx(BpkButtonV2, {
-      type: BUTTON_TYPES[buttonType],
-      iconOnly: true,
-      onClick: () => {
-        const newValue = decrementValue(value);
-        onChange(newValue);
-        // We want to maintain native input events across our form components. Along with react updating
-        // the value attribute we can set it via native handlers and emit a "change" event.
-        inputRef.current && setNativeValue(inputRef.current, `${newValue}`);
-      },
-      disabled: minButtonDisabled,
-      title: decreaseButtonLabel,
-      "aria-controls": id,
-      children: /*#__PURE__*/_jsx(AlignedMinusIcon, {})
-    }), /*#__PURE__*/_jsx("input", {
-      type: "text",
-      "aria-live": "polite",
-      defaultValue: formatValue(value),
-      id: id,
-      ref: inputRef,
-      name: name || id,
-      onChange: event => onChange(parseInt(event?.target.value, 10)),
-      className: inputStyles,
-      ...rest
-    }), /*#__PURE__*/_jsx(BpkButtonV2, {
-      type: BUTTON_TYPES[buttonType],
-      iconOnly: true,
-      onClick: () => {
-        const newValue = incrementValue(value);
-        onChange(newValue);
-        // We want to maintain native input events across our form components. Along with react updating
-        // the value attribute we can set it via native handlers and emit a "change" event.
-        inputRef.current && setNativeValue(inputRef.current, `${newValue}`);
-      },
-      disabled: maxButtonDisabled,
-      title: increaseButtonLabel,
-      "aria-controls": id,
-      children: /*#__PURE__*/_jsx(AlignedPlusIcon, {})
-    })]
-  });
-};
-export default BpkConfigurableNudger;