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

package/dist/fthry_index.CxH24rcl.js

@@ -0,0 +1,95 @@
+import { _ as __read, j as jsxs, a as __assign, b as jsx, i as iosScrollOnFocus, r as resetStyles } from './fthry_index.CdIRvNp8.js';
+import { useRef, useState, useMemo } from 'react';
+import { F as FormControl } from './fthry_FormControl.CrSvLSA7.js';
+import { applyCheckableInputStyles, composeCheckableInputStyle, applyHeightWidthMarginByFontSize } from './fthry_index.BpsK3TYO.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.xj-t-582.js';
+import { u as useSalesforceSync } from './fthry_useSalesforceSync.wEr6a7_E.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+import 'react-dom';
+import './fthry_Overlay.CJFSLbLE.js';
+
+var applyRadioGroupStyles = function (element, responsiveStyles) {
+    responsiveStyles.addTargets('radioGroup');
+    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 = useRef(null);
+    var _o = useSalesforceSync(servar.metadata.salesforce_sync, editMode), dynamicOptions = _o.dynamicOptions, loadingDynamicOptions = _o.loadingDynamicOptions, shouldSalesforceSync = _o.shouldSalesforceSync;
+    var _p = __read(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 = useMemo(function () {
+        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 (jsxs("div", __assign({ ref: containerRef, css: __assign(__assign({ width: '100%', height: '100%' }, responsiveStyles.getTarget('fc')), { position: 'relative' }) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ css: __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 (jsxs("div", __assign({ css: {
+                                display: 'flex'
+                            } }, { children: [jsxs("label", __assign({ style: { display: 'contents' } }, { children: [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: iosScrollOnFocus, "aria-label": element.properties.aria_label, value: value, style: {
+                                                padding: 0,
+                                                lineHeight: 'normal'
+                                            }, css: __assign(__assign(__assign(__assign({}, composeCheckableInputStyle(styles, disabled, true)), styles.getTarget('radioGroup')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }) }), jsx("span", __assign({ css: __assign({ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, styles.getTarget('checkboxLabel')) }, { children: label }))] })), jsx(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 && (jsxs("div", __assign({ style: { display: 'flex' } }, { children: [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(__assign(__assign({}, otherSelect), (_a = {}, _a[servar.key] = true, _a)));
+                                    onChange(e);
+                                }, onFocus: iosScrollOnFocus, style: {
+                                    padding: 0,
+                                    lineHeight: 'normal'
+                                }, css: __assign(__assign(__assign({}, composeCheckableInputStyle(styles, disabled, true)), styles.getTarget('radioGroup')), (disabled ? responsiveStyles.getTarget('disabled') : {})) }, "".concat(servar.key, "-")), jsx("label", __assign({ htmlFor: "".concat(servar.key, "-"), css: styles.getTarget('checkboxLabel') }, { children: otherLabel })), jsx(FormControl, { type: 'text', 
+                                // Paired with flex grow, will not expand parent width
+                                htmlSize: 1, css: __assign(__assign(__assign(__assign({ marginLeft: '5px' }, 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 }), jsx(InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-"), text: servar.metadata.other_tooltip, responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat })] })))] }))] })));
+}
+
+export { RadioButtonGroupField as default };

package/dist/fthry_index.CzHuSmWc.js

@@ -0,0 +1,213 @@
+import { b as jsx, a as __assign, j as jsxs, _ as __read, c as __awaiter, d as __generator, l as featheryWindow, m as Fragment, E as ErrorInput } from './fthry_index.CdIRvNp8.js';
+import { useRef, useState, useEffect, memo, useMemo } from 'react';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+import 'react-dom';
+
+var Placeholder = function () { return (jsx("div", __assign({ style: {
+        padding: '16px',
+        border: '2px dashed #d1d5db',
+        borderRadius: '4px',
+        textAlign: 'center'
+    } }, { children: jsxs("div", __assign({ style: { color: '#4b5563' } }, { children: [jsx("div", __assign({ style: { fontSize: '14px' } }, { children: "Custom Component" })), jsx("div", __assign({ style: { fontSize: '12px', marginTop: '4px' } }, { children: "No code provided" }))] })) }))); };
+var Loading = function () { return (jsx("div", __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 (jsxs("div", __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 = useRef(null);
+    var rootRef = useRef(null);
+    var _b = __read(useState(null), 2), error = _b[0], setError = _b[1];
+    var _c = __read(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
+                }, featheryWindow().location.origin);
+            };
+            root.render(React.createElement(React.StrictMode, null, React.createElement(UserComponent, __assign({ value: value, onChange: handleChange }, customProps))));
+        }
+    };
+    // Create iframe whenever code changes
+    useEffect(function () {
+        var setupIframe = function () { return __awaiter(_this, void 0, void 0, function () {
+            var iframe, template, handleMessage_1, error_1;
+            return __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);
+                        }
+                    };
+                    featheryWindow().addEventListener('message', handleMessage_1);
+                    iframe.srcdoc = template;
+                    return [2 /*return*/, function () {
+                            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
+    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 = 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 (jsxs("div", __assign({ css: __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 ? (jsx(Status.Placeholder, {})) : (jsxs(Fragment, { children: [error && jsx(Status.Error, { error: error }), loading && jsx(Status.Loading, {}), jsx("iframe", { ref: iframeRef, sandbox: 'allow-scripts allow-same-origin', style: {
+                            width: '100%',
+                            border: 'none',
+                            backgroundColor: 'transparent',
+                            overflow: 'hidden',
+                            display: 'block'
+                        } })] })), jsx(ErrorInput, { id: element.servar.key, name: element.servar.key, "aria-label": element.properties.aria_label })] })));
+};
+var index = memo(CustomField);
+
+export { index as default };

package/dist/fthry_index.D6sWBKuA.js

@@ -0,0 +1,43 @@
+import { _ as __read, j as jsxs, a as __assign, b as jsx, h as hoverStylesGuard } from './fthry_index.CdIRvNp8.js';
+import { useState, useEffect } from 'react';
+import { S as SliderStyles, a as Slider } from './fthry_styles.C-VyrwW3.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+import 'react-dom';
+
+function SliderField(_a) {
+    var _b;
+    var _c, _d;
+    var element = _a.element, fieldLabel = _a.fieldLabel, responsiveStyles = _a.responsiveStyles, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.fieldVal, fieldVal = _f === void 0 ? 0 : _f, editMode = _a.editMode, rightToLeft = _a.rightToLeft, _g = _a.onChange, onChange = _g === void 0 ? function () { } : _g, _h = _a.elementProps, elementProps = _h === void 0 ? {} : _h, children = _a.children;
+    var _j = __read(useState(fieldVal), 2), internalValue = _j[0], setInternalValue = _j[1];
+    useEffect(function () {
+        if (fieldVal !== internalValue)
+            setInternalValue(fieldVal);
+    }, [fieldVal]);
+    var servar = element.servar;
+    var minVal = (_c = servar.min_length) !== null && _c !== void 0 ? _c : 0;
+    var maxVal = (_d = servar.max_length) !== null && _d !== void 0 ? _d : 100;
+    var minLabel = servar.metadata.min_val_label || minVal;
+    var maxLabel = servar.metadata.max_val_label || maxVal;
+    var stepSize = servar.metadata.step_size || 1;
+    return (jsxs("div", __assign({ css: __assign(__assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode || disabled ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')), { '&:hover .current-value': {
+                opacity: 1,
+                transitionDelay: '0ms'
+            } }) }, elementProps, { children: [children, fieldLabel, jsx(SliderStyles, { customStyles: (_b = {},
+                    _b['.rc-slider'.repeat(2)] = __assign({ width: 'calc(100% - 8px)', userSelect: 'none' }, responsiveStyles.getTarget('field')),
+                    _b['.rc-slider-handle'.repeat(2)] = __assign(__assign({ opacity: 1 }, responsiveStyles.getTarget('handle')), { transitionProperty: 'color, background-color, border-color !important', '&:hover': hoverStylesGuard(responsiveStyles.getTarget('hover')) }),
+                    // Override default css that repeats 3 times
+                    _b['.rc-slider-handle-dragging'.repeat(4)] = __assign({ boxShadow: 'none' }, responsiveStyles.getTarget('active')),
+                    _b['div.rc-slider-track'] = responsiveStyles.getTarget('track'),
+                    _b) }), jsx("div", __assign({ css: { width: '100%', display: 'flex', justifyContent: 'center' } }, { children: jsx(Slider, { value: internalValue, min: minVal, max: maxVal, step: stepSize, reverse: rightToLeft, onChange: function (val) {
+                        setInternalValue(val);
+                        onChange(val);
+                    }, "aria-label": element.properties.aria_label }) })), jsxs("div", __assign({ css: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    position: 'relative'
+                } }, { children: [jsx("span", { children: minLabel }), jsx("span", __assign({ css: { opacity: 0, transition: '0.2s ease opacity 0.3s' }, className: 'current-value' }, { children: internalValue })), jsx("span", { children: maxLabel })] }))] })));
+}
+
+export { SliderField as default };