@bitrise/bitkit 13.139.0 → 13.141.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/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bitrise/bitkit",
|
|
3
3
|
"description": "Bitrise React component library",
|
|
4
|
-
"version": "13.
|
|
4
|
+
"version": "13.141.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
|
|
@@ -33,16 +33,16 @@
|
|
|
33
33
|
"@chakra-ui/theme": "^3.3.1",
|
|
34
34
|
"@chakra-ui/theme-tools": "^2.1.2",
|
|
35
35
|
"@chakra-ui/utils": "^2.0.15",
|
|
36
|
-
"@emotion/react": "^11.13.
|
|
36
|
+
"@emotion/react": "^11.13.3",
|
|
37
37
|
"@emotion/styled": "^11.13.0",
|
|
38
38
|
"@floating-ui/react-dom-interactions": "^0.8.1",
|
|
39
|
-
"@fontsource/figtree": "^5.0.
|
|
40
|
-
"@fontsource/source-code-pro": "^5.0.
|
|
41
|
-
"framer-motion": "^11.3.
|
|
39
|
+
"@fontsource/figtree": "^5.0.21",
|
|
40
|
+
"@fontsource/source-code-pro": "^5.0.19",
|
|
41
|
+
"framer-motion": "^11.3.30",
|
|
42
42
|
"luxon": "^3.5.0",
|
|
43
43
|
"react": "^18.3.1",
|
|
44
44
|
"react-dom": "^18.3.1",
|
|
45
|
-
"react-focus-lock": "
|
|
45
|
+
"react-focus-lock": "2.13.1",
|
|
46
46
|
"react-imask": "^7.6.1",
|
|
47
47
|
"react-markdown": "^9.0.1"
|
|
48
48
|
},
|
|
@@ -52,43 +52,43 @@
|
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@babel/core": "^7.25.2",
|
|
55
|
-
"@babel/preset-env": "^7.25.
|
|
55
|
+
"@babel/preset-env": "^7.25.4",
|
|
56
56
|
"@babel/preset-react": "^7.24.7",
|
|
57
57
|
"@babel/preset-typescript": "^7.24.7",
|
|
58
58
|
"@bitrise/eslint-plugin": "^2.12.0",
|
|
59
59
|
"@chakra-ui/cli": "^2.4.1",
|
|
60
|
-
"@google-cloud/storage": "^7.12.
|
|
61
|
-
"@storybook/addon-actions": "^8.2.
|
|
62
|
-
"@storybook/addon-essentials": "^8.2.
|
|
63
|
-
"@storybook/addon-interactions": "^8.2.
|
|
64
|
-
"@storybook/addon-links": "^8.2.
|
|
60
|
+
"@google-cloud/storage": "^7.12.1",
|
|
61
|
+
"@storybook/addon-actions": "^8.2.9",
|
|
62
|
+
"@storybook/addon-essentials": "^8.2.9",
|
|
63
|
+
"@storybook/addon-interactions": "^8.2.9",
|
|
64
|
+
"@storybook/addon-links": "^8.2.9",
|
|
65
65
|
"@storybook/addon-webpack5-compiler-swc": "^1.0.5",
|
|
66
|
-
"@storybook/blocks": "^8.2.
|
|
67
|
-
"@storybook/react": "^8.2.
|
|
68
|
-
"@storybook/react-webpack5": "^8.2.
|
|
69
|
-
"@storybook/theming": "^8.2.
|
|
66
|
+
"@storybook/blocks": "^8.2.9",
|
|
67
|
+
"@storybook/react": "^8.2.9",
|
|
68
|
+
"@storybook/react-webpack5": "^8.2.9",
|
|
69
|
+
"@storybook/theming": "^8.2.9",
|
|
70
70
|
"@testing-library/dom": "^10.4.0",
|
|
71
|
-
"@testing-library/jest-dom": "^6.
|
|
71
|
+
"@testing-library/jest-dom": "^6.5.0",
|
|
72
72
|
"@testing-library/react": "^16.0.0",
|
|
73
73
|
"@testing-library/user-event": "^14.5.2",
|
|
74
74
|
"@types/jest": "^29.5.12",
|
|
75
75
|
"@types/luxon": "^3.4.2",
|
|
76
|
-
"@types/react": "^18.3.
|
|
76
|
+
"@types/react": "^18.3.4",
|
|
77
77
|
"@types/react-dom": "^18.3.0",
|
|
78
78
|
"@typescript-eslint/eslint-plugin": "^7.18.0",
|
|
79
79
|
"@typescript-eslint/parser": "^7.18.0",
|
|
80
|
-
"axios": "^1.7.
|
|
80
|
+
"axios": "^1.7.5",
|
|
81
81
|
"eslint": "^8.57.0",
|
|
82
82
|
"glob": "^11.0.0",
|
|
83
83
|
"jest": "^29.7.0",
|
|
84
84
|
"jest-environment-jsdom": "^29.7.0",
|
|
85
|
-
"jsdom": "^
|
|
85
|
+
"jsdom": "^25.0.0",
|
|
86
86
|
"lodash": "^4.17.21",
|
|
87
87
|
"prettier": "^3.3.3",
|
|
88
|
-
"react-hook-form": "^7.
|
|
88
|
+
"react-hook-form": "^7.53.0",
|
|
89
89
|
"release-it": "^17.6.0",
|
|
90
|
-
"storybook": "^8.2.
|
|
91
|
-
"ts-jest": "^29.2.
|
|
90
|
+
"storybook": "^8.2.9",
|
|
91
|
+
"ts-jest": "^29.2.5",
|
|
92
92
|
"typescript": "^5.5.4"
|
|
93
93
|
},
|
|
94
94
|
"files": [
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FormEvent, useEffect, useMemo, useState } from 'react';
|
|
2
|
-
import { useMultiStyleConfig } from '@chakra-ui/react';
|
|
2
|
+
import { FocusLock, useMultiStyleConfig } from '@chakra-ui/react';
|
|
3
3
|
import Badge from '../../Badge/Badge';
|
|
4
4
|
import Box from '../../Box/Box';
|
|
5
5
|
import Button from '../../Button/Button';
|
|
@@ -114,80 +114,81 @@ const FilterForm = (props: FilterFormProps) => {
|
|
|
114
114
|
: Array.from(new Set([...value, ...filteredOptions]));
|
|
115
115
|
|
|
116
116
|
return (
|
|
117
|
-
<
|
|
118
|
-
<Box sx={filterStyle.
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
117
|
+
<FocusLock>
|
|
118
|
+
<Box as="form" data-testid={`${category}-form`} onSubmit={onSubmit} sx={filterStyle.form}>
|
|
119
|
+
<Box sx={filterStyle.formHeader}>
|
|
120
|
+
<Text as="h5" sx={filterStyle.formTitle}>
|
|
121
|
+
{categoryName || category}
|
|
122
|
+
</Text>
|
|
123
|
+
{isMultiple && (
|
|
124
|
+
<Badge variant="subtle" colorScheme="neutral" sx={filterStyle.formBadge}>
|
|
125
|
+
{selected[0] === '' ? '0' : String(selected.length)}
|
|
126
|
+
</Badge>
|
|
127
|
+
)}
|
|
128
|
+
</Box>
|
|
129
|
+
{(withSearch || isAsync) && (
|
|
130
|
+
<SearchInput
|
|
131
|
+
onChange={onSearchChange}
|
|
132
|
+
placeholder={isAsync ? 'Start typing to search options' : 'Start typing to find options'}
|
|
133
|
+
sx={filterStyle.formSearch}
|
|
134
|
+
value={searchValue}
|
|
135
|
+
/>
|
|
126
136
|
)}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
{label}
|
|
167
|
-
</Box>
|
|
168
|
-
) : (
|
|
169
|
-
label
|
|
170
|
-
)}
|
|
171
|
-
</Radio>
|
|
172
|
-
);
|
|
173
|
-
})
|
|
174
|
-
: getEmptyText()}
|
|
175
|
-
</RadioGroup>
|
|
176
|
-
)}
|
|
177
|
-
<ButtonGroup spacing="12" sx={filterStyle.formButtonGroup}>
|
|
178
|
-
{isEditMode && (
|
|
179
|
-
<Button marginInlineEnd="auto" onClick={onClearClick} size="sm" variant="tertiary">
|
|
180
|
-
Clear
|
|
181
|
-
</Button>
|
|
137
|
+
{isLoading && 'Loading...'}
|
|
138
|
+
{!isLoading && isMultiple && (
|
|
139
|
+
<CheckboxGroup onChange={setSelected} sx={filterStyle.formInputGroup} value={selected}>
|
|
140
|
+
{items.length
|
|
141
|
+
? items.map((opt) => (
|
|
142
|
+
<Checkbox key={opt} value={opt}>
|
|
143
|
+
{iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} />}
|
|
144
|
+
{getOptionLabel(opt, optionsMap)}
|
|
145
|
+
</Checkbox>
|
|
146
|
+
))
|
|
147
|
+
: getEmptyText()}
|
|
148
|
+
</CheckboxGroup>
|
|
149
|
+
)}
|
|
150
|
+
{!isLoading && !isMultiple && (
|
|
151
|
+
<RadioGroup onChange={(v) => setSelected([v])} sx={filterStyle.formInputGroup} value={selected[0] || ''}>
|
|
152
|
+
<Radio value="">
|
|
153
|
+
<Text as="span" color="neutral.40" fontStyle="italic">
|
|
154
|
+
Not filtered
|
|
155
|
+
</Text>
|
|
156
|
+
</Radio>
|
|
157
|
+
{items.length
|
|
158
|
+
? items.map((opt) => {
|
|
159
|
+
const hasIcon = iconsMap && iconsMap[opt];
|
|
160
|
+
const label = getOptionLabel(opt, optionsMap);
|
|
161
|
+
return (
|
|
162
|
+
<Radio key={opt} value={opt}>
|
|
163
|
+
{hasIcon ? (
|
|
164
|
+
<Box as="span" display="flex" gap="4">
|
|
165
|
+
<Icon name={iconsMap[opt]} />
|
|
166
|
+
{label}
|
|
167
|
+
</Box>
|
|
168
|
+
) : (
|
|
169
|
+
label
|
|
170
|
+
)}
|
|
171
|
+
</Radio>
|
|
172
|
+
);
|
|
173
|
+
})
|
|
174
|
+
: getEmptyText()}
|
|
175
|
+
</RadioGroup>
|
|
182
176
|
)}
|
|
183
|
-
<
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
177
|
+
<ButtonGroup spacing="12" sx={filterStyle.formButtonGroup}>
|
|
178
|
+
{isEditMode && (
|
|
179
|
+
<Button marginInlineEnd="auto" onClick={onClearClick} size="sm" variant="tertiary">
|
|
180
|
+
Clear
|
|
181
|
+
</Button>
|
|
182
|
+
)}
|
|
183
|
+
<Button onClick={onCancelClick} size="sm" type="reset" variant="secondary">
|
|
184
|
+
Cancel
|
|
185
|
+
</Button>
|
|
186
|
+
<Button isDisabled={isDisabled} size="sm" type="submit">
|
|
187
|
+
{(selected.length === 0 || selected[0] === '') && isEditMode ? 'Remove' : 'Apply'}
|
|
188
|
+
</Button>
|
|
189
|
+
</ButtonGroup>
|
|
190
|
+
</Box>
|
|
191
|
+
</FocusLock>
|
|
191
192
|
);
|
|
192
193
|
};
|
|
193
194
|
|