@skyscanner/backpack-web 21.0.2 → 22.0.0-beta.1

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

@@ -1,32 +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.
- */
-/* @flow strict */
-
-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';
-
-const getClassName = cssModules(STYLES);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "INPUT_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _bpkComponentInput.INPUT_TYPES;
+  }
+});
+exports.default = void 0;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _bpkComponentInput = require("../../bpk-component-input");
+var _BpkInputField = _interopRequireDefault(require("./BpkInputField"));
+var _BpkSplitInputModule = _interopRequireDefault(require("./BpkSplitInput.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkSplitInputModule.default);
 
 // keyCode constants
 const BACKSPACE = 8;
@@ -35,211 +30,201 @@ const RIGHT_ARROW = 39;
 const DELETE = 46;
 const SPACEBAR = 32;
 const ENTER = 13;
-
-class BpkSplitInput extends Component {
+class BpkSplitInput extends _react.Component {
   constructor(props) {
     super(props);
-
+    _defineProperty(this, "onInputChange", input => {
+      this.setState({
+        inputValue: input
+      });
+      const {
+        onChange
+      } = this.props;
+      const value = input.join('');
+      onChange(value);
+    });
+    _defineProperty(this, "updateInputValue", value => {
+      const {
+        focusedInput,
+        inputValue
+      } = this.state;
+      inputValue[focusedInput] = value;
+      this.onInputChange(inputValue);
+    });
+    _defineProperty(this, "handleSubmit", () => {
+      const {
+        onSubmit
+      } = this.props;
+      const {
+        inputValue
+      } = this.state;
+      if (this.validateInput(inputValue)) {
+        const value = inputValue.join('');
+        onSubmit(value);
+      }
+    });
+    _defineProperty(this, "validateInput", inputValue => {
+      let index = 0;
+      while (index < inputValue.length) {
+        if (!this.isInputValid(inputValue[index])) {
+          this.setState({
+            focusedInput: index
+          });
+          return false;
+        }
+        index += 1;
+      }
+      return true;
+    });
+    _defineProperty(this, "isNumeric", () => this.props.type === _bpkComponentInput.INPUT_TYPES.number);
+    _defineProperty(this, "isInputValid", value => {
+      const isTypeValid = this.isNumeric() ? /^\d$/.test(value) : typeof value === 'string';
+      return isTypeValid && value.trim().length === 1;
+    });
+    _defineProperty(this, "focusInput", inputIndex => {
+      const {
+        inputLength
+      } = this.props;
+      const focusedInput = Math.max(Math.min(inputLength - 1, inputIndex), 0);
+      this.setState({
+        focusedInput
+      });
+    });
+    _defineProperty(this, "focusNextInput", () => {
+      const {
+        focusedInput
+      } = this.state;
+      this.focusInput(focusedInput + 1);
+    });
+    _defineProperty(this, "focusPreviousInput", () => {
+      const {
+        focusedInput
+      } = this.state;
+      this.focusInput(focusedInput - 1);
+    });
+    _defineProperty(this, "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 charsReceived = pastedData.length;
+      let firstInvalidInputPosition;
+      let position = focusedInput;
+      for (position; position < charsReceived; position += 1) {
+        const firstElement = pastedData.shift();
+        if (this.isInputValid(firstElement)) {
+          inputValue[position] = firstElement;
+        } else if (typeof firstInvalidInputPosition === 'undefined') {
+          firstInvalidInputPosition = position;
+        }
+      }
+      this.focusInput(typeof firstInvalidInputPosition !== 'undefined' ? firstInvalidInputPosition : position);
+      this.onInputChange(inputValue);
+    });
+    _defineProperty(this, "handleOnKeyDown", e => {
+      if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
+        e.preventDefault();
+        this.updateInputValue('');
+        this.focusPreviousInput();
+      } else if (e.keyCode === DELETE || e.key === 'Delete') {
+        e.preventDefault();
+        this.updateInputValue('');
+      } 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') {
+        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') {
+        e.preventDefault();
+      }
+    });
+    _defineProperty(this, "handleOnChange", e => {
+      const {
+        value
+      } = e.target;
+      if (this.isInputValid(value)) {
+        this.updateInputValue(value);
+        this.focusNextInput();
+      }
+    });
+    _defineProperty(this, "handleOnFocus", (e, index) => {
+      this.setState({
+        focusedInput: index
+      });
+      e.target.select();
+    });
+    _defineProperty(this, "renderInputs", () => {
+      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( /*#__PURE__*/(0, _jsxRuntime.jsx)(_BpkInputField.default, {
+          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;
+    });
     this.state = {
       focusedInput: 0,
-      inputValue: [],
+      inputValue: []
     };
   }
-
-  onInputChange = (input) => {
-    this.setState({ inputValue: input });
-    const { onChange } = this.props;
-    const value = input.join('');
-    onChange(value);
-  };
-
-  updateInputValue = (value) => {
-    const { focusedInput, inputValue } = this.state;
-    inputValue[focusedInput] = value;
-
-    this.onInputChange(inputValue);
-  };
-
-  handleSubmit = () => {
-    const { onSubmit } = this.props;
-    const { inputValue } = this.state;
-    if (this.validateInput(inputValue)) {
-      const value = inputValue.join('');
-      onSubmit(value);
-    }
-  };
-
-  validateInput = (inputValue) => {
-    let index = 0;
-    while (index < inputValue.length) {
-      if (!this.isInputValid(inputValue[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';
-    return isTypeValid && value.trim().length === 1;
-  };
-
-  focusInput = (inputIndex) => {
-    const { inputLength } = this.props;
-    const focusedInput = Math.max(Math.min(inputLength - 1, inputIndex), 0);
-    this.setState({ focusedInput });
-  };
-
-  focusNextInput = () => {
-    const { focusedInput } = this.state;
-    this.focusInput(focusedInput + 1);
-  };
-
-  focusPreviousInput = () => {
-    const { focusedInput } = this.state;
-    this.focusInput(focusedInput - 1);
-  };
-
-  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 charsReceived = pastedData.length;
-
-    let firstInvalidInputPosition;
-    let position = focusedInput;
-    for (position; position < charsReceived; position += 1) {
-      const firstElement = pastedData.shift();
-      if (this.isInputValid(firstElement)) {
-        inputValue[position] = firstElement;
-      } else if (typeof firstInvalidInputPosition === 'undefined') {
-        firstInvalidInputPosition = position;
-      }
-    }
-    this.focusInput(
-      typeof firstInvalidInputPosition !== 'undefined'
-        ? firstInvalidInputPosition
-        : position,
-    );
-    this.onInputChange(inputValue);
-  };
-
-  handleOnKeyDown = (e) => {
-    if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
-      e.preventDefault();
-      this.updateInputValue('');
-      this.focusPreviousInput();
-    } else if (e.keyCode === DELETE || e.key === 'Delete') {
-      e.preventDefault();
-      this.updateInputValue('');
-    } 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'
-    ) {
-      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'
-    ) {
-      e.preventDefault();
-    }
-  };
-
-  handleOnChange = (e) => {
-    const { value } = e.target;
-    if (this.isInputValid(value)) {
-      this.updateInputValue(value);
-      this.focusNextInput();
-    }
-  };
-
-  handleOnFocus = (e, 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 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)}
-        />,
-      );
-    }
-
-    return inputs;
-  };
-
   render() {
-    return (
-      <div className={getClassName('bpk-split-input')}>
-        {this.renderInputs()}
-      </div>
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.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,
-  label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  inputLength: PropTypes.number,
-  placeholder: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  large: PropTypes.bool,
+  type: _propTypes.default.oneOf([_bpkComponentInput.INPUT_TYPES.text, _bpkComponentInput.INPUT_TYPES.number]),
+  id: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  name: _propTypes.default.string.isRequired,
+  inputLength: _propTypes.default.number,
+  placeholder: _propTypes.default.string,
+  onChange: _propTypes.default.func.isRequired,
+  onSubmit: _propTypes.default.func.isRequired,
+  large: _propTypes.default.bool
 };
-
 BpkSplitInput.defaultProps = {
-  type: INPUT_TYPES.number,
+  type: _bpkComponentInput.INPUT_TYPES.number,
   inputLength: 4,
   large: true,
-  placeholder: '',
+  placeholder: ''
 };
-
-export default BpkSplitInput;
-export { INPUT_TYPES };
+var _default = BpkSplitInput;
+exports.default = _default;

package/bpk-component-split-input/src/BpkSplitInput.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-split-input{display:flex}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-split-input{font-size:1rem;line-height:1.5rem;font-weight:400;display:flex;width:100%;padding-top:0.25rem;flex-direction:row;align-items:center;direction:ltr}.bpk-split-input__textbox{display:flex;align-items:center}

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

@@ -1,3 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BpkInteractiveStar", {
+  enumerable: true,
+  get: function () {
+    return _BpkInteractiveStar.default;
+  }
+});
+Object.defineProperty(exports, "BpkInteractiveStarRating", {
+  enumerable: true,
+  get: function () {
+    return _BpkInteractiveStarRating.default;
+  }
+});
+Object.defineProperty(exports, "BpkStar", {
+  enumerable: true,
+  get: function () {
+    return _BpkStar.default;
+  }
+});
+Object.defineProperty(exports, "BpkStarNonRtl", {
+  enumerable: true,
+  get: function () {
+    return _BpkStar.BpkStarNonRtl;
+  }
+});
+Object.defineProperty(exports, "ROUNDING_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _BpkStarRating.ROUNDING_TYPES;
+  }
+});
+Object.defineProperty(exports, "STAR_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _BpkStar.STAR_TYPES;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "themeAttributes", {
+  enumerable: true,
+  get: function () {
+    return _themeAttributes.default;
+  }
+});
+Object.defineProperty(exports, "withInteractiveStarRatingState", {
+  enumerable: true,
+  get: function () {
+    return _withInteractiveStarRatingState.default;
+  }
+});
+var _BpkStar = _interopRequireWildcard(require("./src/BpkStar"));
+var _BpkInteractiveStar = _interopRequireDefault(require("./src/BpkInteractiveStar"));
+var _BpkStarRating = _interopRequireWildcard(require("./src/BpkStarRating"));
+var _BpkInteractiveStarRating = _interopRequireDefault(require("./src/BpkInteractiveStarRating"));
+var _withInteractiveStarRatingState = _interopRequireDefault(require("./src/withInteractiveStarRatingState"));
+var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,24 +78,5 @@
  * 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;
+var _default = _BpkStarRating.default;
+exports.default = _default;