@ltht-react/menu 2.0.168 → 2.0.170

package/src/molecules/action-menu.tsx

@@ -1,207 +1,21 @@
-import styled from '@emotion/styled'
-import Button, { ButtonProps } from '@ltht-react/button/lib/atoms/button'
-import Icon, { IconButton, IconProps } from '@ltht-react/icon'
-import { BTN_COLOURS, CSS_RESET, PopUp, TableDataWithPopUp, getZIndex } from '@ltht-react/styles'
-import FocusTrap from 'focus-trap-react'
-import { FC, HTMLAttributes, useRef, useState, useEffect } from 'react'
-import { usePopper } from 'react-popper'
+import { FC, HTMLAttributes, ReactNode } from 'react'
+import Icon, { IconProps } from '@ltht-react/icon'
 import { stringToHtmlId } from '@ltht-react/utils'
+import { ButtonProps } from '@ltht-react/button'
 
-const defaultMenuButtonProps: IconButtonMenuProps = {
-  type: 'icon',
-  iconProps: {
-    type: 'ellipsis-vertical',
-    size: 'large',
-  },
-}
-
-const StyledUnorderedList = styled.ul`
-  ${CSS_RESET}
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-`
-
-const StyledListItem = styled.li`
-  ${CSS_RESET}
-  background-color: 'white';
-  padding: 0.5rem;
-  line-height: 1em;
-  display: flex;
-  border-radius: 4px;
-
-  &:hover {
-    background: ${BTN_COLOURS.PRIMARY.VALUE};
-    cursor: pointer;
-    color: white;
-  }
-`
-
-const StyledListItemIcon = styled.div`
-  flex-basis: 25%;
-`
-
-const StyledListItemContent = styled.div`
-  flex: 1;
-  text-align: left;
-`
-
-const StyledCard = styled.div`
-  ${CSS_RESET}
-  display: inline-block;
-  min-width: 10rem;
-  z-index: 1;
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.04), 0px 4px 5px rgba(0, 0, 0, 0.06), 0px 2px 4px -1px rgba(0, 0, 0, 0.09);
-`
-
-const StyledRightIcon = styled(Icon)`
-  margin-right: 0.5rem;
-  margin-left: 3rem;
-`
-
-const StyledLeftIcon = styled(Icon)`
-  margin-right: 0.5rem;
-  margin-left: 0.5rem;
-`
-
-const StyledMenuButtonWrapper = styled.div`
-  display: inline-block;
-`
-
-const ActionMenu: FC<IProps> = ({
-  actions,
-  menuButtonOptions = defaultMenuButtonProps,
-  id = 'action-menu-button',
-  popupStyle = {},
-  popupPlacement = 'bottom-start',
-  ...rest
-}) => {
-  const menuItemIdPrefix = id ? `${id}-` : ''
-  const popperRef = useRef<HTMLDivElement>(null)
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
-  const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null)
-
-  const popper = usePopper(popperRef.current, popperElement, {
-    placement: popupPlacement,
-    strategy: 'fixed',
-  })
-
-  const closePopper = () => {
-    setShowMenu(false)
-  }
-
-  const [showMenu, setShowMenu] = useState(false)
-
-  useEffect(() => {
-    if (containerElement?.parentElement?.style) {
-      containerElement.parentElement.style.zIndex = showMenu
-        ? `${getZIndex(PopUp)}`
-        : `${getZIndex(TableDataWithPopUp)}`
-    }
-  }, [containerElement, showMenu])
-
-  const menuButtonClickHandler = () => {
-    setShowMenu(!showMenu)
-  }
-
-  return (
-    <div ref={setContainerElement}>
-      <FocusTrap
-        active={showMenu}
-        focusTrapOptions={{
-          tabbableOptions: {
-            displayCheck: 'none',
-          },
-          initialFocus: false,
-          allowOutsideClick: false,
-          clickOutsideDeactivates: true,
-          onDeactivate: closePopper,
-        }}
-      >
-        <StyledMenuButtonWrapper ref={popperRef}>
-          {menuButtonOptions.type === 'icon' && (
-            <IconButton
-              iconProps={menuButtonOptions.iconProps}
-              text={menuButtonOptions.text}
-              {...rest}
-              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                e.stopPropagation()
-                menuButtonClickHandler()
-              }}
-              id={id}
-              data-testid={id}
-            />
-          )}
-          {menuButtonOptions.type === 'button' && (
-            <Button
-              {...menuButtonOptions.buttonProps}
-              {...rest}
-              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                e.stopPropagation()
-                menuButtonClickHandler()
-              }}
-              id={id}
-              data-testid={id}
-            >
-              {menuButtonOptions.text}
-            </Button>
-          )}
-          {showMenu && (
-            <StyledCard
-              tabIndex={-1}
-              ref={setPopperElement}
-              style={{ ...popper.styles.popper, ...popupStyle }}
-              {...popper.attributes.popper}
-            >
-              <StyledUnorderedList role="menu" aria-labelledby={id}>
-                {actions.map((action, idx) => {
-                  const textId = stringToHtmlId(action.text)
-                  const actionMenuItemId = `${menuItemIdPrefix}action-menu-item-${textId}-${idx}`
-
-                  return (
-                    <StyledListItem
-                      data-testid={actionMenuItemId}
-                      id={actionMenuItemId}
-                      role="menuitem"
-                      key={`menu-action-${idx}`}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        menuButtonClickHandler()
-                        action.clickHandler()
-                      }}
-                    >
-                      <StyledListItemIcon>
-                        {action.leftIcon && <StyledLeftIcon {...action.leftIcon} />}
-                      </StyledListItemIcon>
-                      <StyledListItemContent>{action.text}</StyledListItemContent>
-                      <StyledListItemIcon>
-                        {action.rightIcon && <StyledRightIcon {...action.rightIcon} />}
-                      </StyledListItemIcon>
-                    </StyledListItem>
-                  )
-                })}
-              </StyledUnorderedList>
-            </StyledCard>
-          )}
-        </StyledMenuButtonWrapper>
-      </FocusTrap>
-    </div>
-  )
-}
+import { Menu, MenuItem } from './menu'
 
 interface IProps extends HTMLAttributes<HTMLButtonElement> {
   actions: ActionMenuOption[]
   menuButtonOptions?: IconButtonMenuProps | ButtonMenuProps
-  popupStyle?: React.CSSProperties
-  popupPlacement?: 'bottom-start' | 'right-start'
+  disabled?: boolean
 }
 
 interface IconButtonMenuProps {
   type: 'icon'
   iconProps: IconProps
   text?: string
+  disabled?: boolean
 }
 
 interface ButtonMenuProps {
@@ -210,11 +24,75 @@ interface ButtonMenuProps {
   text: string
 }
 
-export interface ActionMenuOption {
+export interface ActionMenuOption extends HTMLAttributes<HTMLButtonElement> {
   text: string
-  clickHandler: () => void
+  clickHandler?: VoidFunction
   leftIcon?: IconProps
   rightIcon?: IconProps
+  disabled?: boolean
+  actions?: ActionMenuOption[]
+}
+
+export const DefaultTrigger: IconButtonMenuProps = {
+  type: 'icon',
+  iconProps: {
+    type: 'ellipsis-vertical',
+    size: 'large',
+  },
+}
+
+const ActionMenu: FC<IProps> = ({
+  id = 'action-menu-button',
+  actions,
+  disabled,
+  menuButtonOptions = { ...DefaultTrigger, disabled },
+  ...rest
+}) => {
+  const menuItemIdPrefix = id ? `${id}-` : ''
+
+  return (
+    <Menu rootTrigger={menuButtonOptions} data-testid={id} {...rest}>
+      {actions.map((action, index) => renderAction(menuItemIdPrefix, action, index))}
+    </Menu>
+  )
+}
+
+const renderAction = (
+  idPrefix: string,
+  { text, leftIcon, rightIcon, clickHandler, onClick, actions, ...rest }: ActionMenuOption,
+  index: number
+): ReactNode => {
+  const textId = stringToHtmlId(text)
+  const actionMenuItemId = `${idPrefix}action-menu-item-${textId}-${index}`
+
+  if (!!actions?.length && actions.length > 0) {
+    return (
+      <Menu
+        key={actionMenuItemId}
+        id={actionMenuItemId}
+        data-testid={actionMenuItemId}
+        label={text}
+        leftIcon={leftIcon ? <Icon {...leftIcon} /> : null}
+        rightIcon={rightIcon ? <Icon {...rightIcon} /> : null}
+        {...rest}
+      >
+        {actions.map((action, index) => renderAction(actionMenuItemId, action, index))}
+      </Menu>
+    )
+  }
+
+  return (
+    <MenuItem
+      key={actionMenuItemId}
+      id={actionMenuItemId}
+      data-testid={actionMenuItemId}
+      label={text}
+      leftIcon={leftIcon ? <Icon {...leftIcon} /> : null}
+      rightIcon={rightIcon ? <Icon {...rightIcon} /> : null}
+      onClick={clickHandler ?? onClick}
+      {...rest}
+    />
+  )
 }
 
 export default ActionMenu

package/src/molecules/menu.style.tsx

@@ -0,0 +1,130 @@
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+import { BTN_COLOURS, getZIndex, PopUp } from '@ltht-react/styles'
+
+const nestedStyles = css`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  width: 100%;
+  border: none;
+  text-align: left;
+  line-height: 1.8;
+  min-width: 80px;
+  margin: 0;
+  outline: 0;
+
+  &:focus {
+    background: ${BTN_COLOURS.PRIMARY.HOVER};
+    color: ${BTN_COLOURS.PRIMARY.TEXT};
+  }
+
+  &[data-nested][data-open]:not([data-focus-inside]) {
+    background: ${BTN_COLOURS.PRIMARY.HOVER};
+    color: ${BTN_COLOURS.PRIMARY.TEXT};
+  }
+
+  &[data-focus-inside][data-open] {
+    background: ${BTN_COLOURS.PRIMARY.HOVER};
+    color: ${BTN_COLOURS.PRIMARY.TEXT};
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #e0e6ef;
+  }
+
+  &:hover > div > svg {
+    color: ${BTN_COLOURS.PRIMARY.TEXT};
+  }
+
+  &[data-focus-inside][data-open] > div > svg {
+    color: ${BTN_COLOURS.PRIMARY.TEXT};
+  }
+
+  &[disabled] > div > svg {
+    color: rgba(16, 16, 16, 0.3);
+  }
+
+  &[disabled]:hover {
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+`
+
+export const RightIconWrapper = styled.div`
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+`
+
+export const LeftIconWrapper = styled.div`
+  width: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+export const TextWrapper = styled.span`
+  flex: 1;
+`
+
+const rootStyles = css`
+  display: flex;
+  align-items: center;
+  align-content: center;
+  gap: 0.25rem;
+  padding: 6px 10px;
+  border: 0;
+  font-size: 0.9rem;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+
+  &[disabled]:hover {
+    background: none;
+    cursor: not-allowed;
+  }
+
+  &[disabled]:hover > div > svg {
+    color: ${BTN_COLOURS.PRIMARY.DISABLED};
+  }
+
+  &[data-open],
+  &:hover {
+    background: ${BTN_COLOURS.PRIMARY.HOVER};
+    color: ${BTN_COLOURS.PRIMARY.TEXT};
+  }
+
+  &[data-open] > div > svg,
+  &:focus > div > svg,
+  &:hover > div > svg {
+    color: ${BTN_COLOURS.PRIMARY.TEXT};
+  }
+
+  &[data-open] > svg,
+  &:focus > svg,
+  &:hover > svg {
+    color: ${BTN_COLOURS.PRIMARY.TEXT};
+  }
+`
+
+export const StyledRootMenu = styled.button<{ isNested?: boolean }>`
+  ${({ isNested }) => (isNested ? nestedStyles : rootStyles)}
+`
+
+export const StyledMenu = styled.div`
+  background: rgba(255, 255, 255, 0.8);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1);
+  outline: 0;
+  z-index: ${getZIndex(PopUp)};
+`
+
+export const StyledMenuItem = styled.button`
+  ${nestedStyles}
+`