@bitrise/bitkit 12.94.0 → 12.96.0

package/package.json

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

package/src/Components/Filter/FilterForm/FilterForm.tsx

@@ -146,12 +146,22 @@ const FilterForm = (props: FilterFormProps) => {
             </Text>
           </Radio>
           {items.length
-            ? items.map((opt) => (
-                <Radio key={opt} value={opt}>
-                  {iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} />}
-                  {getOptionLabel(opt, optionsMap)}
-                </Radio>
-              ))
+            ? items.map((opt) => {
+                const hasIcon = iconsMap && iconsMap[opt];
+                const label = getOptionLabel(opt, optionsMap);
+                return (
+                  <Radio key={opt} value={opt}>
+                    {hasIcon ? (
+                      <Box alignItems="center" as="span" display="flex" gap="4">
+                        <Icon name={iconsMap[opt]} />
+                        {label}
+                      </Box>
+                    ) : (
+                      label
+                    )}
+                  </Radio>
+                );
+              })
             : getEmptyText()}
         </RadioGroup>
       )}

package/src/Components/Form/Radio/Radio.theme.ts

@@ -50,9 +50,6 @@ const RadioTheme = {
     },
     label: {
       _disabled: { color: 'neutral.60' },
-      alignItems: 'center',
-      display: 'flex',
-      gap: '4',
       userSelect: 'none',
     },
   },

package/src/Components/Form/TagsInput/TagsInput.tsx

@@ -1,4 +1,4 @@
-import { ClipboardEventHandler, KeyboardEventHandler, ReactNode, useId } from 'react';
+import { ClipboardEventHandler, FocusEventHandler, KeyboardEventHandler, ReactNode, useId } from 'react';
 import {
   chakra,
   FormControl,
@@ -47,26 +47,30 @@ const TagsInput = ({
       onRemove(value[value.length - 1]);
     }
   };
+  const addValues = (maybeValues: string) => {
+    const newValue = maybeValues.split(separator).filter((item) => item && !item.match(/\s/) && !value.includes(item));
+    if (newValue.length > 0) {
+      onNewValues(newValue);
+    }
+  };
   const keydownHandler: KeyboardEventHandler<HTMLInputElement> = (ev) => {
     const target = ev.currentTarget;
     if (ev.key.match(separator)) {
       ev.preventDefault();
-      if (target.value) {
-        const newValue = target.value.split(separator)[0];
-        if (!value.includes(newValue)) {
-          onNewValues([newValue]);
-        }
-        target.value = '';
-      }
+      addValues(target.value);
+      target.value = '';
     }
   };
   const pasteEventHandler: ClipboardEventHandler<HTMLInputElement> = (ev) => {
     ev.preventDefault();
-    const newItems = ev.clipboardData
-      .getData('text/plain')
-      .split(separator)
-      .filter((item) => item && !item.match(/\s/) && !value.includes(item));
-    onNewValues(newItems);
+    addValues(ev.clipboardData.getData('text/plain'));
+  };
+  const blurHandler: FocusEventHandler<HTMLInputElement> = (ev) => {
+    const target = ev.currentTarget;
+    if (target.value) {
+      addValues(target.value);
+      target.value = '';
+    }
   };
   const removeItem = (deleted: string) => {
     onRemove(deleted);
@@ -135,6 +139,7 @@ const TagsInput = ({
           _focusVisible={{ boxShadow: 'none' }}
           flexGrow="1"
           id={id}
+          onBlur={blurHandler}
           onKeyDown={keydownHandler}
           onKeyUp={keyupHandler}
           onPaste={pasteEventHandler}