@nuskin/shipping-address-form 1.6.0 → 1.7.1

package/README.md

@@ -86,7 +86,7 @@ import {
 } from '@nuskin/shipping-address-form'
 ```
 
-`AddressLookup` accepts `onAddressSelect`, `country`, `language`, `address`, `requireValidation`,
+`AddressLookup` accepts `onAddressSelect`, `country`, `language`, `address`, `entryMode`, `requireValidation`,
 `readOnlyView`, `showManualValidateButton`, `validationRequestId`, `strings`, `formDefinition`, and
 `deferFormLookup`. It supports Smarty autocomplete and validation for US and international
 addresses. `normalizeAddressForm`, `DEFAULT_ADDRESS_FORM`, and `SUPPORTED_COUNTRIES` are exported
@@ -217,6 +217,28 @@ When `true`, the wrapper renders in display-only mode:
 
 Readonly mode is intended for displaying an existing address without allowing edits or validation actions.
 
+### Address Entry and Validation
+
+`entryMode` controls which address entry experience is available when the component initializes:
+
+- `'both'` (default) starts with autocomplete and lets the user switch to manual entry.
+- `'manual'` starts with manual entry and hides the mode switch.
+- `'autocomplete'` starts with autocomplete and hides the mode switch.
+
+`requireValidation` defaults to `true`. Set it to `false` when a market accepts manually entered
+addresses without validation. `showManualValidateButton` defaults to `true` for `ShippingAddressForm`
+and controls whether manual entry shows its Verify Address button. For example:
+
+```jsx
+<ShippingAddressForm
+  entryMode="manual"
+  requireValidation={false}
+  showManualValidateButton={false}
+/>
+```
+
+For standalone `AddressLookup`, `showManualValidateButton` defaults to `false`.
+
 ### `onAction`
 
 - Type: `(payload) => void`
@@ -408,10 +430,10 @@ Run the local test app:
 yarn dev
 ```
 
-The local test app supports readonly mode through query params:
+The local test app supports entry configuration and readonly mode through query params:
 
 ```text
-?country=US&language=en&type=shipping&readOnlyView=true
+?country=US&language=en&type=shipping&entryMode=manual&requireValidation=false&showManualValidateButton=false
 ```
 
 Build the package:

package/dist/addressLookup/AddressLookup.js

@@ -15,6 +15,7 @@ const AddressLookup = ({
   onAddressSelect,
   country = 'US',
   address = null,
+  entryMode = 'both',
   requireValidation = true,
   readOnlyView = false,
   showManualValidateButton = false,
@@ -30,6 +31,7 @@ const AddressLookup = ({
     children: isUS ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SmartyUSResults.default, {
       onSelect: onAddressSelect,
       initialAddress: address,
+      entryMode: entryMode,
       requireValidation: requireValidation,
       readOnlyView: readOnlyView,
       showManualValidateButton: showManualValidateButton,
@@ -42,6 +44,7 @@ const AddressLookup = ({
       countryCode: country,
       onSelect: onAddressSelect,
       initialAddress: address,
+      entryMode: entryMode,
       requireValidation: requireValidation,
       readOnlyView: readOnlyView,
       showManualValidateButton: showManualValidateButton,
@@ -57,6 +60,7 @@ AddressLookup.propTypes = {
   onAddressSelect: _propTypes.default.func,
   country: _propTypes.default.string,
   address: _componentPropTypes.addressPropType,
+  entryMode: _propTypes.default.oneOf(['both', 'autocomplete', 'manual']),
   requireValidation: _propTypes.default.bool,
   readOnlyView: _propTypes.default.bool,
   showManualValidateButton: _propTypes.default.bool,

package/dist/addressLookup/AddressLookup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressLookup.js","names":["_propTypes","_interopRequireDefault","require","_SmartyUSResults","_SmartyIntlResults","_componentPropTypes","_jsxRuntime","e","__esModule","default","AddressLookup","onAddressSelect","country","address","requireValidation","readOnlyView","showManualValidateButton","validationRequestId","language","strings","formDefinition","deferFormLookup","isUS","jsx","className","children","onSelect","initialAddress","countryCode","propTypes","PropTypes","func","string","addressPropType","bool","number","labelStringsPropType","formDefinitionPropType","_default","exports"],"sources":["../../src/addressLookup/AddressLookup.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport './styles/addressLookup.css';\nimport SmartyUSResults from './components/SmartyUSResults';\nimport SmartyIntlResults from './components/SmartyIntlResults';\nimport { addressPropType, formDefinitionPropType, labelStringsPropType } from './utils/componentPropTypes';\n\nconst AddressLookup = ({ \n  onAddressSelect, \n  country = 'US',\n  address = null,\n  requireValidation = true,\n  readOnlyView = false,\n  showManualValidateButton = false,\n  validationRequestId = 0,\n  language = 'en',\n  strings = null,\n  formDefinition = null,\n  deferFormLookup = false\n}) => {\n  const isUS = country === 'US';\n\n  return (\n    <div className='ns-address-lookup'>\n      {isUS ? (\n        <SmartyUSResults \n          onSelect={onAddressSelect}\n          initialAddress={address}\n          requireValidation={requireValidation}\n          readOnlyView={readOnlyView}\n          showManualValidateButton={showManualValidateButton}\n          validationRequestId={validationRequestId}\n          language={language}\n          strings={strings}\n          formDefinition={formDefinition}\n          deferFormLookup={deferFormLookup}\n        />\n      ) : (\n        <SmartyIntlResults \n          countryCode={country}\n          onSelect={onAddressSelect}\n          initialAddress={address}\n          requireValidation={requireValidation}\n          readOnlyView={readOnlyView}\n          showManualValidateButton={showManualValidateButton}\n          validationRequestId={validationRequestId}\n          language={language}\n          strings={strings}\n          formDefinition={formDefinition}\n          deferFormLookup={deferFormLookup}\n        />\n      )}\n    </div>\n  );\n};\n\nAddressLookup.propTypes = {\n  onAddressSelect: PropTypes.func,\n  country: PropTypes.string,\n  address: addressPropType,\n  requireValidation: PropTypes.bool,\n  readOnlyView: PropTypes.bool,\n  showManualValidateButton: PropTypes.bool,\n  validationRequestId: PropTypes.number,\n  language: PropTypes.string,\n  strings: labelStringsPropType,\n  formDefinition: formDefinitionPropType,\n  deferFormLookup: PropTypes.bool\n};\n\nexport default AddressLookup;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACAA,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,kBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAA2G,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE3G,MAAMG,aAAa,GAAGA,CAAC;EACrBC,eAAe;EACfC,OAAO,GAAG,IAAI;EACdC,OAAO,GAAG,IAAI;EACdC,iBAAiB,GAAG,IAAI;EACxBC,YAAY,GAAG,KAAK;EACpBC,wBAAwB,GAAG,KAAK;EAChCC,mBAAmB,GAAG,CAAC;EACvBC,QAAQ,GAAG,IAAI;EACfC,OAAO,GAAG,IAAI;EACdC,cAAc,GAAG,IAAI;EACrBC,eAAe,GAAG;AACpB,CAAC,KAAK;EACJ,MAAMC,IAAI,GAAGV,OAAO,KAAK,IAAI;EAE7B,oBACE,IAAAN,WAAA,CAAAiB,GAAA;IAAKC,SAAS,EAAC,mBAAmB;IAAAC,QAAA,EAC/BH,IAAI,gBACH,IAAAhB,WAAA,CAAAiB,GAAA,EAACpB,gBAAA,CAAAM,OAAe;MACdiB,QAAQ,EAAEf,eAAgB;MAC1BgB,cAAc,EAAEd,OAAQ;MACxBC,iBAAiB,EAAEA,iBAAkB;MACrCC,YAAY,EAAEA,YAAa;MAC3BC,wBAAwB,EAAEA,wBAAyB;MACnDC,mBAAmB,EAAEA,mBAAoB;MACzCC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,cAAc,EAAEA,cAAe;MAC/BC,eAAe,EAAEA;IAAgB,CAClC,CAAC,gBAEF,IAAAf,WAAA,CAAAiB,GAAA,EAACnB,kBAAA,CAAAK,OAAiB;MAChBmB,WAAW,EAAEhB,OAAQ;MACrBc,QAAQ,EAAEf,eAAgB;MAC1BgB,cAAc,EAAEd,OAAQ;MACxBC,iBAAiB,EAAEA,iBAAkB;MACrCC,YAAY,EAAEA,YAAa;MAC3BC,wBAAwB,EAAEA,wBAAyB;MACnDC,mBAAmB,EAAEA,mBAAoB;MACzCC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,cAAc,EAAEA,cAAe;MAC/BC,eAAe,EAAEA;IAAgB,CAClC;EACF,CACE,CAAC;AAEV,CAAC;AAEDX,aAAa,CAACmB,SAAS,GAAG;EACxBlB,eAAe,EAAEmB,kBAAS,CAACC,IAAI;EAC/BnB,OAAO,EAAEkB,kBAAS,CAACE,MAAM;EACzBnB,OAAO,EAAEoB,mCAAe;EACxBnB,iBAAiB,EAAEgB,kBAAS,CAACI,IAAI;EACjCnB,YAAY,EAAEe,kBAAS,CAACI,IAAI;EAC5BlB,wBAAwB,EAAEc,kBAAS,CAACI,IAAI;EACxCjB,mBAAmB,EAAEa,kBAAS,CAACK,MAAM;EACrCjB,QAAQ,EAAEY,kBAAS,CAACE,MAAM;EAC1Bb,OAAO,EAAEiB,wCAAoB;EAC7BhB,cAAc,EAAEiB,0CAAsB;EACtChB,eAAe,EAAES,kBAAS,CAACI;AAC7B,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAA9B,OAAA,GAEaC,aAAa","ignoreList":[]}
+{"version":3,"file":"AddressLookup.js","names":["_propTypes","_interopRequireDefault","require","_SmartyUSResults","_SmartyIntlResults","_componentPropTypes","_jsxRuntime","e","__esModule","default","AddressLookup","onAddressSelect","country","address","entryMode","requireValidation","readOnlyView","showManualValidateButton","validationRequestId","language","strings","formDefinition","deferFormLookup","isUS","jsx","className","children","onSelect","initialAddress","countryCode","propTypes","PropTypes","func","string","addressPropType","oneOf","bool","number","labelStringsPropType","formDefinitionPropType","_default","exports"],"sources":["../../src/addressLookup/AddressLookup.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport './styles/addressLookup.css';\nimport SmartyUSResults from './components/SmartyUSResults';\nimport SmartyIntlResults from './components/SmartyIntlResults';\nimport { addressPropType, formDefinitionPropType, labelStringsPropType } from './utils/componentPropTypes';\n\nconst AddressLookup = ({ \n  onAddressSelect, \n  country = 'US',\n  address = null,\n  entryMode = 'both',\n  requireValidation = true,\n  readOnlyView = false,\n  showManualValidateButton = false,\n  validationRequestId = 0,\n  language = 'en',\n  strings = null,\n  formDefinition = null,\n  deferFormLookup = false\n}) => {\n  const isUS = country === 'US';\n\n  return (\n    <div className='ns-address-lookup'>\n      {isUS ? (\n        <SmartyUSResults \n          onSelect={onAddressSelect}\n          initialAddress={address}\n          entryMode={entryMode}\n          requireValidation={requireValidation}\n          readOnlyView={readOnlyView}\n          showManualValidateButton={showManualValidateButton}\n          validationRequestId={validationRequestId}\n          language={language}\n          strings={strings}\n          formDefinition={formDefinition}\n          deferFormLookup={deferFormLookup}\n        />\n      ) : (\n        <SmartyIntlResults \n          countryCode={country}\n          onSelect={onAddressSelect}\n          initialAddress={address}\n          entryMode={entryMode}\n          requireValidation={requireValidation}\n          readOnlyView={readOnlyView}\n          showManualValidateButton={showManualValidateButton}\n          validationRequestId={validationRequestId}\n          language={language}\n          strings={strings}\n          formDefinition={formDefinition}\n          deferFormLookup={deferFormLookup}\n        />\n      )}\n    </div>\n  );\n};\n\nAddressLookup.propTypes = {\n  onAddressSelect: PropTypes.func,\n  country: PropTypes.string,\n  address: addressPropType,\n  entryMode: PropTypes.oneOf(['both', 'autocomplete', 'manual']),\n  requireValidation: PropTypes.bool,\n  readOnlyView: PropTypes.bool,\n  showManualValidateButton: PropTypes.bool,\n  validationRequestId: PropTypes.number,\n  language: PropTypes.string,\n  strings: labelStringsPropType,\n  formDefinition: formDefinitionPropType,\n  deferFormLookup: PropTypes.bool\n};\n\nexport default AddressLookup;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACAA,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,kBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAA2G,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE3G,MAAMG,aAAa,GAAGA,CAAC;EACrBC,eAAe;EACfC,OAAO,GAAG,IAAI;EACdC,OAAO,GAAG,IAAI;EACdC,SAAS,GAAG,MAAM;EAClBC,iBAAiB,GAAG,IAAI;EACxBC,YAAY,GAAG,KAAK;EACpBC,wBAAwB,GAAG,KAAK;EAChCC,mBAAmB,GAAG,CAAC;EACvBC,QAAQ,GAAG,IAAI;EACfC,OAAO,GAAG,IAAI;EACdC,cAAc,GAAG,IAAI;EACrBC,eAAe,GAAG;AACpB,CAAC,KAAK;EACJ,MAAMC,IAAI,GAAGX,OAAO,KAAK,IAAI;EAE7B,oBACE,IAAAN,WAAA,CAAAkB,GAAA;IAAKC,SAAS,EAAC,mBAAmB;IAAAC,QAAA,EAC/BH,IAAI,gBACH,IAAAjB,WAAA,CAAAkB,GAAA,EAACrB,gBAAA,CAAAM,OAAe;MACdkB,QAAQ,EAAEhB,eAAgB;MAC1BiB,cAAc,EAAEf,OAAQ;MACxBC,SAAS,EAAEA,SAAU;MACrBC,iBAAiB,EAAEA,iBAAkB;MACrCC,YAAY,EAAEA,YAAa;MAC3BC,wBAAwB,EAAEA,wBAAyB;MACnDC,mBAAmB,EAAEA,mBAAoB;MACzCC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,cAAc,EAAEA,cAAe;MAC/BC,eAAe,EAAEA;IAAgB,CAClC,CAAC,gBAEF,IAAAhB,WAAA,CAAAkB,GAAA,EAACpB,kBAAA,CAAAK,OAAiB;MAChBoB,WAAW,EAAEjB,OAAQ;MACrBe,QAAQ,EAAEhB,eAAgB;MAC1BiB,cAAc,EAAEf,OAAQ;MACxBC,SAAS,EAAEA,SAAU;MACrBC,iBAAiB,EAAEA,iBAAkB;MACrCC,YAAY,EAAEA,YAAa;MAC3BC,wBAAwB,EAAEA,wBAAyB;MACnDC,mBAAmB,EAAEA,mBAAoB;MACzCC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,cAAc,EAAEA,cAAe;MAC/BC,eAAe,EAAEA;IAAgB,CAClC;EACF,CACE,CAAC;AAEV,CAAC;AAEDZ,aAAa,CAACoB,SAAS,GAAG;EACxBnB,eAAe,EAAEoB,kBAAS,CAACC,IAAI;EAC/BpB,OAAO,EAAEmB,kBAAS,CAACE,MAAM;EACzBpB,OAAO,EAAEqB,mCAAe;EACxBpB,SAAS,EAAEiB,kBAAS,CAACI,KAAK,CAAC,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC;EAC9DpB,iBAAiB,EAAEgB,kBAAS,CAACK,IAAI;EACjCpB,YAAY,EAAEe,kBAAS,CAACK,IAAI;EAC5BnB,wBAAwB,EAAEc,kBAAS,CAACK,IAAI;EACxClB,mBAAmB,EAAEa,kBAAS,CAACM,MAAM;EACrClB,QAAQ,EAAEY,kBAAS,CAACE,MAAM;EAC1Bb,OAAO,EAAEkB,wCAAoB;EAC7BjB,cAAc,EAAEkB,0CAAsB;EACtCjB,eAAe,EAAES,kBAAS,CAACK;AAC7B,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAhC,OAAA,GAEaC,aAAa","ignoreList":[]}

package/dist/addressLookup/components/SmartyIntlResults.js

@@ -53,6 +53,7 @@ const SmartyIntlResults = ({
   countryCode,
   onSelect,
   initialAddress = null,
+  entryMode = 'both',
   requireValidation = true,
   readOnlyView = false,
   showManualValidateButton = false,
@@ -63,7 +64,7 @@ const SmartyIntlResults = ({
   deferFormLookup = false
 }) => {
   var _formDefinition$addre;
-  const [mode, setMode] = (0, _react.useState)('autocomplete');
+  const [mode, setMode] = (0, _react.useState)(entryMode === 'manual' ? 'manual' : 'autocomplete');
   const [query, setQuery] = (0, _react.useState)('');
   const [selectedAddress, setSelectedAddress] = (0, _react.useState)(null);
   const [selectedIntlAddressId, setSelectedIntlAddressId] = (0, _react.useState)(null);
@@ -376,6 +377,22 @@ const SmartyIntlResults = ({
       document.removeEventListener('pointerdown', handleDocumentMouseDown);
     };
   }, [hasPendingLookupDraft, suggestions]);
+  (0, _react.useEffect)(() => {
+    if (isAutocompleteMode || !showValidationSuggestions || validationLoading || validationSuggestions.length === 0) {
+      return undefined;
+    }
+    const handleDocumentPointerDown = event => {
+      var _componentRef$current;
+      if ((_componentRef$current = componentRef.current) !== null && _componentRef$current !== void 0 && _componentRef$current.contains(event.target)) {
+        return;
+      }
+      setShowValidationSuggestions(false);
+    };
+    document.addEventListener('pointerdown', handleDocumentPointerDown);
+    return () => {
+      document.removeEventListener('pointerdown', handleDocumentPointerDown);
+    };
+  }, [isAutocompleteMode, showValidationSuggestions, validationLoading, validationSuggestions]);
   (0, _react.useEffect)(() => {
     if (selectedAddress) {
       const selectionKey = selectedAddress.address_id || `${selectedAddress.street || ''}|${selectedAddress.locality || ''}|${selectedAddress.postal_code || ''}`;
@@ -570,7 +587,7 @@ const SmartyIntlResults = ({
     }
   };
   const handleValidationSelect = validatedAddress => {
-    var _validatedAddress$met, _validatedAddress$met2;
+    var _validatedAddress$met, _validatedAddress$met2, _validatedAddress$ana;
     clearServiceErrors({
       lookup: false,
       validation: true,
@@ -599,7 +616,8 @@ const SmartyIntlResults = ({
       latitude: (_validatedAddress$met = validatedAddress.metadata) === null || _validatedAddress$met === void 0 ? void 0 : _validatedAddress$met.latitude,
       longitude: (_validatedAddress$met2 = validatedAddress.metadata) === null || _validatedAddress$met2 === void 0 ? void 0 : _validatedAddress$met2.longitude
     };
-    const normalizedFormData = buildTrackedAddress(updatedFormData, 'verified', 'smarty-intl');
+    const currentVerificationStatus = ((_validatedAddress$ana = validatedAddress.analysis) === null || _validatedAddress$ana === void 0 ? void 0 : _validatedAddress$ana.verification_status) === 'Verified' ? 'verified' : 'unverified';
+    const normalizedFormData = buildTrackedAddress(updatedFormData, currentVerificationStatus, 'smarty-intl');
     setShowValidationSuggestions(false);
     setValidationTriggerSource(null);
     setFormData(normalizedFormData);
@@ -607,7 +625,6 @@ const SmartyIntlResults = ({
     lastCommittedAddressRef.current = normalizedFormData;
     lookupDraftOriginalRef.current = normalizedFormData;
     setHasPendingLookupDraft(false);
-    const currentVerificationStatus = 'verified';
     setVerificationStatus(currentVerificationStatus);
     autoApplyValidationStartedRef.current = false;
     if (pendingMapOpen) {
@@ -722,7 +739,7 @@ const SmartyIntlResults = ({
       color: "primary",
       size: "small",
       children: validationLoading ? 'Validating...' : 'Validate Address'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    }), entryMode === 'both' && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
       type: "button",
       onClick: () => {
         setShowValidationSuggestions(false);
@@ -740,8 +757,8 @@ const SmartyIntlResults = ({
   });
   const getLookupInputElement = () => typeof document !== 'undefined' ? document.getElementById(getFieldId(lookupField)) : null;
   const getVisibleSuggestionButtons = () => {
-    var _componentRef$current;
-    return Array.from(((_componentRef$current = componentRef.current) === null || _componentRef$current === void 0 ? void 0 : _componentRef$current.querySelectorAll(LOOKUP_LIST_BUTTON_SELECTOR)) || []);
+    var _componentRef$current2;
+    return Array.from(((_componentRef$current2 = componentRef.current) === null || _componentRef$current2 === void 0 ? void 0 : _componentRef$current2.querySelectorAll(LOOKUP_LIST_BUTTON_SELECTOR)) || []);
   };
   const handleLookupInputKeyDown = event => {
     if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
@@ -821,25 +838,28 @@ const SmartyIntlResults = ({
     if (shouldShowValidationResults && validationSuggestions.length > 0) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
         className: "ns-address-lookup__list ns-address-lookup__list--validation-inline",
-        children: validationSuggestions.map((suggestion, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          className: ['ns-address-lookup__list-item', index < validationSuggestions.length - 1 ? 'ns-address-lookup__list-item--divided' : ''].filter(Boolean).join(' '),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-            type: "button",
-            onClick: () => handleValidationSelect(suggestion),
-            onKeyDown: event => handleSuggestionButtonKeyDown(event, index),
-            className: "ns-address-lookup__list-button",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "ns-address-lookup__list-title",
-              children: getIntlValidationSummaryTitle(suggestion)
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "ns-address-lookup__list-subtitle",
-              children: suggestion.displayText
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "ns-address-lookup__list-subtitle",
-              children: getIntlValidationSummaryMessage(suggestion)
-            })]
-          })
-        }, getValidationSuggestionKey(suggestion)))
+        children: validationSuggestions.map((suggestion, index) => {
+          var _suggestion$validatio13;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            className: ['ns-address-lookup__list-item', ((_suggestion$validatio13 = suggestion.validationSummary) === null || _suggestion$validatio13 === void 0 ? void 0 : _suggestion$validatio13.code) === 'not-verified' ? 'ns-address-lookup__list-item--not-verified' : '', index < validationSuggestions.length - 1 ? 'ns-address-lookup__list-item--divided' : ''].filter(Boolean).join(' '),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              type: "button",
+              onClick: () => handleValidationSelect(suggestion),
+              onKeyDown: event => handleSuggestionButtonKeyDown(event, index),
+              className: "ns-address-lookup__list-button",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "ns-address-lookup__list-title",
+                children: getIntlValidationSummaryTitle(suggestion)
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "ns-address-lookup__list-subtitle",
+                children: suggestion.displayText
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "ns-address-lookup__list-subtitle",
+                children: getIntlValidationSummaryMessage(suggestion)
+              })]
+            })
+          }, getValidationSuggestionKey(suggestion));
+        })
       });
     }
     if (shouldShowNoResults) {
@@ -986,6 +1006,7 @@ SmartyIntlResults.propTypes = {
   countryCode: _propTypes.default.string.isRequired,
   onSelect: _propTypes.default.func,
   initialAddress: _componentPropTypes.addressPropType,
+  entryMode: _propTypes.default.oneOf(['both', 'autocomplete', 'manual']),
   requireValidation: _propTypes.default.bool,
   readOnlyView: _propTypes.default.bool,
   showManualValidateButton: _propTypes.default.bool,