@bitrise/bitkit 12.109.1-alpha.0 → 12.110.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.109.1-alpha.0",
+  "version": "12.110.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -13,7 +13,6 @@
     "create-theme-from-tokens": "node ./scripts/createThemeFromTokens.js",
     "lint": "eslint src --ext ts,tsx",
     "lint:fix": "eslint src --ext ts,tsx --fix",
-    "postinstall": "npm run theme",
     "release": "release-it minor --ci",
     "release-alpha": "release-it --preRelease=alpha --ci",
     "start": "npm run storybook",

package/src/Components/Filter/Filter.tsx

@@ -22,31 +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;
   showSearch?: boolean;
-  state: FilterState;
 }
 
 const Filter = (props: FilterProps) => {
-  const { data, filtersDependOn, isLoading, onChange, showSearch, state, ...rest } = props;
+  const { filtersDependOn, initialData, initialState, isLoading, onChange, 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,7 +67,7 @@ const Filter = (props: FilterProps) => {
     if (isInited.current === false) {
       return;
     }
-    let newState = { ...cleanState };
+    let newState = { ...state };
     if (value && value.length > 0) {
       newState[category] = value;
     } else if (newState[category]) {
@@ -76,7 +77,7 @@ const Filter = (props: FilterProps) => {
   };
 
   const onFilterClear = (category: string) => {
-    onChange(deleteFromState(category, cleanState));
+    onChange(deleteFromState(category, state));
   };
 
   const onClearFilters = () => {
@@ -95,21 +96,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(() => {
@@ -139,7 +140,7 @@ 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} />;
@@ -164,9 +165,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>