@bitrise/bitkit 13.244.0 → 13.246.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.244.0",
+  "version": "13.246.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -36,10 +36,10 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@floating-ui/react-dom-interactions": "^0.8.1",
-    "@fontsource/figtree": "^5.2.6",
+    "@fontsource/figtree": "^5.2.8",
     "@fontsource/source-code-pro": "^5.2.5",
     "framer-motion": "^12.5.0",
-    "luxon": "^3.5.0",
+    "luxon": "^3.6.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-focus-lock": "2.13.6",
@@ -51,45 +51,45 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.26.0",
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
     "@bitrise/eslint-plugin": "^2.12.0",
     "@chakra-ui/cli": "^2.5.8",
-    "@google-cloud/storage": "^7.15.2",
-    "@storybook/addon-actions": "^8.6.7",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-interactions": "^8.6.7",
-    "@storybook/addon-links": "^8.6.7",
-    "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
-    "@storybook/blocks": "^8.6.7",
-    "@storybook/react": "^8.6.7",
-    "@storybook/react-webpack5": "^8.6.7",
-    "@storybook/theming": "^8.6.7",
+    "@google-cloud/storage": "^7.16.0",
+    "@storybook/addon-actions": "^8.6.14",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-webpack5": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.2.0",
+    "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/luxon": "^3.4.2",
+    "@types/luxon": "^3.6.2",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "axios": "^1.8.3",
+    "axios": "^1.9.0",
     "eslint": "^8.57.1",
-    "glob": "^11.0.1",
+    "glob": "^11.0.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jsdom": "25.0.1",
+    "jsdom": "26.1.0",
     "lodash": "^4.17.21",
     "prettier": "^3.5.3",
-    "react-hook-form": "^7.54.2",
-    "release-it": "^18.1.2",
-    "storybook": "^8.6.7",
-    "ts-jest": "^29.2.6",
-    "typescript": "^5.8.2"
+    "react-hook-form": "^7.56.4",
+    "release-it": "^19.0.2",
+    "storybook": "^8.6.14",
+    "ts-jest": "^29.3.4",
+    "typescript": "^5.8.3"
   },
   "files": [
     "src",

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}
         />