@skyscanner/backpack-web 17.1.0-beta.1 → 17.2.0

package/bpk-component-input/src/BpkInput.js

@@ -1,53 +1,73 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkClearButton = _interopRequireDefault(require("./BpkClearButton"));
-var _BpkInputModule = _interopRequireDefault(require("./BpkInput.module.css"));
-var _commonTypes = require("./common-types");
-const _excluded = ["className", "clearButtonLabel", "clearButtonMode", "docked", "dockedFirst", "dockedLast", "dockedMiddle", "inputRef", "large", "name", "onClear", "valid", "value"];
-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; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-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)(_BpkInputModule.default);
-class BpkInput extends _react.Component {
-  constructor(props) {
+/*
+ * 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 { cssModules } from '../../bpk-react-utils';
+
+import BpkClearButton from './BpkClearButton';
+import STYLES from './BpkInput.module.scss';
+import {
+  type Props,
+  propTypes,
+  defaultProps,
+  CLEAR_BUTTON_MODES,
+} from './common-types';
+
+type State = {
+  persistClearButton: boolean,
+};
+
+const getClassName = cssModules(STYLES);
+
+class BpkInput extends Component<Props, State> {
+  static propTypes = propTypes;
+
+  static defaultProps = defaultProps;
+
+  constructor(props: Props) {
     super(props);
-    this.state = {
-      persistClearButton: false
-    };
+
+    this.state = { persistClearButton: false };
   }
+
   render() {
     const classNames = [getClassName('bpk-input')];
     const containerClassNames = [getClassName('bpk-input__container')];
     const clearButtonClassNames = [getClassName('bpk-input__clear-button')];
-    const _this$props = this.props,
-      {
-        className,
-        clearButtonLabel,
-        clearButtonMode,
-        docked,
-        dockedFirst,
-        dockedLast,
-        dockedMiddle,
-        inputRef,
-        large,
-        name,
-        onClear,
-        valid,
-        value
-      } = _this$props,
-      rest = _objectWithoutProperties(_this$props, _excluded);
+    const {
+      className,
+      clearButtonLabel,
+      clearButtonMode,
+      docked,
+      dockedFirst,
+      dockedLast,
+      dockedMiddle,
+      inputRef,
+      large,
+      name,
+      onClear,
+      valid,
+      value,
+      ...rest
+    } = this.props;
 
     // Used as a ref for focussing the input when cleared.
     let ref = null;
@@ -55,23 +75,35 @@ class BpkInput extends _react.Component {
     // Explicit check for false primitive value as undefined is
     // treated as neither valid nor invalid
     const isInvalid = valid === false;
-    const clearable = clearButtonMode && clearButtonMode !== _commonTypes.CLEAR_BUTTON_MODES.never;
+
+    const clearable =
+      clearButtonMode && clearButtonMode !== CLEAR_BUTTON_MODES.never;
+
     if (valid) {
       classNames.push(getClassName('bpk-input--valid'));
     } else if (isInvalid) {
       classNames.push(getClassName('bpk-input--invalid'));
     }
+
     if (large) {
       classNames.push(getClassName('bpk-input--large'));
-      clearButtonClassNames.push(getClassName('bpk-input__clear-button--large'));
+      clearButtonClassNames.push(
+        getClassName('bpk-input__clear-button--large'),
+      );
     }
     if (clearable) {
       classNames.push(getClassName('bpk-input--clearable'));
-      if (clearButtonMode === _commonTypes.CLEAR_BUTTON_MODES.always || this.state.persistClearButton) {
+      if (
+        clearButtonMode === CLEAR_BUTTON_MODES.always ||
+        this.state.persistClearButton
+      ) {
         classNames.push(getClassName('bpk-input--persistent-clearable'));
-        clearButtonClassNames.push(getClassName('bpk-input__clear-button--persistent'));
+        clearButtonClassNames.push(
+          getClassName('bpk-input__clear-button--persistent'),
+        );
       }
     }
+
     if (docked) {
       classNames.push(getClassName('bpk-input--docked'));
     }
@@ -91,53 +123,57 @@ class BpkInput extends _react.Component {
         classNames.push(className);
       }
     }
-    const renderedInput =
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement("input", _extends({
-      className: classNames.join(' '),
-      ref: input => {
-        ref = input;
-        if (inputRef) {
-          inputRef(input);
-        }
-      },
-      "aria-invalid": isInvalid,
-      value: value,
-      name: name
-    }, rest));
+
+    const renderedInput = (
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+      <input
+        className={classNames.join(' ')}
+        ref={(input) => {
+          ref = input;
+          if (inputRef) {
+            inputRef(input);
+          }
+        }}
+        aria-invalid={isInvalid}
+        value={value}
+        name={name}
+        {...rest}
+      />
+    );
 
     // When we mouseDown, we should persist the clear button.
     // If we don't do this, then for `clearableWhileEditing` mode the mouseDown on the button will cause the input to lose focus,
     // which will hide the button. The `onClick` event cannot complete if the button is removed from the DOM but mouseUp!
     const onMouseDown = () => {
-      this.setState({
-        persistClearButton: true
-      });
+      this.setState({ persistClearButton: true });
     };
-    return clearable ? /*#__PURE__*/_react.default.createElement("div", {
-      className: containerClassNames.join(' ')
-    }, renderedInput, value.length > 0 && /*#__PURE__*/_react.default.createElement(_BpkClearButton.default, {
-      tabIndex: "-1",
-      label: clearButtonLabel || '',
-      onMouseDown: onMouseDown,
-      onClick: e => {
-        if (ref) {
-          ref.focus();
-        }
-        if (onClear) {
-          e.target.name = name;
-          onClear(e);
-          this.setState({
-            persistClearButton: false
-          });
-        }
-      },
-      className: clearButtonClassNames.join(' ')
-    })) : renderedInput;
+
+    return clearable ? (
+      <div className={containerClassNames.join(' ')}>
+        {renderedInput}
+        {value.length > 0 && (
+          <BpkClearButton
+            tabIndex="-1"
+            label={clearButtonLabel || ''}
+            onMouseDown={onMouseDown}
+            onClick={(e) => {
+              if (ref) {
+                ref.focus();
+              }
+              if (onClear) {
+                e.target.name = name;
+                onClear(e);
+                this.setState({ persistClearButton: false });
+              }
+            }}
+            className={clearButtonClassNames.join(' ')}
+          />
+        )}
+      </div>
+    ) : (
+      renderedInput
+    );
   }
 }
-_defineProperty(BpkInput, "propTypes", _commonTypes.propTypes);
-_defineProperty(BpkInput, "defaultProps", _commonTypes.defaultProps);
-var _default = BpkInput;
-exports.default = _default;
+
+export default BpkInput;

package/bpk-component-input/src/BpkInput.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-input{display:inline-block;width:100%;height:2.25rem;padding:.5rem .5rem;border:solid 0.0625rem #C2C9CD;border-radius:.25rem;background:#fff;color:#161616;appearance:none}.bpk-input::placeholder{color:rgba(0,0,0,0.2)}.bpk-input:disabled{border-color:#eff1f2;background:#fff;color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-input[type='number']{-moz-appearance:textfield}.bpk-input[type='number']::-webkit-inner-spin-button,.bpk-input[type='number']::-webkit-outer-spin-button{appearance:none}html[dir='rtl'] .bpk-input[type='number'],html[dir='rtl'] .bpk-input[type='tel'],html[dir='rtl'] .bpk-input[type='email']{text-align:right;direction:ltr}.bpk-input::-ms-clear{display:none}.bpk-input__container{position:relative;display:inline-block;width:100%}.bpk-input__clear-button{display:none;position:absolute;right:0.5rem;height:2.25rem}html[dir='rtl'] .bpk-input__clear-button{right:inherit;left:0.5rem}.bpk-input__clear-button--large{right:1rem;height:3rem}html[dir='rtl'] .bpk-input__clear-button--large{left:1rem}.bpk-input__clear-button--persistent{display:inherit}.bpk-input--valid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMGM4MzhhICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1rem 1rem}html[dir='rtl'] .bpk-input--valid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}.bpk-input--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right 0.5rem center;background-size:1rem 1rem;border-color:#e70866;border-color:var(--bpk-input-invalid-border-color, #e70866)}html[dir='rtl'] .bpk-input--invalid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}.bpk-input--clearable{padding-right:2rem}html[dir='rtl'] .bpk-input--clearable{padding-right:.5rem;padding-left:2rem}.bpk-input--clearable:focus{background:#fff}.bpk-input--clearable:focus+.bpk-input__clear-button{display:inherit}.bpk-input--large{height:3rem;padding-right:1rem;padding-left:1rem}.bpk-input--large.bpk-input--valid,.bpk-input--large.bpk-input--invalid,.bpk-input--large.bpk-input--clearable{padding-right:2.5rem;background-position:right 1rem center}html[dir='rtl'] .bpk-input--large.bpk-input--valid,html[dir='rtl'] .bpk-input--large.bpk-input--invalid,html[dir='rtl'] .bpk-input--large.bpk-input--clearable{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}.bpk-input--persistent-clearable{background:#fff}.bpk-input--docked:first-child{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-input--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked:first-child:focus{position:relative}.bpk-input--docked:last-child{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-input--docked:last-child{border-radius:.25rem 0 0 .25rem}.bpk-input--docked:last-child:focus{position:relative}.bpk-input--docked:not(:first-child):not(:last-child){border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-input--docked:not(:first-child):not(:last-child){border-right-width:.0625rem;border-left-width:0}.bpk-input--docked:not(:first-child):not(:last-child):focus{position:relative}.bpk-input--docked-first{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-input--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked-first:focus{position:relative}.bpk-input--docked-middle{border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-input--docked-middle{border-right-width:.0625rem;border-left-width:0}.bpk-input--docked-middle:focus{position:relative}.bpk-input--docked-last{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-input--docked-last{border-radius:.25rem 0 0 .25rem}.bpk-input--docked-last:focus{position:relative}.bpk-input--with-open-events{cursor:pointer}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-input{display:inline-block;width:100%;height:2.25rem;padding:.5rem .5rem;border:solid 0.0625rem #B2B2BF;border-radius:.25rem;background:#fff;color:#111236;appearance:none}.bpk-input::placeholder{color:#68697f}.bpk-input:disabled{border-color:#f1f2f8;background:#fff;color:#b2b2bf;cursor:not-allowed}.bpk-input[type='number']{-moz-appearance:textfield}.bpk-input[type='number']::-webkit-inner-spin-button,.bpk-input[type='number']::-webkit-outer-spin-button{appearance:none}html[dir='rtl'] .bpk-input[type='number'],html[dir='rtl'] .bpk-input[type='tel'],html[dir='rtl'] .bpk-input[type='email']{text-align:right;direction:ltr}.bpk-input::-ms-clear{display:none}.bpk-input__container{position:relative;display:inline-block;width:100%}.bpk-input__clear-button{display:none;position:absolute;right:0.5rem;height:2.25rem}html[dir='rtl'] .bpk-input__clear-button{right:inherit;left:0.5rem}.bpk-input__clear-button--large{right:1rem;height:3rem}html[dir='rtl'] .bpk-input__clear-button--large{left:1rem}.bpk-input__clear-button--persistent{display:inherit}.bpk-input--valid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMDBhNjk4ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDIyLjVDNi4yMDEgMjIuNSAxLjUgMTcuNzk5IDEuNSAxMlM2LjIwMSAxLjUgMTIgMS41IDIyLjUgNi4yMDEgMjIuNSAxMiAxNy43OTkgMjIuNSAxMiAyMi41em01LjU2LTEyLjQ0YTEuNSAxLjUgMCAwIDAtMi4xMi0yLjEybC00Ljk0IDQuOTM5LTEuOTQtMS45NGExLjUgMS41IDAgMCAwLTIuMTIgMi4xMjJsMyAzYTEuNSAxLjUgMCAwIDAgMi4xMiAwbDYtNnoiLz48L3N2Zz4=") no-repeat right 0.5rem center;background-size:1.125rem 1.125rem}html[dir='rtl'] .bpk-input--valid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}.bpk-input--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZDE0MzViICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right 0.5rem center;background-size:1.125rem 1.125rem;border-color:#d1435b;border-color:var(--bpk-input-invalid-border-color, #d1435b)}html[dir='rtl'] .bpk-input--invalid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}.bpk-input--clearable{padding-right:2rem}html[dir='rtl'] .bpk-input--clearable{padding-right:.5rem;padding-left:2rem}.bpk-input--clearable:focus{background:#fff}.bpk-input--clearable:focus+.bpk-input__clear-button{display:inherit}.bpk-input--large{height:3rem;padding-right:1rem;padding-left:1rem}.bpk-input--large.bpk-input--valid,.bpk-input--large.bpk-input--invalid,.bpk-input--large.bpk-input--clearable{padding-right:2.5rem;background-position:right 1rem center}html[dir='rtl'] .bpk-input--large.bpk-input--valid,html[dir='rtl'] .bpk-input--large.bpk-input--invalid,html[dir='rtl'] .bpk-input--large.bpk-input--clearable{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}.bpk-input--persistent-clearable{background:#fff}.bpk-input--docked:first-child{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-input--docked:first-child{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked:first-child:focus{position:relative}.bpk-input--docked:last-child{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-input--docked:last-child{border-radius:.25rem 0 0 .25rem}.bpk-input--docked:last-child:focus{position:relative}.bpk-input--docked:not(:first-child):not(:last-child){border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-input--docked:not(:first-child):not(:last-child){border-right-width:.0625rem;border-left-width:0}.bpk-input--docked:not(:first-child):not(:last-child):focus{position:relative}.bpk-input--docked-first{border-right-width:0;border-radius:.25rem 0 0 .25rem}html[dir='rtl'] .bpk-input--docked-first{border-right-width:.0625rem;border-left-width:0;border-radius:0 .25rem .25rem 0}.bpk-input--docked-first:focus{position:relative}.bpk-input--docked-middle{border-right-width:0;border-radius:0}html[dir='rtl'] .bpk-input--docked-middle{border-right-width:.0625rem;border-left-width:0}.bpk-input--docked-middle:focus{position:relative}.bpk-input--docked-last{border-radius:0 .25rem .25rem 0}html[dir='rtl'] .bpk-input--docked-last{border-radius:.25rem 0 0 .25rem}.bpk-input--docked-last:focus{position:relative}.bpk-input--with-open-events{cursor:pointer}

package/bpk-component-input/src/BpkInput.module.scss

@@ -0,0 +1,86 @@
+/*
+ * 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 '~bpk-mixins/index.scss';
+
+$bpk-spacing-v2: true;
+
+.bpk-input {
+  @include bpk-input;
+
+  &__container {
+    @include bpk-input__container;
+  }
+
+  &__clear-button {
+    display: none;
+
+    @include bpk-input__clear-button;
+
+    &--persistent {
+      display: inherit;
+    }
+  }
+
+  &--valid {
+    @include bpk-input--valid;
+  }
+
+  &--invalid {
+    @include bpk-input--invalid;
+  }
+
+  &--clearable {
+    @include bpk-input--clearable;
+
+    // Display the clear button when a clearable input is focused.
+    &:focus + .bpk-input__clear-button {
+      display: inherit;
+    }
+  }
+
+  &--large {
+    @include bpk-input--large;
+  }
+
+  // When persistent, set background to override any validity icons
+  // appearing and make the clear button always display.
+  &--persistent-clearable {
+    background: $bpk-input-background;
+  }
+
+  &--docked {
+    @include bpk-input--docked;
+
+    &-first {
+      @include bpk-input--docked-first-child;
+    }
+
+    &-middle {
+      @include bpk-input--docked-middle-child;
+    }
+
+    &-last {
+      @include bpk-input--docked-last-child;
+    }
+  }
+
+  &--with-open-events {
+    cursor: pointer;
+  }
+}

package/bpk-component-input/src/common-types.js

@@ -1,11 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.defaultProps = exports.clearablePropType = exports.INPUT_TYPES = exports.CLEAR_BUTTON_MODES = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,58 +14,106 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * 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.
- */const CLEAR_BUTTON_MODES = {
+ */
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+
+export const CLEAR_BUTTON_MODES = {
   never: 'never',
   whileEditing: 'whileEditing',
-  always: 'always'
+  always: 'always',
 };
-exports.CLEAR_BUTTON_MODES = CLEAR_BUTTON_MODES;
-const INPUT_TYPES = {
+
+export const INPUT_TYPES = {
   text: 'text',
   email: 'email',
   number: 'number',
   password: 'password',
-  tel: 'tel'
+  tel: 'tel',
+};
+
+export type Props = {
+  id: string,
+  name: string,
+  value: string,
+  type: $Keys<typeof INPUT_TYPES>,
+  className: ?string,
+  valid: ?boolean,
+  large: boolean,
+  docked: boolean,
+  dockedFirst: boolean,
+  dockedMiddle: boolean,
+  dockedLast: boolean,
+  inputRef: ?(?HTMLInputElement) => mixed,
+  clearButtonMode: $Keys<typeof CLEAR_BUTTON_MODES>,
+  clearButtonLabel: ?string,
+  onClear: ?(event: SyntheticEvent<HTMLButtonElement>) => mixed,
 };
-exports.INPUT_TYPES = INPUT_TYPES;
-const clearablePropType = (props, propName, componentName) => {
-  const createError = message => new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. ${message}.`);
+
+export const clearablePropType = (
+  props: Props,
+  propName: string,
+  componentName: string,
+): ?Error => {
+  const createError = (message) =>
+    new Error(
+      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. ${message}.`,
+    );
+
   const propBeingChecked = props[propName];
-  if (props.clearButtonMode && props.clearButtonMode !== CLEAR_BUTTON_MODES.never) {
+  if (
+    props.clearButtonMode &&
+    props.clearButtonMode !== CLEAR_BUTTON_MODES.never
+  ) {
     if (!propBeingChecked) {
-      return createError(`When \`clearButtonMode\` is not 'never', \`${propName}\` must be supplied`);
+      return createError(
+        `When \`clearButtonMode\` is not 'never', \`${propName}\` must be supplied`,
+      );
     }
+
     switch (propName) {
       case 'clearButtonLabel':
-        return typeof propBeingChecked === 'string' ? null : createError(`\`clearButtonLabel\` must be a string`);
+        return typeof propBeingChecked === 'string'
+          ? null
+          : createError(`\`clearButtonLabel\` must be a string`);
       case 'onClear':
-        return typeof propBeingChecked === 'function' ? null : createError(`\`onClear\` must be a function`);
+        return typeof propBeingChecked === 'function'
+          ? null
+          : createError(`\`onClear\` must be a function`);
       default:
         return null;
     }
   }
   return null;
 };
-exports.clearablePropType = clearablePropType;
-const propTypes = {
-  id: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string.isRequired,
-  value: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf([INPUT_TYPES.text, INPUT_TYPES.email, INPUT_TYPES.number, INPUT_TYPES.password, INPUT_TYPES.tel]),
-  className: _propTypes.default.string,
-  valid: _propTypes.default.bool,
-  large: _propTypes.default.bool,
-  docked: _propTypes.default.bool,
-  dockedFirst: _propTypes.default.bool,
-  dockedMiddle: _propTypes.default.bool,
-  dockedLast: _propTypes.default.bool,
-  inputRef: _propTypes.default.func,
-  clearButtonMode: _propTypes.default.oneOf(Object.keys(CLEAR_BUTTON_MODES)),
+
+export const propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  type: PropTypes.oneOf([
+    INPUT_TYPES.text,
+    INPUT_TYPES.email,
+    INPUT_TYPES.number,
+    INPUT_TYPES.password,
+    INPUT_TYPES.tel,
+  ]),
+  className: PropTypes.string,
+  valid: PropTypes.bool,
+  large: PropTypes.bool,
+  docked: PropTypes.bool,
+  dockedFirst: PropTypes.bool,
+  dockedMiddle: PropTypes.bool,
+  dockedLast: PropTypes.bool,
+  inputRef: PropTypes.func,
+  clearButtonMode: PropTypes.oneOf(Object.keys(CLEAR_BUTTON_MODES)),
   clearButtonLabel: clearablePropType,
-  onClear: clearablePropType
+  onClear: clearablePropType,
 };
-exports.propTypes = propTypes;
-const defaultProps = {
+
+export const defaultProps = {
   type: INPUT_TYPES.text,
   className: null,
   valid: null,
@@ -85,6 +125,5 @@ const defaultProps = {
   inputRef: null,
   clearButtonMode: CLEAR_BUTTON_MODES.never,
   clearButtonLabel: null,
-  onClear: null
+  onClear: null,
 };
-exports.defaultProps = defaultProps;

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

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -21,5 +15,5 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = ['inputInvalidBorderColor'];
-exports.default = _default;
+
+export default ['inputInvalidBorderColor'];