@bitrise/bitkit 12.93.1-alpha.2 → 12.94.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.93.1-alpha.2",
+  "version": "12.94.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Form/{ChipInput/ChipInput.tsx → TagsInput/TagsInput.tsx}

@@ -14,7 +14,7 @@ import Tag from '../../Tag/Tag';
 import Text from '../../Text/Text';
 
 type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
-export interface ChipInputProps extends UsedFormControlProps {
+export interface TagsInputProps extends UsedFormControlProps {
   label?: string;
   placeholder?: string;
   value: string[];
@@ -27,7 +27,7 @@ export interface ChipInputProps extends UsedFormControlProps {
   helperText?: ReactNode;
 }
 
-const ChipInput = ({
+const TagsInput = ({
   errorText,
   helperText,
   invalidValues = [],
@@ -39,9 +39,15 @@ const ChipInput = ({
   separator = /[, ]/,
   value,
   ...rest
-}: ChipInputProps) => {
-  const theme = useStyleConfig('ChipInput');
+}: TagsInputProps) => {
+  const theme = useStyleConfig('TagsInput');
   const keyupHandler: KeyboardEventHandler<HTMLInputElement> = (ev) => {
+    const target = ev.currentTarget;
+    if (ev.key === 'Backspace' && target.value.length === 0) {
+      onRemove(value[value.length - 1]);
+    }
+  };
+  const keydownHandler: KeyboardEventHandler<HTMLInputElement> = (ev) => {
     const target = ev.currentTarget;
     if (ev.key.match(separator)) {
       ev.preventDefault();
@@ -52,8 +58,6 @@ const ChipInput = ({
         }
         target.value = '';
       }
-    } else if (ev.key === 'Backspace' && target.value.length === 0) {
-      onRemove(value[value.length - 1]);
     }
   };
   const pasteEventHandler: ClipboardEventHandler<HTMLInputElement> = (ev) => {
@@ -131,7 +135,8 @@ const ChipInput = ({
           _focusVisible={{ boxShadow: 'none' }}
           flexGrow="1"
           id={id}
-          onKeyDown={keyupHandler}
+          onKeyDown={keydownHandler}
+          onKeyUp={keyupHandler}
           onPaste={pasteEventHandler}
         />
         {isInvalid && <Icon color="icon.negative" name="ErrorCircleFilled" position="absolute" right="16" />}
@@ -142,4 +147,4 @@ const ChipInput = ({
   );
 };
 
-export default ChipInput;
+export default TagsInput;

package/src/index.ts

@@ -334,5 +334,5 @@ export * from './Components/Filter/Filter.types';
 export type { DateInputProps } from './Components/Form/DateInput/DateInput';
 export { default as DateInput } from './Components/Form/DateInput/DateInput';
 
-export type { ChipInputProps } from './Components/Form/ChipInput/ChipInput';
-export { default as ChipInput } from './Components/Form/ChipInput/ChipInput';
+export type { TagsInputProps } from './Components/Form/TagsInput/TagsInput';
+export { default as TagsInput } from './Components/Form/TagsInput/TagsInput';

package/src/theme.ts

@@ -54,7 +54,7 @@ import zIndices from './Foundations/Zindex/Zindex';
 import Toggletip from './Components/Toggletip/Toggletip.theme';
 import FilterSwitch from './Components/Filter/FilterSwitch/FilterSwitch.theme';
 import { colors, semanticTokens } from './tokens/tokens';
-import ChipInput from './Components/Form/ChipInput/ChipInput.theme';
+import TagsInput from './Components/Form/TagsInput/TagsInput.theme';
 
 const theme = {
   breakpoints,
@@ -79,7 +79,6 @@ const theme = {
     FilterSwitch,
     ...Form,
     Alert,
-    ChipInput,
     CloseButton,
     CodeBlock,
     CodeSnippet,
@@ -109,6 +108,7 @@ const theme = {
     Table,
     Tabs,
     Tag,
+    TagsInput,
     Text,
     Textarea,
     Toggletip,