@bitrise/bitkit 13.265.0 → 13.267.0

package/package.json

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

package/src/Components/Filter/Filter.storyData.ts

@@ -2,6 +2,8 @@ import { DateTime } from 'luxon';
 import { DateRange } from '../DatePicker/useDateRange';
 import { FilterContextType, FilterData, FilterOptions, FilterState } from './Filter.types';
 
+const branches = [...new Array(25000)].map((_, i) => `branch ${i}`);
+
 export const FILTER_STORY_OPTIONS: FilterOptions =
   'Lorem ipsum dolor sit amet consectetur adipisicing elit Reiciendis reprehenderit laudantium laborum excepturi nam quae quod sunt expedita vel repellat cum cupiditate esse similique est ducimus provident eos numquam voluptas'.split(
     ' ',
@@ -43,7 +45,7 @@ export const FILTER_STORY_DATA: FilterData = {
     categoryNamePlural: 'Branches',
     isMultiple: true,
     isPatternEnabled: true,
-    options: ['default 1', 'default 2', 'default 3', 'default 13'],
+    options: branches,
     type: 'tag',
   },
   cache_type: {

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

@@ -23,6 +23,8 @@ import { isEqual, useDebounce } from '../../../utils/utils';
 import { getOptionLabel } from '../Filter.utils';
 import { useFilterContext } from '../Filter.context';
 
+const MAX_ITEMS = 100;
+
 /**
  * https://gist.github.com/donmccurdy/6d073ce2c6f3951312dfa45da14a420f
  * RegExp-escapes all characters in the given string.
@@ -242,13 +244,19 @@ const FilterForm = (props: FilterFormProps) => {
             {!isLoading && isMultiple && (
               <CheckboxGroup onChange={setSelected} sx={filterStyle.formInputGroup} value={selected}>
                 {items.length
-                  ? items.map((opt) => (
+                  ? items.slice(0, MAX_ITEMS).map((opt) => (
                       <Checkbox key={opt} value={opt}>
                         {iconsMap && iconsMap[opt] && <Icon name={iconsMap[opt]} />}
                         {getOptionLabel(opt, currentOptionMap)}
                       </Checkbox>
                     ))
                   : getEmptyText()}
+                {items.length > MAX_ITEMS && (
+                  <Text textStyle="body/md/regular">
+                    We show only {MAX_ITEMS} items, use the search
+                    <br /> to find more.
+                  </Text>
+                )}
               </CheckboxGroup>
             )}
             {!isLoading && !isMultiple && (
@@ -261,7 +269,7 @@ const FilterForm = (props: FilterFormProps) => {
                   </Radio>
                 )}
                 {items.length
-                  ? items.map((opt) => {
+                  ? items.slice(0, MAX_ITEMS).map((opt) => {
                       const hasIcon = iconsMap && iconsMap[opt];
                       const label = getOptionLabel(opt, currentOptionMap);
                       return (
@@ -278,6 +286,12 @@ const FilterForm = (props: FilterFormProps) => {
                       );
                     })
                   : getEmptyText()}
+                {items.length > MAX_ITEMS && (
+                  <Text textStyle="body/md/regular">
+                    We show only {MAX_ITEMS} items, use the search
+                    <br /> to find more.
+                  </Text>
+                )}
               </RadioGroup>
             )}
           </>

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

@@ -25,6 +25,7 @@ export interface TagsInputProps extends UsedFormControlProps {
   separator?: RegExp;
   maxCount?: number;
   invalidValues?: string[];
+  isInvalidItem?: (item: string) => boolean;
   errorText?: ReactNode;
   helperText?: ReactNode;
   isReadOnly?: boolean;
@@ -39,6 +40,7 @@ const TagsInput = ({
   infoTooltipLabel,
   infoTooltipProps,
   invalidValues = [],
+  isInvalidItem = (item: string) => invalidValues.includes(item),
   isReadOnly,
   label,
   maxCount,
@@ -114,7 +116,7 @@ const TagsInput = ({
         {value.map((item, idx) => (
           <Tag
             key={item}
-            colorScheme={invalidValues.includes(item) || (maxCount && idx > maxCount - 1) ? 'red' : undefined}
+            colorScheme={isInvalidItem(item) || (maxCount && idx > maxCount - 1) ? 'red' : undefined}
             onClose={isReadOnly ? undefined : () => removeItem(item)}
             size="sm"
           >