@bitrise/bitkit 13.245.0 → 13.247.0

package/package.json

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

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -24,7 +24,7 @@ const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
 
   const childArray = Children.toArray(children);
   const childrenCount = childArray.length;
-  const items = childArray.map((child, index) => {
+  const items = Children.map(childArray, (child, index) => {
     return (
       <BreadcrumbItem>
         {hasSeparatorBeforeFirst && index === 0 && <BreadcrumbSeparator marginLeft="0" />}

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

@@ -41,6 +41,7 @@ export const FILTER_STORY_DATA: FilterData = {
   branch: {
     categoryName: 'Branch',
     categoryNamePlural: 'Branches',
+    isMultiple: true,
     isPatternEnabled: true,
     options: ['default 1', 'default 2', 'default 3', 'default 13'],
     type: 'tag',

package/src/Components/Filter/Filter.types.ts

@@ -28,6 +28,7 @@ export type FilterCategoryProps = {
   options?: FilterOptions;
   optionsMap?: FilterOptionsMap;
   isPatternEnabled?: boolean;
+  loadingText?: string;
 } & (
   | {
       type: 'dateRange';

package/src/Components/Filter/FilterAdd/FilterAdd.tsx

@@ -74,6 +74,7 @@ const FilterAdd = (props: FilterAddProps) => {
               category={selectedCategory}
               categoryName={data[selectedCategory].categoryName}
               categoryNamePlural={data[selectedCategory].categoryNamePlural}
+              loadingText={data[selectedCategory].loadingText}
               onCancel={onClose}
               onChange={onFilterChange}
             />

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

@@ -11,6 +11,7 @@ import Icon from '../../Icon/Icon';
 import Input from '../../Form/Input/Input';
 import List from '../../List/List';
 import ListItem from '../../List/ListItem';
+import ProgressSpinner from '../../ProgressSpinner/ProgressSpinner';
 import Radio from '../../Form/Radio/Radio';
 import RadioGroup from '../../Form/Radio/RadioGroup';
 import SearchInput from '../../SearchInput/SearchInput';
@@ -29,36 +30,55 @@ function regExpEscape(s: string) {
   return s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
 }
 
-const getMatchingResults = (categoryNamePlural: string, selected: FilterValue, items: FilterOptions) => {
-  if (!selected.length || selected[0] === '') {
-    return (
-      <Text textStyle="body/md/regular" color="text/secondary">
-        Enter pattern to view {categoryNamePlural} with matching names.
-      </Text>
-    );
-  }
+type MatchingResultsProps = {
+  categoryNamePlural: string;
+  selected: FilterValue;
+  items: FilterOptions;
+};
 
-  const filterRegexp = new RegExp(`^${selected[0].split(/\*+/).map(regExpEscape).join('.*')}$`);
+const MatchingResults = (props: MatchingResultsProps) => {
+  const { categoryNamePlural, selected, items } = props;
 
-  const matchingResults = items.filter((item) => {
-    return filterRegexp.test(item) && item !== selected[0];
-  });
-  if (!matchingResults.length) {
-    return (
+  let content;
+  let matchingResults: FilterOptions = [];
+  if (!selected.length || selected[0] === '') {
+    content = (
       <Text textStyle="body/md/regular" color="text/secondary">
-        (no matching {categoryNamePlural})
+        Enter pattern to view {categoryNamePlural} with matching names.
       </Text>
     );
+  } else {
+    const filterRegexp = new RegExp(`^${selected[0].split(/\*+/).map(regExpEscape).join('.*')}$`);
+    matchingResults = items.filter((item) => {
+      return filterRegexp.test(item);
+    });
+    if (!matchingResults.length) {
+      content = (
+        <Text textStyle="body/md/regular" color="text/secondary">
+          (no matching {categoryNamePlural})
+        </Text>
+      );
+    } else {
+      content = (
+        <Box maxHeight="11rem" overflow="scroll">
+          <List textStyle="body/md/regular" variant="unordered">
+            {matchingResults.map((r) => (
+              <ListItem key={r}>{r}</ListItem>
+            ))}
+          </List>
+        </Box>
+      );
+    }
   }
 
   return (
-    <Box maxHeight="11rem" overflow="scroll">
-      <List textStyle="body/md/regular" variant="unordered">
-        {matchingResults.map((r) => (
-          <ListItem key={r}>{r}</ListItem>
-        ))}
-      </List>
-    </Box>
+    <>
+      <Text as="label" textStyle="comp/input/label" color="text/primary" display="block" marginBlockEnd="8">
+        Matching result{matchingResults.length > 1 ? 's' : ''}{' '}
+        {matchingResults.length ? `(${matchingResults.length})` : ''}
+      </Text>
+      {content}
+    </>
   );
 };
 
@@ -66,12 +86,13 @@ export type FilterFormProps = {
   category: string;
   categoryName?: string;
   categoryNamePlural?: string;
+  loadingText?: string;
   onChange: (category: string, selected: FilterValue, previousValue: FilterValue) => void;
   onCancel: () => void;
 };
 
 const FilterForm = (props: FilterFormProps) => {
-  const { category, categoryName, categoryNamePlural, onCancel, onChange } = props;
+  const { category, categoryName, categoryNamePlural, loadingText, onCancel, onChange } = props;
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
@@ -190,7 +211,7 @@ const FilterForm = (props: FilterFormProps) => {
           <Text as="h5" sx={filterStyle.formTitle}>
             {categoryName || category}
           </Text>
-          {isMultiple && (
+          {isMultiple && mode === 'manually' && (
             <Badge variant="subtle" colorScheme="neutral" sx={filterStyle.formBadge}>
               {selected[0] === '' ? '0' : String(selected.length)}
             </Badge>
@@ -208,7 +229,12 @@ const FilterForm = (props: FilterFormProps) => {
                 value={searchValue}
               />
             )}
-            {isLoading && 'Loading...'}
+            {isLoading && (
+              <Box display="flex" alignItems="center">
+                <ProgressSpinner color="sys/primary/base" marginRight="12" size="16" />
+                <Text color="text/secondary">{loadingText || 'Loading...'}</Text>
+              </Box>
+            )}
             {!isLoading && isMultiple && (
               <CheckboxGroup onChange={setSelected} sx={filterStyle.formInputGroup} value={selected}>
                 {items.length
@@ -263,17 +289,17 @@ const FilterForm = (props: FilterFormProps) => {
               onChange={(e) => setSelected([e.target.value])}
               value={selected[0] || ''}
             />
-            <Text as="label" textStyle="comp/input/label" color="text/primary" display="block" marginBlockEnd="8">
-              Matching results
-            </Text>
-            {getMatchingResults((categoryNamePlural || category).toLowerCase(), selected, items)}
+            <MatchingResults categoryNamePlural={categoryNamePlural || category} items={items} selected={selected} />
           </>
         )}
         <ButtonGroup spacing="12" sx={filterStyle.formButtonGroup}>
           {isPatternEnabled && !isEditMode && (
             <Button
               marginInlineEnd="auto"
-              onClick={() => setMode(mode === 'manually' ? 'pattern' : 'manually')}
+              onClick={() => {
+                setMode(mode === 'manually' ? 'pattern' : 'manually');
+                setSelected([]);
+              }}
               size="sm"
               variant="tertiary"
             >

package/src/Components/Filter/FilterItem/FilterItem.tsx

@@ -23,7 +23,7 @@ const FilterItem = (props: FilterItemProps) => {
 
   const { data, isLoading, onFilterChange, onFilterClear, setPopoverOpen, state } = useFilterContext();
 
-  const { categoryName, categoryNamePlural, optionsMap, type, unfilteredLabel } = data[category];
+  const { categoryName, categoryNamePlural, loadingText, optionsMap, type, unfilteredLabel } = data[category];
 
   const value = state[category];
 
@@ -102,6 +102,7 @@ const FilterItem = (props: FilterItemProps) => {
           category={category}
           categoryName={categoryName}
           categoryNamePlural={pluralCategoryString}
+          loadingText={loadingText}
           onCancel={onClose}
           onChange={onChange}
         />