baseui 10.12.1 → 11.0.2

package/modal/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Close = exports.Dialog = exports.DialogContainer = exports.Backdrop = exports.Root = void 0;
+exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Close = exports.Dialog = exports.DialogContainer = exports.Root = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -50,62 +50,29 @@ var Root = (0, _index.styled)('div', function (props) {
 });
 exports.Root = Root;
 Root.displayName = "Root";
-var Backdrop = (0, _index.styled)('div', function (props) {
+var DialogContainer = (0, _index.styled)('div', function (props) {
   var $animate = props.$animate,
       $isOpen = props.$isOpen,
       $isVisible = props.$isVisible,
-      $theme = props.$theme,
-      $unstable_ModalBackdropScroll = props.$unstable_ModalBackdropScroll;
-
-  if ($unstable_ModalBackdropScroll) {
-    return {};
-  }
-
-  return _objectSpread({
-    position: 'fixed',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    // Remove grey highlight
-    WebkitTapHighlightColor: 'transparent',
-    // Disable scroll capabilities.
-    touchAction: 'none',
-    opacity: $isVisible && $isOpen ? 1 : 0
-  }, $animate ? {
+      $theme = props.$theme;
+  var animationRules = {
     transitionProperty: 'opacity',
     transitionDuration: $theme.animation.timing400,
     transitionTimingFunction: $theme.animation.easeOutCurve
-  } : null);
-});
-exports.Backdrop = Backdrop;
-Backdrop.displayName = "Backdrop";
-var DialogContainer = (0, _index.styled)('div', function (props) {
-  var $animate = props.$animate,
-      $isOpen = props.$isOpen,
-      $isVisible = props.$isVisible,
-      $theme = props.$theme,
-      $unstable_ModalBackdropScroll = props.$unstable_ModalBackdropScroll;
+  };
   return _objectSpread({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
     minHeight: '100%',
-    pointerEvents: 'none',
-    userSelect: 'none'
-  }, $unstable_ModalBackdropScroll ? _objectSpread({
+    userSelect: 'none',
     pointerEvents: 'auto',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     // Remove grey highlight
     WebkitTapHighlightColor: 'transparent',
     opacity: $isVisible && $isOpen ? 1 : 0
-  }, $animate ? {
-    transitionProperty: 'opacity',
-    transitionDuration: $theme.animation.timing400,
-    transitionTimingFunction: $theme.animation.easeOutCurve
-  } : null) : {});
+  }, $animate ? animationRules : null);
 });
 exports.DialogContainer = DialogContainer;
 DialogContainer.displayName = "DialogContainer";

package/modal/styled-components.js.flow

@@ -47,59 +47,27 @@ export const Root = styled<SharedStylePropsArgT>('div', (props) => {
   };
 });
 
-export const Backdrop = styled<SharedStylePropsArgT>('div', (props) => {
-  const { $animate, $isOpen, $isVisible, $theme, $unstable_ModalBackdropScroll } = props;
-  if ($unstable_ModalBackdropScroll) {
-    return {};
-  }
-  return {
-    position: 'fixed',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    // Remove grey highlight
-    WebkitTapHighlightColor: 'transparent',
-    // Disable scroll capabilities.
-    touchAction: 'none',
-    opacity: $isVisible && $isOpen ? 1 : 0,
-    ...($animate
-      ? {
-          transitionProperty: 'opacity',
-          transitionDuration: $theme.animation.timing400,
-          transitionTimingFunction: $theme.animation.easeOutCurve,
-        }
-      : null),
+export const DialogContainer = styled<SharedStylePropsArgT>('div', (props) => {
+  const { $animate, $isOpen, $isVisible, $theme } = props;
+  const animationRules = {
+    transitionProperty: 'opacity',
+    transitionDuration: $theme.animation.timing400,
+    transitionTimingFunction: $theme.animation.easeOutCurve,
   };
-});
 
-export const DialogContainer = styled<SharedStylePropsArgT>('div', (props) => {
-  const { $animate, $isOpen, $isVisible, $theme, $unstable_ModalBackdropScroll } = props;
   return {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
     minHeight: '100%',
-    pointerEvents: 'none',
     userSelect: 'none',
-    ...($unstable_ModalBackdropScroll
-      ? {
-          pointerEvents: 'auto',
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          // Remove grey highlight
-          WebkitTapHighlightColor: 'transparent',
-          opacity: $isVisible && $isOpen ? 1 : 0,
-          ...($animate
-            ? {
-                transitionProperty: 'opacity',
-                transitionDuration: $theme.animation.timing400,
-                transitionTimingFunction: $theme.animation.easeOutCurve,
-              }
-            : null),
-        }
-      : {}),
+    pointerEvents: 'auto',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    // Remove grey highlight
+    WebkitTapHighlightColor: 'transparent',
+    opacity: $isVisible && $isOpen ? 1 : 0,
+    ...($animate ? animationRules : null),
   };
 });
 

package/modal/types.js.flow

@@ -20,15 +20,11 @@ export type CloseSourceT = $Keys<typeof CLOSE_SOURCE>;
 
 export type OverridesT = {
   Root?: OverrideT,
-  Backdrop?: OverrideT,
   Dialog?: OverrideT,
   DialogContainer?: OverrideT,
   Close?: OverrideT,
 };
 
-// flowlint-next-line unclear-type:off
-export type ElementRefT = { current: React.ElementRef<any> | null };
-
 // Props shared by all flavors of modal
 export type ModalPropsT = {
   /** Sets whether the Modal should be displayed by easing in and out */
@@ -37,7 +33,6 @@ export type ModalPropsT = {
    * If false, the modal container itself will receive focus.
    * Moving focus into a newly opened modal is important for accessibility purposes, so please be careful!
    */
-  autofocus: boolean | null,
   autoFocus: boolean,
   /** If true, focus will be locked to elements within the modal.
    */
@@ -53,7 +48,7 @@ export type ModalPropsT = {
    * for performance reasons (wont render until opened) */
   children?: React.Node | (() => React.Node),
   /** Whether the modal should be closeable by the user
-   *  (either via escape, backdrop click, etc). You can set this to
+   *  (either via escape, dialog container click, etc). You can set this to
    * false if your modal has an action that the user must take before closing.*/
   closeable: boolean,
   isOpen: boolean,
@@ -70,9 +65,6 @@ export type ModalPropsT = {
   /** Controls the size of the modal (primarily width).
    * Can be a SIZE constant or css width property value. */
   size: SizePropT,
-  /** Make modal scrollable while cursor is over the modal's backdrop.
-   * Will be removed and implemented as the default behavior in the next major version */
-  unstable_ModalBackdropScroll?: boolean,
 };
 
 export type ModalPropsWithoutChildrenT = $Diff<ModalPropsT, { children: ?React.Node }>;
@@ -90,7 +82,6 @@ export type SharedStylePropsArgT = {
   $size: SizePropT,
   $role: RolePropT,
   $closeable: boolean,
-  $unstable_ModalBackdropScroll?: boolean,
   $isFocusVisible: boolean,
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.12.1",
+  "version": "11.0.2",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -14,7 +14,7 @@
   "module": "./esm/index.js",
   "repository": "uber/baseweb",
   "scripts": {
-    "lint:code": "eslint ./ --fix --cache",
+    "lint:code": "eslint ./ --cache",
     "lint:markdown": "markdownlint -c ./.markdownlint.json proposals",
     "lint": "yarn lint:code && yarn lint:markdown",
     "pretest": "yarn build:documentation-site-files",
@@ -29,6 +29,7 @@
     "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel ./src --out-dir ./dist/esm --ignore **.test.js,**/__tests__/**,**/e2e.js,**/template-component/**,**/test/**",
     "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel ./src --out-dir ./dist/es --ignore **.test.js,**/__tests__/**,**/e2e.js,**/template-component/**,**/test/**",
     "build": "yarn build:cjs && yarn build:esm && yarn build:es && yarn build:copy-files && yarn build:copy-flow-files && yarn build:copy-ts-files && yarn build:package-json",
+    "build:docs-and-ladle": "yarn documentation:build && yarn ladle build --base-url /ladle/ && mv build public/ladle",
     "build:documentation-site-files": "node ./scripts/build-documentation-site-files.js",
     "unit-test": "yarn jest --coverage",
     "e2e:build": "yarn ladle build --out build-ladle",

package/phone-input/default-props.js

@@ -17,7 +17,7 @@ var defaultProps = {
   'aria-label': 'Please enter a phone number without the country dial code.',
   'aria-describedby': null,
   'aria-labelledby': null,
-  clearable: false,
+  clearable: true,
   focusLock: false,
   country: {
     label: 'United States',

package/phone-input/default-props.js.flow

@@ -11,7 +11,7 @@ const defaultProps = {
   'aria-label': 'Please enter a phone number without the country dial code.',
   'aria-describedby': null,
   'aria-labelledby': null,
-  clearable: false,
+  clearable: true,
   focusLock: false,
   country: { label: 'United States', id: 'US', dialCode: '+1' },
   disabled: false,

package/phone-input/index.d.ts

@@ -335,7 +335,6 @@ export interface PhoneInputProps extends InputProps {
   overrides?: PhoneInputOverrides;
 }
 export const PhoneInput: React.FC<PhoneInputProps>;
-export const PhoneInputNext: React.FC<PhoneInputProps>;
 
 export interface PhoneInputLiteProps extends PhoneInputProps {
   countries: {[key: string]: Country};

package/phone-input/index.js

@@ -8,13 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   PhoneInput: true,
   PhoneInputLite: true,
-  PhoneInputNext: true,
   StatefulPhoneInput: true,
-  StatefulPhoneInputNext: true,
   StatefulPhoneInputContainer: true,
   CountryPicker: true,
-  CountrySelect: true,
-  CountrySelectDropdown: true,
   Flag: true,
   StyledFlag: true
 };
@@ -30,24 +26,12 @@ Object.defineProperty(exports, "PhoneInputLite", {
     return _phoneInputLite.default;
   }
 });
-Object.defineProperty(exports, "PhoneInputNext", {
-  enumerable: true,
-  get: function get() {
-    return _phoneInputNext.default;
-  }
-});
 Object.defineProperty(exports, "StatefulPhoneInput", {
   enumerable: true,
   get: function get() {
     return _statefulPhoneInput.default;
   }
 });
-Object.defineProperty(exports, "StatefulPhoneInputNext", {
-  enumerable: true,
-  get: function get() {
-    return _statefulPhoneInputNext.default;
-  }
-});
 Object.defineProperty(exports, "StatefulPhoneInputContainer", {
   enumerable: true,
   get: function get() {
@@ -60,18 +44,6 @@ Object.defineProperty(exports, "CountryPicker", {
     return _countryPicker.default;
   }
 });
-Object.defineProperty(exports, "CountrySelect", {
-  enumerable: true,
-  get: function get() {
-    return _countrySelect.default;
-  }
-});
-Object.defineProperty(exports, "CountrySelectDropdown", {
-  enumerable: true,
-  get: function get() {
-    return _countrySelectDropdown.default;
-  }
-});
 Object.defineProperty(exports, "Flag", {
   enumerable: true,
   get: function get() {
@@ -89,20 +61,12 @@ var _phoneInput = _interopRequireDefault(require("./phone-input.js"));
 
 var _phoneInputLite = _interopRequireDefault(require("./phone-input-lite.js"));
 
-var _phoneInputNext = _interopRequireDefault(require("./phone-input-next.js"));
-
 var _statefulPhoneInput = _interopRequireDefault(require("./stateful-phone-input.js"));
 
-var _statefulPhoneInputNext = _interopRequireDefault(require("./stateful-phone-input-next.js"));
-
 var _statefulPhoneInputContainer = _interopRequireDefault(require("./stateful-phone-input-container.js"));
 
 var _countryPicker = _interopRequireDefault(require("./country-picker.js"));
 
-var _countrySelect = _interopRequireDefault(require("./country-select.js"));
-
-var _countrySelectDropdown = _interopRequireDefault(require("./country-select-dropdown.js"));
-
 var _flag = _interopRequireWildcard(require("./flag.js"));
 
 var _constants = require("./constants.js");

package/phone-input/index.js.flow

@@ -8,13 +8,9 @@ LICENSE file in the root directory of this source tree.
 
 export { default as PhoneInput } from './phone-input.js';
 export { default as PhoneInputLite } from './phone-input-lite.js';
-export { default as PhoneInputNext } from './phone-input-next.js';
 export { default as StatefulPhoneInput } from './stateful-phone-input.js';
-export { default as StatefulPhoneInputNext } from './stateful-phone-input-next.js';
 export { default as StatefulPhoneInputContainer } from './stateful-phone-input-container.js';
 export { default as CountryPicker } from './country-picker.js';
-export { default as CountrySelect } from './country-select.js';
-export { default as CountrySelectDropdown } from './country-select-dropdown.js';
 export { default as Flag, StyledFlag } from './flag.js';
 export * from './constants.js';
 export type * from './types.js';

package/phone-input/phone-input-lite.js

@@ -9,13 +9,15 @@ exports.default = PhoneInputLite;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _index = require("../input/index.js");
+var _countryPicker = _interopRequireDefault(require("./country-picker.js"));
 
-var _countrySelect = _interopRequireDefault(require("./country-select.js"));
+var _defaultProps = _interopRequireDefault(require("./default-props.js"));
 
-var _overrides = require("../helpers/overrides.js");
+var _styledComponents = require("./styled-components.js");
 
-var _defaultProps = _interopRequireDefault(require("./default-props.js"));
+var _index = require("../input/index.js");
+
+var _overrides = require("../helpers/overrides.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -37,19 +39,19 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+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; }
+
 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 country = _defaultProps.default.country,
-    lightDefaultProps = _objectWithoutProperties(_defaultProps.default, ["country"]);
-
-PhoneInputLite.defaultProps = lightDefaultProps;
+PhoneInputLite.defaultProps = _defaultProps.default;
 
 function PhoneInputLite(props) {
   var ariaLabel = props['aria-label'],
       ariaLabelledBy = props['aria-labelledby'],
       ariaDescribedBy = props['aria-describedby'],
+      clearable = props.clearable,
       countries = props.countries,
       country = props.country,
       disabled = props.disabled,
@@ -67,45 +69,67 @@ function PhoneInputLite(props) {
       required = props.required,
       size = props.size,
       text = props.text,
-      restProps = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "aria-describedby", "countries", "country", "disabled", "error", "id", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "name", "onTextChange", "onCountryChange", "overrides", "placeholder", "positive", "required", "size", "text"]);
+      restProps = _objectWithoutProperties(props, ["aria-label", "aria-labelledby", "aria-describedby", "clearable", "countries", "country", "disabled", "error", "id", "mapIsoToLabel", "maxDropdownHeight", "maxDropdownWidth", "name", "onTextChange", "onCountryChange", "overrides", "placeholder", "positive", "required", "size", "text"]);
 
   var inputRef = (0, _react.useRef)(null);
+  var baseDialCodeOverride = {
+    component: _styledComponents.StyledDialCode,
+    style: function style(_ref) {
+      var _ref$$theme = _ref.$theme,
+          direction = _ref$$theme.direction,
+          sizing = _ref$$theme.sizing;
+      var marginDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
+      return _defineProperty({}, marginDir, sizing.scale600);
+    },
+    props: {
+      children: country.dialCode
+    }
+  };
+  var mergedDialCodeOverride = (0, _overrides.mergeOverrides)({
+    DialCode: baseDialCodeOverride
+  }, {
+    DialCode: overrides.DialCode || {}
+  });
   var baseOverrides = {
     Input: {
-      style: function style(_ref) {
-        var sizing = _ref.$theme.sizing;
-        return {
-          paddingLeft: sizing.scale100
-        };
+      style: function style(_ref3) {
+        var _ref3$$theme = _ref3.$theme,
+            direction = _ref3$$theme.direction,
+            sizing = _ref3$$theme.sizing;
+        var paddingDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+        return _defineProperty({}, paddingDir, sizing.scale100);
       }
     },
-    Before: {
-      component: _countrySelect.default,
-      props: {
-        countries: countries,
-        country: country,
-        disabled: disabled,
-        error: error,
-        inputRef: inputRef,
-        mapIsoToLabel: mapIsoToLabel,
-        maxDropdownHeight: maxDropdownHeight,
-        maxDropdownWidth: maxDropdownWidth,
-        onCountryChange: onCountryChange,
-        overrides: overrides,
-        positive: positive,
-        required: required,
-        size: size
-      }
-    }
+    Before: mergedDialCodeOverride.DialCode
   };
 
-  var _getOverrides = (0, _overrides.getOverrides)(overrides.Input, _index.Input),
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledPhoneInputRoot),
       _getOverrides2 = _slicedToArray(_getOverrides, 2),
-      Input = _getOverrides2[0],
-      inputProps = _getOverrides2[1];
+      Root = _getOverrides2[0],
+      rootProps = _getOverrides2[1];
+
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.Input, _index.Input),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      Input = _getOverrides4[0],
+      inputProps = _getOverrides4[1];
 
   inputProps.overrides = (0, _overrides.mergeOverrides)(baseOverrides, inputProps.overrides);
-  return /*#__PURE__*/_react.default.createElement(Input, _extends({
+  return /*#__PURE__*/_react.default.createElement(Root, _extends({}, rootProps, {
+    "data-baseweb": "phone-input"
+  }), /*#__PURE__*/_react.default.createElement(_countryPicker.default, {
+    country: country,
+    countries: countries,
+    disabled: disabled,
+    error: error,
+    mapIsoToLabel: mapIsoToLabel,
+    maxDropdownHeight: maxDropdownHeight,
+    maxDropdownWidth: maxDropdownWidth,
+    onCountryChange: onCountryChange,
+    overrides: overrides,
+    positive: positive,
+    required: required,
+    size: size
+  }), /*#__PURE__*/_react.default.createElement(Input, _extends({
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
@@ -122,6 +146,7 @@ function PhoneInputLite(props) {
     placeholder: placeholder,
     size: size,
     type: "text",
-    value: text
-  }, restProps, inputProps));
+    value: text,
+    clearable: clearable
+  }, restProps, inputProps)));
 }

package/phone-input/phone-input-lite.js.flow

@@ -6,21 +6,21 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import React, { useRef } from 'react';
+import CountryPicker from './country-picker.js';
+import defaultProps from './default-props.js';
+import { StyledPhoneInputRoot, StyledDialCode } from './styled-components.js';
 import { Input as DefaultInput } from '../input/index.js';
-import CountrySelect from './country-select.js';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
-import defaultProps from './default-props.js';
 import type { LitePropsT } from './types.js';
 
-const { country, ...lightDefaultProps } = defaultProps;
-
-PhoneInputLite.defaultProps = lightDefaultProps;
+PhoneInputLite.defaultProps = defaultProps;
 
 export default function PhoneInputLite(props: LitePropsT) {
   const {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     'aria-describedby': ariaDescribedBy,
+    clearable,
     countries,
     country,
     disabled,
@@ -41,53 +41,75 @@ export default function PhoneInputLite(props: LitePropsT) {
     ...restProps
   } = props;
   const inputRef = useRef(null);
+
+  const baseDialCodeOverride = {
+    component: StyledDialCode,
+    style: ({ $theme: { direction, sizing } }) => {
+      const marginDir: string = direction === 'rtl' ? 'marginRight' : 'marginLeft';
+      return {
+        [marginDir]: sizing.scale600,
+      };
+    },
+    props: { children: country.dialCode },
+  };
+  const mergedDialCodeOverride = mergeOverrides(
+    { DialCode: baseDialCodeOverride },
+    { DialCode: overrides.DialCode || {} }
+  );
+
   const baseOverrides = {
     Input: {
-      style: ({ $theme: { sizing } }) => ({ paddingLeft: sizing.scale100 }),
-    },
-    Before: {
-      component: CountrySelect,
-      props: {
-        countries,
-        country,
-        disabled,
-        error,
-        inputRef,
-        mapIsoToLabel,
-        maxDropdownHeight,
-        maxDropdownWidth,
-        onCountryChange,
-        overrides,
-        positive,
-        required,
-        size,
+      style: ({ $theme: { direction, sizing } }) => {
+        const paddingDir: string = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+        return {
+          [paddingDir]: sizing.scale100,
+        };
       },
     },
+    Before: mergedDialCodeOverride.DialCode,
   };
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledPhoneInputRoot);
   const [Input, inputProps] = getOverrides(overrides.Input, DefaultInput);
   inputProps.overrides = mergeOverrides(baseOverrides, inputProps.overrides);
   return (
-    <Input
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      aria-describedby={ariaDescribedBy}
-      autoComplete="tel-national"
-      data-baseweb="phone-input"
-      disabled={disabled}
-      error={error}
-      id={id}
-      inputMode="tel"
-      inputRef={inputRef}
-      name={name}
-      onChange={onTextChange}
-      positive={positive}
-      placeholder={placeholder}
-      size={size}
-      type="text"
-      value={text}
-      {...restProps}
-      {...inputProps}
-    />
+    <Root {...rootProps} data-baseweb="phone-input">
+      <CountryPicker
+        country={country}
+        countries={countries}
+        disabled={disabled}
+        error={error}
+        mapIsoToLabel={mapIsoToLabel}
+        maxDropdownHeight={maxDropdownHeight}
+        maxDropdownWidth={maxDropdownWidth}
+        onCountryChange={onCountryChange}
+        overrides={overrides}
+        positive={positive}
+        required={required}
+        size={size}
+      />
+      <Input
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
+        autoComplete="tel-national"
+        data-baseweb="phone-input"
+        disabled={disabled}
+        error={error}
+        id={id}
+        inputMode="tel"
+        inputRef={inputRef}
+        name={name}
+        onChange={onTextChange}
+        positive={positive}
+        placeholder={placeholder}
+        size={size}
+        type="text"
+        value={text}
+        clearable={clearable}
+        {...restProps}
+        {...inputProps}
+      />
+    </Root>
   );
 }