@launchpad-ui/form 0.8.14 → 0.8.15
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/FormField.d.ts +7 -1
- package/dist/FormField.d.ts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.es.js +125 -36
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +122 -33
- package/dist/index.js.map +1 -1
- package/dist/style.css +140 -74
- package/dist/useNumberField.d.ts +18 -0
- package/dist/useNumberField.d.ts.map +1 -0
- package/dist/utils/index.d.ts +2 -1
- package/dist/utils/index.d.ts.map +1 -1
- package/package.json +6 -2
package/dist/FormField.d.ts
CHANGED
@@ -1,4 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
+
import type { FieldErrorProps } from './FieldError';
|
3
|
+
import type { FormHintProps } from './FormHint';
|
4
|
+
import type { LabelProps } from './Label';
|
2
5
|
type FormFieldProps = {
|
3
6
|
isRequired: boolean;
|
4
7
|
label?: string;
|
@@ -12,8 +15,11 @@ type FormFieldProps = {
|
|
12
15
|
className?: string;
|
13
16
|
onBlur?: (field: string) => void;
|
14
17
|
'data-test-id'?: string;
|
18
|
+
LabelProps?: Partial<LabelProps>;
|
19
|
+
FormHintProps?: Partial<FormHintProps>;
|
20
|
+
FieldErrorProps?: Partial<FieldErrorProps>;
|
15
21
|
};
|
16
|
-
declare const FormField: ({ isRequired, label, name, htmlFor, hint, errorMessage, ignoreValidation, isInvalid, children, className, onBlur, "data-test-id": testId, }: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
|
22
|
+
declare const FormField: ({ isRequired, label, name, htmlFor, hint, errorMessage, ignoreValidation, isInvalid, children, className, onBlur, "data-test-id": testId, LabelProps, FormHintProps, FieldErrorProps, }: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
|
17
23
|
export type { FormFieldProps };
|
18
24
|
export { FormField };
|
19
25
|
//# sourceMappingURL=FormField.d.ts.map
|
package/dist/FormField.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../src/FormField.tsx"],"names":[],"mappings":";
|
1
|
+
{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../src/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAU1C,KAAK,cAAc,GAAG;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;CAC5C,CAAC;AAEF,QAAA,MAAM,SAAS,4LAgBZ,cAAc,4CAiChB,CAAC;AAEF,YAAY,EAAE,cAAc,EAAE,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
package/dist/index.d.ts
CHANGED
@@ -14,6 +14,7 @@ export type { RequiredAsteriskProps } from './RequiredAsterisk';
|
|
14
14
|
export type { SelectFieldProps } from './SelectField';
|
15
15
|
export type { TextAreaProps } from './TextArea';
|
16
16
|
export type { TextFieldProps } from './TextField';
|
17
|
+
export type { UseNumberFieldProps } from './useNumberField';
|
17
18
|
export { Checkbox } from './Checkbox';
|
18
19
|
export { CompactTextField } from './CompactTextField';
|
19
20
|
export { FieldError } from './FieldError';
|
@@ -30,4 +31,5 @@ export { RequiredAsterisk } from './RequiredAsterisk';
|
|
30
31
|
export { SelectField } from './SelectField';
|
31
32
|
export { TextArea } from './TextArea';
|
32
33
|
export { TextField } from './TextField';
|
34
|
+
export { useNumberField } from './useNumberField';
|
33
35
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
package/dist/index.es.js
CHANGED
@@ -1,37 +1,42 @@
|
|
1
1
|
import './style.css';
|
2
2
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
3
|
-
import { forwardRef,
|
3
|
+
import { forwardRef, useRef, useMemo, useState, Children, isValidElement, cloneElement } from "react";
|
4
4
|
import { cx } from "classix";
|
5
|
-
import { AlertRhombus } from "@launchpad-ui/icons";
|
5
|
+
import { AlertRhombus, ExpandLess, ExpandMore } from "@launchpad-ui/icons";
|
6
6
|
import { VisuallyHidden } from "@react-aria/visually-hidden";
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
14
|
-
const
|
15
|
-
const
|
16
|
-
const
|
17
|
-
const
|
18
|
-
const
|
19
|
-
const
|
20
|
-
const
|
21
|
-
const
|
22
|
-
const
|
23
|
-
const
|
24
|
-
const
|
25
|
-
const
|
26
|
-
const
|
27
|
-
const
|
28
|
-
const
|
29
|
-
const
|
30
|
-
const
|
31
|
-
const
|
32
|
-
const
|
33
|
-
const
|
34
|
-
const
|
7
|
+
import { useButton } from "@react-aria/button";
|
8
|
+
import { useLocale } from "@react-aria/i18n";
|
9
|
+
import { useNumberField as useNumberField$1 } from "@react-aria/numberfield";
|
10
|
+
import { useNumberFieldState } from "@react-stately/numberfield";
|
11
|
+
const formGroup = "_formGroup_1u9hb_10";
|
12
|
+
const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1u9hb_18";
|
13
|
+
const formInline = "_formInline_1u9hb_22";
|
14
|
+
const form = "_form_1u9hb_10";
|
15
|
+
const formInput = "_formInput_1u9hb_36";
|
16
|
+
const isFocused = "_isFocused_1u9hb_56";
|
17
|
+
const iconField = "_iconField_1u9hb_73";
|
18
|
+
const suffixContainer = "_suffixContainer_1u9hb_77";
|
19
|
+
const isInvalid = "_isInvalid_1u9hb_82";
|
20
|
+
const inlineForm = "_inlineForm_1u9hb_93";
|
21
|
+
const label = "_label_1u9hb_98";
|
22
|
+
const labelDisabled = "_labelDisabled_1u9hb_104";
|
23
|
+
const labelOptional = "_labelOptional_1u9hb_108";
|
24
|
+
const compactTextField = "_compactTextField_1u9hb_114";
|
25
|
+
const fieldError = "_fieldError_1u9hb_138";
|
26
|
+
const hint = "_hint_1u9hb_184";
|
27
|
+
const field = "_field_1u9hb_138";
|
28
|
+
const fieldErrorMessage = "_fieldErrorMessage_1u9hb_204";
|
29
|
+
const isDisabled = "_isDisabled_1u9hb_217";
|
30
|
+
const checkbox = "_checkbox_1u9hb_284";
|
31
|
+
const radio = "_radio_1u9hb_291";
|
32
|
+
const number = "_number_1u9hb_295";
|
33
|
+
const suffix = "_suffix_1u9hb_77";
|
34
|
+
const iconFieldIcon = "_iconFieldIcon_1u9hb_333";
|
35
|
+
const formInputTiny = "_formInputTiny_1u9hb_341";
|
36
|
+
const requiredAsterisk = "_requiredAsterisk_1u9hb_350";
|
37
|
+
const fieldSet = "_fieldSet_1u9hb_354";
|
38
|
+
const isActive = "_isActive_1u9hb_365";
|
39
|
+
const numberField = "_numberField_1u9hb_372";
|
35
40
|
const styles = {
|
36
41
|
formGroup,
|
37
42
|
formIncreasedErrorMargin,
|
@@ -60,7 +65,11 @@ const styles = {
|
|
60
65
|
formInputTiny,
|
61
66
|
requiredAsterisk,
|
62
67
|
fieldSet,
|
63
|
-
isActive
|
68
|
+
isActive,
|
69
|
+
numberField,
|
70
|
+
"numberField-input": "_numberField-input_1u9hb_376",
|
71
|
+
"numberField-stepperContainer": "_numberField-stepperContainer_1u9hb_380",
|
72
|
+
"numberField-stepper": "_numberField-stepper_1u9hb_380"
|
64
73
|
};
|
65
74
|
const RequiredAsterisk = ({
|
66
75
|
className,
|
@@ -126,6 +135,21 @@ const Checkbox = forwardRef(
|
|
126
135
|
);
|
127
136
|
Checkbox.displayName = "Checkbox";
|
128
137
|
const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
|
138
|
+
function hasObjectChanged(obj1, obj2) {
|
139
|
+
return Object.keys(obj1).length !== Object.keys(obj2).length || Object.keys(obj1).some((k) => {
|
140
|
+
const key = k;
|
141
|
+
return typeof obj1[key] === "object" && typeof obj2[key] === "object" ? hasObjectChanged(obj1[key], obj2[key]) : obj1[key] !== obj2[key];
|
142
|
+
});
|
143
|
+
}
|
144
|
+
function useObjectMemo(obj) {
|
145
|
+
const objRef = useRef(obj);
|
146
|
+
return useMemo(() => {
|
147
|
+
if (hasObjectChanged(obj, objRef.current)) {
|
148
|
+
objRef.current = obj;
|
149
|
+
}
|
150
|
+
return objRef.current;
|
151
|
+
}, [obj]);
|
152
|
+
}
|
129
153
|
const TextField = forwardRef(
|
130
154
|
({
|
131
155
|
className,
|
@@ -315,7 +339,10 @@ const FormField = ({
|
|
315
339
|
children,
|
316
340
|
className,
|
317
341
|
onBlur,
|
318
|
-
"data-test-id": testId = "form-field"
|
342
|
+
"data-test-id": testId = "form-field",
|
343
|
+
LabelProps = {},
|
344
|
+
FormHintProps = {},
|
345
|
+
FieldErrorProps = {}
|
319
346
|
}) => {
|
320
347
|
const handleBlur = () => {
|
321
348
|
onBlur && onBlur(name);
|
@@ -330,10 +357,18 @@ const FormField = ({
|
|
330
357
|
onBlur: handleBlur,
|
331
358
|
"data-test-id": testId,
|
332
359
|
children: [
|
333
|
-
label2 && /* @__PURE__ */ jsx(Label, { htmlFor, required: isRequired, children: label2 }),
|
334
|
-
hint2 && /* @__PURE__ */ jsx(FormHint, { className: styles.hint, children: hint2 }),
|
360
|
+
label2 && /* @__PURE__ */ jsx(Label, { htmlFor, required: isRequired, ...LabelProps, children: label2 }),
|
361
|
+
hint2 && /* @__PURE__ */ jsx(FormHint, { className: styles.hint, ...FormHintProps, children: hint2 }),
|
335
362
|
children,
|
336
|
-
/* @__PURE__ */ jsx(
|
363
|
+
/* @__PURE__ */ jsx(
|
364
|
+
FieldError,
|
365
|
+
{
|
366
|
+
className: styles.fieldErrorMessage,
|
367
|
+
name,
|
368
|
+
errorMessage,
|
369
|
+
...FieldErrorProps
|
370
|
+
}
|
371
|
+
)
|
337
372
|
]
|
338
373
|
}
|
339
374
|
);
|
@@ -476,6 +511,59 @@ const TextArea = forwardRef(
|
|
476
511
|
}
|
477
512
|
);
|
478
513
|
TextArea.displayName = "TextArea";
|
514
|
+
const defaultFormatOptions = {
|
515
|
+
maximumFractionDigits: 6
|
516
|
+
};
|
517
|
+
const useNumberField = ({
|
518
|
+
className: rootClassName,
|
519
|
+
"data-test-id": testId = "input",
|
520
|
+
id,
|
521
|
+
name,
|
522
|
+
...otherProps
|
523
|
+
} = {}) => {
|
524
|
+
const formatOptions = useObjectMemo({
|
525
|
+
...defaultFormatOptions,
|
526
|
+
...otherProps.formatOptions
|
527
|
+
});
|
528
|
+
const { locale } = useLocale();
|
529
|
+
const numberFieldState = useNumberFieldState({ ...otherProps, locale, formatOptions });
|
530
|
+
const inputRef = useRef(null);
|
531
|
+
const {
|
532
|
+
descriptionProps: formHintProps,
|
533
|
+
errorMessageProps: fieldErrorProps,
|
534
|
+
labelProps,
|
535
|
+
groupProps,
|
536
|
+
inputProps,
|
537
|
+
incrementButtonProps,
|
538
|
+
decrementButtonProps
|
539
|
+
} = useNumberField$1({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);
|
540
|
+
return {
|
541
|
+
fieldErrorProps,
|
542
|
+
formHintProps,
|
543
|
+
labelProps,
|
544
|
+
renderNumberField: () => /* @__PURE__ */ jsxs("div", { ...groupProps, className: styles.numberField, children: [
|
545
|
+
/* @__PURE__ */ jsx(
|
546
|
+
"input",
|
547
|
+
{
|
548
|
+
...inputProps,
|
549
|
+
className: cx(styles.formInput, styles["numberField-input"]),
|
550
|
+
"data-test-id": testId,
|
551
|
+
name,
|
552
|
+
ref: inputRef
|
553
|
+
}
|
554
|
+
),
|
555
|
+
/* @__PURE__ */ jsxs("div", { className: styles["numberField-stepperContainer"], children: [
|
556
|
+
/* @__PURE__ */ jsx(Stepper, { ...incrementButtonProps, children: /* @__PURE__ */ jsx(ExpandLess, {}) }),
|
557
|
+
/* @__PURE__ */ jsx(Stepper, { ...decrementButtonProps, children: /* @__PURE__ */ jsx(ExpandMore, {}) })
|
558
|
+
] })
|
559
|
+
] })
|
560
|
+
};
|
561
|
+
};
|
562
|
+
const Stepper = (props) => {
|
563
|
+
const buttonRef = useRef(null);
|
564
|
+
const { buttonProps } = useButton(props, buttonRef);
|
565
|
+
return /* @__PURE__ */ jsx("button", { ...buttonProps, className: styles["numberField-stepper"], ref: buttonRef, children: props.children });
|
566
|
+
};
|
479
567
|
export {
|
480
568
|
Checkbox,
|
481
569
|
CompactTextField,
|
@@ -492,6 +580,7 @@ export {
|
|
492
580
|
RequiredAsterisk,
|
493
581
|
SelectField,
|
494
582
|
TextArea,
|
495
|
-
TextField
|
583
|
+
TextField,
|
584
|
+
useNumberField
|
496
585
|
};
|
497
586
|
//# sourceMappingURL=index.es.js.map
|
package/dist/index.es.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../src/RequiredAsterisk.tsx","../src/Label.tsx","../src/Checkbox.tsx","../src/utils/index.ts","../src/TextField.tsx","../src/CompactTextField.tsx","../src/FieldError.tsx","../src/FieldSet.tsx","../src/Form.tsx","../src/FormGroup.tsx","../src/FormHint.tsx","../src/FormField.tsx","../src/IconField.tsx","../src/Radio.tsx","../src/RadioGroup.tsx","../src/SelectField.tsx","../src/TextArea.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype RequiredAsteriskProps = ComponentProps<'span'> & {\n 'data-test-id'?: string;\n};\n\nconst RequiredAsterisk = ({\n className,\n 'data-test-id': testId = 'required-asterisk',\n ...rest\n}: RequiredAsteriskProps) => {\n const classes = cx(styles.requiredAsterisk, className);\n\n return (\n <span {...rest} data-test-id={testId} className={classes}>\n *\n </span>\n );\n};\n\nexport { RequiredAsterisk };\nexport type { RequiredAsteriskProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport styles from './styles/Form.module.css';\n\ntype LabelProps = ComponentProps<'label'> & {\n required?: boolean;\n optional?: boolean;\n disabled?: boolean;\n 'data-test-id'?: string;\n};\n\nconst Label = ({\n disabled,\n className,\n children,\n required = false,\n optional = false,\n 'data-test-id': testId = 'label',\n ...rest\n}: LabelProps) => {\n const classes = cx(styles.label, className, disabled && styles.labelDisabled);\n\n return (\n <label {...rest} data-test-id={testId} className={classes}>\n {children}\n {optional && !required && <small className={styles.labelOptional}>(optional)</small>}\n {required && !optional && <RequiredAsterisk />}\n </label>\n );\n};\n\nexport { Label };\nexport type { LabelProps };\n","import type { ComponentProps } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype CheckboxProps = ComponentProps<'input'> & {\n /**\n * The className to pass into the Checkbox's Label component\n */\n labelClassName?: string;\n 'data-test-id'?: string;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n disabled,\n checked,\n labelClassName,\n 'data-test-id': testId = 'checkbox',\n ...rest\n },\n ref\n ) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <Label className={labelClassName}>\n <input\n {...rest}\n ref={ref}\n checked={checked}\n aria-checked={checked ? 'true' : 'false'}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={styles.checkbox}\n disabled={disabled}\n type=\"checkbox\"\n data-test-id={testId}\n />{' '}\n {disabled ? <span className={styles.labelDisabled}>{children}</span> : children}\n </Label>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport type { CheckboxProps };\n","type FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nexport { createFieldErrorId };\nexport type { FieldPath };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = ComponentProps<'input'> & {\n suffix?: string;\n tiny?: boolean;\n overrideWidth?: string;\n 'data-test-id'?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n className,\n type = 'text',\n tiny = false,\n readOnly,\n tabIndex = 0,\n suffix,\n overrideWidth,\n 'data-test-id': testId = 'text-field',\n ...rest\n },\n ref\n ) => {\n const classes = overrideWidth\n ? className\n : cx(styles.formInput, tiny && styles.formInputTiny, className);\n\n if (suffix) {\n return (\n <div className={styles.suffixContainer}>\n <input\n {...rest}\n type={type}\n data-test-id={testId}\n className={classes}\n readOnly={readOnly}\n ref={ref}\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n <label className={styles.suffix} htmlFor={rest.id}>\n {suffix}\n </label>\n </div>\n );\n }\n\n return (\n <input\n {...rest}\n type={type}\n className={classes}\n readOnly={readOnly}\n tabIndex={tabIndex}\n ref={ref}\n data-test-id={testId}\n style={\n overrideWidth\n ? {\n width: overrideWidth,\n }\n : undefined\n }\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n );\n }\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField };\nexport type { TextFieldProps };\n","import type { TextFieldProps } from './TextField';\nimport type { FocusEvent } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef, useState } from 'react';\n\nimport { Label } from './Label';\nimport { TextField } from './TextField';\nimport styles from './styles/Form.module.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n label: string;\n needsErrorFeedback?: boolean;\n};\n\nconst CompactTextField = forwardRef<HTMLInputElement, CompactTextFieldProps>(\n (\n {\n className,\n id,\n label,\n needsErrorFeedback,\n value,\n onFocus,\n onBlur,\n 'data-test-id': testId = 'compact-text-field',\n ...rest\n },\n ref\n ) => {\n const [isActive, setIsActive] = useState(\n (typeof value === 'boolean' || value ? value.toString() : '').trim().length !== 0\n );\n\n const isActiveState = isActive || needsErrorFeedback;\n\n const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);\n\n const placeholder = isActiveState ? '' : label;\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setIsActive(true);\n if (onFocus) {\n onFocus(event);\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n const value = event.target.value || '';\n setIsActive(value.trim().length !== 0);\n if (onBlur) {\n onBlur(event);\n }\n };\n\n return (\n <div className={classes} data-test-id={testId}>\n <Label htmlFor={id}>{label}</Label>\n <TextField\n {...rest}\n id={id}\n placeholder={placeholder}\n value={value}\n ref={ref}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n </div>\n );\n }\n);\n\nCompactTextField.displayName = 'CompactTextField';\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n","import type { FieldPath } from './utils';\nimport type { ComponentProps } from 'react';\n\nimport { AlertRhombus } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = ComponentProps<'span'> & {\n name: FieldPath;\n errorMessage?: string;\n 'data-test-id'?: string;\n};\n\nconst FieldError = ({\n name,\n errorMessage,\n className,\n 'data-test-id': testId = 'field-error',\n ...rest\n}: FieldErrorProps) => {\n if (!errorMessage) {\n return null;\n }\n\n return (\n <span\n {...rest}\n className={cx(styles.fieldError, className)}\n aria-live=\"polite\"\n data-test-id={testId}\n aria-label=\"Error\"\n id={createFieldErrorId(name)}\n >\n <AlertRhombus size=\"small\" /> {errorMessage}\n </span>\n );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FieldSetProps = ComponentProps<'fieldset'> & {\n 'data-test-id'?: string;\n};\n\nconst FieldSet = ({\n children,\n className,\n 'data-test-id': testId = 'field-set',\n ...rest\n}: FieldSetProps) => {\n const classes = cx(styles.fieldSet, className);\n\n return (\n <fieldset data-test-id={testId} className={classes} {...rest}>\n {children}\n </fieldset>\n );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormProps = ComponentProps<'form'> & {\n inline?: boolean;\n // Increases margin between form fields to make room for error messages.\n // This prevents the form from shifting when rendering a field error.\n // This may be desired when the form contains external links that will\n // shift while clicking if the form shifts from validation.\n hasIncreasedErrorMargin?: boolean;\n 'data-test-id'?: string;\n};\n\nconst Form = (props: FormProps) => {\n const {\n className,\n inline,\n children,\n hasIncreasedErrorMargin,\n 'data-test-id': testId = 'form',\n ...rest\n } = props;\n\n const classes = cx(\n styles.form,\n className,\n inline && styles.formInline,\n !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin\n );\n\n return (\n <form {...rest} data-test-id={testId} className={classes}>\n {children}\n </form>\n );\n};\n\nexport { Form };\nexport type { FormProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormGroupProps = ComponentProps<'fieldset'> & {\n name?: string | string[];\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n 'data-test-id'?: string;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n const {\n className,\n name,\n ignoreValidation,\n isInvalid,\n children,\n 'data-test-id': testId = 'form-group',\n ...rest\n } = props;\n\n const classes = cx(\n styles.formGroup,\n className,\n !ignoreValidation && isInvalid && styles.isInvalid\n );\n\n return (\n <fieldset className={classes} data-test-id={testId} {...rest}>\n {children}\n </fieldset>\n );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormHintProps = ComponentProps<'div'> & {\n 'data-test-id'?: string;\n};\n\nconst FormHint = ({\n className,\n children,\n 'data-test-id': testId = 'form-hint',\n ...rest\n}: FormHintProps) => {\n const classes = cx(styles.hint, className);\n\n return (\n <div {...rest} data-test-id={testId} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n","import { cx } from 'classix';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype FormFieldProps = {\n isRequired: boolean;\n label?: string;\n name: string;\n htmlFor: string;\n hint?: string;\n errorMessage?: string;\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n children: JSX.Element;\n className?: string;\n onBlur?: (field: string) => void;\n 'data-test-id'?: string;\n};\n\nconst FormField = ({\n isRequired,\n label,\n name,\n htmlFor,\n hint,\n errorMessage,\n ignoreValidation,\n isInvalid,\n children,\n className,\n onBlur,\n 'data-test-id': testId = 'form-field',\n}: FormFieldProps) => {\n const handleBlur = () => {\n onBlur && onBlur(name);\n };\n\n return (\n <FormGroup\n className={cx(styles.field, className)}\n name={name}\n ignoreValidation={ignoreValidation}\n isInvalid={isInvalid}\n onBlur={handleBlur}\n data-test-id={testId}\n >\n {label && (\n <Label htmlFor={htmlFor} required={isRequired}>\n {label}\n </Label>\n )}\n {hint && <FormHint className={styles.hint}>{hint}</FormHint>}\n {children}\n <FieldError className={styles.fieldErrorMessage} name={name} errorMessage={errorMessage} />\n </FormGroup>\n );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n","import type { IconProps } from '@launchpad-ui/icons';\nimport type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype IconFieldProps = ComponentProps<'div'> & {\n icon(args: IconProps): JSX.Element;\n children: JSX.Element | JSX.Element[];\n 'data-test-id'?: string;\n};\n\nconst IconField = ({\n icon,\n children,\n className,\n 'data-test-id': testId = 'icon-field',\n ...rest\n}: IconFieldProps) => {\n const Icon = icon;\n\n const classes = cx(styles.iconField, className);\n\n return (\n <div className={classes} data-test-id={testId} {...rest}>\n {children}\n <Icon size=\"small\" className={styles.iconFieldIcon} />\n </div>\n );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n","import type { CSSProperties, ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype RadioProps = Omit<ComponentProps<'input'>, 'type'> & {\n labelClassName?: string;\n labelStyle?: CSSProperties;\n 'data-test-id'?: string;\n};\n\nconst Radio = ({\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n checked = false,\n children,\n className,\n disabled = false,\n id,\n labelClassName,\n labelStyle,\n 'data-test-id': testId = 'radio',\n ...rest\n}: RadioProps) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <>\n <input\n {...rest}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={cx(styles.radio, className)}\n checked={checked}\n disabled={disabled}\n id={id}\n data-test-id={testId}\n type=\"radio\"\n />\n <Label className={labelClassName} htmlFor={id} style={labelStyle}>\n {disabled ? <span className={styles.labelDisabled}>{children}</span> : children}\n </Label>\n </>\n );\n};\n\nexport { Radio };\nexport type { RadioProps };\n","import type { ChangeEvent, FormEvent, ReactElement, ReactNode } from 'react';\n\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\n\ntype RadioGroupProps = {\n /**\n * The legend that describes this groups of radio buttons. The legend\n * is important for screen reader users.\n */\n legend?: string;\n /**\n * The children passed into the RadioGroup.\n */\n children?: ReactNode;\n /**\n * Custom classname(s) passed to the fieldset inner div.\n */\n className?: string;\n /**\n * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n */\n disabled?: boolean;\n /**\n * The RadioGroup's id.\n */\n id?: string;\n /**\n * Name to apply to the underlying Radio. The same name value is passed to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name: string;\n /**\n * This function is passed into each Radio onChange synthetic event handler.\n */\n onChange?(e: ChangeEvent | FormEvent<HTMLInputElement>): void;\n /**\n * The value to compare against the Radio's value to determine if the Radio will be checked.\n */\n value: string;\n\n 'data-test-id'?: string;\n};\n\nconst RadioGroup = (props: RadioGroupProps) => {\n const {\n name,\n value,\n onChange,\n children,\n disabled,\n legend,\n 'data-test-id': testId = 'radio-group',\n ...rest\n } = props;\n const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n function updateRadioElems(elem: ReactNode): ReactNode {\n if (!isValidElement(elem)) {\n return elem;\n }\n\n const item = elem as ReactElement;\n\n if (item?.type && item.type === Radio) {\n return cloneElement(item, {\n ...item.props,\n name,\n checked: item.props.value === value,\n onChange,\n disabled: typeof item.props?.disabled !== 'undefined' ? item.props.disabled : disabled,\n });\n }\n\n if (item?.type && item.type === Label) {\n return cloneElement(item, {\n ...item.props,\n onChange,\n disabled,\n });\n }\n\n const elemChildren = item?.props?.children;\n if (elemChildren) {\n if (Array.isArray(elemChildren)) {\n return cloneElement(item, {\n children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n });\n }\n return cloneElement(item, {\n children: updateRadioElems(elemChildren),\n });\n }\n\n if (item?.type && item.type !== Radio && item.type !== Label) {\n return item;\n }\n\n return null;\n }\n\n const radios = Children.map(children, (child) => updateRadioElems(child));\n return (\n <fieldset data-test-id={testId} ref={fieldsetRef}>\n {legend && (\n <legend>\n <VisuallyHidden>{legend}</VisuallyHidden>\n </legend>\n )}\n <div {...rest}>{radios}</div>\n </fieldset>\n );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\n\ntype SelectFieldProps = ComponentProps<'select'> & {\n 'data-test-id'?: string;\n};\n\nconst SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(\n ({ className, children, 'data-test-id': testId = 'select', ...rest }: SelectFieldProps, ref) => {\n const classes = cx(styles.formInput, className);\n\n return (\n <select {...rest} data-test-id={testId} className={classes} ref={ref}>\n {children}\n </select>\n );\n }\n);\n\nSelectField.displayName = 'SelectField';\n\nexport { SelectField };\nexport type { SelectFieldProps };\n","import type { KeyboardEvent, ComponentProps } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = ComponentProps<'textarea'> & {\n 'data-test-id'?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ className, 'data-test-id': testId = 'text-area', ...props }, ref) => {\n const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (\n e.key === 'ArrowRight' ||\n e.key === 'ArrowDown' ||\n e.key === 'ArrowUp' ||\n e.key === 'ArrowLeft'\n ) {\n e.stopPropagation();\n }\n if (e.key === 'Escape') {\n e.nativeEvent.stopImmediatePropagation();\n }\n };\n\n return (\n <textarea\n {...props}\n className={cx(styles.formInput, className)}\n ref={ref}\n data-test-id={testId}\n aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n onKeyDown={onKeyDown}\n />\n );\n }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],"names":["suffix","label","isActive","value","isInvalid","hint"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../src/RequiredAsterisk.tsx","../src/Label.tsx","../src/Checkbox.tsx","../src/utils/index.ts","../src/TextField.tsx","../src/CompactTextField.tsx","../src/FieldError.tsx","../src/FieldSet.tsx","../src/Form.tsx","../src/FormGroup.tsx","../src/FormHint.tsx","../src/FormField.tsx","../src/IconField.tsx","../src/Radio.tsx","../src/RadioGroup.tsx","../src/SelectField.tsx","../src/TextArea.tsx","../src/useNumberField.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype RequiredAsteriskProps = ComponentProps<'span'> & {\n 'data-test-id'?: string;\n};\n\nconst RequiredAsterisk = ({\n className,\n 'data-test-id': testId = 'required-asterisk',\n ...rest\n}: RequiredAsteriskProps) => {\n const classes = cx(styles.requiredAsterisk, className);\n\n return (\n <span {...rest} data-test-id={testId} className={classes}>\n *\n </span>\n );\n};\n\nexport { RequiredAsterisk };\nexport type { RequiredAsteriskProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport styles from './styles/Form.module.css';\n\ntype LabelProps = ComponentProps<'label'> & {\n required?: boolean;\n optional?: boolean;\n disabled?: boolean;\n 'data-test-id'?: string;\n};\n\nconst Label = ({\n disabled,\n className,\n children,\n required = false,\n optional = false,\n 'data-test-id': testId = 'label',\n ...rest\n}: LabelProps) => {\n const classes = cx(styles.label, className, disabled && styles.labelDisabled);\n\n return (\n <label {...rest} data-test-id={testId} className={classes}>\n {children}\n {optional && !required && <small className={styles.labelOptional}>(optional)</small>}\n {required && !optional && <RequiredAsterisk />}\n </label>\n );\n};\n\nexport { Label };\nexport type { LabelProps };\n","import type { ComponentProps } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype CheckboxProps = ComponentProps<'input'> & {\n /**\n * The className to pass into the Checkbox's Label component\n */\n labelClassName?: string;\n 'data-test-id'?: string;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n disabled,\n checked,\n labelClassName,\n 'data-test-id': testId = 'checkbox',\n ...rest\n },\n ref\n ) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <Label className={labelClassName}>\n <input\n {...rest}\n ref={ref}\n checked={checked}\n aria-checked={checked ? 'true' : 'false'}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={styles.checkbox}\n disabled={disabled}\n type=\"checkbox\"\n data-test-id={testId}\n />{' '}\n {disabled ? <span className={styles.labelDisabled}>{children}</span> : children}\n </Label>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport type { CheckboxProps };\n","import { useMemo, useRef } from 'react';\n\ntype FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nfunction hasObjectChanged<T extends object>(obj1: T, obj2: T): boolean {\n return (\n Object.keys(obj1).length !== Object.keys(obj2).length ||\n Object.keys(obj1).some((k) => {\n const key = k as keyof T;\n return typeof obj1[key] === 'object' && typeof obj2[key] === 'object'\n ? hasObjectChanged(obj1[key] as T, obj2[key] as T)\n : obj1[key] !== obj2[key];\n })\n );\n}\n\nfunction useObjectMemo<T extends object>(obj: T) {\n const objRef = useRef(obj);\n\n return useMemo(() => {\n if (hasObjectChanged(obj, objRef.current)) {\n objRef.current = obj;\n }\n\n return objRef.current;\n }, [obj]);\n}\n\nexport { createFieldErrorId, useObjectMemo };\nexport type { FieldPath };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = ComponentProps<'input'> & {\n suffix?: string;\n tiny?: boolean;\n overrideWidth?: string;\n 'data-test-id'?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n className,\n type = 'text',\n tiny = false,\n readOnly,\n tabIndex = 0,\n suffix,\n overrideWidth,\n 'data-test-id': testId = 'text-field',\n ...rest\n },\n ref\n ) => {\n const classes = overrideWidth\n ? className\n : cx(styles.formInput, tiny && styles.formInputTiny, className);\n\n if (suffix) {\n return (\n <div className={styles.suffixContainer}>\n <input\n {...rest}\n type={type}\n data-test-id={testId}\n className={classes}\n readOnly={readOnly}\n ref={ref}\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n <label className={styles.suffix} htmlFor={rest.id}>\n {suffix}\n </label>\n </div>\n );\n }\n\n return (\n <input\n {...rest}\n type={type}\n className={classes}\n readOnly={readOnly}\n tabIndex={tabIndex}\n ref={ref}\n data-test-id={testId}\n style={\n overrideWidth\n ? {\n width: overrideWidth,\n }\n : undefined\n }\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n );\n }\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField };\nexport type { TextFieldProps };\n","import type { TextFieldProps } from './TextField';\nimport type { FocusEvent } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef, useState } from 'react';\n\nimport { Label } from './Label';\nimport { TextField } from './TextField';\nimport styles from './styles/Form.module.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n label: string;\n needsErrorFeedback?: boolean;\n};\n\nconst CompactTextField = forwardRef<HTMLInputElement, CompactTextFieldProps>(\n (\n {\n className,\n id,\n label,\n needsErrorFeedback,\n value,\n onFocus,\n onBlur,\n 'data-test-id': testId = 'compact-text-field',\n ...rest\n },\n ref\n ) => {\n const [isActive, setIsActive] = useState(\n (typeof value === 'boolean' || value ? value.toString() : '').trim().length !== 0\n );\n\n const isActiveState = isActive || needsErrorFeedback;\n\n const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);\n\n const placeholder = isActiveState ? '' : label;\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setIsActive(true);\n if (onFocus) {\n onFocus(event);\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n const value = event.target.value || '';\n setIsActive(value.trim().length !== 0);\n if (onBlur) {\n onBlur(event);\n }\n };\n\n return (\n <div className={classes} data-test-id={testId}>\n <Label htmlFor={id}>{label}</Label>\n <TextField\n {...rest}\n id={id}\n placeholder={placeholder}\n value={value}\n ref={ref}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n </div>\n );\n }\n);\n\nCompactTextField.displayName = 'CompactTextField';\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n","import type { FieldPath } from './utils';\nimport type { ComponentProps } from 'react';\n\nimport { AlertRhombus } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = ComponentProps<'span'> & {\n name: FieldPath;\n errorMessage?: string;\n 'data-test-id'?: string;\n};\n\nconst FieldError = ({\n name,\n errorMessage,\n className,\n 'data-test-id': testId = 'field-error',\n ...rest\n}: FieldErrorProps) => {\n if (!errorMessage) {\n return null;\n }\n\n return (\n <span\n {...rest}\n className={cx(styles.fieldError, className)}\n aria-live=\"polite\"\n data-test-id={testId}\n aria-label=\"Error\"\n id={createFieldErrorId(name)}\n >\n <AlertRhombus size=\"small\" /> {errorMessage}\n </span>\n );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FieldSetProps = ComponentProps<'fieldset'> & {\n 'data-test-id'?: string;\n};\n\nconst FieldSet = ({\n children,\n className,\n 'data-test-id': testId = 'field-set',\n ...rest\n}: FieldSetProps) => {\n const classes = cx(styles.fieldSet, className);\n\n return (\n <fieldset data-test-id={testId} className={classes} {...rest}>\n {children}\n </fieldset>\n );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormProps = ComponentProps<'form'> & {\n inline?: boolean;\n // Increases margin between form fields to make room for error messages.\n // This prevents the form from shifting when rendering a field error.\n // This may be desired when the form contains external links that will\n // shift while clicking if the form shifts from validation.\n hasIncreasedErrorMargin?: boolean;\n 'data-test-id'?: string;\n};\n\nconst Form = (props: FormProps) => {\n const {\n className,\n inline,\n children,\n hasIncreasedErrorMargin,\n 'data-test-id': testId = 'form',\n ...rest\n } = props;\n\n const classes = cx(\n styles.form,\n className,\n inline && styles.formInline,\n !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin\n );\n\n return (\n <form {...rest} data-test-id={testId} className={classes}>\n {children}\n </form>\n );\n};\n\nexport { Form };\nexport type { FormProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormGroupProps = ComponentProps<'fieldset'> & {\n name?: string | string[];\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n 'data-test-id'?: string;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n const {\n className,\n name,\n ignoreValidation,\n isInvalid,\n children,\n 'data-test-id': testId = 'form-group',\n ...rest\n } = props;\n\n const classes = cx(\n styles.formGroup,\n className,\n !ignoreValidation && isInvalid && styles.isInvalid\n );\n\n return (\n <fieldset className={classes} data-test-id={testId} {...rest}>\n {children}\n </fieldset>\n );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormHintProps = ComponentProps<'div'> & {\n 'data-test-id'?: string;\n};\n\nconst FormHint = ({\n className,\n children,\n 'data-test-id': testId = 'form-hint',\n ...rest\n}: FormHintProps) => {\n const classes = cx(styles.hint, className);\n\n return (\n <div {...rest} data-test-id={testId} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n","import type { FieldErrorProps } from './FieldError';\nimport type { FormHintProps } from './FormHint';\nimport type { LabelProps } from './Label';\n\nimport { cx } from 'classix';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype FormFieldProps = {\n isRequired: boolean;\n label?: string;\n name: string;\n htmlFor: string;\n hint?: string;\n errorMessage?: string;\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n children: JSX.Element;\n className?: string;\n onBlur?: (field: string) => void;\n 'data-test-id'?: string;\n LabelProps?: Partial<LabelProps>;\n FormHintProps?: Partial<FormHintProps>;\n FieldErrorProps?: Partial<FieldErrorProps>;\n};\n\nconst FormField = ({\n isRequired,\n label,\n name,\n htmlFor,\n hint,\n errorMessage,\n ignoreValidation,\n isInvalid,\n children,\n className,\n onBlur,\n 'data-test-id': testId = 'form-field',\n LabelProps = {},\n FormHintProps = {},\n FieldErrorProps = {},\n}: FormFieldProps) => {\n const handleBlur = () => {\n onBlur && onBlur(name);\n };\n\n return (\n <FormGroup\n className={cx(styles.field, className)}\n name={name}\n ignoreValidation={ignoreValidation}\n isInvalid={isInvalid}\n onBlur={handleBlur}\n data-test-id={testId}\n >\n {label && (\n <Label htmlFor={htmlFor} required={isRequired} {...LabelProps}>\n {label}\n </Label>\n )}\n {hint && (\n <FormHint className={styles.hint} {...FormHintProps}>\n {hint}\n </FormHint>\n )}\n {children}\n <FieldError\n className={styles.fieldErrorMessage}\n name={name}\n errorMessage={errorMessage}\n {...FieldErrorProps}\n />\n </FormGroup>\n );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n","import type { IconProps } from '@launchpad-ui/icons';\nimport type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype IconFieldProps = ComponentProps<'div'> & {\n icon(args: IconProps): JSX.Element;\n children: JSX.Element | JSX.Element[];\n 'data-test-id'?: string;\n};\n\nconst IconField = ({\n icon,\n children,\n className,\n 'data-test-id': testId = 'icon-field',\n ...rest\n}: IconFieldProps) => {\n const Icon = icon;\n\n const classes = cx(styles.iconField, className);\n\n return (\n <div className={classes} data-test-id={testId} {...rest}>\n {children}\n <Icon size=\"small\" className={styles.iconFieldIcon} />\n </div>\n );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n","import type { CSSProperties, ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype RadioProps = Omit<ComponentProps<'input'>, 'type'> & {\n labelClassName?: string;\n labelStyle?: CSSProperties;\n 'data-test-id'?: string;\n};\n\nconst Radio = ({\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n checked = false,\n children,\n className,\n disabled = false,\n id,\n labelClassName,\n labelStyle,\n 'data-test-id': testId = 'radio',\n ...rest\n}: RadioProps) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <>\n <input\n {...rest}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={cx(styles.radio, className)}\n checked={checked}\n disabled={disabled}\n id={id}\n data-test-id={testId}\n type=\"radio\"\n />\n <Label className={labelClassName} htmlFor={id} style={labelStyle}>\n {disabled ? <span className={styles.labelDisabled}>{children}</span> : children}\n </Label>\n </>\n );\n};\n\nexport { Radio };\nexport type { RadioProps };\n","import type { ChangeEvent, FormEvent, ReactElement, ReactNode } from 'react';\n\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\n\ntype RadioGroupProps = {\n /**\n * The legend that describes this groups of radio buttons. The legend\n * is important for screen reader users.\n */\n legend?: string;\n /**\n * The children passed into the RadioGroup.\n */\n children?: ReactNode;\n /**\n * Custom classname(s) passed to the fieldset inner div.\n */\n className?: string;\n /**\n * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n */\n disabled?: boolean;\n /**\n * The RadioGroup's id.\n */\n id?: string;\n /**\n * Name to apply to the underlying Radio. The same name value is passed to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name: string;\n /**\n * This function is passed into each Radio onChange synthetic event handler.\n */\n onChange?(e: ChangeEvent | FormEvent<HTMLInputElement>): void;\n /**\n * The value to compare against the Radio's value to determine if the Radio will be checked.\n */\n value: string;\n\n 'data-test-id'?: string;\n};\n\nconst RadioGroup = (props: RadioGroupProps) => {\n const {\n name,\n value,\n onChange,\n children,\n disabled,\n legend,\n 'data-test-id': testId = 'radio-group',\n ...rest\n } = props;\n const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n function updateRadioElems(elem: ReactNode): ReactNode {\n if (!isValidElement(elem)) {\n return elem;\n }\n\n const item = elem as ReactElement;\n\n if (item?.type && item.type === Radio) {\n return cloneElement(item, {\n ...item.props,\n name,\n checked: item.props.value === value,\n onChange,\n disabled: typeof item.props?.disabled !== 'undefined' ? item.props.disabled : disabled,\n });\n }\n\n if (item?.type && item.type === Label) {\n return cloneElement(item, {\n ...item.props,\n onChange,\n disabled,\n });\n }\n\n const elemChildren = item?.props?.children;\n if (elemChildren) {\n if (Array.isArray(elemChildren)) {\n return cloneElement(item, {\n children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n });\n }\n return cloneElement(item, {\n children: updateRadioElems(elemChildren),\n });\n }\n\n if (item?.type && item.type !== Radio && item.type !== Label) {\n return item;\n }\n\n return null;\n }\n\n const radios = Children.map(children, (child) => updateRadioElems(child));\n return (\n <fieldset data-test-id={testId} ref={fieldsetRef}>\n {legend && (\n <legend>\n <VisuallyHidden>{legend}</VisuallyHidden>\n </legend>\n )}\n <div {...rest}>{radios}</div>\n </fieldset>\n );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\n\ntype SelectFieldProps = ComponentProps<'select'> & {\n 'data-test-id'?: string;\n};\n\nconst SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(\n ({ className, children, 'data-test-id': testId = 'select', ...rest }: SelectFieldProps, ref) => {\n const classes = cx(styles.formInput, className);\n\n return (\n <select {...rest} data-test-id={testId} className={classes} ref={ref}>\n {children}\n </select>\n );\n }\n);\n\nSelectField.displayName = 'SelectField';\n\nexport { SelectField };\nexport type { SelectFieldProps };\n","import type { KeyboardEvent, ComponentProps } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = ComponentProps<'textarea'> & {\n 'data-test-id'?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ className, 'data-test-id': testId = 'text-area', ...props }, ref) => {\n const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n if (\n e.key === 'ArrowRight' ||\n e.key === 'ArrowDown' ||\n e.key === 'ArrowUp' ||\n e.key === 'ArrowLeft'\n ) {\n e.stopPropagation();\n }\n if (e.key === 'Escape') {\n e.nativeEvent.stopImmediatePropagation();\n }\n };\n\n return (\n <textarea\n {...props}\n className={cx(styles.formInput, className)}\n ref={ref}\n data-test-id={testId}\n aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n onKeyDown={onKeyDown}\n />\n );\n }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n","import type { AriaButtonProps } from '@react-aria/button';\nimport type { AriaNumberFieldProps } from '@react-aria/numberfield';\n\nimport { ExpandLess, ExpandMore } from '@launchpad-ui/icons';\nimport { useButton } from '@react-aria/button';\nimport { useLocale } from '@react-aria/i18n';\nimport { useNumberField as useReactAriaNumberField } from '@react-aria/numberfield';\nimport { useNumberFieldState } from '@react-stately/numberfield';\nimport { cx } from 'classix';\nimport { useRef } from 'react';\n\nimport styles from './styles/Form.module.css';\nimport { useObjectMemo } from './utils';\n\ntype UseNumberFieldProps = AriaNumberFieldProps & {\n className?: string;\n 'data-test-id'?: string;\n id?: string;\n name?: string;\n};\n\nconst defaultFormatOptions: Intl.NumberFormatOptions = {\n maximumFractionDigits: 6,\n};\n\nconst useNumberField = ({\n className: rootClassName,\n 'data-test-id': testId = 'input',\n id,\n name,\n ...otherProps\n}: UseNumberFieldProps = {}): {\n fieldErrorProps: ReturnType<typeof useReactAriaNumberField>['errorMessageProps'];\n formHintProps: ReturnType<typeof useReactAriaNumberField>['descriptionProps'];\n labelProps: ReturnType<typeof useReactAriaNumberField>['labelProps'];\n renderNumberField: () => JSX.Element;\n} => {\n // @react-aria's hooks have a state-updating effect somewhere that depends on \"formatOptions\",\n // so we need to memoize it to prevent an infinite render loop.\n const formatOptions = useObjectMemo({\n ...defaultFormatOptions,\n ...otherProps.formatOptions,\n });\n const { locale } = useLocale();\n const numberFieldState = useNumberFieldState({ ...otherProps, locale, formatOptions });\n const inputRef = useRef<HTMLInputElement>(null);\n const {\n descriptionProps: formHintProps,\n errorMessageProps: fieldErrorProps,\n labelProps,\n groupProps,\n inputProps,\n incrementButtonProps,\n decrementButtonProps,\n } = useReactAriaNumberField({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);\n\n return {\n fieldErrorProps,\n formHintProps,\n labelProps,\n renderNumberField: () => (\n <div {...groupProps} className={styles.numberField}>\n <input\n {...inputProps}\n className={cx(styles.formInput, styles['numberField-input'])}\n data-test-id={testId}\n name={name}\n ref={inputRef}\n />\n <div className={styles['numberField-stepperContainer']}>\n <Stepper {...incrementButtonProps}>\n <ExpandLess />\n </Stepper>\n <Stepper {...decrementButtonProps}>\n <ExpandMore />\n </Stepper>\n </div>\n </div>\n ),\n };\n};\n\nconst Stepper = (props: AriaButtonProps) => {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const { buttonProps } = useButton(props, buttonRef);\n\n return (\n <button {...buttonProps} className={styles['numberField-stepper']} ref={buttonRef}>\n {props.children}\n </button>\n );\n};\n\nexport { useNumberField };\nexport type { UseNumberFieldProps };\n"],"names":["suffix","label","isActive","value","isInvalid","hint","useReactAriaNumberField"],"mappings":"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"}
|
package/dist/index.js
CHANGED
@@ -6,34 +6,39 @@ const react = require("react");
|
|
6
6
|
const classix = require("classix");
|
7
7
|
const icons = require("@launchpad-ui/icons");
|
8
8
|
const visuallyHidden = require("@react-aria/visually-hidden");
|
9
|
-
const
|
10
|
-
const
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
14
|
-
const
|
15
|
-
const
|
16
|
-
const
|
17
|
-
const
|
18
|
-
const
|
19
|
-
const
|
20
|
-
const
|
21
|
-
const
|
22
|
-
const
|
23
|
-
const
|
24
|
-
const
|
25
|
-
const
|
26
|
-
const
|
27
|
-
const
|
28
|
-
const
|
29
|
-
const
|
30
|
-
const
|
31
|
-
const
|
32
|
-
const
|
33
|
-
const
|
34
|
-
const
|
35
|
-
const
|
36
|
-
const
|
9
|
+
const button = require("@react-aria/button");
|
10
|
+
const i18n = require("@react-aria/i18n");
|
11
|
+
const numberfield$1 = require("@react-aria/numberfield");
|
12
|
+
const numberfield = require("@react-stately/numberfield");
|
13
|
+
const formGroup = "_formGroup_1u9hb_10";
|
14
|
+
const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1u9hb_18";
|
15
|
+
const formInline = "_formInline_1u9hb_22";
|
16
|
+
const form = "_form_1u9hb_10";
|
17
|
+
const formInput = "_formInput_1u9hb_36";
|
18
|
+
const isFocused = "_isFocused_1u9hb_56";
|
19
|
+
const iconField = "_iconField_1u9hb_73";
|
20
|
+
const suffixContainer = "_suffixContainer_1u9hb_77";
|
21
|
+
const isInvalid = "_isInvalid_1u9hb_82";
|
22
|
+
const inlineForm = "_inlineForm_1u9hb_93";
|
23
|
+
const label = "_label_1u9hb_98";
|
24
|
+
const labelDisabled = "_labelDisabled_1u9hb_104";
|
25
|
+
const labelOptional = "_labelOptional_1u9hb_108";
|
26
|
+
const compactTextField = "_compactTextField_1u9hb_114";
|
27
|
+
const fieldError = "_fieldError_1u9hb_138";
|
28
|
+
const hint = "_hint_1u9hb_184";
|
29
|
+
const field = "_field_1u9hb_138";
|
30
|
+
const fieldErrorMessage = "_fieldErrorMessage_1u9hb_204";
|
31
|
+
const isDisabled = "_isDisabled_1u9hb_217";
|
32
|
+
const checkbox = "_checkbox_1u9hb_284";
|
33
|
+
const radio = "_radio_1u9hb_291";
|
34
|
+
const number = "_number_1u9hb_295";
|
35
|
+
const suffix = "_suffix_1u9hb_77";
|
36
|
+
const iconFieldIcon = "_iconFieldIcon_1u9hb_333";
|
37
|
+
const formInputTiny = "_formInputTiny_1u9hb_341";
|
38
|
+
const requiredAsterisk = "_requiredAsterisk_1u9hb_350";
|
39
|
+
const fieldSet = "_fieldSet_1u9hb_354";
|
40
|
+
const isActive = "_isActive_1u9hb_365";
|
41
|
+
const numberField = "_numberField_1u9hb_372";
|
37
42
|
const styles = {
|
38
43
|
formGroup,
|
39
44
|
formIncreasedErrorMargin,
|
@@ -62,7 +67,11 @@ const styles = {
|
|
62
67
|
formInputTiny,
|
63
68
|
requiredAsterisk,
|
64
69
|
fieldSet,
|
65
|
-
isActive
|
70
|
+
isActive,
|
71
|
+
numberField,
|
72
|
+
"numberField-input": "_numberField-input_1u9hb_376",
|
73
|
+
"numberField-stepperContainer": "_numberField-stepperContainer_1u9hb_380",
|
74
|
+
"numberField-stepper": "_numberField-stepper_1u9hb_380"
|
66
75
|
};
|
67
76
|
const RequiredAsterisk = ({
|
68
77
|
className,
|
@@ -128,6 +137,21 @@ const Checkbox = react.forwardRef(
|
|
128
137
|
);
|
129
138
|
Checkbox.displayName = "Checkbox";
|
130
139
|
const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
|
140
|
+
function hasObjectChanged(obj1, obj2) {
|
141
|
+
return Object.keys(obj1).length !== Object.keys(obj2).length || Object.keys(obj1).some((k) => {
|
142
|
+
const key = k;
|
143
|
+
return typeof obj1[key] === "object" && typeof obj2[key] === "object" ? hasObjectChanged(obj1[key], obj2[key]) : obj1[key] !== obj2[key];
|
144
|
+
});
|
145
|
+
}
|
146
|
+
function useObjectMemo(obj) {
|
147
|
+
const objRef = react.useRef(obj);
|
148
|
+
return react.useMemo(() => {
|
149
|
+
if (hasObjectChanged(obj, objRef.current)) {
|
150
|
+
objRef.current = obj;
|
151
|
+
}
|
152
|
+
return objRef.current;
|
153
|
+
}, [obj]);
|
154
|
+
}
|
131
155
|
const TextField = react.forwardRef(
|
132
156
|
({
|
133
157
|
className,
|
@@ -317,7 +341,10 @@ const FormField = ({
|
|
317
341
|
children,
|
318
342
|
className,
|
319
343
|
onBlur,
|
320
|
-
"data-test-id": testId = "form-field"
|
344
|
+
"data-test-id": testId = "form-field",
|
345
|
+
LabelProps = {},
|
346
|
+
FormHintProps = {},
|
347
|
+
FieldErrorProps = {}
|
321
348
|
}) => {
|
322
349
|
const handleBlur = () => {
|
323
350
|
onBlur && onBlur(name);
|
@@ -332,10 +359,18 @@ const FormField = ({
|
|
332
359
|
onBlur: handleBlur,
|
333
360
|
"data-test-id": testId,
|
334
361
|
children: [
|
335
|
-
label2 && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor, required: isRequired, children: label2 }),
|
336
|
-
hint2 && /* @__PURE__ */ jsxRuntime.jsx(FormHint, { className: styles.hint, children: hint2 }),
|
362
|
+
label2 && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor, required: isRequired, ...LabelProps, children: label2 }),
|
363
|
+
hint2 && /* @__PURE__ */ jsxRuntime.jsx(FormHint, { className: styles.hint, ...FormHintProps, children: hint2 }),
|
337
364
|
children,
|
338
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
365
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
366
|
+
FieldError,
|
367
|
+
{
|
368
|
+
className: styles.fieldErrorMessage,
|
369
|
+
name,
|
370
|
+
errorMessage,
|
371
|
+
...FieldErrorProps
|
372
|
+
}
|
373
|
+
)
|
339
374
|
]
|
340
375
|
}
|
341
376
|
);
|
@@ -478,6 +513,59 @@ const TextArea = react.forwardRef(
|
|
478
513
|
}
|
479
514
|
);
|
480
515
|
TextArea.displayName = "TextArea";
|
516
|
+
const defaultFormatOptions = {
|
517
|
+
maximumFractionDigits: 6
|
518
|
+
};
|
519
|
+
const useNumberField = ({
|
520
|
+
className: rootClassName,
|
521
|
+
"data-test-id": testId = "input",
|
522
|
+
id,
|
523
|
+
name,
|
524
|
+
...otherProps
|
525
|
+
} = {}) => {
|
526
|
+
const formatOptions = useObjectMemo({
|
527
|
+
...defaultFormatOptions,
|
528
|
+
...otherProps.formatOptions
|
529
|
+
});
|
530
|
+
const { locale } = i18n.useLocale();
|
531
|
+
const numberFieldState = numberfield.useNumberFieldState({ ...otherProps, locale, formatOptions });
|
532
|
+
const inputRef = react.useRef(null);
|
533
|
+
const {
|
534
|
+
descriptionProps: formHintProps,
|
535
|
+
errorMessageProps: fieldErrorProps,
|
536
|
+
labelProps,
|
537
|
+
groupProps,
|
538
|
+
inputProps,
|
539
|
+
incrementButtonProps,
|
540
|
+
decrementButtonProps
|
541
|
+
} = numberfield$1.useNumberField({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);
|
542
|
+
return {
|
543
|
+
fieldErrorProps,
|
544
|
+
formHintProps,
|
545
|
+
labelProps,
|
546
|
+
renderNumberField: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { ...groupProps, className: styles.numberField, children: [
|
547
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
548
|
+
"input",
|
549
|
+
{
|
550
|
+
...inputProps,
|
551
|
+
className: classix.cx(styles.formInput, styles["numberField-input"]),
|
552
|
+
"data-test-id": testId,
|
553
|
+
name,
|
554
|
+
ref: inputRef
|
555
|
+
}
|
556
|
+
),
|
557
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles["numberField-stepperContainer"], children: [
|
558
|
+
/* @__PURE__ */ jsxRuntime.jsx(Stepper, { ...incrementButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ExpandLess, {}) }),
|
559
|
+
/* @__PURE__ */ jsxRuntime.jsx(Stepper, { ...decrementButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ExpandMore, {}) })
|
560
|
+
] })
|
561
|
+
] })
|
562
|
+
};
|
563
|
+
};
|
564
|
+
const Stepper = (props) => {
|
565
|
+
const buttonRef = react.useRef(null);
|
566
|
+
const { buttonProps } = button.useButton(props, buttonRef);
|
567
|
+
return /* @__PURE__ */ jsxRuntime.jsx("button", { ...buttonProps, className: styles["numberField-stepper"], ref: buttonRef, children: props.children });
|
568
|
+
};
|
481
569
|
exports.Checkbox = Checkbox;
|
482
570
|
exports.CompactTextField = CompactTextField;
|
483
571
|
exports.FieldError = FieldError;
|
@@ -494,4 +582,5 @@ exports.RequiredAsterisk = RequiredAsterisk;
|
|
494
582
|
exports.SelectField = SelectField;
|
495
583
|
exports.TextArea = TextArea;
|
496
584
|
exports.TextField = TextField;
|
585
|
+
exports.useNumberField = useNumberField;
|
497
586
|
//# sourceMappingURL=index.js.map
|