@feathery/react 2.12.3-pr-1522.4bcc507.0 → 2.14.0

package/dist/fthry_Placeholder.7M07CwTS.js

@@ -0,0 +1,14 @@
+import { a as __assign, b as jsx } from './fthry_index.CdIRvNp8.js';
+
+function Placeholder(_a) {
+    var _b;
+    var _c, _d;
+    var value = _a.value, element = _a.element, responsiveStyles = _a.responsiveStyles, _e = _a.type, type = _e === void 0 ? 'input' : _e, _f = _a.inputFocused, inputFocused = _f === void 0 ? false : _f, _g = _a.repeatIndex, repeatIndex = _g === void 0 ? null : _g;
+    var props = element.properties;
+    var repeatPlaceholders = (_c = props.repeat_placeholder) !== null && _c !== void 0 ? _c : [];
+    var placeholder = (_d = repeatPlaceholders[repeatIndex !== null && repeatIndex !== void 0 ? repeatIndex : 0]) !== null && _d !== void 0 ? _d : (props.placeholder || '');
+    var focusedStyles = __assign(__assign({}, responsiveStyles.getTarget('placeholderFocus')), responsiveStyles.getTarget('placeholderActive'));
+    return (jsx("span", __assign({ css: __assign(__assign(__assign(__assign({ position: 'absolute', pointerEvents: 'none', insetInlineStart: '0.75rem', transition: '0.2s ease all', top: type === 'input' ? '50%' : '0.6rem' }, responsiveStyles.getTarget('placeholder')), (value ? responsiveStyles.getTarget('placeholderFocus') : {})), (inputFocused ? focusedStyles : {})), (_b = {}, _b["".concat(type, ":focus ~ &")] = focusedStyles, _b)) }, { children: placeholder })));
+}
+
+export { Placeholder as P };

package/dist/fthry_ShowEyeIcon.n639xEWA.js

@@ -0,0 +1,13 @@
+import { t as __rest, b as jsx, a as __assign } from './fthry_index.CdIRvNp8.js';
+
+function ShowEyeIcon$1(_a) {
+    var _b = _a.width, width = _b === void 0 ? 30 : _b, _c = _a.height, height = _c === void 0 ? 30 : _c, props = __rest(_a, ["width", "height"]);
+    return (jsx("svg", __assign({ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 30', fill: 'none', x: '0px', y: '0px', width: width, height: height }, props, { children: jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M20.8248 3.19128C21.1177 3.48417 21.1177 3.95905 20.8248 4.25194L18.6412 6.43553C20.1944 7.65967 21.4426 9.37509 22.1487 11.5676C22.2392 11.8487 22.2392 12.1513 22.1487 12.4325C19.8665 19.5192 12.0388 21.4893 6.64678 18.43L4.42413 20.6526C4.13124 20.9455 3.65636 20.9455 3.36347 20.6526C3.07058 20.3597 3.07058 19.8849 3.36347 19.592L5.81711 17.1383C5.85403 17.0603 5.90456 16.9883 5.96738 16.9261L9.23128 13.6946C9.26048 13.6497 9.29496 13.6072 9.33473 13.5681C9.37317 13.5304 9.41464 13.4976 9.45835 13.4697L12.2178 10.7376L19.7642 3.19128C20.0571 2.89839 20.5319 2.89839 20.8248 3.19128ZM9.94175 15.135L7.7537 17.3231C12.3935 19.6836 18.7997 17.8825 20.712 12C20.0788 10.052 18.9647 8.56486 17.5962 7.52336L15.1423 9.95291C15.5264 10.5415 15.75 11.2451 15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C11.2401 15.75 10.5325 15.5235 9.94175 15.135ZM14.0385 11.0458C14.1743 11.3354 14.25 11.6586 14.25 12C14.25 13.2426 13.2426 14.25 12 14.25C11.6567 14.25 11.3317 14.1734 11.0407 14.0361L13.276 11.8008L14.0385 11.0458ZM3.28797 12C4.88695 7.08124 9.60598 5.02175 13.8411 5.85218C14.2476 5.93188 14.6417 5.66698 14.7214 5.26051C14.8011 4.85403 14.5362 4.45991 14.1297 4.38021C9.24578 3.42256 3.70608 5.80807 1.85133 11.5676C1.76078 11.8487 1.76078 12.1513 1.85133 12.4325C2.24631 13.659 2.81178 14.7387 3.50826 15.6677C3.75674 15.9991 4.22683 16.0663 4.55824 15.8178C4.88965 15.5694 4.95689 15.0993 4.70841 14.7679C4.11894 13.9816 3.63262 13.0603 3.28797 12ZM9.75 12C9.75 10.7574 10.7574 9.75 12 9.75C12.4142 9.75 12.75 9.41421 12.75 9C12.75 8.58579 12.4142 8.25 12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75C9.41421 12.75 9.75 12.4142 9.75 12Z', fill: 'black' }) })));
+}
+
+function ShowEyeIcon(_a) {
+    var _b = _a.width, width = _b === void 0 ? 30 : _b, _c = _a.height, height = _c === void 0 ? 30 : _c, props = __rest(_a, ["width", "height"]);
+    return (jsx("svg", __assign({ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 30', fill: 'none', height: height, width: width }, props, { children: jsx("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M20.712 12C17.97 20.4349 6.03003 20.4349 3.28797 12C6.03003 3.56512 17.97 3.56512 20.712 12ZM22.1487 11.5676C18.974 1.70927 5.02603 1.70927 1.85133 11.5676C1.76078 11.8487 1.76078 12.1513 1.85133 12.4325C5.02603 22.2907 18.974 22.2907 22.1487 12.4325C22.2392 12.1513 22.2392 11.8487 22.1487 11.5676ZM9.75 12C9.75 10.7574 10.7574 9.75 12 9.75C13.2426 9.75 14.25 10.7574 14.25 12C14.25 13.2426 13.2426 14.25 12 14.25C10.7574 14.25 9.75 13.2426 9.75 12ZM12 8.25C9.92893 8.25 8.25 9.92893 8.25 12C8.25 14.0711 9.92893 15.75 12 15.75C14.0711 15.75 15.75 14.0711 15.75 12C15.75 9.92893 14.0711 8.25 12 8.25Z', fill: 'black' }) })));
+}
+
+export { ShowEyeIcon as S, ShowEyeIcon$1 as a };

package/dist/fthry_index.BE1aEx2n.js

@@ -0,0 +1,70 @@
+import { u as useBorder, j as jsxs, a as __assign, b as jsx, h as hoverStylesGuard, f as imgMaxSizeStyles, n as noTextSelectStyles, E as ErrorInput } from './fthry_index.CdIRvNp8.js';
+import { useRef, useMemo } from 'react';
+import { I as InlineTooltip } from './fthry_InlineTooltip.xj-t-582.js';
+import { u as useSalesforceSync } from './fthry_useSalesforceSync.wEr6a7_E.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+import 'react-dom';
+import './fthry_Overlay.CJFSLbLE.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 = useRef(null);
+    var servar = element.servar;
+    var _g = useSalesforceSync(servar.metadata.salesforce_sync, editMode), dynamicOptions = _g.dynamicOptions, loadingDynamicOptions = _g.loadingDynamicOptions, shouldSalesforceSync = _g.shouldSalesforceSync;
+    var selectedOptMap = useMemo(function () {
+        return Array.isArray(fieldVal)
+            ? fieldVal.reduce(function (map, selected) {
+                map[selected] = true;
+                return map;
+            }, {})
+            : {};
+    }, [fieldVal]);
+    var _h = 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 (jsxs("div", __assign({ ref: containerRef, css: __assign({ position: 'relative', width: '100%', height: '100%', pointerEvents: editMode || disabled || loadingDynamicOptions ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, { children: [children, fieldLabel, jsxs("div", __assign({ css: __assign({ display: 'flex', flexWrap: 'wrap', width: '100%' }, responsiveStyles.getTarget('bc')) }, elementProps, { children: [options.map(function (option, index) {
+                        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];
+                        var tooltip = (_c = option.tooltip) !== null && _c !== void 0 ? _c : '';
+                        return (jsxs("div", __assign({ onClick: function () {
+                                if (!editMode && !disabled && !loadingDynamicOptions) {
+                                    onClick(value);
+                                }
+                            }, css: __assign(__assign({ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', boxSizing: 'border-box', cursor: 'pointer' }, responsiveStyles.getTarget('field')), { '&:hover': hoverStylesGuard(editMode || disabled || loadingDynamicOptions
+                                    ? {}
+                                    : __assign(__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)), '&&': selectedOptMap[value]
+                                    ? __assign(__assign({}, responsiveStyles.getTarget('active')), borderStyles.active) : {} }) }, { children: [customBorder, imageUrl && (jsx("img", { src: imageUrl, css: __assign(__assign({}, imgMaxSizeStyles), responsiveStyles.getTargets('img')) })), label && (jsx("div", __assign({ css: __assign(__assign({ display: 'flex', maxWidth: '100%' }, responsiveStyles.getTargets('label')), noTextSelectStyles) }, { children: label }))), tooltip && (jsx(InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-").concat(label), text: tooltip, responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat }))] }), "".concat(servar.key, "-").concat(index)));
+                    }), jsx(ErrorInput, { id: servar.key, name: servar.key, "aria-label": element.properties.aria_label })] }))] })));
+}
+
+export { ButtonGroupField as default };

package/dist/fthry_index.BKbx2qxD.js

@@ -0,0 +1,94 @@
+import { j as jsxs, a as __assign, b as jsx, i as iosScrollOnFocus, r as resetStyles } from './fthry_index.CdIRvNp8.js';
+import { useRef, useMemo } from 'react';
+import { F as FormControl } from './fthry_FormControl.CrSvLSA7.js';
+import { applyCheckableInputStyles, composeCheckableInputStyle, applyHeightWidthMarginByFontSize } from './fthry_index.BpsK3TYO.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.xj-t-582.js';
+import { u as useSalesforceSync } from './fthry_useSalesforceSync.wEr6a7_E.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+import 'react-dom';
+import './fthry_Overlay.CJFSLbLE.js';
+
+var applyCheckboxGroupStyles = function (element, responsiveStyles) {
+    responsiveStyles.addTargets('checkboxGroup');
+    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(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 = useRef(null);
+    var styles = useMemo(function () {
+        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 (jsxs("div", __assign({ ref: containerRef, css: __assign({ position: 'relative', width: '100%' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ css: __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 (jsxs("div", __assign({ css: {
+                                display: 'flex',
+                                pointerEvents: optionDisabled ? 'none' : 'auto'
+                            } }, { children: [jsxs("label", __assign({ style: { display: 'contents' } }, { children: [jsx("input", { type: 'checkbox', id: "".concat(servar.key, "-").concat(i), name: value, checked: checked, onChange: onChange, onFocus: iosScrollOnFocus, style: { padding: 0, lineHeight: 'normal' }, css: __assign(__assign(__assign(__assign({}, 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 }), jsx("span", __assign({ css: __assign({ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, styles.getTarget('checkboxLabel')) }, { children: label }))] })), jsx(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 && (jsxs("div", __assign({ style: { display: 'flex' } }, { children: [jsx("input", { type: 'checkbox', id: "".concat(servar.key, "-"), name: otherVal, checked: otherChecked, disabled: otherDisabled, onChange: onChange, onFocus: iosScrollOnFocus, style: {
+                                    padding: 0,
+                                    lineHeight: 'normal'
+                                }, css: __assign(__assign(__assign(__assign({}, composeCheckableInputStyle(styles, otherDisabled)), styles.getTarget('checkboxGroup')), (otherDisabled
+                                    ? responsiveStyles.getTarget('disabled')
+                                    : {})), { '&:focus-visible': { border: '1px solid rgb(74, 144, 226)' } }) }, "".concat(servar.key, "-")), jsx("label", __assign({ htmlFor: "".concat(servar.key, "-"), css: styles.getTarget('checkboxLabel') }, { children: otherLabel })), jsx(FormControl, { type: 'text', 
+                                // Paired with flex grow, will not expand parent width
+                                htmlSize: 1, css: __assign(__assign(__assign(__assign({ marginLeft: '5px' }, 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 }), jsx(InlineTooltip, { containerRef: containerRef, id: "".concat(element.id, "-"), text: servar.metadata.other_tooltip, responsiveStyles: responsiveStyles, absolute: false, repeat: element.repeat })] })))] }))] })));
+}
+
+export { CheckboxGroupField as default };

package/dist/fthry_index.BdbDXIuj.js

@@ -0,0 +1,290 @@
+import { j as jsxs, a as __assign, b as jsx, D as DROPDOWN_Z_INDEX, _ as __read, u as useBorder, ar as getFieldValue, as as stringifyWithNull, h as hoverStylesGuard, i as iosScrollOnFocus, k as FORM_Z_INDEX, r as resetStyles, at as emailPatternStr } from './fthry_index.CdIRvNp8.js';
+import { memo, useRef, useState } from 'react';
+import { P as Placeholder } from './fthry_Placeholder.7M07CwTS.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.xj-t-582.js';
+import { O as Overlay } from './fthry_Overlay.CJFSLbLE.js';
+import { u as useElementSize } from './fthry_useElementSize.1FdURPgQ.js';
+import { S as ShowEyeIcon, a as ShowEyeIcon$1 } from './fthry_ShowEyeIcon.n639xEWA.js';
+import { a as IMaskInput } from './fthry_input.CD5doOgD.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+import 'react-dom';
+import './fthry_index.CwsphGMI.js';
+
+function TextAutocomplete(_a) {
+    var _b = _a.allOptions, allOptions = _b === void 0 ? [] : _b, showOptions = _a.showOptions, _c = _a.onSelect, onSelect = _c === void 0 ? function () { } : _c, _d = _a.onHide, onHide = _d === void 0 ? function () { } : _d, _e = _a.onInputFocus, onInputFocus = _e === void 0 ? function () { } : _e, _f = _a.value, value = _f === void 0 ? '' : _f, containerRef = _a.containerRef, responsiveStyles = _a.responsiveStyles, listItemRef = _a.listItemRef, children = _a.children;
+    var options = allOptions.filter(function (opt) {
+        return opt.toLowerCase().includes(value.toLowerCase());
+    });
+    var triggerRef = useRef(null);
+    var dropdownWidth = useElementSize(triggerRef).width;
+    if (allOptions.length === 0)
+        return children;
+    return (jsxs("div", __assign({ ref: triggerRef, css: { height: '100%', width: '100%' } }, { children: [children, options.length > 0 && showOptions && (jsx(Overlay, __assign({ targetRef: triggerRef, containerRef: containerRef, show: true, placement: 'bottom-start', onHide: onHide }, { children: jsx("ul", __assign({ css: __assign({ zIndex: DROPDOWN_Z_INDEX, listStyleType: 'none', padding: 0, margin: 0, maxHeight: '210px', overflowY: 'scroll', overflowX: 'auto', width: dropdownWidth !== undefined ? "".concat(dropdownWidth, "px") : '100%', backgroundColor: 'white', cursor: 'pointer', boxShadow: '0 0 4px rgb(0 0 0 / 15%)' }, responsiveStyles.getTarget('dropdown')) }, { children: options.map(function (opt, index) { return (jsx("li", __assign({ css: {
+                            padding: '8px 14px',
+                            transition: '0.1s ease all',
+                            '&:hover': { backgroundColor: '#e6e6e633' },
+                            '&:focus-visible': {
+                                outline: 'none',
+                                backgroundColor: '#e6e6e644'
+                            }
+                        }, tabIndex: 0, ref: function (ref) {
+                            listItemRef.current[index] = ref;
+                        }, onClick: function () { return onSelect(opt); }, onKeyDown: function (e) {
+                            var _a, _b;
+                            var disable = function () {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            };
+                            if (e.key === 'Enter') {
+                                disable();
+                                onSelect(opt);
+                            }
+                            else if (['ArrowDown', 'ArrowRight'].includes(e.key)) {
+                                disable();
+                                (_a = listItemRef.current[index].nextSibling) === null || _a === void 0 ? void 0 : _a.focus();
+                            }
+                            else if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
+                                disable();
+                                if (index === 0)
+                                    onInputFocus();
+                                else
+                                    (_b = listItemRef.current[index].previousSibling) === null || _b === void 0 ? void 0 : _b.focus();
+                            }
+                        }, onBlur: function (e) {
+                            if (!e.relatedTarget ||
+                                !listItemRef.current.some(function (item) { return item === e.relatedTarget; })) {
+                                onHide();
+                            }
+                        } }, { children: opt }), "".concat(opt, "-").concat(index))); }) })) })))] })));
+}
+var TextAutocomplete$1 = memo(TextAutocomplete);
+
+var DEFAULT_LENGTH = 1024; // Default limit on backend
+var MAX_FIELD_LENGTHS = {
+    text_area: 16384,
+    url: 256,
+    gmap_zip: 10
+};
+var maxFieldLength = function (type) { var _a; return (_a = MAX_FIELD_LENGTHS[type]) !== null && _a !== void 0 ? _a : DEFAULT_LENGTH; };
+function escapeDefinitionChars(str) {
+    return (str !== null && str !== void 0 ? str : '')
+        .replaceAll('0', '\\0')
+        .replaceAll('a', '\\a')
+        .replaceAll('b', '\\b')
+        .replaceAll('*', '\\*');
+}
+function constraintChar(allowed) {
+    switch (allowed) {
+        case 'letters':
+            return 'a';
+        case 'alphanumeric':
+            return 'b';
+        case 'alphaspace':
+            return 'c';
+        case 'digits':
+            return '0';
+        default:
+            return '*';
+    }
+}
+function getTextFieldMask(servar) {
+    var data = servar.metadata;
+    var prefix = escapeDefinitionChars(data.prefix);
+    var suffix = escapeDefinitionChars(data.suffix);
+    var mask = '';
+    if (data.mask)
+        mask = data.mask;
+    else {
+        var allowed = data.allowed_characters;
+        if (servar.type === 'gmap_zip' && !allowed)
+            allowed = 'alphaspace';
+        var definitionChar = constraintChar(allowed);
+        var numOptional = maxFieldLength(servar.type) - prefix.length - suffix.length;
+        if (servar.max_length)
+            numOptional = Math.min(servar.max_length, numOptional);
+        mask = "[".concat(definitionChar.repeat(numOptional), "]");
+    }
+    // Approximate dynamic input by making each character optional
+    return "".concat(prefix).concat(mask).concat(suffix);
+}
+function getMaskProps(servar, value, showPassword) {
+    var _a, _b, _c;
+    var maskProps;
+    // Max length included in mask for validation of typed inputs
+    var maxLength = (_a = servar.max_length) !== null && _a !== void 0 ? _a : maxFieldLength(servar.type);
+    switch (servar.type) {
+        case 'integer_field':
+            maskProps = {
+                mask: 'num',
+                blocks: {
+                    num: {
+                        mask: Number,
+                        radix: '.',
+                        thousandsSeparator: ',',
+                        scale: 2,
+                        // Larger numbers get converted to scientific notation when sent to backend
+                        max: (_b = servar.max_length) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER,
+                        min: Math.max(0, (_c = servar.min_length) !== null && _c !== void 0 ? _c : 0)
+                    }
+                },
+                value: value.toString()
+            };
+            if (servar.format === 'currency') {
+                maskProps.mask = '$num';
+            }
+            break;
+        case 'ssn':
+            maskProps = {
+                // mask uses ∗ character which is like * but centered in inputs
+                mask: servar.metadata.last_four_digits
+                    ? '∗∗∗ - ∗∗ - 0000'
+                    : '000 - 00 - 0000',
+                // displayChar allows for secure entry without using password input
+                // this prevents browser password manager from triggering on SSN fields
+                displayChar: showPassword ? undefined : '∗',
+                placeholderChar: servar.metadata.last_four_digits ? ' ' : undefined,
+                lazy: !servar.metadata.last_four_digits
+            };
+            break;
+        case 'email':
+        case 'text_area':
+        case 'url':
+            maskProps = { mask: new RegExp("^.{0,".concat(maxLength, "}$")), maxLength: maxLength };
+            break;
+        default:
+            if (servar.metadata.mask)
+                maxLength = undefined;
+            maskProps = {
+                mask: getTextFieldMask(servar),
+                definitions: {
+                    b: /[a-zA-Z0-9]/,
+                    c: /[a-zA-Z0-9 ]/
+                },
+                maxLength: maxLength
+            };
+            break;
+    }
+    return __assign({ lazy: false, unmask: !servar.metadata.save_mask }, maskProps);
+}
+function getInputProps(servar, options, autoComplete) {
+    var _a;
+    var constraints = {
+        minLength: servar.min_length
+    };
+    // Max length included here for validation of programmatically set
+    // inputs
+    var maxLength = (_a = servar.max_length) !== null && _a !== void 0 ? _a : maxFieldLength(servar.type);
+    if (options.length > 0)
+        constraints.autoComplete = 'off';
+    var meta = servar.metadata;
+    switch (servar.type) {
+        case 'integer_field':
+            return { inputMode: 'decimal' };
+        case 'email':
+            if (autoComplete && !constraints.autoComplete) {
+                constraints.autoComplete = 'email';
+            }
+            return __assign({ type: 'email', pattern: emailPatternStr, maxLength: maxLength }, constraints);
+        case 'gmap_zip':
+            if (autoComplete && !constraints.autoComplete) {
+                constraints.autoComplete = 'postal-code';
+            }
+            return __assign(__assign({}, constraints), { maxLength: maxLength, inputMode: (meta.allowed_characters === 'digits'
+                    ? 'numeric'
+                    : 'text') });
+        case 'url':
+            if (autoComplete && !constraints.autoComplete) {
+                constraints.autoComplete = 'url';
+                constraints.maxLength = maxLength;
+            }
+            return constraints;
+        case 'ssn':
+            return __assign({ inputMode: 'numeric' }, constraints);
+        default:
+            constraints.maxLength = maxLength;
+            if (meta.custom_autocomplete && !constraints.autoComplete)
+                constraints.autoComplete = meta.custom_autocomplete;
+            if (meta.number_keypad || meta.allowed_characters === 'digits') {
+                return __assign({ inputMode: 'numeric' }, constraints);
+            }
+            return constraints;
+    }
+}
+var EXIT_DELAY_TIME = 200;
+function TextField(_a) {
+    var _b;
+    var _c;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _d = _a.elementProps, elementProps = _d === void 0 ? {} : _d, _e = _a.required, required = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, autoComplete = _a.autoComplete, editMode = _a.editMode, _g = _a.onAccept, onAccept = _g === void 0 ? function () { } : _g, _h = _a.onEnter, onEnter = _h === void 0 ? function () { } : _h, _j = _a.setRef, setRef = _j === void 0 ? function () { } : _j, inlineError = _a.inlineError, _k = _a.repeatIndex, repeatIndex = _k === void 0 ? null : _k, children = _a.children;
+    var _l = __read(useState(false), 2), showAutocomplete = _l[0], setShowAutocomplete = _l[1];
+    // Hide SSNs by default
+    var _m = __read(useState(false), 2), showPassword = _m[0], setShowPassword = _m[1];
+    var _o = useBorder({
+        element: element,
+        error: inlineError,
+        breakpoint: responsiveStyles.getMobileBreakpoint()
+    }), borderStyles = _o.borderStyles, customBorder = _o.customBorder, borderId = _o.borderId;
+    var containerRef = useRef(null);
+    var listItemRef = useRef([]);
+    var inputRef = useRef(null);
+    var fieldVal = getFieldValue(element).value;
+    var rawValue = stringifyWithNull(fieldVal);
+    var servar = element.servar;
+    var options = ((_c = servar.metadata.options) !== null && _c !== void 0 ? _c : []).filter(function (opt) { return opt; });
+    var spacing = element.properties.tooltipText ? 30 : 8;
+    return (jsxs("div", __assign({ ref: containerRef, css: __assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ css: __assign(__assign(__assign({ position: 'relative', width: '100%', whiteSpace: 'nowrap', 
+                    // Prevent placeholder overflow
+                    overflowX: 'clip' }, responsiveStyles.getTarget('sub-fc')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:focus-within': __assign(__assign({}, responsiveStyles.getTarget('active')), borderStyles.active), '&:hover': hoverStylesGuard(disabled
+                        ? {}
+                        : __assign(__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)) }) }, { children: [jsx(TextAutocomplete$1, __assign({ allOptions: options, value: rawValue, showOptions: showAutocomplete, onSelect: function (option) {
+                            var _a, _b, _c;
+                            onAccept(option, {});
+                            setShowAutocomplete(false);
+                            (_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+                        }, responsiveStyles: responsiveStyles, containerRef: containerRef, listItemRef: listItemRef, onHide: function () { return setShowAutocomplete(false); }, onInputFocus: function () { var _a, _b, _c; return (_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b); } }, { children: jsx(IMaskInput, __assign({ id: servar.key, name: servar.key, ref: inputRef, css: __assign(__assign(__assign({ position: 'relative', 
+                                // Position input above the border div
+                                zIndex: FORM_Z_INDEX, height: '100%', width: '100%', border: 'none', margin: 0, backgroundColor: 'transparent' }, resetStyles), responsiveStyles.getTarget('field')), (_b = { '&:focus': responsiveStyles.getTarget('field')['&:focus'] }, _b["&:focus ~ #".concat(borderId)] = Object.values(borderStyles.active)[0], _b['&:not(:focus)'] = rawValue || !element.properties.placeholder
+                                ? {}
+                                : { color: 'transparent !important' }, _b)), required: required, disabled: disabled, placeholder: '', value: rawValue, "aria-label": element.properties.aria_label, 
+                            // Not on focus because if error is showing, it will
+                            // keep triggering dropdown after blur
+                            onKeyDown: function (e) {
+                                if (e.key === 'Enter')
+                                    onEnter(e);
+                                else if (options.length) {
+                                    if (!rawValue && ['Backspace', 'Delete'].includes(e.key))
+                                        return;
+                                    if (['ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key))
+                                        return;
+                                    setShowAutocomplete(e.key !== 'Escape');
+                                    if (e.key === 'ArrowDown') {
+                                        setTimeout(function () {
+                                            var _a;
+                                            return (_a = listItemRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus({
+                                                preventScroll: true
+                                            });
+                                        }, 0);
+                                    }
+                                }
+                            }, onBlur: function (e) {
+                                if (e.relatedTarget &&
+                                    listItemRef.current.some(function (item) { return item === e.relatedTarget; }))
+                                    return;
+                                if (options.length > 0) {
+                                    // Blur may be triggered by option selection, and option
+                                    // click logic may need to be run first. So delay option removal.
+                                    setTimeout(function () { return setShowAutocomplete(false); }, EXIT_DELAY_TIME);
+                                }
+                            }, onFocus: iosScrollOnFocus, inputRef: setRef }, getInputProps(servar, options, autoComplete === 'on'), getMaskProps(servar, rawValue, showPassword), { onAccept: onAccept })) })), servar.type === 'ssn' && rawValue && (jsx("div", __assign({ css: {
+                            position: 'absolute',
+                            cursor: 'pointer',
+                            insetInlineEnd: "".concat(spacing, "px"),
+                            // We need to subtract half the height of the icon to center it
+                            top: 'calc(50% - 12px)',
+                            zIndex: FORM_Z_INDEX
+                        }, onClick: function () { return setShowPassword(function (prev) { return !prev; }); }, "aria-label": 'Toggle SSN visibility' }, { children: showPassword ? jsx(ShowEyeIcon, {}) : jsx(ShowEyeIcon$1, {}) }))), customBorder, jsx(Placeholder, { value: rawValue, element: element, responsiveStyles: responsiveStyles, repeatIndex: repeatIndex }), jsx(InlineTooltip, { containerRef: containerRef, id: element.id, text: element.properties.tooltipText, responsiveStyles: responsiveStyles, repeat: element.repeat })] }))] })));
+}
+var index = memo(TextField);
+
+export { index as default };

package/dist/fthry_index.Be8xdrui.js

@@ -0,0 +1,52 @@
+import { u as useBorder, _ as __read, j as jsxs, a as __assign, h as hoverStylesGuard, b as jsx, i as iosScrollOnFocus, k as FORM_Z_INDEX, r as resetStyles } from './fthry_index.CdIRvNp8.js';
+import { memo, useState, useRef } from 'react';
+import { P as Placeholder } from './fthry_Placeholder.7M07CwTS.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.xj-t-582.js';
+import { S as ShowEyeIcon, a as ShowEyeIcon$1 } from './fthry_ShowEyeIcon.n639xEWA.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'jszip';
+import 'react-dom';
+import './fthry_Overlay.CJFSLbLE.js';
+
+function PasswordField(_a) {
+    var _b;
+    var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _c = _a.elementProps, elementProps = _c === void 0 ? {} : _c, _d = _a.required, required = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.repeatIndex, repeatIndex = _f === void 0 ? null : _f, editMode = _a.editMode, _g = _a.onChange, onChange = _g === void 0 ? function () { } : _g, _h = _a.onEnter, onEnter = _h === void 0 ? function () { } : _h, _j = _a.setRef, setRef = _j === void 0 ? function () { } : _j, _k = _a.rawValue, rawValue = _k === void 0 ? '' : _k, inlineError = _a.inlineError, children = _a.children;
+    var _l = useBorder({
+        element: element,
+        error: inlineError,
+        breakpoint: responsiveStyles.getMobileBreakpoint()
+    }), borderStyles = _l.borderStyles, customBorder = _l.customBorder, borderId = _l.borderId;
+    var _m = __read(useState(false), 2), showPassword = _m[0], setShowPassword = _m[1];
+    var containerRef = useRef(null);
+    var servar = element.servar;
+    var spacing = element.properties.tooltipText ? 30 : 8;
+    return (jsxs("div", __assign({ ref: containerRef, css: __assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, jsxs("div", __assign({ css: __assign(__assign(__assign({ position: 'relative', width: '100%', whiteSpace: 'nowrap', 
+                    // Prevent placeholder overflow
+                    overflowX: 'clip' }, responsiveStyles.getTarget('sub-fc')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:hover': hoverStylesGuard(disabled
+                        ? {}
+                        : __assign(__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)) }) }, { children: [jsx("input", { id: servar.key, name: servar.key, css: {
+                            '.feathery &': __assign(__assign(__assign({ position: 'relative', 
+                                // Position input above the border div
+                                zIndex: FORM_Z_INDEX, height: '100%', width: '100%', border: 'none', margin: 0, backgroundColor: 'transparent' }, resetStyles), responsiveStyles.getTarget('field')), (_b = {}, _b["&:focus ~ #".concat(borderId)] = Object.values(borderStyles.active)[0], _b['&:not(:focus)'] = rawValue || !element.properties.placeholder
+                                ? {}
+                                : { color: 'transparent !important' }, _b))
+                        }, "aria-label": element.properties.aria_label, maxLength: servar.max_length, minLength: servar.min_length, required: required, onChange: function (e) {
+                            if (servar.max_length && e.target.value.length > servar.max_length)
+                                return;
+                            onChange(e);
+                        }, onKeyDown: function (e) {
+                            if (e.key === 'Enter')
+                                onEnter(e);
+                        }, placeholder: '', disabled: disabled, value: rawValue, ref: setRef, autoComplete: 'off', type: showPassword ? 'text' : 'password', onFocus: iosScrollOnFocus }), rawValue && (jsx("div", __assign({ css: {
+                            position: 'absolute',
+                            cursor: 'pointer',
+                            insetInlineEnd: "".concat(spacing, "px"),
+                            // We need to subtract half the height of the icon to center it
+                            top: 'calc(50% - 12px)',
+                            zIndex: FORM_Z_INDEX
+                        }, onClick: function () { return setShowPassword(function (prev) { return !prev; }); }, "aria-label": 'Toggle password visibility' }, { children: showPassword ? jsx(ShowEyeIcon, {}) : jsx(ShowEyeIcon$1, {}) }))), customBorder, jsx(Placeholder, { value: rawValue, element: element, responsiveStyles: responsiveStyles, repeatIndex: repeatIndex }), jsx(InlineTooltip, { containerRef: containerRef, id: element.id, text: element.properties.tooltipText, responsiveStyles: responsiveStyles, repeat: element.repeat })] }))] })));
+}
+var index = memo(PasswordField);
+
+export { index as default };