@bitrise/bitkit 12.82.0 → 12.84.0

package/src/Components/EmptyState/EmptyState.theme.ts

@@ -1,36 +1,36 @@
 import type { ComponentStyleConfig } from '@chakra-ui/theme';
 
 const EmptyStateTheme: ComponentStyleConfig = {
-  parts: ['box', 'title', 'description'],
   baseStyle: ({ maxContentWidth }) => ({
     box: {
+      alignItems: 'center',
+      backgroundColor: 'neutral.95',
+      borderRadius: '4',
+      color: 'text.secondary',
       display: 'flex',
       flexDirection: 'column',
-      alignItems: 'center',
       justifyContent: 'center',
       paddingX: '16',
       paddingY: {
         base: '32',
         desktop: '48',
       },
-      backgroundColor: 'neutral.95',
-      borderRadius: '4',
-      color: 'text.secondary',
       textAlign: 'center',
     },
-    title: {
+    description: {
+      '+ *': {
+        marginTop: '16',
+      },
       marginTop: '8',
-      fontWeight: 'bold',
       maxWidth: maxContentWidth || '35rem',
     },
-    description: {
+    title: {
+      fontWeight: 'bold',
       marginTop: '8',
       maxWidth: maxContentWidth || '35rem',
-      '+ *': {
-        marginTop: '16',
-      },
     },
   }),
+  parts: ['box', 'title', 'description'],
 };
 
 export default EmptyStateTheme;

package/src/Components/EmptyState/EmptyState.tsx

@@ -21,7 +21,7 @@ const EmptyState = ({ children, description, iconName, maxContentWidth, title, .
         {title}
       </Text>
       {description && (
-        <Text sx={css.description} size="2">
+        <Text size="2" sx={css.description}>
           {description}
         </Text>
       )}

package/src/Components/ExpandableCard/ExpandableCard.theme.ts

@@ -5,24 +5,24 @@ const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['button', 'che
 const ExpandableCardTheme = defineMultiStyleConfig({
   baseStyle: ({ isOpen }) => ({
     button: {
-      borderTopStartRadius: '8',
-      borderTopEndRadius: '8',
-      borderBottomStartRadius: isOpen ? undefined : '8',
-      borderBottomEndRadius: isOpen ? undefined : '8',
-      display: 'flex',
+      _active: {
+        backgroundColor: 'neutral.90',
+      },
+      _hover: {
+        backgroundColor: 'neutral.93',
+      },
       alignItems: 'center',
-      justifyContent: 'space-between',
-      width: '100%',
-      cursor: 'pointer',
       backgroundColor: isOpen ? 'neutral.95' : 'neutral.100',
       borderBottom: isOpen ? '1px solid' : undefined,
       borderBottomColor: isOpen ? 'neutral.90' : undefined,
-      _hover: {
-        backgroundColor: 'neutral.93',
-      },
-      _active: {
-        backgroundColor: 'neutral.90',
-      },
+      borderBottomEndRadius: isOpen ? undefined : '8',
+      borderBottomStartRadius: isOpen ? undefined : '8',
+      borderTopEndRadius: '8',
+      borderTopStartRadius: '8',
+      cursor: 'pointer',
+      display: 'flex',
+      justifyContent: 'space-between',
+      width: '100%',
     },
     chevron: {
       transform: isOpen ? 'rotate(-180deg)' : undefined,

package/src/Components/ExpandableCard/ExpandableCard.tsx

@@ -21,10 +21,10 @@ const ExpandableCard = forwardRef<ExpandableCardProps, 'div'>((props, ref) => {
   const style = useMultiStyleConfig('ExpandableCard', { isOpen });
 
   return (
-    <Card variant="outline" sx={style.box} {...rest} ref={ref}>
-      <Box as="button" onClick={onToggle} padding={padding} __css={style.button} role="group" type="button">
+    <Card sx={style.box} variant="outline" {...rest} ref={ref}>
+      <Box __css={style.button} as="button" onClick={onToggle} padding={padding} role="group" type="button">
         {buttonContent}
-        <Icon name="ChevronDown" __css={style.chevron} />
+        <Icon __css={style.chevron} name="ChevronDown" />
       </Box>
       <Collapse in={isOpen} style={{ overflow: 'unset' }}>
         <Box padding={padding}>{children}</Box>

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

@@ -6,6 +6,42 @@ export const FILTER_STORY_OPTIONS: FilterOptions =
   );
 
 export const FILTER_STORY_DATA: FilterData = {
+  app: {
+    categoryName: 'App',
+    iconsMap: {
+      '0a248b278e135ea7': 'Other',
+      '32b14416be4b7b24': 'Android',
+      '46b6b9a78a418ee8': 'AppleFill',
+    },
+    options: ['46b6b9a78a418ee8', '32b14416be4b7b24', '0a248b278e135ea7'],
+    optionsMap: {
+      '0a248b278e135ea7': 'pipeline-service',
+      '32b14416be4b7b24': 'bitkit',
+      '46b6b9a78a418ee8': 'bitrise-website',
+    },
+    type: 'select',
+  },
+  branch: {
+    options: [
+      'BIVS-2231-create-rename-to-utilisation-views',
+      'revert-11937-revert-11884-RA-2060-release-manager-role',
+      'master',
+      'CI-2264-consolidate-other-provider-type-to-custom',
+    ],
+    type: 'tag',
+  },
+  cache_type: {
+    iconsMap: {
+      bazel: 'Bazel',
+      gradle: 'Gradle',
+    },
+    options: ['gradle', 'bazel'],
+    optionsMap: {
+      bazel: 'Bazel',
+      gradle: 'Gradle',
+    },
+    type: 'switch',
+  },
   date_range: {
     categoryName: 'Date',
     categoryNamePlural: 'dates',
@@ -20,40 +56,10 @@ export const FILTER_STORY_DATA: FilterData = {
   stage: {
     categoryName: 'Stage',
     categoryNamePlural: 'Stages',
-    options: FILTER_STORY_OPTIONS,
     dependsOn: { pipeline: 'Select a pipeline first' },
-    type: 'tag',
-  },
-  workflow: {
-    categoryName: 'Workflow',
-    isMultiple: true,
     options: FILTER_STORY_OPTIONS,
     type: 'tag',
   },
-  branch: {
-    options: [
-      'BIVS-2231-create-rename-to-utilisation-views',
-      'revert-11937-revert-11884-RA-2060-release-manager-role',
-      'master',
-      'CI-2264-consolidate-other-provider-type-to-custom',
-    ],
-    type: 'tag',
-  },
-  app: {
-    categoryName: 'App',
-    iconsMap: {
-      '46b6b9a78a418ee8': 'AppleFill',
-      '32b14416be4b7b24': 'Android',
-      '0a248b278e135ea7': 'Other',
-    },
-    options: ['46b6b9a78a418ee8', '32b14416be4b7b24', '0a248b278e135ea7'],
-    optionsMap: {
-      '46b6b9a78a418ee8': 'bitrise-website',
-      '32b14416be4b7b24': 'bitkit',
-      '0a248b278e135ea7': 'pipeline-service',
-    },
-    type: 'select',
-  },
   test_case: {
     categoryName: 'Test case',
     onAsyncSearch: (category, q) => {
@@ -67,30 +73,24 @@ export const FILTER_STORY_DATA: FilterData = {
     options: ['default 1', 'default 2', 'default 3'],
     type: 'tag',
   },
-  cache_type: {
-    iconsMap: {
-      bazel: 'Bazel',
-      gradle: 'Gradle',
-    },
-    options: ['gradle', 'bazel'],
-    optionsMap: {
-      bazel: 'Bazel',
-      gradle: 'Gradle',
-    },
-    type: 'switch',
+  workflow: {
+    categoryName: 'Workflow',
+    isMultiple: true,
+    options: FILTER_STORY_OPTIONS,
+    type: 'tag',
   },
 };
 
 export const FILTER_STORY_INIT_STATE: FilterState = {
-  pipeline: ['ipsum'],
   app: ['46b6b9a78a418ee8'],
   cache_type: ['gradle'],
+  pipeline: ['ipsum'],
 };
 
 export const FILTER_STORY_CONTEXT: FilterContextType = {
   data: FILTER_STORY_DATA,
-  setPopoverOpen: () => {},
-  state: FILTER_STORY_INIT_STATE,
   onFilterChange: () => {},
   onFilterClear: () => {},
+  setPopoverOpen: () => {},
+  state: FILTER_STORY_INIT_STATE,
 };

package/src/Components/Filter/Filter.theme.ts

@@ -31,129 +31,129 @@ const FilterTheme = defineMultiStyleConfig({
       flexDirection: ['column', 'row'],
       gap: '12',
     },
-    icon: {
-      margin: '4',
-      color: 'neutral.60',
-    },
     content: {
       display: 'flex',
-      gap: '12',
       flexWrap: 'wrap',
+      gap: '12',
     },
-    rightContent: {
+    form: {
+      background: 'neutral.100',
+      borderRadius: '8',
+      maxWidth: rem(480),
+      minWidth: rem(352),
+      padding: '16',
+    },
+    formBadge: {
+      backgroundColor: 'neutral.93',
+      color: 'neutral.40',
+      fontVariantNumeric: 'tabular-nums',
+      fontWeight: 'bold',
+    },
+    formButtonGroup: {
       display: 'flex',
-      gap: '16',
-      marginInlineStart: 'auto',
+      justifyContent: 'flex-end',
+      marginBlockStart: '24',
+    },
+    formHeader: {
+      display: 'flex',
+      gap: '8',
+      justifyContent: 'space-between',
+      marginBlockEnd: '8',
+    },
+    formInputGroup: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12',
+      maxHeight: rem(196),
+      overflowY: 'scroll',
+      paddingBlock: rem(3),
+      paddingInline: '12',
+    },
+    formSearch: {
+      marginBlockEnd: '16',
+    },
+    formTitle: {
+      color: 'purpe.10',
+      fontWeight: 'demiBold',
+    },
+    icon: {
+      color: 'neutral.60',
+      margin: '4',
     },
     item: {
+      background: 'neutral.100',
       border: '1px solid',
       borderColor: 'neutral.80',
       borderRadius: '4',
       display: 'flex',
       width: 'fit-content',
-      background: 'neutral.100',
       wordBreak: 'break-word',
     },
-    tagEdit: {
-      color: 'purple.10',
+    rightContent: {
       display: 'flex',
-      gap: '8',
-      alignItems: 'center',
-      paddingBlock: '4',
-      paddingInlineStart: rem(11),
-      paddingInlineEnd: rem(7),
-      borderRadius: '4',
+      gap: '16',
+      marginInlineStart: 'auto',
+    },
+    searchInput: {
+      _focusVisible: {
+        backgroundColor: 'neutral.95',
+      },
       _hover: {
-        background: 'neutral.93',
+        backgroundColor: 'neutral.95',
       },
+      border: undefined,
+      borderColor: undefined,
+      borderRadius: '4',
+      boxShadow: undefined,
+      fontSize: '2',
+      paddingLeft: '32',
+      paddingRight: '8',
+      paddingY: '4',
+    },
+    tagClear: {
       _active: {
         background: 'neutral.90',
       },
       _disabled: {
         cursor: 'not-allowed',
         ...disabledStates.tertiary,
-        _hover: disabledStates.tertiary,
         _active: disabledStates.tertiary,
+        _hover: disabledStates.tertiary,
+      },
+      _hover: {
+        background: 'neutral.93',
       },
-    },
-    tagClear: {
-      color: 'purple.10',
-      borderRadius: '4',
       border: 0,
-      minWidth: rem(27),
+      borderRadius: '4',
+      color: 'purple.10',
       height: rem(30),
       justifyContent: 'flex-start',
+      minWidth: rem(27),
       svg: {
         marginInlineStart: '4',
       },
-      _hover: {
-        background: 'neutral.93',
-      },
+    },
+    tagEdit: {
       _active: {
         background: 'neutral.90',
       },
       _disabled: {
         cursor: 'not-allowed',
         ...disabledStates.tertiary,
-        _hover: disabledStates.tertiary,
         _active: disabledStates.tertiary,
-      },
-    },
-    form: {
-      background: 'neutral.100',
-      borderRadius: '8',
-      padding: '16',
-      minWidth: rem(352),
-      maxWidth: rem(480),
-    },
-    formHeader: {
-      display: 'flex',
-      gap: '8',
-      justifyContent: 'space-between',
-      marginBlockEnd: '8',
-    },
-    formTitle: {
-      color: 'purpe.10',
-      fontWeight: 'demiBold',
-    },
-    formBadge: {
-      backgroundColor: 'neutral.93',
-      color: 'neutral.40',
-      fontWeight: 'bold',
-      fontVariantNumeric: 'tabular-nums',
-    },
-    formSearch: {
-      marginBlockEnd: '16',
-    },
-    formInputGroup: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '12',
-      maxHeight: rem(196),
-      overflowY: 'scroll',
-      paddingInline: '12',
-      paddingBlock: rem(3),
-    },
-    formButtonGroup: {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      marginBlockStart: '24',
-    },
-    searchInput: {
-      paddingLeft: '32',
-      paddingY: '4',
-      paddingRight: '8',
-      border: undefined,
-      borderRadius: '4',
-      borderColor: undefined,
-      boxShadow: undefined,
-      fontSize: '2',
-      _focusVisible: {
-        backgroundColor: 'neutral.95',
+        _hover: disabledStates.tertiary,
       },
       _hover: {
-        backgroundColor: 'neutral.95',
+        background: 'neutral.93',
       },
+      alignItems: 'center',
+      borderRadius: '4',
+      color: 'purple.10',
+      display: 'flex',
+      gap: '8',
+      paddingBlock: '4',
+      paddingInlineEnd: rem(7),
+      paddingInlineStart: rem(11),
     },
   },
 });

package/src/Components/Filter/Filter.tsx

@@ -85,10 +85,10 @@ const Filter = (props: FilterProps) => {
   };
 
   const filters = {
+    dateRange: {},
     search: {},
     select: {},
     switch: {},
-    dateRange: {},
     tag: {},
   } as Record<FilterType, Record<string, FilterCategoryProps>>;
 
@@ -129,21 +129,21 @@ const Filter = (props: FilterProps) => {
           <Icon name="Filter" sx={filterStyle.icon} />
 
           {Object.keys(filters.switch).map((category) => (
-            <FilterSwitchAdapter category={category} key={category} />
+            <FilterSwitchAdapter key={category} category={category} />
           ))}
 
           {Object.keys(filters.dateRange).map((category) => (
-            <FilterDate category={category} key={category} />
+            <FilterDate key={category} category={category} />
           ))}
 
           {Object.keys(filters.select).map((category) => (
-            <FilterItem category={category} key={category} />
+            <FilterItem key={category} category={category} />
           ))}
           {Object.keys(filters.tag).map((category) => {
             if (!state[category]) {
               return;
             }
-            return <FilterItem category={category} key={category} />;
+            return <FilterItem key={category} category={category} />;
           })}
 
           <FilterAdd onChange={onFilterChange} />
@@ -163,7 +163,7 @@ const Filter = (props: FilterProps) => {
               </Button>
             )}
             {showClearFilters && showSearch && (
-              <Divider orientation="vertical" size="1" variant="solid" flexShrink="0" />
+              <Divider flexShrink="0" orientation="vertical" size="1" variant="solid" />
             )}
             {showSearch && <FilterSearch onChange={onFilterChange} value={(state.Search && state.Search[0]) || ''} />}
           </Box>

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

@@ -56,9 +56,9 @@ const FilterAdd = (props: FilterAddProps) => {
         isDisabled={isDisabled}
         isLoading={isLoading}
         leftIconName="PlusOpen"
+        position={isOpen ? 'relative' : undefined}
         size="small"
         variant="tertiary"
-        position={isOpen ? 'relative' : undefined}
         zIndex={isOpen ? 'dialog' : undefined}
       >
         Add filter {isOpen}
@@ -72,8 +72,8 @@ const FilterAdd = (props: FilterAddProps) => {
           <FilterForm
             category={selectedCategory}
             categoryName={data[selectedCategory].categoryName}
-            onChange={onFilterChange}
             onCancel={onClose}
+            onChange={onFilterChange}
           />
         ) : (
           categoryList.map((category) => {
@@ -81,10 +81,10 @@ const FilterAdd = (props: FilterAddProps) => {
             const missingDependencies = getMissingDependencies(stateKeys, Object.keys(dependsOn || []));
             return (
               <Tooltip
+                key={category}
                 isDisabled={missingDependencies.length === 0}
                 label={dependsOn?.[missingDependencies[0]]}
                 placement="right"
-                key={category}
               >
                 <MenuItem
                   isDisabled={missingDependencies.length > 0}

package/src/Components/Filter/FilterDate/FilterDate.tsx

@@ -55,14 +55,14 @@ const FilterDate = (props: FilterDateProps) => {
 
   return (
     <DatePicker
-      selectable={selectable}
-      selected={selectedRange}
       onApply={onDateRangeApply}
-      onClose={onClose}
       onClear={value?.length ? onClearClick : undefined}
+      onClose={onClose}
+      selectable={selectable}
+      selected={selectedRange}
       visible={isOpen}
     >
-      <Box sx={filterStyle.item} position={isOpen ? 'relative' : undefined} zIndex={isOpen ? 'dialog' : undefined}>
+      <Box position={isOpen ? 'relative' : undefined} sx={filterStyle.item} zIndex={isOpen ? 'dialog' : undefined}>
         <Tooltip isDisabled={isLoading} label="Edit">
           <Text as="button" disabled={isLoading} onClick={onToggle} size="2" sx={filterStyle.tagEdit}>
             <Icon color="neutral.60" name="Calendar" size="16" /> {label}

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

@@ -25,7 +25,7 @@ export type FilterFormProps = {
 };
 
 const FilterForm = (props: FilterFormProps) => {
-  const { category, categoryName, onChange, onCancel } = props;
+  const { category, categoryName, onCancel, onChange } = props;
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
@@ -119,16 +119,15 @@ const FilterForm = (props: FilterFormProps) => {
       {(withSearch || isAsync) && (
         <SearchInput
           autoFocus
-          // isLoading={isLoading}
-          placeholder={isAsync ? 'Start typing to search options' : 'Start typing to find options'}
           onChange={onSearchChange}
+          placeholder={isAsync ? 'Start typing to search options' : 'Start typing to find options'}
           sx={filterStyle.formSearch}
           value={searchValue}
         />
       )}
       {isLoading && 'Loading...'}
       {!isLoading && isMultiple && (
-        <CheckboxGroup onChange={setSelected} value={selected} sx={filterStyle.formInputGroup}>
+        <CheckboxGroup onChange={setSelected} sx={filterStyle.formInputGroup} value={selected}>
           {items.length
             ? items.map((opt) => (
                 <Checkbox key={opt} value={opt}>
@@ -140,7 +139,7 @@ const FilterForm = (props: FilterFormProps) => {
         </CheckboxGroup>
       )}
       {!isLoading && !isMultiple && (
-        <RadioGroup onChange={(v) => setSelected([v])} value={selected[0] || ''} sx={filterStyle.formInputGroup}>
+        <RadioGroup onChange={(v) => setSelected([v])} sx={filterStyle.formInputGroup} value={selected[0] || ''}>
           <Radio value="">
             <Text as="span" color="neutral.40" fontStyle="italic">
               Not filtered

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

@@ -29,7 +29,7 @@ const FilterItem = (props: FilterItemProps) => {
 
   const pluralCategoryString = (categoryNamePlural || `${category}s`).toLowerCase();
 
-  const { isOpen, onToggle: togglePopover, onClose: closePopover } = useDisclosure();
+  const { isOpen, onClose: closePopover, onToggle: togglePopover } = useDisclosure();
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
@@ -66,7 +66,7 @@ const FilterItem = (props: FilterItemProps) => {
   return (
     <Popover isLazy isOpen={isOpen} onClose={onClose}>
       <PopoverTrigger>
-        <Box sx={filterStyle.item} position={isOpen ? 'relative' : undefined} zIndex={isOpen ? 'dialog' : undefined}>
+        <Box position={isOpen ? 'relative' : undefined} sx={filterStyle.item} zIndex={isOpen ? 'dialog' : undefined}>
           <Tooltip isDisabled={isLoading} label="Edit">
             <Text as="button" disabled={isLoading} onClick={onToggle} size="2" sx={filterStyle.tagEdit}>
               {getText()}
@@ -80,15 +80,15 @@ const FilterItem = (props: FilterItemProps) => {
               isDisabled={isLoading}
               onClick={() => onFilterClear(category)}
               size="small"
-              variant="tertiary"
               sx={filterStyle.tagClear}
               tooltipProps={{ shouldWrapChildren: false }}
+              variant="tertiary"
             />
           )}
         </Box>
       </PopoverTrigger>
       <PopoverContent>
-        <FilterForm category={category} categoryName={categoryName} onChange={onChange} onCancel={onClose} />
+        <FilterForm category={category} categoryName={categoryName} onCancel={onClose} onChange={onChange} />
       </PopoverContent>
     </Popover>
   );

package/src/Components/Filter/FilterSearch/FilterSearch.tsx

@@ -42,14 +42,14 @@ const FilterSearch = (props: FilterSearchProps) => {
   }, [value]);
 
   const inputProps: InputProps = {
+    onChange: onInputChange,
     placeholder: 'Search...',
     sx: filterStyle.searchInput,
-    onChange: onInputChange,
     value: searchValue,
     ...rest,
   };
   return (
-    <InputGroup maxWidth="9.25rem" height="fit-content">
+    <InputGroup height="fit-content" maxWidth="9.25rem">
       <InputLeftElement margin="8">
         <Icon color="neutral.60" name="Magnifier" size="16" />
       </InputLeftElement>