@popsure/dirty-swan 0.28.0-beta.3 → 0.28.0-beta.5

package/dist/index.js

@@ -3314,23 +3314,12 @@ var MAP_CONFIG_OBJ = {
     rotateControl: false,
     draggable: false,
 };
-function GoogleMapsWrapper(_a) {
+var GoogleMapsWrapperComponent = function (_a) {
     var _b;
-    var mapId = _a.mapId, geometry = _a.geometry, hasLoadedGoogleAPI = _a.hasLoadedGoogleAPI, isLoading = _a.isLoading;
+    var mapId = _a.mapId, markerLocation = _a.markerLocation, isLoading = _a.isLoading;
     var map = require$$0.useRef(null);
     var marker = require$$0.useRef(null);
     require$$0.useEffect(function () {
-        var _a, _b, _c;
-        if (geometry === null || geometry === void 0 ? void 0 : geometry.location) {
-            (_a = map.current) === null || _a === void 0 ? void 0 : _a.panTo(geometry.location);
-            (_b = map.current) === null || _b === void 0 ? void 0 : _b.setZoom(15);
-            (_c = marker.current) === null || _c === void 0 ? void 0 : _c.setPosition(geometry.location);
-        }
-    }, [geometry]);
-    require$$0.useEffect(function () {
-        if (!hasLoadedGoogleAPI) {
-            return;
-        }
         map.current = new google.maps.Map(document.getElementById(mapId), MAP_CONFIG_OBJ);
         Promise.resolve().then(function () { return require('./mapStyle-32849fbf.js'); }).then(function (_a) {
             var _b, _c;
@@ -3341,15 +3330,33 @@ function GoogleMapsWrapper(_a) {
         marker.current = new google.maps.Marker({
             map: map.current,
         });
-    }, [hasLoadedGoogleAPI, mapId]);
+    }, [mapId]);
+    require$$0.useEffect(function () {
+        var _a, _b, _c;
+        if (markerLocation) {
+            (_a = map.current) === null || _a === void 0 ? void 0 : _a.panTo(markerLocation);
+            (_b = map.current) === null || _b === void 0 ? void 0 : _b.setZoom(15);
+            (_c = marker.current) === null || _c === void 0 ? void 0 : _c.setPosition(markerLocation);
+        }
+    }, [markerLocation]);
     if (document.querySelectorAll("[id='" + mapId + "']").length > 1) {
         throw Error("This MapId is already in use: " + mapId);
     }
     return (jsxRuntime.jsxs("div", __assign({ className: classNames("wmx8 bg-grey-500 " + styles$o['map-container'], (_b = {},
-            _b[styles$o['map-container--hidden']] = geometry === undefined,
+            _b[styles$o['map-container--hidden']] = markerLocation === undefined,
             _b)) }, { children: [jsxRuntime.jsx("div", { className: styles$o.map, id: mapId }, void 0),
             isLoading && (jsxRuntime.jsx("div", __assign({ className: styles$o['loading-spinner'] }, { children: jsxRuntime.jsx("div", { className: "ds-spinner ds-spinner__m" }, void 0) }), void 0))] }), void 0));
+};
+function areEqual(prevProps, nextProps) {
+    var _a;
+    if (prevProps.isLoading === nextProps.isLoading && ((_a = prevProps.markerLocation) === null || _a === void 0 ? void 0 : _a.equals(nextProps.markerLocation))) {
+        return true;
+    }
+    else {
+        return false;
+    }
 }
+var GoogleMapsWrapper = require$$0.memo(GoogleMapsWrapperComponent, areEqual);
 
 var css_248z$o = ".style-module_container__2L4SP {\n  position: relative;\n}\n\n.style-module_prefix__3jAFZ {\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--ds-grey-500);\n  transition: 0.3s top;\n}\n.style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n.style-module_prefix--disabled__2-gcw {\n  color: var(--ds-grey-600);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_placeholder__1U2z0,\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  top: 7px;\n  left: 16px;\n  transform: translateY(0);\n  font-size: 10px;\n  line-height: 12px;\n  opacity: 1;\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_placeholder__1U2z0 {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  color: var(--ds-primary-500);\n}\n.style-module_input__1eJO5:focus ~ .style-module_prefix--with-error__1yTTM {\n  color: var(--ds-red-500);\n}\n\n.style-module_input__1eJO5:not(:placeholder-shown) ~ .style-module_prefix__3jAFZ,\n.style-module_input__1eJO5:focus ~ .style-module_prefix__3jAFZ {\n  top: 28px;\n}\n\n.style-module_input__1eJO5 {\n  box-sizing: border-box;\n  padding-top: 9px;\n  font-family: inherit;\n}\n.style-module_input--no-placeholder__3EGwh {\n  padding-top: 0px;\n}\n.style-module_input--with-prefix__38e0j {\n  padding-left: 32px !important;\n}\n\n.style-module_placeholder__1U2z0 {\n  position: absolute;\n  pointer-events: none;\n  left: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.3s ease all;\n  color: var(--ds-grey-500);\n}\n.style-module_placeholder--with-prefix__2PquQ {\n  left: 32px;\n}\n.style-module_placeholder--with-error__2ieRU {\n  color: var(--ds-red-500);\n}\n\n.style-module_error__167Zc {\n  margin-top: 4px;\n}";
 var styles$n = {"container":"style-module_container__2L4SP","prefix":"style-module_prefix__3jAFZ","prefix--with-error":"style-module_prefix--with-error__1yTTM","prefix--disabled":"style-module_prefix--disabled__2-gcw","input":"style-module_input__1eJO5","placeholder":"style-module_placeholder__1U2z0","placeholder--with-error":"style-module_placeholder--with-error__2ieRU","input--no-placeholder":"style-module_input--no-placeholder__3EGwh","input--with-prefix":"style-module_input--with-prefix__38e0j","placeholder--with-prefix":"style-module_placeholder--with-prefix__2PquQ","error":"style-module_error__167Zc"};
@@ -3366,20 +3373,20 @@ var Input = require$$0__default['default'].forwardRef(function (_a, ref) {
             error && (jsxRuntime.jsx("p", __assign({ className: "p-p--small tc-red-500 w100 " + styles$n.error }, { children: error }), void 0))] }), void 0));
 });
 
-var GERMANY_ALPHA_CODE = 'DE'; // default country can be cumbersome for new country implementation
+var GERMANY_ALPHA_CODE$1 = 'DE'; // default country can be cumbersome for new country implementation
 var ManualAddressEntry = function (_a) {
-    var address = _a.address, onAddressChange = _a.onAddressChange;
+    var address = _a.address, onAddressChange = _a.onAddressChange, placeholders = _a.placeholders;
     var handleInputChange = function (event) {
         var _a;
         onAddressChange(__assign(__assign(__assign({}, address), (_a = {}, _a[event.target.name] = event.target.value, _a)), ((address === null || address === void 0 ? void 0 : address.country)
-            ? { country: address.country }
-            : { country: GERMANY_ALPHA_CODE })));
+            ? {}
+            : { country: GERMANY_ALPHA_CODE$1 })));
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "d-flex c-gap16 " + styles$o['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete", type: "text", placeholder: "Street", value: (address === null || address === void 0 ? void 0 : address.street) || '', name: "street", onChange: handleInputChange }, void 0),
-                    jsxRuntime.jsx(Input, { className: "wmx2 " + styles$o['house-number-input'], "data-cy": "autocomplete-house-number", placeholder: "House Number", value: (address === null || address === void 0 ? void 0 : address.houseNumber) || '', name: "houseNumber", onChange: handleInputChange }, void 0)] }), void 0),
-            jsxRuntime.jsx(Input, { className: "mt16", "data-cy": "autocomplete-additional-info", placeholder: "Additional information (C/O, appartment\u2026)", value: (address === null || address === void 0 ? void 0 : address.additionalInformation) || '', name: "additionalInformation", onChange: handleInputChange }, void 0),
-            jsxRuntime.jsxs("div", __assign({ className: "d-flex c-gap16 mt16 " + styles$o['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete-postcode", placeholder: "Postcode", value: (address === null || address === void 0 ? void 0 : address.postcode) || '', name: "postcode", onChange: handleInputChange }, void 0),
-                    jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete-city", placeholder: "City", value: (address === null || address === void 0 ? void 0 : address.city) || '', name: "city", onChange: handleInputChange }, void 0)] }), void 0)] }, void 0));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "d-flex c-gap16 " + styles$o['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete", type: "text", placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders.street, defaultValue: (address === null || address === void 0 ? void 0 : address.street) || '', name: "street", onChange: handleInputChange }, void 0),
+                    jsxRuntime.jsx(Input, { className: "wmx2 " + styles$o['house-number-input'], "data-cy": "autocomplete-house-number", placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders.houseNumber, defaultValue: (address === null || address === void 0 ? void 0 : address.houseNumber) || '', name: "houseNumber", onChange: handleInputChange }, void 0)] }), void 0),
+            jsxRuntime.jsx(Input, { className: "mt16", "data-cy": "autocomplete-additional-info", placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders.additionalInformation, defaultValue: (address === null || address === void 0 ? void 0 : address.additionalInformation) || '', name: "additionalInformation", onChange: handleInputChange }, void 0),
+            jsxRuntime.jsxs("div", __assign({ className: "d-flex c-gap16 mt16 " + styles$o['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete-postcode", placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders.postcode, defaultValue: (address === null || address === void 0 ? void 0 : address.postcode) || '', name: "postcode", onChange: handleInputChange }, void 0),
+                    jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete-city", placeholder: placeholders === null || placeholders === void 0 ? void 0 : placeholders.city, defaultValue: (address === null || address === void 0 ? void 0 : address.city) || '', name: "city", onChange: handleInputChange }, void 0)] }), void 0)] }, void 0));
 };
 
 function _extends() {
@@ -3667,16 +3674,20 @@ var inlineAddress = function (address) {
     return address.street + " " + address.houseNumber + ", " + address.city + ", " + $5(address.country);
 };
 
-var css_248z$n = "@keyframes dynamic-module_appear-in__2D3HS {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n  }\n}\n.dynamic-module_suggestionList__2YcUi {\n  z-index: 9000;\n  width: 100%;\n  position: absolute;\n  background-color: white;\n  border: 1px solid var(--ds-grey-400);\n  box-shadow: none;\n  border-radius: 8px;\n  margin-top: 8px;\n  animation-name: dynamic-module_appear-in__2D3HS;\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n}\n.dynamic-module_suggestionList__2YcUi::after {\n  content: \"\";\n  display: none;\n}\n\n.dynamic-module_suggestionItem__2-eVX {\n  display: flex;\n  align-items: center;\n  height: 48px;\n  cursor: pointer;\n  border-top: none;\n  font-family: Lato, sans-serif;\n  padding-left: 16px;\n}\n.dynamic-module_suggestionItem__2-eVX:hover {\n  background-color: var(--ds-grey-200);\n}\n.dynamic-module_suggestionItem__2-eVX:first-child {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n\n.dynamic-module_pac-matched__14uns,\n.dynamic-module_suggestionItem-query__Slroi,\n.dynamic-module_suggestionItem__2-eVX {\n  font-size: 16px;\n}\n\n.dynamic-module_pac-icon__2RRIL {\n  display: none;\n}";
+var css_248z$n = "@keyframes dynamic-module_appear-in__2D3HS {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n  }\n}\n.dynamic-module_suggestionList__2YcUi {\n  z-index: 9000;\n  width: 100%;\n  position: absolute;\n  background-color: white;\n  border: 1px solid var(--ds-grey-400);\n  box-shadow: none;\n  border-radius: 8px;\n  margin-top: 8px;\n  animation-name: dynamic-module_appear-in__2D3HS;\n  animation-duration: 0.3s;\n  animation-fill-mode: both;\n}\n.dynamic-module_suggestionList__2YcUi::after {\n  content: \"\";\n  display: none;\n}\n\n.dynamic-module_suggestionItem__2-eVX {\n  display: flex;\n  align-items: center;\n  height: 48px;\n  cursor: pointer;\n  border-top: none;\n  font-family: Lato, sans-serif;\n  padding-left: 16px;\n}\n.dynamic-module_suggestionItem__2-eVX:hover {\n  background-color: var(--ds-grey-200);\n}\n.dynamic-module_suggestionItem__2-eVX:first-child {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n.dynamic-module_suggestionItem__2-eVX:last-child {\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n\n.dynamic-module_pac-matched__14uns,\n.dynamic-module_suggestionItem-query__Slroi,\n.dynamic-module_suggestionItem__2-eVX {\n  font-size: 16px;\n}\n\n.dynamic-module_pac-icon__2RRIL {\n  display: none;\n}";
 var styles$m = {"suggestionList":"dynamic-module_suggestionList__2YcUi","appear-in":"dynamic-module_appear-in__2D3HS","suggestionItem":"dynamic-module_suggestionItem__2-eVX","pac-matched":"dynamic-module_pac-matched__14uns","suggestionItem-query":"dynamic-module_suggestionItem-query__Slroi","pac-icon":"dynamic-module_pac-icon__2RRIL"};
 styleInject(css_248z$n);
 
+var GERMANY_ALPHA_CODE = 'DE'; // default country can be cumbersome for new country implementation
 var DynamicAddressEntry = function (_a) {
-    var isGeometryEnabled = _a.isGeometryEnabled, initialAddress = _a.address, onAddressChange = _a.onAddressChange, onGeometryChange = _a.onGeometryChange;
-    var _b = usePlacesAutocomplete({
+    var isGeometryEnabled = _a.isGeometryEnabled, initialAddress = _a.address, onAddressChange = _a.onAddressChange, onGeometryChange = _a.onGeometryChange, _b = _a.manualAddressEntryText, manualAddressEntryText = _b === void 0 ? "Search for address" : _b;
+    var _c = usePlacesAutocomplete({
         debounce: 400,
-        defaultValue: initialAddress === null || initialAddress === void 0 ? void 0 : initialAddress.street,
-    }), ready = _b.ready, value = _b.value, _c = _b.suggestions, status = _c.status, data = _c.data, setValue = _b.setValue, clearSuggestions = _b.clearSuggestions;
+        defaultValue: (initialAddress === null || initialAddress === void 0 ? void 0 : initialAddress.street) ? (initialAddress === null || initialAddress === void 0 ? void 0 : initialAddress.street) + " " + initialAddress.houseNumber : '',
+        requestOptions: {
+            componentRestrictions: { country: GERMANY_ALPHA_CODE },
+        }
+    }), ready = _c.ready, value = _c.value, _d = _c.suggestions, status = _d.status, data = _d.data, setValue = _c.setValue, clearSuggestions = _c.clearSuggestions;
     var handleInput = function (e) {
         setValue(e.target.value);
     };
@@ -3713,7 +3724,7 @@ var DynamicAddressEntry = function (_a) {
             return (jsxRuntime.jsxs("li", __assign({ onClick: handleSelect(suggestion), className: styles$m.suggestionItem }, { children: [jsxRuntime.jsx("span", __assign({ className: "fw-bold pr8" }, { children: main_text }), void 0), ' ', jsxRuntime.jsx("small", { children: secondary_text }, void 0)] }), place_id));
         });
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", __assign({ style: { position: 'relative' } }, { children: [jsxRuntime.jsx(Input, { className: "w100", id: "autocomplete", "data-cy": "autocomplete", type: "text", placeholder: "Search for address", disabled: !ready, onChange: handleInput, value: value }, void 0),
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", __assign({ style: { position: 'relative' } }, { children: [jsxRuntime.jsx(Input, { className: "w100", id: "autocomplete", "data-cy": "autocomplete", type: "text", placeholder: manualAddressEntryText, disabled: !ready, onChange: handleInput, value: value, autoComplete: "nope" }, void 0),
                 status === 'OK' && (jsxRuntime.jsx("ul", __assign({ className: styles$m.suggestionList }, { children: renderSuggestions() }), void 0))] }), void 0) }, void 0));
 };
 
@@ -4073,12 +4084,13 @@ function useJsApiLoader(_a) {
                 setLoadError(error);
             });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return { isLoaded: isLoaded, loadError: loadError };
 }
 
 var AutoCompleteAddress = function (_a) {
-    var _b = _a.mapId, mapId = _b === void 0 ? 'map' : _b, apiKey = _a.apiKey, address = _a.address, _c = _a.staticVersion, staticVersion = _c === void 0 ? !!process.env.STORYBOOK_STATIC : _c, onAddressChange = _a.onAddressChange, manualAddressEntryTexts = _a.manualAddressEntryTexts;
+    var _b = _a.mapId, mapId = _b === void 0 ? 'map' : _b, apiKey = _a.apiKey, address = _a.address, _c = _a.staticVersion, staticVersion = _c === void 0 ? !!process.env.STORYBOOK_STATIC : _c, onAddressChange = _a.onAddressChange, manualAddressEntryTexts = _a.manualAddressEntryTexts, placeholders = _a.placeholders;
     var _d = require$$0.useState(false), isLoading = _d[0], setIsLoading = _d[1];
     var _e = require$$0.useState(undefined), geometry = _e[0], setGeometry = _e[1];
     var _f = require$$0.useState(!!address), manualAddressEntry = _f[0], setManualAddressEntry = _f[1];
@@ -4116,10 +4128,13 @@ var AutoCompleteAddress = function (_a) {
             updateMapGeometry(address);
         }
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isGeometryEnabled && address && (jsxRuntime.jsx(GoogleMapsWrapper, { mapId: mapId, hasLoadedGoogleAPI: hasLoadedGoogleAPI, geometry: geometry, isLoading: isLoading }, void 0) // this can be composable <AutocompleteAddress>{({geometry} ) => <GoogleMapsWrapper geometry={geometry}>}
+    if (!hasLoadedGoogleAPI) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isGeometryEnabled && address && (jsxRuntime.jsx(GoogleMapsWrapper, { mapId: mapId, markerLocation: geometry === null || geometry === void 0 ? void 0 : geometry.location, isLoading: isLoading }, void 0) // this can be composable <AutocompleteAddress>{({geometry} ) => <GoogleMapsWrapper geometry={geometry}>}
             ),
             loadGoogleAPIError && jsxRuntime.jsx("p", { children: "Google API is not responding." }, void 0),
-            hasLoadedGoogleAPI && (jsxRuntime.jsx("div", __assign({ className: "wmx8" }, { children: manualAddressEntry || loadGoogleAPIError ? (jsxRuntime.jsx(ManualAddressEntry, { address: address, onAddressChange: handleManualAddress }, void 0)) : (jsxRuntime.jsx(DynamicAddressEntry, { address: address, onAddressChange: handleDynamicAddress, isGeometryEnabled: isGeometryEnabled, onGeometryChange: setGeometry }, void 0)) }), void 0)),
+            jsxRuntime.jsx("div", __assign({ className: "wmx8" }, { children: manualAddressEntry || loadGoogleAPIError ? (jsxRuntime.jsx(ManualAddressEntry, { address: address, onAddressChange: handleManualAddress, placeholders: placeholders }, void 0)) : (jsxRuntime.jsx(DynamicAddressEntry, { address: address, onAddressChange: handleDynamicAddress, isGeometryEnabled: isGeometryEnabled, onGeometryChange: setGeometry, manualAddressEntryText: placeholders === null || placeholders === void 0 ? void 0 : placeholders.manualAddressEntry }, void 0)) }), void 0),
             manualAddressEntry ? (jsxRuntime.jsxs("div", __assign({ className: "p-p mt8" }, { children: [(manualAddressEntryTexts === null || manualAddressEntryTexts === void 0 ? void 0 : manualAddressEntryTexts.preText) || 'Or ',
                     jsxRuntime.jsx("button", __assign({ className: "p-a bg-transparent fw-bold c-pointer", onClick: handleModeSwitch, "data-value": 'false', type: "button" }, { children: (manualAddressEntryTexts === null || manualAddressEntryTexts === void 0 ? void 0 : manualAddressEntryTexts.cta) || 'Enter address dynamically' }), void 0)] }), void 0)) : (jsxRuntime.jsxs("div", __assign({ className: "p-p mt8" }, { children: [(manualAddressEntryTexts === null || manualAddressEntryTexts === void 0 ? void 0 : manualAddressEntryTexts.preText) || 'Or ',
                     jsxRuntime.jsx("button", __assign({ className: "p-a bg-transparent fw-bold c-pointer", onClick: handleModeSwitch, "data-value": 'true', type: "button" }, { children: (manualAddressEntryTexts === null || manualAddressEntryTexts === void 0 ? void 0 : manualAddressEntryTexts.cta) || 'Enter address manually' }), void 0)] }), void 0))] }, void 0));