[CLICK-933] [CLICK-947] ZIndex fix + extended DropdownMenuItem and ProductMenuItem interfaces

dist/lib/components/flex-box/flex-box.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { BaseProps } from '../../types';
-export interface FlexBoxProps extends BaseProps {
+type NativeDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, keyof BaseProps>;
+export interface FlexBoxProps extends BaseProps, NativeDivProps {
     itemsSpacing?: number;
     innerRef?: React.Ref<HTMLDivElement>;
     gap?: React.CSSProperties['gap'];

dist/lib/components/nav-link/nav-link.d.ts

@@ -1,7 +1,8 @@
 import { default as React } from 'react';
 import { ActivableProps, BaseProps } from '../../types';
 type Ref = HTMLAnchorElement;
-export interface NavLinkProps extends BaseProps, ActivableProps {
+type NativeAnchorProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseProps | keyof ActivableProps>;
+export interface NavLinkProps extends BaseProps, ActivableProps, NativeAnchorProps {
     disabled?: boolean;
     target?: string;
     href?: string;

dist/lib/components/navigation/cspr-products-menu/products-menu-item.d.ts

@@ -9,6 +9,8 @@ export interface ProductsMenuItemProps {
     link: string;
     icon: string;
     badge?: BadgeProps;
+    tabIndex?: number;
+    role?: string;
 }
 export declare enum ThemeModeType {
     light = "light",
@@ -18,7 +20,7 @@ export declare const ProductItemWrapper: import('styled-components').StyledCompo
     isOpen?: boolean;
     selected?: boolean;
     disabled: boolean;
-}, never>;
+} & React.HTMLAttributes<HTMLSpanElement>, never>;
 export declare const StyledBodyText: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<import('../../..').BodyTextProps & React.RefAttributes<HTMLSpanElement>>, import('styled-components').DefaultTheme, {}, never>;
 export declare const ProductsMenuItem: React.ForwardRefExoticComponent<ProductsMenuItemProps & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=products-menu-item.d.ts.map

dist/lib/components/navigation/dropdown-menu/dropdown-menu-item.d.ts

@@ -1,10 +1,7 @@
 import { default as React } from 'react';
-interface DropdownMenuItemProps {
-    onClick?: () => void;
+export interface DropdownMenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
     padding?: string;
+    children?: React.ReactNode;
 }
-export declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;
-export {};
+export declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLLIElement>>;
 //# sourceMappingURL=dropdown-menu-item.d.ts.map

src/lib/components/confirmation-window/confirmation-window.tsx

@@ -149,9 +149,10 @@ export const ConfirmationWindow = ({
   const theme = useTheme();
 
   const modalStyle = {
+
     overlay: {
       backgroundColor: theme.styleguideColors.backgroundOverlay,
-      zIndex: 15,
+      zIndex: 20,
     },
     content:
       position === ModalPosition.TopRight

src/lib/components/flex-box/flex-box.tsx

@@ -3,8 +3,12 @@ import styled from 'styled-components';
 
 import { BaseProps } from '../../types';
 
+type NativeDivProps = Omit<
+    React.HTMLAttributes<HTMLDivElement>,
+    keyof BaseProps
+>;
 /* eslint-disable-next-line */
-export interface FlexBoxProps extends BaseProps {
+export interface FlexBoxProps extends BaseProps, NativeDivProps {
   /* @description will add spacing between children, work depending on row/column layout */
   itemsSpacing?: number;
   innerRef?: React.Ref<HTMLDivElement>;

src/lib/components/nav-link/nav-link.tsx

@@ -5,7 +5,14 @@ import { ActivableProps, BaseProps } from '../../types';
 
 type Ref = HTMLAnchorElement;
 
-export interface NavLinkProps extends BaseProps, ActivableProps {
+type NativeAnchorProps = Omit<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    keyof BaseProps | keyof ActivableProps
+>;
+
+export interface NavLinkProps extends BaseProps,
+    ActivableProps,
+    NativeAnchorProps {
   disabled?: boolean;
   target?: string;
   href?: string;

src/lib/components/navigation/cspr-products-menu/products-menu-item.tsx

@@ -19,6 +19,8 @@ export interface ProductsMenuItemProps {
   link: string;
   icon: string;
   badge?: BadgeProps;
+  tabIndex?: number;
+  role?: string;
 }
 
 export enum ThemeModeType {
@@ -27,37 +29,34 @@ export enum ThemeModeType {
 }
 
 export const ProductItemWrapper = styled.span<{
-  isOpen?: boolean;
-  selected?: boolean;
-  disabled: boolean;
-}>(({ theme, isOpen, selected, disabled }) =>
-  theme.withMedia({
-    display: 'flex',
-    flex: '0 1 auto',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: ['8px 12px', '8px 12px', '16px'],
-    width: ['208px', '208px', '172px'],
-    height: ['56px', '56px', '137px'],
-
-    '&:hover': {
-      borderRadius: theme.borderRadius.base,
-      background: theme.styleguideColors.backgroundSecondary,
-    },
-
-    ...(selected && {
-      background: theme.styleguideColors.backgroundSecondary,
-      pointerEvents: 'none',
-    }),
-
-    ...(disabled && {
-      color: theme.styleguideColors.contentSecondary,
-      '&:hover > *': {
-        pointerEvents: 'none',
-        color: theme.styleguideColors.contentSecondary,
-      },
-    }),
-  })
+    isOpen?: boolean;
+    selected?: boolean;
+    disabled: boolean;
+} & React.HTMLAttributes<HTMLSpanElement>>(({ theme, isOpen, selected, disabled }) =>
+    theme.withMedia({
+        display: 'flex',
+        flex: '0 1 auto',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: ['8px 12px', '8px 12px', '16px'],
+        width: ['208px', '208px', '172px'],
+        height: ['56px', '56px', '137px'],
+        '&:hover': {
+            borderRadius: theme.borderRadius.base,
+            background: theme.styleguideColors.backgroundSecondary,
+        },
+        ...(selected && {
+            background: theme.styleguideColors.backgroundSecondary,
+            pointerEvents: 'none',
+        }),
+        ...(disabled && {
+            color: theme.styleguideColors.contentSecondary,
+            '&:hover > *': {
+                pointerEvents: 'none',
+                color: theme.styleguideColors.contentSecondary,
+            },
+        }),
+    })
 );
 
 export const StyledBodyText = styled(BodyText)<{}>(({ theme }) =>
@@ -139,6 +138,15 @@ export const ProductsMenuItem = React.forwardRef<Ref, ProductsMenuItemProps>(
         return (
             <ProductItemWrapper
                 onClick={() => !comingSoonBadgeLabel && window.open(link, '_blank')}
+                onKeyDown={(e) => {
+                    if (comingSoonBadgeLabel) return;
+
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        window.open(link, '_blank');
+                    }
+                }}
+                tabIndex={comingSoonBadgeLabel ? -1 : 0}
                 selected={selected}
                 disabled={!!comingSoonBadgeLabel}
                 {...props}

src/lib/components/navigation/dropdown-menu/dropdown-menu-item.tsx

@@ -2,7 +2,9 @@ import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import { FlexRow } from '../../flex-row/flex-row';
 
-type Ref = HTMLSpanElement;
+type Ref = HTMLLIElement;
+
+type NativeLiProps = React.LiHTMLAttributes<HTMLLIElement>;
 
 const ItemContainer = styled(FlexRow)<{ padding?: string }>(({ theme, padding }) => ({
   width: '100%',
@@ -14,34 +16,40 @@ const ItemContainer = styled(FlexRow)<{ padding?: string }>(({ theme, padding })
   },
 }));
 
-const MenuItemWrapper = styled.li(({ theme }) =>
-  theme.withMedia({
-    boxSizing: 'border-box',
-    display: 'flex',
-    color: theme.styleguideColors.contentPrimary,
-    '&:hover': {
-      cursor: 'pointer',
-      borderRadius: theme.borderRadius.base,
-      '> *': {
-        color: [theme.styleguideColors.contentBlue],
-        fill: [theme.styleguideColors.contentBlue],
-        background: theme.styleguideColors.fillSecondary,
-      },
-    },
-  })
+const MenuItemWrapper = styled.li<
+    React.LiHTMLAttributes<HTMLLIElement>
+>(({ theme }) =>
+    theme.withMedia({
+        boxSizing: 'border-box',
+        display: 'flex',
+        color: theme.styleguideColors.contentPrimary,
+        '&:hover': {
+            cursor: 'pointer',
+            borderRadius: theme.borderRadius.base,
+            '> *': {
+                color: [theme.styleguideColors.contentBlue],
+                fill: [theme.styleguideColors.contentBlue],
+                background: theme.styleguideColors.fillSecondary,
+            },
+        },
+    })
 );
 
-interface DropdownMenuItemProps {
-  onClick?: () => void;
-  padding?: string;
+export interface DropdownMenuItemProps
+    extends React.LiHTMLAttributes<HTMLLIElement> {
+    padding?: string;
+    children?: React.ReactNode;
 }
 
-export const DropdownMenuItem = React.forwardRef<Ref, PropsWithChildren<DropdownMenuItemProps>>(
-    function DropdownMenuItem(props, ref) {
-        return (
-            <MenuItemWrapper {...props} ref={ref}>
-                <ItemContainer padding={props.padding}>{props.children}</ItemContainer>
-            </MenuItemWrapper>
-        );
-    }
-);
+export const DropdownMenuItem = React.forwardRef<
+    HTMLLIElement,
+    DropdownMenuItemProps
+>(function DropdownMenuItem(props, ref) {
+    const { padding, children, ...rest } = props;
+
+    return (
+        <MenuItemWrapper {...rest} ref={ref}>
+            <ItemContainer padding={padding}>{children}</ItemContainer>
+        </MenuItemWrapper>
+    );
+});