@iabbb/bds-react 0.56.2 → 0.58.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.
- package/FieldPasswordReveal/FieldPasswordReveal.d.ts +16 -0
- package/FieldPasswordReveal/index.cjs +202 -0
- package/FieldPasswordReveal/index.cjs.map +1 -0
- package/FieldPasswordReveal/index.d.ts +1 -0
- package/FieldPasswordReveal/index.mjs +179 -0
- package/FieldPasswordReveal/index.mjs.map +1 -0
- package/FieldPasswordReveal/package.json +7 -0
- package/package.json +3 -3
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export type FieldPasswordRevealProps = {
|
|
3
|
+
error?: string;
|
|
4
|
+
hint?: React.ReactNode | string;
|
|
5
|
+
id?: string;
|
|
6
|
+
isOptional?: boolean;
|
|
7
|
+
label: string;
|
|
8
|
+
} & React.ComponentPropsWithoutRef<'input'>;
|
|
9
|
+
declare const FieldPasswordReveal: React.ForwardRefExoticComponent<{
|
|
10
|
+
error?: string;
|
|
11
|
+
hint?: React.ReactNode | string;
|
|
12
|
+
id?: string;
|
|
13
|
+
isOptional?: boolean;
|
|
14
|
+
label: string;
|
|
15
|
+
} & Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
16
|
+
export default FieldPasswordReveal;
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
|
|
7
|
+
function _interopNamespaceDefault(e) {
|
|
8
|
+
var n = Object.create(null);
|
|
9
|
+
if (e) {
|
|
10
|
+
Object.keys(e).forEach(function (k) {
|
|
11
|
+
if (k !== 'default') {
|
|
12
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
13
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () { return e[k]; }
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
n.default = e;
|
|
21
|
+
return Object.freeze(n);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
25
|
+
|
|
26
|
+
function _arrayLikeToArray(r, a) {
|
|
27
|
+
(null == a || a > r.length) && (a = r.length);
|
|
28
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
29
|
+
return n;
|
|
30
|
+
}
|
|
31
|
+
function _arrayWithHoles(r) {
|
|
32
|
+
if (Array.isArray(r)) return r;
|
|
33
|
+
}
|
|
34
|
+
function _extends() {
|
|
35
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
36
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
37
|
+
var t = arguments[e];
|
|
38
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
39
|
+
}
|
|
40
|
+
return n;
|
|
41
|
+
}, _extends.apply(null, arguments);
|
|
42
|
+
}
|
|
43
|
+
function _iterableToArrayLimit(r, l) {
|
|
44
|
+
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
45
|
+
if (null != t) {
|
|
46
|
+
var e,
|
|
47
|
+
n,
|
|
48
|
+
i,
|
|
49
|
+
u,
|
|
50
|
+
a = [],
|
|
51
|
+
f = true,
|
|
52
|
+
o = false;
|
|
53
|
+
try {
|
|
54
|
+
if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
55
|
+
} catch (r) {
|
|
56
|
+
o = true, n = r;
|
|
57
|
+
} finally {
|
|
58
|
+
try {
|
|
59
|
+
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
60
|
+
} finally {
|
|
61
|
+
if (o) throw n;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return a;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
function _nonIterableRest() {
|
|
68
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
69
|
+
}
|
|
70
|
+
function _objectWithoutProperties(e, t) {
|
|
71
|
+
if (null == e) return {};
|
|
72
|
+
var o,
|
|
73
|
+
r,
|
|
74
|
+
i = _objectWithoutPropertiesLoose(e, t);
|
|
75
|
+
if (Object.getOwnPropertySymbols) {
|
|
76
|
+
var n = Object.getOwnPropertySymbols(e);
|
|
77
|
+
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
|
78
|
+
}
|
|
79
|
+
return i;
|
|
80
|
+
}
|
|
81
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
82
|
+
if (null == r) return {};
|
|
83
|
+
var t = {};
|
|
84
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
85
|
+
if (-1 !== e.indexOf(n)) continue;
|
|
86
|
+
t[n] = r[n];
|
|
87
|
+
}
|
|
88
|
+
return t;
|
|
89
|
+
}
|
|
90
|
+
function _slicedToArray(r, e) {
|
|
91
|
+
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
92
|
+
}
|
|
93
|
+
function _unsupportedIterableToArray(r, a) {
|
|
94
|
+
if (r) {
|
|
95
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
96
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
97
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
var _excluded$1 = ["className", "children"];
|
|
102
|
+
function ErrorMessage(_ref) {
|
|
103
|
+
var className = _ref.className,
|
|
104
|
+
children = _ref.children,
|
|
105
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
106
|
+
return /*#__PURE__*/React__namespace.createElement("span", _extends({
|
|
107
|
+
className: ['bds-error', className].filter(function (x) {
|
|
108
|
+
return x;
|
|
109
|
+
}).join(' ')
|
|
110
|
+
}, props), /*#__PURE__*/React__namespace.createElement("svg", {
|
|
111
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
112
|
+
viewBox: "0 0 512 512",
|
|
113
|
+
"aria-hidden": "true",
|
|
114
|
+
height: "1em",
|
|
115
|
+
width: "1em",
|
|
116
|
+
fill: "currentColor"
|
|
117
|
+
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
118
|
+
d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z"
|
|
119
|
+
})), children);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
var _excluded = ["className", "error", "hint", "id", "isOptional", "label"];
|
|
123
|
+
var FieldPasswordReveal = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
|
|
124
|
+
var className = _ref.className,
|
|
125
|
+
error = _ref.error,
|
|
126
|
+
hint = _ref.hint,
|
|
127
|
+
id = _ref.id,
|
|
128
|
+
_ref$isOptional = _ref.isOptional,
|
|
129
|
+
isOptional = _ref$isOptional === void 0 ? false : _ref$isOptional,
|
|
130
|
+
label = _ref.label,
|
|
131
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
132
|
+
id = id !== null && id !== void 0 ? id : props.name;
|
|
133
|
+
var _React$useState = React__namespace.useState(false),
|
|
134
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
135
|
+
showPasswordRevealButton = _React$useState2[0],
|
|
136
|
+
setShowPasswordRevealButton = _React$useState2[1];
|
|
137
|
+
var _React$useState3 = React__namespace.useState(false),
|
|
138
|
+
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
139
|
+
revealPassword = _React$useState4[0],
|
|
140
|
+
setRevealPassword = _React$useState4[1];
|
|
141
|
+
React__namespace.useEffect(function () {
|
|
142
|
+
// JavaScript support is not necessarily a given.
|
|
143
|
+
// Instead of showing a button that may not do anything, it's better to wait until JS has loaded.
|
|
144
|
+
setShowPasswordRevealButton(true);
|
|
145
|
+
}, []);
|
|
146
|
+
var handleButtonClick = function handleButtonClick() {
|
|
147
|
+
setRevealPassword(!revealPassword);
|
|
148
|
+
};
|
|
149
|
+
var errorId = React__namespace.useId();
|
|
150
|
+
var hintId = React__namespace.useId();
|
|
151
|
+
return /*#__PURE__*/React__namespace.createElement("div", {
|
|
152
|
+
className: "bds-form-group"
|
|
153
|
+
}, /*#__PURE__*/React__namespace.createElement("label", {
|
|
154
|
+
htmlFor: id
|
|
155
|
+
}, label, isOptional && ' (optional)'), hint && /*#__PURE__*/React__namespace.createElement("span", {
|
|
156
|
+
className: "bds-hint",
|
|
157
|
+
id: hintId
|
|
158
|
+
}, hint), error && /*#__PURE__*/React__namespace.createElement(ErrorMessage, {
|
|
159
|
+
id: errorId
|
|
160
|
+
}, error), /*#__PURE__*/React__namespace.createElement("div", {
|
|
161
|
+
className: "bds-password-reveal"
|
|
162
|
+
}, /*#__PURE__*/React__namespace.createElement("input", _extends({
|
|
163
|
+
"aria-invalid": error ? true : undefined,
|
|
164
|
+
"aria-describedby": error && hint ? "".concat(hintId, " ").concat(errorId) : error ? errorId : hint ? hintId : undefined,
|
|
165
|
+
className: ['bds-text-input', className].filter(function (x) {
|
|
166
|
+
return x;
|
|
167
|
+
}).join(' '),
|
|
168
|
+
id: id,
|
|
169
|
+
type: revealPassword ? 'text' : 'password'
|
|
170
|
+
}, props)), showPasswordRevealButton && /*#__PURE__*/React__namespace.createElement("button", {
|
|
171
|
+
onClick: handleButtonClick,
|
|
172
|
+
type: "button"
|
|
173
|
+
}, revealPassword ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("svg", {
|
|
174
|
+
"aria-hidden": "true",
|
|
175
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
176
|
+
fill: "currentColor",
|
|
177
|
+
focusable: "false",
|
|
178
|
+
viewBox: "0 0 640 512",
|
|
179
|
+
width: "1em",
|
|
180
|
+
height: "1em"
|
|
181
|
+
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
182
|
+
d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"
|
|
183
|
+
})), /*#__PURE__*/React__namespace.createElement("span", {
|
|
184
|
+
className: "visually-hidden"
|
|
185
|
+
}, "Hide password")) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("svg", {
|
|
186
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
187
|
+
"aria-hidden": "true",
|
|
188
|
+
fill: "currentColor",
|
|
189
|
+
focusable: "false",
|
|
190
|
+
viewBox: "0 0 576 512",
|
|
191
|
+
height: "1em",
|
|
192
|
+
width: "1em"
|
|
193
|
+
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
194
|
+
d: "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"
|
|
195
|
+
})), /*#__PURE__*/React__namespace.createElement("span", {
|
|
196
|
+
className: "visually-hidden"
|
|
197
|
+
}, "Show password")))));
|
|
198
|
+
});
|
|
199
|
+
FieldPasswordReveal.displayName = 'FieldPasswordReveal';
|
|
200
|
+
|
|
201
|
+
exports.default = FieldPasswordReveal;
|
|
202
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/ErrorMessage/ErrorMessage.tsx","../../src/FieldPasswordReveal/FieldPasswordReveal.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: following this rule does not work for some reason\nimport * as React from 'react';\n\nexport default function ErrorMessage({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>) {\n return (\n <span className={['bds-error', className].filter((x) => x).join(' ')} {...props}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 512 512\"\n aria-hidden=\"true\"\n height=\"1em\"\n width=\"1em\"\n fill=\"currentColor\"\n >\n <path d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z\" />\n </svg>\n {children}\n </span>\n );\n}\n","import * as React from 'react';\n\nimport ErrorMessage from '../ErrorMessage';\n\nexport type FieldPasswordRevealProps = {\n error?: string;\n hint?: React.ReactNode | string;\n id?: string;\n isOptional?: boolean;\n label: string;\n} & React.ComponentPropsWithoutRef<'input'>;\n\nconst FieldPasswordReveal = React.forwardRef<HTMLInputElement, FieldPasswordRevealProps>(\n ({ className, error, hint, id, isOptional = false, label, ...props }, ref) => {\n id = id ?? props.name;\n\n const [showPasswordRevealButton, setShowPasswordRevealButton] = React.useState(false);\n const [revealPassword, setRevealPassword] = React.useState(false);\n\n React.useEffect(() => {\n // JavaScript support is not necessarily a given.\n // Instead of showing a button that may not do anything, it's better to wait until JS has loaded.\n setShowPasswordRevealButton(true);\n }, []);\n\n const handleButtonClick = () => {\n setRevealPassword(!revealPassword);\n };\n\n const errorId = React.useId();\n const hintId = React.useId();\n\n return (\n <div className=\"bds-form-group\">\n <label htmlFor={id}>\n {label}\n {isOptional && ' (optional)'}\n </label>\n {hint && (\n <span className=\"bds-hint\" id={hintId}>\n {hint}\n </span>\n )}\n {error && <ErrorMessage id={errorId}>{error}</ErrorMessage>}\n <div className=\"bds-password-reveal\">\n <input\n aria-invalid={error ? true : undefined}\n aria-describedby={error && hint ? `${hintId} ${errorId}` : error ? errorId : hint ? hintId : undefined}\n className={['bds-text-input', className].filter((x) => x).join(' ')}\n id={id}\n type={revealPassword ? 'text' : 'password'}\n {...props}\n />\n {showPasswordRevealButton && (\n <button onClick={handleButtonClick} type=\"button\">\n {revealPassword ? (\n <>\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n focusable=\"false\"\n viewBox=\"0 0 640 512\"\n width=\"1em\"\n height=\"1em\"\n >\n <path d=\"M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z\" />\n </svg>\n <span className=\"visually-hidden\">Hide password</span>\n </>\n ) : (\n <>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n focusable=\"false\"\n viewBox=\"0 0 576 512\"\n height=\"1em\"\n width=\"1em\"\n >\n <path d=\"M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z\" />\n </svg>\n <span className=\"visually-hidden\">Show password</span>\n </>\n )}\n </button>\n )}\n </div>\n </div>\n );\n },\n);\n\nFieldPasswordReveal.displayName = 'FieldPasswordReveal';\n\nexport default FieldPasswordReveal;\n"],"names":["ErrorMessage","_ref","className","children","props","_objectWithoutProperties","_excluded","React","createElement","_extends","filter","x","join","xmlns","viewBox","height","width","fill","d","FieldPasswordReveal","forwardRef","ref","error","hint","id","_ref$isOptional","isOptional","label","name","_React$useState","useState","_React$useState2","_slicedToArray","showPasswordRevealButton","setShowPasswordRevealButton","_React$useState3","_React$useState4","revealPassword","setRevealPassword","useEffect","handleButtonClick","errorId","useId","hintId","htmlFor","undefined","concat","type","onClick","Fragment","focusable","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './FieldPasswordReveal';
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
function _arrayLikeToArray(r, a) {
|
|
4
|
+
(null == a || a > r.length) && (a = r.length);
|
|
5
|
+
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
|
|
6
|
+
return n;
|
|
7
|
+
}
|
|
8
|
+
function _arrayWithHoles(r) {
|
|
9
|
+
if (Array.isArray(r)) return r;
|
|
10
|
+
}
|
|
11
|
+
function _extends() {
|
|
12
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
13
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
14
|
+
var t = arguments[e];
|
|
15
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
16
|
+
}
|
|
17
|
+
return n;
|
|
18
|
+
}, _extends.apply(null, arguments);
|
|
19
|
+
}
|
|
20
|
+
function _iterableToArrayLimit(r, l) {
|
|
21
|
+
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
|
|
22
|
+
if (null != t) {
|
|
23
|
+
var e,
|
|
24
|
+
n,
|
|
25
|
+
i,
|
|
26
|
+
u,
|
|
27
|
+
a = [],
|
|
28
|
+
f = true,
|
|
29
|
+
o = false;
|
|
30
|
+
try {
|
|
31
|
+
if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
|
|
32
|
+
} catch (r) {
|
|
33
|
+
o = true, n = r;
|
|
34
|
+
} finally {
|
|
35
|
+
try {
|
|
36
|
+
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
|
|
37
|
+
} finally {
|
|
38
|
+
if (o) throw n;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
return a;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
function _nonIterableRest() {
|
|
45
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
46
|
+
}
|
|
47
|
+
function _objectWithoutProperties(e, t) {
|
|
48
|
+
if (null == e) return {};
|
|
49
|
+
var o,
|
|
50
|
+
r,
|
|
51
|
+
i = _objectWithoutPropertiesLoose(e, t);
|
|
52
|
+
if (Object.getOwnPropertySymbols) {
|
|
53
|
+
var n = Object.getOwnPropertySymbols(e);
|
|
54
|
+
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
|
|
55
|
+
}
|
|
56
|
+
return i;
|
|
57
|
+
}
|
|
58
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
59
|
+
if (null == r) return {};
|
|
60
|
+
var t = {};
|
|
61
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
62
|
+
if (-1 !== e.indexOf(n)) continue;
|
|
63
|
+
t[n] = r[n];
|
|
64
|
+
}
|
|
65
|
+
return t;
|
|
66
|
+
}
|
|
67
|
+
function _slicedToArray(r, e) {
|
|
68
|
+
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
|
|
69
|
+
}
|
|
70
|
+
function _unsupportedIterableToArray(r, a) {
|
|
71
|
+
if (r) {
|
|
72
|
+
if ("string" == typeof r) return _arrayLikeToArray(r, a);
|
|
73
|
+
var t = {}.toString.call(r).slice(8, -1);
|
|
74
|
+
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
var _excluded$1 = ["className", "children"];
|
|
79
|
+
function ErrorMessage(_ref) {
|
|
80
|
+
var className = _ref.className,
|
|
81
|
+
children = _ref.children,
|
|
82
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
83
|
+
return /*#__PURE__*/React.createElement("span", _extends({
|
|
84
|
+
className: ['bds-error', className].filter(function (x) {
|
|
85
|
+
return x;
|
|
86
|
+
}).join(' ')
|
|
87
|
+
}, props), /*#__PURE__*/React.createElement("svg", {
|
|
88
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
89
|
+
viewBox: "0 0 512 512",
|
|
90
|
+
"aria-hidden": "true",
|
|
91
|
+
height: "1em",
|
|
92
|
+
width: "1em",
|
|
93
|
+
fill: "currentColor"
|
|
94
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
95
|
+
d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z"
|
|
96
|
+
})), children);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
var _excluded = ["className", "error", "hint", "id", "isOptional", "label"];
|
|
100
|
+
var FieldPasswordReveal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
101
|
+
var className = _ref.className,
|
|
102
|
+
error = _ref.error,
|
|
103
|
+
hint = _ref.hint,
|
|
104
|
+
id = _ref.id,
|
|
105
|
+
_ref$isOptional = _ref.isOptional,
|
|
106
|
+
isOptional = _ref$isOptional === void 0 ? false : _ref$isOptional,
|
|
107
|
+
label = _ref.label,
|
|
108
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
109
|
+
id = id !== null && id !== void 0 ? id : props.name;
|
|
110
|
+
var _React$useState = React.useState(false),
|
|
111
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
112
|
+
showPasswordRevealButton = _React$useState2[0],
|
|
113
|
+
setShowPasswordRevealButton = _React$useState2[1];
|
|
114
|
+
var _React$useState3 = React.useState(false),
|
|
115
|
+
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
|
116
|
+
revealPassword = _React$useState4[0],
|
|
117
|
+
setRevealPassword = _React$useState4[1];
|
|
118
|
+
React.useEffect(function () {
|
|
119
|
+
// JavaScript support is not necessarily a given.
|
|
120
|
+
// Instead of showing a button that may not do anything, it's better to wait until JS has loaded.
|
|
121
|
+
setShowPasswordRevealButton(true);
|
|
122
|
+
}, []);
|
|
123
|
+
var handleButtonClick = function handleButtonClick() {
|
|
124
|
+
setRevealPassword(!revealPassword);
|
|
125
|
+
};
|
|
126
|
+
var errorId = React.useId();
|
|
127
|
+
var hintId = React.useId();
|
|
128
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
129
|
+
className: "bds-form-group"
|
|
130
|
+
}, /*#__PURE__*/React.createElement("label", {
|
|
131
|
+
htmlFor: id
|
|
132
|
+
}, label, isOptional && ' (optional)'), hint && /*#__PURE__*/React.createElement("span", {
|
|
133
|
+
className: "bds-hint",
|
|
134
|
+
id: hintId
|
|
135
|
+
}, hint), error && /*#__PURE__*/React.createElement(ErrorMessage, {
|
|
136
|
+
id: errorId
|
|
137
|
+
}, error), /*#__PURE__*/React.createElement("div", {
|
|
138
|
+
className: "bds-password-reveal"
|
|
139
|
+
}, /*#__PURE__*/React.createElement("input", _extends({
|
|
140
|
+
"aria-invalid": error ? true : undefined,
|
|
141
|
+
"aria-describedby": error && hint ? "".concat(hintId, " ").concat(errorId) : error ? errorId : hint ? hintId : undefined,
|
|
142
|
+
className: ['bds-text-input', className].filter(function (x) {
|
|
143
|
+
return x;
|
|
144
|
+
}).join(' '),
|
|
145
|
+
id: id,
|
|
146
|
+
type: revealPassword ? 'text' : 'password'
|
|
147
|
+
}, props)), showPasswordRevealButton && /*#__PURE__*/React.createElement("button", {
|
|
148
|
+
onClick: handleButtonClick,
|
|
149
|
+
type: "button"
|
|
150
|
+
}, revealPassword ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
|
|
151
|
+
"aria-hidden": "true",
|
|
152
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
153
|
+
fill: "currentColor",
|
|
154
|
+
focusable: "false",
|
|
155
|
+
viewBox: "0 0 640 512",
|
|
156
|
+
width: "1em",
|
|
157
|
+
height: "1em"
|
|
158
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
159
|
+
d: "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z"
|
|
160
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
161
|
+
className: "visually-hidden"
|
|
162
|
+
}, "Hide password")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("svg", {
|
|
163
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
164
|
+
"aria-hidden": "true",
|
|
165
|
+
fill: "currentColor",
|
|
166
|
+
focusable: "false",
|
|
167
|
+
viewBox: "0 0 576 512",
|
|
168
|
+
height: "1em",
|
|
169
|
+
width: "1em"
|
|
170
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
171
|
+
d: "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"
|
|
172
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
173
|
+
className: "visually-hidden"
|
|
174
|
+
}, "Show password")))));
|
|
175
|
+
});
|
|
176
|
+
FieldPasswordReveal.displayName = 'FieldPasswordReveal';
|
|
177
|
+
|
|
178
|
+
export { FieldPasswordReveal as default };
|
|
179
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/ErrorMessage/ErrorMessage.tsx","../../src/FieldPasswordReveal/FieldPasswordReveal.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: following this rule does not work for some reason\nimport * as React from 'react';\n\nexport default function ErrorMessage({ className, children, ...props }: React.ComponentPropsWithoutRef<'span'>) {\n return (\n <span className={['bds-error', className].filter((x) => x).join(' ')} {...props}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 512 512\"\n aria-hidden=\"true\"\n height=\"1em\"\n width=\"1em\"\n fill=\"currentColor\"\n >\n <path d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z\" />\n </svg>\n {children}\n </span>\n );\n}\n","import * as React from 'react';\n\nimport ErrorMessage from '../ErrorMessage';\n\nexport type FieldPasswordRevealProps = {\n error?: string;\n hint?: React.ReactNode | string;\n id?: string;\n isOptional?: boolean;\n label: string;\n} & React.ComponentPropsWithoutRef<'input'>;\n\nconst FieldPasswordReveal = React.forwardRef<HTMLInputElement, FieldPasswordRevealProps>(\n ({ className, error, hint, id, isOptional = false, label, ...props }, ref) => {\n id = id ?? props.name;\n\n const [showPasswordRevealButton, setShowPasswordRevealButton] = React.useState(false);\n const [revealPassword, setRevealPassword] = React.useState(false);\n\n React.useEffect(() => {\n // JavaScript support is not necessarily a given.\n // Instead of showing a button that may not do anything, it's better to wait until JS has loaded.\n setShowPasswordRevealButton(true);\n }, []);\n\n const handleButtonClick = () => {\n setRevealPassword(!revealPassword);\n };\n\n const errorId = React.useId();\n const hintId = React.useId();\n\n return (\n <div className=\"bds-form-group\">\n <label htmlFor={id}>\n {label}\n {isOptional && ' (optional)'}\n </label>\n {hint && (\n <span className=\"bds-hint\" id={hintId}>\n {hint}\n </span>\n )}\n {error && <ErrorMessage id={errorId}>{error}</ErrorMessage>}\n <div className=\"bds-password-reveal\">\n <input\n aria-invalid={error ? true : undefined}\n aria-describedby={error && hint ? `${hintId} ${errorId}` : error ? errorId : hint ? hintId : undefined}\n className={['bds-text-input', className].filter((x) => x).join(' ')}\n id={id}\n type={revealPassword ? 'text' : 'password'}\n {...props}\n />\n {showPasswordRevealButton && (\n <button onClick={handleButtonClick} type=\"button\">\n {revealPassword ? (\n <>\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"currentColor\"\n focusable=\"false\"\n viewBox=\"0 0 640 512\"\n width=\"1em\"\n height=\"1em\"\n >\n <path d=\"M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z\" />\n </svg>\n <span className=\"visually-hidden\">Hide password</span>\n </>\n ) : (\n <>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n focusable=\"false\"\n viewBox=\"0 0 576 512\"\n height=\"1em\"\n width=\"1em\"\n >\n <path d=\"M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z\" />\n </svg>\n <span className=\"visually-hidden\">Show password</span>\n </>\n )}\n </button>\n )}\n </div>\n </div>\n );\n },\n);\n\nFieldPasswordReveal.displayName = 'FieldPasswordReveal';\n\nexport default FieldPasswordReveal;\n"],"names":["ErrorMessage","_ref","className","children","props","_objectWithoutProperties","_excluded","React","createElement","_extends","filter","x","join","xmlns","viewBox","height","width","fill","d","FieldPasswordReveal","forwardRef","ref","error","hint","id","_ref$isOptional","isOptional","label","name","_React$useState","useState","_React$useState2","_slicedToArray","showPasswordRevealButton","setShowPasswordRevealButton","_React$useState3","_React$useState4","revealPassword","setRevealPassword","useEffect","handleButtonClick","errorId","useId","hintId","htmlFor","undefined","concat","type","onClick","Fragment","focusable","displayName"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iabbb/bds-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.58.0",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "cross-env NODE_ENV=production rollup -c",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"cross-env": "7.0.3",
|
|
21
21
|
"glob": "11.0.1",
|
|
22
22
|
"react": "18.3.1",
|
|
23
|
-
"rollup": "4.
|
|
23
|
+
"rollup": "4.40.0",
|
|
24
24
|
"rollup-plugin-delete": "3.0.1",
|
|
25
25
|
"rollup-plugin-generate-package-json": "3.2.0",
|
|
26
26
|
"rollup-plugin-peer-deps-external": "2.2.4",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"typescript": "5.7.2"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@iabbb/bds": "0.
|
|
31
|
+
"@iabbb/bds": "0.58.0",
|
|
32
32
|
"react": "^18.0.0 || ^19.0.0"
|
|
33
33
|
}
|
|
34
34
|
}
|