@feathery/react 2.10.3 → 2.11.0

package/dist/cjs/fthry_index.DivS5VJj.js

@@ -0,0 +1,140 @@
+'use strict';
+
+var index = require('./fthry_index.DfayElGY.js');
+var React = require('react');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('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 index.__assign(index.__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': index.hoverStylesGuard(noHover ? {} : styles.getTarget('checkboxHover')), '&::before': index.__assign({ content: "''", transform: 'scale(0)' }, styles.getTarget('checkboxCheckmark')), '&:hover::before': index.hoverStylesGuard(index.__assign(index.__assign({}, styles.getTarget('checkboxCheckmark')), styles.getTarget('checkboxCheckmarkHover'))), '&:checked': index.__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 = React.useMemo(function () { return applyCheckableInputStyles(element, responsiveStyles); }, [responsiveStyles]);
+    var servar = element.servar;
+    return (index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({}, responsiveStyles.getTarget('fc')), { position: 'relative', display: 'flex' }) }, elementProps, { children: [children, index.jsx("input", { id: servar.key, name: servar.key, type: 'checkbox', checked: fieldVal, disabled: disabled, onChange: onChange, onFocus: index.iosScrollOnFocus, "aria-label": element.properties.aria_label, css: index.__assign(index.__assign(index.__assign({}, composeCheckableInputStyle(styles, disabled)), (disabled ? responsiveStyles.getTarget('disabled') : {})), { marginTop: '4px', '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }) }), fieldLabel] })));
+}
+
+exports.applyCheckableInputStyles = applyCheckableInputStyles;
+exports.applyHeightWidthMarginByFontSize = applyHeightWidthMarginByFontSize;
+exports.composeCheckableInputStyle = composeCheckableInputStyle;
+exports.default = CheckboxField;