feat(menu): allow to further customize className and styles of submenu

Also increase the non popover popup z-index
snowball-tech · Mar 14, 2024 · 3db8fbe · 3db8fbe
1 parent 5987712
commit 3db8fbe
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 21 deletions.
diff --git a/packages/fractal/src/components/Menu/Menu.types.ts b/packages/fractal/src/components/Menu/Menu.types.ts
@@ -122,16 +122,6 @@ export interface SubMenuProps
  * `MenuItemSeparator` or `SubMenu`.
  */
  children: ReactNode
- /**
- * Options to tweak the sub-menu content.
- *
- * You can on top of that add the `className` and `style` properties to
- * customize the style of the sub-menu content.
- */
- content?: {
- className?: string
- style?: CSSProperties
- }
  /** Indicates if the sub-menu should be opened by default. */
  defaultOpen?: boolean
  /** Indicates if the sub-menu is disabled. */
@@ -175,6 +165,37 @@ export interface SubMenuProps
  * positioning" trick to display the sub-menu.
  */
  popover?: boolean
+ /**
+ * Options to tweak the sub-menu popup, trigger and content.
+ *
+ * You can use the `className` and `style` properties to customize the style
+ * of the sub-menu popup, trigger (element and wrapper) and content (element,
+ * wrapper and positionner (in non popover mode)).
+ */
+ popup?: {
+ className?: string
+ content?: {
+ className?: string
+ positionner?: {
+ className?: string
+ style?: CSSProperties
+ }
+ style?: CSSProperties
+ wrapper?: {
+ className?: string
+ style?: CSSProperties
+ }
+ }
+ style?: CSSProperties
+ trigger?: {
+ className?: string
+ style?: CSSProperties
+ wrapper: {
+ className?: string
+ style?: CSSProperties
+ }
+ }
+ }
  /**
  * The preferred side of the trigger (label) to render the popover.
  *

diff --git a/packages/fractal/src/components/Menu/SubMenu.tsx b/packages/fractal/src/components/Menu/SubMenu.tsx
@@ -43,7 +43,6 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  active = false,
  align = 'start',
  children,
- content,
  defaultOpen = false,
  disabled = false,
  elevation = DEFAULT_SUB_MENU_ELEVATION,
@@ -55,6 +54,7 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  onSubMenuOpenChange,
  open,
  popover = true,
+ popup,
  side,
  triggerOnHover = true,
  withIndicator = true,
@@ -184,7 +184,7 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  isDisabled
  ? `${PREFIX}-${GROUP_NAME}__sub-menu__trigger--disabled pointer-events-none cursor-not-allowed !bg-transparent text-disabled`
  : 'cursor-pointer text-dark',
- props.className,
+ popup?.trigger?.className,
  )}
  data-highlighted={active || isOpen || undefined}
  element="div"
@@ -197,6 +197,7 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  : triggerOnHover
  ? { onMouseEnter: handleMouseEnter }
  : {})}
+ style={popup?.trigger?.style}
  onKeyDown={handleKeyDown}
  >
  {icon && (
@@ -212,6 +213,7 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  <Typography className="flex-1" element="label">
  {label}
  </Typography>
+
  {withIndicator && (
  <div
  className={cj(
@@ -254,9 +256,9 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  !hasChildren
  ? `${PREFIX}-${GROUP_NAME}__sub-menu__content--empty invisible`
  : '',
- content?.className,
+ popup?.content?.className,
  )}
- {...omit(['className'], content)}
+ style={popup?.content?.style}
  >
  {withScroll ? (
  <RxScrollArea.Root
@@ -308,34 +310,49 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  return !popover ? (
  <div
  ref={nonPopoverRef}
- className={cj(
+ className={cn(
  `${PREFIX}-${GROUP_NAME}__sub-menu__popup`,
  `${PREFIX}-${GROUP_NAME}__sub-menu__popup--non-popover`,
  'alternatee',
  'relative rounded-sm outline-none transition-background-color duration-300 ease-out',
+ props.className,
+ popup?.className,
  )}
+ style={{
+ ...(props.style ?? {}),
+ ...(popup?.style ?? {}),
+ }}
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
+ {...omit(['className', 'style'], props)}
  >
  <div
- className={`${PREFIX}-${GROUP_NAME}__sub-menu__popup__trigger-wrapper`}
+ className={cn(
+ `${PREFIX}-${GROUP_NAME}__sub-menu__popup__trigger-wrapper`,
+ popup?.trigger?.wrapper?.className,
+ )}
+ style={popup?.trigger?.wrapper?.style}
  >
  {trigger}
  </div>
 
  <div
- className={cj(
+ className={cn(
  `${PREFIX}-${GROUP_NAME}__sub-menu__popup__content-positionner`,
- 'absolute left-full top-0 z-50 pl-2',
+ 'absolute left-full top-0 z-[5000] pl-2',
  isOpen ? '' : 'hidden',
+ popup?.content?.positionner?.className,
  )}
+ style={popup?.content?.positionner?.style}
  >
  <Paper
- className={cj(
+ className={cn(
  `${PREFIX}-${GROUP_NAME}__sub-menu__popup__content-wrapper`,
  'p-0',
+ popup?.content?.wrapper?.className,
  )}
  elevation={elevation}
+ style={popup?.content?.wrapper?.style}
  >
  <div className={subMenuClassName}>{wrappedElement}</div>
  </Paper>
@@ -344,17 +361,19 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  ) : (
  <Popover
  align={align}
- className={cj(
+ className={cn(
  `${PREFIX}-${GROUP_NAME}__sub-menu__popup`,
  `${PREFIX}-${GROUP_NAME}__sub-menu__popup--popover`,
  'alternatee',
  'rounded-sm',
+ props.className,
  )}
  disabled={disabled}
  elevation={elevation}
  fullWidth
  popover={{
  className: subMenuClassName,
+ style: popup?.style,
  }}
  side={
  // eslint-disable-next-line no-nested-ternary
@@ -364,6 +383,10 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  ? 'right'
  : 'bottom'
  }
+ style={{
+ ...(props.style ?? {}),
+ ...(popup?.style ?? {}),
+ }}
  trigger={trigger}
  withArrow={false}
  withCloseButton={false}
@@ -374,8 +397,8 @@ export const SubMenu = forwardRef<SubMenuCombinedRefs, SubMenuProps>(
  onOpenChange={handleOpenChange}
  {...(defaultOpen ? { defaultOpen: true } : {})}
  {...(disabled ? { open: false } : { open: isOpen })}
- {...omit(['className'], props)}
  onMouseLeave={handleMouseLeave}
+ {...omit(['className', 'style'], props)}
  >
  {wrappedElement}
  </Popover>