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

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -1,216 +1,160 @@
-/*
- * 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 { cssModules } from '../../bpk-react-utils';
-import BpkInput, { INPUT_TYPES } from '../../bpk-component-input';
-import BpkLabel from '../../bpk-component-label';
-import BpkSelect from '../../bpk-component-select';
-
-import STYLES from './BpkPhoneInput.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-export type Props = {
-  dialingCode: string,
-  dialingCodeProps: {
-    id: string,
-    name: string,
-    label: string,
-    className?: string,
-    wrapperClassName?: string,
-  },
-  dialingCodes: Array<{
-    code: string,
-    description: string,
-    numberPrefix: ?string,
-  }>,
-  id: string,
-  name: string,
-  label: string,
-  onChange: (SyntheticInputEvent<HTMLElement>) => mixed,
-  onDialingCodeChange: (SyntheticInputEvent<HTMLElement>) => mixed,
-  value: string,
-  className: ?string,
-  disabled: boolean,
-  dialingCodeMask: boolean,
-  large: boolean,
-  valid: ?boolean,
-  wrapperProps: { [string]: any },
-};
-
-type CommonProps = {
-  large: boolean,
-  disabled: boolean,
-  valid: ?boolean,
-};
-
-const BpkPhoneInput = (props: Props) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _bpkReactUtils = require("../../bpk-react-utils");
+var _bpkComponentInput = _interopRequireWildcard(require("../../bpk-component-input"));
+var _bpkComponentLabel = _interopRequireDefault(require("../../bpk-component-label"));
+var _bpkComponentSelect = _interopRequireDefault(require("../../bpk-component-select"));
+var _BpkPhoneInputModule = _interopRequireDefault(require("./BpkPhoneInput.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "dialingCode", "dialingCodeMask", "dialingCodeProps", "dialingCodes", "disabled", "id", "label", "large", "name", "onChange", "onDialingCodeChange", "valid", "value", "wrapperProps"],
+  _excluded2 = ["code", "description"];
+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 _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) { 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); }
+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)(_BpkPhoneInputModule.default);
+const BpkPhoneInput = props => {
   const {
-    className,
-    dialingCode,
-    dialingCodeMask,
-    dialingCodeProps,
-    dialingCodes,
-    disabled,
-    id,
-    label,
-    large,
-    name,
-    onChange,
-    onDialingCodeChange,
-    valid,
-    value,
-    wrapperProps,
-    ...rest
-  } = props;
-
-  const commonProps: CommonProps = {
+      className,
+      dialingCode,
+      dialingCodeMask,
+      dialingCodeProps,
+      dialingCodes,
+      disabled,
+      id,
+      label,
+      large,
+      name,
+      onChange,
+      onDialingCodeChange,
+      valid,
+      value,
+      wrapperProps
+    } = props,
+    rest = _objectWithoutProperties(props, _excluded);
+  const commonProps = {
     valid,
     large: !!large,
-    disabled: !!disabled,
+    disabled: !!disabled
   };
-
-  const dialingCodeDefinition = dialingCodes.find(
-    (dialingCodeDef) => dialingCodeDef.code === dialingCode,
-  );
+  const dialingCodeDefinition = dialingCodes.find(dialingCodeDef => dialingCodeDef.code === dialingCode);
   if (!dialingCodeDefinition) {
-    throw new Error(
-      `BpkPhoneInput: A valid value must be provided for the "dialingCode" prop. The provided value for "dialingCode" (${dialingCode}) does not match any definitions in the "dialingCodes" prop`,
-    );
+    throw new Error(`BpkPhoneInput: A valid value must be provided for the "dialingCode" prop. The provided value for "dialingCode" (${dialingCode}) does not match any definitions in the "dialingCodes" prop`);
   }
-
-  const { numberPrefix } = dialingCodeDefinition;
-
+  const {
+    numberPrefix
+  } = dialingCodeDefinition;
   let displayValue = value;
-
   if (dialingCodeMask && numberPrefix) {
     displayValue = `${numberPrefix} ${value}`;
   }
-
-  const handleChange = (e) => {
+  const handleChange = e => {
     if (!onChange) {
       return;
     }
-
     if (!dialingCodeMask) {
       onChange(e);
       return;
     }
-
     if (!numberPrefix) {
       onChange(e);
     }
-
     if (numberPrefix) {
-      let { value: newValue } = e.target;
-
+      let {
+        value: newValue
+      } = e.target;
       if (newValue.indexOf(`${numberPrefix} `) > -1) {
         const number = newValue.slice(numberPrefix.length + 1);
         newValue = number;
       }
-
       e.target.value = newValue;
     }
     onChange(e);
   };
-
-  return (
-    <span
-      {...wrapperProps}
-      className={getClassName('bpk-phone-input', wrapperProps.className)}
-    >
-      <div>
-        <BpkLabel
-          htmlFor={dialingCodeProps.id}
-          disabled={disabled}
-          className={getClassName('bpk-phone-input__label')}
-        >
-          {dialingCodeProps.label}
-        </BpkLabel>
-        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-        <BpkSelect
-          {...commonProps}
-          {...dialingCodeProps}
-          className={getClassName(dialingCodeProps.className)}
-          wrapperClassName={getClassName(dialingCodeProps.wrapperClassName)}
-          value={dialingCode}
-          onChange={onDialingCodeChange}
-        >
-          {dialingCodes.map(({ code, description, ...extraDialingProps }) => (
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", _objectSpread(_objectSpread({}, wrapperProps), {}, {
+    className: getClassName('bpk-phone-input', wrapperProps.className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentLabel.default, {
+        htmlFor: dialingCodeProps.id,
+        disabled: disabled,
+        className: getClassName('bpk-phone-input__label'),
+        children: dialingCodeProps.label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentSelect.default, _objectSpread(_objectSpread(_objectSpread({}, commonProps), dialingCodeProps), {}, {
+        className: getClassName(dialingCodeProps.className),
+        wrapperClassName: getClassName(dialingCodeProps.wrapperClassName),
+        value: dialingCode,
+        onChange: onDialingCodeChange,
+        children: dialingCodes.map(_ref => {
+          let {
+              code,
+              description
+            } = _ref,
+            extraDialingProps = _objectWithoutProperties(_ref, _excluded2);
+          return (
+            /*#__PURE__*/
             // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-            <option key={code} value={code} {...extraDialingProps}>
-              {description}
-            </option>
-          ))}
-        </BpkSelect>
-      </div>
-      <div className={getClassName('bpk-phone-input__phone-number')}>
-        <BpkLabel
-          htmlFor={id}
-          disabled={disabled}
-          className={getClassName('bpk-phone-input__label')}
-        >
-          {label}
-        </BpkLabel>
-        {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
-        <BpkInput
-          {...commonProps}
-          {...rest}
-          id={id}
-          name={name}
-          value={displayValue}
-          type={INPUT_TYPES.tel}
-          onChange={handleChange}
-          className={getClassName(className)}
-        />
-      </div>
-    </span>
-  );
+            (0, _jsxRuntime.jsx)("option", _objectSpread(_objectSpread({
+              value: code
+            }, extraDialingProps), {}, {
+              children: description
+            }), code)
+          );
+        })
+      }))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: getClassName('bpk-phone-input__phone-number'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentLabel.default, {
+        htmlFor: id,
+        disabled: disabled,
+        className: getClassName('bpk-phone-input__label'),
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bpkComponentInput.default, _objectSpread(_objectSpread(_objectSpread({}, commonProps), rest), {}, {
+        id: id,
+        name: name,
+        value: displayValue,
+        type: _bpkComponentInput.INPUT_TYPES.tel,
+        onChange: handleChange,
+        className: getClassName(className)
+      }))]
+    })]
+  }));
 };
-
 BpkPhoneInput.propTypes = {
-  dialingCode: PropTypes.string.isRequired,
-  dialingCodeProps: PropTypes.shape({
-    id: PropTypes.string,
-    name: PropTypes.string,
-    label: PropTypes.string,
-    className: PropTypes.string,
-    wrapperClassName: PropTypes.string,
+  dialingCode: _propTypes.default.string.isRequired,
+  dialingCodeProps: _propTypes.default.shape({
+    id: _propTypes.default.string,
+    name: _propTypes.default.string,
+    label: _propTypes.default.string,
+    className: _propTypes.default.string,
+    wrapperClassName: _propTypes.default.string
   }).isRequired,
-  dialingCodes: PropTypes.arrayOf(
-    PropTypes.shape({ code: PropTypes.string, description: PropTypes.string }),
-  ).isRequired,
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onDialingCodeChange: PropTypes.func.isRequired,
-  value: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  dialingCodeMask: PropTypes.bool,
-  disabled: PropTypes.bool,
-  large: PropTypes.bool,
-  valid: PropTypes.bool,
-  wrapperProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  dialingCodes: _propTypes.default.arrayOf(_propTypes.default.shape({
+    code: _propTypes.default.string,
+    description: _propTypes.default.string
+  })).isRequired,
+  id: _propTypes.default.string.isRequired,
+  name: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  onDialingCodeChange: _propTypes.default.func.isRequired,
+  value: _propTypes.default.string.isRequired,
+  className: _propTypes.default.string,
+  dialingCodeMask: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  large: _propTypes.default.bool,
+  valid: _propTypes.default.bool,
+  wrapperProps: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
 };
 
 BpkPhoneInput.defaultProps = {
@@ -219,7 +163,7 @@ BpkPhoneInput.defaultProps = {
   dialingCodeMask: false,
   large: false,
   valid: null,
-  wrapperProps: {},
+  wrapperProps: {}
 };
-
-export default BpkPhoneInput;
+var _default = BpkPhoneInput;
+exports.default = _default;

package/bpk-component-phone-input/src/BpkPhoneInput.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-phone-input{display:flex;column-gap:0.5rem}@media (max-width: 32.25rem){.bpk-phone-input{flex-wrap:wrap}.bpk-phone-input__phone-number{width:100%;margin-top:1rem}}.bpk-phone-input__phone-number{flex:auto}.bpk-phone-input__label{margin-bottom:0.5rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-phone-input{display:flex;column-gap:0.5rem}@media (max-width: 32rem){.bpk-phone-input{flex-wrap:wrap}.bpk-phone-input__phone-number{width:100%;margin-top:1rem}}.bpk-phone-input__phone-number{flex:auto}.bpk-phone-input__label{margin-bottom:0.5rem}

package/bpk-component-popover/index.js

@@ -1,3 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "bpkPopoverPortalDefaultProps", {
+  enumerable: true,
+  get: function () {
+    return _BpkPopoverPortal.defaultProps;
+  }
+});
+Object.defineProperty(exports, "bpkPopoverPortalPropTypes", {
+  enumerable: true,
+  get: function () {
+    return _BpkPopoverPortal.propTypes;
+  }
+});
+exports.default = void 0;
+Object.defineProperty(exports, "themeAttributes", {
+  enumerable: true,
+  get: function () {
+    return _themeAttributes.default;
+  }
+});
+var _BpkPopoverPortal = _interopRequireWildcard(require("./src/BpkPopoverPortal"));
+var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,20 +44,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/* @flow strict */
-
-import BpkPopoverPortal, {
-  propTypes as bpkPopoverPortalPropTypes,
-  defaultProps as bpkPopoverPortalDefaultProps,
-  type Props,
-} from './src/BpkPopoverPortal';
-import themeAttributes from './src/themeAttributes';
-
-export type BpkPopoverProps = Props;
-export {
-  themeAttributes,
-  bpkPopoverPortalPropTypes,
-  bpkPopoverPortalDefaultProps,
-};
-export default BpkPopoverPortal;
+var _default = _BpkPopoverPortal.default;
+exports.default = _default;