@bitrise/bitkit 12.112.0 → 12.113.0

package/package.json

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

package/src/Components/Filter/Filter.tsx

@@ -22,42 +22,32 @@ import FilterDate from './FilterDate/FilterDate';
 import FilterSwitchAdapter from './FilterSwitchAdapter/FilterSwitchAdapter';
 
 export interface FilterProps extends Omit<BoxProps, 'onChange'> {
+  data: FilterData;
   filtersDependOn?: string[];
-  initialData: FilterData;
-  initialState: FilterState;
   isLoading?: boolean;
   onChange: (state: FilterState) => void;
   showAdd?: boolean;
   showSearch?: boolean;
+  state: FilterState;
 }
 
 const Filter = (props: FilterProps) => {
-  const {
-    filtersDependOn,
-    initialData,
-    initialState,
-    isLoading,
-    onChange,
-    showAdd = true,
-    showSearch,
-    ...rest
-  } = props;
+  const { data, filtersDependOn, isLoading, onChange, showAdd = true, showSearch, state, ...rest } = props;
 
   const isInited = useRef<boolean>(false);
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
-  const state: FilterState = {};
-  Object.entries(initialState).forEach(([category, values]) => {
+  const cleanState: FilterState = {};
+  Object.entries(state).forEach(([category, values]) => {
     if (values?.length) {
       const cleanValues = values.filter((v) => v !== null && v !== '' && v !== undefined);
       if (cleanValues.length) {
-        state[category] = cleanValues;
+        cleanState[category] = cleanValues;
       }
     }
   });
 
-  const [data] = useState<FilterData>(initialData);
   const [isPopoverOpen, setPopoverOpen] = useState<boolean>(false);
 
   const deleteFromState = (category: string, stateProp: FilterState): FilterState => {
@@ -77,9 +67,15 @@ const Filter = (props: FilterProps) => {
     if (isInited.current === false) {
       return;
     }
-    let newState = { ...state };
+    let newState = { ...cleanState };
     if (value && value.length > 0) {
       newState[category] = value;
+      const dependents = getDependents(data, category, filtersDependOn);
+      if (dependents.length) {
+        dependents.forEach((key) => {
+          newState = deleteFromState(key, newState);
+        });
+      }
     } else if (newState[category]) {
       newState = deleteFromState(category, newState);
     }
@@ -87,7 +83,7 @@ const Filter = (props: FilterProps) => {
   };
 
   const onFilterClear = (category: string) => {
-    onChange(deleteFromState(category, state));
+    onChange(deleteFromState(category, cleanState));
   };
 
   const onClearFilters = () => {
@@ -106,21 +102,21 @@ const Filter = (props: FilterProps) => {
     filters[value.type || 'tag'][category] = value;
   });
 
-  const stateCategories = Object.keys(state).filter((c) => !['date_range', 'search'].includes(c));
+  const stateCategories = Object.keys(cleanState).filter((c) => !['date_range', 'search'].includes(c));
 
-  const showClearFilters = stateCategories.length > 0 || (state.search && state.search.length > 0);
+  const showClearFilters = stateCategories.length > 0 || (cleanState.search && cleanState.search.length > 0);
 
   const contextValue: FilterContextType = useMemo(
     () => ({
-      data: initialData,
+      data,
       filtersDependOn,
       isLoading,
       onFilterChange,
       onFilterClear,
       setPopoverOpen,
-      state,
+      state: cleanState,
     }),
-    [filtersDependOn, isLoading, initialData, onFilterChange, onFilterClear, setPopoverOpen, state],
+    [data, filtersDependOn, isLoading, onFilterChange, onFilterClear, setPopoverOpen, cleanState],
   );
 
   useEffect(() => {
@@ -150,7 +146,7 @@ const Filter = (props: FilterProps) => {
             <FilterItem key={category} category={category} />
           ))}
           {Object.keys(filters.tag).map((category) => {
-            if (!state[category]) {
+            if (!cleanState[category]) {
               return;
             }
             return <FilterItem key={category} category={category} />;
@@ -175,7 +171,9 @@ const Filter = (props: FilterProps) => {
             {showClearFilters && showSearch && (
               <Divider flexShrink="0" orientation="vertical" size="1" variant="solid" />
             )}
-            {showSearch && <FilterSearch onChange={onFilterChange} value={(state.Search && state.Search[0]) || ''} />}
+            {showSearch && (
+              <FilterSearch onChange={onFilterChange} value={(cleanState.Search && cleanState.Search[0]) || ''} />
+            )}
           </Box>
         )}
       </Box>

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

@@ -152,7 +152,7 @@ const FilterForm = (props: FilterFormProps) => {
                 return (
                   <Radio key={opt} value={opt}>
                     {hasIcon ? (
-                      <Box alignItems="center" as="span" display="flex" gap="4">
+                      <Box as="span" display="flex" gap="4">
                         <Icon name={iconsMap[opt]} />
                         {label}
                       </Box>