@launchpad-ui/form 0.11.57 → 0.11.58
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/dist/index.es.js +493 -552
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +521 -543
- package/dist/index.js.map +1 -1
- package/dist/style.css +2 -1
- package/package.json +3 -3
package/dist/index.es.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import './style.css';
|
2
|
-
import {
|
3
|
-
import { forwardRef, useRef, useMemo, useState, cloneElement, Children, isValidElement } from "react";
|
2
|
+
import { Children, cloneElement, forwardRef, isValidElement, useMemo, useRef, useState } from "react";
|
4
3
|
import { cx } from "classix";
|
4
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
5
5
|
import { Icon } from "@launchpad-ui/icons";
|
6
6
|
import { IconButton } from "@launchpad-ui/button";
|
7
7
|
import { Tooltip } from "@launchpad-ui/tooltip";
|
@@ -27,591 +27,532 @@ const iconField = "QJPOUG_iconField";
|
|
27
27
|
const iconFieldButton = "QJPOUG_iconFieldButton";
|
28
28
|
const iconFieldIcon = "QJPOUG_iconFieldIcon";
|
29
29
|
const iconFieldIconFill = "QJPOUG_iconFieldIconFill";
|
30
|
+
const inlineForm = "QJPOUG_inlineForm";
|
30
31
|
const isActive = "QJPOUG_isActive";
|
32
|
+
const isDisabled = "QJPOUG_isDisabled";
|
33
|
+
const isFocused = "QJPOUG_isFocused";
|
31
34
|
const isInvalid = "QJPOUG_isInvalid";
|
32
35
|
const label = "QJPOUG_label";
|
33
36
|
const labelDisabled = "QJPOUG_labelDisabled";
|
34
37
|
const labelOptional = "QJPOUG_labelOptional";
|
38
|
+
const number = "QJPOUG_number";
|
35
39
|
const numberField = "QJPOUG_numberField";
|
36
40
|
const radio = "QJPOUG_radio";
|
37
41
|
const requiredAsterisk = "QJPOUG_requiredAsterisk";
|
38
42
|
const suffix = "QJPOUG_suffix";
|
39
43
|
const suffixContainer = "QJPOUG_suffixContainer";
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
44
|
+
var Form_module_default = {
|
45
|
+
checkbox,
|
46
|
+
compactTextField,
|
47
|
+
field,
|
48
|
+
fieldError,
|
49
|
+
fieldErrorMessage,
|
50
|
+
fieldSet,
|
51
|
+
form,
|
52
|
+
formGroup,
|
53
|
+
formIncreasedErrorMargin,
|
54
|
+
formInline,
|
55
|
+
formInput,
|
56
|
+
formInputTiny,
|
57
|
+
hint,
|
58
|
+
iconField,
|
59
|
+
iconFieldButton,
|
60
|
+
iconFieldIcon,
|
61
|
+
iconFieldIconFill,
|
62
|
+
inlineForm,
|
63
|
+
isActive,
|
64
|
+
isDisabled,
|
65
|
+
isFocused,
|
66
|
+
isInvalid,
|
67
|
+
label,
|
68
|
+
labelDisabled,
|
69
|
+
labelOptional,
|
70
|
+
number,
|
71
|
+
numberField,
|
72
|
+
"numberField-input": "QJPOUG_numberField-input",
|
73
|
+
"numberField-stepper": "QJPOUG_numberField-stepper",
|
74
|
+
"numberField-stepperContainer": "QJPOUG_numberField-stepperContainer",
|
75
|
+
radio,
|
76
|
+
requiredAsterisk,
|
77
|
+
suffix,
|
78
|
+
suffixContainer
|
71
79
|
};
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
80
|
+
/**
|
81
|
+
* @deprecated use `Label` from `@launchpad-ui/components` instead
|
82
|
+
*
|
83
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
|
84
|
+
*/
|
85
|
+
const RequiredAsterisk = ({ className, "data-test-id": testId = "required-asterisk",...rest }) => {
|
86
|
+
const classes = cx(Form_module_default.requiredAsterisk, className);
|
87
|
+
return /* @__PURE__ */ jsx("span", {
|
88
|
+
...rest,
|
89
|
+
"data-test-id": testId,
|
90
|
+
className: classes,
|
91
|
+
children: "*"
|
92
|
+
});
|
79
93
|
};
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
94
|
+
/**
|
95
|
+
* @deprecated use `Label` from `@launchpad-ui/components` instead
|
96
|
+
*
|
97
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
|
98
|
+
*/
|
99
|
+
const Label = ({ disabled, className, children, required = false, optional = false, "data-test-id": testId = "label",...rest }) => {
|
100
|
+
const classes = cx(Form_module_default.label, className, disabled && Form_module_default.labelDisabled);
|
101
|
+
return /* @__PURE__ */ jsxs("label", {
|
102
|
+
...rest,
|
103
|
+
"data-test-id": testId,
|
104
|
+
className: classes,
|
105
|
+
children: [
|
106
|
+
children,
|
107
|
+
optional && !required && /* @__PURE__ */ jsx("small", {
|
108
|
+
className: Form_module_default.labelOptional,
|
109
|
+
children: "(optional)"
|
110
|
+
}),
|
111
|
+
required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})
|
112
|
+
]
|
113
|
+
});
|
95
114
|
};
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
}
|
128
|
-
),
|
129
|
-
" ",
|
130
|
-
disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children
|
131
|
-
] });
|
132
|
-
}
|
133
|
-
);
|
115
|
+
/**
|
116
|
+
* @deprecated use `Checkbox` or `CheckboxGroup` from `@launchpad-ui/components` instead
|
117
|
+
*
|
118
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-checkbox--docs
|
119
|
+
*/
|
120
|
+
const Checkbox = /* @__PURE__ */ forwardRef(({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, disabled, checked, labelClassName, "data-test-id": testId = "checkbox",...rest }, ref) => {
|
121
|
+
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
122
|
+
if (!children && !hasAriaLabel) console.warn("If you do not provide children, you must specify an aria-label for accessibility");
|
123
|
+
return /* @__PURE__ */ jsxs(Label, {
|
124
|
+
className: labelClassName,
|
125
|
+
children: [
|
126
|
+
/* @__PURE__ */ jsx("input", {
|
127
|
+
...rest,
|
128
|
+
ref,
|
129
|
+
checked,
|
130
|
+
"aria-checked": checked ? "true" : "false",
|
131
|
+
"aria-label": ariaLabel,
|
132
|
+
"aria-labelledby": ariaLabelledby,
|
133
|
+
className: Form_module_default.checkbox,
|
134
|
+
disabled,
|
135
|
+
type: "checkbox",
|
136
|
+
"data-test-id": testId
|
137
|
+
}),
|
138
|
+
" ",
|
139
|
+
disabled ? /* @__PURE__ */ jsx("span", {
|
140
|
+
className: Form_module_default.labelDisabled,
|
141
|
+
children
|
142
|
+
}) : children
|
143
|
+
]
|
144
|
+
});
|
145
|
+
});
|
134
146
|
Checkbox.displayName = "Checkbox";
|
135
147
|
const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
|
136
148
|
function hasObjectChanged(obj1, obj2) {
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
149
|
+
return Object.keys(obj1).length !== Object.keys(obj2).length || Object.keys(obj1).some((k) => {
|
150
|
+
const key = k;
|
151
|
+
return typeof obj1[key] === "object" && typeof obj2[key] === "object" ? hasObjectChanged(obj1[key], obj2[key]) : obj1[key] !== obj2[key];
|
152
|
+
});
|
141
153
|
}
|
142
154
|
function useObjectMemo(obj) {
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
return objRef.current;
|
149
|
-
}, [obj]);
|
155
|
+
const objRef = useRef(obj);
|
156
|
+
return useMemo(() => {
|
157
|
+
if (hasObjectChanged(obj, objRef.current)) objRef.current = obj;
|
158
|
+
return objRef.current;
|
159
|
+
}, [obj]);
|
150
160
|
}
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
className: classes,
|
191
|
-
readOnly,
|
192
|
-
tabIndex,
|
193
|
-
autoComplete,
|
194
|
-
ref,
|
195
|
-
"data-test-id": testId,
|
196
|
-
style: overrideWidth ? {
|
197
|
-
width: overrideWidth
|
198
|
-
} : void 0,
|
199
|
-
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
200
|
-
}
|
201
|
-
);
|
202
|
-
}
|
203
|
-
);
|
161
|
+
/**
|
162
|
+
* @deprecated use `TextField` from `@launchpad-ui/components` instead
|
163
|
+
*
|
164
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
|
165
|
+
*/
|
166
|
+
const TextField = /* @__PURE__ */ forwardRef(({ className, type = "text", tiny = false, readOnly, tabIndex = 0, suffix: suffix$1, overrideWidth, "data-test-id": testId = "text-field", autoComplete,...rest }, ref) => {
|
167
|
+
const classes = overrideWidth ? className : cx(Form_module_default.formInput, tiny && Form_module_default.formInputTiny, className);
|
168
|
+
const disablePasswordManagers = autoComplete === "off";
|
169
|
+
if (suffix$1) return /* @__PURE__ */ jsxs("div", {
|
170
|
+
className: Form_module_default.suffixContainer,
|
171
|
+
children: [/* @__PURE__ */ jsx("input", {
|
172
|
+
...rest,
|
173
|
+
type,
|
174
|
+
"data-test-id": testId,
|
175
|
+
autoComplete,
|
176
|
+
className: classes,
|
177
|
+
readOnly,
|
178
|
+
ref,
|
179
|
+
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
180
|
+
}), /* @__PURE__ */ jsx("label", {
|
181
|
+
className: Form_module_default.suffix,
|
182
|
+
htmlFor: rest.id,
|
183
|
+
children: suffix$1
|
184
|
+
})]
|
185
|
+
});
|
186
|
+
return /* @__PURE__ */ jsx("input", {
|
187
|
+
...rest,
|
188
|
+
"data-1p-ignore": disablePasswordManagers,
|
189
|
+
type,
|
190
|
+
className: classes,
|
191
|
+
readOnly,
|
192
|
+
tabIndex,
|
193
|
+
autoComplete,
|
194
|
+
ref,
|
195
|
+
"data-test-id": testId,
|
196
|
+
style: overrideWidth ? { width: overrideWidth } : void 0,
|
197
|
+
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
198
|
+
});
|
199
|
+
});
|
204
200
|
TextField.displayName = "TextField";
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
...rest,
|
242
|
-
id,
|
243
|
-
placeholder,
|
244
|
-
value,
|
245
|
-
ref,
|
246
|
-
onFocus: handleFocus,
|
247
|
-
onBlur: handleBlur
|
248
|
-
}
|
249
|
-
)
|
250
|
-
] });
|
251
|
-
}
|
252
|
-
);
|
201
|
+
/**
|
202
|
+
* @deprecated use `TextField` from `@launchpad-ui/components` instead
|
203
|
+
*
|
204
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
|
205
|
+
*/
|
206
|
+
const CompactTextField = /* @__PURE__ */ forwardRef(({ className, id, label: label$1, needsErrorFeedback, value, onFocus, onBlur, "data-test-id": testId = "compact-text-field",...rest }, ref) => {
|
207
|
+
const [isActive$1, setIsActive] = useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
|
208
|
+
const isActiveState = isActive$1 || needsErrorFeedback;
|
209
|
+
const classes = cx(Form_module_default.compactTextField, className, isActiveState && Form_module_default.isActive);
|
210
|
+
const placeholder = isActiveState ? "" : label$1;
|
211
|
+
const handleFocus = (event) => {
|
212
|
+
setIsActive(true);
|
213
|
+
if (onFocus) onFocus(event);
|
214
|
+
};
|
215
|
+
const handleBlur = (event) => {
|
216
|
+
const value$1 = event.target.value || "";
|
217
|
+
setIsActive(value$1.trim().length !== 0);
|
218
|
+
if (onBlur) onBlur(event);
|
219
|
+
};
|
220
|
+
return /* @__PURE__ */ jsxs("div", {
|
221
|
+
className: classes,
|
222
|
+
"data-test-id": testId,
|
223
|
+
children: [/* @__PURE__ */ jsx(Label, {
|
224
|
+
htmlFor: id,
|
225
|
+
children: label$1
|
226
|
+
}), /* @__PURE__ */ jsx(TextField, {
|
227
|
+
...rest,
|
228
|
+
id,
|
229
|
+
placeholder,
|
230
|
+
value,
|
231
|
+
ref,
|
232
|
+
onFocus: handleFocus,
|
233
|
+
onBlur: handleBlur
|
234
|
+
})]
|
235
|
+
});
|
236
|
+
});
|
253
237
|
CompactTextField.displayName = "CompactTextField";
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
]
|
278
|
-
}
|
279
|
-
);
|
238
|
+
/**
|
239
|
+
* @deprecated use `FieldError` from `@launchpad-ui/components` instead
|
240
|
+
*
|
241
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
|
242
|
+
*/
|
243
|
+
const FieldError = ({ name, errorMessage, className, "data-test-id": testId = "field-error",...rest }) => {
|
244
|
+
if (!errorMessage) return null;
|
245
|
+
return /* @__PURE__ */ jsxs("span", {
|
246
|
+
...rest,
|
247
|
+
className: cx(Form_module_default.fieldError, className),
|
248
|
+
"aria-live": "polite",
|
249
|
+
"data-test-id": testId,
|
250
|
+
"aria-label": "Error",
|
251
|
+
id: createFieldErrorId(name),
|
252
|
+
children: [
|
253
|
+
/* @__PURE__ */ jsx(Icon, {
|
254
|
+
name: "alert-rhombus",
|
255
|
+
size: "small"
|
256
|
+
}),
|
257
|
+
" ",
|
258
|
+
errorMessage
|
259
|
+
]
|
260
|
+
});
|
280
261
|
};
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
}) => {
|
287
|
-
|
288
|
-
|
262
|
+
/**
|
263
|
+
* @deprecated use `FieldGroup` from `@launchpad-ui/components` instead
|
264
|
+
*
|
265
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-fieldgroup--docs
|
266
|
+
*/
|
267
|
+
const FieldSet = ({ children, className, "data-test-id": testId = "field-set",...rest }) => {
|
268
|
+
const classes = cx(Form_module_default.fieldSet, className);
|
269
|
+
return /* @__PURE__ */ jsx("fieldset", {
|
270
|
+
"data-test-id": testId,
|
271
|
+
className: classes,
|
272
|
+
...rest,
|
273
|
+
children
|
274
|
+
});
|
289
275
|
};
|
276
|
+
/**
|
277
|
+
* @deprecated use `Form` from `@launchpad-ui/components` instead
|
278
|
+
*
|
279
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-form--docs
|
280
|
+
*/
|
290
281
|
const Form = (props) => {
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
const classes = cx(
|
300
|
-
styles.form,
|
301
|
-
className,
|
302
|
-
inline && styles.formInline,
|
303
|
-
!!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin
|
304
|
-
);
|
305
|
-
return /* @__PURE__ */ jsx("form", { ...rest, "data-test-id": testId, className: classes, children });
|
282
|
+
const { className, inline, children, hasIncreasedErrorMargin, "data-test-id": testId = "form",...rest } = props;
|
283
|
+
const classes = cx(Form_module_default.form, className, inline && Form_module_default.formInline, !!hasIncreasedErrorMargin && Form_module_default.formIncreasedErrorMargin);
|
284
|
+
return /* @__PURE__ */ jsx("form", {
|
285
|
+
...rest,
|
286
|
+
"data-test-id": testId,
|
287
|
+
className: classes,
|
288
|
+
children
|
289
|
+
});
|
306
290
|
};
|
291
|
+
/**
|
292
|
+
* @deprecated use `FieldGroup` from `@launchpad-ui/components` instead
|
293
|
+
*
|
294
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-fieldgroup--docs
|
295
|
+
*/
|
307
296
|
const FormGroup = (props) => {
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
} = props;
|
317
|
-
const classes = cx(
|
318
|
-
styles.formGroup,
|
319
|
-
className,
|
320
|
-
!ignoreValidation && isInvalid2 && styles.isInvalid
|
321
|
-
);
|
322
|
-
return /* @__PURE__ */ jsx("fieldset", { className: classes, "data-test-id": testId, ...rest, children });
|
297
|
+
const { className, name, ignoreValidation, isInvalid: isInvalid$1, children, "data-test-id": testId = "form-group",...rest } = props;
|
298
|
+
const classes = cx(Form_module_default.formGroup, className, !ignoreValidation && isInvalid$1 && Form_module_default.isInvalid);
|
299
|
+
return /* @__PURE__ */ jsx("fieldset", {
|
300
|
+
className: classes,
|
301
|
+
"data-test-id": testId,
|
302
|
+
...rest,
|
303
|
+
children
|
304
|
+
});
|
323
305
|
};
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
}) => {
|
330
|
-
|
331
|
-
|
306
|
+
/**
|
307
|
+
* @deprecated use `Text` with `[slot='description']` from `@launchpad-ui/components` instead
|
308
|
+
*
|
309
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
|
310
|
+
*/
|
311
|
+
const FormHint = ({ className, children, "data-test-id": testId = "form-hint",...rest }) => {
|
312
|
+
const classes = cx(Form_module_default.hint, className);
|
313
|
+
return /* @__PURE__ */ jsx("div", {
|
314
|
+
...rest,
|
315
|
+
"data-test-id": testId,
|
316
|
+
className: classes,
|
317
|
+
children
|
318
|
+
});
|
332
319
|
};
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
name,
|
371
|
-
errorMessage,
|
372
|
-
...FieldErrorProps
|
373
|
-
}
|
374
|
-
)
|
375
|
-
]
|
376
|
-
}
|
377
|
-
);
|
320
|
+
/**
|
321
|
+
* @deprecated use form elements from `@launchpad-ui/components` instead
|
322
|
+
*
|
323
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs
|
324
|
+
*/
|
325
|
+
const FormField = ({ isRequired, label: label$1, name, htmlFor, hint: hint$1, errorMessage, ignoreValidation, isInvalid: isInvalid$1, children, className, onBlur, "data-test-id": testId = "form-field", LabelProps = {}, FormHintProps = {}, FieldErrorProps = {} }) => {
|
326
|
+
const handleBlur = () => {
|
327
|
+
onBlur?.(name);
|
328
|
+
};
|
329
|
+
return /* @__PURE__ */ jsxs(FormGroup, {
|
330
|
+
className: cx(Form_module_default.field, className),
|
331
|
+
name,
|
332
|
+
ignoreValidation,
|
333
|
+
isInvalid: isInvalid$1,
|
334
|
+
onBlur: handleBlur,
|
335
|
+
"data-test-id": testId,
|
336
|
+
children: [
|
337
|
+
label$1 && /* @__PURE__ */ jsx(Label, {
|
338
|
+
htmlFor,
|
339
|
+
required: isRequired,
|
340
|
+
...LabelProps,
|
341
|
+
children: label$1
|
342
|
+
}),
|
343
|
+
hint$1 && /* @__PURE__ */ jsx(FormHint, {
|
344
|
+
className: Form_module_default.hint,
|
345
|
+
...FormHintProps,
|
346
|
+
children: hint$1
|
347
|
+
}),
|
348
|
+
children,
|
349
|
+
/* @__PURE__ */ jsx(FieldError, {
|
350
|
+
className: Form_module_default.fieldErrorMessage,
|
351
|
+
name,
|
352
|
+
errorMessage,
|
353
|
+
...FieldErrorProps
|
354
|
+
})
|
355
|
+
]
|
356
|
+
});
|
378
357
|
};
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
})
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
358
|
+
/**
|
359
|
+
* @deprecated use `Group` from `@launchpad-ui/components` instead
|
360
|
+
*
|
361
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-content-group--docs
|
362
|
+
*/
|
363
|
+
const IconField = ({ icon, children, className, "data-test-id": testId = "icon-field", tooltip, renderIconLast = false, ariaLabel = "More info",...rest }) => {
|
364
|
+
const iconElement = /* @__PURE__ */ cloneElement(icon, {
|
365
|
+
size: "small",
|
366
|
+
className: cx(Form_module_default.iconFieldIcon, Form_module_default.iconFieldIconFill)
|
367
|
+
});
|
368
|
+
const classes = cx(Form_module_default.iconField, renderIconLast ? "IconAfter" : "IconBefore", className);
|
369
|
+
const renderIcon = tooltip ? /* @__PURE__ */ jsx(Tooltip, {
|
370
|
+
content: tooltip,
|
371
|
+
targetClassName: Form_module_default.iconFieldButton,
|
372
|
+
children: /* @__PURE__ */ jsx(IconButton, {
|
373
|
+
icon: /* @__PURE__ */ cloneElement(icon, { className: Form_module_default.iconFieldIconFill }),
|
374
|
+
size: "small",
|
375
|
+
className: Form_module_default.iconFieldIcon,
|
376
|
+
style: renderIconLast ? { right: "0.313rem" } : { left: "0.313rem" },
|
377
|
+
"aria-label": ariaLabel
|
378
|
+
})
|
379
|
+
}) : iconElement;
|
380
|
+
return /* @__PURE__ */ jsxs("div", {
|
381
|
+
className: classes,
|
382
|
+
"data-test-id": testId,
|
383
|
+
...rest,
|
384
|
+
children: [
|
385
|
+
!renderIconLast && renderIcon,
|
386
|
+
children,
|
387
|
+
renderIconLast && renderIcon
|
388
|
+
]
|
389
|
+
});
|
411
390
|
};
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
checked,
|
440
|
-
disabled,
|
441
|
-
id,
|
442
|
-
"data-test-id": testId,
|
443
|
-
type: "radio"
|
444
|
-
}
|
445
|
-
),
|
446
|
-
/* @__PURE__ */ jsx(Label, { className: labelClassName, htmlFor: id, style: labelStyle, children: disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children })
|
447
|
-
] });
|
391
|
+
/**
|
392
|
+
* @deprecated use `RadioGroup` from `@launchpad-ui/components` instead
|
393
|
+
*
|
394
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-radiogroup--docs
|
395
|
+
*/
|
396
|
+
const Radio = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, checked = false, children, className, disabled = false, id, labelClassName, labelStyle, "data-test-id": testId = "radio",...rest }) => {
|
397
|
+
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
398
|
+
if (!children && !hasAriaLabel) console.warn("If you do not provide children, you must specify an aria-label for accessibility");
|
399
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
|
400
|
+
...rest,
|
401
|
+
"aria-label": ariaLabel,
|
402
|
+
"aria-labelledby": ariaLabelledby,
|
403
|
+
className: cx(Form_module_default.radio, className),
|
404
|
+
checked,
|
405
|
+
disabled,
|
406
|
+
id,
|
407
|
+
"data-test-id": testId,
|
408
|
+
type: "radio"
|
409
|
+
}), /* @__PURE__ */ jsx(Label, {
|
410
|
+
className: labelClassName,
|
411
|
+
htmlFor: id,
|
412
|
+
style: labelStyle,
|
413
|
+
children: disabled ? /* @__PURE__ */ jsx("span", {
|
414
|
+
className: Form_module_default.labelDisabled,
|
415
|
+
children
|
416
|
+
}) : children
|
417
|
+
})] });
|
448
418
|
};
|
419
|
+
/**
|
420
|
+
* @deprecated use `RadioGroup` from `@launchpad-ui/components` instead
|
421
|
+
*
|
422
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-radiogroup--docs
|
423
|
+
*/
|
449
424
|
const RadioGroup = (props) => {
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
if (elemChildren) {
|
485
|
-
if (Array.isArray(elemChildren)) {
|
486
|
-
return /* @__PURE__ */ cloneElement(item, {
|
487
|
-
children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
|
488
|
-
});
|
489
|
-
}
|
490
|
-
return /* @__PURE__ */ cloneElement(item, {
|
491
|
-
children: updateRadioElems(elemChildren)
|
492
|
-
});
|
493
|
-
}
|
494
|
-
if ((item == null ? void 0 : item.type) && item.type !== Radio && item.type !== Label) {
|
495
|
-
return item;
|
496
|
-
}
|
497
|
-
return null;
|
498
|
-
}
|
499
|
-
const radios = Children.map(children, (child) => updateRadioElems(child));
|
500
|
-
return /* @__PURE__ */ jsxs("fieldset", { "data-test-id": testId, ref: fieldsetRef, children: [
|
501
|
-
legend && /* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: legend }) }),
|
502
|
-
/* @__PURE__ */ jsx("div", { ...rest, children: radios })
|
503
|
-
] });
|
425
|
+
const { name, value, onChange, children, disabled, legend, "data-test-id": testId = "radio-group",...rest } = props;
|
426
|
+
const fieldsetRef = useRef(null);
|
427
|
+
function updateRadioElems(elem) {
|
428
|
+
if (!/* @__PURE__ */ isValidElement(elem)) return elem;
|
429
|
+
const item = elem;
|
430
|
+
if (item?.type && item.type === Radio) return /* @__PURE__ */ cloneElement(item, {
|
431
|
+
...item.props,
|
432
|
+
name,
|
433
|
+
checked: item.props.value === value,
|
434
|
+
onChange,
|
435
|
+
disabled: typeof item.props?.disabled !== "undefined" ? item.props.disabled : disabled
|
436
|
+
});
|
437
|
+
if (item?.type && item.type === Label) return /* @__PURE__ */ cloneElement(item, {
|
438
|
+
...item.props,
|
439
|
+
onChange,
|
440
|
+
disabled
|
441
|
+
});
|
442
|
+
const elemChildren = item?.props?.children;
|
443
|
+
if (elemChildren) {
|
444
|
+
if (Array.isArray(elemChildren)) return /* @__PURE__ */ cloneElement(item, { children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)) });
|
445
|
+
return /* @__PURE__ */ cloneElement(item, { children: updateRadioElems(elemChildren) });
|
446
|
+
}
|
447
|
+
if (item?.type && item.type !== Radio && item.type !== Label) return item;
|
448
|
+
return null;
|
449
|
+
}
|
450
|
+
const radios = Children.map(children, (child) => updateRadioElems(child));
|
451
|
+
return /* @__PURE__ */ jsxs("fieldset", {
|
452
|
+
"data-test-id": testId,
|
453
|
+
ref: fieldsetRef,
|
454
|
+
children: [legend && /* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: legend }) }), /* @__PURE__ */ jsx("div", {
|
455
|
+
...rest,
|
456
|
+
children: radios
|
457
|
+
})]
|
458
|
+
});
|
504
459
|
};
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
)
|
460
|
+
/**
|
461
|
+
* @deprecated use `Select` from `@launchpad-ui/components` instead
|
462
|
+
*
|
463
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-pickers-select--docs
|
464
|
+
*/
|
465
|
+
const SelectField = /* @__PURE__ */ forwardRef(({ className, children, "data-test-id": testId = "select",...rest }, ref) => {
|
466
|
+
const classes = cx(Form_module_default.formInput, className);
|
467
|
+
return /* @__PURE__ */ jsx("select", {
|
468
|
+
...rest,
|
469
|
+
"data-test-id": testId,
|
470
|
+
className: classes,
|
471
|
+
ref,
|
472
|
+
children
|
473
|
+
});
|
474
|
+
});
|
511
475
|
SelectField.displayName = "SelectField";
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
}
|
532
|
-
);
|
533
|
-
}
|
534
|
-
);
|
476
|
+
/**
|
477
|
+
* @deprecated use `TextArea` from `@launchpad-ui/components` instead
|
478
|
+
*
|
479
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-textfield--docs#multi%20line
|
480
|
+
*/
|
481
|
+
const TextArea = /* @__PURE__ */ forwardRef(({ className, "data-test-id": testId = "text-area",...props }, ref) => {
|
482
|
+
const onKeyDown = (e) => {
|
483
|
+
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") e.stopPropagation();
|
484
|
+
if (e.key === "Escape") e.nativeEvent.stopImmediatePropagation();
|
485
|
+
};
|
486
|
+
return /* @__PURE__ */ jsx("textarea", {
|
487
|
+
...props,
|
488
|
+
className: cx(Form_module_default.formInput, className),
|
489
|
+
ref,
|
490
|
+
"data-test-id": testId,
|
491
|
+
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
|
492
|
+
onKeyDown
|
493
|
+
});
|
494
|
+
});
|
535
495
|
TextArea.displayName = "TextArea";
|
536
|
-
const defaultFormatOptions = {
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
546
|
-
|
547
|
-
|
548
|
-
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
555
|
-
|
556
|
-
|
557
|
-
|
558
|
-
|
559
|
-
|
560
|
-
|
561
|
-
|
562
|
-
|
563
|
-
|
564
|
-
|
565
|
-
|
566
|
-
|
567
|
-
|
568
|
-
|
569
|
-
|
570
|
-
|
571
|
-
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
|
576
|
-
|
577
|
-
|
578
|
-
|
579
|
-
|
580
|
-
|
581
|
-
|
582
|
-
|
496
|
+
const defaultFormatOptions = { maximumFractionDigits: 6 };
|
497
|
+
/**
|
498
|
+
* @deprecated use `NumberField` from `@launchpad-ui/components` instead
|
499
|
+
*
|
500
|
+
* https://launchpad.launchdarkly.com/?path=/docs/components-forms-numberfield--docs
|
501
|
+
*/
|
502
|
+
const useNumberField = ({ className, "data-test-id": testId = "input", id, name,...otherProps } = {}) => {
|
503
|
+
const formatOptions = useObjectMemo({
|
504
|
+
...defaultFormatOptions,
|
505
|
+
...otherProps.formatOptions
|
506
|
+
});
|
507
|
+
const { locale } = useLocale();
|
508
|
+
const numberFieldState = useNumberFieldState({
|
509
|
+
...otherProps,
|
510
|
+
locale,
|
511
|
+
formatOptions
|
512
|
+
});
|
513
|
+
const inputRef = useRef(null);
|
514
|
+
const { descriptionProps: formHintProps, errorMessageProps: fieldErrorProps, labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField$1({
|
515
|
+
...otherProps,
|
516
|
+
formatOptions,
|
517
|
+
id
|
518
|
+
}, numberFieldState, inputRef);
|
519
|
+
return {
|
520
|
+
fieldErrorProps,
|
521
|
+
formHintProps,
|
522
|
+
labelProps,
|
523
|
+
renderNumberField: () => /* @__PURE__ */ jsxs("div", {
|
524
|
+
...groupProps,
|
525
|
+
className: Form_module_default.numberField,
|
526
|
+
children: [/* @__PURE__ */ jsx("input", {
|
527
|
+
...inputProps,
|
528
|
+
className: cx(Form_module_default.formInput, Form_module_default["numberField-input"]),
|
529
|
+
"data-test-id": testId,
|
530
|
+
name,
|
531
|
+
ref: inputRef
|
532
|
+
}), /* @__PURE__ */ jsxs("div", {
|
533
|
+
className: Form_module_default["numberField-stepperContainer"],
|
534
|
+
children: [/* @__PURE__ */ jsx(Stepper, {
|
535
|
+
...incrementButtonProps,
|
536
|
+
children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up" })
|
537
|
+
}), /* @__PURE__ */ jsx(Stepper, {
|
538
|
+
...decrementButtonProps,
|
539
|
+
children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down" })
|
540
|
+
})]
|
541
|
+
})]
|
542
|
+
})
|
543
|
+
};
|
583
544
|
};
|
584
545
|
const Stepper = (props) => {
|
585
|
-
|
586
|
-
|
587
|
-
|
588
|
-
|
589
|
-
|
590
|
-
|
591
|
-
|
592
|
-
|
593
|
-
|
594
|
-
children: props.children
|
595
|
-
}
|
596
|
-
);
|
597
|
-
};
|
598
|
-
export {
|
599
|
-
Checkbox,
|
600
|
-
CompactTextField,
|
601
|
-
FieldError,
|
602
|
-
FieldSet,
|
603
|
-
Form,
|
604
|
-
FormField,
|
605
|
-
FormGroup,
|
606
|
-
FormHint,
|
607
|
-
IconField,
|
608
|
-
Label,
|
609
|
-
Radio,
|
610
|
-
RadioGroup,
|
611
|
-
RequiredAsterisk,
|
612
|
-
SelectField,
|
613
|
-
TextArea,
|
614
|
-
TextField,
|
615
|
-
useNumberField
|
546
|
+
const buttonRef = useRef(null);
|
547
|
+
const { buttonProps } = useButton(props, buttonRef);
|
548
|
+
return /* @__PURE__ */ jsx("button", {
|
549
|
+
type: "button",
|
550
|
+
...buttonProps,
|
551
|
+
className: Form_module_default["numberField-stepper"],
|
552
|
+
ref: buttonRef,
|
553
|
+
children: props.children
|
554
|
+
});
|
616
555
|
};
|
617
|
-
|
556
|
+
export { Checkbox, CompactTextField, FieldError, FieldSet, Form, FormField, FormGroup, FormHint, IconField, Label, Radio, RadioGroup, RequiredAsterisk, SelectField, TextArea, TextField, useNumberField };
|
557
|
+
|
558
|
+
//# sourceMappingURL=index.es.js.map
|