@bitrise/bitkit 12.110.1-alpha.0 → 12.111.0

package/package.json

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

package/src/Components/Filter/Filter.tsx

@@ -22,31 +22,42 @@ 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 { data, filtersDependOn, isLoading, onChange, showSearch, state, ...rest } = props;
+  const {
+    filtersDependOn,
+    initialData,
+    initialState,
+    isLoading,
+    onChange,
+    showAdd = true,
+    showSearch,
+    ...rest
+  } = props;
 
   const isInited = useRef<boolean>(false);
 
   const filterStyle = useMultiStyleConfig('Filter') as FilterStyle;
 
-  const cleanState: FilterState = {};
-  Object.entries(state).forEach(([category, values]) => {
+  const state: FilterState = {};
+  Object.entries(initialState).forEach(([category, values]) => {
     if (values?.length) {
       const cleanValues = values.filter((v) => v !== null && v !== '' && v !== undefined);
       if (cleanValues.length) {
-        cleanState[category] = cleanValues;
+        state[category] = cleanValues;
       }
     }
   });
 
+  const [data] = useState<FilterData>(initialData);
   const [isPopoverOpen, setPopoverOpen] = useState<boolean>(false);
 
   const deleteFromState = (category: string, stateProp: FilterState): FilterState => {
@@ -66,15 +77,9 @@ const Filter = (props: FilterProps) => {
     if (isInited.current === false) {
       return;
     }
-    let newState = { ...cleanState };
+    let newState = { ...state };
     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);
     }
@@ -82,7 +87,7 @@ const Filter = (props: FilterProps) => {
   };
 
   const onFilterClear = (category: string) => {
-    onChange(deleteFromState(category, cleanState));
+    onChange(deleteFromState(category, state));
   };
 
   const onClearFilters = () => {
@@ -101,21 +106,21 @@ const Filter = (props: FilterProps) => {
     filters[value.type || 'tag'][category] = value;
   });
 
-  const stateCategories = Object.keys(cleanState).filter((c) => !['date_range', 'search'].includes(c));
+  const stateCategories = Object.keys(state).filter((c) => !['date_range', 'search'].includes(c));
 
-  const showClearFilters = stateCategories.length > 0 || (cleanState.search && cleanState.search.length > 0);
+  const showClearFilters = stateCategories.length > 0 || (state.search && state.search.length > 0);
 
   const contextValue: FilterContextType = useMemo(
     () => ({
-      data,
+      data: initialData,
       filtersDependOn,
       isLoading,
       onFilterChange,
       onFilterClear,
       setPopoverOpen,
-      state: cleanState,
+      state,
     }),
-    [data, filtersDependOn, isLoading, onFilterChange, onFilterClear, setPopoverOpen, cleanState],
+    [filtersDependOn, isLoading, initialData, onFilterChange, onFilterClear, setPopoverOpen, state],
   );
 
   useEffect(() => {
@@ -145,13 +150,13 @@ const Filter = (props: FilterProps) => {
             <FilterItem key={category} category={category} />
           ))}
           {Object.keys(filters.tag).map((category) => {
-            if (!cleanState[category]) {
+            if (!state[category]) {
               return;
             }
             return <FilterItem key={category} category={category} />;
           })}
 
-          <FilterAdd onChange={onFilterChange} />
+          {showAdd && <FilterAdd onChange={onFilterChange} />}
         </Box>
         {(showClearFilters || showSearch) && (
           <Box sx={filterStyle.rightContent}>
@@ -170,9 +175,7 @@ const Filter = (props: FilterProps) => {
             {showClearFilters && showSearch && (
               <Divider flexShrink="0" orientation="vertical" size="1" variant="solid" />
             )}
-            {showSearch && (
-              <FilterSearch onChange={onFilterChange} value={(cleanState.Search && cleanState.Search[0]) || ''} />
-            )}
+            {showSearch && <FilterSearch onChange={onFilterChange} value={(state.Search && state.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 as="span" display="flex" gap="4">
+                      <Box alignItems="center" as="span" display="flex" gap="4">
                         <Icon name={iconsMap[opt]} />
                         {label}
                       </Box>