@griddo/ax 11.10.16 → 11.10.17-rc.1

package/src/modules/MediaGallery/index.tsx

@@ -1,25 +1,27 @@
-import React, { useRef, useEffect, useState, useCallback, useLayoutEffect } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
 import {
+	BackFolder,
 	Button,
 	EmptyState,
 	ErrorToast,
+	FilterTagsBar,
 	Icon,
 	IconAction,
-	MainWrapper,
-	TableList,
 	Loading,
-	Tooltip,
-	Toast,
+	MainWrapper,
 	Modal,
-	Tabs,
-	BackFolder,
 	SearchField,
 	SearchTagsBar,
-	FilterTagsBar,
+	TableList,
+	Tabs,
+	Toast,
+	Tooltip,
 } from "@ax/components";
-import {
+import { galleryActions } from "@ax/containers/Gallery";
+import { useBulkSelection, useIsDirty, useModal, usePermission, useResizable, useToast } from "@ax/hooks";
+import type {
 	IBulkAction,
 	IFolder,
 	IFolderTree,
@@ -30,26 +32,24 @@ import {
 	IRootState,
 	ISite,
 } from "@ax/types";
-import { useBulkSelection, useIsDirty, useModal, usePermission, useResizable, useToast } from "@ax/hooks";
-import { galleryActions } from "@ax/containers/Gallery";
 
-import GridItem from "./GridItem";
-import ListItem from "./ListItem";
+import { DeleteFileModal, MoveItemModal, NewFolderModal, NotSavedModal } from "./atoms";
+import Breadcrumb from "./Breadcrumb";
+import BulkGridHeader from "./BulkGridHeader";
 import BulkListHeader from "./BulkListHeader";
 import FolderItem from "./FolderItem";
-import Breadcrumb from "./Breadcrumb";
 import FolderTree from "./FolderTree";
-import ImageDragAndDrop from "./ImageDragAndDrop";
-import ImageModal from "./ImageModal";
-import BulkGridHeader from "./BulkGridHeader";
-import { DeleteFileModal, MoveItemModal, NewFolderModal, NotSavedModal } from "./atoms";
+import GridItem from "./GridItem";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
-import { getSortedListStatus } from "./utils";
-import Type from "./ImageFilters/Type";
-import SortBy from "./ImageFilters/SortBy";
+import ImageDragAndDrop from "./ImageDragAndDrop";
 import Orientation from "./ImageFilters/Orientation";
+import SortBy from "./ImageFilters/SortBy";
+import Type from "./ImageFilters/Type";
 import UsageFilter from "./ImageFilters/Usage";
+import ImageModal from "./ImageModal";
+import ListItem from "./ListItem";
 import UploadItem from "./UploadItem";
+import { getSortedListStatus } from "./utils";
 
 import * as S from "./style";
 
@@ -166,12 +166,12 @@ const MediaGallery = (props: IProps) => {
 			folderID: currentFolderID,
 			search: searchQuery,
 			query: filterQuery,
-			loading: isGrid && page > 1 ? false : true,
+			loading: !(isGrid && page > 1),
 			thumbHeight: 188,
 			pagination: true,
 			page,
 			itemsPerPage,
-			infinite: isGrid && page > 1 ? true : false,
+			infinite: isGrid && page > 1,
 		};
 
 		return params;
@@ -512,6 +512,7 @@ const MediaGallery = (props: IProps) => {
 			selectItems={selectItems}
 			bulkActions={bulkActions}
 			setHoverCheck={setHoverCheck}
+			selectedItems={selectedItems}
 		/>
 	);
 
@@ -671,7 +672,7 @@ const MediaGallery = (props: IProps) => {
 			<Orientation filterItems={filterItems} />
 			<Type filterItems={filterItems} />
 			<SortBy sortItems={sortItems} sortedState={sortedListStatus} />
-			<UsageFilter filterItems={filterItems} value={filterValues["usage"]} />
+			<UsageFilter filterItems={filterItems} value={filterValues.usage} />
 		</S.Filters>
 	);
 
@@ -770,6 +771,7 @@ const MediaGallery = (props: IProps) => {
 											totalItems={totalItems}
 											selectItems={selectItems}
 											bulkActions={bulkActions}
+											selectedItems={selectedItems}
 										/>
 									)}
 									{!hasFolders && isRoot && !isSearching && <NewFolderButton />}
@@ -777,7 +779,7 @@ const MediaGallery = (props: IProps) => {
 								{(totalItems > 0 || progressItems.items.length > 0) && (
 									<S.DocumentsWrapper>{isGrid ? gridList : listTable}</S.DocumentsWrapper>
 								)}
-								{totalItems === 0 && progressItems.items.length == 0 && !hasFolders && (
+								{totalItems === 0 && progressItems.items.length === 0 && !hasFolders && (
 									<S.EmptyStateWrapper data-testid="empty-state" margin={!isRoot}>
 										{isSearching && <EmptyState {...emptySearchStateProps} />}
 										{!isSearching && isRoot && <EmptyState {...emptyProps} />}

package/src/modules/Navigation/Defaults/BulkHeader/TableHeader/style.tsx

@@ -1,12 +1,14 @@
-import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: ${(p) => p.theme.spacing.m};
+  align-items: center;
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  min-height: 40px;
 `;
 
 const CheckHeader = styled(Header)`
@@ -15,7 +17,7 @@ const CheckHeader = styled(Header)`
 `;
 
 const NameHeader = styled(Header)`
-  width: 70%;
+  width: 60%;
 `;
 
 const DefaultHeader = styled(Header)`
@@ -28,7 +30,7 @@ const TransHeader = styled(Header)`
 `;
 
 const ActionsHeader = styled(Header)`
-  width: 125px;
+  width: 92px;
   padding-right: 0;
 `;
 

package/src/modules/Navigation/Defaults/BulkHeader/index.tsx

@@ -1,10 +1,20 @@
-import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
+import type { IBulkSelectedItems } from "@ax/hooks";
+
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
-	const { showBulk, checkState, bulkActions, selectItems, selectAllItems, totalItems, isScrolling, setHoverCheck } =
-		props;
+	const {
+		showBulk,
+		checkState,
+		bulkActions,
+		selectItems,
+		selectAllItems,
+		totalItems,
+		isScrolling,
+		setHoverCheck,
+		selectedItems,
+	} = props;
 
 	return showBulk ? (
 		<BulkSelectionOptions
@@ -12,6 +22,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			actions={bulkActions}
 			selectItems={selectItems}
 			totalItems={totalItems}
+			selectedItems={selectedItems}
 		/>
 	) : (
 		<TableHeader
@@ -33,6 +44,7 @@ interface IProps {
 	totalItems: number;
 	isScrolling: boolean;
 	setHoverCheck: (state: boolean) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkHeader;

package/src/modules/Navigation/Defaults/index.tsx

@@ -1,20 +1,18 @@
-import React, { useEffect, useCallback, useState, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
+import { ErrorToast, MainWrapper, Notification, TableList, Toast } from "@ax/components";
 import { appActions } from "@ax/containers/App";
-import { menuActions } from "@ax/containers/Navigation";
-import { IRootState, IHeader, IFooter, ISite, ILanguage } from "@ax/types";
-import { useBulkSelection, usePermission, useToast, useModal } from "@ax/hooks";
+import { menuActions, navigationActions } from "@ax/containers/Navigation";
 import { capitalize, isMultipleNavigationModules } from "@ax/helpers";
-import { navigationActions } from "@ax/containers/Navigation";
-import { MainWrapper, TableList, ErrorToast, Toast, Notification } from "@ax/components";
+import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
+import type { IFooter, IHeader, ILanguage, IRootState, ISite } from "@ax/types";
 
+import { NavigationModulesWarning } from "./atoms";
+import BulkHeader from "./BulkHeader";
 import DefaultItem from "./Item";
 import DefaultNav from "./Nav";
-import BulkHeader from "./BulkHeader";
-import { NavigationModulesWarning } from "./atoms";
 import ReplaceNavModal from "./ReplaceNavModal";
-
 import * as S from "./style";
 
 const DefaultsList = (props: IProps): JSX.Element => {
@@ -210,6 +208,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
 			selectAllItems={handleSelectAll}
 			totalItems={totalItems}
 			selectItems={selectItems}
+			selectedItems={selectedItems}
 			checkState={checkState}
 			isScrolling={isScrolling}
 			setHoverCheck={setHoverCheck}

package/src/modules/Redirects/BulkHeader/TableHeader/style.tsx

@@ -1,12 +1,14 @@
-import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: ${(p) => p.theme.spacing.m};
+  align-items: center;
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  min-height: 40px;
 `;
 
 const CheckHeader = styled(Header)`

package/src/modules/Redirects/BulkHeader/index.tsx

@@ -1,6 +1,8 @@
-import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
-import { IQueryValue } from "@ax/types";
+import type { IQueryValue } from "@ax/types";
+
+import { IBulkSelectedItems } from "src/hooks/bulk";
+
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
@@ -18,6 +20,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		sortItems,
 		sortedListStatus,
 		setHoverCheck,
+		selectedItems,
 	} = props;
 
 	const bulkActions = [
@@ -34,6 +37,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			actions={bulkActions}
 			selectItems={selectItems}
 			totalItems={totalItems}
+			selectedItems={selectedItems}
 		/>
 	) : (
 		<TableHeader
@@ -65,6 +69,7 @@ interface IProps {
 	sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
 	sortedListStatus: { isAscending: boolean; sortedByDate: boolean };
 	setHoverCheck: (state: boolean) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkHeader;

package/src/modules/Redirects/index.tsx

@@ -1,29 +1,28 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { IEmptyStateProps, INavItem, IQueryValue, IRedirect, IRootState, ISite } from "@ax/types";
-import { appActions } from "@ax/containers/App";
-import { redirectsActions } from "@ax/containers/Redirects";
 import {
-	MainWrapper,
+	EmptyState,
 	ErrorToast,
+	FilterTagsBar,
+	MainWrapper,
 	Nav,
+	SearchTagsBar,
 	TableList,
-	EmptyState,
 	Toast,
-	SearchTagsBar,
-	FilterTagsBar,
 } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { redirectsActions } from "@ax/containers/Redirects";
 import { useBulkSelection, useModal, useToast } from "@ax/hooks";
+import type { IEmptyStateProps, INavItem, IQueryValue, IRedirect, IRootState, ISite } from "@ax/types";
 
+import { DeleteModal, ImportCheckModal, ImportModal, OverwriteModal } from "./atoms";
 import BulkHeader from "./BulkHeader";
+import { useFilterQuery, useSortedListStatus } from "./hooks";
 import RedirectItem from "./RedirectItem";
 import RedirectPanel from "./RedirectPanel";
-import { DeleteModal, ImportCheckModal, ImportModal, OverwriteModal } from "./atoms";
-import { getSortedListStatus } from "./utils";
-import { useSortedListStatus, useFilterQuery } from "./hooks";
-
 import * as S from "./style";
+import { getSortedListStatus } from "./utils";
 
 const Redirects = (props: IProps): JSX.Element => {
 	const {
@@ -174,6 +173,7 @@ const Redirects = (props: IProps): JSX.Element => {
 			sortItems={sortItems}
 			sortedListStatus={sortedListStatus}
 			setHoverCheck={setHoverCheck}
+			selectedItems={selectedItems}
 		/>
 	);
 

package/src/modules/Settings/Integrations/BulkHeader/TableHeader/style.tsx

@@ -1,12 +1,14 @@
-import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: ${(p) => p.theme.spacing.m};
+  align-items: center;
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  min-height: 40px;
 `;
 
 const CheckHeader = styled(Header)`

package/src/modules/Settings/Integrations/BulkHeader/index.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
-import { IQueryValue } from "@ax/types";
+import type { IBulkSelectedItems } from "@ax/hooks";
+import type { IQueryValue } from "@ax/types";
 
 import TableHeader from "./TableHeader";
 
@@ -16,6 +16,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		filterValues,
 		bulkActions,
 		setHoverCheck,
+		selectedItems,
 	} = props;
 
 	return showBulk ? (
@@ -24,6 +25,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			actions={bulkActions}
 			selectItems={selectItems}
 			totalItems={totalItems}
+			selectedItems={selectedItems}
 		/>
 	) : (
 		<TableHeader
@@ -49,6 +51,7 @@ interface IProps {
 	filterValues: Record<string, IQueryValue[]>;
 	bulkActions: { icon: string; text: string; action: () => void }[];
 	setHoverCheck: (state: boolean) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkHeader;

package/src/modules/Settings/Integrations/index.tsx

@@ -1,27 +1,28 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
+
+import { EmptyState, ErrorToast, FilterTagsBar, MainWrapper, TableList, Toast } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { integrationsActions } from "@ax/containers/Integrations";
+import { useBulkSelection, useEmptyState, useModal, usePermission, useToast } from "@ax/hooks";
+import type { IEmptyStateProps, IIntegration, IQueryValue, IRootState } from "@ax/types";
+
 import {
 	closestCenter,
 	DndContext,
-	DragEndEvent,
+	type DragEndEvent,
 	KeyboardSensor,
 	PointerSensor,
-	UniqueIdentifier,
+	type UniqueIdentifier,
 	useSensor,
 	useSensors,
 } from "@dnd-kit/core";
 import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
-import { IEmptyStateProps, IIntegration, IQueryValue, IRootState } from "@ax/types";
-import { MainWrapper, ErrorToast, TableList, EmptyState, Toast, FilterTagsBar } from "@ax/components";
-import { integrationsActions } from "@ax/containers/Integrations";
-import { appActions } from "@ax/containers/App";
-import { useBulkSelection, useEmptyState, useModal, usePermission, useToast } from "@ax/hooks";
-
+import { DeactivateModal, DeleteModal } from "./atoms";
 import BulkHeader from "./BulkHeader";
-import IntegrationItem from "./IntegrationItem";
 import { useFilterQuery } from "./hooks";
-import { DeactivateModal, DeleteModal } from "./atoms";
+import IntegrationItem from "./IntegrationItem";
 
 import * as S from "./style";
 
@@ -86,11 +87,9 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 	const fetchState = { isLoading, isFiltered };
 	const { isEmpty, emptyStateProps } = useEmptyState(integrations, fetchState, { noElementsProps });
 
-	const filteredIntegrationsIds =
-		integrations &&
-		integrations
-			.filter((integration: IIntegration) => integration.editable)
-			.map((integration: IIntegration) => integration.id);
+	const filteredIntegrationsIds = integrations
+		?.filter((integration: IIntegration) => integration.editable)
+		.map((integration: IIntegration) => integration.id);
 
 	const integrationsIds = integrations.map((integration: IIntegration) => integration.id as UniqueIdentifier);
 
@@ -185,6 +184,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 			filterValues={filterValues}
 			bulkActions={bulkActions}
 			setHoverCheck={setHoverCheck}
+			selectedItems={selectedItems}
 		/>
 	);
 

package/src/modules/Sites/SitesList/ListView/BulkHeader/TableHeader/style.tsx

@@ -1,13 +1,14 @@
-import styled from "styled-components";
-
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: ${(p) => p.theme.spacing.m};
+  align-items: center;
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  min-height: 40px;
 `;
 
 const HeaderWrapper = styled.div`

package/src/modules/Sites/SitesList/ListView/BulkHeader/index.tsx

@@ -1,8 +1,7 @@
-import React from "react";
-
 import { BulkSelectionOptions } from "@ax/components";
+import type { IBulkSelectedItems } from "@ax/hooks";
 import { usePermission } from "@ax/hooks";
-import { IQueryValue } from "@ax/types";
+import type { IQueryValue } from "@ax/types";
 
 import TableHeader from "./TableHeader";
 
@@ -22,6 +21,7 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
 		sortedListStatus,
 		filterValues,
 		setHoverCheck,
+		selectedItems,
 	} = props;
 
 	const allowedToPublishSite = usePermission("general.publishSite");
@@ -53,6 +53,7 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
 				actions={actions}
 				selectItems={selectItems}
 				totalItems={totalItems}
+				selectedItems={selectedItems}
 			/>
 		</S.BulkWrapper>
 	) : (
@@ -83,6 +84,7 @@ export interface IBulkHeaderProps {
 	sortedListStatus: any;
 	filterValues: Record<string, IQueryValue[]>;
 	setHoverCheck: (state: boolean) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkHeader;

package/src/modules/Sites/SitesList/ListView/BulkHeader/style.tsx

@@ -2,7 +2,9 @@ import styled from "styled-components";
 
 export const BulkWrapper = styled.div`
   width: 100%;
-  span {
-    margin-left: ${(p) => p.theme.spacing.xs};
+  /* only modify the first div inside BulkWrapper (the checkbox) */
+  & > div:first-child {
+    padding-left: ${({ theme }) => theme.spacing.s};
   }
+
 `;

package/src/modules/Sites/SitesList/index.tsx

@@ -1,36 +1,42 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { appActions } from "@ax/containers/App";
-import { sitesActions } from "@ax/containers/Sites";
-import { ICheck, IGetSitesParams, IQueryValue, IRootState, ISettingsForm, ISite, ISiteListConfig } from "@ax/types";
-import { IError } from "@ax/containers/App/reducer";
-import { useBulkSelection, useModal, usePermission } from "@ax/hooks";
 import {
-	MainWrapper,
-	Modal,
+	EmptyState,
 	ErrorToast,
+	FilterTagsBar,
 	Icon,
 	IconAction,
-	TableList,
-	EmptyState,
+	Loading,
+	MainWrapper,
+	Modal,
 	Pagination,
 	SearchTagsBar,
-	FilterTagsBar,
-	Loading,
+	TableList,
 } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import type { IError } from "@ax/containers/App/reducer";
+import { sitesActions } from "@ax/containers/Sites";
+import { useBulkSelection, useModal, usePermission } from "@ax/hooks";
+import type {
+	ICheck,
+	IGetSitesParams,
+	IQueryValue,
+	IRootState,
+	ISettingsForm,
+	ISite,
+	ISiteListConfig,
+} from "@ax/types";
 
-import { useFilterQuery, useSortedListStatus, useIsMount } from "./hooks";
-import { filterByStatus, getSortedListStatus } from "./utils";
-
-import SiteModal from "./SiteModal";
-import RecentSiteItem from "./RecentSiteItem";
 import GridHeaderFilter from "./GridView/GridHeaderFilter";
 import GridSiteItem from "./GridView/GridSiteItem";
+import { useFilterQuery, useIsMount, useSortedListStatus } from "./hooks";
 import BulkHeader from "./ListView/BulkHeader";
 import ListSiteItem from "./ListView/ListSiteItem";
-
+import RecentSiteItem from "./RecentSiteItem";
+import SiteModal from "./SiteModal";
 import * as S from "./style";
+import { filterByStatus, getSortedListStatus } from "./utils";
 
 const SitesList = (props: ISitesListProps): JSX.Element => {
 	const {
@@ -294,6 +300,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 			filterItems={filterItems}
 			filterValues={currentConfig.filterValues}
 			setHoverCheck={setHoverCheck}
+			selectedItems={selectedItems}
 		/>
 	);
 

package/src/modules/StructuredData/StructuredDataList/BulkHeader/TableHeader/style.tsx

@@ -1,12 +1,14 @@
-import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const TableHeader = styled.div<{ isScrolling?: boolean }>`
   width: 100%;
   display: flex;
   flex-direction: row;
-  padding: ${(p) => p.theme.spacing.m};
+  align-items: center;
   border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+  min-height: 40px;
 `;
 
 const CheckHeader = styled(Header)`

package/src/modules/StructuredData/StructuredDataList/BulkHeader/index.tsx

@@ -1,7 +1,8 @@
-import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
-import { IColumn, IQueryValue, ISchemaField, IStructuredDataSortedInitialState } from "@ax/types";
+import type { IBulkSelectedItems } from "@ax/hooks";
 import { usePermission } from "@ax/hooks";
+import type { IColumn, IQueryValue, ISchemaField, IStructuredDataSortedInitialState } from "@ax/types";
+
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
@@ -28,6 +29,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 		maxColumns,
 		exportAction,
 		setHoverCheck,
+		selectedItems,
 	} = props;
 
 	const isAllowedToPublishPages = usePermission("global.globalData.publishUnpublishAllGlobalData");
@@ -64,6 +66,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
 			selectItems={selectItems}
 			totalItems={totalItems}
 			exportAction={exportAction}
+			selectedItems={selectedItems}
 		/>
 	) : (
 		<TableHeader
@@ -109,6 +112,7 @@ interface IProps {
 	maxColumns: { value: number; text: string };
 	exportAction?(formats: (number | string)[]): void;
 	setHoverCheck: (state: boolean) => void;
+	selectedItems: IBulkSelectedItems;
 }
 
 export default BulkHeader;