npm - @feathery/react - Versions diffs - 2.13.0 → 2.15.0 - Mend

@feathery/react 2.13.0 → 2.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1772) hide show

package/cjs/fthry_index.CfGx505W.js ADDED Viewed

@@ -0,0 +1,215 @@
+'use strict';
+var index$1 = require('./fthry_index.B5Nc9EIn.js');
+var React = require('react');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+var Placeholder = function () { return (index$1.jsx("div", index$1.__assign({ style: {
+        padding: '16px',
+        border: '2px dashed #d1d5db',
+        borderRadius: '4px',
+        textAlign: 'center'
+    } }, { children: index$1.jsxs("div", index$1.__assign({ style: { color: '#4b5563' } }, { children: [index$1.jsx("div", index$1.__assign({ style: { fontSize: '14px' } }, { children: "Custom Component" })), index$1.jsx("div", index$1.__assign({ style: { fontSize: '12px', marginTop: '4px' } }, { children: "No code provided" }))] })) }))); };
+var Loading = function () { return (index$1.jsx("div", index$1.__assign({ style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        padding: '8px',
+        backgroundColor: '#dbeafe',
+        color: '#2563eb',
+        fontSize: '14px'
+    } }, { children: "Loading..." }))); };
+var Error = function (_a) {
+    var error = _a.error;
+    return (index$1.jsxs("div", index$1.__assign({ style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            padding: '8px',
+            backgroundColor: '#fee2e2',
+            color: '#dc2626',
+            fontSize: '14px'
+        } }, { children: ["Error: ", error] })));
+};
+var Status = { Placeholder: Placeholder, Loading: Loading, Error: Error };
+// Extract package names and URLs imported in the custom component
+var extractImports = function (code) {
+    var lines = code.split('\n');
+    var imports = new Set();
+    lines.forEach(function (line) {
+        line = line.trim();
+        if (line.startsWith('import')) {
+            var match = line.match(/from\s+['"]([^'"]+)['"]/);
+            if (match && match[1] !== 'react') {
+                imports.add(match[1]);
+            }
+        }
+    });
+    return Array.from(imports);
+};
+var isValidUrl = function (str) {
+    try {
+        // eslint-disable-next-line no-new
+        new URL(str);
+        return true;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+// Build an importmap script based on the list of packages imported
+var createImportMap = function (imports) {
+    var importEntries = imports.map(function (importPath) {
+        // Already a full URL, import directly
+        if (isValidUrl(importPath)) {
+            return "\"".concat(importPath, "\": \"").concat(importPath, "\"");
+        }
+        // Default to esm.sh for npm packages
+        return "\"".concat(importPath, "\": \"https://esm.sh/").concat(importPath, "/?external=react\"");
+    });
+    return "{\n  \"imports\": {\n    \"react\": \"https://esm.sh/react@18.2.0\",\n    \"react-dom\": \"https://esm.sh/react-dom@18.2.0\",\n    \"react-dom/client\": \"https://esm.sh/react-dom@18.2.0/client\",\n    \"react/jsx-runtime\": \"https://esm.sh/react@18.2.0/jsx-runtime\"".concat(imports.length ? ',' : '', "\n    ").concat(importEntries.join(',\n'), "\n  }\n}");
+};
+var createTemplate = function (code, initialValue, elementId) { return "\n<!DOCTYPE html>\n<html>\n  <head>\n    <script src=\"https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      \n      body {\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n        line-height: 1.5;\n        overflow: hidden;\n      }\n\n      #root {\n        min-height: 100vh;\n        width: 100%;\n      }\n    </style>\n    <script type=\"importmap\">\n      ".concat(createImportMap(extractImports(code)), "\n    </script>\n    <script type=\"module\">\n      import React from 'react';\n      import { createRoot } from 'react-dom/client';\n\n      // Store the elementId for use in postMessage\n      window.elementId = '").concat(elementId, "';\n\n      (async () => {\n        try {\n          const transformedCode = Babel.transform(\n            `").concat(code, "`,\n            {\n              presets: ['react'],\n              filename: 'dynamic.jsx'\n            }\n          ).code;\n\n          // Create a blob URL for the transformed code\n          const blob = new Blob([transformedCode], { type: 'text/javascript' });\n          const moduleUrl = URL.createObjectURL(blob);\n\n          // Import the component\n          const { default: UserComponent } = await import(moduleUrl);\n\n          // Set up the root and store it\n          const container = document.getElementById('root');\n          const root = createRoot(container);\n          window.rootRef = root;\n\n          window.parent.postMessage({ \n            type: 'LOADING_COMPLETE',\n            elementId: window.elementId\n          }, '*');\n\n          // Handle resize\n          const resizeObserver = new ResizeObserver(entries => {\n            const height = entries[0].contentRect.height;\n            window.parent.postMessage({ \n              type: 'resize', \n              height,\n              elementId: window.elementId\n            }, '*');\n          });\n          \n          resizeObserver.observe(container);\n\n          // Store references for updates\n          window.React = React;\n          window.UserComponent = UserComponent;\n        } catch (err) {\n          console.error('Error:', err);\n          window.parent.postMessage({ \n            type: 'error',\n            error: `${err.name}: ${err.message}`,\n            elementId: window.elementId\n          }, '*');\n        }\n      })();\n    </script>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>\n"); };
+function useCustomComponentIframe(_a) {
+    var _this = this;
+    var componentCode = _a.componentCode, elementId = _a.elementId, value = _a.value, onChange = _a.onChange, customProps = _a.customProps;
+    var iframeRef = React.useRef(null);
+    var rootRef = React.useRef(null);
+    var _b = index$1.__read(React.useState(null), 2), error = _b[0], setError = _b[1];
+    var _c = index$1.__read(React.useState(true), 2), loading = _c[0], setLoading = _c[1];
+    var renderComponent = function (overrideLoading) {
+        var _a, _b;
+        if (overrideLoading === void 0) { overrideLoading = false; }
+        var iframe = iframeRef.current;
+        if (!iframe || !rootRef.current || (loading && !overrideLoading))
+            return;
+        var root = rootRef.current;
+        var React = (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.React;
+        var UserComponent = (_b = iframe.contentWindow) === null || _b === void 0 ? void 0 : _b.UserComponent;
+        if (React && UserComponent) {
+            var handleChange = function (newValue) {
+                var _a;
+                (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.parent.postMessage({
+                    type: 'valueChange',
+                    value: newValue,
+                    elementId: elementId
+                }, index$1.featheryWindow().location.origin);
+            };
+            root.render(React.createElement(React.StrictMode, null, React.createElement(UserComponent, index$1.__assign({ value: value, onChange: handleChange }, customProps))));
+        }
+    };
+    // Create iframe whenever code changes
+    React.useEffect(function () {
+        var setupIframe = function () { return index$1.__awaiter(_this, void 0, void 0, function () {
+            var iframe, template, handleMessage_1, error_1;
+            return index$1.__generator(this, function (_a) {
+                iframe = iframeRef.current;
+                if (!iframe)
+                    return [2 /*return*/];
+                try {
+                    setLoading(true);
+                    template = createTemplate(componentCode, value, elementId);
+                    handleMessage_1 = function (event) {
+                        var _a, _b, _c, _d, _e;
+                        // Verify the message is intended for this element
+                        if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.elementId) !== elementId)
+                            return;
+                        if (event.data.type === 'LOADING_COMPLETE') {
+                            setLoading(false);
+                            setError(null);
+                            rootRef.current = (_b = iframe.contentWindow) === null || _b === void 0 ? void 0 : _b.rootRef;
+                            renderComponent(true);
+                        }
+                        else if ((_c = event.data) === null || _c === void 0 ? void 0 : _c.error) {
+                            setError(event.data.error);
+                            setLoading(false);
+                        }
+                        else if (((_d = event.data) === null || _d === void 0 ? void 0 : _d.type) === 'resize' && iframe) {
+                            iframe.style.height = "".concat(event.data.height, "px");
+                        }
+                        else if (((_e = event.data) === null || _e === void 0 ? void 0 : _e.type) === 'valueChange') {
+                            onChange === null || onChange === void 0 ? void 0 : onChange(event.data.value);
+                        }
+                    };
+                    index$1.featheryWindow().addEventListener('message', handleMessage_1);
+                    iframe.srcdoc = template;
+                    return [2 /*return*/, function () {
+                            index$1.featheryWindow().removeEventListener('message', handleMessage_1);
+                        }];
+                }
+                catch (err) {
+                    error_1 = err;
+                    setError(error_1.message);
+                    setLoading(false);
+                }
+                return [2 /*return*/];
+            });
+        }); };
+        setupIframe();
+    }, [componentCode]);
+    // Update component props when value changes
+    React.useEffect(function () {
+        renderComponent();
+    }, [value, loading, customProps]);
+    return {
+        iframeRef: iframeRef,
+        error: error,
+        loading: loading
+    };
+}
+var CustomField = function (_a) {
+    var _b;
+    var element = _a.element, _c = _a.elementProps, elementProps = _c === void 0 ? {} : _c, responsiveStyles = _a.responsiveStyles, onChange = _a.onChange, rawValue = _a.rawValue, required = _a.required, disabled = _a.disabled, fieldStyles = _a.fieldStyles, editMode = _a.editMode, rightToLeft = _a.rightToLeft, index = _a.index;
+    var componentCode = element.servar.metadata.code;
+    var isCodeEmpty = !componentCode || componentCode.trim() === '';
+    var showPlaceholder = isCodeEmpty && editMode;
+    var customFieldProps = React.useMemo(function () {
+        var _a;
+        return ({
+            fieldProperties: {
+                description: element.servar.name,
+                required: required,
+                disabled: disabled,
+                custom: ((_a = element.servar.metadata) === null || _a === void 0 ? void 0 : _a.custom) || {},
+                aria_label: element.properties.aria_label
+            },
+            fieldStyles: fieldStyles || {},
+            formContext: {
+                rightToLeft: rightToLeft || false,
+                editMode: editMode || false
+            }
+        });
+    }, [
+        required,
+        disabled,
+        fieldStyles,
+        rightToLeft,
+        editMode,
+        (_b = element.servar.metadata) === null || _b === void 0 ? void 0 : _b.custom
+    ]);
+    var _d = useCustomComponentIframe({
+        componentCode: element.servar.metadata.code,
+        elementId: index != null ? "".concat(element.id, "[").concat(index, "]") : element.id,
+        value: rawValue,
+        onChange: onChange,
+        customProps: customFieldProps
+    }), iframeRef = _d.iframeRef, error = _d.error, loading = _d.loading;
+    return (index$1.jsxs("div", index$1.__assign({ css: index$1.__assign({ maxWidth: '100%', width: '100%', height: 'auto', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles === null || responsiveStyles === void 0 ? void 0 : responsiveStyles.getTarget('fc')) }, elementProps, { children: [showPlaceholder ? (index$1.jsx(Status.Placeholder, {})) : (index$1.jsxs(index$1.Fragment, { children: [error && index$1.jsx(Status.Error, { error: error }), loading && index$1.jsx(Status.Loading, {}), index$1.jsx("iframe", { ref: iframeRef, sandbox: 'allow-scripts allow-same-origin', style: {
+                            width: '100%',
+                            border: 'none',
+                            backgroundColor: 'transparent',
+                            overflow: 'hidden',
+                            display: 'block'
+                        } })] })), index$1.jsx(index$1.ErrorInput, { id: element.servar.key, name: element.servar.key, "aria-label": element.properties.aria_label })] })));
+};
+var index = React.memo(CustomField);
+exports.default = index;

package/cjs/fthry_index.CgatqFlS.js ADDED Viewed

@@ -0,0 +1,45 @@
+'use strict';
+var index = require('./fthry_index.B5Nc9EIn.js');
+var React = require('react');
+var styles = require('./fthry_styles.twMOjtIt.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+function SliderField(_a) {
+    var _b;
+    var _c, _d;
+    var element = _a.element, fieldLabel = _a.fieldLabel, responsiveStyles = _a.responsiveStyles, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.fieldVal, fieldVal = _f === void 0 ? 0 : _f, editMode = _a.editMode, rightToLeft = _a.rightToLeft, _g = _a.onChange, onChange = _g === void 0 ? function () { } : _g, _h = _a.elementProps, elementProps = _h === void 0 ? {} : _h, children = _a.children;
+    var _j = index.__read(React.useState(fieldVal), 2), internalValue = _j[0], setInternalValue = _j[1];
+    React.useEffect(function () {
+        if (fieldVal !== internalValue)
+            setInternalValue(fieldVal);
+    }, [fieldVal]);
+    var servar = element.servar;
+    var minVal = (_c = servar.min_length) !== null && _c !== void 0 ? _c : 0;
+    var maxVal = (_d = servar.max_length) !== null && _d !== void 0 ? _d : 100;
+    var minLabel = servar.metadata.min_val_label || minVal;
+    var maxLabel = servar.metadata.max_val_label || maxVal;
+    var stepSize = servar.metadata.step_size || 1;
+    return (index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode || disabled ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')), { '&:hover .current-value': {
+                opacity: 1,
+                transitionDelay: '0ms'
+            } }) }, elementProps, { children: [children, fieldLabel, index.jsx(styles.SliderStyles, { customStyles: (_b = {},
+                    _b['.rc-slider'.repeat(2)] = index.__assign({ width: 'calc(100% - 8px)', userSelect: 'none' }, responsiveStyles.getTarget('field')),
+                    _b['.rc-slider-handle'.repeat(2)] = index.__assign(index.__assign({ opacity: 1 }, responsiveStyles.getTarget('handle')), { transitionProperty: 'color, background-color, border-color !important', '&:hover': index.hoverStylesGuard(responsiveStyles.getTarget('hover')) }),
+                    // Override default css that repeats 3 times
+                    _b['.rc-slider-handle-dragging'.repeat(4)] = index.__assign({ boxShadow: 'none' }, responsiveStyles.getTarget('active')),
+                    _b['div.rc-slider-track'] = responsiveStyles.getTarget('track'),
+                    _b) }), index.jsx("div", index.__assign({ css: { width: '100%', display: 'flex', justifyContent: 'center' } }, { children: index.jsx(styles.Slider, { value: internalValue, min: minVal, max: maxVal, step: stepSize, reverse: rightToLeft, onChange: function (val) {
+                        setInternalValue(val);
+                        onChange(val);
+                    }, "aria-label": element.properties.aria_label }) })), index.jsxs("div", index.__assign({ css: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    position: 'relative'
+                } }, { children: [index.jsx("span", { children: minLabel }), index.jsx("span", index.__assign({ css: { opacity: 0, transition: '0.2s ease opacity 0.3s' }, className: 'current-value' }, { children: internalValue })), index.jsx("span", { children: maxLabel })] }))] })));
+}
+exports.default = SliderField;

package/cjs/fthry_index.CoR2X1u6.js ADDED Viewed

@@ -0,0 +1,292 @@
+'use strict';
+var index$1 = require('./fthry_index.B5Nc9EIn.js');
+var React = require('react');
+var Placeholder = require('./fthry_Placeholder.xDn0I29f.js');
+var InlineTooltip = require('./fthry_InlineTooltip.CRRFOiO4.js');
+var Overlay = require('./fthry_Overlay.CMYptYVH.js');
+var useElementSize = require('./fthry_useElementSize.CMss2qLc.js');
+var ShowEyeIcon = require('./fthry_ShowEyeIcon.COZczYEG.js');
+var input = require('./fthry_input.DjhEftHE.js');
+require('react/jsx-runtime');
+require('react-dom/client');
+require('jszip');
+require('react-dom');
+require('./fthry_index.CQ3OgNZu.js');
+function TextAutocomplete$1(_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 = React.useRef(null);
+    var dropdownWidth = useElementSize.useElementSize(triggerRef).width;
+    if (allOptions.length === 0)
+        return children;
+    return (index$1.jsxs("div", index$1.__assign({ ref: triggerRef, css: { height: '100%', width: '100%' } }, { children: [children, options.length > 0 && showOptions && (index$1.jsx(Overlay.Overlay, index$1.__assign({ targetRef: triggerRef, containerRef: containerRef, show: true, placement: 'bottom-start', onHide: onHide }, { children: index$1.jsx("ul", index$1.__assign({ css: index$1.__assign({ zIndex: index$1.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 (index$1.jsx("li", index$1.__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 = React.memo(TextAutocomplete$1);
+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 index$1.__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 index$1.__assign({ type: 'email', pattern: index$1.emailPatternStr, maxLength: maxLength }, constraints);
+        case 'gmap_zip':
+            if (autoComplete && !constraints.autoComplete) {
+                constraints.autoComplete = 'postal-code';
+            }
+            return index$1.__assign(index$1.__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 index$1.__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 index$1.__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 = index$1.__read(React.useState(false), 2), showAutocomplete = _l[0], setShowAutocomplete = _l[1];
+    // Hide SSNs by default
+    var _m = index$1.__read(React.useState(false), 2), showPassword = _m[0], setShowPassword = _m[1];
+    var _o = index$1.useBorder({
+        element: element,
+        error: inlineError,
+        breakpoint: responsiveStyles.getMobileBreakpoint()
+    }), borderStyles = _o.borderStyles, customBorder = _o.customBorder, borderId = _o.borderId;
+    var containerRef = React.useRef(null);
+    var listItemRef = React.useRef([]);
+    var inputRef = React.useRef(null);
+    var fieldVal = index$1.getFieldValue(element).value;
+    var rawValue = index$1.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 (index$1.jsxs("div", index$1.__assign({ ref: containerRef, css: index$1.__assign({ maxWidth: '100%', width: '100%', height: '100%', position: 'relative', pointerEvents: editMode ? 'none' : 'auto' }, responsiveStyles.getTarget('fc')) }, elementProps, { children: [children, fieldLabel, index$1.jsxs("div", index$1.__assign({ css: index$1.__assign(index$1.__assign(index$1.__assign({ position: 'relative', width: '100%', whiteSpace: 'nowrap',
+                    // Prevent placeholder overflow
+                    overflowX: 'clip' }, responsiveStyles.getTarget('sub-fc')), (disabled ? responsiveStyles.getTarget('disabled') : {})), { '&:focus-within': index$1.__assign(index$1.__assign({}, responsiveStyles.getTarget('active')), borderStyles.active), '&:hover': index$1.hoverStylesGuard(disabled
+                        ? {}
+                        : index$1.__assign(index$1.__assign({}, responsiveStyles.getTarget('hover')), borderStyles.hover)) }) }, { children: [index$1.jsx(TextAutocomplete, index$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: index$1.jsx(input.IMaskInput, index$1.__assign({ id: servar.key, name: servar.key, ref: inputRef, css: index$1.__assign(index$1.__assign(index$1.__assign({ position: 'relative',
+                                // Position input above the border div
+                                zIndex: index$1.FORM_Z_INDEX, height: '100%', width: '100%', border: 'none', margin: 0, backgroundColor: 'transparent' }, index$1.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: index$1.iosScrollOnFocus, inputRef: setRef }, getInputProps(servar, options, autoComplete === 'on'), getMaskProps(servar, rawValue, showPassword), { onAccept: onAccept })) })), servar.type === 'ssn' && rawValue && (index$1.jsx("div", index$1.__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: index$1.FORM_Z_INDEX
+                        }, onClick: function () { return setShowPassword(function (prev) { return !prev; }); }, "aria-label": 'Toggle SSN visibility' }, { children: showPassword ? index$1.jsx(ShowEyeIcon.ShowEyeIcon, {}) : index$1.jsx(ShowEyeIcon.ShowEyeIcon$1, {}) }))), customBorder, index$1.jsx(Placeholder.Placeholder, { value: rawValue, element: element, responsiveStyles: responsiveStyles, repeatIndex: repeatIndex }), index$1.jsx(InlineTooltip.InlineTooltip, { containerRef: containerRef, id: element.id, text: element.properties.tooltipText, responsiveStyles: responsiveStyles, repeat: element.repeat })] }))] })));
+}
+var index = React.memo(TextField);
+exports.default = index;