@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

package/bpk-component-split-input/src/BpkSplitInput.js

@@ -14,18 +14,13 @@
  * 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.
- */
-/* @flow strict */
-
-import { Component } from 'react';
+ */import { Component } from 'react';
 import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-import { INPUT_TYPES } from '../../bpk-component-input';
-
-import InputField from './BpkInputField';
-import STYLES from './BpkSplitInput.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import { INPUT_TYPES } from "../../bpk-component-input";
+import InputField from "./BpkInputField";
+import STYLES from "./BpkSplitInput.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 
 // keyCode constants
@@ -35,88 +30,94 @@ const RIGHT_ARROW = 39;
 const DELETE = 46;
 const SPACEBAR = 32;
 const ENTER = 13;
-
 class BpkSplitInput extends Component {
   constructor(props) {
     super(props);
-
     this.state = {
       focusedInput: 0,
-      inputValue: [],
+      inputValue: []
     };
   }
-
-  onInputChange = (input) => {
-    this.setState({ inputValue: input });
-    const { onChange } = this.props;
+  onInputChange = input => {
+    this.setState({
+      inputValue: input
+    });
+    const {
+      onChange
+    } = this.props;
     const value = input.join('');
     onChange(value);
   };
-
-  updateInputValue = (value) => {
-    const { focusedInput, inputValue } = this.state;
+  updateInputValue = value => {
+    const {
+      focusedInput,
+      inputValue
+    } = this.state;
     inputValue[focusedInput] = value;
-
     this.onInputChange(inputValue);
   };
-
   handleSubmit = () => {
-    const { onSubmit } = this.props;
-    const { inputValue } = this.state;
+    const {
+      onSubmit
+    } = this.props;
+    const {
+      inputValue
+    } = this.state;
     if (this.validateInput(inputValue)) {
       const value = inputValue.join('');
       onSubmit(value);
     }
   };
-
-  validateInput = (inputValue) => {
+  validateInput = inputValue => {
     let index = 0;
     while (index < inputValue.length) {
       if (!this.isInputValid(inputValue[index])) {
-        this.setState({ focusedInput: index });
+        this.setState({
+          focusedInput: index
+        });
         return false;
       }
       index += 1;
     }
     return true;
   };
-
   isNumeric = () => this.props.type === INPUT_TYPES.number;
-
-  isInputValid = (value) => {
-    const isTypeValid = this.isNumeric()
-      ? /^\d$/.test(value)
-      : typeof value === 'string';
+  isInputValid = value => {
+    const isTypeValid = this.isNumeric() ? /^\d$/.test(value) : typeof value === 'string';
     return isTypeValid && value.trim().length === 1;
   };
-
-  focusInput = (inputIndex) => {
-    const { inputLength } = this.props;
+  focusInput = inputIndex => {
+    const {
+      inputLength
+    } = this.props;
     const focusedInput = Math.max(Math.min(inputLength - 1, inputIndex), 0);
-    this.setState({ focusedInput });
+    this.setState({
+      focusedInput
+    });
   };
-
   focusNextInput = () => {
-    const { focusedInput } = this.state;
+    const {
+      focusedInput
+    } = this.state;
     this.focusInput(focusedInput + 1);
   };
-
   focusPreviousInput = () => {
-    const { focusedInput } = this.state;
+    const {
+      focusedInput
+    } = this.state;
     this.focusInput(focusedInput - 1);
   };
-
-  handleOnPaste = (e) => {
+  handleOnPaste = e => {
     e.preventDefault();
-    const { inputLength } = this.props;
-    const { focusedInput, inputValue } = this.state;
-
-    const pastedData = e.clipboardData
-      .getData('text/plain')
-      .slice(0, inputLength - focusedInput)
-      .split('');
+    const {
+      inputLength
+    } = this.props;
+    const {
+      focusedInput,
+      inputValue
+    } = this.state;
+    const pastedData = e.clipboardData.getData('text/plain').slice(0, inputLength - focusedInput).split('');
     const charsReceived = pastedData.length;
-
     let firstInvalidInputPosition;
     let position = focusedInput;
     for (position; position < charsReceived; position += 1) {
@@ -127,15 +128,10 @@ class BpkSplitInput extends Component {
         firstInvalidInputPosition = position;
       }
     }
-    this.focusInput(
-      typeof firstInvalidInputPosition !== 'undefined'
-        ? firstInvalidInputPosition
-        : position,
-    );
+    this.focusInput(typeof firstInvalidInputPosition !== 'undefined' ? firstInvalidInputPosition : position);
     this.onInputChange(inputValue);
   };
-
-  handleOnKeyDown = (e) => {
+  handleOnKeyDown = e => {
     if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
       e.preventDefault();
       this.updateInputValue('');
@@ -143,85 +139,76 @@ class BpkSplitInput extends Component {
     } else if (e.keyCode === DELETE || e.key === 'Delete') {
       e.preventDefault();
       this.updateInputValue('');
-    } else if (
-      e.keyCode === LEFT_ARROW ||
-      e.key === 'Left' ||
-      e.key === 'ArrowLeft'
-    ) {
+    } else if (e.keyCode === LEFT_ARROW || e.key === 'Left' || e.key === 'ArrowLeft') {
       e.preventDefault();
       this.focusPreviousInput();
-    } else if (
-      e.keyCode === RIGHT_ARROW ||
-      e.key === 'Right' ||
-      e.key === 'ArrowRight'
-    ) {
+    } else if (e.keyCode === RIGHT_ARROW || e.key === 'Right' || e.key === 'ArrowRight') {
       e.preventDefault();
       this.focusNextInput();
     } else if (e.keyCode === ENTER || e.key === 'Enter') {
       e.preventDefault();
       this.handleSubmit();
-    } else if (
-      e.keyCode === SPACEBAR ||
-      e.key === ' ' ||
-      e.key === 'Spacebar' ||
-      e.key === 'Space'
-    ) {
+    } else if (e.keyCode === SPACEBAR || e.key === ' ' || e.key === 'Spacebar' || e.key === 'Space') {
       e.preventDefault();
     }
   };
-
-  handleOnChange = (e) => {
-    const { value } = e.target;
+  handleOnChange = e => {
+    const {
+      value
+    } = e.target;
     if (this.isInputValid(value)) {
       this.updateInputValue(value);
       this.focusNextInput();
     }
   };
-
   handleOnFocus = (e, index) => {
-    this.setState({ focusedInput: index });
+    this.setState({
+      focusedInput: index
+    });
     e.target.select();
   };
-
   renderInputs = () => {
-    const { focusedInput, inputValue } = this.state;
-    const { id, inputLength, label, large, name, placeholder, type } =
-      this.props;
+    const {
+      focusedInput,
+      inputValue
+    } = this.state;
+    const {
+      id,
+      inputLength,
+      label,
+      large,
+      name,
+      placeholder,
+      type
+    } = this.props;
     const inputs = [];
     for (let index = 0; index < inputLength; index += 1) {
-      inputs.push(
-        <InputField
-          key={index}
-          index={index}
-          focus={focusedInput === index}
-          id={`${id}-${index}`}
-          label={label}
-          name={name}
-          type={type}
-          large={large}
-          value={inputValue && inputValue[index]}
-          placeholder={placeholder}
-          onChange={this.handleOnChange}
-          onInput={this.handleOnChange}
-          onKeyDown={this.handleOnKeyDown}
-          onPaste={this.handleOnPaste}
-          onFocus={(e) => this.handleOnFocus(e, index)}
-        />,
-      );
+      inputs.push( /*#__PURE__*/_jsx(InputField, {
+        index: index,
+        focus: focusedInput === index,
+        id: `${id}-${index}`,
+        label: label,
+        name: name,
+        type: type,
+        large: large,
+        value: inputValue && inputValue[index],
+        placeholder: placeholder,
+        onChange: this.handleOnChange,
+        onInput: this.handleOnChange,
+        onKeyDown: this.handleOnKeyDown,
+        onPaste: this.handleOnPaste,
+        onFocus: e => this.handleOnFocus(e, index)
+      }, index));
     }
-
     return inputs;
   };
-
   render() {
-    return (
-      <div className={getClassName('bpk-split-input')}>
-        {this.renderInputs()}
-      </div>
-    );
+    return /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-split-input'),
+      children: this.renderInputs()
+    });
   }
 }
-
 BpkSplitInput.propTypes = {
   type: PropTypes.oneOf([INPUT_TYPES.text, INPUT_TYPES.number]),
   id: PropTypes.string.isRequired,
@@ -231,15 +218,13 @@ BpkSplitInput.propTypes = {
   placeholder: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
-  large: PropTypes.bool,
+  large: PropTypes.bool
 };
-
 BpkSplitInput.defaultProps = {
   type: INPUT_TYPES.number,
   inputLength: 4,
   large: true,
-  placeholder: '',
+  placeholder: ''
 };
-
 export default BpkSplitInput;
-export { INPUT_TYPES };
+export { INPUT_TYPES };

package/bpk-component-star-rating/index.js

@@ -14,25 +14,11 @@
  * 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.
- */
-
-/* @flow strict */
-
-import BpkStar, { BpkStarNonRtl, STAR_TYPES } from './src/BpkStar';
-import BpkInteractiveStar from './src/BpkInteractiveStar';
-import BpkStarRating, { ROUNDING_TYPES } from './src/BpkStarRating';
-import BpkInteractiveStarRating from './src/BpkInteractiveStarRating';
-import withInteractiveStarRatingState from './src/withInteractiveStarRatingState';
-import themeAttributes from './src/themeAttributes';
-
-export {
-  BpkStar,
-  BpkStarNonRtl,
-  STAR_TYPES,
-  ROUNDING_TYPES,
-  BpkInteractiveStar,
-  BpkInteractiveStarRating,
-  withInteractiveStarRatingState,
-  themeAttributes,
-};
-export default BpkStarRating;
+ */import BpkStar, { BpkStarNonRtl, STAR_TYPES } from "./src/BpkStar";
+import BpkInteractiveStar from "./src/BpkInteractiveStar";
+import BpkStarRating, { ROUNDING_TYPES } from "./src/BpkStarRating";
+import BpkInteractiveStarRating from "./src/BpkInteractiveStarRating";
+import withInteractiveStarRatingState from "./src/withInteractiveStarRatingState";
+import themeAttributes from "./src/themeAttributes";
+export { BpkStar, BpkStarNonRtl, STAR_TYPES, ROUNDING_TYPES, BpkInteractiveStar, BpkInteractiveStarRating, withInteractiveStarRatingState, themeAttributes };
+export default BpkStarRating;

package/bpk-component-star-rating/src/BpkInteractiveStar.js

@@ -14,61 +14,43 @@
  * 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.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import { BpkStarNonRtl, STAR_TYPES } from './BpkStar';
-import STYLES from './BpkInteractiveStar.module.scss';
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import { BpkStarNonRtl, STAR_TYPES } from "./BpkStar";
+import STYLES from "./BpkInteractiveStar.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-type Props = {
-  label: string,
-  name: string,
-  onClick: () => mixed,
-  onMouseEnter: () => mixed,
-  type: typeof STAR_TYPES.EMPTY | typeof STAR_TYPES.FULL,
-  value: number,
-  selected: boolean,
-};
-
-const BpkInteractiveStar = (props: Props) => {
-  const { label, name, onClick, onMouseEnter, selected, type, value, ...rest } =
-    props;
-
-  const buttonClassNames = getClassName(
-    'bpk-interactive-star',
-    selected && 'bpk-interactive-star--selected',
-  );
-
-  const iconClassNames = getClassName(
-    'bpk-interactive-star__icon',
-    selected && 'bpk-interactive-star__icon--selected',
-  );
+const BpkInteractiveStar = props => {
+  const {
+    label,
+    name,
+    onClick,
+    onMouseEnter,
+    selected,
+    type,
+    value,
+    ...rest
+  } = props;
+  const buttonClassNames = getClassName('bpk-interactive-star', selected && 'bpk-interactive-star--selected');
+  const iconClassNames = getClassName('bpk-interactive-star__icon', selected && 'bpk-interactive-star__icon--selected');
 
   // Note we use `BpkStarRatingNonRtl` here otherwise it already has `scaleX(-1)` applied in RTL.
   // That causes the scale animation to be a bit over the top.
 
-  return (
-    <button
-      aria-label={label}
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      className={buttonClassNames}
-      aria-pressed={selected}
-      type="button"
-    >
-      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */}
-      <BpkStarNonRtl className={iconClassNames} type={type} {...rest} />
-    </button>
-  );
+  return /*#__PURE__*/_jsx("button", {
+    "aria-label": label,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    className: buttonClassNames,
+    "aria-pressed": selected,
+    type: "button",
+    children: /*#__PURE__*/_jsx(BpkStarNonRtl, {
+      className: iconClassNames,
+      type: type,
+      ...rest
+    })
+  });
 };
-
 BpkInteractiveStar.propTypes = {
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
@@ -76,11 +58,9 @@ BpkInteractiveStar.propTypes = {
   onMouseEnter: PropTypes.func.isRequired,
   type: PropTypes.oneOf([STAR_TYPES.EMPTY, STAR_TYPES.FULL]).isRequired,
   value: PropTypes.number.isRequired,
-  selected: PropTypes.bool,
+  selected: PropTypes.bool
 };
-
 BpkInteractiveStar.defaultProps = {
-  selected: false,
+  selected: false
 };
-
-export default BpkInteractiveStar;
+export default BpkInteractiveStar;

package/bpk-component-star-rating/src/BpkInteractiveStarRating.js

@@ -14,42 +14,20 @@
  * 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.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import { STAR_TYPES } from './BpkStar';
-import BpkInteractiveStar from './BpkInteractiveStar';
-import STYLES from './BpkStarRating.module.scss';
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import { STAR_TYPES } from "./BpkStar";
+import BpkInteractiveStar from "./BpkInteractiveStar";
+import STYLES from "./BpkStarRating.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-export const getTypeByRating = (starNumber: number, rating: number) => {
+export const getTypeByRating = (starNumber, rating) => {
   if (starNumber > rating) {
     return STAR_TYPES.EMPTY;
   }
-
   return STAR_TYPES.FULL;
 };
-
-type Props = {
-  getStarLabel: (number, number) => string,
-  id: string,
-  className: ?string,
-  hoverRating: number,
-  large: boolean,
-  maxRating: number,
-  onMouseLeave: () => mixed,
-  onRatingHover: (number, any) => mixed,
-  onRatingSelect: (number, any) => mixed,
-  rating: number,
-};
-
-const BpkInteractiveStarRating = (props: Props) => {
+const BpkInteractiveStarRating = props => {
   const {
     className,
     getStarLabel,
@@ -63,42 +41,33 @@ const BpkInteractiveStarRating = (props: Props) => {
     rating,
     ...rest
   } = props;
-
   const stars = [];
   const classNames = [getClassName('bpk-star-rating')];
   const displayRating = hoverRating || rating;
-
   const currentRating = displayRating > maxRating ? maxRating : displayRating;
-
   if (className) {
     classNames.push(className);
   }
-
   for (let starNumber = 1; starNumber <= maxRating; starNumber += 1) {
     const type = getTypeByRating(starNumber, currentRating);
-
-    stars.push(
-      <BpkInteractiveStar
-        key={`star-${starNumber}`}
-        onClick={(event) => onRatingSelect(starNumber, event)}
-        type={type}
-        large={large}
-        onMouseEnter={(event) => onRatingHover(starNumber, event)}
-        selected={rating === starNumber}
-        label={getStarLabel(starNumber, maxRating)}
-        name={`${id}_rating`}
-        value={starNumber}
-      />,
-    );
+    stars.push( /*#__PURE__*/_jsx(BpkInteractiveStar, {
+      onClick: event => onRatingSelect(starNumber, event),
+      type: type,
+      large: large,
+      onMouseEnter: event => onRatingHover(starNumber, event),
+      selected: rating === starNumber,
+      label: getStarLabel(starNumber, maxRating),
+      name: `${id}_rating`,
+      value: starNumber
+    }, `star-${starNumber}`));
   }
-
-  return (
-    <div {...rest} className={classNames.join(' ')} onMouseLeave={onMouseLeave}>
-      {stars}
-    </div>
-  );
+  return /*#__PURE__*/_jsx("div", {
+    ...rest,
+    className: classNames.join(' '),
+    onMouseLeave: onMouseLeave,
+    children: stars
+  });
 };
-
 BpkInteractiveStarRating.propTypes = {
   getStarLabel: PropTypes.func.isRequired,
   id: PropTypes.string.isRequired,
@@ -109,9 +78,8 @@ BpkInteractiveStarRating.propTypes = {
   onMouseLeave: PropTypes.func,
   onRatingHover: PropTypes.func,
   onRatingSelect: PropTypes.func,
-  rating: PropTypes.number,
+  rating: PropTypes.number
 };
-
 BpkInteractiveStarRating.defaultProps = {
   className: null,
   hoverRating: 0,
@@ -120,7 +88,6 @@ BpkInteractiveStarRating.defaultProps = {
   onMouseLeave: () => null,
   onRatingHover: () => null,
   onRatingSelect: () => null,
-  rating: 0,
+  rating: 0
 };
-
-export default BpkInteractiveStarRating;
+export default BpkInteractiveStarRating;