npm - @feathery/react - Versions diffs - 2.10.3 → 2.10.4 - Mend

@feathery/react 2.10.3 → 2.10.4

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 (1337) hide show

package/dist/cjs/fthry_index.De7Fcoju.js ADDED Viewed

@@ -0,0 +1,215 @@
+'use strict';
+var index$1 = require('./fthry_index.CsZ4a-ul.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/dist/cjs/fthry_index.DqMxHy5c.js ADDED Viewed

@@ -0,0 +1,94 @@
+'use strict';
+var index = require('./fthry_index.CsZ4a-ul.js');
+var React = require('react');
+var Overlay = require('./fthry_Overlay.Cu-jPCI2.js');
+var index$1 = require('./fthry_index.C2ghok4x.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;