@feathery/react 2.6.8 → 2.7.1

package/dist/fthry_index.Di1aadud.js

@@ -0,0 +1,251 @@
+import { j as jsxs, a as __assign, b as jsx, _ as __read, a5 as isEmptyArray, a6 as toList, a7 as useThumbnailData, a4 as __spreadArray, f as imgMaxSizeStyles, c as __awaiter, d as __generator, a8 as downloadFile, a9 as CloseIcon, i as iosScrollOnFocus, k as FORM_Z_INDEX, aa as justRemove } from './fthry_index.diObxaBS.js';
+import { useRef, useState, useEffect } from 'react';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'stream';
+import 'events';
+import 'buffer';
+import 'util';
+import 'react-dom';
+
+function FileUploadIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? '48px' : _b, style = _a.style;
+    return (jsxs("svg", __assign({ width: width, viewBox: '0 0 48 48', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: style }, { children: [jsx("path", { d: 'm18.101 30.078 5.9-5.888 5.898 5.888M24 40.3V24.19', stroke: '#414859' }), 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 (jsx("svg", __assign({ width: width, height: height, viewBox: '0 0 26 26', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' }, { children: 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 = useRef(null);
+    var _g = __read(useState([]), 2), rawFiles = _g[0], setRawFiles = _g[1];
+    var _h = __read(useState(-1), 2), hoverDownload = _h[0], setHoverDownload = _h[1];
+    useEffect(function () {
+        // Prevent infinite loop of setting a new empty array as the value
+        if (isEmptyArray(rawFiles) && isEmptyArray(initialFiles))
+            return;
+        // Normalize placeholders like [null] to an empty list
+        setRawFiles(toList(initialFiles).filter(Boolean));
+    }, [initialFiles]);
+    // Thumbnails derived from current files; rawFiles is normalized to exclude nulls
+    var thumbnailData = 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 = __spreadArray([], __read(servar.metadata.file_types), false);
+    if (servar.metadata.custom_file_types)
+        allowedFileTypes.push.apply(allowedFileTypes, __spreadArray([], __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 __awaiter(_this, void 0, void 0, function () {
+        var files, existingCount, uploadedFiles, newRawFiles, length_1;
+        var _a, _b, _c;
+        return __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 = __spreadArray(__spreadArray([], __read(rawFiles), false), __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) {
+        return function () {
+            var newRawFiles = justRemove(rawFiles, index);
+            setRawFiles(newRawFiles);
+            customOnChange(newRawFiles, -1);
+        };
+    }
+    var imgStyles = __assign(__assign({}, imgMaxSizeStyles), responsiveStyles.getTarget('img'));
+    var icon = element.properties.icon ? (jsx("img", { src: element.properties.icon, style: __assign(__assign({}, imgStyles), { maxWidth: '100%', height: 'auto' }), alt: '' })) : (jsx(FileUploadIcon, { width: imgStyles.width && imgStyles.width !== 'px'
+            ? imgStyles.width
+            : undefined, style: { maxHeight: '100%' } }));
+    return (jsxs("div", __assign({ css: __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) {
+                    var filename = _a.filename, thumbnail = _a.thumbnail;
+                    return index < rawFiles.length ? (jsxs("div", __assign({ css: __assign(__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); }, onMouseLeave: function () { return setHoverDownload(-1); } }, { children: [hoverDownload === index && (jsx("div", __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 __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
+                                    switch (_b.label) {
+                                        case 0:
+                                            _a = downloadFile;
+                                            return [4 /*yield*/, rawFiles[index]];
+                                        case 1: return [2 /*return*/, _a.apply(void 0, [(_b.sent())])];
+                                    }
+                                }); }); } }, { children: jsx(DownloadIcon, {}) }))), thumbnail ? (jsx("img", { src: thumbnail, style: {
+                                    width: '100%',
+                                    height: '100%',
+                                    objectFit: 'contain'
+                                }, alt: filename || '' })) : (jsx("span", __assign({ style: {
+                                    color: 'black',
+                                    height: '100%',
+                                    width: '100%',
+                                    wordBreak: 'break-all',
+                                    fontSize: 'small',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    textAlign: 'center'
+                                } }, { children: filename || 'File' }))), jsx("div", __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)();
+                                } }, { children: jsx(CloseIcon, { fill: 'white', width: 12, height: 12 }) }))] }), index)) : null;
+                }), (allowMoreFiles || hidePreview) && (jsxs("div", __assign({ onClick: onClick, css: __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 && (jsx("div", __assign({ css: responsiveStyles.getTarget('add') }, { children: servar.name })))] }))), 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: iosScrollOnFocus, style: {
+                    position: 'absolute',
+                    pointerEvents: 'none',
+                    opacity: 0,
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: FORM_Z_INDEX - 2
+                } })] })));
+}
+
+export { FileUploadField as default };

package/dist/fthry_index.DpFG-lbP.js

@@ -0,0 +1,138 @@
+import { a as __assign, h as hoverStylesGuard, j as jsxs, b as jsx, i as iosScrollOnFocus } from './fthry_index.diObxaBS.js';
+import { useMemo } from 'react';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'stream';
+import 'events';
+import 'buffer';
+import 'util';
+import 'react-dom';
+
+// Draws a checkmark, similar in dimensions to the default Chrome checkbox, in CSS
+var checkmarkClipPath = 'polygon(40% 85%, 89% 23%, 76% 12%, 39% 59%, 23% 44%, 12% 55%)';
+var MIN_CHECKBOX_PX = 13;
+// Possibly extract this to its own file, however the radio type is nearly identical to checkbox
+var radio = function (size, color) {
+    size = Math.floor(size / 1.7);
+    return {
+        height: size,
+        width: size,
+        minWidth: size,
+        minHeight: size,
+        border: 0,
+        boxShadow: "inset ".concat(size, "px ").concat(size, "px #").concat(color),
+        borderRadius: '50%'
+    };
+};
+var checkbox = function (size, color) {
+    return {
+        boxShadow: "inset ".concat(size, "px ").concat(size, "px #").concat(color),
+        clipPath: checkmarkClipPath
+    };
+};
+var scaleCheckboxSize = function (fontSize) {
+    return Math.max(fontSize, MIN_CHECKBOX_PX);
+};
+var applyHeightWidthMarginByFontSize = function (responsiveStyles, target, single) {
+    if (single === void 0) { single = false; }
+    responsiveStyles.apply(target, ['font_size'], function (fontSize) {
+        var scaled = scaleCheckboxSize(fontSize);
+        var scaledSize = "".concat(scaled, "px");
+        var styles = {
+            minHeight: scaledSize,
+            height: scaledSize,
+            minWidth: scaledSize,
+            width: scaledSize
+        };
+        var margin = Math.max(scaled / 2, 10);
+        if (!single)
+            styles.marginRight = "".concat(margin, "px");
+        return styles;
+    });
+};
+var applyCheckmarkByFontSize = function (responsiveStyles, target, colorProperty, isRadio) {
+    responsiveStyles.apply(target, ['font_size', colorProperty], function (fontSize, color) {
+        var scaledSize = scaleCheckboxSize(fontSize);
+        return isRadio ? radio(scaledSize, color) : checkbox(scaledSize, color);
+    });
+};
+var applyLabelHeightByFontSize = function (responsiveStyles, target) {
+    responsiveStyles.apply(target, ['font_size', 'line_height'], function (fontSize, lineHeight) {
+        if (!lineHeight)
+            lineHeight = scaleCheckboxSize(fontSize);
+        var topOffset = (lineHeight - fontSize) / 2;
+        return {
+            position: 'relative',
+            top: "-".concat(topOffset, "px"),
+            lineHeight: "".concat(lineHeight, "px")
+        };
+    });
+};
+var applyCheckmark = function (responsiveStyles, target, colorProperty) {
+    responsiveStyles.apply(target, ['height', 'height_unit', 'width', 'width_unit', colorProperty], function (height, heightUnit, width, widthUnit, color) {
+        return {
+            boxShadow: "inset ".concat(width).concat(widthUnit, " ").concat(height).concat(heightUnit, " #").concat(color),
+            clipPath: checkmarkClipPath
+        };
+    });
+};
+function applyCheckableInputStyles(element, responsiveStyles) {
+    responsiveStyles.addTargets('checkbox', 'checkboxCheckmark', 'checkboxSelected', 'checkboxHover', 'checkboxCheckmarkHover', 'checkboxLabel');
+    var _a = element.servar, type = _a.type, multiple = _a.metadata.multiple;
+    var isRadioGroup = type === 'select' || (type === 'matrix' && !multiple);
+    var isCheckboxGroup = type === 'multiselect' ||
+        type === 'checkbox_group' ||
+        (type === 'matrix' && multiple);
+    var scaleWithFontSize = isCheckboxGroup || isRadioGroup;
+    // width/height styles
+    if (scaleWithFontSize) {
+        applyLabelHeightByFontSize(responsiveStyles, 'checkboxLabel');
+        applyHeightWidthMarginByFontSize(responsiveStyles, 'checkbox', true);
+        applyHeightWidthMarginByFontSize(responsiveStyles, 'checkboxCheckmark', true);
+        applyHeightWidthMarginByFontSize(responsiveStyles, 'checkboxCheckmarkHover', true);
+        applyCheckmarkByFontSize(responsiveStyles, 'checkboxCheckmark', 'selected_font_color', isRadioGroup);
+        applyCheckmarkByFontSize(responsiveStyles, 'checkboxCheckmarkHover', 'hover_font_color', isRadioGroup);
+    }
+    else {
+        responsiveStyles.applyHeight('checkbox');
+        responsiveStyles.applyWidth('checkbox');
+        responsiveStyles.applyHeight('checkboxCheckmark');
+        responsiveStyles.applyWidth('checkboxCheckmark');
+        responsiveStyles.applyHeight('checkboxCheckmarkHover');
+        responsiveStyles.applyWidth('checkboxCheckmarkHover');
+        applyCheckmark(responsiveStyles, 'checkboxCheckmark', 'selected_font_color');
+        applyCheckmark(responsiveStyles, 'checkboxCheckmarkHover', 'hover_font_color');
+    }
+    // base styles
+    responsiveStyles.applyBorders({ target: 'checkbox' });
+    if (!isRadioGroup)
+        responsiveStyles.applyCorners('checkbox');
+    responsiveStyles.applyBoxShadow('checkbox');
+    responsiveStyles.applyColor('checkbox', 'background_color', 'backgroundColor', true);
+    responsiveStyles.applySelectorStyles('checkboxHover', {
+        prefix: 'hover_',
+        important: true
+    });
+    responsiveStyles.applySelectorStyles('checkboxSelected', {
+        prefix: 'selected_',
+        important: true
+    });
+    return responsiveStyles;
+}
+var composeCheckableInputStyle = function (styles, noHover, isRadio) {
+    if (noHover === void 0) { noHover = false; }
+    if (isRadio === void 0) { isRadio = false; }
+    return __assign(__assign({ position: 'static', marginLeft: 5, marginRight: 5, marginTop: 0, marginBottom: 0, appearance: 'none', display: 'grid', placeContent: 'center', 
+        // On error in Safari, checkboxes can have a misshapen outline so disable
+        outline: 'none', borderRadius: isRadio ? '50%' : null }, styles.getTarget('checkbox')), { '&:hover': hoverStylesGuard(noHover ? {} : styles.getTarget('checkboxHover')), '&::before': __assign({ content: "''", transform: 'scale(0)' }, styles.getTarget('checkboxCheckmark')), '&:hover::before': hoverStylesGuard(__assign(__assign({}, styles.getTarget('checkboxCheckmark')), styles.getTarget('checkboxCheckmarkHover'))), '&:checked': __assign({}, styles.getTarget('checkboxSelected')), '&:checked::before': {
+            transform: 'scale(1)'
+        } });
+};
+function CheckboxField(_a) {
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _b = _a.fieldVal, fieldVal = _b === void 0 ? true : _b, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.elementProps, elementProps = _d === void 0 ? {} : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, children = _a.children;
+    var styles = useMemo(function () { return applyCheckableInputStyles(element, responsiveStyles); }, [responsiveStyles]);
+    var servar = element.servar;
+    return (jsxs("div", __assign({ css: __assign(__assign({}, responsiveStyles.getTarget('fc')), { position: 'relative', display: 'flex' }) }, elementProps, { children: [children, jsx("input", { id: servar.key, name: servar.key, type: 'checkbox', checked: fieldVal, disabled: disabled, onChange: onChange, onFocus: iosScrollOnFocus, "aria-label": element.properties.aria_label, css: __assign(__assign(__assign({}, composeCheckableInputStyle(styles, disabled)), (disabled ? responsiveStyles.getTarget('disabled') : {})), { marginTop: '4px', '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }) }), fieldLabel] })));
+}
+
+export { applyCheckableInputStyles, applyHeightWidthMarginByFontSize, composeCheckableInputStyle, CheckboxField as default };

package/dist/fthry_index.DsECQjJb.js

@@ -0,0 +1,131 @@
+import { _ as __read, u as useBorder, j as jsxs, a as __assign, h as hoverStylesGuard, b as jsx, i as iosScrollOnFocus, r as resetStyles, D as DROPDOWN_Z_INDEX, c as __awaiter, d as __generator, F as FeatheryClient, e as debounce } from './fthry_index.diObxaBS.js';
+import { useRef, useEffect, memo, useState, useCallback } from 'react';
+import { P as Placeholder } from './fthry_Placeholder.Dns0M5df.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.CKU9xvD_.js';
+import { O as Overlay } from './fthry_Overlay.CAkqWcqE.js';
+import { u as useElementSize } from './fthry_useElementSize.boD8p4bk.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'stream';
+import 'events';
+import 'buffer';
+import 'util';
+import 'react-dom';
+
+function useMounted() {
+    var mounted = useRef(true);
+    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 = __read(useState(false), 2), showOptions = _l[0], setShowOptions = _l[1];
+    var _m = __read(useState(false), 2), focused = _m[0], setFocused = _m[1];
+    var inputRef = useRef(null);
+    var containerRef = useRef(null);
+    var fieldWrapperRef = useRef(null);
+    var dropdownWidth = useElementSize(fieldWrapperRef).width;
+    var _o = useBorder({
+        element: element,
+        error: inlineError,
+        breakpoint: responsiveStyles.getMobileBreakpoint()
+    }), borderStyles = _o.borderStyles, customBorder = _o.customBorder;
+    return (jsxs("div", __assign({ ref: containerRef, css: __assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ ref: fieldWrapperRef, css: __assign(__assign(__assign({ position: 'relative', width: '100%', 
+                    // Prevent placeholder overflow
+                    overflowX: 'clip' }, responsiveStyles.getTarget('sub-fc')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:hover': hoverStylesGuard(disabled
+                        ? {}
+                        : __assign(__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)), '&&': focused
+                        ? __assign(__assign({}, responsiveStyles.getTarget('active')), borderStyles.active) : {} }) }, { children: [customBorder, jsx("input", { id: servar.key, name: servar.key, css: __assign(__assign(__assign({ position: 'relative', height: '100%', width: '100%', border: 'none', margin: 0, backgroundColor: 'transparent' }, 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);
+                            iosScrollOnFocus(event);
+                        }, onBlur: function (e) {
+                            setTimeout(function () { return setShowOptions(false); }, EXIT_DELAY_TIME_MS);
+                            onBlur(e);
+                            setFocused(false);
+                        }, onChange: onChange, required: required }), jsx(Overlay, __assign({ show: showOptions && options.length > 0, targetRef: inputRef, containerRef: containerRef, placement: 'bottom-start', offset: 4, onHide: function () { return setShowOptions(false); } }, { children: jsx("ul", __assign({ css: __assign({ zIndex: 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 (jsx("li", __assign({ css: {
+                                        padding: '8px 14px',
+                                        transition: '0.1s ease all',
+                                        '&:hover': hoverStylesGuard({
+                                            backgroundColor: '#e6e6e633'
+                                        })
+                                    }, onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                                        var details;
+                                        var _a;
+                                        return __generator(this, function (_b) {
+                                            switch (_b.label) {
+                                                case 0: return [4 /*yield*/, new 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));
+                            }) })) })), jsx(Placeholder, { value: value, element: element, responsiveStyles: responsiveStyles, repeatIndex: repeatIndex }), jsx(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 = __read(useState(searchTerm), 2), term = _b[0], setTerm = _b[1];
+    var _c = __read(useState([]), 2), results = _c[0], setResults = _c[1];
+    var fetchAddresses = useCallback(debounce(function (newTerm) {
+        new FeatheryClient()
+            .addressSearchResults(newTerm, country, servar.type === 'gmap_city')
+            .then(function (addresses) {
+            if (mounted.current) {
+                setResults(addresses);
+                setTerm(newTerm);
+            }
+        });
+    }, SEARCH_DELAY_TIME_MS), [setResults, setTerm]);
+    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 = memo(AddressLine1);
+
+export { index as default };