@bitrise/bitkit 13.88.0 → 13.89.0

package/package.json

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

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

@@ -1,3 +1,5 @@
+import { DateTime } from 'luxon';
+import { DateRange } from '../DatePicker/useDateRange';
 import { FilterContextType, FilterData, FilterOptions, FilterState } from './Filter.types';
 
 export const FILTER_STORY_OPTIONS: FilterOptions =
@@ -53,6 +55,8 @@ export const FILTER_STORY_DATA: FilterData = {
   date_range: {
     categoryName: 'Date',
     categoryNamePlural: 'dates',
+    isMultiple: true,
+    selectable: new DateRange(DateTime.now().minus({ days: 15 }), DateTime.now()),
     type: 'dateRange',
   },
   pipeline: {

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

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { TypeIconName } from '../Icon/Icon';
+import { DateRange } from '../DatePicker/DatePicker';
 
 export type FilterType = 'dateRange' | 'search' | 'select' | 'switch' | 'tag';
 
@@ -23,8 +24,17 @@ export type FilterCategoryProps = {
   onAsyncSearch?: FilterSearchCallback;
   options?: FilterOptions;
   optionsMap?: FilterOptionsMap;
-  type?: FilterType;
-};
+} & (
+  | {
+      type: 'dateRange';
+      selectable?: DateRange;
+      isMultiple: true;
+    }
+  | {
+      type?: Exclude<FilterType, 'dateRange'>;
+      selectable?: never;
+    }
+);
 
 export type FilterData = Record<string, FilterCategoryProps>;
 export type FilterState = Record<string, FilterValue>;

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

@@ -18,7 +18,7 @@ const FilterDate = (props: FilterDateProps) => {
   const { category } = props;
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
-  const { isLoading, onFilterChange, onFilterClear, setPopoverOpen, state } = useFilterContext();
+  const { isLoading, onFilterChange, onFilterClear, setPopoverOpen, state, data } = useFilterContext();
 
   const { isOpen, onClose, onToggle } = useDisclosure();
 
@@ -55,12 +55,13 @@ const FilterDate = (props: FilterDateProps) => {
 
   return (
     <DatePicker
+      selectable={data.date_range.selectable || selectable}
       onApply={onDateRangeApply}
       onClear={value?.length ? onClearClick : undefined}
       onClose={onClose}
-      selectable={selectable}
       selected={selectedRange}
       visible={isOpen}
+      mode="range"
     >
       <Box position={isOpen ? 'relative' : undefined} sx={filterStyle.item} zIndex={isOpen ? 'dialog' : undefined}>
         <Tooltip isDisabled={isLoading} label="Edit">