@startupjs-ui/array-input 0.2.3 → 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 +11 -0
- package/index.d.ts +38 -1
- package/index.tsx +91 -6
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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
|
+
|
|
6
17
|
## [0.2.3](https://github.com/startupjs/startupjs-ui/compare/v0.2.2...v0.2.3) (2026-05-15)
|
|
7
18
|
|
|
8
19
|
**Note:** Version bump only for package @startupjs-ui/array-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 ArrayInputWrapperProps = {
|
|
9
|
+
style?: any;
|
|
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<ArrayInputProps>;
|
|
8
23
|
export default _default;
|
|
9
24
|
export declare const _PropsJsonSchema: {};
|
|
@@ -17,6 +32,28 @@ export interface ArrayInputProps {
|
|
|
17
32
|
/** Input metadata for array items (must include `input` or `type`) */
|
|
18
33
|
items: Record<string, any>;
|
|
19
34
|
/** Custom wrapper renderer (used by Input layout wrappers) */
|
|
20
|
-
_renderWrapper?: (
|
|
35
|
+
_renderWrapper?: (params: ArrayInputWrapperProps, children: ReactNode) => ReactNode;
|
|
36
|
+
/** Test identifier */
|
|
37
|
+
testID?: string;
|
|
38
|
+
/** Web id for the wrapper */
|
|
39
|
+
id?: string;
|
|
40
|
+
/** ARIA role for the wrapper */
|
|
41
|
+
role?: UIRole;
|
|
42
|
+
/** Accessible name for the wrapper */
|
|
43
|
+
'aria-label'?: string;
|
|
44
|
+
/** Id of the element that labels the wrapper */
|
|
45
|
+
'aria-labelledby'?: string;
|
|
46
|
+
/** Id of the element that describes the wrapper */
|
|
47
|
+
'aria-describedby'?: string;
|
|
48
|
+
/** Id of the element that describes the wrapper error */
|
|
49
|
+
'aria-errormessage'?: string;
|
|
50
|
+
/** Invalid state for the wrapper */
|
|
51
|
+
'aria-invalid'?: boolean;
|
|
52
|
+
/** Required state for the wrapper */
|
|
53
|
+
'aria-required'?: boolean;
|
|
54
|
+
/** Disabled state for the wrapper */
|
|
55
|
+
'aria-disabled'?: boolean;
|
|
56
|
+
/** Readonly state for the wrapper */
|
|
57
|
+
'aria-readonly'?: boolean;
|
|
21
58
|
[key: string]: any;
|
|
22
59
|
}
|
package/index.tsx
CHANGED
|
@@ -1,13 +1,28 @@
|
|
|
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 Button from '@startupjs-ui/button'
|
|
7
7
|
import Input from '@startupjs-ui/input'
|
|
8
8
|
import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes'
|
|
9
9
|
import './index.cssx.styl'
|
|
10
10
|
|
|
11
|
+
type ArrayInputWrapperProps = {
|
|
12
|
+
style?: any
|
|
13
|
+
testID?: string
|
|
14
|
+
id?: string
|
|
15
|
+
role?: UIRole
|
|
16
|
+
'aria-label'?: string
|
|
17
|
+
'aria-labelledby'?: string
|
|
18
|
+
'aria-describedby'?: string
|
|
19
|
+
'aria-errormessage'?: string
|
|
20
|
+
'aria-invalid'?: boolean
|
|
21
|
+
'aria-required'?: boolean
|
|
22
|
+
'aria-disabled'?: boolean
|
|
23
|
+
'aria-readonly'?: boolean
|
|
24
|
+
}
|
|
25
|
+
|
|
11
26
|
export default observer(
|
|
12
27
|
themed('ArrayInput', ArrayInput)
|
|
13
28
|
)
|
|
@@ -24,7 +39,29 @@ export interface ArrayInputProps {
|
|
|
24
39
|
/** Input metadata for array items (must include `input` or `type`) */
|
|
25
40
|
items: Record<string, any>
|
|
26
41
|
/** Custom wrapper renderer (used by Input layout wrappers) */
|
|
27
|
-
_renderWrapper?: (
|
|
42
|
+
_renderWrapper?: (params: ArrayInputWrapperProps, children: ReactNode) => ReactNode
|
|
43
|
+
/** Test identifier */
|
|
44
|
+
testID?: string
|
|
45
|
+
/** Web id for the wrapper */
|
|
46
|
+
id?: string
|
|
47
|
+
/** ARIA role for the wrapper */
|
|
48
|
+
role?: UIRole
|
|
49
|
+
/** Accessible name for the wrapper */
|
|
50
|
+
'aria-label'?: string
|
|
51
|
+
/** Id of the element that labels the wrapper */
|
|
52
|
+
'aria-labelledby'?: string
|
|
53
|
+
/** Id of the element that describes the wrapper */
|
|
54
|
+
'aria-describedby'?: string
|
|
55
|
+
/** Id of the element that describes the wrapper error */
|
|
56
|
+
'aria-errormessage'?: string
|
|
57
|
+
/** Invalid state for the wrapper */
|
|
58
|
+
'aria-invalid'?: boolean
|
|
59
|
+
/** Required state for the wrapper */
|
|
60
|
+
'aria-required'?: boolean
|
|
61
|
+
/** Disabled state for the wrapper */
|
|
62
|
+
'aria-disabled'?: boolean
|
|
63
|
+
/** Readonly state for the wrapper */
|
|
64
|
+
'aria-readonly'?: boolean
|
|
28
65
|
[key: string]: any
|
|
29
66
|
}
|
|
30
67
|
|
|
@@ -33,7 +70,18 @@ function ArrayInput ({
|
|
|
33
70
|
inputStyle,
|
|
34
71
|
$value,
|
|
35
72
|
items,
|
|
36
|
-
_renderWrapper
|
|
73
|
+
_renderWrapper,
|
|
74
|
+
testID,
|
|
75
|
+
id,
|
|
76
|
+
role,
|
|
77
|
+
'aria-label': ariaLabel,
|
|
78
|
+
'aria-labelledby': ariaLabelledBy,
|
|
79
|
+
'aria-describedby': ariaDescribedBy,
|
|
80
|
+
'aria-errormessage': ariaErrorMessage,
|
|
81
|
+
'aria-invalid': ariaInvalid,
|
|
82
|
+
'aria-required': ariaRequired,
|
|
83
|
+
'aria-disabled': ariaDisabled,
|
|
84
|
+
'aria-readonly': ariaReadonly
|
|
37
85
|
}: ArrayInputProps): ReactNode {
|
|
38
86
|
if (!$value || !items) return null
|
|
39
87
|
|
|
@@ -51,9 +99,35 @@ function ArrayInput ({
|
|
|
51
99
|
const inputs = getInputs()
|
|
52
100
|
|
|
53
101
|
if (!_renderWrapper) {
|
|
54
|
-
_renderWrapper = (
|
|
102
|
+
_renderWrapper = ({
|
|
103
|
+
style,
|
|
104
|
+
testID,
|
|
105
|
+
id,
|
|
106
|
+
role,
|
|
107
|
+
'aria-label': ariaLabel,
|
|
108
|
+
'aria-labelledby': ariaLabelledBy,
|
|
109
|
+
'aria-describedby': ariaDescribedBy,
|
|
110
|
+
'aria-errormessage': ariaErrorMessage,
|
|
111
|
+
'aria-invalid': ariaInvalid,
|
|
112
|
+
'aria-required': ariaRequired,
|
|
113
|
+
'aria-disabled': ariaDisabled,
|
|
114
|
+
'aria-readonly': ariaReadonly
|
|
115
|
+
}, children): ReactNode => {
|
|
55
116
|
return pug`
|
|
56
|
-
Div(
|
|
117
|
+
Div(
|
|
118
|
+
style=style
|
|
119
|
+
testID=testID
|
|
120
|
+
id=id
|
|
121
|
+
role=role
|
|
122
|
+
aria-label=ariaLabel
|
|
123
|
+
aria-labelledby=ariaLabelledBy
|
|
124
|
+
aria-describedby=ariaDescribedBy
|
|
125
|
+
aria-errormessage=ariaErrorMessage
|
|
126
|
+
aria-invalid=ariaInvalid
|
|
127
|
+
aria-required=ariaRequired
|
|
128
|
+
aria-disabled=ariaDisabled
|
|
129
|
+
aria-readonly=ariaReadonly
|
|
130
|
+
)= children
|
|
57
131
|
`
|
|
58
132
|
}
|
|
59
133
|
}
|
|
@@ -65,7 +139,18 @@ function ArrayInput ({
|
|
|
65
139
|
// - add new item before
|
|
66
140
|
// - add new item after
|
|
67
141
|
return _renderWrapper({
|
|
68
|
-
style: [style, inputStyle]
|
|
142
|
+
style: [style, inputStyle],
|
|
143
|
+
testID,
|
|
144
|
+
id,
|
|
145
|
+
role,
|
|
146
|
+
'aria-label': ariaLabel,
|
|
147
|
+
'aria-labelledby': ariaLabelledBy,
|
|
148
|
+
'aria-describedby': ariaDescribedBy,
|
|
149
|
+
'aria-errormessage': ariaErrorMessage,
|
|
150
|
+
'aria-invalid': ariaInvalid,
|
|
151
|
+
'aria-required': ariaRequired,
|
|
152
|
+
'aria-disabled': ariaDisabled,
|
|
153
|
+
'aria-readonly': ariaReadonly
|
|
69
154
|
}, pug`
|
|
70
155
|
each inputProps, index in inputs
|
|
71
156
|
Div.item(key=index styleName={ pushTop: index !== 0 })
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/array-input",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -8,15 +8,15 @@
|
|
|
8
8
|
"types": "index.d.ts",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@startupjs-ui/button": "^0.
|
|
12
|
-
"@startupjs-ui/core": "^0.
|
|
13
|
-
"@startupjs-ui/div": "^0.
|
|
14
|
-
"@startupjs-ui/input": "^0.
|
|
11
|
+
"@startupjs-ui/button": "^0.3.0",
|
|
12
|
+
"@startupjs-ui/core": "^0.3.0",
|
|
13
|
+
"@startupjs-ui/div": "^0.3.0",
|
|
14
|
+
"@startupjs-ui/input": "^0.3.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": "*",
|
|
18
18
|
"react-native": "*",
|
|
19
19
|
"startupjs": "*"
|
|
20
20
|
},
|
|
21
|
-
"gitHead": "
|
|
21
|
+
"gitHead": "8d212b47680af1dfe582f9759b38724b46488e25"
|
|
22
22
|
}
|