@bitrise/bitkit 13.120.0 → 13.121.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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Form/TagsInput/TagsInput.theme.ts +3 -0
  3. package/src/Components/Form/TagsInput/TagsInput.tsx +9 -2
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.120.0",
4
+ "version": "13.121.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
package/src/Components/Form/TagsInput/TagsInput.theme.ts CHANGED
@@ -13,6 +13,9 @@ const ChipInput = defineStyleConfig({
13
13
  padding: '0.6875rem',
14
14
  transition: '200ms',
15
15
  width: '100%',
16
+ _readOnly: {
17
+ background: 'background.disabled',
18
+ },
16
19
  },
17
20
  });
18
21
 
package/src/Components/Form/TagsInput/TagsInput.tsx CHANGED
@@ -25,12 +25,14 @@ export interface TagsInputProps extends UsedFormControlProps {
25
25
  invalidValues?: string[];
26
26
  errorText?: ReactNode;
27
27
  helperText?: ReactNode;
28
+ isReadOnly?: boolean;
28
29
  }
29
30
 
30
31
  const TagsInput = ({
31
32
  errorText,
32
33
  helperText,
33
34
  invalidValues = [],
35
+ isReadOnly,
34
36
  label,
35
37
  maxCount,
36
38
  onNewValues,
@@ -74,7 +76,7 @@ const TagsInput = ({
74
76
  const isInvalid = rest.isInvalid || (maxCount && value.length > maxCount) || Boolean(errorText);
75
77
  const id = useId();
76
78
  return (
77
- <FormControl {...rest} isInvalid={isInvalid}>
79
+ <FormControl {...rest} isInvalid={isInvalid} isReadOnly={isReadOnly}>
78
80
  <Box alignItems="center" display={label || maxCount ? 'flex' : 'none'} gap="4" marginBlockEnd="4">
79
81
  {label && (
80
82
  <FormLabel
@@ -110,12 +112,13 @@ const TagsInput = ({
110
112
  gap="4"
111
113
  paddingRight={isInvalid ? '42px' : undefined}
112
114
  position="relative"
115
+ data-readonly={isReadOnly}
113
116
  >
114
117
  {value.map((item, idx) => (
115
118
  <Tag
116
119
  key={item}
117
120
  colorScheme={invalidValues.includes(item) || (maxCount && idx > maxCount - 1) ? 'red' : undefined}
118
- onClose={() => removeItem(item)}
121
+ onClose={isReadOnly ? undefined : () => removeItem(item)}
119
122
  size="sm"
120
123
  >
121
124
  {item}
@@ -130,6 +133,10 @@ const TagsInput = ({
130
133
  onKeyDown={keydownHandler}
131
134
  onPaste={pasteEventHandler}
132
135
  placeholder={value.length === 0 ? placeholder : undefined}
136
+ readOnly={isReadOnly}
137
+ _readOnly={{
138
+ backgroundColor: 'background/disabled',
139
+ }}
133
140
  />
134
141
  {isInvalid && <Icon color="icon.negative" name="ErrorCircleFilled" position="absolute" right="16" />}
135
142
  </Box>