@bitrise/bitkit 12.95.0 → 12.97.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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Form/TagsInput/TagsInput.tsx +20 -28
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.95.0",
4
+ "version": "12.97.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.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { ClipboardEventHandler, KeyboardEventHandler, ReactNode, useId } from 'react';
1
+ import { ClipboardEventHandler, FocusEventHandler, KeyboardEventHandler, ReactNode, useId } from 'react';
2
2
  import {
3
3
  chakra,
4
4
  FormControl,
@@ -41,32 +41,32 @@ const TagsInput = ({
41
41
  ...rest
42
42
  }: TagsInputProps) => {
43
43
  const theme = useStyleConfig('TagsInput');
44
- const keyupHandler: KeyboardEventHandler<HTMLInputElement> = (ev) => {
45
- const target = ev.currentTarget;
46
- if (ev.key === 'Backspace' && target.value.length === 0) {
47
- onRemove(value[value.length - 1]);
44
+ const addValues = (maybeValues: string) => {
45
+ const newValue = maybeValues.split(separator).filter((item) => item && !item.match(/\s/) && !value.includes(item));
46
+ if (newValue.length > 0) {
47
+ onNewValues(newValue);
48
48
  }
49
49
  };
50
50
  const keydownHandler: KeyboardEventHandler<HTMLInputElement> = (ev) => {
51
51
  const target = ev.currentTarget;
52
52
  if (ev.key.match(separator)) {
53
53
  ev.preventDefault();
54
- if (target.value) {
55
- const newValue = target.value.split(separator)[0];
56
- if (!value.includes(newValue)) {
57
- onNewValues([newValue]);
58
- }
59
- target.value = '';
60
- }
54
+ addValues(target.value);
55
+ target.value = '';
56
+ } else if (ev.key === 'Backspace' && target.value.length === 0) {
57
+ onRemove(value[value.length - 1]);
61
58
  }
62
59
  };
63
60
  const pasteEventHandler: ClipboardEventHandler<HTMLInputElement> = (ev) => {
64
61
  ev.preventDefault();
65
- const newItems = ev.clipboardData
66
- .getData('text/plain')
67
- .split(separator)
68
- .filter((item) => item && !item.match(/\s/) && !value.includes(item));
69
- onNewValues(newItems);
62
+ addValues(ev.clipboardData.getData('text/plain'));
63
+ };
64
+ const blurHandler: FocusEventHandler<HTMLInputElement> = (ev) => {
65
+ const target = ev.currentTarget;
66
+ if (target.value) {
67
+ addValues(target.value);
68
+ target.value = '';
69
+ }
70
70
  };
71
71
  const removeItem = (deleted: string) => {
72
72
  onRemove(deleted);
@@ -121,23 +121,15 @@ const TagsInput = ({
121
121
  {item}
122
122
  </Tag>
123
123
  ))}
124
- {value.length === 0 && placeholder && (
125
- <Text
126
- color="sys.fg.subtle"
127
- pointerEvents="none"
128
- position="absolute"
129
- sx={{ ':has(+ :focus-visible)': { display: 'none' } }}
130
- >
131
- {placeholder}
132
- </Text>
133
- )}
134
124
  <chakra.input
135
125
  _focusVisible={{ boxShadow: 'none' }}
136
126
  flexGrow="1"
127
+ height="26px"
137
128
  id={id}
129
+ onBlur={blurHandler}
138
130
  onKeyDown={keydownHandler}
139
- onKeyUp={keyupHandler}
140
131
  onPaste={pasteEventHandler}
132
+ placeholder={value.length === 0 ? placeholder : undefined}
141
133
  />
142
134
  {isInvalid && <Icon color="icon.negative" name="ErrorCircleFilled" position="absolute" right="16" />}
143
135
  </Box>