diff --git a/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.js b/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx
similarity index 96%
rename from packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.js
rename to packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx
index 1b90cad6f8..3a32d9371e 100644
--- a/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.js
+++ b/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.test.tsx
@@ -41,7 +41,7 @@ describe('', () => {
'aria-disabled',
'true',
);
- fireEvent.click(rendered.queryByText('Some label'));
+ fireEvent.click(rendered.queryByText('Some label') as Node);
expect(onClickFunction).toHaveBeenCalled();
// We do not expect the dropdown to disappear after click
expect(rendered.queryByText('Some label')).toBeInTheDocument();
@@ -84,7 +84,7 @@ describe('', () => {
expect(onClickFunction).not.toHaveBeenCalled();
fireEvent.click(rendered.getByTestId('header-action-menu'));
expect(onClickFunction).not.toHaveBeenCalled();
- fireEvent.click(rendered.queryByText('Secondary label'));
+ fireEvent.click(rendered.queryByText('Secondary label') as Node);
expect(onClickFunction).toHaveBeenCalled();
// We do not expect the dropdown to disappear after click
expect(rendered.queryByText('Some label')).toBeInTheDocument();
diff --git a/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.js b/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.tsx
similarity index 75%
rename from packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.js
rename to packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.tsx
index 409338caeb..4799654cee 100644
--- a/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.js
+++ b/packages/core/src/layout/HeaderActionMenu/HeaderActionMenu.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import React, { Fragment } from 'react';
+import React, { Fragment, ReactElement, FC, ComponentType } from 'react';
import {
IconButton,
List,
@@ -22,10 +22,20 @@ import {
ListItemIcon,
ListItemText,
Popover,
+ ListItemTextProps,
} from '@material-ui/core';
import { default as KebabMenuIcon } from './MenuVertical';
-const ActionItem = ({
+type ActionItemProps = {
+ label?: ListItemTextProps['primary'];
+ secondaryLabel?: ListItemTextProps['secondary'];
+ icon?: ReactElement;
+ disabled?: boolean;
+ onClick?: (event: React.MouseEvent) => void;
+ WrapperComponent?: ComponentType;
+};
+
+const ActionItem: FC = ({
label,
secondaryLabel,
icon,
@@ -52,7 +62,11 @@ const ActionItem = ({
);
};
-const HeaderActionMenu = ({ actionItems }) => {
+export type HeaderActionMenuProps = {
+ actionItems: ActionItemProps[];
+};
+
+const HeaderActionMenu: FC = ({ actionItems }) => {
const [open, setOpen] = React.useState(false);
const anchorElRef = React.useRef(null);
@@ -80,8 +94,10 @@ const HeaderActionMenu = ({ actionItems }) => {
onClose={() => setOpen(false)}
>
- {actionItems.map(actionItem => {
- return ;
+ {actionItems.map((actionItem, i) => {
+ return (
+
+ );
})}