@skyscanner/backpack-web 9.1.0-alpha.1 → 9.2.0-beta.2

package/bpk-component-input/index.js

@@ -1,67 +1,50 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "CLEAR_BUTTON_MODES", {
-  enumerable: true,
-  get: function () {
-    return _commonTypes.CLEAR_BUTTON_MODES;
-  }
-});
-exports.default = exports.INPUT_TYPES = void 0;
-Object.defineProperty(exports, "defaultProps", {
-  enumerable: true,
-  get: function () {
-    return _commonTypes.defaultProps;
-  }
-});
-Object.defineProperty(exports, "propTypes", {
-  enumerable: true,
-  get: function () {
-    return _commonTypes.propTypes;
-  }
-});
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.default;
-  }
-});
-Object.defineProperty(exports, "withOpenEvents", {
-  enumerable: true,
-  get: function () {
-    return _withOpenEvents.default;
-  }
-});
-
-var _BpkInput = _interopRequireDefault(require("./src/BpkInput"));
-
-var _withOpenEvents = _interopRequireDefault(require("./src/withOpenEvents"));
-
-var _commonTypes = require("./src/common-types");
-
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var _default = _BpkInput.default; // TODO: Remove these in the next major
-
-exports.default = _default;
+/*
+ * 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 BpkInput from './src/BpkInput';
+import withOpenEvents from './src/withOpenEvents';
+import {
+  propTypes,
+  defaultProps,
+  CLEAR_BUTTON_MODES,
+  INPUT_TYPES as TYPES,
+  type Props,
+} from './src/common-types';
+import themeAttributes from './src/themeAttributes';
+
+export default BpkInput;
+
+// TODO: Remove these in the next major
 const DEPRECATED_INPUT_TYPES = {
   TEXT: 'text',
   EMAIL: 'email',
   NUMBER: 'number',
   PASSWORD: 'password',
-  TEL: 'tel'
+  TEL: 'tel',
 };
 
-const INPUT_TYPES = _objectSpread(_objectSpread({}, DEPRECATED_INPUT_TYPES), _commonTypes.INPUT_TYPES);
-
-exports.INPUT_TYPES = INPUT_TYPES;
+export type BpkInputProps = Props;
+export const INPUT_TYPES = { ...DEPRECATED_INPUT_TYPES, ...TYPES };
+export {
+  propTypes,
+  defaultProps,
+  withOpenEvents,
+  CLEAR_BUTTON_MODES,
+  themeAttributes,
+};

package/bpk-component-input/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "bpk-component-input",
+  "version": "7.0.1",
+  "description": "Backpack input component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
+  "dependencies": {
+    "bpk-component-icon": "^10.0.1",
+    "bpk-mixins": "^31.4.0",
+    "bpk-react-utils": "^7.0.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  },
+  "devDependencies": {
+    "bpk-component-banner-alert": "^7.0.1",
+    "bpk-component-label": "^6.0.1",
+    "bpk-storybook-utils": "^2.0.1"
+  }
+}

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

@@ -1,77 +1,74 @@
-"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");
-
-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; }
-
-var STYLES = {
-  "bpk-clear-button": "BpkClearButton-module__bpk-clear-button___3Rj7w",
-  "bpk-no-touch-support": "BpkClearButton-module__bpk-no-touch-support___3qNQ0",
-  "bpk-clear-button__icon": "BpkClearButton-module__bpk-clear-button__icon___3kxNy",
-  "bpk-keyframe-spin": "BpkClearButton-module__bpk-keyframe-spin___1eMLa"
+/*
+ * 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 getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
-const ClearButtonIcon = (0, _bpkComponentIcon.withButtonAlignment)(_closeCircle.default);
 
-const BpkClearButton = props => {
+const BpkClearButton = (props: Props) => {
   const classNames = [getClassName('bpk-clear-button')];
-
-  const {
-    className,
-    label,
-    onClick
-  } = props,
-        rest = _objectWithoutProperties(props, _excluded);
+  const { className, label, onClick, ...rest } = props;
 
   if (className) {
     classNames.push(className);
   }
 
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _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')
-    }))
+    <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>
   );
 };
 
 BpkClearButton.propTypes = {
-  label: _propTypes.default.string.isRequired,
-  onClick: _propTypes.default.func.isRequired,
-  className: _propTypes.default.string
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  className: PropTypes.string,
 };
+
 BpkClearButton.defaultProps = {
-  className: null
+  className: null,
 };
-var _default = BpkClearButton;
-exports.default = _default;
+
+export default BpkClearButton;

package/bpk-component-input/src/BpkClearButton.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-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}

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

@@ -0,0 +1,40 @@
+/*
+ * 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';
+
+.bpk-clear-button {
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: $bpk-color-sky-gray-tint-02;
+  cursor: pointer;
+  appearance: none;
+
+  @include bpk-hover {
+    color: $bpk-color-sky-gray-tint-01;
+  }
+
+  &:active {
+    color: $bpk-color-sky-gray;
+  }
+
+  &__icon {
+    fill: currentColor;
+  }
+}

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

@@ -1,69 +1,57 @@
-"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 _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); }
+/*
+ * 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,
+};
 
-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; }
+const getClassName = cssModules(STYLES);
 
-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; }
+class BpkInput extends Component<Props, State> {
+  static propTypes = propTypes;
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+  static defaultProps = defaultProps;
 
-var STYLES = {
-  "bpk-input": "BpkInput-module__bpk-input___hv6Kg",
-  "bpk-input__container": "BpkInput-module__bpk-input__container___1lLtW",
-  "bpk-input__clear-button": "BpkInput-module__bpk-input__clear-button___sQlxO",
-  "bpk-input__clear-button--large": "BpkInput-module__bpk-input__clear-button--large___2Bp-p",
-  "bpk-input__clear-button--persistent": "BpkInput-module__bpk-input__clear-button--persistent___2aiRE",
-  "bpk-input--valid": "BpkInput-module__bpk-input--valid___Rguzq",
-  "bpk-input--invalid": "BpkInput-module__bpk-input--invalid___1BMyc",
-  "bpk-input--clearable": "BpkInput-module__bpk-input--clearable___zhqMz",
-  "bpk-input--large": "BpkInput-module__bpk-input--large___3A-ZY",
-  "bpk-input--persistent-clearable": "BpkInput-module__bpk-input--persistent-clearable___2JlyT",
-  "bpk-input--docked": "BpkInput-module__bpk-input--docked___19uxw",
-  "bpk-input--docked-first": "BpkInput-module__bpk-input--docked-first___W2595",
-  "bpk-input--docked-middle": "BpkInput-module__bpk-input--docked-middle___yG7Wa",
-  "bpk-input--docked-last": "BpkInput-module__bpk-input--docked-last___29FrL",
-  "bpk-input--with-open-events": "BpkInput-module__bpk-input--with-open-events___2P4JI",
-  "bpk-keyframe-spin": "BpkInput-module__bpk-keyframe-spin___K_ATH"
-};
-const getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
-
-class BpkInput extends _react.Component {
-  constructor(props) {
+  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,
-          {
+    const {
       className,
       clearButtonLabel,
       clearButtonMode,
@@ -76,16 +64,19 @@ class BpkInput extends _react.Component {
       name,
       onClear,
       valid,
-      value
-    } = _this$props,
-          rest = _objectWithoutProperties(_this$props, _excluded); // Used as a ref for focussing the input when cleared.
+      value,
+      ...rest
+    } = this.props;
 
+    // Used as a ref for focussing the input when cleared.
+    let ref = null;
 
-    let ref = null; // Explicit check for false primitive value as undefined is
+    // 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'));
@@ -95,34 +86,35 @@ class BpkInput extends _react.Component {
 
     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'));
     }
-
     if (dockedFirst) {
       classNames.push(getClassName('bpk-input--docked-first'));
     }
-
     if (dockedMiddle) {
       classNames.push(getClassName('bpk-input--docked-middle'));
     }
-
     if (dockedLast) {
       classNames.push(getClassName('bpk-input--docked-last'));
     }
-
     if (className) {
       if (clearable) {
         containerClassNames.push(className);
@@ -131,60 +123,56 @@ class BpkInput extends _react.Component {
       }
     }
 
-    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.
+    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;