@feathery/react 2.13.0 → 2.15.0

package/cjs/fthry_index.BAis6iAm.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var index = require('./fthry_index.B5Nc9EIn.js');
+var React = require('react');
+var Overlay = require('./fthry_Overlay.CMYptYVH.js');
+var index$1 = require('./fthry_index.Dm94Mor0.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+
+function TextHoverTooltip(_a) {
+    var text = _a.text, children = _a.children, containerRef = _a.containerRef;
+    var _b = index.__read(React.useState(false), 2), show = _b[0], setShow = _b[1];
+    var triggerRef = React.useRef(null);
+    if (!text)
+        return index.jsx(index.Fragment, { children: children });
+    var isMobile = index.isMobile();
+    return (index.jsxs(index.Fragment, { children: [index.jsx("span", index.__assign({ ref: triggerRef, onMouseEnter: isMobile ? undefined : function () { return setShow(true); }, onMouseLeave: isMobile ? undefined : function () { return setShow(false); }, onFocus: function () { return setShow(true); }, onBlur: function () { return setShow(false); }, onClick: function () { return setShow(function (prev) { return !prev; }); }, style: { display: 'inline-block', cursor: 'pointer' } }, { children: children })), index.jsx(Overlay.Overlay, index.__assign({ show: show, targetRef: triggerRef, containerRef: containerRef, placement: 'top', onHide: function () { return setShow(false); }, offset: 4 }, { children: index.jsx(Overlay.Tooltip, index.__assign({ id: "tooltip-".concat(text), css: {
+                        zIndex: index.FORM_Z_INDEX + 1,
+                        padding: '.4rem 0',
+                        margin: '0 1rem',
+                        transition: 'opacity .10s linear',
+                        '.tooltip-inner': {
+                            maxWidth: '200px',
+                            padding: '.25rem .5rem',
+                            color: '#fff',
+                            textAlign: 'center',
+                            backgroundColor: '#000',
+                            borderRadius: '.25rem',
+                            fontSize: 'smaller'
+                        }
+                    } }, { children: text })) }))] }));
+}
+
+function MatrixField(_a) {
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _b = _a.fieldVal, fieldVal = _b === void 0 ? {} : _b, _c = _a.repeatIndex, repeatIndex = _c === void 0 ? null : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.elementProps, elementProps = _e === void 0 ? {} : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, children = _a.children;
+    var servar = element.servar;
+    var allowMultiple = servar.metadata.multiple;
+    var inputType = allowMultiple ? 'checkbox' : 'radio';
+    var containerRef = React.useRef(null);
+    var _g = responsiveStyles.getTarget('sub-fc'), backgroundColor = _g.backgroundColor, borderRadius = _g.borderRadius;
+    var styles = React.useMemo(function () {
+        index$1.applyCheckableInputStyles(element, responsiveStyles);
+        return responsiveStyles;
+    }, [responsiveStyles]);
+    var options;
+    if (repeatIndex !== null &&
+        servar.metadata.repeat_options !== undefined &&
+        servar.metadata.repeat_options[repeatIndex] !== undefined) {
+        options = servar.metadata.repeat_options[repeatIndex];
+    }
+    else {
+        options = servar.metadata.options;
+    }
+    var optionFraction = 100 / (options.length + 1);
+    var widthStyle = { minWidth: '100px', width: "".concat(optionFraction, "%") };
+    var firstColStyle = index.__assign(index.__assign({}, widthStyle), { fontWeight: 400, padding: 8 });
+    return (index.jsxs("div", index.__assign({ ref: containerRef, css: index.__assign(index.__assign({ width: '100%', height: '100%' }, responsiveStyles.getTarget('fc')), { position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'center' }) }, elementProps, { children: [children, fieldLabel, index.jsxs("div", index.__assign({ style: { display: 'flex', flexDirection: 'row', marginBottom: 6 } }, { children: [index.jsx("div", { css: firstColStyle }), options.map(function (opt, i) {
+                        // headers
+                        return (index.jsx("div", index.__assign({ style: {
+                                flex: 1,
+                                fontWeight: 600,
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                display: 'flex',
+                                textAlign: 'center'
+                            } }, { children: opt }), i));
+                    })] })), servar.metadata.questions.map(function (q, i) {
+                var highlight = q.highlight_color
+                    ? "#".concat(q.highlight_color)
+                    : backgroundColor;
+                return (index.jsxs("div", index.__assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        backgroundColor: highlight,
+                        borderRadius: borderRadius,
+                        marginBottom: 6
+                    } }, { children: [index.jsx(TextHoverTooltip, index.__assign({ text: q.tooltip }, { children: index.jsx("div", index.__assign({ css: firstColStyle }, { children: q.label })) })), options.map(function (opt, j) {
+                            var questionVal = fieldVal[q.id];
+                            var isChecked = Array.isArray(questionVal) && questionVal.includes(opt);
+                            return (index.jsx("div", index.__assign({ css: {
+                                    flex: 1,
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    display: 'flex'
+                                } }, { children: index.jsx("input", { type: inputType, name: repeatIndex !== null
+                                        ? "".concat(servar.key, "-").concat(i, "-").concat(repeatIndex)
+                                        : "".concat(servar.key, "-").concat(i), "aria-label": element.properties.aria_label, "data-question-id": q.id, value: opt, disabled: disabled || q.read_only, checked: isChecked, onChange: onChange, onFocus: index.iosScrollOnFocus, css: index$1.composeCheckableInputStyle(styles, disabled, !allowMultiple) }) }), j));
+                        })] }), i));
+            })] })));
+}
+
+exports.default = MatrixField;

package/cjs/fthry_index.BV9FIqI3.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var index$1 = require('./fthry_index.B5Nc9EIn.js');
+var React = require('react');
+var Placeholder = require('./fthry_Placeholder.xDn0I29f.js');
+var InlineTooltip = require('./fthry_InlineTooltip.CRRFOiO4.js');
+var ShowEyeIcon = require('./fthry_ShowEyeIcon.COZczYEG.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+require('./fthry_Overlay.CMYptYVH.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/cjs/fthry_index.BZzFi9o3.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var index$1 = require('./fthry_index.B5Nc9EIn.js');
+var React = require('react');
+var Placeholder = require('./fthry_Placeholder.xDn0I29f.js');
+var InlineTooltip = require('./fthry_InlineTooltip.CRRFOiO4.js');
+var Overlay = require('./fthry_Overlay.CMYptYVH.js');
+var useElementSize = require('./fthry_useElementSize.CMss2qLc.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;

package/cjs/fthry_index.BdfASO2V.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var index = require('./fthry_index.B5Nc9EIn.js');
+var React = require('react');
+var FormControl = require('./fthry_FormControl.C8oeoDk3.js');
+var index$1 = require('./fthry_index.Dm94Mor0.js');
+var InlineTooltip = require('./fthry_InlineTooltip.CRRFOiO4.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.GHaAu-dd.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+require('./fthry_Overlay.CMYptYVH.js');
+
+var applyRadioGroupStyles = function (element, responsiveStyles) {
+    responsiveStyles.addTargets('radioGroup');
+    index$1.applyHeightWidthMarginByFontSize(responsiveStyles, 'radioGroup');
+    return responsiveStyles;
+};
+function RadioButtonGroupField(_a) {
+    var _b, _c;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _d = _a.required, required = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.fieldVal, fieldVal = _f === void 0 ? '' : _f, _g = _a.otherVal, otherVal = _g === void 0 ? '' : _g, _h = _a.repeatIndex, repeatIndex = _h === void 0 ? null : _h, editMode = _a.editMode, _j = _a.onChange, onChange = _j === void 0 ? function () { } : _j, _k = _a.onOtherChange, onOtherChange = _k === void 0 ? function () { } : _k, _l = _a.onEnter, onEnter = _l === void 0 ? function () { } : _l, _m = _a.elementProps, elementProps = _m === void 0 ? {} : _m, children = _a.children;
+    var servar = element.servar;
+    var containerRef = React.useRef(null);
+    var _o = useSalesforceSync.useSalesforceSync(servar.metadata.salesforce_sync, editMode), dynamicOptions = _o.dynamicOptions, loadingDynamicOptions = _o.loadingDynamicOptions, shouldSalesforceSync = _o.shouldSalesforceSync;
+    var _p = index.__read(React.useState({}), 2), otherSelect = _p[0], setOtherSelect = _p[1];
+    var otherChecked = 
+    // @ts-expect-error TS(7053): Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
+    (otherSelect[servar.key] || fieldVal) && fieldVal === otherVal;
+    var otherTextDisabled = !otherChecked || disabled;
+    var otherLabel = (_b = servar.metadata.other_label) !== null && _b !== void 0 ? _b : 'Other';
+    var styles = React.useMemo(function () {
+        index$1.applyCheckableInputStyles(element, responsiveStyles);
+        applyRadioGroupStyles(element, responsiveStyles);
+        responsiveStyles.addTargets('row-container');
+        responsiveStyles.apply('row-container', 'row_separation', function (a) {
+            return { gap: "".concat(a || 5, "px") };
+        });
+        responsiveStyles.apply('row-container', 'option_direction', function (a) {
+            return { flexDirection: a || 'column' };
+        });
+        return responsiveStyles;
+    }, [responsiveStyles]);
+    var labels = servar.metadata.option_labels;
+    var tooltips = (_c = servar.metadata.option_tooltips) !== null && _c !== void 0 ? _c : [];
+    var options;
+    if (shouldSalesforceSync) {
+        options = dynamicOptions.map(function (option) { return ({
+            value: option.value,
+            label: option.label
+        }); });
+    }
+    else if (repeatIndex !== null &&
+        servar.metadata.repeat_options !== undefined &&
+        servar.metadata.repeat_options[repeatIndex] !== undefined) {
+        options = servar.metadata.repeat_options[repeatIndex];
+    }
+    else {
+        options = servar.metadata.options.map(function (opt, index) { return ({
+            value: opt,
+            label: labels && labels[index] ? labels[index] : opt,
+            tooltip: tooltips && tooltips[index] ? tooltips[index] : ''
+        }); });
+    }
+    return (index.jsxs("div", index.__assign({ ref: containerRef, css: index.__assign(index.__assign({ width: '100%', height: '100%' }, responsiveStyles.getTarget('fc')), { position: 'relative' }) }, elementProps, { children: [children, fieldLabel, index.jsxs("div", index.__assign({ css: index.__assign({ display: 'flex', flexWrap: 'wrap', width: '100%' }, styles.getTarget('row-container')) }, { children: [options.map(function (option, i) {
+                        var _a, _b, _c;
+                        var value = (_a = option.value) !== null && _a !== void 0 ? _a : option;
+                        var label = (_b = option.label) !== null && _b !== void 0 ? _b : option;
+                        var tooltip = (_c = option.tooltip) !== null && _c !== void 0 ? _c : '';
+                        return (index.jsxs("div", index.__assign({ css: {
+                                display: 'flex'
+                            } }, { children: [index.jsxs("label", index.__assign({ style: { display: 'contents' } }, { children: [index.jsx("input", { type: 'radio', id: "".concat(servar.key, "-").concat(i), name: repeatIndex !== null
+                                                ? "".concat(servar.key, "-").concat(repeatIndex)
+                                                : servar.key, checked: fieldVal === value, required: required, disabled: disabled || loadingDynamicOptions, onChange: onChange, onFocus: index.iosScrollOnFocus, "aria-label": element.properties.aria_label, value: value, style: {
+                                                padding: 0,
+                                                lineHeight: 'normal'
+                                            }, css: index.__assign(index.__assign(index.__assign(index.__assign({}, index$1.composeCheckableInputStyle(styles, disabled, true)), styles.getTarget('radioGroup')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }) }), index.jsx("span", index.__assign({ css: index.__assign({ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, styles.getTarget('checkboxLabel')) }, { children: label }))] })), index.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-").concat(value), text: tooltip, responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat })] }), "".concat(servar.key, "-").concat(i)));
+                    }), servar.metadata.other && (index.jsxs("div", index.__assign({ style: { display: 'flex' } }, { children: [index.jsx("input", { type: 'radio', id: "".concat(servar.key, "-"), name: repeatIndex !== null
+                                    ? "".concat(servar.key, "-").concat(repeatIndex)
+                                    : servar.key, value: otherVal || '', checked: otherChecked, disabled: disabled || loadingDynamicOptions, onChange: function (e) {
+                                    var _a;
+                                    setOtherSelect(index.__assign(index.__assign({}, otherSelect), (_a = {}, _a[servar.key] = true, _a)));
+                                    onChange(e);
+                                }, onFocus: index.iosScrollOnFocus, style: {
+                                    padding: 0,
+                                    lineHeight: 'normal'
+                                }, css: index.__assign(index.__assign(index.__assign({}, index$1.composeCheckableInputStyle(styles, disabled, true)), styles.getTarget('radioGroup')), (disabled ? responsiveStyles.getTarget('disabled') : {})) }, "".concat(servar.key, "-")), index.jsx("label", index.__assign({ htmlFor: "".concat(servar.key, "-"), css: styles.getTarget('checkboxLabel') }, { children: otherLabel })), index.jsx(FormControl.FormControl, { type: 'text', 
+                                // Paired with flex grow, will not expand parent width
+                                htmlSize: 1, css: index.__assign(index.__assign(index.__assign(index.__assign({ marginLeft: '5px' }, index.resetStyles), { paddingLeft: '0.4rem', flexGrow: 1 }), responsiveStyles.getTarget('field')), (otherTextDisabled || loadingDynamicOptions
+                                    ? responsiveStyles.getTarget('disabled')
+                                    : {})), id: servar.key, value: otherVal || '', onChange: onOtherChange, onKeyDown: function (e) {
+                                    if (e.key === 'Enter')
+                                        onEnter(e);
+                                }, maxLength: servar.max_length, minLength: servar.min_length, required: otherChecked, disabled: otherTextDisabled || loadingDynamicOptions }), index.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-"), text: servar.metadata.other_tooltip, responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat })] })))] }))] })));
+}
+
+exports.default = RadioButtonGroupField;