@feathery/react 2.10.3 → 2.10.4

package/dist/cjs/fthry_index.B2hMamho.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var index = require('./fthry_index.CsZ4a-ul.js');
+var React = require('react');
+var InlineTooltip = require('./fthry_InlineTooltip.BmRAwfTr.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.CkHCvyty.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+require('./fthry_Overlay.Cu-jPCI2.js');
+
+function ButtonGroupField(_a) {
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, inlineError = _a.inlineError, _b = _a.fieldVal, fieldVal = _b === void 0 ? null : _b, _c = _a.repeatIndex, repeatIndex = _c === void 0 ? null : _c, editMode = _a.editMode, _d = _a.onClick, onClick = _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 containerRef = React.useRef(null);
+    var servar = element.servar;
+    var _g = useSalesforceSync.useSalesforceSync(servar.metadata.salesforce_sync, editMode), dynamicOptions = _g.dynamicOptions, loadingDynamicOptions = _g.loadingDynamicOptions, shouldSalesforceSync = _g.shouldSalesforceSync;
+    var selectedOptMap = React.useMemo(function () {
+        return Array.isArray(fieldVal)
+            ? fieldVal.reduce(function (map, selected) {
+                map[selected] = true;
+                return map;
+            }, {})
+            : {};
+    }, [fieldVal]);
+    var _h = index.useBorder({
+        element: element,
+        error: inlineError,
+        breakpoint: responsiveStyles.getMobileBreakpoint()
+    }), borderStyles = _h.borderStyles, customBorder = _h.customBorder;
+    var labels = servar.metadata.option_labels;
+    var tooltips = servar.metadata.option_tooltips;
+    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.jsxs("div", index.__assign({ ref: containerRef, css: index.__assign({ position: 'relative', width: '100%', height: '100%', pointerEvents: editMode || disabled || loadingDynamicOptions ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, { children: [children, fieldLabel, index.jsxs("div", index.__assign({ css: index.__assign({ display: 'flex', flexWrap: 'wrap', width: '100%' }, responsiveStyles.getTarget('bc')) }, elementProps, { children: [options.map(function (option, index$1) {
+                        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 imageUrl = option.image
+                            ? option.image
+                            : servar.metadata.option_images[index$1];
+                        var tooltip = (_c = option.tooltip) !== null && _c !== void 0 ? _c : '';
+                        return (index.jsxs("div", index.__assign({ onClick: function () {
+                                if (!editMode && !disabled && !loadingDynamicOptions) {
+                                    onClick(value);
+                                }
+                            }, css: index.__assign(index.__assign({ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', boxSizing: 'border-box', cursor: 'pointer' }, responsiveStyles.getTarget('field')), { '&:hover': index.hoverStylesGuard(editMode || disabled || loadingDynamicOptions
+                                    ? {}
+                                    : index.__assign(index.__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)), '&&': selectedOptMap[value]
+                                    ? index.__assign(index.__assign({}, responsiveStyles.getTarget('active')), borderStyles.active) : {} }) }, { children: [customBorder, imageUrl && (index.jsx("img", { src: imageUrl, css: index.__assign(index.__assign({}, index.imgMaxSizeStyles), responsiveStyles.getTargets('img')) })), label && (index.jsx("div", index.__assign({ css: index.__assign(index.__assign({ display: 'flex', maxWidth: '100%' }, responsiveStyles.getTargets('label')), index.noTextSelectStyles) }, { children: label }))), tooltip && (index.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-").concat(label), text: tooltip, responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat }))] }), "".concat(servar.key, "-").concat(index$1)));
+                    }), index.jsx(index.ErrorInput, { id: servar.key, name: servar.key, "aria-label": element.properties.aria_label })] }))] })));
+}
+
+exports.default = ButtonGroupField;

package/dist/cjs/fthry_index.B39vKi8b.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var index$1 = require('./fthry_index.CsZ4a-ul.js');
+var React = require('react');
+var FormControl = require('./fthry_FormControl.D054LpX5.js');
+var index = require('./fthry_index.C2ghok4x.js');
+var InlineTooltip = require('./fthry_InlineTooltip.BmRAwfTr.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.CkHCvyty.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+require('./fthry_Overlay.Cu-jPCI2.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;