@feathery/react 2.13.0 → 2.15.0

package/dist/cjs/fthry_index.ouxRei7V.js

@@ -1,94 +0,0 @@
-'use strict';
-
-var index = require('./fthry_index.BWmJjQzl.js');
-var React = require('react');
-var Overlay = require('./fthry_Overlay.DZfU9dMV.js');
-var index$1 = require('./fthry_index.Bb3vfxzC.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/dist/cjs/fthry_index.uqQ_Cltk.js

@@ -1,96 +0,0 @@
-'use strict';
-
-var index$1 = require('./fthry_index.BWmJjQzl.js');
-var React = require('react');
-var FormControl = require('./fthry_FormControl.BO9bjqlX.js');
-var index = require('./fthry_index.Bb3vfxzC.js');
-var InlineTooltip = require('./fthry_InlineTooltip.B3M2NtLx.js');
-var useSalesforceSync = require('./fthry_useSalesforceSync.DbLXWchO.js');
-require('react/jsx-runtime');
-require('react-dom/client');
-require('jszip');
-require('react-dom');
-require('./fthry_Overlay.DZfU9dMV.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;