@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.
Files changed (6) hide show
  1. package/dist/index.es.js +493 -552
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +521 -543
  4. package/dist/index.js.map +1 -1
  5. package/dist/style.css +2 -1
  6. package/package.json +3 -3
package/dist/index.es.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import './style.css';
2
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
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
- const styles = {
41
- checkbox,
42
- compactTextField,
43
- field,
44
- fieldError,
45
- fieldErrorMessage,
46
- fieldSet,
47
- form,
48
- formGroup,
49
- formIncreasedErrorMargin,
50
- formInline,
51
- formInput,
52
- formInputTiny,
53
- hint,
54
- iconField,
55
- iconFieldButton,
56
- iconFieldIcon,
57
- iconFieldIconFill,
58
- isActive,
59
- isInvalid,
60
- label,
61
- labelDisabled,
62
- labelOptional,
63
- numberField,
64
- "numberField-input": "QJPOUG_numberField-input",
65
- "numberField-stepper": "QJPOUG_numberField-stepper",
66
- "numberField-stepperContainer": "QJPOUG_numberField-stepperContainer",
67
- radio,
68
- requiredAsterisk,
69
- suffix,
70
- suffixContainer
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
- const RequiredAsterisk = ({
73
- className,
74
- "data-test-id": testId = "required-asterisk",
75
- ...rest
76
- }) => {
77
- const classes = cx(styles.requiredAsterisk, className);
78
- return /* @__PURE__ */ jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
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
- const Label = ({
81
- disabled,
82
- className,
83
- children,
84
- required = false,
85
- optional = false,
86
- "data-test-id": testId = "label",
87
- ...rest
88
- }) => {
89
- const classes = cx(styles.label, className, disabled && styles.labelDisabled);
90
- return /* @__PURE__ */ jsxs("label", { ...rest, "data-test-id": testId, className: classes, children: [
91
- children,
92
- optional && !required && /* @__PURE__ */ jsx("small", { className: styles.labelOptional, children: "(optional)" }),
93
- required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})
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
- const Checkbox = /* @__PURE__ */ forwardRef(
97
- ({
98
- "aria-label": ariaLabel,
99
- "aria-labelledby": ariaLabelledby,
100
- children,
101
- disabled,
102
- checked,
103
- labelClassName,
104
- "data-test-id": testId = "checkbox",
105
- ...rest
106
- }, ref) => {
107
- const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
108
- if (!children && !hasAriaLabel) {
109
- console.warn(
110
- "If you do not provide children, you must specify an aria-label for accessibility"
111
- );
112
- }
113
- return /* @__PURE__ */ jsxs(Label, { className: labelClassName, children: [
114
- /* @__PURE__ */ jsx(
115
- "input",
116
- {
117
- ...rest,
118
- ref,
119
- checked,
120
- "aria-checked": checked ? "true" : "false",
121
- "aria-label": ariaLabel,
122
- "aria-labelledby": ariaLabelledby,
123
- className: styles.checkbox,
124
- disabled,
125
- type: "checkbox",
126
- "data-test-id": testId
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
- return Object.keys(obj1).length !== Object.keys(obj2).length || Object.keys(obj1).some((k) => {
138
- const key = k;
139
- return typeof obj1[key] === "object" && typeof obj2[key] === "object" ? hasObjectChanged(obj1[key], obj2[key]) : obj1[key] !== obj2[key];
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
- const objRef = useRef(obj);
144
- return useMemo(() => {
145
- if (hasObjectChanged(obj, objRef.current)) {
146
- objRef.current = obj;
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
- const TextField = /* @__PURE__ */ forwardRef(
152
- ({
153
- className,
154
- type = "text",
155
- tiny = false,
156
- readOnly,
157
- tabIndex = 0,
158
- suffix: suffix2,
159
- overrideWidth,
160
- "data-test-id": testId = "text-field",
161
- autoComplete,
162
- ...rest
163
- }, ref) => {
164
- const classes = overrideWidth ? className : cx(styles.formInput, tiny && styles.formInputTiny, className);
165
- const disablePasswordManagers = autoComplete === "off";
166
- if (suffix2) {
167
- return /* @__PURE__ */ jsxs("div", { className: styles.suffixContainer, children: [
168
- /* @__PURE__ */ jsx(
169
- "input",
170
- {
171
- ...rest,
172
- type,
173
- "data-test-id": testId,
174
- autoComplete,
175
- className: classes,
176
- readOnly,
177
- ref,
178
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
179
- }
180
- ),
181
- /* @__PURE__ */ jsx("label", { className: styles.suffix, htmlFor: rest.id, children: suffix2 })
182
- ] });
183
- }
184
- return /* @__PURE__ */ jsx(
185
- "input",
186
- {
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 ? {
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
- const CompactTextField = /* @__PURE__ */ forwardRef(
206
- ({
207
- className,
208
- id,
209
- label: label2,
210
- needsErrorFeedback,
211
- value,
212
- onFocus,
213
- onBlur,
214
- "data-test-id": testId = "compact-text-field",
215
- ...rest
216
- }, ref) => {
217
- const [isActive2, setIsActive] = useState(
218
- (typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
219
- );
220
- const isActiveState = isActive2 || needsErrorFeedback;
221
- const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);
222
- const placeholder = isActiveState ? "" : label2;
223
- const handleFocus = (event) => {
224
- setIsActive(true);
225
- if (onFocus) {
226
- onFocus(event);
227
- }
228
- };
229
- const handleBlur = (event) => {
230
- const value2 = event.target.value || "";
231
- setIsActive(value2.trim().length !== 0);
232
- if (onBlur) {
233
- onBlur(event);
234
- }
235
- };
236
- return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, children: [
237
- /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label2 }),
238
- /* @__PURE__ */ jsx(
239
- TextField,
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
- const FieldError = ({
255
- name,
256
- errorMessage,
257
- className,
258
- "data-test-id": testId = "field-error",
259
- ...rest
260
- }) => {
261
- if (!errorMessage) {
262
- return null;
263
- }
264
- return /* @__PURE__ */ jsxs(
265
- "span",
266
- {
267
- ...rest,
268
- className: cx(styles.fieldError, className),
269
- "aria-live": "polite",
270
- "data-test-id": testId,
271
- "aria-label": "Error",
272
- id: createFieldErrorId(name),
273
- children: [
274
- /* @__PURE__ */ jsx(Icon, { name: "alert-rhombus", size: "small" }),
275
- " ",
276
- errorMessage
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
- const FieldSet = ({
282
- children,
283
- className,
284
- "data-test-id": testId = "field-set",
285
- ...rest
286
- }) => {
287
- const classes = cx(styles.fieldSet, className);
288
- return /* @__PURE__ */ jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
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
- const {
292
- className,
293
- inline,
294
- children,
295
- hasIncreasedErrorMargin,
296
- "data-test-id": testId = "form",
297
- ...rest
298
- } = props;
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
- const {
309
- className,
310
- name,
311
- ignoreValidation,
312
- isInvalid: isInvalid2,
313
- children,
314
- "data-test-id": testId = "form-group",
315
- ...rest
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
- const FormHint = ({
325
- className,
326
- children,
327
- "data-test-id": testId = "form-hint",
328
- ...rest
329
- }) => {
330
- const classes = cx(styles.hint, className);
331
- return /* @__PURE__ */ jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
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
- const FormField = ({
334
- isRequired,
335
- label: label2,
336
- name,
337
- htmlFor,
338
- hint: hint2,
339
- errorMessage,
340
- ignoreValidation,
341
- isInvalid: isInvalid2,
342
- children,
343
- className,
344
- onBlur,
345
- "data-test-id": testId = "form-field",
346
- LabelProps = {},
347
- FormHintProps = {},
348
- FieldErrorProps = {}
349
- }) => {
350
- const handleBlur = () => {
351
- onBlur == null ? void 0 : onBlur(name);
352
- };
353
- return /* @__PURE__ */ jsxs(
354
- FormGroup,
355
- {
356
- className: cx(styles.field, className),
357
- name,
358
- ignoreValidation,
359
- isInvalid: isInvalid2,
360
- onBlur: handleBlur,
361
- "data-test-id": testId,
362
- children: [
363
- label2 && /* @__PURE__ */ jsx(Label, { htmlFor, required: isRequired, ...LabelProps, children: label2 }),
364
- hint2 && /* @__PURE__ */ jsx(FormHint, { className: styles.hint, ...FormHintProps, children: hint2 }),
365
- children,
366
- /* @__PURE__ */ jsx(
367
- FieldError,
368
- {
369
- className: styles.fieldErrorMessage,
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
- const IconField = ({
380
- icon,
381
- children,
382
- className,
383
- "data-test-id": testId = "icon-field",
384
- tooltip,
385
- renderIconLast = false,
386
- ariaLabel = "More info",
387
- ...rest
388
- }) => {
389
- const iconElement = /* @__PURE__ */ cloneElement(icon, {
390
- size: "small",
391
- className: cx(styles.iconFieldIcon, styles.iconFieldIconFill)
392
- });
393
- const classes = cx(styles.iconField, renderIconLast ? "IconAfter" : "IconBefore", className);
394
- const renderIcon = tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: tooltip, targetClassName: styles.iconFieldButton, children: /* @__PURE__ */ jsx(
395
- IconButton,
396
- {
397
- icon: /* @__PURE__ */ cloneElement(icon, {
398
- className: styles.iconFieldIconFill
399
- }),
400
- size: "small",
401
- className: styles.iconFieldIcon,
402
- style: renderIconLast ? { right: "0.313rem" } : { left: "0.313rem" },
403
- "aria-label": ariaLabel
404
- }
405
- ) }) : iconElement;
406
- return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, ...rest, children: [
407
- !renderIconLast && renderIcon,
408
- children,
409
- renderIconLast && renderIcon
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
- const Radio = ({
413
- "aria-label": ariaLabel,
414
- "aria-labelledby": ariaLabelledby,
415
- checked = false,
416
- children,
417
- className,
418
- disabled = false,
419
- id,
420
- labelClassName,
421
- labelStyle,
422
- "data-test-id": testId = "radio",
423
- ...rest
424
- }) => {
425
- const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
426
- if (!children && !hasAriaLabel) {
427
- console.warn(
428
- "If you do not provide children, you must specify an aria-label for accessibility"
429
- );
430
- }
431
- return /* @__PURE__ */ jsxs(Fragment, { children: [
432
- /* @__PURE__ */ jsx(
433
- "input",
434
- {
435
- ...rest,
436
- "aria-label": ariaLabel,
437
- "aria-labelledby": ariaLabelledby,
438
- className: cx(styles.radio, className),
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
- const {
451
- name,
452
- value,
453
- onChange,
454
- children,
455
- disabled,
456
- legend,
457
- "data-test-id": testId = "radio-group",
458
- ...rest
459
- } = props;
460
- const fieldsetRef = useRef(null);
461
- function updateRadioElems(elem) {
462
- var _a, _b;
463
- if (!/* @__PURE__ */ isValidElement(elem)) {
464
- return elem;
465
- }
466
- const item = elem;
467
- if ((item == null ? void 0 : item.type) && item.type === Radio) {
468
- return /* @__PURE__ */ cloneElement(item, {
469
- ...item.props,
470
- name,
471
- checked: item.props.value === value,
472
- onChange,
473
- disabled: typeof ((_a = item.props) == null ? void 0 : _a.disabled) !== "undefined" ? item.props.disabled : disabled
474
- });
475
- }
476
- if ((item == null ? void 0 : item.type) && item.type === Label) {
477
- return /* @__PURE__ */ cloneElement(item, {
478
- ...item.props,
479
- onChange,
480
- disabled
481
- });
482
- }
483
- const elemChildren = (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.children;
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
- const SelectField = /* @__PURE__ */ forwardRef(
506
- ({ className, children, "data-test-id": testId = "select", ...rest }, ref) => {
507
- const classes = cx(styles.formInput, className);
508
- return /* @__PURE__ */ jsx("select", { ...rest, "data-test-id": testId, className: classes, ref, children });
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
- const TextArea = /* @__PURE__ */ forwardRef(
513
- ({ className, "data-test-id": testId = "text-area", ...props }, ref) => {
514
- const onKeyDown = (e) => {
515
- if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
516
- e.stopPropagation();
517
- }
518
- if (e.key === "Escape") {
519
- e.nativeEvent.stopImmediatePropagation();
520
- }
521
- };
522
- return /* @__PURE__ */ jsx(
523
- "textarea",
524
- {
525
- ...props,
526
- className: cx(styles.formInput, className),
527
- ref,
528
- "data-test-id": testId,
529
- "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
530
- onKeyDown
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
- maximumFractionDigits: 6
538
- };
539
- const useNumberField = ({
540
- className,
541
- "data-test-id": testId = "input",
542
- id,
543
- name,
544
- ...otherProps
545
- } = {}) => {
546
- const formatOptions = useObjectMemo({
547
- ...defaultFormatOptions,
548
- ...otherProps.formatOptions
549
- });
550
- const { locale } = useLocale();
551
- const numberFieldState = useNumberFieldState({ ...otherProps, locale, formatOptions });
552
- const inputRef = useRef(null);
553
- const {
554
- descriptionProps: formHintProps,
555
- errorMessageProps: fieldErrorProps,
556
- labelProps,
557
- groupProps,
558
- inputProps,
559
- incrementButtonProps,
560
- decrementButtonProps
561
- } = useNumberField$1({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);
562
- return {
563
- fieldErrorProps,
564
- formHintProps,
565
- labelProps,
566
- renderNumberField: () => /* @__PURE__ */ jsxs("div", { ...groupProps, className: styles.numberField, children: [
567
- /* @__PURE__ */ jsx(
568
- "input",
569
- {
570
- ...inputProps,
571
- className: cx(styles.formInput, styles["numberField-input"]),
572
- "data-test-id": testId,
573
- name,
574
- ref: inputRef
575
- }
576
- ),
577
- /* @__PURE__ */ jsxs("div", { className: styles["numberField-stepperContainer"], children: [
578
- /* @__PURE__ */ jsx(Stepper, { ...incrementButtonProps, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up" }) }),
579
- /* @__PURE__ */ jsx(Stepper, { ...decrementButtonProps, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down" }) })
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
- const buttonRef = useRef(null);
586
- const { buttonProps } = useButton(props, buttonRef);
587
- return /* @__PURE__ */ jsx(
588
- "button",
589
- {
590
- type: "button",
591
- ...buttonProps,
592
- className: styles["numberField-stepper"],
593
- ref: buttonRef,
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
- //# sourceMappingURL=index.es.js.map
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