@skyscanner/backpack-web 3.3.0 → 4.1.0

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

@@ -0,0 +1,243 @@
+/*
+ * 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 React, { 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);
+
+// keyCode constants
+const BACKSPACE = 8;
+const LEFT_ARROW = 37;
+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: [],
+    };
+  }
+
+  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('BpkSplitInput')}>{this.renderInputs()}</div>
+    );
+  }
+}
+
+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,
+};
+
+BpkSplitInput.defaultProps = {
+  type: INPUT_TYPES.number,
+  inputLength: 4,
+  large: true,
+  placeholder: '',
+};
+
+export default BpkSplitInput;
+export { INPUT_TYPES };

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-split-input{display:flex}

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

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+ /* stylelint-disable */
+
+@import '~bpk-mixins/index';
+
+.BpkSplitInput {
+  @include bpk-body-default;
+  display: flex;
+  width: 100%;
+  padding-top: bpk-spacing-xs();
+  flex-direction: row;
+  align-items: center;
+  direction: ltr;
+
+  &__textbox {
+    display: flex;
+    align-items: center;
+  }
+}

package/bpk-component-star-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-star-rating",
-  "version": "3.1.11",
+  "version": "3.1.13",
   "description": "Backpack rating star component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.11",
+    "bpk-component-icon": "^9.2.12",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-table": "^3.1.10",
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-component-table": "^3.1.11",
+    "bpk-storybook-utils": "^1.1.10"
   }
 }

package/bpk-component-switch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-switch",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "description": "Backpack switch component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-table",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack table component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-text",
-  "version": "7.0.4",
+  "version": "7.0.5",
   "description": "Backpack text component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-textarea/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-textarea",
-  "version": "4.2.10",
+  "version": "4.2.11",
   "description": "Backpack textarea component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,12 +15,12 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-label": "^5.1.10",
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-component-label": "^5.1.11",
+    "bpk-storybook-utils": "^1.1.10"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-theme-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,10 +15,10 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-label": "^5.1.10",
-    "bpk-component-select": "^5.1.10",
+    "bpk-component-label": "^5.1.11",
+    "bpk-component-select": "^5.1.11",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "4.1.11",
+  "version": "4.1.12",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,14 +15,14 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-icon": "^9.2.11"
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-icon": "^9.2.12"
   }
 }

package/bpk-component-tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-tooltip",
-  "version": "7.0.0",
+  "version": "7.0.1",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.4"
+    "bpk-component-text": "^7.0.5"
   }
 }

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

@@ -22,7 +22,7 @@ import { createPopper, basePlacements } from '@popperjs/core';
 import PropTypes from 'prop-types';
 import React, { Component, type Node, type Element } from 'react';
 
-import { Portal, cssModules } from '../../bpk-react-utils';
+import { PortalV1, cssModules } from '../../bpk-react-utils';
 
 import BpkTooltip, {
   propTypes as tooltipPropTypes,
@@ -196,7 +196,7 @@ class BpkTooltipPortal extends Component<Props, State> {
     }
 
     return renderPortal ? (
-      <Portal
+      <PortalV1
         target={targetWithAccessibilityProps}
         targetRef={(targetRef) => {
           this.targetRef = targetRef;
@@ -212,7 +212,7 @@ class BpkTooltipPortal extends Component<Props, State> {
         <BpkTooltip padded={padded} {...rest}>
           {children}
         </BpkTooltip>
-      </Portal>
+      </PortalV1>
     ) : (
       targetWithAccessibilityProps
     );

package/bpk-react-utils/index.js

@@ -20,6 +20,7 @@
 
 import wrapDisplayName from './src/wrapDisplayName';
 import Portal from './src/Portal';
+import PortalV1 from './src/Portal-v1';
 import TransitionInitialMount from './src/TransitionInitialMount';
 import cssModules from './src/cssModules';
 import deprecated from './src/deprecated';
@@ -33,6 +34,7 @@ import isRTL from './src/isRTL';
 
 export {
   Portal,
+  PortalV1,
   TransitionInitialMount,
   cssModules,
   deprecated,
@@ -45,6 +47,7 @@ export {
 };
 export default {
   Portal,
+  PortalV1,
   TransitionInitialMount,
   cssModules,
   deprecated,

package/bpk-react-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-react-utils",
-  "version": "4.1.2",
+  "version": "5.0.0",
   "description": "Utilities for Backpack's React components.",
   "license": "Apache-2.0",
   "repository": {