@bitrise/bitkit 12.93.1-alpha.0 → 12.93.1-alpha.2

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Form/ChipInput/ChipInput.tsx +10 -7
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit",
3
3
  "description": "Bitrise React component library",
4
- "version": "12.93.1-alpha.0",
4
+ "version": "12.93.1-alpha.2",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
package/src/Components/Form/ChipInput/ChipInput.tsx CHANGED
@@ -18,7 +18,8 @@ export interface ChipInputProps extends UsedFormControlProps {
18
18
  label?: string;
19
19
  placeholder?: string;
20
20
  value: string[];
21
- onChange: (nv: string[]) => void;
21
+ onNewValues: (nv: string[]) => void;
22
+ onRemove: (v: string) => void;
22
23
  separator?: RegExp;
23
24
  maxCount?: number;
24
25
  invalidValues?: string[];
@@ -32,7 +33,8 @@ const ChipInput = ({
32
33
  invalidValues = [],
33
34
  label,
34
35
  maxCount,
35
- onChange,
36
+ onNewValues,
37
+ onRemove,
36
38
  placeholder,
37
39
  separator = /[, ]/,
38
40
  value,
@@ -46,12 +48,12 @@ const ChipInput = ({
46
48
  if (target.value) {
47
49
  const newValue = target.value.split(separator)[0];
48
50
  if (!value.includes(newValue)) {
49
- onChange([...value, newValue]);
51
+ onNewValues([newValue]);
50
52
  }
51
53
  target.value = '';
52
54
  }
53
55
  } else if (ev.key === 'Backspace' && target.value.length === 0) {
54
- onChange(value.slice(0, -1));
56
+ onRemove(value[value.length - 1]);
55
57
  }
56
58
  };
57
59
  const pasteEventHandler: ClipboardEventHandler<HTMLInputElement> = (ev) => {
@@ -60,10 +62,10 @@ const ChipInput = ({
60
62
  .getData('text/plain')
61
63
  .split(separator)
62
64
  .filter((item) => item && !item.match(/\s/) && !value.includes(item));
63
- onChange([...value, ...newItems]);
65
+ onNewValues(newItems);
64
66
  };
65
67
  const removeItem = (deleted: string) => {
66
- onChange(value.filter((val) => val !== deleted));
68
+ onRemove(deleted);
67
69
  };
68
70
  const isInvalid = rest.isInvalid || (maxCount && value.length > maxCount) || Boolean(errorText);
69
71
  const id = useId();
@@ -103,6 +105,7 @@ const ChipInput = ({
103
105
  flexWrap="wrap"
104
106
  gap="4"
105
107
  paddingRight={isInvalid ? '42px' : undefined}
108
+ position="relative"
106
109
  >
107
110
  {value.map((item, idx) => (
108
111
  <Tag
@@ -131,7 +134,7 @@ const ChipInput = ({
131
134
  onKeyDown={keyupHandler}
132
135
  onPaste={pasteEventHandler}
133
136
  />
134
- {isInvalid && <Icon color="icon.negative" name="ErrorCircleFilled" position="absolute" right="2rem" />}
137
+ {isInvalid && <Icon color="icon.negative" name="ErrorCircleFilled" position="absolute" right="16" />}
135
138
  </Box>
136
139
  {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
137
140
  {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}