@pingux/astro 2.217.1 → 2.218.0-alpha.0

package/lib/cjs/components/ImageUploadField/ImageUploadField.test.js

@@ -246,10 +246,68 @@ test('should call onChange cb (when provided) when a file is uploaded', function
   });
   expect(testOnChange).toHaveBeenCalledTimes(1);
 });
-test('should call onRemove cb (when provided) when a file is uploaded', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-  var testOnRemove, imagePreview;
+test('should call onChange cb and render preview when a .ico file with type image/vnd.microsoft.icon is uploaded', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+  var testOnChange;
   return _regeneratorRuntime().wrap(function _callee5$(_context5) {
     while (1) switch (_context5.prev = _context5.next) {
+      case 0:
+        testOnChange = jest.fn();
+        getComponent({
+          onChange: testOnChange
+        });
+        _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
+          target: {
+            files: [new File(['(⌐□_□)'], 'favicon.ico', {
+              type: 'image/vnd.microsoft.icon'
+            })]
+          }
+        });
+        expect(testOnChange).toHaveBeenCalledTimes(1);
+        _context5.t0 = expect;
+        _context5.next = 7;
+        return _testWrapper.screen.findByTestId(imageUploadImagePreview);
+      case 7:
+        _context5.t1 = _context5.sent;
+        (0, _context5.t0)(_context5.t1).toBeInTheDocument();
+      case 9:
+      case "end":
+        return _context5.stop();
+    }
+  }, _callee5);
+})));
+test('should call onChange cb and render preview when a .ico file with type image/x-icon is uploaded', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+  var testOnChange;
+  return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+    while (1) switch (_context6.prev = _context6.next) {
+      case 0:
+        testOnChange = jest.fn();
+        getComponent({
+          onChange: testOnChange
+        });
+        _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
+          target: {
+            files: [new File(['(⌐□_□)'], 'favicon.ico', {
+              type: 'image/x-icon'
+            })]
+          }
+        });
+        expect(testOnChange).toHaveBeenCalledTimes(1);
+        _context6.t0 = expect;
+        _context6.next = 7;
+        return _testWrapper.screen.findByTestId(imageUploadImagePreview);
+      case 7:
+        _context6.t1 = _context6.sent;
+        (0, _context6.t0)(_context6.t1).toBeInTheDocument();
+      case 9:
+      case "end":
+        return _context6.stop();
+    }
+  }, _callee6);
+})));
+test('should call onRemove cb (when provided) when a file is uploaded', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+  var testOnRemove, imagePreview;
+  return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+    while (1) switch (_context7.prev = _context7.next) {
       case 0:
         testOnRemove = jest.fn();
         getComponent({
@@ -260,29 +318,29 @@ test('should call onRemove cb (when provided) when a file is uploaded', /*#__PUR
             files: [file]
           }
         });
-        _context5.next = 5;
+        _context7.next = 5;
         return _testWrapper.screen.findByTestId(imageUploadImagePreview);
       case 5:
-        imagePreview = _context5.sent;
-        _context5.next = 8;
+        imagePreview = _context7.sent;
+        _context7.next = 8;
         return _userEvent["default"].click(_testWrapper.screen.getByTestId(testButtonId));
       case 8:
-        _context5.t0 = expect;
-        _context5.next = 11;
+        _context7.t0 = expect;
+        _context7.next = 11;
         return _testWrapper.screen.findByTestId(imageUploadImagePreview);
       case 11:
-        _context5.t1 = _context5.sent;
-        (0, _context5.t0)(_context5.t1).toBeInTheDocument();
-        _context5.next = 15;
+        _context7.t1 = _context7.sent;
+        (0, _context7.t0)(_context7.t1).toBeInTheDocument();
+        _context7.next = 15;
         return _userEvent["default"].click(_testWrapper.screen.getByText('Remove Image'));
       case 15:
         expect(imagePreview).not.toBeInTheDocument();
         expect(testOnRemove).toHaveBeenCalledTimes(1);
       case 17:
       case "end":
-        return _context5.stop();
+        return _context7.stop();
     }
-  }, _callee5);
+  }, _callee7);
 })));
 test('should not call onChange cb (when provided) if uploaded file is not allowed by fileTypes', function () {
   var testOnChange = jest.fn();
@@ -345,9 +403,9 @@ test('should render loader if isLoading prop is true', function () {
   });
   expect(_testWrapper.screen.queryByRole('alert')).toBeInTheDocument();
 });
-test('should render image preview and menu when previewImage prop is supplied', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
-  return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-    while (1) switch (_context6.prev = _context6.next) {
+test('should render image preview and menu when previewImage prop is supplied', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+  return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+    while (1) switch (_context8.prev = _context8.next) {
       case 0:
         getComponent({
           previewImage: 'test'
@@ -355,16 +413,16 @@ test('should render image preview and menu when previewImage prop is supplied',
         expect(_testWrapper.screen.queryByTestId(imageUploadImagePreview)).toBeInTheDocument();
         expect(_testWrapper.screen.queryByTestId(imageUploadImagePreview)).toHaveAttribute('src', 'test');
         expect(_testWrapper.screen.queryByTestId(imageUploadNoImagePreview)).not.toBeInTheDocument();
-        _context6.next = 6;
+        _context8.next = 6;
         return _userEvent["default"].click(_testWrapper.screen.getByTestId(testButtonId));
       case 6:
         expect(_testWrapper.screen.getByText('Upload New Image')).toBeInTheDocument();
         expect(_testWrapper.screen.getByText('Remove Image')).toBeInTheDocument();
       case 8:
       case "end":
-        return _context6.stop();
+        return _context8.stop();
     }
-  }, _callee6);
+  }, _callee8);
 })));
 test('loader size can be changed via the prop', function () {
   var testLoaderSize = 17;
@@ -374,14 +432,14 @@ test('loader size can be changed via the prop', function () {
   });
   expect(_testWrapper.screen.getByTestId('image-preview-button__loader')).toBeInTheDocument();
 });
-test('should show the menu if label clicked when preview image exists', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+test('should show the menu if label clicked when preview image exists', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
   var imageUploadButton, imagePreview, imageUploadLabel;
-  return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-    while (1) switch (_context7.prev = _context7.next) {
+  return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+    while (1) switch (_context9.prev = _context9.next) {
       case 0:
         getComponent();
         imageUploadButton = _testWrapper.screen.getByTestId(testButtonId);
-        _context7.next = 4;
+        _context9.next = 4;
         return _userEvent["default"].click(imageUploadButton);
       case 4:
         _react2.fireEvent.change(_testWrapper.screen.getByTestId('image-upload-input'), {
@@ -389,10 +447,10 @@ test('should show the menu if label clicked when preview image exists', /*#__PUR
             files: [file]
           }
         });
-        _context7.next = 7;
+        _context9.next = 7;
         return _testWrapper.screen.findByTestId(imageUploadImagePreview);
       case 7:
-        imagePreview = _context7.sent;
+        imagePreview = _context9.sent;
         expect(imagePreview).toBeInTheDocument();
         expect(imagePreview).toHaveAttribute('src');
 
@@ -407,14 +465,14 @@ test('should show the menu if label clicked when preview image exists', /*#__PUR
         expect(_testWrapper.screen.getByText('Remove Image')).toBeInTheDocument();
       case 16:
       case "end":
-        return _context7.stop();
+        return _context9.stop();
     }
-  }, _callee7);
+  }, _callee9);
 })));
-test('should show the menu if label clicked when preview image exists with custom uploads', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+test('should show the menu if label clicked when preview image exists with custom uploads', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0() {
   var customUploadProp, customRemoveProp, imagePreview;
-  return _regeneratorRuntime().wrap(function _callee8$(_context8) {
-    while (1) switch (_context8.prev = _context8.next) {
+  return _regeneratorRuntime().wrap(function _callee0$(_context0) {
+    while (1) switch (_context0.prev = _context0.next) {
       case 0:
         customUploadProp = 'Custom Upload';
         customRemoveProp = 'Custom Remove';
@@ -427,24 +485,24 @@ test('should show the menu if label clicked when preview image exists with custo
             files: [file]
           }
         });
-        _context8.next = 6;
+        _context0.next = 6;
         return _testWrapper.screen.findByTestId(imageUploadImagePreview);
       case 6:
-        imagePreview = _context8.sent;
+        imagePreview = _context0.sent;
         expect(imagePreview).toBeInTheDocument();
         expect(imagePreview).toHaveAttribute('src');
 
         // Click on the image preview button
-        _context8.next = 11;
+        _context0.next = 11;
         return _userEvent["default"].click(_testWrapper.screen.getByRole('button'));
       case 11:
         expect(_testWrapper.screen.getByText(customUploadProp)).toBeInTheDocument();
         expect(_testWrapper.screen.getByText(customRemoveProp)).toBeInTheDocument();
       case 13:
       case "end":
-        return _context8.stop();
+        return _context0.stop();
     }
-  }, _callee8);
+  }, _callee0);
 })));
 test('should render node element if passed as default image', function () {
   getComponent({
@@ -456,10 +514,10 @@ test('should render node element if passed as default image', function () {
   expect(img).toBeInstanceOf(HTMLImageElement);
   expect(img).toBeInTheDocument();
 });
-test('should implement popover menu props', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+test('should implement popover menu props', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee1() {
   var imagePreview;
-  return _regeneratorRuntime().wrap(function _callee9$(_context9) {
-    while (1) switch (_context9.prev = _context9.next) {
+  return _regeneratorRuntime().wrap(function _callee1$(_context1) {
+    while (1) switch (_context1.prev = _context1.next) {
       case 0:
         getComponent({
           popoverMenuProps: {
@@ -471,15 +529,15 @@ test('should implement popover menu props', /*#__PURE__*/(0, _asyncToGenerator2[
             files: [file]
           }
         });
-        _context9.next = 4;
+        _context1.next = 4;
         return _testWrapper.screen.findByTestId(imageUploadImagePreview);
       case 4:
-        imagePreview = _context9.sent;
+        imagePreview = _context1.sent;
         expect(imagePreview).toBeInTheDocument();
         expect(imagePreview).toHaveAttribute('src');
 
         // Click on the image preview button
-        _context9.next = 9;
+        _context1.next = 9;
         return _userEvent["default"].click(_testWrapper.screen.getByRole('button'));
       case 9:
         expect(_testWrapper.screen.getByRole('presentation')).toBeInTheDocument();
@@ -487,7 +545,7 @@ test('should implement popover menu props', /*#__PURE__*/(0, _asyncToGenerator2[
         expect(_testWrapper.screen.getByRole('presentation')).toHaveAttribute('data-popover-placement', 'right');
       case 12:
       case "end":
-        return _context9.stop();
+        return _context1.stop();
     }
-  }, _callee9);
+  }, _callee1);
 })));

package/lib/cjs/components/LabelValuePairs/LabelValuePairsLabel.js

@@ -13,11 +13,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "helpHint", "containerProps", "textProps", "helpHintProps"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var displayName = 'PairLabel';
+var H4 = 'h4';
+var H5 = 'h5';
 var PairLabel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
     helpHint = props.helpHint,
@@ -25,19 +28,25 @@ var PairLabel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     textProps = props.textProps,
     helpHintProps = props.helpHintProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var _React$Children$toArr = _react["default"].Children.toArray(children),
     _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
     label = _React$Children$toArr2[0],
     icon = _React$Children$toArr2[1];
+  var defaultTextProps = isOnyx ? {
+    variant: H5,
+    as: H5
+  } : {
+    variant: H4,
+    as: H4
+  };
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: ref,
     isRow: true,
     alignItems: "center",
     gap: "sm"
-  }, others, containerProps), (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({
-    variant: "h4",
-    as: "h4"
-  }, textProps), label), icon, helpHint && (0, _react2.jsx)(_index.HelpHint, (0, _extends2["default"])({
+  }, others, containerProps), (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({}, defaultTextProps, textProps), label), icon, helpHint && (0, _react2.jsx)(_index.HelpHint, (0, _extends2["default"])({
     iconButtonProps: {
       'aria-label': "".concat(label, " help hint")
     }

package/lib/cjs/components/OverlayPanel/OverlayPanel.js

@@ -18,7 +18,7 @@ var _interactions = require("@react-aria/interactions");
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "isOpen", "isTransitioning", "onClose", "className", "state", "size", "triggerRef"];
+var _excluded = ["children", "isOpen", "isTransitioning", "onClose", "className", "state", "size", "triggerRef", "focusScopeProps"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$sx;
@@ -30,6 +30,7 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     state = props.state,
     size = props.size,
     triggerRef = props.triggerRef,
+    focusScopeProps = props.focusScopeProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
     onClose = _useOverlayPanelState.onClose;
@@ -55,9 +56,9 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onClose(state, triggerRef, onCloseProp);
     }
   };
-  return (0, _react2.jsx)(_reactAria.FocusScope, {
+  return (0, _react2.jsx)(_reactAria.FocusScope, (0, _extends2["default"])({
     autoFocus: true
-  }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+  }, focusScopeProps), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     variant: "overlayPanel.container",
     ref: overlayPanelRef
   }, others, {

package/lib/cjs/components/OverlayPanel/OverlayPanel.test.js

@@ -141,6 +141,16 @@ test('triggerRef.current.focus() fires when provided', function () {
   });
   expect(focusFunction).toHaveBeenCalled();
 });
+test('focusScopeProps are forwarded to FocusScope', function () {
+  getComponent({
+    children: (0, _react2.jsx)("div", null, "Test"),
+    focusScopeProps: {
+      contain: true
+    }
+  });
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+  expect(overlayPanel).toBeInTheDocument();
+});
 test('triggerRef.current.focus() does not fire when key other than esc is pressed', function () {
   var onClose = jest.fn();
   var focusFunction = jest.fn();

package/lib/cjs/components/PhoneNumberField/PhoneNumberField.js

@@ -35,7 +35,7 @@ var _ = require("../..");
 var _hooks = require("../../hooks");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _react2 = require("@emotion/react");
-var _excluded = ["countryValue", "defaultCountryValue", "helperText", "isReadOnly", "labelMode", "onCountryChange", "status"];
+var _excluded = ["countryValue", "defaultCountryValue", "helperText", "isReadOnly", "onCountryChange", "status"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty2(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -77,34 +77,24 @@ var parsePaste = function parsePaste(raw) {
     localNumber: digitsOnly
   };
 };
-var closedState = function closedState(selectedKey) {
-  var dialCode = selectedKey ? toDialCode(selectedKey) : '';
-  return {
-    isOpen: false,
-    inputValue: dialCode,
-    searchValue: dialCode,
-    items: allCountries
-  };
-};
 var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var countryValue = props.countryValue,
     defaultCountryValue = props.defaultCountryValue,
     helperText = props.helperText,
     isReadOnly = props.isReadOnly,
-    labelMode = props.labelMode,
     onCountryChange = props.onCountryChange,
     status = props.status,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useField = (0, _hooks.useField)(_objectSpread({
       status: status,
-      isReadOnly: isReadOnly,
-      labelMode: labelMode
+      isReadOnly: isReadOnly
     }, others)),
     fieldContainerProps = _useField.fieldContainerProps,
     fieldControlInputProps = _useField.fieldControlInputProps,
     fieldControlWrapperProps = _useField.fieldControlWrapperProps,
     fieldLabelProps = _useField.fieldLabelProps;
-  var onChange = fieldControlInputProps.onChange;
+  var onChange = fieldControlInputProps.onChange,
+    fieldValue = fieldControlInputProps.value;
   var inputRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var helperTextId = (0, _uuid.v4)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
@@ -113,6 +103,15 @@ var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     }),
     contains = _useFilter.contains;
   var _useState = (0, _react.useState)(function () {
+      return String(fieldValue !== null && fieldValue !== void 0 ? fieldValue : '');
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    phoneNumber = _useState2[0],
+    setPhoneNumber = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (fieldValue !== undefined) setPhoneNumber(String(fieldValue));
+  }, [fieldValue]);
+  var _useState3 = (0, _react.useState)(function () {
       var key = countryValue !== null && countryValue !== void 0 ? countryValue : defaultCountryValue;
       if (key && getCountry(key)) {
         var dialCode = toDialCode(key);
@@ -132,9 +131,9 @@ var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
         isOpen: false
       };
     }),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    fieldState = _useState2[0],
-    setFieldState = _useState2[1];
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    fieldState = _useState4[0],
+    setFieldState = _useState4[1];
   var isControlledCountry = countryValue !== undefined;
   var currentSelectedKey = isControlledCountry ? countryValue !== null && countryValue !== void 0 ? countryValue : null : fieldState.selectedKey;
   var closedDisplayValue = isControlledCountry ? toDialCode(countryValue !== null && countryValue !== void 0 ? countryValue : '') : fieldState.inputValue;
@@ -152,7 +151,6 @@ var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     setFieldState(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, {
         inputValue: value,
-        selectedKey: null,
         searchValue: value,
         items: newItems
       });
@@ -171,14 +169,25 @@ var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     if (onCountryChange) onCountryChange(key);
   }, [onCountryChange]);
   var onOpenChangeHandler = (0, _react.useCallback)(function (open) {
-    if (!open || isReadOnly) {
+    if (isReadOnly) return;
+    if (open) {
       setFieldState(function (prev) {
-        return _objectSpread(_objectSpread({}, prev), closedState(prev.selectedKey));
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          isOpen: true,
+          items: allCountries
+        });
       });
     } else {
       setFieldState(function (prev) {
+        if (!prev.selectedKey) return _objectSpread(_objectSpread({}, prev), {}, {
+          isOpen: false,
+          items: allCountries
+        });
+        var dialCode = toDialCode(prev.selectedKey);
         return _objectSpread(_objectSpread({}, prev), {}, {
-          isOpen: true,
+          isOpen: false,
+          inputValue: dialCode,
+          searchValue: dialCode,
           items: allCountries
         });
       });
@@ -187,17 +196,17 @@ var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var handlePhoneChange = (0, _react.useCallback)(function (e) {
     if (!onChange) return;
     if (validatePhoneNumber(e.target.value)) {
+      setPhoneNumber(e.target.value);
       onChange(e);
-    } else if (inputRef.current) {
-      inputRef.current.value = '';
     }
-  }, [inputRef, onChange]);
+  }, [onChange]);
   var commitPaste = (0, _react.useCallback)(function (raw) {
     if (!inputRef.current || !onChange) return;
     var _parsePaste = parsePaste(raw),
       countryKey = _parsePaste.countryKey,
       localNumber = _parsePaste.localNumber;
     if (countryKey) selectionHandler(countryKey);
+    setPhoneNumber(localNumber);
     inputRef.current.value = localNumber;
     var event = {
       target: inputRef.current,
@@ -225,7 +234,11 @@ var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     width: '100%'
   } : {
     transition: '0.2s width ease',
-    width: '110px'
+    width: '110px',
+    '& input': {
+      borderTopRightRadius: '0 !important',
+      borderBottomRightRadius: '0 !important'
+    }
   });
   var countryLabel = function countryLabel(c) {
     var _context4, _context5;
@@ -281,12 +294,19 @@ var PhoneNumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   }), (0, _react2.jsx)(_.Box, {
     sx: {
       ml: '110px',
-      width: '100%',
-      visibility: fieldState.isOpen ? 'hidden' : undefined
+      width: 'calc(100% - 110px)',
+      visibility: fieldState.isOpen ? 'hidden' : undefined,
+      '& input': {
+        borderTopLeftRadius: '0 !important',
+        borderBottomLeftRadius: '0 !important',
+        borderLeft: 0
+      }
     }
   }, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({
     ref: inputRef
   }, fieldControlInputProps, {
+    type: "tel",
+    value: phoneNumber,
     "aria-describedby": [helperText && helperTextId, fieldControlInputProps['aria-describedby']].join(fieldControlInputProps['aria-describedby'] ? ' ' : '') || undefined,
     onChange: handlePhoneChange,
     onPaste: handlePhonePaste

package/lib/cjs/components/PhoneNumberField/PhoneNumberField.stories.js

@@ -44,7 +44,9 @@ var _default = exports["default"] = {
 };
 var Default = exports.Default = function Default(args) {
   return (0, _react2.jsx)(_index.PhoneNumberField, (0, _extends2["default"])({
-    label: "Phone Number"
+    label: "Phone Number",
+    defaultCountryValue: "US",
+    value: "2025550177"
   }, args));
 };
 Default.parameters = {
@@ -54,11 +56,11 @@ Default.parameters = {
   }
 };
 var Controlled = exports.Controlled = function Controlled() {
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)('2025550177'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  var _useState3 = (0, _react.useState)(undefined),
+  var _useState3 = (0, _react.useState)('US'),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     countryValue = _useState4[0],
     setCountryValue = _useState4[1];

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/input.js

@@ -34,6 +34,11 @@ input.fieldControlWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper)
     '> input': {
       backgroundColor: 'disabled'
     }
+  },
+  '&.is-read-only': {
+    '> input': {
+      backgroundColor: 'disabled'
+    }
   }
 });
 input.multivaluesWrapper = {

package/lib/cjs/types/overlayPanel.d.ts

@@ -1,3 +1,4 @@
+import { FocusScopeProps } from 'react-aria';
 import { OverlayTriggerState } from 'react-stately';
 import { ThemeUICSSObject } from 'theme-ui';
 import { UseOverlayPanelStateReturnOnClose } from '../hooks/useOverlayPanelState/useOverlayPanelState';
@@ -22,4 +23,7 @@ export interface OverlayPanelProps extends BoxProps, TestingAttributes {
     /** Inline styling prop for item */
     sx?: ThemeUICSSObject;
     state?: OverlayPanelState;
+    /** Props object that is spread into the internal FocusScope.
+     * Useful for controlling focus with greater precision. */
+    focusScopeProps?: Omit<FocusScopeProps, 'children'>;
 }

package/lib/cjs/types/phoneNumberField.d.ts

@@ -1,14 +1,12 @@
-import { UseFieldProps } from '../hooks/useField/useField';
+import React from 'react';
+import { ContainerProps } from '../hooks/useField/useField';
 import { TestingAttributes } from './shared/test';
-import { Status } from './item';
-import { HelpHintProps } from '.';
-export interface PhoneNumberFieldProps extends UseFieldProps<HTMLInputElement>, TestingAttributes {
+import { HelpHintProps, LabelProps, Status, ValidPositiveInteger } from '.';
+export interface PhoneNumberFieldProps extends TestingAttributes {
     /** The rendered label for the field. */
     label?: string | React.ReactNode;
     /** The value for the phone number input element (controlled). */
     value?: string;
-    /** The default value for the phone number input element (uncontrolled). */
-    defaultValue?: string;
     /**
      * Callback fired when the phone number value is changed.
      *
@@ -30,16 +28,24 @@ export interface PhoneNumberFieldProps extends UseFieldProps<HTMLInputElement>,
     isDisabled?: boolean;
     /** Whether the input can be selected, but not changed by the user. */
     isReadOnly?: boolean;
-    /** Whether the field is required. */
+    /** Whether user input is required on the input before form submission. */
     isRequired?: boolean;
     /** The name for the input element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */
     name?: string;
     /** The unique identifier for the input element. */
     id?: string;
-    /** Props object that is spread directly into the helphint element. */
+    /** The placeholder text to display in the input element. */
+    placeholder?: string;
+    /** The maximum number of characters allowed. */
+    maxLength?: ValidPositiveInteger;
+    /** Props object spread into the label element. */
+    labelProps?: LabelProps;
+    /** Props object spread into the outer container element. */
+    containerProps?: ContainerProps;
+    /** Props object spread into the help hint element. */
     helpHintProps?: HelpHintProps;
     /** Hint text to display in the help hint tooltip. */
     hintText?: string;
-    /** The placeholder text to display in the input element. */
-    placeholder?: string;
+    /** The autocomplete attribute for the phone input. */
+    autoComplete?: string;
 }

package/lib/cjs/utils/devUtils/constants/htmlElements.js

@@ -13,5 +13,5 @@ var _context;
  */
 
 var htmlElements = exports.htmlElements = ['a', 'abbr', 'acronym', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdi', 'bdo', 'bgsound', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'isindex', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'listing', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'nobr', 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'plaintext', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr', 'xmp'];
-var supportedImageTypes = exports.supportedImageTypes = ['image', 'image/apng', 'image/avif', 'image/gif', 'image/jpeg', 'image/png', 'image/svg', 'image/svg+xml', 'image/webp'];
+var supportedImageTypes = exports.supportedImageTypes = ['image', 'image/apng', 'image/avif', 'image/gif', 'image/jpeg', 'image/png', 'image/svg', 'image/svg+xml', 'image/vnd.microsoft.icon', 'image/webp', 'image/x-icon'];
 var imageUploadPropTypes = exports.imageUploadPropTypes = (0, _concat["default"])(_context = ['application', 'application', 'audio', 'example', 'model', 'text', 'video']).call(_context, supportedImageTypes);

package/lib/components/ImageUploadField/ImageUploadField.test.js

@@ -243,10 +243,68 @@ test('should call onChange cb (when provided) when a file is uploaded', function
   });
   expect(testOnChange).toHaveBeenCalledTimes(1);
 });
-test('should call onRemove cb (when provided) when a file is uploaded', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-  var testOnRemove, imagePreview;
+test('should call onChange cb and render preview when a .ico file with type image/vnd.microsoft.icon is uploaded', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+  var testOnChange;
   return _regeneratorRuntime().wrap(function _callee5$(_context5) {
     while (1) switch (_context5.prev = _context5.next) {
+      case 0:
+        testOnChange = jest.fn();
+        getComponent({
+          onChange: testOnChange
+        });
+        fireEvent.change(screen.getByTestId('image-upload-input'), {
+          target: {
+            files: [new File(['(⌐□_□)'], 'favicon.ico', {
+              type: 'image/vnd.microsoft.icon'
+            })]
+          }
+        });
+        expect(testOnChange).toHaveBeenCalledTimes(1);
+        _context5.t0 = expect;
+        _context5.next = 7;
+        return screen.findByTestId(imageUploadImagePreview);
+      case 7:
+        _context5.t1 = _context5.sent;
+        (0, _context5.t0)(_context5.t1).toBeInTheDocument();
+      case 9:
+      case "end":
+        return _context5.stop();
+    }
+  }, _callee5);
+})));
+test('should call onChange cb and render preview when a .ico file with type image/x-icon is uploaded', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+  var testOnChange;
+  return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+    while (1) switch (_context6.prev = _context6.next) {
+      case 0:
+        testOnChange = jest.fn();
+        getComponent({
+          onChange: testOnChange
+        });
+        fireEvent.change(screen.getByTestId('image-upload-input'), {
+          target: {
+            files: [new File(['(⌐□_□)'], 'favicon.ico', {
+              type: 'image/x-icon'
+            })]
+          }
+        });
+        expect(testOnChange).toHaveBeenCalledTimes(1);
+        _context6.t0 = expect;
+        _context6.next = 7;
+        return screen.findByTestId(imageUploadImagePreview);
+      case 7:
+        _context6.t1 = _context6.sent;
+        (0, _context6.t0)(_context6.t1).toBeInTheDocument();
+      case 9:
+      case "end":
+        return _context6.stop();
+    }
+  }, _callee6);
+})));
+test('should call onRemove cb (when provided) when a file is uploaded', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+  var testOnRemove, imagePreview;
+  return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+    while (1) switch (_context7.prev = _context7.next) {
       case 0:
         testOnRemove = jest.fn();
         getComponent({
@@ -257,29 +315,29 @@ test('should call onRemove cb (when provided) when a file is uploaded', /*#__PUR
             files: [file]
           }
         });
-        _context5.next = 5;
+        _context7.next = 5;
         return screen.findByTestId(imageUploadImagePreview);
       case 5:
-        imagePreview = _context5.sent;
-        _context5.next = 8;
+        imagePreview = _context7.sent;
+        _context7.next = 8;
         return userEvent.click(screen.getByTestId(testButtonId));
       case 8:
-        _context5.t0 = expect;
-        _context5.next = 11;
+        _context7.t0 = expect;
+        _context7.next = 11;
         return screen.findByTestId(imageUploadImagePreview);
       case 11:
-        _context5.t1 = _context5.sent;
-        (0, _context5.t0)(_context5.t1).toBeInTheDocument();
-        _context5.next = 15;
+        _context7.t1 = _context7.sent;
+        (0, _context7.t0)(_context7.t1).toBeInTheDocument();
+        _context7.next = 15;
         return userEvent.click(screen.getByText('Remove Image'));
       case 15:
         expect(imagePreview).not.toBeInTheDocument();
         expect(testOnRemove).toHaveBeenCalledTimes(1);
       case 17:
       case "end":
-        return _context5.stop();
+        return _context7.stop();
     }
-  }, _callee5);
+  }, _callee7);
 })));
 test('should not call onChange cb (when provided) if uploaded file is not allowed by fileTypes', function () {
   var testOnChange = jest.fn();
@@ -342,9 +400,9 @@ test('should render loader if isLoading prop is true', function () {
   });
   expect(screen.queryByRole('alert')).toBeInTheDocument();
 });
-test('should render image preview and menu when previewImage prop is supplied', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
-  return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-    while (1) switch (_context6.prev = _context6.next) {
+test('should render image preview and menu when previewImage prop is supplied', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+  return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+    while (1) switch (_context8.prev = _context8.next) {
       case 0:
         getComponent({
           previewImage: 'test'
@@ -352,16 +410,16 @@ test('should render image preview and menu when previewImage prop is supplied',
         expect(screen.queryByTestId(imageUploadImagePreview)).toBeInTheDocument();
         expect(screen.queryByTestId(imageUploadImagePreview)).toHaveAttribute('src', 'test');
         expect(screen.queryByTestId(imageUploadNoImagePreview)).not.toBeInTheDocument();
-        _context6.next = 6;
+        _context8.next = 6;
         return userEvent.click(screen.getByTestId(testButtonId));
       case 6:
         expect(screen.getByText('Upload New Image')).toBeInTheDocument();
         expect(screen.getByText('Remove Image')).toBeInTheDocument();
       case 8:
       case "end":
-        return _context6.stop();
+        return _context8.stop();
     }
-  }, _callee6);
+  }, _callee8);
 })));
 test('loader size can be changed via the prop', function () {
   var testLoaderSize = 17;
@@ -371,14 +429,14 @@ test('loader size can be changed via the prop', function () {
   });
   expect(screen.getByTestId('image-preview-button__loader')).toBeInTheDocument();
 });
-test('should show the menu if label clicked when preview image exists', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+test('should show the menu if label clicked when preview image exists', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
   var imageUploadButton, imagePreview, imageUploadLabel;
-  return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-    while (1) switch (_context7.prev = _context7.next) {
+  return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+    while (1) switch (_context9.prev = _context9.next) {
       case 0:
         getComponent();
         imageUploadButton = screen.getByTestId(testButtonId);
-        _context7.next = 4;
+        _context9.next = 4;
         return userEvent.click(imageUploadButton);
       case 4:
         fireEvent.change(screen.getByTestId('image-upload-input'), {
@@ -386,10 +444,10 @@ test('should show the menu if label clicked when preview image exists', /*#__PUR
             files: [file]
           }
         });
-        _context7.next = 7;
+        _context9.next = 7;
         return screen.findByTestId(imageUploadImagePreview);
       case 7:
-        imagePreview = _context7.sent;
+        imagePreview = _context9.sent;
         expect(imagePreview).toBeInTheDocument();
         expect(imagePreview).toHaveAttribute('src');
 
@@ -404,14 +462,14 @@ test('should show the menu if label clicked when preview image exists', /*#__PUR
         expect(screen.getByText('Remove Image')).toBeInTheDocument();
       case 16:
       case "end":
-        return _context7.stop();
+        return _context9.stop();
     }
-  }, _callee7);
+  }, _callee9);
 })));
-test('should show the menu if label clicked when preview image exists with custom uploads', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
+test('should show the menu if label clicked when preview image exists with custom uploads', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0() {
   var customUploadProp, customRemoveProp, imagePreview;
-  return _regeneratorRuntime().wrap(function _callee8$(_context8) {
-    while (1) switch (_context8.prev = _context8.next) {
+  return _regeneratorRuntime().wrap(function _callee0$(_context0) {
+    while (1) switch (_context0.prev = _context0.next) {
       case 0:
         customUploadProp = 'Custom Upload';
         customRemoveProp = 'Custom Remove';
@@ -424,24 +482,24 @@ test('should show the menu if label clicked when preview image exists with custo
             files: [file]
           }
         });
-        _context8.next = 6;
+        _context0.next = 6;
         return screen.findByTestId(imageUploadImagePreview);
       case 6:
-        imagePreview = _context8.sent;
+        imagePreview = _context0.sent;
         expect(imagePreview).toBeInTheDocument();
         expect(imagePreview).toHaveAttribute('src');
 
         // Click on the image preview button
-        _context8.next = 11;
+        _context0.next = 11;
         return userEvent.click(screen.getByRole('button'));
       case 11:
         expect(screen.getByText(customUploadProp)).toBeInTheDocument();
         expect(screen.getByText(customRemoveProp)).toBeInTheDocument();
       case 13:
       case "end":
-        return _context8.stop();
+        return _context0.stop();
     }
-  }, _callee8);
+  }, _callee0);
 })));
 test('should render node element if passed as default image', function () {
   getComponent({
@@ -453,10 +511,10 @@ test('should render node element if passed as default image', function () {
   expect(img).toBeInstanceOf(HTMLImageElement);
   expect(img).toBeInTheDocument();
 });
-test('should implement popover menu props', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9() {
+test('should implement popover menu props', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee1() {
   var imagePreview;
-  return _regeneratorRuntime().wrap(function _callee9$(_context9) {
-    while (1) switch (_context9.prev = _context9.next) {
+  return _regeneratorRuntime().wrap(function _callee1$(_context1) {
+    while (1) switch (_context1.prev = _context1.next) {
       case 0:
         getComponent({
           popoverMenuProps: {
@@ -468,15 +526,15 @@ test('should implement popover menu props', /*#__PURE__*/_asyncToGenerator(/*#__
             files: [file]
           }
         });
-        _context9.next = 4;
+        _context1.next = 4;
         return screen.findByTestId(imageUploadImagePreview);
       case 4:
-        imagePreview = _context9.sent;
+        imagePreview = _context1.sent;
         expect(imagePreview).toBeInTheDocument();
         expect(imagePreview).toHaveAttribute('src');
 
         // Click on the image preview button
-        _context9.next = 9;
+        _context1.next = 9;
         return userEvent.click(screen.getByRole('button'));
       case 9:
         expect(screen.getByRole('presentation')).toBeInTheDocument();
@@ -484,7 +542,7 @@ test('should implement popover menu props', /*#__PURE__*/_asyncToGenerator(/*#__
         expect(screen.getByRole('presentation')).toHaveAttribute('data-popover-placement', 'right');
       case 12:
       case "end":
-        return _context9.stop();
+        return _context1.stop();
     }
-  }, _callee9);
+  }, _callee1);
 })));

package/lib/components/LabelValuePairs/LabelValuePairsLabel.js

@@ -3,9 +3,12 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "helpHint", "containerProps", "textProps", "helpHintProps"];
 import React, { forwardRef } from 'react';
+import { useGetTheme } from '../../hooks';
 import { Box, HelpHint, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayName = 'PairLabel';
+var H4 = 'h4';
+var H5 = 'h5';
 var PairLabel = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     helpHint = props.helpHint,
@@ -13,19 +16,25 @@ var PairLabel = /*#__PURE__*/forwardRef(function (props, ref) {
     textProps = props.textProps,
     helpHintProps = props.helpHintProps,
     others = _objectWithoutProperties(props, _excluded);
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var _React$Children$toArr = React.Children.toArray(children),
     _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
     label = _React$Children$toArr2[0],
     icon = _React$Children$toArr2[1];
+  var defaultTextProps = isOnyx ? {
+    variant: H5,
+    as: H5
+  } : {
+    variant: H4,
+    as: H4
+  };
   return ___EmotionJSX(Box, _extends({
     ref: ref,
     isRow: true,
     alignItems: "center",
     gap: "sm"
-  }, others, containerProps), ___EmotionJSX(Text, _extends({
-    variant: "h4",
-    as: "h4"
-  }, textProps), label), icon, helpHint && ___EmotionJSX(HelpHint, _extends({
+  }, others, containerProps), ___EmotionJSX(Text, _extends({}, defaultTextProps, textProps), label), icon, helpHint && ___EmotionJSX(HelpHint, _extends({
     iconButtonProps: {
       'aria-label': "".concat(label, " help hint")
     }

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "isOpen", "isTransitioning", "onClose", "className", "state", "size", "triggerRef"];
+var _excluded = ["children", "isOpen", "isTransitioning", "onClose", "className", "state", "size", "triggerRef", "focusScopeProps"];
 import React, { forwardRef, useEffect } from 'react';
 import { FocusScope } from 'react-aria';
 import { setInteractionModality } from '@react-aria/interactions';
@@ -18,6 +18,7 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     state = props.state,
     size = props.size,
     triggerRef = props.triggerRef,
+    focusScopeProps = props.focusScopeProps,
     others = _objectWithoutProperties(props, _excluded);
   var _useOverlayPanelState = useOverlayPanelState(),
     onClose = _useOverlayPanelState.onClose;
@@ -43,9 +44,9 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
       onClose(state, triggerRef, onCloseProp);
     }
   };
-  return ___EmotionJSX(FocusScope, {
+  return ___EmotionJSX(FocusScope, _extends({
     autoFocus: true
-  }, ___EmotionJSX(Box, _extends({
+  }, focusScopeProps), ___EmotionJSX(Box, _extends({
     variant: "overlayPanel.container",
     ref: overlayPanelRef
   }, others, {

package/lib/components/OverlayPanel/OverlayPanel.test.js

@@ -138,6 +138,16 @@ test('triggerRef.current.focus() fires when provided', function () {
   });
   expect(focusFunction).toHaveBeenCalled();
 });
+test('focusScopeProps are forwarded to FocusScope', function () {
+  getComponent({
+    children: ___EmotionJSX("div", null, "Test"),
+    focusScopeProps: {
+      contain: true
+    }
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  expect(overlayPanel).toBeInTheDocument();
+});
 test('triggerRef.current.focus() does not fire when key other than esc is pressed', function () {
   var onClose = jest.fn();
   var focusFunction = jest.fn();

package/lib/components/PhoneNumberField/PhoneNumberField.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-var _excluded = ["countryValue", "defaultCountryValue", "helperText", "isReadOnly", "labelMode", "onCountryChange", "status"];
+var _excluded = ["countryValue", "defaultCountryValue", "helperText", "isReadOnly", "onCountryChange", "status"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context6, _context7; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(t), !0)).call(_context6, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context7 = ownKeys(Object(t))).call(_context7, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
@@ -20,7 +20,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import React, { forwardRef, useCallback, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { useFilter } from '@react-aria/i18n';
 import { countries as countriesObj } from 'countries-list';
 import { v4 as uuid } from 'uuid';
@@ -66,34 +66,24 @@ var parsePaste = function parsePaste(raw) {
     localNumber: digitsOnly
   };
 };
-var closedState = function closedState(selectedKey) {
-  var dialCode = selectedKey ? toDialCode(selectedKey) : '';
-  return {
-    isOpen: false,
-    inputValue: dialCode,
-    searchValue: dialCode,
-    items: allCountries
-  };
-};
 var PhoneNumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   var countryValue = props.countryValue,
     defaultCountryValue = props.defaultCountryValue,
     helperText = props.helperText,
     isReadOnly = props.isReadOnly,
-    labelMode = props.labelMode,
     onCountryChange = props.onCountryChange,
     status = props.status,
     others = _objectWithoutProperties(props, _excluded);
   var _useField = useField(_objectSpread({
       status: status,
-      isReadOnly: isReadOnly,
-      labelMode: labelMode
+      isReadOnly: isReadOnly
     }, others)),
     fieldContainerProps = _useField.fieldContainerProps,
     fieldControlInputProps = _useField.fieldControlInputProps,
     fieldControlWrapperProps = _useField.fieldControlWrapperProps,
     fieldLabelProps = _useField.fieldLabelProps;
-  var onChange = fieldControlInputProps.onChange;
+  var onChange = fieldControlInputProps.onChange,
+    fieldValue = fieldControlInputProps.value;
   var inputRef = useLocalOrForwardRef(ref);
   var helperTextId = uuid();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -102,6 +92,15 @@ var PhoneNumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     contains = _useFilter.contains;
   var _useState = useState(function () {
+      return String(fieldValue !== null && fieldValue !== void 0 ? fieldValue : '');
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    phoneNumber = _useState2[0],
+    setPhoneNumber = _useState2[1];
+  useEffect(function () {
+    if (fieldValue !== undefined) setPhoneNumber(String(fieldValue));
+  }, [fieldValue]);
+  var _useState3 = useState(function () {
       var key = countryValue !== null && countryValue !== void 0 ? countryValue : defaultCountryValue;
       if (key && getCountry(key)) {
         var dialCode = toDialCode(key);
@@ -121,9 +120,9 @@ var PhoneNumberField = /*#__PURE__*/forwardRef(function (props, ref) {
         isOpen: false
       };
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    fieldState = _useState2[0],
-    setFieldState = _useState2[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    fieldState = _useState4[0],
+    setFieldState = _useState4[1];
   var isControlledCountry = countryValue !== undefined;
   var currentSelectedKey = isControlledCountry ? countryValue !== null && countryValue !== void 0 ? countryValue : null : fieldState.selectedKey;
   var closedDisplayValue = isControlledCountry ? toDialCode(countryValue !== null && countryValue !== void 0 ? countryValue : '') : fieldState.inputValue;
@@ -141,7 +140,6 @@ var PhoneNumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     setFieldState(function (prev) {
       return _objectSpread(_objectSpread({}, prev), {}, {
         inputValue: value,
-        selectedKey: null,
         searchValue: value,
         items: newItems
       });
@@ -160,14 +158,25 @@ var PhoneNumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     if (onCountryChange) onCountryChange(key);
   }, [onCountryChange]);
   var onOpenChangeHandler = useCallback(function (open) {
-    if (!open || isReadOnly) {
+    if (isReadOnly) return;
+    if (open) {
       setFieldState(function (prev) {
-        return _objectSpread(_objectSpread({}, prev), closedState(prev.selectedKey));
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          isOpen: true,
+          items: allCountries
+        });
       });
     } else {
       setFieldState(function (prev) {
+        if (!prev.selectedKey) return _objectSpread(_objectSpread({}, prev), {}, {
+          isOpen: false,
+          items: allCountries
+        });
+        var dialCode = toDialCode(prev.selectedKey);
         return _objectSpread(_objectSpread({}, prev), {}, {
-          isOpen: true,
+          isOpen: false,
+          inputValue: dialCode,
+          searchValue: dialCode,
           items: allCountries
         });
       });
@@ -176,17 +185,17 @@ var PhoneNumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   var handlePhoneChange = useCallback(function (e) {
     if (!onChange) return;
     if (validatePhoneNumber(e.target.value)) {
+      setPhoneNumber(e.target.value);
       onChange(e);
-    } else if (inputRef.current) {
-      inputRef.current.value = '';
     }
-  }, [inputRef, onChange]);
+  }, [onChange]);
   var commitPaste = useCallback(function (raw) {
     if (!inputRef.current || !onChange) return;
     var _parsePaste = parsePaste(raw),
       countryKey = _parsePaste.countryKey,
       localNumber = _parsePaste.localNumber;
     if (countryKey) selectionHandler(countryKey);
+    setPhoneNumber(localNumber);
     inputRef.current.value = localNumber;
     var event = {
       target: inputRef.current,
@@ -214,7 +223,11 @@ var PhoneNumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     width: '100%'
   } : {
     transition: '0.2s width ease',
-    width: '110px'
+    width: '110px',
+    '& input': {
+      borderTopRightRadius: '0 !important',
+      borderBottomRightRadius: '0 !important'
+    }
   });
   var countryLabel = function countryLabel(c) {
     var _context4, _context5;
@@ -270,12 +283,19 @@ var PhoneNumberField = /*#__PURE__*/forwardRef(function (props, ref) {
   }), ___EmotionJSX(Box, {
     sx: {
       ml: '110px',
-      width: '100%',
-      visibility: fieldState.isOpen ? 'hidden' : undefined
+      width: 'calc(100% - 110px)',
+      visibility: fieldState.isOpen ? 'hidden' : undefined,
+      '& input': {
+        borderTopLeftRadius: '0 !important',
+        borderBottomLeftRadius: '0 !important',
+        borderLeft: 0
+      }
     }
   }, ___EmotionJSX(Input, _extends({
     ref: inputRef
   }, fieldControlInputProps, {
+    type: "tel",
+    value: phoneNumber,
     "aria-describedby": [helperText && helperTextId, fieldControlInputProps['aria-describedby']].join(fieldControlInputProps['aria-describedby'] ? ' ' : '') || undefined,
     onChange: handlePhoneChange,
     onPaste: handlePhonePaste

package/lib/components/PhoneNumberField/PhoneNumberField.stories.js

@@ -34,7 +34,9 @@ export default {
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(PhoneNumberField, _extends({
-    label: "Phone Number"
+    label: "Phone Number",
+    defaultCountryValue: "US",
+    value: "2025550177"
   }, args));
 };
 Default.parameters = {
@@ -44,11 +46,11 @@ Default.parameters = {
   }
 };
 export var Controlled = function Controlled() {
-  var _useState = useState(''),
+  var _useState = useState('2025550177'),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  var _useState3 = useState(undefined),
+  var _useState3 = useState('US'),
     _useState4 = _slicedToArray(_useState3, 2),
     countryValue = _useState4[0],
     setCountryValue = _useState4[1];

package/lib/styles/themeOverrides/nextGenDarkMode/variants/input.js

@@ -27,6 +27,11 @@ input.fieldControlWrapper = _objectSpread(_objectSpread({}, fieldControlWrapper)
     '> input': {
       backgroundColor: 'disabled'
     }
+  },
+  '&.is-read-only': {
+    '> input': {
+      backgroundColor: 'disabled'
+    }
   }
 });
 input.multivaluesWrapper = {

package/lib/utils/devUtils/constants/htmlElements.js

@@ -5,5 +5,5 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
  */
 
 export var htmlElements = ['a', 'abbr', 'acronym', 'address', 'applet', 'area', 'article', 'aside', 'audio', 'b', 'base', 'basefont', 'bdi', 'bdo', 'bgsound', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'isindex', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'listing', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'nobr', 'noframes', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'plaintext', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr', 'xmp'];
-export var supportedImageTypes = ['image', 'image/apng', 'image/avif', 'image/gif', 'image/jpeg', 'image/png', 'image/svg', 'image/svg+xml', 'image/webp'];
+export var supportedImageTypes = ['image', 'image/apng', 'image/avif', 'image/gif', 'image/jpeg', 'image/png', 'image/svg', 'image/svg+xml', 'image/vnd.microsoft.icon', 'image/webp', 'image/x-icon'];
 export var imageUploadPropTypes = _concatInstanceProperty(_context = ['application', 'application', 'audio', 'example', 'model', 'text', 'video']).call(_context, supportedImageTypes);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.217.1",
+  "version": "2.218.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",