@ltht-react/menu 2.0.192 → 2.0.194

package/README.md

@@ -1,15 +1,15 @@
-# Input
-
-<!-- STORY -->
-
-### Import
-
-```js
-import Menu from '@ltht-react/menu'
-```
-
-### Usage
-
-```jsx
-<Menu />
-```
+# Input
+
+<!-- STORY -->
+
+### Import
+
+```js
+import Menu from '@ltht-react/menu'
+```
+
+### Usage
+
+```jsx
+<Menu />
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/menu",
-  "version": "2.0.192",
+  "version": "2.0.194",
   "description": "ltht-react styled Menu component.",
   "author": "LTHT",
   "homepage": "",
@@ -29,12 +29,12 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "@floating-ui/react": "^0.27.15",
-    "@ltht-react/button": "^2.0.192",
-    "@ltht-react/hooks": "^2.0.192",
-    "@ltht-react/icon": "^2.0.192",
-    "@ltht-react/styles": "^2.0.192",
-    "@ltht-react/utils": "^2.0.192",
+    "@ltht-react/button": "^2.0.194",
+    "@ltht-react/hooks": "^2.0.194",
+    "@ltht-react/icon": "^2.0.194",
+    "@ltht-react/styles": "^2.0.194",
+    "@ltht-react/utils": "^2.0.194",
     "react": "^18.2.0"
   },
-  "gitHead": "d97c241ba79c5e28edb4dec124e156cda6e9af66"
+  "gitHead": "2eb4b88fa2bc19baa1be9433dbe29fe1a947dc62"
 }

package/src/index.tsx

@@ -1,6 +1,6 @@
-import ActionMenu, { ActionMenuOption, DefaultTrigger } from './molecules/action-menu'
-import { Menu, MenuItem } from './molecules/menu'
-
-export default ActionMenu
-export { Menu, MenuItem }
-export { ActionMenuOption, DefaultTrigger }
+import ActionMenu, { ActionMenuOption, DefaultTrigger } from './molecules/action-menu'
+import { Menu, MenuItem } from './molecules/menu'
+
+export default ActionMenu
+export { Menu, MenuItem }
+export { ActionMenuOption, DefaultTrigger }

package/src/molecules/action-menu-option.tsx

@@ -1,103 +1,103 @@
-import { useMemo, MouseEvent, FC, useCallback } from 'react'
-import Icon from '@ltht-react/icon'
-import { stringToHtmlId } from '@ltht-react/utils'
-import { useFullScreen } from '@ltht-react/hooks'
-import { ActionMenuOption as IActionMenuOption } from './action-menu'
-import { Menu, MenuItem } from './menu'
-
-interface Props extends IActionMenuOption {
-  idPrefix: string
-  index: number
-}
-
-// Utility function to generate consistent IDs
-const generateActionId = (idPrefix: string, text: string, index: number): string => {
-  const textId = stringToHtmlId(text)
-  return `${idPrefix}action-menu-item-${textId}-${index}`
-}
-
-const ActionMenuOption: FC<Props> = ({
-  idPrefix,
-  index,
-  text,
-  leftIcon,
-  rightIcon,
-  actions,
-  exitFullScreenOnClick = false,
-  clickHandler,
-  onClick,
-  disabled = false,
-  ...rest
-}) => {
-  const { isFullscreen, exitFullScreen } = useFullScreen()
-
-  // Memoize the action ID to prevent recalculation on every render
-  const actionMenuItemId = useMemo(() => generateActionId(idPrefix, text, index), [idPrefix, text, index])
-
-  // Memoize icons to prevent unnecessary re-renders
-  const leftIconElement = useMemo(() => leftIcon && <Icon {...leftIcon} />, [leftIcon])
-
-  const rightIconElement = useMemo(() => rightIcon && <Icon {...rightIcon} />, [rightIcon])
-
-  const handleOnClick = useCallback(
-    async (e: MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation()
-
-      if (disabled) {
-        return
-      }
-
-      if (!clickHandler && !onClick) {
-        return
-      }
-
-      if (exitFullScreenOnClick && isFullscreen) {
-        await exitFullScreen()
-      }
-
-      // Execute the appropriate handler
-      if (clickHandler) {
-        clickHandler()
-      } else if (onClick) {
-        onClick(e)
-      }
-    },
-    [disabled, clickHandler, onClick, exitFullScreenOnClick, isFullscreen, exitFullScreen]
-  )
-
-  // Determine if this is a submenu (has actions)
-  const isSubmenu = actions && actions.length > 0
-
-  // Common props for both Menu and MenuItem
-  const commonProps = useMemo(
-    () => ({
-      id: actionMenuItemId,
-      'data-testid': actionMenuItemId,
-      label: text,
-      leftIcon: leftIconElement,
-      rightIcon: rightIconElement,
-      disabled,
-      ...rest,
-    }),
-    [actionMenuItemId, text, leftIconElement, rightIconElement, disabled, rest]
-  )
-
-  if (isSubmenu) {
-    return (
-      <Menu {...commonProps} aria-label={`${text} submenu`} aria-expanded="false">
-        {actions.map((action, actionIndex) => (
-          <ActionMenuOption
-            key={`${actionMenuItemId}_menu_item_${actionIndex}`}
-            idPrefix={`${actionMenuItemId}_`}
-            index={actionIndex}
-            {...action}
-          />
-        ))}
-      </Menu>
-    )
-  }
-
-  return <MenuItem {...commonProps} onClick={handleOnClick} aria-label={text} />
-}
-
-export default ActionMenuOption
+import { useMemo, MouseEvent, FC, useCallback } from 'react'
+import Icon from '@ltht-react/icon'
+import { stringToHtmlId } from '@ltht-react/utils'
+import { useFullScreen } from '@ltht-react/hooks'
+import { ActionMenuOption as IActionMenuOption } from './action-menu'
+import { Menu, MenuItem } from './menu'
+
+interface Props extends IActionMenuOption {
+  idPrefix: string
+  index: number
+}
+
+// Utility function to generate consistent IDs
+const generateActionId = (idPrefix: string, text: string, index: number): string => {
+  const textId = stringToHtmlId(text)
+  return `${idPrefix}action-menu-item-${textId}-${index}`
+}
+
+const ActionMenuOption: FC<Props> = ({
+  idPrefix,
+  index,
+  text,
+  leftIcon,
+  rightIcon,
+  actions,
+  exitFullScreenOnClick = false,
+  clickHandler,
+  onClick,
+  disabled = false,
+  ...rest
+}) => {
+  const { isFullscreen, exitFullScreen } = useFullScreen()
+
+  // Memoize the action ID to prevent recalculation on every render
+  const actionMenuItemId = useMemo(() => generateActionId(idPrefix, text, index), [idPrefix, text, index])
+
+  // Memoize icons to prevent unnecessary re-renders
+  const leftIconElement = useMemo(() => leftIcon && <Icon {...leftIcon} />, [leftIcon])
+
+  const rightIconElement = useMemo(() => rightIcon && <Icon {...rightIcon} />, [rightIcon])
+
+  const handleOnClick = useCallback(
+    async (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+
+      if (disabled) {
+        return
+      }
+
+      if (!clickHandler && !onClick) {
+        return
+      }
+
+      if (exitFullScreenOnClick && isFullscreen) {
+        await exitFullScreen()
+      }
+
+      // Execute the appropriate handler
+      if (clickHandler) {
+        clickHandler()
+      } else if (onClick) {
+        onClick(e)
+      }
+    },
+    [disabled, clickHandler, onClick, exitFullScreenOnClick, isFullscreen, exitFullScreen]
+  )
+
+  // Determine if this is a submenu (has actions)
+  const isSubmenu = actions && actions.length > 0
+
+  // Common props for both Menu and MenuItem
+  const commonProps = useMemo(
+    () => ({
+      id: actionMenuItemId,
+      'data-testid': actionMenuItemId,
+      label: text,
+      leftIcon: leftIconElement,
+      rightIcon: rightIconElement,
+      disabled,
+      ...rest,
+    }),
+    [actionMenuItemId, text, leftIconElement, rightIconElement, disabled, rest]
+  )
+
+  if (isSubmenu) {
+    return (
+      <Menu {...commonProps} aria-label={`${text} submenu`} aria-expanded="false">
+        {actions.map((action, actionIndex) => (
+          <ActionMenuOption
+            key={`${actionMenuItemId}_menu_item_${actionIndex}`}
+            idPrefix={`${actionMenuItemId}_`}
+            index={actionIndex}
+            {...action}
+          />
+        ))}
+      </Menu>
+    )
+  }
+
+  return <MenuItem {...commonProps} onClick={handleOnClick} aria-label={text} />
+}
+
+export default ActionMenuOption

package/src/molecules/action-menu.tsx

@@ -1,69 +1,69 @@
-import { FC, HTMLAttributes } from 'react'
-import { IconProps } from '@ltht-react/icon'
-import { ButtonProps } from '@ltht-react/button'
-
-import { Menu } from './menu'
-import MenuOption from './action-menu-option'
-
-interface IProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<HTMLButtonElement> {
-  actions: ActionMenuOption[]
-  menuButtonOptions?: IconButtonMenuProps | ButtonMenuProps
-  disabled?: boolean
-  root?: React.MutableRefObject<T | null>
-}
-
-interface IconButtonMenuProps {
-  type: 'icon'
-  iconProps: IconProps
-  text?: string
-  disabled?: boolean
-}
-
-interface ButtonMenuProps {
-  type: 'button'
-  buttonProps: ButtonProps
-  text: string
-}
-
-export interface ActionMenuOption extends HTMLAttributes<HTMLButtonElement> {
-  text: string
-  clickHandler?: VoidFunction
-  leftIcon?: IconProps
-  rightIcon?: IconProps
-  disabled?: boolean
-  exitFullScreenOnClick?: 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) => (
-        <MenuOption
-          key={`${menuItemIdPrefix}_menu_item_${index}`}
-          idPrefix={menuItemIdPrefix}
-          index={index}
-          {...action}
-        />
-      ))}
-    </Menu>
-  )
-}
-
-export default ActionMenu
+import { FC, HTMLAttributes } from 'react'
+import { IconProps } from '@ltht-react/icon'
+import { ButtonProps } from '@ltht-react/button'
+
+import { Menu } from './menu'
+import MenuOption from './action-menu-option'
+
+interface IProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<HTMLButtonElement> {
+  actions: ActionMenuOption[]
+  menuButtonOptions?: IconButtonMenuProps | ButtonMenuProps
+  disabled?: boolean
+  root?: React.MutableRefObject<T | null>
+}
+
+interface IconButtonMenuProps {
+  type: 'icon'
+  iconProps: IconProps
+  text?: string
+  disabled?: boolean
+}
+
+interface ButtonMenuProps {
+  type: 'button'
+  buttonProps: ButtonProps
+  text: string
+}
+
+export interface ActionMenuOption extends HTMLAttributes<HTMLButtonElement> {
+  text: string
+  clickHandler?: VoidFunction
+  leftIcon?: IconProps
+  rightIcon?: IconProps
+  disabled?: boolean
+  exitFullScreenOnClick?: 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) => (
+        <MenuOption
+          key={`${menuItemIdPrefix}_menu_item_${index}`}
+          idPrefix={menuItemIdPrefix}
+          index={index}
+          {...action}
+        />
+      ))}
+    </Menu>
+  )
+}
+
+export default ActionMenu

package/src/molecules/menu.style.tsx

@@ -1,130 +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;
-  padding: 0.2rem 0.3rem;
-`
-
-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,
-  &: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}
-`
+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;
+  padding: 0.2rem 0.3rem;
+`
+
+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,
+  &: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}
+`