@feathery/react 2.10.3 → 2.11.0

package/dist/cjs/fthry_index.gNcgXpsa.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var index = require('./fthry_index.DfayElGY.js');
+var React = require('react');
+var styles = require('./fthry_styles.EGpWXoMs.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('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 = index.__read(React.useState(fieldVal), 2), internalValue = _j[0], setInternalValue = _j[1];
+    React.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 (index.jsxs("div", index.__assign({ css: index.__assign(index.__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, index.jsx(styles.SliderStyles, { customStyles: (_b = {},
+                    _b['.rc-slider'.repeat(2)] = index.__assign({ width: 'calc(100% - 8px)', userSelect: 'none' }, responsiveStyles.getTarget('field')),
+                    _b['.rc-slider-handle'.repeat(2)] = index.__assign(index.__assign({ opacity: 1 }, responsiveStyles.getTarget('handle')), { transitionProperty: 'color, background-color, border-color !important', '&:hover': index.hoverStylesGuard(responsiveStyles.getTarget('hover')) }),
+                    // Override default css that repeats 3 times
+                    _b['.rc-slider-handle-dragging'.repeat(4)] = index.__assign({ boxShadow: 'none' }, responsiveStyles.getTarget('active')),
+                    _b['div.rc-slider-track'] = responsiveStyles.getTarget('track'),
+                    _b) }), index.jsx("div", index.__assign({ css: { width: '100%', display: 'flex', justifyContent: 'center' } }, { children: index.jsx(styles.Slider, { value: internalValue, min: minVal, max: maxVal, step: stepSize, reverse: rightToLeft, onChange: function (val) {
+                        setInternalValue(val);
+                        onChange(val);
+                    }, "aria-label": element.properties.aria_label }) })), index.jsxs("div", index.__assign({ css: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    position: 'relative'
+                } }, { children: [index.jsx("span", { children: minLabel }), index.jsx("span", index.__assign({ css: { opacity: 0, transition: '0.2s ease opacity 0.3s' }, className: 'current-value' }, { children: internalValue })), index.jsx("span", { children: maxLabel })] }))] })));
+}
+
+exports.default = SliderField;

package/dist/cjs/fthry_index.hN9N-F0_.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var index = require('./fthry_index.DfayElGY.js');
+var React = require('react');
+var FormControl = require('./fthry_FormControl.BlJZjs35.js');
+var index$1 = require('./fthry_index.DivS5VJj.js');
+var InlineTooltip = require('./fthry_InlineTooltip.BkttK4lB.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.DFczx5s3.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+require('./fthry_Overlay.OLX1E5Mx.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;