@feathery/react 2.13.0 → 2.15.0

package/dist/esm/fthry_index.CE2jHoVu.js

@@ -1,39 +0,0 @@
-import { b as jsx, a as __assign, _ as __read, j as jsxs, E as ErrorInput } from './fthry_index.BdEtXrB3.js';
-import { useState } from 'react';
-import 'react/jsx-runtime';
-import 'react-dom/client';
-import 'jszip';
-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/esm/fthry_index.CFNqwrgS.js

@@ -1,135 +0,0 @@
-import { a as __assign, h as hoverStylesGuard, j as jsxs, b as jsx, i as iosScrollOnFocus } from './fthry_index.BdEtXrB3.js';
-import { useMemo } from 'react';
-import 'react/jsx-runtime';
-import 'react-dom/client';
-import 'jszip';
-import 'react-dom';
-
-// Draws a checkmark, similar in dimensions to the default Chrome checkbox, in CSS
-var checkmarkClipPath = 'polygon(40% 85%, 89% 23%, 76% 12%, 39% 59%, 23% 44%, 12% 55%)';
-var MIN_CHECKBOX_PX = 13;
-// Possibly extract this to its own file, however the radio type is nearly identical to checkbox
-var radio = function (size, color) {
-    size = Math.floor(size / 1.7);
-    return {
-        height: size,
-        width: size,
-        minWidth: size,
-        minHeight: size,
-        border: 0,
-        boxShadow: "inset ".concat(size, "px ").concat(size, "px #").concat(color),
-        borderRadius: '50%'
-    };
-};
-var checkbox = function (size, color) {
-    return {
-        boxShadow: "inset ".concat(size, "px ").concat(size, "px #").concat(color),
-        clipPath: checkmarkClipPath
-    };
-};
-var scaleCheckboxSize = function (fontSize) {
-    return Math.max(fontSize, MIN_CHECKBOX_PX);
-};
-var applyHeightWidthMarginByFontSize = function (responsiveStyles, target, single) {
-    if (single === void 0) { single = false; }
-    responsiveStyles.apply(target, ['font_size'], function (fontSize) {
-        var scaled = scaleCheckboxSize(fontSize);
-        var scaledSize = "".concat(scaled, "px");
-        var styles = {
-            minHeight: scaledSize,
-            height: scaledSize,
-            minWidth: scaledSize,
-            width: scaledSize
-        };
-        var margin = Math.max(scaled / 2, 10);
-        if (!single)
-            styles.marginRight = "".concat(margin, "px");
-        return styles;
-    });
-};
-var applyCheckmarkByFontSize = function (responsiveStyles, target, colorProperty, isRadio) {
-    responsiveStyles.apply(target, ['font_size', colorProperty], function (fontSize, color) {
-        var scaledSize = scaleCheckboxSize(fontSize);
-        return isRadio ? radio(scaledSize, color) : checkbox(scaledSize, color);
-    });
-};
-var applyLabelHeightByFontSize = function (responsiveStyles, target) {
-    responsiveStyles.apply(target, ['font_size', 'line_height'], function (fontSize, lineHeight) {
-        if (!lineHeight)
-            lineHeight = scaleCheckboxSize(fontSize);
-        var topOffset = (lineHeight - fontSize) / 2;
-        return {
-            position: 'relative',
-            top: "-".concat(topOffset, "px"),
-            lineHeight: "".concat(lineHeight, "px")
-        };
-    });
-};
-var applyCheckmark = function (responsiveStyles, target, colorProperty) {
-    responsiveStyles.apply(target, ['height', 'height_unit', 'width', 'width_unit', colorProperty], function (height, heightUnit, width, widthUnit, color) {
-        return {
-            boxShadow: "inset ".concat(width).concat(widthUnit, " ").concat(height).concat(heightUnit, " #").concat(color),
-            clipPath: checkmarkClipPath
-        };
-    });
-};
-function applyCheckableInputStyles(element, responsiveStyles) {
-    responsiveStyles.addTargets('checkbox', 'checkboxCheckmark', 'checkboxSelected', 'checkboxHover', 'checkboxCheckmarkHover', 'checkboxLabel');
-    var _a = element.servar, type = _a.type, multiple = _a.metadata.multiple;
-    var isRadioGroup = type === 'select' || (type === 'matrix' && !multiple);
-    var isCheckboxGroup = type === 'multiselect' ||
-        type === 'checkbox_group' ||
-        (type === 'matrix' && multiple);
-    var scaleWithFontSize = isCheckboxGroup || isRadioGroup;
-    // width/height styles
-    if (scaleWithFontSize) {
-        applyLabelHeightByFontSize(responsiveStyles, 'checkboxLabel');
-        applyHeightWidthMarginByFontSize(responsiveStyles, 'checkbox', true);
-        applyHeightWidthMarginByFontSize(responsiveStyles, 'checkboxCheckmark', true);
-        applyHeightWidthMarginByFontSize(responsiveStyles, 'checkboxCheckmarkHover', true);
-        applyCheckmarkByFontSize(responsiveStyles, 'checkboxCheckmark', 'selected_font_color', isRadioGroup);
-        applyCheckmarkByFontSize(responsiveStyles, 'checkboxCheckmarkHover', 'hover_font_color', isRadioGroup);
-    }
-    else {
-        responsiveStyles.applyHeight('checkbox');
-        responsiveStyles.applyWidth('checkbox');
-        responsiveStyles.applyHeight('checkboxCheckmark');
-        responsiveStyles.applyWidth('checkboxCheckmark');
-        responsiveStyles.applyHeight('checkboxCheckmarkHover');
-        responsiveStyles.applyWidth('checkboxCheckmarkHover');
-        applyCheckmark(responsiveStyles, 'checkboxCheckmark', 'selected_font_color');
-        applyCheckmark(responsiveStyles, 'checkboxCheckmarkHover', 'hover_font_color');
-    }
-    // base styles
-    responsiveStyles.applyBorders({ target: 'checkbox' });
-    if (!isRadioGroup)
-        responsiveStyles.applyCorners('checkbox');
-    responsiveStyles.applyBoxShadow('checkbox');
-    responsiveStyles.applyColor('checkbox', 'background_color', 'backgroundColor', true);
-    responsiveStyles.applySelectorStyles('checkboxHover', {
-        prefix: 'hover_',
-        important: true
-    });
-    responsiveStyles.applySelectorStyles('checkboxSelected', {
-        prefix: 'selected_',
-        important: true
-    });
-    return responsiveStyles;
-}
-var composeCheckableInputStyle = function (styles, noHover, isRadio) {
-    if (noHover === void 0) { noHover = false; }
-    if (isRadio === void 0) { isRadio = false; }
-    return __assign(__assign({ position: 'static', marginLeft: 5, marginRight: 5, marginTop: 0, marginBottom: 0, appearance: 'none', display: 'grid', placeContent: 'center', 
-        // On error in Safari, checkboxes can have a misshapen outline so disable
-        outline: 'none', borderRadius: isRadio ? '50%' : null }, styles.getTarget('checkbox')), { '&:hover': hoverStylesGuard(noHover ? {} : styles.getTarget('checkboxHover')), '&::before': __assign({ content: "''", transform: 'scale(0)' }, styles.getTarget('checkboxCheckmark')), '&:hover::before': hoverStylesGuard(__assign(__assign({}, styles.getTarget('checkboxCheckmark')), styles.getTarget('checkboxCheckmarkHover'))), '&:checked': __assign({}, styles.getTarget('checkboxSelected')), '&:checked::before': {
-            transform: 'scale(1)'
-        } });
-};
-function CheckboxField(_a) {
-    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _b = _a.fieldVal, fieldVal = _b === void 0 ? true : _b, _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 styles = useMemo(function () { return applyCheckableInputStyles(element, responsiveStyles); }, [responsiveStyles]);
-    var servar = element.servar;
-    return (jsxs("div", __assign({ css: __assign(__assign({}, responsiveStyles.getTarget('fc')), { position: 'relative', display: 'flex' }) }, elementProps, { children: [children, jsx("input", { id: servar.key, name: servar.key, type: 'checkbox', checked: fieldVal, disabled: disabled, onChange: onChange, onFocus: iosScrollOnFocus, "aria-label": element.properties.aria_label, css: __assign(__assign(__assign({}, composeCheckableInputStyle(styles, disabled)), (disabled ? responsiveStyles.getTarget('disabled') : {})), { marginTop: '4px', '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }) }), fieldLabel] })));
-}
-
-export { applyCheckableInputStyles, applyHeightWidthMarginByFontSize, composeCheckableInputStyle, CheckboxField as default };