@feathery/react 2.10.2 → 2.10.4

package/dist/cjs/fthry_index.CD8xJKKg.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var index$1 = require('./fthry_index.CsZ4a-ul.js');
+var React = require('react');
+var Placeholder = require('./fthry_Placeholder.BYiBhbzh.js');
+var InlineTooltip = require('./fthry_InlineTooltip.BmRAwfTr.js');
+var ShowEyeIcon = require('./fthry_ShowEyeIcon.JSFm5V3g.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+require('./fthry_Overlay.Cu-jPCI2.js');
+
+function PasswordField(_a) {
+    var _b;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _c = _a.elementProps, elementProps = _c === void 0 ? {} : _c, _d = _a.required, required = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.repeatIndex, repeatIndex = _f === void 0 ? null : _f, editMode = _a.editMode, _g = _a.onChange, onChange = _g === void 0 ? function () { } : _g, _h = _a.onEnter, onEnter = _h === void 0 ? function () { } : _h, _j = _a.setRef, setRef = _j === void 0 ? function () { } : _j, _k = _a.rawValue, rawValue = _k === void 0 ? '' : _k, inlineError = _a.inlineError, children = _a.children;
+    var _l = index$1.useBorder({
+        element: element,
+        error: inlineError,
+        breakpoint: responsiveStyles.getMobileBreakpoint()
+    }), borderStyles = _l.borderStyles, customBorder = _l.customBorder, borderId = _l.borderId;
+    var _m = index$1.__read(React.useState(false), 2), showPassword = _m[0], setShowPassword = _m[1];
+    var containerRef = React.useRef(null);
+    var servar = element.servar;
+    var spacing = element.properties.tooltipText ? 30 : 8;
+    return (index$1.jsxs("div", index$1.__assign({ ref: containerRef, css: index$1.__assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, index$1.jsxs("div", index$1.__assign({ css: index$1.__assign(index$1.__assign(index$1.__assign({ position: 'relative', width: '100%', whiteSpace: 'nowrap', 
+                    // Prevent placeholder overflow
+                    overflowX: 'clip' }, responsiveStyles.getTarget('sub-fc')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:hover': index$1.hoverStylesGuard(disabled
+                        ? {}
+                        : index$1.__assign(index$1.__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)) }) }, { children: [index$1.jsx("input", { id: servar.key, name: servar.key, css: {
+                            '.feathery &': index$1.__assign(index$1.__assign(index$1.__assign({ position: 'relative', 
+                                // Position input above the border div
+                                zIndex: index$1.FORM_Z_INDEX, height: '100%', width: '100%', border: 'none', margin: 0, backgroundColor: 'transparent' }, index$1.resetStyles), responsiveStyles.getTarget('field')), (_b = {}, _b["&:focus ~ #".concat(borderId)] = Object.values(borderStyles.active)[0], _b['&:not(:focus)'] = rawValue || !element.properties.placeholder
+                                ? {}
+                                : { color: 'transparent !important' }, _b))
+                        }, "aria-label": element.properties.aria_label, maxLength: servar.max_length, minLength: servar.min_length, required: required, onChange: function (e) {
+                            if (servar.max_length && e.target.value.length > servar.max_length)
+                                return;
+                            onChange(e);
+                        }, onKeyDown: function (e) {
+                            if (e.key === 'Enter')
+                                onEnter(e);
+                        }, placeholder: '', disabled: disabled, value: rawValue, ref: setRef, autoComplete: 'off', type: showPassword ? 'text' : 'password', onFocus: index$1.iosScrollOnFocus }), rawValue && (index$1.jsx("div", index$1.__assign({ css: {
+                            position: 'absolute',
+                            cursor: 'pointer',
+                            insetInlineEnd: "".concat(spacing, "px"),
+                            // We need to subtract half the height of the icon to center it
+                            top: 'calc(50% - 12px)',
+                            zIndex: index$1.FORM_Z_INDEX
+                        }, onClick: function () { return setShowPassword(function (prev) { return !prev; }); }, "aria-label": 'Toggle password visibility' }, { children: showPassword ? index$1.jsx(ShowEyeIcon.ShowEyeIcon, {}) : index$1.jsx(ShowEyeIcon.ShowEyeIcon$1, {}) }))), customBorder, index$1.jsx(Placeholder.Placeholder, { value: rawValue, element: element, responsiveStyles: responsiveStyles, repeatIndex: repeatIndex }), index$1.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: element.id, text: element.properties.tooltipText, responsiveStyles: responsiveStyles, repeat: element.repeat })] }))] })));
+}
+var index = React.memo(PasswordField);
+
+exports.default = index;

package/dist/cjs/fthry_index.CKmjSEM_.js

@@ -0,0 +1,250 @@
+'use strict';
+
+var index = require('./fthry_index.CsZ4a-ul.js');
+var React = require('react');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+
+function FileUploadIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '48px' : _b, style = _a.style;
+    return (index.jsxs("svg", index.__assign({ width: width, viewBox: '0 0 48 48', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: style }, { children: [index.jsx("path", { d: 'm18.101 30.078 5.9-5.888 5.898 5.888M24 40.3V24.19', stroke: '#414859' }), index.jsx("path", { d: 'M34.988 36.336c5 0 9.012-4.056 9.012-9.112s-4.012-9.112-9.012-9.112c0-5.585-4.476-10.112-10-10.112-4.244 0-7.848 2.646-9.302 6.408-.232 0-.465-.059-.698-.059C8.942 14.35 4 19.288 4 25.46c0 6.114 4.884 11.111 10.988 11.111', stroke: '#414859' })] })));
+}
+
+function DownloadIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? 26 : _b, _c = _a.height, height = _c === void 0 ? 26 : _c;
+    return (index.jsx("svg", index.__assign({ width: width, height: height, viewBox: '0 0 26 26', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, { children: index.jsx("path", { d: 'M1 19.3529V22.1765C1 22.9253 1.31607 23.6435 1.87868 24.173C2.44129 24.7025 3.20435 25 4 25H22C22.7956 25 23.5587 24.7025 24.1213 24.173C24.6839 23.6435 25 22.9253 25 22.1765V19.3529M5.5 10.8824L13 17.9412M13 17.9412L20.5 10.8824M13 17.9412V1', stroke: 'white', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round' }) })));
+}
+
+var DEFAULT_FILE_SIZE_LIMIT = 1024 * 1024 * 10;
+var NUM_FILES_LIMIT = 20;
+function FileUploadField(_a) {
+    var _this = this;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, editMode = _a.editMode, _d = _a.onChange, customOnChange = _d === void 0 ? function () { } : _d, _e = _a.initialFiles, initialFiles = _e === void 0 ? [] : _e, _f = _a.elementProps, elementProps = _f === void 0 ? {} : _f, children = _a.children;
+    var servar = element.servar;
+    var showLabel = servar.name !== '';
+    var isMultiple = servar.metadata.multiple;
+    var fileInput = React.useRef(null);
+    var _g = index.__read(React.useState([]), 2), rawFiles = _g[0], setRawFiles = _g[1];
+    var _h = index.__read(React.useState(-1), 2), hoverDownload = _h[0], setHoverDownload = _h[1];
+    React.useEffect(function () {
+        // Prevent infinite loop of setting a new empty array as the value
+        if (index.isEmptyArray(rawFiles) && index.isEmptyArray(initialFiles))
+            return;
+        // Normalize placeholders like [null] to an empty list
+        setRawFiles(index.toList(initialFiles).filter(Boolean));
+    }, [initialFiles]);
+    // Thumbnails derived from current files; rawFiles is normalized to exclude nulls
+    var thumbnailData = index.useThumbnailData(rawFiles);
+    var hasFiles = rawFiles.length > 0;
+    var allowMoreFiles = isMultiple || !hasFiles;
+    var hidePreview = element.styles.hide_file_preview;
+    var handleDragOver = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    var handleDrop = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var files = e.dataTransfer.files;
+        if (allowMoreFiles)
+            handleFiles(files);
+    };
+    var handleChange = function (event) {
+        var files = event.target.files;
+        if (files && allowMoreFiles)
+            handleFiles(files);
+    };
+    var onClick = function () {
+        var _a;
+        if (!allowMoreFiles && !hidePreview)
+            return;
+        if (disabled)
+            return;
+        (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    var allowedFileTypes = index.__spreadArray([], index.__read(servar.metadata.file_types), false);
+    if (servar.metadata.custom_file_types)
+        allowedFileTypes.push.apply(allowedFileTypes, index.__spreadArray([], index.__read(servar.metadata.custom_file_types.map(function (type) { return ".".concat(type); })), false));
+    var isFileTypeMatch = function (file, allowedType) {
+        var _a;
+        // handle image/* or video/* etc.
+        if (allowedType.endsWith('/*')) {
+            var typeCategory = allowedType.split('/')[0];
+            return file.type.startsWith(typeCategory + '/');
+        }
+        // handle specific file types like application/pdf
+        if (allowedType.includes('/')) {
+            return file.type === allowedType;
+        }
+        var extension = '.' + ((_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        return allowedType.toLowerCase() === extension;
+    };
+    var validateFileTypes = function (files) {
+        if (allowedFileTypes.length === 0)
+            return;
+        var individualTypes = allowedFileTypes.flatMap(function (str) {
+            return str.split(',').map(function (item) { return item.trim(); });
+        });
+        var invalidFiles = files.filter(function (file) { return !individualTypes.some(function (type) { return isFileTypeMatch(file, type); }); });
+        if (invalidFiles.length > 0) {
+            throw new Error("Invalid file type. Allowed types: ".concat(allowedFileTypes.join(', ')));
+        }
+    };
+    var fileSizeLimit = servar.max_length
+        ? servar.max_length * 1024
+        : DEFAULT_FILE_SIZE_LIMIT;
+    var validateFileSizes = function (files) {
+        if (files.some(function (file) { return file.size > fileSizeLimit; })) {
+            var sizeLabel = '';
+            if (fileSizeLimit < 1024)
+                sizeLabel = "".concat(fileSizeLimit, " bytes");
+            else if (fileSizeLimit <= 1024 * 1024) {
+                var kbSize = Math.floor(fileSizeLimit / 1024);
+                sizeLabel = "".concat(kbSize, " kb");
+            }
+            else {
+                var mbSize = Math.floor(fileSizeLimit / (1024 * 1024));
+                sizeLabel = "".concat(mbSize, " mb");
+            }
+            throw new Error("File exceeds max size of ".concat(sizeLabel));
+        }
+    };
+    // When the user uploads files to the multi-file upload, we just append to the existing set
+    // By default the input element would just replace all the uploaded files (we don't want that)
+    var handleFiles = function (filelist) { return index.__awaiter(_this, void 0, void 0, function () {
+        var files, existingCount, uploadedFiles, newRawFiles, length_1;
+        var _a, _b, _c;
+        return index.__generator(this, function (_d) {
+            if (disabled)
+                return [2 /*return*/];
+            files = Array.from(filelist);
+            if (!isMultiple) {
+                files = [files[0]];
+            }
+            try {
+                if (files.some(function (file) { return !file || !(file instanceof File) || file.size <= 0; })) {
+                    throw new Error('Some files are invalid');
+                }
+                validateFileTypes(files);
+                validateFileSizes(files);
+                existingCount = hidePreview ? 0 : rawFiles.length;
+                if (files.length + existingCount > NUM_FILES_LIMIT) {
+                    // Splice off the uploaded files past the upload limit
+                    files.splice(NUM_FILES_LIMIT - existingCount);
+                }
+                uploadedFiles = files.map(function (file) { return Promise.resolve(file); });
+                newRawFiles = void 0;
+                if (hidePreview) {
+                    newRawFiles = uploadedFiles;
+                    length_1 = 0;
+                }
+                else {
+                    newRawFiles = index.__spreadArray(index.__spreadArray([], index.__read(rawFiles), false), index.__read(uploadedFiles), false);
+                    length_1 = existingCount;
+                }
+                setRawFiles(newRawFiles);
+                customOnChange(newRawFiles, length_1);
+                (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
+                // Wipe the value of the upload element so we can upload multiple copies of the same file
+                // If we didn't do this, then uploading the same file wouldn't re-trigger onChange
+                if (fileInput.current) {
+                    fileInput.current.value = '';
+                }
+            }
+            catch (error) {
+                (_b = fileInput.current) === null || _b === void 0 ? void 0 : _b.setCustomValidity(error.message);
+                (_c = fileInput.current) === null || _c === void 0 ? void 0 : _c.reportValidity();
+            }
+            return [2 /*return*/];
+        });
+    }); };
+    function onClear(index$1) {
+        return function () {
+            var newRawFiles = index.justRemove(rawFiles, index$1);
+            setRawFiles(newRawFiles);
+            customOnChange(newRawFiles, -1);
+        };
+    }
+    var imgStyles = index.__assign(index.__assign({}, index.imgMaxSizeStyles), responsiveStyles.getTarget('img'));
+    var icon = element.properties.icon ? (index.jsx("img", { src: element.properties.icon, style: index.__assign(index.__assign({}, imgStyles), { maxWidth: '100%', height: 'auto' }), alt: '' })) : (index.jsx(FileUploadIcon, { width: imgStyles.width && imgStyles.width !== 'px'
+            ? imgStyles.width
+            : undefined, style: { maxHeight: '100%' } }));
+    return (index.jsxs("div", index.__assign({ css: index.__assign({ display: 'flex', flexWrap: 'wrap', position: 'relative', pointerEvents: editMode ? 'none' : 'auto', width: '100%', height: '100%' }, responsiveStyles.getTarget('fc')) }, elementProps, { onDragOver: handleDragOver, onDrop: disabled ? undefined : handleDrop }, { children: [children, !hidePreview &&
+                thumbnailData.map(function (_a, index$1) {
+                    var filename = _a.filename, thumbnail = _a.thumbnail;
+                    return index$1 < rawFiles.length ? (index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({ position: 'relative', width: '100%', maxHeight: '100%', overflow: 'hidden', display: 'flex', justifyContent: 'center', alignItems: 'center', boxSizing: 'border-box' }, (thumbnail
+                            ? {}
+                            : { paddingLeft: '20px', paddingRight: '20px' })), responsiveStyles.getTarget('field')), onMouseEnter: function () { return setHoverDownload(index$1); }, onMouseLeave: function () { return setHoverDownload(-1); } }, { children: [hoverDownload === index$1 && (index.jsx("div", index.__assign({ css: {
+                                    position: 'absolute',
+                                    margin: 'auto',
+                                    left: 0,
+                                    right: 0,
+                                    top: 0,
+                                    bottom: 0,
+                                    width: '48px',
+                                    height: '48px',
+                                    borderRadius: '8px',
+                                    backgroundColor: '#3E414D80',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center'
+                                }, onClick: function () { return index.__awaiter(_this, void 0, void 0, function () { var _a; return index.__generator(this, function (_b) {
+                                    switch (_b.label) {
+                                        case 0:
+                                            _a = index.downloadFile;
+                                            return [4 /*yield*/, rawFiles[index$1]];
+                                        case 1: return [2 /*return*/, _a.apply(void 0, [(_b.sent())])];
+                                    }
+                                }); }); } }, { children: index.jsx(DownloadIcon, {}) }))), thumbnail ? (index.jsx("img", { src: thumbnail, style: {
+                                    width: '100%',
+                                    height: '100%',
+                                    objectFit: 'contain'
+                                }, alt: filename || '' })) : (index.jsx("span", index.__assign({ style: {
+                                    color: 'black',
+                                    height: '100%',
+                                    width: '100%',
+                                    wordBreak: 'break-all',
+                                    fontSize: 'small',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    textAlign: 'center'
+                                } }, { children: filename || 'File' }))), index.jsx("div", index.__assign({ css: {
+                                    position: 'absolute',
+                                    top: '4px',
+                                    right: '4px',
+                                    color: 'white',
+                                    background: '#AAA',
+                                    height: '16px',
+                                    width: '16px',
+                                    borderRadius: '50%',
+                                    pointerEvents: disabled ? 'none' : 'auto',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    transition: '0.2s ease all',
+                                    '&:hover': { backgroundColor: '#BBB' }
+                                }, role: 'button', "aria-label": 'Clear file', onClick: function (event) {
+                                    var _a;
+                                    // Stop propagation so window doesn't open up to pick another file to upload
+                                    event.stopPropagation();
+                                    (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity('');
+                                    onClear(index$1)();
+                                } }, { children: index.jsx(index.CloseIcon, { fill: 'white', width: 12, height: 12 }) }))] }), index$1)) : null;
+                }), (allowMoreFiles || hidePreview) && (index.jsxs("div", index.__assign({ onClick: onClick, css: index.__assign({ position: 'relative', pointerEvents: disabled ? 'none' : 'auto', cursor: 'pointer', maxHeight: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', overflow: 'hidden', boxSizing: 'border-box', width: '100%' }, responsiveStyles.getTarget('ac')) }, { children: [icon, showLabel && (index.jsx("div", index.__assign({ css: responsiveStyles.getTarget('add') }, { children: servar.name })))] }))), index.jsx("input", { id: servar.key, name: servar.key, ref: fileInput, type: 'file', onChange: handleChange, required: required && !hasFiles, accept: allowedFileTypes.join(',') || undefined, disabled: disabled, "aria-label": element.properties.aria_label, multiple: isMultiple, onFocus: index.iosScrollOnFocus, style: {
+                    position: 'absolute',
+                    pointerEvents: 'none',
+                    opacity: 0,
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: index.FORM_Z_INDEX - 2
+                } })] })));
+}
+
+exports.default = FileUploadField;

package/dist/cjs/fthry_index.CZwit5fg.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var index$1 = require('./fthry_index.CsZ4a-ul.js');
+var React = require('react');
+var Placeholder = require('./fthry_Placeholder.BYiBhbzh.js');
+var InlineTooltip = require('./fthry_InlineTooltip.BmRAwfTr.js');
+var Overlay = require('./fthry_Overlay.Cu-jPCI2.js');
+var useElementSize = require('./fthry_useElementSize.CGPf-Bg7.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+
+function useMounted() {
+    var mounted = React.useRef(true);
+    React.useEffect(function () {
+        mounted.current = true; // Handle remount
+        return function () {
+            mounted.current = false;
+        };
+    }, []);
+    return mounted;
+}
+
+function isKeydownValid(event) {
+    return Boolean(event.isTrusted && event.code);
+}
+
+var SEARCH_DELAY_TIME_MS = 500;
+var EXIT_DELAY_TIME_MS = 200;
+function AddressLine1(_a) {
+    var _this = this;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _b = _a.elementProps, elementProps = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, autoComplete = _a.autoComplete, editMode = _a.editMode, _d = _a.repeatIndex, repeatIndex = _d === void 0 ? null : _d, _e = _a.onSelect, onSelect = _e === void 0 ? function () { } : _e, _f = _a.onChange, onChange = _f === void 0 ? function () { } : _f, required = _a.required, _g = _a.onBlur, onBlur = _g === void 0 ? function () { } : _g, _h = _a.onEnter, onEnter = _h === void 0 ? function () { } : _h, _j = _a.setRef, setRef = _j === void 0 ? function () { } : _j, _k = _a.value, value = _k === void 0 ? '' : _k, inlineError = _a.inlineError, children = _a.children;
+    var servar = element.servar;
+    var options = useAddressSearch(value, servar);
+    var _l = index$1.__read(React.useState(false), 2), showOptions = _l[0], setShowOptions = _l[1];
+    var _m = index$1.__read(React.useState(false), 2), focused = _m[0], setFocused = _m[1];
+    var inputRef = React.useRef(null);
+    var containerRef = React.useRef(null);
+    var fieldWrapperRef = React.useRef(null);
+    var dropdownWidth = useElementSize.useElementSize(fieldWrapperRef).width;
+    var _o = index$1.useBorder({
+        element: element,
+        error: inlineError,
+        breakpoint: responsiveStyles.getMobileBreakpoint()
+    }), borderStyles = _o.borderStyles, customBorder = _o.customBorder;
+    return (index$1.jsxs("div", index$1.__assign({ ref: containerRef, css: index$1.__assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, index$1.jsxs("div", index$1.__assign({ ref: fieldWrapperRef, css: index$1.__assign(index$1.__assign(index$1.__assign({ position: 'relative', width: '100%', 
+                    // Prevent placeholder overflow
+                    overflowX: 'clip' }, responsiveStyles.getTarget('sub-fc')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:hover': index$1.hoverStylesGuard(disabled
+                        ? {}
+                        : index$1.__assign(index$1.__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)), '&&': focused
+                        ? index$1.__assign(index$1.__assign({}, responsiveStyles.getTarget('active')), borderStyles.active) : {} }) }, { children: [customBorder, index$1.jsx("input", { id: servar.key, name: servar.key, css: index$1.__assign(index$1.__assign(index$1.__assign({ position: 'relative', height: '100%', width: '100%', border: 'none', margin: 0, backgroundColor: 'transparent' }, index$1.resetStyles), responsiveStyles.getTarget('field')), (focused || value || !element.properties.placeholder
+                            ? {}
+                            : { color: 'transparent !important' })), maxLength: servar.max_length, minLength: servar.min_length, placeholder: '', disabled: disabled, "aria-label": element.properties.aria_label, autoComplete: autoComplete === 'on' ? 'street-address' : 'new-password', value: value, ref: function (ref) {
+                            inputRef.current = ref;
+                            setRef(ref);
+                        }, onKeyDown: function (e) {
+                            if (!isKeydownValid(e))
+                                return;
+                            if (e.key === 'Enter')
+                                onEnter(e);
+                            else
+                                setShowOptions(e.key !== 'Escape');
+                        }, onFocus: function (event) {
+                            setFocused(true);
+                            index$1.iosScrollOnFocus(event);
+                        }, onBlur: function (e) {
+                            setTimeout(function () { return setShowOptions(false); }, EXIT_DELAY_TIME_MS);
+                            onBlur(e);
+                            setFocused(false);
+                        }, onChange: onChange, required: required }), index$1.jsx(Overlay.Overlay, index$1.__assign({ show: showOptions && options.length > 0, targetRef: inputRef, containerRef: containerRef, placement: 'bottom-start', offset: 4, onHide: function () { return setShowOptions(false); } }, { children: index$1.jsx("ul", index$1.__assign({ css: index$1.__assign({ zIndex: index$1.DROPDOWN_Z_INDEX, listStyleType: 'none', padding: 0, margin: 0, backgroundColor: 'white', cursor: 'pointer', boxShadow: '0 0 4px rgb(0 0 0 / 15%)', width: dropdownWidth !== undefined ? "".concat(dropdownWidth, "px") : '100%' }, responsiveStyles.getTarget('dropdown')) }, { children: options.map(function (_a) {
+                                var display = _a.display, addressId = _a.address_id;
+                                return (index$1.jsx("li", index$1.__assign({ css: {
+                                        padding: '8px 14px',
+                                        transition: '0.1s ease all',
+                                        '&:hover': index$1.hoverStylesGuard({
+                                            backgroundColor: '#e6e6e633'
+                                        })
+                                    }, onClick: function () { return index$1.__awaiter(_this, void 0, void 0, function () {
+                                        var details;
+                                        var _a;
+                                        return index$1.__generator(this, function (_b) {
+                                            switch (_b.label) {
+                                                case 0: return [4 /*yield*/, new index$1.FeatheryClient().addressDetail(addressId)];
+                                                case 1:
+                                                    details = _b.sent();
+                                                    onSelect(details, addressId);
+                                                    setShowOptions(false);
+                                                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                                    return [2 /*return*/];
+                                            }
+                                        });
+                                    }); } }, { children: display }), display));
+                            }) })) })), index$1.jsx(Placeholder.Placeholder, { value: value, element: element, responsiveStyles: responsiveStyles, repeatIndex: repeatIndex }), index$1.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: element.id, text: element.properties.tooltipText, responsiveStyles: responsiveStyles, repeat: element.repeat })] }))] })));
+}
+function useAddressSearch(searchTerm, servar) {
+    var _a;
+    var meta = servar.metadata;
+    var active = meta.address_autocomplete;
+    var country = (_a = meta.autocomplete_country) !== null && _a !== void 0 ? _a : '';
+    var mounted = useMounted();
+    var _b = index$1.__read(React.useState(searchTerm), 2), term = _b[0], setTerm = _b[1];
+    var _c = index$1.__read(React.useState([]), 2), results = _c[0], setResults = _c[1];
+    var fetchAddresses = React.useCallback(index$1.debounce(function (newTerm) {
+        new index$1.FeatheryClient()
+            .addressSearchResults(newTerm, country, servar.type === 'gmap_city')
+            .then(function (addresses) {
+            if (mounted.current) {
+                setResults(addresses);
+                setTerm(newTerm);
+            }
+        });
+    }, SEARCH_DELAY_TIME_MS), [setResults, setTerm]);
+    React.useEffect(function () {
+        var trimmedTerm = searchTerm.trim();
+        if (!active || trimmedTerm === term)
+            return;
+        if (trimmedTerm.length > 3)
+            fetchAddresses(trimmedTerm);
+        else {
+            if (results.length)
+                setResults([]);
+            setTerm(trimmedTerm);
+        }
+    }, [searchTerm]);
+    return results;
+}
+var index = React.memo(AddressLine1);
+
+exports.default = index;