@feathery/react 2.6.8 → 2.8.0

package/dist/fthry_index.BrWMLV_p.js

@@ -0,0 +1,35 @@
+import { _ as __read, u as useBorder, j as jsxs, a as __assign, h as hoverStylesGuard, b as jsx, r as resetStyles } from './fthry_index.F6BXSHA5.js';
+import { memo, useState, useRef } from 'react';
+import { P as Placeholder } from './fthry_Placeholder.DLtEoCLC.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.AGcWhuhV.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'stream';
+import 'events';
+import 'buffer';
+import 'util';
+import 'react-dom';
+import './fthry_Overlay.X0blINpo.js';
+
+function TextArea(_a) {
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _b = _a.elementProps, elementProps = _b === void 0 ? {} : _b, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, editMode = _a.editMode, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.setRef, setRef = _f === void 0 ? function () { } : _f, _g = _a.rawValue, rawValue = _g === void 0 ? '' : _g, inlineError = _a.inlineError, _h = _a.repeatIndex, repeatIndex = _h === void 0 ? null : _h, children = _a.children;
+    var _j = __read(useState(false), 2), focused = _j[0], setFocused = _j[1];
+    var containerRef = useRef(null);
+    var _k = useBorder({
+        element: element,
+        error: inlineError,
+        breakpoint: responsiveStyles.getMobileBreakpoint()
+    }), borderStyles = _k.borderStyles, customBorder = _k.customBorder;
+    var servar = element.servar;
+    return (jsxs("div", __assign({ ref: containerRef, css: __assign({ maxWidth: '100%', position: 'relative', pointerEvents: editMode ? 'none' : 'auto', width: '100%', height: '100%' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ css: __assign(__assign(__assign({ position: 'relative', width: '100%', 
+                    // Prevent placeholder overflow
+                    overflowX: 'clip' }, responsiveStyles.getTarget('sub-fc')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:hover': hoverStylesGuard(disabled
+                        ? {}
+                        : __assign(__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)), '&&': focused
+                        ? __assign(__assign({}, responsiveStyles.getTarget('active')), borderStyles.active) : {} }) }, { children: [customBorder, jsx("textarea", { id: servar.key, css: __assign(__assign(__assign(__assign({ position: 'relative', height: '100%', width: '100%', border: 'none', margin: 0, backgroundColor: 'transparent', resize: 'none' }, resetStyles), { padding: '0.5rem 0.75rem' }), responsiveStyles.getTarget('field')), (focused || rawValue || !element.properties.placeholder
+                            ? {}
+                            : { color: 'transparent !important' })), "aria-label": element.properties.aria_label, maxLength: servar.max_length || 4096, minLength: servar.min_length, required: required, onChange: onChange, onFocus: function () { return setFocused(true); }, onBlur: function () { return setFocused(false); }, placeholder: '', disabled: disabled, value: rawValue, rows: element.styles.num_rows, ref: setRef }), jsx(Placeholder, { value: rawValue, element: element, responsiveStyles: responsiveStyles, type: 'textarea', repeatIndex: repeatIndex }), jsx(InlineTooltip, { containerRef: containerRef, id: element.id, text: element.properties.tooltipText, responsiveStyles: responsiveStyles, repeat: element.repeat })] }))] })));
+}
+var index = memo(TextArea);
+
+export { index as default };

package/dist/fthry_index.CFbW8L20.js

@@ -0,0 +1,42 @@
+import { b as jsx, a as __assign, _ as __read, j as jsxs, E as ErrorInput } from './fthry_index.F6BXSHA5.js';
+import { useState } from 'react';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'stream';
+import 'events';
+import 'buffer';
+import 'util';
+import 'react-dom';
+
+function RatingStar(props) {
+    return (jsx("svg", __assign({ width: '32', viewBox: '0 0 32 31', fill: '#D9D9D9', xmlns: 'http://www.w3.org/2000/svg' }, props, { children: jsx("path", { d: 'M24.9576 20.3922C24.8671 19.8489 25.0482 19.2875 25.4466 18.9072L31.2598 13.1846C31.6401 12.8224 31.7849 12.3515 31.7668 11.8988C31.7668 11.8263 31.7668 11.7539 31.7487 11.6815C31.6763 11.3555 31.5314 11.0476 31.296 10.8122L31.2055 10.7216C31.1873 10.7126 31.1738 10.699 31.1602 10.6854C31.1466 10.6718 31.133 10.6583 31.1149 10.6492C30.8976 10.4862 30.6259 10.3595 30.3181 10.3232L30.137 10.3051L22.2593 9.16422C21.9514 9.1099 21.6798 8.98313 21.4444 8.80203C21.2633 8.65715 21.1003 8.45795 20.9916 8.24063L17.3878 0.942454C17.098 0.344836 16.5367 0.0188638 15.9571 0.000754181C15.3414 -0.0173554 14.7076 0.290508 14.3816 0.942454L10.7778 8.24063C10.5424 8.7477 10.0534 9.09179 9.51012 9.16422L1.45135 10.3413C0.0569115 10.5406 -0.48639 12.2429 0.509634 13.2208L6.34093 18.9072C6.73936 19.2875 6.92044 19.8489 6.8299 20.3922L5.45356 28.4148C5.43547 28.5595 5.43546 28.6862 5.43546 28.8129C5.47167 29.3018 5.70711 29.7186 6.05118 30.0084C6.54014 30.4068 7.24642 30.5336 7.89837 30.1895L13.0053 27.5093L15.1241 26.4046C15.4139 26.2597 15.7398 26.1873 16.0658 26.2235C16.2831 26.2416 16.5004 26.2959 16.6996 26.4046L16.7358 26.4227L23.527 29.9903L23.8892 30.1895C25.1206 30.8414 26.5694 29.7911 26.3339 28.4148L24.9576 20.3922Z' }) })));
+}
+
+function Heart(props) {
+    return (jsx("svg", __assign({ xmlns: 'http://www.w3.org/2000/svg', width: '32', viewBox: '0 0 24 24', fill: '#000000' }, props, { children: jsx("path", { d: 'M12 5.881C12.981 4.729 14.484 4 16.05 4C18.822 4 21 6.178 21 8.95C21 12.3492 17.945 15.1195 13.3164 19.3167L13.305 19.327L12 20.515L10.695 19.336L10.6595 19.3037C6.04437 15.1098 3 12.3433 3 8.95C3 6.178 5.178 4 7.95 4C9.516 4 11.019 4.729 12 5.881Z' }) })));
+}
+
+function RatingField(_a) {
+    var _b;
+    var element = _a.element, fieldLabel = _a.fieldLabel, responsiveStyles = _a.responsiveStyles, fieldVal = _a.fieldVal, editMode = _a.editMode, _c = _a.onChange, onChange = _c === void 0 ? function () { } : _c, _d = _a.elementProps, elementProps = _d === void 0 ? {} : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, children = _a.children;
+    var _f = __read(useState(null), 2), hoverIndex = _f[0], setHoverIndex = _f[1];
+    var servar = element.servar;
+    var numRatings = (_b = servar.max_length) !== null && _b !== void 0 ? _b : 5;
+    // If no field value, default to 1 less than the max
+    fieldVal = fieldVal !== null && fieldVal !== void 0 ? fieldVal : numRatings - 1;
+    var Icon = element.styles.icon_type === 'heart' ? Heart : RatingStar;
+    return (jsxs("div", __assign({ css: __assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ css: { display: 'flex', justifyContent: 'space-around' } }, { children: [Array(numRatings)
+                        .fill(null)
+                        .map(function (_, index) {
+                        var activeStyles = {};
+                        if (hoverIndex === null) {
+                            if (index <= fieldVal - 1)
+                                activeStyles = responsiveStyles.getTarget('selectedRating');
+                        }
+                        else if (index <= hoverIndex)
+                            activeStyles = responsiveStyles.getTarget('hoverRating');
+                        return (jsx(Icon, { onClick: function () { return onChange(index + 1); }, onMouseEnter: function () { return setHoverIndex(index); }, onMouseLeave: function () { return setHoverIndex(null); }, css: __assign(__assign({ pointerEvents: editMode || disabled ? 'none' : 'auto', cursor: editMode || disabled ? 'default' : 'pointer', width: "".concat(100 / numRatings, "%"), paddingRight: '5px' }, responsiveStyles.getTarget('field')), activeStyles) }, index));
+                    }), jsx(ErrorInput, { id: servar.key, name: servar.key, "aria-label": element.properties.aria_label })] }))] })));
+}
+
+export { RatingField as default };

package/dist/fthry_index.CWt9W3bv.js

@@ -0,0 +1,95 @@
+import { _ as __read, b as jsx, m as Fragment, q as isMobile, j as jsxs, a as __assign, k as FORM_Z_INDEX, i as iosScrollOnFocus } from './fthry_index.F6BXSHA5.js';
+import { useState, useRef, useMemo } from 'react';
+import { O as Overlay, T as Tooltip } from './fthry_Overlay.X0blINpo.js';
+import { applyCheckableInputStyles, composeCheckableInputStyle } from './fthry_index.DV1PqB3d.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'stream';
+import 'events';
+import 'buffer';
+import 'util';
+import 'react-dom';
+
+function TextHoverTooltip(_a) {
+    var text = _a.text, children = _a.children, containerRef = _a.containerRef;
+    var _b = __read(useState(false), 2), show = _b[0], setShow = _b[1];
+    var triggerRef = useRef(null);
+    if (!text)
+        return jsx(Fragment, { children: children });
+    var isMobile$1 = isMobile();
+    return (jsxs(Fragment, { children: [jsx("span", __assign({ ref: triggerRef, onMouseEnter: isMobile$1 ? undefined : function () { return setShow(true); }, onMouseLeave: isMobile$1 ? 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 })), jsx(Overlay, __assign({ show: show, targetRef: triggerRef, containerRef: containerRef, placement: 'top', onHide: function () { return setShow(false); }, offset: 4 }, { children: jsx(Tooltip, __assign({ id: "tooltip-".concat(text), css: {
+                        zIndex: 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 = useRef(null);
+    var _g = responsiveStyles.getTarget('sub-fc'), backgroundColor = _g.backgroundColor, borderRadius = _g.borderRadius;
+    var styles = useMemo(function () {
+        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 = __assign(__assign({}, widthStyle), { fontWeight: 400, padding: 8 });
+    return (jsxs("div", __assign({ ref: containerRef, css: __assign(__assign({ width: '100%', height: '100%' }, responsiveStyles.getTarget('fc')), { position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'center' }) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'row', marginBottom: 6 } }, { children: [jsx("div", { css: firstColStyle }), options.map(function (opt, i) {
+                        // headers
+                        return (jsx("div", __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 (jsxs("div", __assign({ style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        backgroundColor: highlight,
+                        borderRadius: borderRadius,
+                        marginBottom: 6
+                    } }, { children: [jsx(TextHoverTooltip, __assign({ text: q.tooltip }, { children: jsx("div", __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 (jsx("div", __assign({ css: {
+                                    flex: 1,
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    display: 'flex'
+                                } }, { children: 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: iosScrollOnFocus, css: composeCheckableInputStyle(styles, disabled, !allowMultiple) }) }), j));
+                        })] }), i));
+            })] })));
+}
+
+export { MatrixField as default };