@bitrise/bitkit 13.194.0 → 13.196.0

package/package.json

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

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

@@ -12,29 +12,30 @@ export const FILTER_STORY_DATA: FilterData = {
     categoryName: 'App',
     iconsMap: {
       '0a248b278e135ea7': 'Other',
-      '29d62a794c77ad99': 'AppleFill',
       '32b14416be4b7b24': 'Android',
       '46b6b9a78a418ee8': 'AppleFill',
-      '792fda8fed0308a6': 'Android',
+      '29d62a794c77ad99': 'AppleFill',
       fcb0a0f49138e0a0: 'Other',
+      '792fda8fed0308a6': 'Android',
     },
     options: [
       '0a248b278e135ea7',
       '32b14416be4b7b24',
-      '0a248b278e135ea7',
+      '46b6b9a78a418ee8',
       '29d62a794c77ad99',
       'fcb0a0f49138e0a0',
       '792fda8fed0308a6',
     ],
     optionsMap: {
       '0a248b278e135ea7': 'pipeline-service',
-      '29d62a794c77ad99': 'build-log-service',
       '32b14416be4b7b24': 'bitkit',
       '46b6b9a78a418ee8': 'bitrise-website',
-      '792fda8fed0308a6': 'website-docker-base-env #docker',
+      '29d62a794c77ad99': 'build-log-service',
       fcb0a0f49138e0a0: 'bitrise-insights-cf',
+      '792fda8fed0308a6': 'website-docker-base-env #docker',
     },
     hasNotFilteredOption: false,
+    preserveOptionOrder: true,
     type: 'select',
   },
   branch: {

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

@@ -21,6 +21,7 @@ export type FilterCategoryProps = {
   dependsOn?: Record<string, string>;
   iconsMap?: FilterIconsMap;
   hasNotFilteredOption?: boolean;
+  preserveOptionOrder?: boolean;
   isMultiple?: boolean;
   onAsyncSearch?: FilterSearchCallback;
   options?: FilterOptions;

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

@@ -31,7 +31,15 @@ const FilterForm = (props: FilterFormProps) => {
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
   const { data, state } = useFilterContext();
-  const { iconsMap, hasNotFilteredOption = true, isMultiple, onAsyncSearch, options, optionsMap } = data[category];
+  const {
+    iconsMap,
+    hasNotFilteredOption = true,
+    preserveOptionOrder,
+    isMultiple,
+    onAsyncSearch,
+    options,
+    optionsMap,
+  } = data[category];
   const value = state[category] || [];
 
   const [selected, setSelected] = useState<FilterValue>(value);
@@ -111,8 +119,8 @@ const FilterForm = (props: FilterFormProps) => {
 
   const items =
     isAsync && !!searchValue
-      ? Array.from(new Set([...value, ...foundOptions]))
-      : Array.from(new Set([...value, ...filteredOptions]));
+      ? Array.from(new Set(preserveOptionOrder ? [...foundOptions] : [...value, ...foundOptions]))
+      : Array.from(new Set(preserveOptionOrder ? [...filteredOptions] : [...value, ...filteredOptions]));
 
   return (
     <FocusLock>
@@ -178,7 +186,7 @@ const FilterForm = (props: FilterFormProps) => {
           </RadioGroup>
         )}
         <ButtonGroup spacing="12" sx={filterStyle.formButtonGroup}>
-          {isEditMode && (
+          {isEditMode && hasNotFilteredOption && (
             <Button marginInlineEnd="auto" onClick={onClearClick} size="sm" variant="tertiary">
               Clear
             </Button>

package/src/Patterns/GroupHeader/GroupHeader.tsx

@@ -0,0 +1,21 @@
+import { BoxProps } from '@chakra-ui/react';
+import Divider from '../../Components/Divider/Divider';
+import Box from '../../Components/Box/Box';
+import Text from '../../Components/Text/Text';
+
+export type GroupHeaderProps = {
+  label: string;
+} & BoxProps;
+
+const GroupHeader = ({ label, ...rest }: GroupHeaderProps) => {
+  return (
+    <Box alignItems="center" display="flex" gap="16" paddingTop="8" paddingRight="8" paddingBottom="4" {...rest}>
+      <Text as="h6" textStyle="heading/h6" textColor="text/tertiary">
+        {label}
+      </Text>
+      <Divider flexGrow="1" w="auto" />
+    </Box>
+  );
+};
+
+export default GroupHeader;

package/src/index.ts

@@ -220,6 +220,9 @@ export { default as DatePicker, DateRange, useDateRange } from './Components/Dat
 export type { FadeProps } from './Components/Fade/Fade';
 export { default as Fade } from './Components/Fade/Fade';
 
+export type { GroupHeaderProps } from './Patterns/GroupHeader/GroupHeader';
+export { default as GroupHeader } from './Patterns/GroupHeader/GroupHeader';
+
 export type { InputProps } from './Components/Form/Input/Input';
 export { default as Input } from './Components/Form/Input/Input';