@impulse-ui-native/form-field 4.0.0 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/components/form-field.d.mts +0 -1
- package/dist/components/form-field.js +4 -28
- package/dist/components/form-field.js.map +1 -1
- package/dist/components/index.d.mts +0 -1
- package/dist/index.d.mts +0 -1
- package/dist/types/form-field.types.d.mts +0 -5
- package/dist/types/index.d.mts +0 -1
- package/package.json +6 -7
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @impulse-ui-native/form-field
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Label, description, required-state, and validation composition for custom Impulse UI Native controls.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -34,10 +34,10 @@ import { Switch } from "@impulse-ui-native/switch";
|
|
|
34
34
|
|
|
35
35
|
The render function receives:
|
|
36
36
|
|
|
37
|
-
- `controlProps`: the generated native ID
|
|
37
|
+
- `controlProps`: the generated native ID and disabled state to spread onto the control;
|
|
38
38
|
- `invalid`: whether the field currently has an error;
|
|
39
39
|
- `required`: the field's required state for custom visual treatment.
|
|
40
40
|
|
|
41
41
|
`FormField` renders validation feedback once outside the custom control. Use `invalid` only to map the field state into a control's own visual API; do not render the error a second time inside the control.
|
|
42
42
|
|
|
43
|
-
|
|
43
|
+
An explicit `nativeID` can be provided when stable IDs are required; otherwise, `FormField` generates one with React `useId`.
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
import { FormFieldProps } from '../types/form-field.types.mjs';
|
|
4
|
-
import 'react-native';
|
|
5
4
|
import '@impulse-ui-native/primitives';
|
|
6
5
|
|
|
7
6
|
declare const FormField: react.MemoExoticComponent<({ children, description, disabled, error, label, nativeID, required, style, ...props }: FormFieldProps) => react_jsx_runtime.JSX.Element>;
|
|
@@ -16,24 +16,15 @@ const FormField = memo(function FormField2({
|
|
|
16
16
|
}) {
|
|
17
17
|
const generatedId = useId();
|
|
18
18
|
const fieldId = nativeID ?? `form-field-${generatedId}`;
|
|
19
|
-
const labelId = `${fieldId}-label`;
|
|
20
19
|
const controlId = `${fieldId}-control`;
|
|
21
|
-
const descriptionId = `${fieldId}-description`;
|
|
22
|
-
const errorId = `${fieldId}-error`;
|
|
23
20
|
const invalid = Boolean(error);
|
|
24
|
-
const accessibleLabel = required ? `${label}, required` : label;
|
|
25
|
-
const accessibilityHint = [error, description].filter(Boolean).join(" ");
|
|
26
21
|
const styles = useThemedStyles(formFieldStyles, { disabled }, [disabled]);
|
|
27
22
|
const controlProps = useMemo(
|
|
28
23
|
() => ({
|
|
29
|
-
accessibilityHint: accessibilityHint || void 0,
|
|
30
|
-
accessibilityLabel: accessibleLabel,
|
|
31
|
-
accessibilityLabelledBy: labelId,
|
|
32
|
-
accessibilityState: { disabled },
|
|
33
24
|
disabled,
|
|
34
25
|
nativeID: controlId
|
|
35
26
|
}),
|
|
36
|
-
[
|
|
27
|
+
[controlId, disabled]
|
|
37
28
|
);
|
|
38
29
|
const renderProps = useMemo(
|
|
39
30
|
() => ({ controlProps, invalid, required }),
|
|
@@ -47,25 +38,10 @@ const FormField = memo(function FormField2({
|
|
|
47
38
|
size: "medium",
|
|
48
39
|
variant: "outlined",
|
|
49
40
|
children: /* @__PURE__ */ jsxs(Control.Root, { ...props, nativeID: fieldId, style, children: [
|
|
50
|
-
/* @__PURE__ */ jsx(
|
|
51
|
-
|
|
52
|
-
{
|
|
53
|
-
accessibilityLabel: accessibleLabel,
|
|
54
|
-
disabled,
|
|
55
|
-
nativeID: labelId,
|
|
56
|
-
children: required ? `${label} *` : label
|
|
57
|
-
}
|
|
58
|
-
),
|
|
59
|
-
description ? /* @__PURE__ */ jsx(
|
|
60
|
-
Typography.Caption,
|
|
61
|
-
{
|
|
62
|
-
nativeID: descriptionId,
|
|
63
|
-
style: styles.description,
|
|
64
|
-
children: description
|
|
65
|
-
}
|
|
66
|
-
) : null,
|
|
41
|
+
/* @__PURE__ */ jsx(Control.Label, { disabled, children: required ? `${label} *` : label }),
|
|
42
|
+
description ? /* @__PURE__ */ jsx(Typography.Caption, { style: styles.description, children: description }) : null,
|
|
67
43
|
children(renderProps),
|
|
68
|
-
/* @__PURE__ */ jsx(Control.Error, {
|
|
44
|
+
/* @__PURE__ */ jsx(Control.Error, {})
|
|
69
45
|
] })
|
|
70
46
|
}
|
|
71
47
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/form-field.tsx"],"sourcesContent":["import { memo, useId, useMemo } from \"react\";\n\nimport { Control, Typography } from \"@impulse-ui-native/primitives\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type {\n FormFieldControlProps,\n FormFieldProps,\n FormFieldRenderProps,\n} from \"../types\";\nimport { formFieldStyles } from \"./form-field.styles\";\n\nexport const FormField = memo(function FormField({\n children,\n description,\n disabled = false,\n error,\n label,\n nativeID,\n required = false,\n style,\n ...props\n}: FormFieldProps) {\n const generatedId = useId();\n const fieldId = nativeID ?? `form-field-${generatedId}`;\n const
|
|
1
|
+
{"version":3,"sources":["../../src/components/form-field.tsx"],"sourcesContent":["import { memo, useId, useMemo } from \"react\";\n\nimport { Control, Typography } from \"@impulse-ui-native/primitives\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type {\n FormFieldControlProps,\n FormFieldProps,\n FormFieldRenderProps,\n} from \"../types\";\nimport { formFieldStyles } from \"./form-field.styles\";\n\nexport const FormField = memo(function FormField({\n children,\n description,\n disabled = false,\n error,\n label,\n nativeID,\n required = false,\n style,\n ...props\n}: FormFieldProps) {\n const generatedId = useId();\n const fieldId = nativeID ?? `form-field-${generatedId}`;\n const controlId = `${fieldId}-control`;\n const invalid = Boolean(error);\n const styles = useThemedStyles(formFieldStyles, { disabled }, [disabled]);\n\n const controlProps = useMemo<FormFieldControlProps>(\n () => ({\n disabled,\n nativeID: controlId,\n }),\n [controlId, disabled],\n );\n const renderProps = useMemo<FormFieldRenderProps>(\n () => ({ controlProps, invalid, required }),\n [controlProps, invalid, required],\n );\n\n return (\n <Control.Provider\n disabled={disabled}\n error={error}\n size=\"medium\"\n variant=\"outlined\"\n >\n <Control.Root {...props} nativeID={fieldId} style={style}>\n <Control.Label disabled={disabled}>\n {required ? `${label} *` : label}\n </Control.Label>\n {description ? (\n <Typography.Caption style={styles.description}>\n {description}\n </Typography.Caption>\n ) : null}\n {children(renderProps)}\n <Control.Error />\n </Control.Root>\n </Control.Provider>\n );\n});\n"],"mappings":"AAgDM,SACE,KADF;AAhDN,SAAS,MAAM,OAAO,eAAe;AAErC,SAAS,SAAS,kBAAkB;AACpC,SAAS,uBAAuB;AAOhC,SAAS,uBAAuB;AAEzB,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAC/C;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,YAAY,cAAc,WAAW;AACrD,QAAM,YAAY,GAAG,OAAO;AAC5B,QAAM,UAAU,QAAQ,KAAK;AAC7B,QAAM,SAAS,gBAAgB,iBAAiB,EAAE,SAAS,GAAG,CAAC,QAAQ,CAAC;AAExE,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,WAAW,QAAQ;AAAA,EACtB;AACA,QAAM,cAAc;AAAA,IAClB,OAAO,EAAE,cAAc,SAAS,SAAS;AAAA,IACzC,CAAC,cAAc,SAAS,QAAQ;AAAA,EAClC;AAEA,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MAER,+BAAC,QAAQ,MAAR,EAAc,GAAG,OAAO,UAAU,SAAS,OAC1C;AAAA,4BAAC,QAAQ,OAAR,EAAc,UACZ,qBAAW,GAAG,KAAK,OAAO,OAC7B;AAAA,QACC,cACC,oBAAC,WAAW,SAAX,EAAmB,OAAO,OAAO,aAC/B,uBACH,IACE;AAAA,QACH,SAAS,WAAW;AAAA,QACrB,oBAAC,QAAQ,OAAR,EAAc;AAAA,SACjB;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["FormField"]}
|
package/dist/index.d.mts
CHANGED
|
@@ -2,5 +2,4 @@ export { FormField } from './components/form-field.mjs';
|
|
|
2
2
|
export { FormFieldControlProps, FormFieldProps, FormFieldRenderProps } from './types/form-field.types.mjs';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
|
-
import 'react-native';
|
|
6
5
|
import '@impulse-ui-native/primitives';
|
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { AccessibilityState } from 'react-native';
|
|
3
2
|
import { ViewProps } from '@impulse-ui-native/primitives';
|
|
4
3
|
|
|
5
4
|
interface FormFieldControlProps {
|
|
6
|
-
accessibilityHint?: string;
|
|
7
|
-
accessibilityLabel: string;
|
|
8
|
-
accessibilityLabelledBy: string;
|
|
9
|
-
accessibilityState: AccessibilityState;
|
|
10
5
|
disabled: boolean;
|
|
11
6
|
nativeID: string;
|
|
12
7
|
}
|
package/dist/types/index.d.mts
CHANGED
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@impulse-ui-native/form-field",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
|
+
"description": "Form-field composition for Impulse UI Native controls.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-native",
|
|
7
7
|
"form-field",
|
|
8
|
-
"accessibility",
|
|
9
8
|
"validation",
|
|
10
9
|
"components",
|
|
11
10
|
"impulse-ui-native"
|
|
@@ -29,8 +28,8 @@
|
|
|
29
28
|
],
|
|
30
29
|
"sideEffects": false,
|
|
31
30
|
"dependencies": {
|
|
32
|
-
"@impulse-ui-native/
|
|
33
|
-
"@impulse-ui-native/
|
|
31
|
+
"@impulse-ui-native/theme": "6.0.0",
|
|
32
|
+
"@impulse-ui-native/primitives": "6.0.0"
|
|
34
33
|
},
|
|
35
34
|
"devDependencies": {
|
|
36
35
|
"@types/react": "~19.2.14",
|
|
@@ -38,8 +37,8 @@
|
|
|
38
37
|
"react": "19.2.3",
|
|
39
38
|
"react-native": "0.86.2",
|
|
40
39
|
"typescript": "~6.0.3",
|
|
41
|
-
"@impulse-ui-native/
|
|
42
|
-
"@impulse-ui-native/
|
|
40
|
+
"@impulse-ui-native/tsconfig": "1.0.0",
|
|
41
|
+
"@impulse-ui-native/prettier-config": "1.0.0"
|
|
43
42
|
},
|
|
44
43
|
"peerDependencies": {
|
|
45
44
|
"react": ">=18",
|