@feathery/react 2.6.8 → 2.8.0

package/dist/fthry_index.uvWVc7KJ.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.F6BXSHA5.js';
+import { useRef, useEffect, memo, useState, useCallback } from 'react';
+import { P as Placeholder } from './fthry_Placeholder.DLtEoCLC.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.AGcWhuhV.js';
+import { O as Overlay } from './fthry_Overlay.X0blINpo.js';
+import { u as useElementSize } from './fthry_useElementSize.D3n9DgQ-.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 };