npm - @feathery/react - Versions diffs - 2.12.3-pr-1522.4bcc507.0 → 2.14.0 - Mend

@feathery/react 2.12.3-pr-1522.4bcc507.0 → 2.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1708) hide show

package/cjs/fthry_index.BWlL6Yer.js ADDED Viewed

@@ -0,0 +1,215 @@
+'use strict';
+var index$1 = require('./fthry_index.YHxFZskW.js');
+var React = require('react');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+var Placeholder = function () { return (index$1.jsx("div", index$1.__assign({ style: {
+        padding: '16px',
+        border: '2px dashed #d1d5db',
+        borderRadius: '4px',
+        textAlign: 'center'
+    } }, { children: index$1.jsxs("div", index$1.__assign({ style: { color: '#4b5563' } }, { children: [index$1.jsx("div", index$1.__assign({ style: { fontSize: '14px' } }, { children: "Custom Component" })), index$1.jsx("div", index$1.__assign({ style: { fontSize: '12px', marginTop: '4px' } }, { children: "No code provided" }))] })) }))); };
+var Loading = function () { return (index$1.jsx("div", index$1.__assign({ style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        padding: '8px',
+        backgroundColor: '#dbeafe',
+        color: '#2563eb',
+        fontSize: '14px'
+    } }, { children: "Loading..." }))); };
+var Error = function (_a) {
+    var error = _a.error;
+    return (index$1.jsxs("div", index$1.__assign({ style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            padding: '8px',
+            backgroundColor: '#fee2e2',
+            color: '#dc2626',
+            fontSize: '14px'
+        } }, { children: ["Error: ", error] })));
+};
+var Status = { Placeholder: Placeholder, Loading: Loading, Error: Error };
+// Extract package names and URLs imported in the custom component
+var extractImports = function (code) {
+    var lines = code.split('\n');
+    var imports = new Set();
+    lines.forEach(function (line) {
+        line = line.trim();
+        if (line.startsWith('import')) {
+            var match = line.match(/from\s+['"]([^'"]+)['"]/);
+            if (match && match[1] !== 'react') {
+                imports.add(match[1]);
+            }
+        }
+    });
+    return Array.from(imports);
+};
+var isValidUrl = function (str) {
+    try {
+        // eslint-disable-next-line no-new
+        new URL(str);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+// Build an importmap script based on the list of packages imported
+var createImportMap = function (imports) {
+    var importEntries = imports.map(function (importPath) {
+        // Already a full URL, import directly
+        if (isValidUrl(importPath)) {
+            return "\"".concat(importPath, "\": \"").concat(importPath, "\"");
+        }
+        // Default to esm.sh for npm packages
+        return "\"".concat(importPath, "\": \"https://esm.sh/").concat(importPath, "/?external=react\"");
+    });
+    return "{\n  \"imports\": {\n    \"react\": \"https://esm.sh/react@18.2.0\",\n    \"react-dom\": \"https://esm.sh/react-dom@18.2.0\",\n    \"react-dom/client\": \"https://esm.sh/react-dom@18.2.0/client\",\n    \"react/jsx-runtime\": \"https://esm.sh/react@18.2.0/jsx-runtime\"".concat(imports.length ? ',' : '', "\n    ").concat(importEntries.join(',\n'), "\n  }\n}");
+};
+var createTemplate = function (code, initialValue, elementId) { return "\n<!DOCTYPE html>\n<html>\n  <head>\n    <script src=\"https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      \n      body {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n        line-height: 1.5;\n        overflow: hidden;\n      }\n\n      #root {\n        min-height: 100vh;\n        width: 100%;\n      }\n    </style>\n    <script type=\"importmap\">\n      ".concat(createImportMap(extractImports(code)), "\n    </script>\n    <script type=\"module\">\n      import React from 'react';\n      import { createRoot } from 'react-dom/client';\n\n      // Store the elementId for use in postMessage\n      window.elementId = '").concat(elementId, "';\n\n      (async () => {\n        try {\n          const transformedCode = Babel.transform(\n            `").concat(code, "`,\n            {\n              presets: ['react'],\n              filename: 'dynamic.jsx'\n            }\n          ).code;\n\n          // Create a blob URL for the transformed code\n          const blob = new Blob([transformedCode], { type: 'text/javascript' });\n          const moduleUrl = URL.createObjectURL(blob);\n\n          // Import the component\n          const { default: UserComponent } = await import(moduleUrl);\n\n          // Set up the root and store it\n          const container = document.getElementById('root');\n          const root = createRoot(container);\n          window.rootRef = root;\n\n          window.parent.postMessage({ \n            type: 'LOADING_COMPLETE',\n            elementId: window.elementId\n          }, '*');\n\n          // Handle resize\n          const resizeObserver = new ResizeObserver(entries => {\n            const height = entries[0].contentRect.height;\n            window.parent.postMessage({ \n              type: 'resize', \n              height,\n              elementId: window.elementId\n            }, '*');\n          });\n          \n          resizeObserver.observe(container);\n\n          // Store references for updates\n          window.React = React;\n          window.UserComponent = UserComponent;\n        } catch (err) {\n          console.error('Error:', err);\n          window.parent.postMessage({ \n            type: 'error',\n            error: `${err.name}: ${err.message}`,\n            elementId: window.elementId\n          }, '*');\n        }\n      })();\n    </script>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>\n"); };
+function useCustomComponentIframe(_a) {
+    var _this = this;
+    var componentCode = _a.componentCode, elementId = _a.elementId, value = _a.value, onChange = _a.onChange, customProps = _a.customProps;
+    var iframeRef = React.useRef(null);
+    var rootRef = React.useRef(null);
+    var _b = index$1.__read(React.useState(null), 2), error = _b[0], setError = _b[1];
+    var _c = index$1.__read(React.useState(true), 2), loading = _c[0], setLoading = _c[1];
+    var renderComponent = function (overrideLoading) {
+        var _a, _b;
+        if (overrideLoading === void 0) { overrideLoading = false; }
+        var iframe = iframeRef.current;
+        if (!iframe || !rootRef.current || (loading && !overrideLoading))
+            return;
+        var root = rootRef.current;
+        var React = (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.React;
+        var UserComponent = (_b = iframe.contentWindow) === null || _b === void 0 ? void 0 : _b.UserComponent;
+        if (React && UserComponent) {
+            var handleChange = function (newValue) {
+                var _a;
+                (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.parent.postMessage({
+                    type: 'valueChange',
+                    value: newValue,
+                    elementId: elementId
+                }, index$1.featheryWindow().location.origin);
+            };
+            root.render(React.createElement(React.StrictMode, null, React.createElement(UserComponent, index$1.__assign({ value: value, onChange: handleChange }, customProps))));
+        }
+    };
+    // Create iframe whenever code changes
+    React.useEffect(function () {
+        var setupIframe = function () { return index$1.__awaiter(_this, void 0, void 0, function () {
+            var iframe, template, handleMessage_1, error_1;
+            return index$1.__generator(this, function (_a) {
+                iframe = iframeRef.current;
+                if (!iframe)
+                    return [2 /*return*/];
+                try {
+                    setLoading(true);
+                    template = createTemplate(componentCode, value, elementId);
+                    handleMessage_1 = function (event) {
+                        var _a, _b, _c, _d, _e;
+                        // Verify the message is intended for this element
+                        if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.elementId) !== elementId)
+                            return;
+                        if (event.data.type === 'LOADING_COMPLETE') {
+                            setLoading(false);
+                            setError(null);
+                            rootRef.current = (_b = iframe.contentWindow) === null || _b === void 0 ? void 0 : _b.rootRef;
+                            renderComponent(true);
+                        }
+                        else if ((_c = event.data) === null || _c === void 0 ? void 0 : _c.error) {
+                            setError(event.data.error);
+                            setLoading(false);
+                        }
+                        else if (((_d = event.data) === null || _d === void 0 ? void 0 : _d.type) === 'resize' && iframe) {
+                            iframe.style.height = "".concat(event.data.height, "px");
+                        }
+                        else if (((_e = event.data) === null || _e === void 0 ? void 0 : _e.type) === 'valueChange') {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(event.data.value);
+                        }
+                    };
+                    index$1.featheryWindow().addEventListener('message', handleMessage_1);
+                    iframe.srcdoc = template;
+                    return [2 /*return*/, function () {
+                            index$1.featheryWindow().removeEventListener('message', handleMessage_1);
+                        }];
+                }
+                catch (err) {
+                    error_1 = err;
+                    setError(error_1.message);
+                    setLoading(false);
+                }
+                return [2 /*return*/];
+            });
+        }); };
+        setupIframe();
+    }, [componentCode]);
+    // Update component props when value changes
+    React.useEffect(function () {
+        renderComponent();
+    }, [value, loading, customProps]);
+    return {
+        iframeRef: iframeRef,
+        error: error,
+        loading: loading
+    };
+}
+var CustomField = function (_a) {
+    var _b;
+    var element = _a.element, _c = _a.elementProps, elementProps = _c === void 0 ? {} : _c, responsiveStyles = _a.responsiveStyles, onChange = _a.onChange, rawValue = _a.rawValue, required = _a.required, disabled = _a.disabled, fieldStyles = _a.fieldStyles, editMode = _a.editMode, rightToLeft = _a.rightToLeft, index = _a.index;
+    var componentCode = element.servar.metadata.code;
+    var isCodeEmpty = !componentCode || componentCode.trim() === '';
+    var showPlaceholder = isCodeEmpty && editMode;
+    var customFieldProps = React.useMemo(function () {
+        var _a;
+        return ({
+            fieldProperties: {
+                description: element.servar.name,
+                required: required,
+                disabled: disabled,
+                custom: ((_a = element.servar.metadata) === null || _a === void 0 ? void 0 : _a.custom) || {},
+                aria_label: element.properties.aria_label
+            },
+            fieldStyles: fieldStyles || {},
+            formContext: {
+                rightToLeft: rightToLeft || false,
+                editMode: editMode || false
+            }
+        });
+    }, [
+        required,
+        disabled,
+        fieldStyles,
+        rightToLeft,
+        editMode,
+        (_b = element.servar.metadata) === null || _b === void 0 ? void 0 : _b.custom
+    ]);
+    var _d = useCustomComponentIframe({
+        componentCode: element.servar.metadata.code,
+        elementId: index != null ? "".concat(element.id, "[").concat(index, "]") : element.id,
+        value: rawValue,
+        onChange: onChange,
+        customProps: customFieldProps
+    }), iframeRef = _d.iframeRef, error = _d.error, loading = _d.loading;
+    return (index$1.jsxs("div", index$1.__assign({ css: index$1.__assign({ maxWidth: '100%', width: '100%', height: 'auto', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles === null || responsiveStyles === void 0 ? void 0 : responsiveStyles.getTarget('fc')) }, elementProps, { children: [showPlaceholder ? (index$1.jsx(Status.Placeholder, {})) : (index$1.jsxs(index$1.Fragment, { children: [error && index$1.jsx(Status.Error, { error: error }), loading && index$1.jsx(Status.Loading, {}), index$1.jsx("iframe", { ref: iframeRef, sandbox: 'allow-scripts allow-same-origin', style: {
+                            width: '100%',
+                            border: 'none',
+                            backgroundColor: 'transparent',
+                            overflow: 'hidden',
+                            display: 'block'
+                        } })] })), index$1.jsx(index$1.ErrorInput, { id: element.servar.key, name: element.servar.key, "aria-label": element.properties.aria_label })] })));
+};
+var index = React.memo(CustomField);
+exports.default = index;

package/cjs/fthry_index.BlqRmYU3.js ADDED Viewed

@@ -0,0 +1,96 @@
+'use strict';
+var index$1 = require('./fthry_index.YHxFZskW.js');
+var React = require('react');
+var FormControl = require('./fthry_FormControl.BwXT0ep8.js');
+var index = require('./fthry_index.CIRAsV1y.js');
+var InlineTooltip = require('./fthry_InlineTooltip.BdhCa_rK.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.PzKJwKNh.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+require('./fthry_Overlay.CkaxO8d5.js');
+var applyCheckboxGroupStyles = function (element, responsiveStyles) {
+    responsiveStyles.addTargets('checkboxGroup');
+    index.applyHeightWidthMarginByFontSize(responsiveStyles, 'checkboxGroup');
+    return responsiveStyles;
+};
+function CheckboxGroupField(_a) {
+    var _b, _c;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _d = _a.fieldVal, fieldVal = _d === void 0 ? [] : _d, _e = _a.otherVal, otherVal = _e === void 0 ? '' : _e, _f = _a.repeatIndex, repeatIndex = _f === void 0 ? null : _f, editMode = _a.editMode, _g = _a.onChange, onChange = _g === void 0 ? function () { } : _g, _h = _a.onOtherChange, onOtherChange = _h === void 0 ? function () { } : _h, _j = _a.onEnter, onEnter = _j === void 0 ? function () { } : _j, _k = _a.elementProps, elementProps = _k === void 0 ? {} : _k, _l = _a.disabled, disabled = _l === void 0 ? false : _l, children = _a.children;
+    var servar = element.servar;
+    var _m = useSalesforceSync.useSalesforceSync(servar.metadata.salesforce_sync, editMode), dynamicOptions = _m.dynamicOptions, loadingDynamicOptions = _m.loadingDynamicOptions, shouldSalesforceSync = _m.shouldSalesforceSync;
+    var otherChecked = fieldVal.includes(otherVal);
+    var otherLabel = (_b = servar.metadata.other_label) !== null && _b !== void 0 ? _b : 'Other';
+    var containerRef = React.useRef(null);
+    var styles = React.useMemo(function () {
+        index.applyCheckableInputStyles(element, responsiveStyles);
+        applyCheckboxGroupStyles(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 isOptionDisabled = function (checked) {
+        return (disabled ||
+            loadingDynamicOptions ||
+            (servar.max_length && servar.max_length <= fieldVal.length && !checked));
+    };
+    var otherDisabled = isOptionDisabled(otherChecked);
+    var otherTextDisabled = !otherChecked || otherDisabled;
+    var options;
+    if (shouldSalesforceSync) {
+        options = dynamicOptions.map(function (option) { return ({
+            value: option.value,
+            label: option.label,
+            tooltip: ''
+        }); });
+    }
+    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$1.jsxs("div", index$1.__assign({ ref: containerRef, css: index$1.__assign({ position: 'relative', width: '100%' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, index$1.jsxs("div", index$1.__assign({ css: index$1.__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 checked = fieldVal.includes(value);
+                        var optionDisabled = isOptionDisabled(checked);
+                        return (index$1.jsxs("div", index$1.__assign({ css: {
+                                display: 'flex',
+                                pointerEvents: optionDisabled ? 'none' : 'auto'
+                            } }, { children: [index$1.jsxs("label", index$1.__assign({ style: { display: 'contents' } }, { children: [index$1.jsx("input", { type: 'checkbox', id: "".concat(servar.key, "-").concat(i), name: value, checked: checked, onChange: onChange, onFocus: index$1.iosScrollOnFocus, style: { padding: 0, lineHeight: 'normal' }, css: index$1.__assign(index$1.__assign(index$1.__assign(index$1.__assign({}, index.composeCheckableInputStyle(styles, optionDisabled)), styles.getTarget('checkboxGroup')), (optionDisabled
+                                                ? responsiveStyles.getTarget('disabled')
+                                                : {})), { '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }), disabled: optionDisabled, "aria-label": element.properties.aria_label }), index$1.jsx("span", index$1.__assign({ css: index$1.__assign({ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, styles.getTarget('checkboxLabel')) }, { children: label }))] })), index$1.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-").concat(value), text: (_c = option.tooltip) !== null && _c !== void 0 ? _c : '', responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat })] }), "".concat(servar.key, "-").concat(i)));
+                    }), servar.metadata.other && (index$1.jsxs("div", index$1.__assign({ style: { display: 'flex' } }, { children: [index$1.jsx("input", { type: 'checkbox', id: "".concat(servar.key, "-"), name: otherVal, checked: otherChecked, disabled: otherDisabled, onChange: onChange, onFocus: index$1.iosScrollOnFocus, style: {
+                                    padding: 0,
+                                    lineHeight: 'normal'
+                                }, css: index$1.__assign(index$1.__assign(index$1.__assign(index$1.__assign({}, index.composeCheckableInputStyle(styles, otherDisabled)), styles.getTarget('checkboxGroup')), (otherDisabled
+                                    ? responsiveStyles.getTarget('disabled')
+                                    : {})), { '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }) }, "".concat(servar.key, "-")), index$1.jsx("label", index$1.__assign({ htmlFor: "".concat(servar.key, "-"), css: styles.getTarget('checkboxLabel') }, { children: otherLabel })), index$1.jsx(FormControl.FormControl, { type: 'text',
+                                // Paired with flex grow, will not expand parent width
+                                htmlSize: 1, css: index$1.__assign(index$1.__assign(index$1.__assign(index$1.__assign({ marginLeft: '5px' }, index$1.resetStyles), { paddingLeft: '0.4rem', flexGrow: 1 }), responsiveStyles.getTarget('field')), (otherTextDisabled
+                                    ? responsiveStyles.getTarget('disabled')
+                                    : {})), id: servar.key, value: otherVal || '', onChange: onOtherChange, onKeyDown: function (e) {
+                                    if (e.key === 'Enter')
+                                        onEnter(e);
+                                }, required: otherChecked, disabled: otherTextDisabled }), index$1.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-"), text: servar.metadata.other_tooltip, responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat })] })))] }))] })));
+}
+exports.default = CheckboxGroupField;

package/cjs/fthry_index.Brf3d6gi.js ADDED Viewed

@@ -0,0 +1,97 @@
+'use strict';
+var index = require('./fthry_index.YHxFZskW.js');
+var React = require('react');
+var FormControl = require('./fthry_FormControl.BwXT0ep8.js');
+var index$1 = require('./fthry_index.CIRAsV1y.js');
+var InlineTooltip = require('./fthry_InlineTooltip.BdhCa_rK.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.PzKJwKNh.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+require('./fthry_Overlay.CkaxO8d5.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;

package/cjs/fthry_index.C1fh-rBQ.js ADDED Viewed

@@ -0,0 +1,130 @@
+'use strict';
+var index$1 = require('./fthry_index.YHxFZskW.js');
+var React = require('react');
+var Placeholder = require('./fthry_Placeholder.Jcsn0I77.js');
+var InlineTooltip = require('./fthry_InlineTooltip.BdhCa_rK.js');
+var Overlay = require('./fthry_Overlay.CkaxO8d5.js');
+var useElementSize = require('./fthry_useElementSize.H_jyVKqM.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;