@feathery/react 2.6.8 → 2.8.0

package/dist/fthry_index.mE9gZkgT.js

@@ -0,0 +1,55 @@
+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.F6BXSHA5.js';
+import { memo, useState, useRef } from 'react';
+import { P as Placeholder } from './fthry_Placeholder.DLtEoCLC.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.AGcWhuhV.js';
+import { S as ShowEyeIcon, a as ShowEyeIcon$1 } from './fthry_ShowEyeIcon.CkEvtp1W.js';
+import 'react/jsx-runtime';
+import 'react-dom/client';
+import 'stream';
+import 'events';
+import 'buffer';
+import 'util';
+import 'react-dom';
+import './fthry_Overlay.X0blINpo.js';
+
+function 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 };