@startupjs-ui/object-input 0.2.2 → 0.3.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/CHANGELOG.md +19 -0
- package/index.d.ts +40 -3
- package/index.tsx +94 -6
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.3.0](https://github.com/startupjs/startupjs-ui/compare/v0.2.3...v0.3.0) (2026-05-27)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* [BREAKING] [0.3] improve accessibility props for E2E tests. Support testID everywhere ([#31](https://github.com/startupjs/startupjs-ui/issues/31)) ([882588c](https://github.com/startupjs/startupjs-ui/commit/882588ca37d5e1fd14b5717b5697cf9ed47042e4))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [0.2.3](https://github.com/startupjs/startupjs-ui/compare/v0.2.2...v0.2.3) (2026-05-15)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @startupjs-ui/object-input
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [0.2.2](https://github.com/startupjs/startupjs-ui/compare/v0.2.1...v0.2.2) (2026-05-11)
|
|
7
26
|
|
|
8
27
|
**Note:** Version bump only for package @startupjs-ui/object-input
|
package/index.d.ts
CHANGED
|
@@ -3,7 +3,22 @@
|
|
|
3
3
|
|
|
4
4
|
import { type ReactNode } from 'react';
|
|
5
5
|
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
6
|
+
import { type UIRole } from '@startupjs-ui/core';
|
|
6
7
|
import './index.cssx.styl';
|
|
8
|
+
type ObjectInputWrapperProps = {
|
|
9
|
+
style: StyleProp<ViewStyle> | undefined;
|
|
10
|
+
testID?: string;
|
|
11
|
+
id?: string;
|
|
12
|
+
role?: UIRole;
|
|
13
|
+
'aria-label'?: string;
|
|
14
|
+
'aria-labelledby'?: string;
|
|
15
|
+
'aria-describedby'?: string;
|
|
16
|
+
'aria-errormessage'?: string;
|
|
17
|
+
'aria-invalid'?: boolean;
|
|
18
|
+
'aria-required'?: boolean;
|
|
19
|
+
'aria-disabled'?: boolean;
|
|
20
|
+
'aria-readonly'?: boolean;
|
|
21
|
+
};
|
|
7
22
|
declare const _default: import("react").ComponentType<ObjectInputProps>;
|
|
8
23
|
export default _default;
|
|
9
24
|
export declare const _PropsJsonSchema: {};
|
|
@@ -27,7 +42,29 @@ export interface ObjectInputProps {
|
|
|
27
42
|
/** Render as read-only */
|
|
28
43
|
readonly?: boolean;
|
|
29
44
|
/** Custom wrapper renderer (used by Input layout wrappers) */
|
|
30
|
-
_renderWrapper?: (params:
|
|
31
|
-
|
|
32
|
-
|
|
45
|
+
_renderWrapper?: (params: ObjectInputWrapperProps, children: ReactNode) => ReactNode;
|
|
46
|
+
/** Test identifier */
|
|
47
|
+
testID?: string;
|
|
48
|
+
/** Web id for the wrapper */
|
|
49
|
+
id?: string;
|
|
50
|
+
/** ARIA role for the wrapper */
|
|
51
|
+
role?: UIRole;
|
|
52
|
+
/** Accessible name for the wrapper */
|
|
53
|
+
'aria-label'?: string;
|
|
54
|
+
/** Id of the element that labels the wrapper */
|
|
55
|
+
'aria-labelledby'?: string;
|
|
56
|
+
/** Id of the element that describes the wrapper */
|
|
57
|
+
'aria-describedby'?: string;
|
|
58
|
+
/** Id of the element that describes the wrapper error */
|
|
59
|
+
'aria-errormessage'?: string;
|
|
60
|
+
/** Invalid state for the wrapper */
|
|
61
|
+
'aria-invalid'?: boolean;
|
|
62
|
+
/** Required state for the wrapper */
|
|
63
|
+
'aria-required'?: boolean;
|
|
64
|
+
/** Disabled state for the wrapper */
|
|
65
|
+
'aria-disabled'?: boolean;
|
|
66
|
+
/** Readonly state for the wrapper */
|
|
67
|
+
'aria-readonly'?: boolean;
|
|
68
|
+
/** Additional props */
|
|
69
|
+
[key: string]: any;
|
|
33
70
|
}
|
package/index.tsx
CHANGED
|
@@ -1,11 +1,26 @@
|
|
|
1
1
|
import { type ReactNode } from 'react'
|
|
2
2
|
import { type StyleProp, type ViewStyle } from 'react-native'
|
|
3
3
|
import { pug, observer } from 'startupjs'
|
|
4
|
-
import { themed } from '@startupjs-ui/core'
|
|
4
|
+
import { themed, type UIRole } from '@startupjs-ui/core'
|
|
5
5
|
import Div from '@startupjs-ui/div'
|
|
6
6
|
import Input from '@startupjs-ui/input'
|
|
7
7
|
import './index.cssx.styl'
|
|
8
8
|
|
|
9
|
+
type ObjectInputWrapperProps = {
|
|
10
|
+
style: StyleProp<ViewStyle> | undefined
|
|
11
|
+
testID?: string
|
|
12
|
+
id?: string
|
|
13
|
+
role?: UIRole
|
|
14
|
+
'aria-label'?: string
|
|
15
|
+
'aria-labelledby'?: string
|
|
16
|
+
'aria-describedby'?: string
|
|
17
|
+
'aria-errormessage'?: string
|
|
18
|
+
'aria-invalid'?: boolean
|
|
19
|
+
'aria-required'?: boolean
|
|
20
|
+
'aria-disabled'?: boolean
|
|
21
|
+
'aria-readonly'?: boolean
|
|
22
|
+
}
|
|
23
|
+
|
|
9
24
|
export default observer(
|
|
10
25
|
themed('ObjectInput', ObjectInput)
|
|
11
26
|
)
|
|
@@ -32,7 +47,31 @@ export interface ObjectInputProps {
|
|
|
32
47
|
/** Render as read-only */
|
|
33
48
|
readonly?: boolean
|
|
34
49
|
/** Custom wrapper renderer (used by Input layout wrappers) */
|
|
35
|
-
_renderWrapper?: (params:
|
|
50
|
+
_renderWrapper?: (params: ObjectInputWrapperProps, children: ReactNode) => ReactNode
|
|
51
|
+
/** Test identifier */
|
|
52
|
+
testID?: string
|
|
53
|
+
/** Web id for the wrapper */
|
|
54
|
+
id?: string
|
|
55
|
+
/** ARIA role for the wrapper */
|
|
56
|
+
role?: UIRole
|
|
57
|
+
/** Accessible name for the wrapper */
|
|
58
|
+
'aria-label'?: string
|
|
59
|
+
/** Id of the element that labels the wrapper */
|
|
60
|
+
'aria-labelledby'?: string
|
|
61
|
+
/** Id of the element that describes the wrapper */
|
|
62
|
+
'aria-describedby'?: string
|
|
63
|
+
/** Id of the element that describes the wrapper error */
|
|
64
|
+
'aria-errormessage'?: string
|
|
65
|
+
/** Invalid state for the wrapper */
|
|
66
|
+
'aria-invalid'?: boolean
|
|
67
|
+
/** Required state for the wrapper */
|
|
68
|
+
'aria-required'?: boolean
|
|
69
|
+
/** Disabled state for the wrapper */
|
|
70
|
+
'aria-disabled'?: boolean
|
|
71
|
+
/** Readonly state for the wrapper */
|
|
72
|
+
'aria-readonly'?: boolean
|
|
73
|
+
/** Additional props */
|
|
74
|
+
[key: string]: any
|
|
36
75
|
}
|
|
37
76
|
|
|
38
77
|
function ObjectInput ({
|
|
@@ -45,7 +84,18 @@ function ObjectInput ({
|
|
|
45
84
|
row,
|
|
46
85
|
disabled,
|
|
47
86
|
readonly,
|
|
48
|
-
_renderWrapper
|
|
87
|
+
_renderWrapper,
|
|
88
|
+
testID,
|
|
89
|
+
id,
|
|
90
|
+
role,
|
|
91
|
+
'aria-label': ariaLabel,
|
|
92
|
+
'aria-labelledby': ariaLabelledBy,
|
|
93
|
+
'aria-describedby': ariaDescribedBy,
|
|
94
|
+
'aria-errormessage': ariaErrorMessage,
|
|
95
|
+
'aria-invalid': ariaInvalid,
|
|
96
|
+
'aria-required': ariaRequired,
|
|
97
|
+
'aria-disabled': ariaDisabled,
|
|
98
|
+
'aria-readonly': ariaReadonly
|
|
49
99
|
}: ObjectInputProps): ReactNode {
|
|
50
100
|
if (!$value || !properties) {
|
|
51
101
|
return null
|
|
@@ -77,15 +127,53 @@ function ObjectInput ({
|
|
|
77
127
|
if (inputs.length === 0) return null
|
|
78
128
|
|
|
79
129
|
if (!_renderWrapper) {
|
|
80
|
-
_renderWrapper = ({
|
|
130
|
+
_renderWrapper = ({
|
|
131
|
+
style,
|
|
132
|
+
testID,
|
|
133
|
+
id,
|
|
134
|
+
role,
|
|
135
|
+
'aria-label': ariaLabel,
|
|
136
|
+
'aria-labelledby': ariaLabelledBy,
|
|
137
|
+
'aria-describedby': ariaDescribedBy,
|
|
138
|
+
'aria-errormessage': ariaErrorMessage,
|
|
139
|
+
'aria-invalid': ariaInvalid,
|
|
140
|
+
'aria-required': ariaRequired,
|
|
141
|
+
'aria-disabled': ariaDisabled,
|
|
142
|
+
'aria-readonly': ariaReadonly
|
|
143
|
+
}, children): ReactNode => {
|
|
81
144
|
return pug`
|
|
82
|
-
Div(
|
|
145
|
+
Div(
|
|
146
|
+
style=style
|
|
147
|
+
testID=testID
|
|
148
|
+
id=id
|
|
149
|
+
role=role
|
|
150
|
+
aria-label=ariaLabel
|
|
151
|
+
aria-labelledby=ariaLabelledBy
|
|
152
|
+
aria-describedby=ariaDescribedBy
|
|
153
|
+
aria-errormessage=ariaErrorMessage
|
|
154
|
+
aria-invalid=ariaInvalid
|
|
155
|
+
aria-required=ariaRequired
|
|
156
|
+
aria-disabled=ariaDisabled
|
|
157
|
+
aria-readonly=ariaReadonly
|
|
158
|
+
row=row
|
|
159
|
+
)= children
|
|
83
160
|
`
|
|
84
161
|
}
|
|
85
162
|
}
|
|
86
163
|
|
|
87
164
|
return _renderWrapper({
|
|
88
|
-
style: [style, inputStyle]
|
|
165
|
+
style: [style, inputStyle],
|
|
166
|
+
testID,
|
|
167
|
+
id,
|
|
168
|
+
role,
|
|
169
|
+
'aria-label': ariaLabel,
|
|
170
|
+
'aria-labelledby': ariaLabelledBy,
|
|
171
|
+
'aria-describedby': ariaDescribedBy,
|
|
172
|
+
'aria-errormessage': ariaErrorMessage,
|
|
173
|
+
'aria-invalid': ariaInvalid,
|
|
174
|
+
'aria-required': ariaRequired,
|
|
175
|
+
'aria-disabled': ariaDisabled,
|
|
176
|
+
'aria-readonly': ariaReadonly
|
|
89
177
|
}, inputs.map(({ key, ...inputProps }, index): ReactNode => pug`
|
|
90
178
|
Input.input(
|
|
91
179
|
key=key
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/object-input",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
"types": "index.d.ts",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@startupjs-ui/core": "^0.
|
|
12
|
-
"@startupjs-ui/div": "^0.
|
|
13
|
-
"@startupjs-ui/input": "^0.
|
|
11
|
+
"@startupjs-ui/core": "^0.3.0",
|
|
12
|
+
"@startupjs-ui/div": "^0.3.0",
|
|
13
|
+
"@startupjs-ui/input": "^0.3.0"
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
16
16
|
"react": "*",
|
|
17
17
|
"react-native": "*",
|
|
18
18
|
"startupjs": "*"
|
|
19
19
|
},
|
|
20
|
-
"gitHead": "
|
|
20
|
+
"gitHead": "8d212b47680af1dfe582f9759b38724b46488e25"
|
|
21
21
|
}
|