@cdx-ui/utils 0.0.1-beta.5 → 0.0.1-beta.50
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 +22 -22
- package/lib/commonjs/form-control/index.js +6 -0
- package/lib/commonjs/form-control/index.js.map +1 -1
- package/lib/commonjs/form-control/useFormControl.js +23 -0
- package/lib/commonjs/form-control/useFormControl.js.map +1 -1
- package/lib/module/form-control/index.js +1 -1
- package/lib/module/form-control/index.js.map +1 -1
- package/lib/module/form-control/useFormControl.js +22 -0
- package/lib/module/form-control/useFormControl.js.map +1 -1
- package/lib/typescript/form-control/index.d.ts +1 -1
- package/lib/typescript/form-control/index.d.ts.map +1 -1
- package/lib/typescript/form-control/useFormControl.d.ts +10 -0
- package/lib/typescript/form-control/useFormControl.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/form-control/index.ts +1 -0
- package/src/form-control/useFormControl.tsx +27 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @cdx-ui/utils
|
|
2
2
|
|
|
3
|
-
Shared utilities used across
|
|
3
|
+
Shared utilities used across FDS packages.
|
|
4
4
|
|
|
5
5
|
Provides common helpers for styling, event handling, state management, and context propagation used by [`@cdx-ui/primitives`](../primitives/) and [`@cdx-ui/components`](../components/).
|
|
6
6
|
|
|
@@ -14,42 +14,42 @@ pnpm add @cdx-ui/utils
|
|
|
14
14
|
|
|
15
15
|
### Common helpers
|
|
16
16
|
|
|
17
|
-
| Export
|
|
18
|
-
|
|
|
19
|
-
| `cn(...inputs)`
|
|
20
|
-
| `composeEventHandlers(...handlers)` | Chains multiple event callbacks into a single handler; skips `null`/`undefined` entries.
|
|
21
|
-
| `useControllableState(params)`
|
|
22
|
-
| `mergeRefs(...refs)`
|
|
23
|
-
| `flattenChildren(children)`
|
|
24
|
-
| `ariaAttr(condition)`
|
|
17
|
+
| Export | Description |
|
|
18
|
+
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
19
|
+
| `cn(...inputs)` | Merges class names with `clsx` + `tailwind-merge` — conditionals and conflict resolution in one call. |
|
|
20
|
+
| `composeEventHandlers(...handlers)` | Chains multiple event callbacks into a single handler; skips `null`/`undefined` entries. |
|
|
21
|
+
| `useControllableState(params)` | Hook that supports both controlled and uncontrolled modes for a single value. Warns in dev if the mode switches during a component's lifetime. |
|
|
22
|
+
| `mergeRefs(...refs)` | Combines multiple refs (callback or object) into one ref callback. |
|
|
23
|
+
| `flattenChildren(children)` | Recursively flattens React `children` into a flat array (used internally for spaced-child layouts). |
|
|
24
|
+
| `ariaAttr(condition)` | Returns `true` (boolean) or `undefined` — shorthand for boolean ARIA attribute values. |
|
|
25
25
|
|
|
26
26
|
### Context
|
|
27
27
|
|
|
28
|
-
| Export
|
|
29
|
-
|
|
|
28
|
+
| Export | Description |
|
|
29
|
+
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
30
30
|
| `createContext(displayName)` | Wrapper around React's `createContext` that returns a `[Provider, useHook]` tuple. The hook throws a descriptive error if called outside the provider — eliminates silent `undefined` bugs. |
|
|
31
31
|
|
|
32
32
|
### Style context
|
|
33
33
|
|
|
34
34
|
Used internally by `@cdx-ui/components` to propagate variant props (size, color, etc.) from a compound root to its sub-components.
|
|
35
35
|
|
|
36
|
-
| Export
|
|
37
|
-
|
|
|
36
|
+
| Export | Description |
|
|
37
|
+
| ------------------------------------- | ---------------------------------------------------------------------------------- |
|
|
38
38
|
| `withStyleContext(Component, scope?)` | HOC that adds a `context` prop and provides it to descendants via `ParentContext`. |
|
|
39
|
-
| `useStyleContext(scope?)`
|
|
40
|
-
| `useParentContext()`
|
|
41
|
-
| `ParentContext` | The raw React context (rarely needed directly). |
|
|
39
|
+
| `useStyleContext(scope?)` | Reads the style context set by the nearest `withStyleContext` wrapper. |
|
|
40
|
+
| `useParentContext()` | Reads the full `StyleContextMap` from the nearest provider. |
|
|
42
41
|
|
|
43
42
|
### Form control
|
|
44
43
|
|
|
45
44
|
Low-level form-field state used by the `Field` and `Input` primitives.
|
|
46
45
|
|
|
47
|
-
| Export
|
|
48
|
-
|
|
|
49
|
-
| `useFormControlRoot(props)`
|
|
50
|
-
| `useFormControl(props)`
|
|
51
|
-
| `useFormControlContext()`
|
|
52
|
-
| `
|
|
46
|
+
| Export | Description |
|
|
47
|
+
| ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
48
|
+
| `useFormControlRoot(props)` | Creates the root state object for a form field (id generation, `aria-describedby` wiring). |
|
|
49
|
+
| `useFormControl(props)` | Merges component-level props with inherited form-control context. |
|
|
50
|
+
| `useFormControlContext()` | Reads form-control state from the nearest provider. |
|
|
51
|
+
| `useReportFormControlLabelFocus(ref)` | Reports label focus/blur events to the parent `FormControlContext` — used by `Field.Label` to trigger `isFocused` styling on the associated input. |
|
|
52
|
+
| `FormControlContext` | The React context object for form-control state propagation. |
|
|
53
53
|
|
|
54
54
|
## Further reading
|
|
55
55
|
|
|
@@ -27,5 +27,11 @@ Object.defineProperty(exports, "useFormControlRoot", {
|
|
|
27
27
|
return _useFormControl.useFormControlRoot;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
+
Object.defineProperty(exports, "useReportFormControlLabelFocus", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return _useFormControl.useReportFormControlLabelFocus;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
30
36
|
var _useFormControl = require("./useFormControl");
|
|
31
37
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_useFormControl","require"],"sourceRoot":"../../../src","sources":["form-control/index.ts"],"mappings":"
|
|
1
|
+
{"version":3,"names":["_useFormControl","require"],"sourceRoot":"../../../src","sources":["form-control/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA","ignoreList":[]}
|
|
@@ -7,6 +7,7 @@ exports.FormControlContext = void 0;
|
|
|
7
7
|
exports.useFormControl = useFormControl;
|
|
8
8
|
exports.useFormControlContext = void 0;
|
|
9
9
|
exports.useFormControlRoot = useFormControlRoot;
|
|
10
|
+
exports.useReportFormControlLabelFocus = useReportFormControlLabelFocus;
|
|
10
11
|
var _react = _interopRequireDefault(require("react"));
|
|
11
12
|
var _reactNative = require("react-native");
|
|
12
13
|
var _accessibilityUtils = require("../common/accessibilityUtils");
|
|
@@ -46,6 +47,7 @@ function useFormControlRoot(props) {
|
|
|
46
47
|
* We use this to append its id the the `aria-describedby` of the `input`.
|
|
47
48
|
*/
|
|
48
49
|
const [hasHelpText, setHasHelpText] = _react.default.useState(false);
|
|
50
|
+
const [isLabelFocused, setIsLabelFocused] = _react.default.useState(false);
|
|
49
51
|
const inputRef = _react.default.useRef(null);
|
|
50
52
|
const focusInput = _react.default.useCallback(() => {
|
|
51
53
|
const node = inputRef.current;
|
|
@@ -68,6 +70,8 @@ function useFormControlRoot(props) {
|
|
|
68
70
|
feedbackId,
|
|
69
71
|
helpTextId,
|
|
70
72
|
htmlProps,
|
|
73
|
+
isLabelFocused,
|
|
74
|
+
setIsLabelFocused,
|
|
71
75
|
...(_reactNative.Platform.OS !== 'web' ? {
|
|
72
76
|
inputRef,
|
|
73
77
|
focusInput
|
|
@@ -76,6 +80,25 @@ function useFormControlRoot(props) {
|
|
|
76
80
|
return context;
|
|
77
81
|
}
|
|
78
82
|
|
|
83
|
+
/**
|
|
84
|
+
* Reports focus/active state from `Input` / `Select.Trigger` to the parent `Field` for label styling.
|
|
85
|
+
* No-ops outside a `Field` (no `setIsLabelFocused` on context).
|
|
86
|
+
*/
|
|
87
|
+
function useReportFormControlLabelFocus(isActive) {
|
|
88
|
+
const {
|
|
89
|
+
setIsLabelFocused
|
|
90
|
+
} = useFormControlContext();
|
|
91
|
+
_react.default.useLayoutEffect(() => {
|
|
92
|
+
if (typeof setIsLabelFocused !== 'function') {
|
|
93
|
+
return undefined;
|
|
94
|
+
}
|
|
95
|
+
setIsLabelFocused(isActive);
|
|
96
|
+
return () => {
|
|
97
|
+
setIsLabelFocused(false);
|
|
98
|
+
};
|
|
99
|
+
}, [isActive, setIsLabelFocused]);
|
|
100
|
+
}
|
|
101
|
+
|
|
79
102
|
/**
|
|
80
103
|
* Hook that merges local field props with the nearest form field context
|
|
81
104
|
* and returns normalised HTML / ARIA attributes for input elements.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_accessibilityUtils","e","__esModule","default","FormControlContext","exports","React","createContext","useFormControlRoot","props","id","idProp","name","isRequired","isInvalid","isDisabled","isReadOnly","htmlProps","reactId","useId","labelId","feedbackId","helpTextId","hasFeedbackText","setHasFeedbackText","useState","hasHelpText","setHasHelpText","inputRef","useRef","focusInput","useCallback","node","current","focus","context","Boolean","Platform","OS","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_accessibilityUtils","e","__esModule","default","FormControlContext","exports","React","createContext","useFormControlRoot","props","id","idProp","name","isRequired","isInvalid","isDisabled","isReadOnly","htmlProps","reactId","useId","labelId","feedbackId","helpTextId","hasFeedbackText","setHasFeedbackText","useState","hasHelpText","setHasHelpText","isLabelFocused","setIsLabelFocused","inputRef","useRef","focusInput","useCallback","node","current","focus","context","Boolean","Platform","OS","useReportFormControlLabelFocus","isActive","useFormControlContext","useLayoutEffect","undefined","useFormControl","field","describedBy","push","ariaDescribedBy","join","cleanProps","disabled","readOnly","required","ariaAttr","useContext"],"sourceRoot":"../../../src","sources":["form-control/useFormControl.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
export { FormControlContext, useFormControl, useFormControlContext, useFormControlRoot } from './useFormControl';
|
|
3
|
+
export { FormControlContext, useFormControl, useFormControlContext, useFormControlRoot, useReportFormControlLabelFocus } from './useFormControl';
|
|
4
4
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["FormControlContext","useFormControl","useFormControlContext","useFormControlRoot"],"sourceRoot":"../../../src","sources":["form-control/index.ts"],"mappings":";;AAAA,SAMEA,kBAAkB,EAClBC,cAAc,EACdC,qBAAqB,EACrBC,kBAAkB,
|
|
1
|
+
{"version":3,"names":["FormControlContext","useFormControl","useFormControlContext","useFormControlRoot","useReportFormControlLabelFocus"],"sourceRoot":"../../../src","sources":["form-control/index.ts"],"mappings":";;AAAA,SAMEA,kBAAkB,EAClBC,cAAc,EACdC,qBAAqB,EACrBC,kBAAkB,EAClBC,8BAA8B,QACzB,kBAAkB","ignoreList":[]}
|
|
@@ -38,6 +38,7 @@ export function useFormControlRoot(props) {
|
|
|
38
38
|
* We use this to append its id the the `aria-describedby` of the `input`.
|
|
39
39
|
*/
|
|
40
40
|
const [hasHelpText, setHasHelpText] = React.useState(false);
|
|
41
|
+
const [isLabelFocused, setIsLabelFocused] = React.useState(false);
|
|
41
42
|
const inputRef = React.useRef(null);
|
|
42
43
|
const focusInput = React.useCallback(() => {
|
|
43
44
|
const node = inputRef.current;
|
|
@@ -60,6 +61,8 @@ export function useFormControlRoot(props) {
|
|
|
60
61
|
feedbackId,
|
|
61
62
|
helpTextId,
|
|
62
63
|
htmlProps,
|
|
64
|
+
isLabelFocused,
|
|
65
|
+
setIsLabelFocused,
|
|
63
66
|
...(Platform.OS !== 'web' ? {
|
|
64
67
|
inputRef,
|
|
65
68
|
focusInput
|
|
@@ -68,6 +71,25 @@ export function useFormControlRoot(props) {
|
|
|
68
71
|
return context;
|
|
69
72
|
}
|
|
70
73
|
|
|
74
|
+
/**
|
|
75
|
+
* Reports focus/active state from `Input` / `Select.Trigger` to the parent `Field` for label styling.
|
|
76
|
+
* No-ops outside a `Field` (no `setIsLabelFocused` on context).
|
|
77
|
+
*/
|
|
78
|
+
export function useReportFormControlLabelFocus(isActive) {
|
|
79
|
+
const {
|
|
80
|
+
setIsLabelFocused
|
|
81
|
+
} = useFormControlContext();
|
|
82
|
+
React.useLayoutEffect(() => {
|
|
83
|
+
if (typeof setIsLabelFocused !== 'function') {
|
|
84
|
+
return undefined;
|
|
85
|
+
}
|
|
86
|
+
setIsLabelFocused(isActive);
|
|
87
|
+
return () => {
|
|
88
|
+
setIsLabelFocused(false);
|
|
89
|
+
};
|
|
90
|
+
}, [isActive, setIsLabelFocused]);
|
|
91
|
+
}
|
|
92
|
+
|
|
71
93
|
/**
|
|
72
94
|
* Hook that merges local field props with the nearest form field context
|
|
73
95
|
* and returns normalised HTML / ARIA attributes for input elements.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","Platform","ariaAttr","FormControlContext","createContext","useFormControlRoot","props","id","idProp","name","isRequired","isInvalid","isDisabled","isReadOnly","htmlProps","reactId","useId","labelId","feedbackId","helpTextId","hasFeedbackText","setHasFeedbackText","useState","hasHelpText","setHasHelpText","inputRef","useRef","focusInput","useCallback","node","current","focus","context","Boolean","OS","
|
|
1
|
+
{"version":3,"names":["React","Platform","ariaAttr","FormControlContext","createContext","useFormControlRoot","props","id","idProp","name","isRequired","isInvalid","isDisabled","isReadOnly","htmlProps","reactId","useId","labelId","feedbackId","helpTextId","hasFeedbackText","setHasFeedbackText","useState","hasHelpText","setHasHelpText","isLabelFocused","setIsLabelFocused","inputRef","useRef","focusInput","useCallback","node","current","focus","context","Boolean","OS","useReportFormControlLabelFocus","isActive","useFormControlContext","useLayoutEffect","undefined","useFormControl","field","describedBy","push","ariaDescribedBy","join","cleanProps","disabled","readOnly","required","useContext"],"sourceRoot":"../../../src","sources":["form-control/useFormControl.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { type FormControlContextValue, type FormControlFieldProps, type FormControlRootProps, type FormControlRootReturn, type FormControlState, FormControlContext, useFormControl, useFormControlContext, useFormControlRoot, } from './useFormControl';
|
|
1
|
+
export { type FormControlContextValue, type FormControlFieldProps, type FormControlRootProps, type FormControlRootReturn, type FormControlState, FormControlContext, useFormControl, useFormControlContext, useFormControlRoot, useReportFormControlLabelFocus, } from './useFormControl';
|
|
2
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EAClB,8BAA8B,GAC/B,MAAM,kBAAkB,CAAC"}
|
|
@@ -24,6 +24,9 @@ export interface FormControlContextValue extends FormControlState {
|
|
|
24
24
|
*/
|
|
25
25
|
inputRef?: React.RefObject<TextInput | null>;
|
|
26
26
|
focusInput?: () => void;
|
|
27
|
+
/** True when the primary child control is focused or (for Select) open — drives `Field.Label` styling. */
|
|
28
|
+
isLabelFocused?: boolean;
|
|
29
|
+
setIsLabelFocused?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
27
30
|
}
|
|
28
31
|
export declare const FormControlContext: React.Context<Partial<FormControlContextValue>>;
|
|
29
32
|
export interface FormControlFieldProps extends Partial<FormControlState> {
|
|
@@ -51,12 +54,19 @@ export interface FormControlRootReturn {
|
|
|
51
54
|
htmlProps: HTMLProps;
|
|
52
55
|
inputRef?: React.RefObject<TextInput | null>;
|
|
53
56
|
focusInput?: () => void;
|
|
57
|
+
isLabelFocused: boolean;
|
|
58
|
+
setIsLabelFocused: React.Dispatch<React.SetStateAction<boolean>>;
|
|
54
59
|
}
|
|
55
60
|
/**
|
|
56
61
|
* Builds state and ids for a `Form` primitive root (`createFormRoot`). Pass the returned object
|
|
57
62
|
* (minus `htmlProps`) to `FormControlContext.Provider` — this is not a React context consumer hook.
|
|
58
63
|
*/
|
|
59
64
|
export declare function useFormControlRoot(props: FormControlRootProps): FormControlRootReturn;
|
|
65
|
+
/**
|
|
66
|
+
* Reports focus/active state from `Input` / `Select.Trigger` to the parent `Field` for label styling.
|
|
67
|
+
* No-ops outside a `Field` (no `setIsLabelFocused` on context).
|
|
68
|
+
*/
|
|
69
|
+
export declare function useReportFormControlLabelFocus(isActive: boolean): void;
|
|
60
70
|
/**
|
|
61
71
|
* Hook that merges local field props with the nearest form field context
|
|
62
72
|
* and returns normalised HTML / ARIA attributes for input elements.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormControl.d.ts","sourceRoot":"","sources":["../../../src/form-control/useFormControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxD,KAAK,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC/D,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAClE,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"useFormControl.d.ts","sourceRoot":"","sources":["../../../src/form-control/useFormControl.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -28,6 +28,9 @@ export interface FormControlContextValue extends FormControlState {
|
|
|
28
28
|
*/
|
|
29
29
|
inputRef?: React.RefObject<TextInput | null>;
|
|
30
30
|
focusInput?: () => void;
|
|
31
|
+
/** True when the primary child control is focused or (for Select) open — drives `Field.Label` styling. */
|
|
32
|
+
isLabelFocused?: boolean;
|
|
33
|
+
setIsLabelFocused?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
31
34
|
}
|
|
32
35
|
|
|
33
36
|
export const FormControlContext = React.createContext<Partial<FormControlContextValue>>({});
|
|
@@ -59,6 +62,8 @@ export interface FormControlRootReturn {
|
|
|
59
62
|
htmlProps: HTMLProps;
|
|
60
63
|
inputRef?: React.RefObject<TextInput | null>;
|
|
61
64
|
focusInput?: () => void;
|
|
65
|
+
isLabelFocused: boolean;
|
|
66
|
+
setIsLabelFocused: React.Dispatch<React.SetStateAction<boolean>>;
|
|
62
67
|
}
|
|
63
68
|
|
|
64
69
|
/**
|
|
@@ -87,6 +92,8 @@ export function useFormControlRoot(props: FormControlRootProps): FormControlRoot
|
|
|
87
92
|
*/
|
|
88
93
|
const [hasHelpText, setHasHelpText] = React.useState(false);
|
|
89
94
|
|
|
95
|
+
const [isLabelFocused, setIsLabelFocused] = React.useState(false);
|
|
96
|
+
|
|
90
97
|
const inputRef = React.useRef<TextInput | null>(null);
|
|
91
98
|
|
|
92
99
|
const focusInput = React.useCallback(() => {
|
|
@@ -111,12 +118,32 @@ export function useFormControlRoot(props: FormControlRootProps): FormControlRoot
|
|
|
111
118
|
feedbackId,
|
|
112
119
|
helpTextId,
|
|
113
120
|
htmlProps,
|
|
121
|
+
isLabelFocused,
|
|
122
|
+
setIsLabelFocused,
|
|
114
123
|
...(Platform.OS !== 'web' ? { inputRef, focusInput } : {}),
|
|
115
124
|
};
|
|
116
125
|
|
|
117
126
|
return context;
|
|
118
127
|
}
|
|
119
128
|
|
|
129
|
+
/**
|
|
130
|
+
* Reports focus/active state from `Input` / `Select.Trigger` to the parent `Field` for label styling.
|
|
131
|
+
* No-ops outside a `Field` (no `setIsLabelFocused` on context).
|
|
132
|
+
*/
|
|
133
|
+
export function useReportFormControlLabelFocus(isActive: boolean) {
|
|
134
|
+
const { setIsLabelFocused } = useFormControlContext();
|
|
135
|
+
|
|
136
|
+
React.useLayoutEffect(() => {
|
|
137
|
+
if (typeof setIsLabelFocused !== 'function') {
|
|
138
|
+
return undefined;
|
|
139
|
+
}
|
|
140
|
+
setIsLabelFocused(isActive);
|
|
141
|
+
return () => {
|
|
142
|
+
setIsLabelFocused(false);
|
|
143
|
+
};
|
|
144
|
+
}, [isActive, setIsLabelFocused]);
|
|
145
|
+
}
|
|
146
|
+
|
|
120
147
|
/**
|
|
121
148
|
* Hook that merges local field props with the nearest form field context
|
|
122
149
|
* and returns normalised HTML / ARIA attributes for input elements.
|