Skip to content

Commit

Permalink
feat: add menu trigger component
Browse files Browse the repository at this point in the history
  • Loading branch information
PHILLIPS71 committed Jun 18, 2024
1 parent 89ed12b commit b9a966c
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 0 deletions.
52 changes: 52 additions & 0 deletions packages/react/src/components/menu/MenuTrigger.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
'use client'

import type * as Polymophic from '@/utilities/polymorphic'
import type { ButtonProps } from 'react-aria-components'

import React from 'react'
import { Button } from 'react-aria-components'

import { useMenuContext } from '@/components/menu/use-menu.hook'

const __ELEMENT_TYPE__ = 'button'

type ComponentOwnProps = ButtonProps

type ComponentProps<TElement extends React.ElementType = typeof __ELEMENT_TYPE__> = Polymophic.ComponentPropsWithRef<
TElement,
ComponentOwnProps
>

type ComponentType = <TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>
) => React.ReactNode

const Component: ComponentType = React.forwardRef(
<TElement extends React.ElementType = typeof __ELEMENT_TYPE__>(
props: ComponentProps<TElement>,
ref: Polymophic.Ref<TElement>
) => {
const { as, children, className, ...rest } = props

const Element = as ?? Button

const { slots } = useMenuContext()

const component = React.useMemo<ButtonProps>(
() => ({
className: slots.trigger({ className: className?.toString() }),
...rest,
}),
[className, rest, slots]
)

return (
<Element {...component} ref={ref}>
{children}
</Element>
)
}
)

export type { ComponentOwnProps as MenuTriggerOwnProps, ComponentProps as MenuTriggerProps }
export default Component
1 change: 1 addition & 0 deletions packages/react/src/components/menu/component.parts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ export { default as Root } from '@/components/menu/Menu'
export { default as Item } from '@/components/menu/MenuItem'
export { default as List } from '@/components/menu/MenuList'
export { default as Popover } from '@/components/menu/MenuPopover'
export { default as Trigger } from '@/components/menu/MenuTrigger'
1 change: 1 addition & 0 deletions packages/react/src/components/menu/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ export type * from '@/components/menu/Menu'
export type * from '@/components/menu/MenuItem'
export type * from '@/components/menu/MenuList'
export type * from '@/components/menu/MenuPopover'
export type * from '@/components/menu/MenuTrigger'

export * as Menu from '@/components/menu/component.parts'
1 change: 1 addition & 0 deletions packages/theme/src/components/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export const menu = tv({
'overflow-hidden',
'disabled:opacity-50 disabled:cursor-default',
],
trigger: ['flex', 'focus:outline-none'],
},
variants: {
size: {
Expand Down

0 comments on commit b9a966c

Please sign in to comment.