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

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

@@ -1,75 +1,56 @@
-/*
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-
-import ClearIcon from '../../bpk-component-icon/sm/close-circle';
-import { withButtonAlignment } from '../../bpk-component-icon';
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkClearButton.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const ClearButtonIcon = withButtonAlignment(ClearIcon);
-
-type Props = {
-  label: string,
-  onClick: (SyntheticInputEvent<HTMLButtonElement>) => mixed,
-  className: ?string,
-};
-
-const BpkClearButton = (props: Props) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _closeCircle = _interopRequireDefault(require("../../bpk-component-icon/sm/close-circle"));
+var _bpkComponentIcon = require("../../bpk-component-icon");
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _BpkClearButtonModule = _interopRequireDefault(require("./BpkClearButton.module.css"));
+const _excluded = ["className", "label", "onClick"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkClearButtonModule.default);
+const ClearButtonIcon = (0, _bpkComponentIcon.withButtonAlignment)(_closeCircle.default);
+const BpkClearButton = props => {
   const classNames = [getClassName('bpk-clear-button')];
-  const { className, label, onClick, ...rest } = props;
-
+  const {
+      className,
+      label,
+      onClick
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
   if (className) {
     classNames.push(className);
   }
-
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <button
-      type="button"
-      title={label}
-      onClick={onClick}
-      aria-label={label}
-      className={classNames.join(' ')}
-      {...rest}
-    >
-      <ClearButtonIcon
-        focusable="false" // prevents focus on IE11
-        className={getClassName('bpk-clear-button__icon')}
-      />
-    </button>
+    _react.default.createElement("button", _extends({
+      type: "button",
+      title: label,
+      onClick: onClick,
+      "aria-label": label,
+      className: classNames.join(' ')
+    }, rest), /*#__PURE__*/_react.default.createElement(ClearButtonIcon, {
+      focusable: "false" // prevents focus on IE11
+      ,
+      className: getClassName('bpk-clear-button__icon')
+    }))
   );
 };
-
 BpkClearButton.propTypes = {
-  label: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  className: PropTypes.string,
+  label: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func.isRequired,
+  className: _propTypes.default.string
 };
-
 BpkClearButton.defaultProps = {
-  className: null,
+  className: null
 };
-
-export default BpkClearButton;
+var _default = BpkClearButton;
+exports.default = _default;

package/bpk-component-input/src/BpkClearButton.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-clear-button{padding:0;border:0;background-color:transparent;color:#68697f;cursor:pointer;appearance:none}.bpk-no-touch-support .bpk-clear-button:hover:not(:active):not(:disabled){color:#444560}:global(.bpk-no-touch-support) .bpk-clear-button:hover:not(:active):not(:disabled){color:#444560}.bpk-clear-button:active{color:#111236}.bpk-clear-button__icon{fill:currentColor}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-clear-button{padding:0;border:0;background-color:transparent;color:#545860;cursor:pointer;appearance:none}.bpk-no-touch-support .bpk-clear-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-clear-button:hover:not(:active):not(:disabled){color:#161616}.bpk-clear-button:active{color:#161616}.bpk-clear-button__icon{fill:currentcolor}

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

@@ -1,73 +1,53 @@
-/*
- * 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) {
+"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) {
     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 {
-      className,
-      clearButtonLabel,
-      clearButtonMode,
-      docked,
-      dockedFirst,
-      dockedLast,
-      dockedMiddle,
-      inputRef,
-      large,
-      name,
-      onClear,
-      valid,
-      value,
-      ...rest
-    } = this.props;
+    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);
 
     // Used as a ref for focussing the input when cleared.
     let ref = null;
@@ -75,35 +55,23 @@ class BpkInput extends Component<Props, State> {
     // Explicit check for false primitive value as undefined is
     // treated as neither valid nor invalid
     const isInvalid = valid === false;
-
-    const clearable =
-      clearButtonMode && clearButtonMode !== CLEAR_BUTTON_MODES.never;
-
+    const clearable = clearButtonMode && clearButtonMode !== _commonTypes.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 === CLEAR_BUTTON_MODES.always ||
-        this.state.persistClearButton
-      ) {
+      if (clearButtonMode === _commonTypes.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'));
     }
@@ -123,57 +91,53 @@ class BpkInput extends Component<Props, State> {
         classNames.push(className);
       }
     }
-
-    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}
-      />
-    );
+    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));
 
     // 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 ? (
-      <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
-    );
+    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;
   }
 }
-
-export default BpkInput;
+_defineProperty(BpkInput, "propTypes", _commonTypes.propTypes);
+_defineProperty(BpkInput, "defaultProps", _commonTypes.defaultProps);
+var _default = BpkInput;
+exports.default = _default;

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 #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}
+@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}

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

@@ -1,3 +1,11 @@
+"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
  *
@@ -14,106 +22,58 @@
  * 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';
-
-export const CLEAR_BUTTON_MODES = {
+ */const CLEAR_BUTTON_MODES = {
   never: 'never',
   whileEditing: 'whileEditing',
-  always: 'always',
+  always: 'always'
 };
-
-export const INPUT_TYPES = {
+exports.CLEAR_BUTTON_MODES = CLEAR_BUTTON_MODES;
+const INPUT_TYPES = {
   text: 'text',
   email: 'email',
   number: 'number',
   password: 'password',
-  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,
+  tel: 'tel'
 };
-
-export const clearablePropType = (
-  props: Props,
-  propName: string,
-  componentName: string,
-): ?Error => {
-  const createError = (message) =>
-    new Error(
-      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. ${message}.`,
-    );
-
+exports.INPUT_TYPES = INPUT_TYPES;
+const clearablePropType = (props, propName, componentName) => {
+  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;
 };
-
-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)),
+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)),
   clearButtonLabel: clearablePropType,
-  onClear: clearablePropType,
+  onClear: clearablePropType
 };
-
-export const defaultProps = {
+exports.propTypes = propTypes;
+const defaultProps = {
   type: INPUT_TYPES.text,
   className: null,
   valid: null,
@@ -125,5 +85,6 @@ export 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,3 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,5 +21,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-export default ['inputInvalidBorderColor'];
+var _default = ['inputInvalidBorderColor'];
+exports.default = _default;