Menu

DooPage - React UI Kit

Edit page

Base on Popup

Related component

MenuItem

Icon

https://material-ui.com/components/material-icons/

Basic usage

import { Menu } from '@doopage/react-ui-kit'

const Example = () => {
    return (
      <Menu
        label={'menu'}
        options={[{id: '1', name: 'option1', onClick: () => {console.log('on click')}}]}
      />
    );
}

export default Example;

Playground

Basic

() => {
  const handleClick = item => console.log('on click', item)
  return (
    <Menu
      label={'menu'}
      options={[
        { name: 'option 1', onClick: handleClick },
        { name: 'option 2', onClick: handleClick },
      ]}
    />
  )
}

() => {
  const handleClick = item => console.log('on click', item)
  return (
    <Menu
      label={'menu'}
      options={[
        { name: 'option 1', onClick: handleClick },
        { name: 'option 2', onClick: handleClick },
      ]}
    />
  )
}

Hover

() => {
  const handleClick = item => console.log('on click', item)
  return (
    <Menu
      button={
        <div
          style={{
            width: 100,
            backgroundColor: 'gray',
            textAlign: 'center',
            color: '#fff',
          }}
        >
          menu
        </div>
      }
      hover
      options={[
        {
          id: '1',
          name: 'option 1',
          onClick: handleClick,
          description: 'description option 1',
          icon: <AdbIcon />,
          disabled: true,
          divider: true,
        },
        {
          id: '2',
          name: 'option 2',
          onClick: handleClick,
          description: 'description option 2',
          icon: <Avatar src={doopageLogo} size="small" shadow={false} />,
          closeOnClick: false,
        },
      ]}
    />
  )
}

() => {
  const handleClick = item => console.log('on click', item)
  return (
    <Menu
      button={
        <div
          style={{
            width: 100,
            backgroundColor: 'gray',
            textAlign: 'center',
            color: '#fff',
          }}
        >
          menu
        </div>
      }
      hover
      options={[
        {
          id: '1',
          name: 'option 1',
          onClick: handleClick,
          description: 'description option 1',
          icon: <AdbIcon />,
          disabled: true,
          divider: true,
        },
        {
          id: '2',
          name: 'option 2',
          onClick: handleClick,
          description: 'description option 2',
          icon: <Avatar src={doopageLogo} size="small" shadow={false} />,
          closeOnClick: false,
        },
      ]}
    />
  )
}

Right click to open menu

() => {
  const handleClick = item => console.log('on click', item)
  return (
    <Menu
      getContextMenu={openMenu => {
        return (
          <div
            onContextMenu={e => {
              const { top, left } = openMenu(e)
            }}
            style={{
              width: 500,
              height: 300,
              backgroundColor: '#eeeeee',
              textAlign: 'center',
            }}
          >
            Right click to open menu
          </div>
        )
      }}
      options={[
        {
          id: '1',
          name: 'option 1',
          onClick: handleClick,
          description: 'description option 1',
          icon: <AdbIcon />,
          disabled: true,
          divider: true,
        },
        {
          id: '2',
          name: 'option 2',
          onClick: handleClick,
          description: 'description option 2',
          icon: <Avatar src={doopageLogo} size="small" shadow={false} />,
          closeOnClick: false,
        },
      ]}
    />
  )
}

() => {
  const handleClick = item => console.log('on click', item)
  return (
    <Menu
      getContextMenu={openMenu => {
        return (
          <div
            onContextMenu={e => {
              const { top, left } = openMenu(e)
            }}
            style={{
              width: 500,
              height: 300,
              backgroundColor: '#eeeeee',
              textAlign: 'center',
            }}
          >
            Right click to open menu
          </div>
        )
      }}
      options={[
        {
          id: '1',
          name: 'option 1',
          onClick: handleClick,
          description: 'description option 1',
          icon: <AdbIcon />,
          disabled: true,
          divider: true,
        },
        {
          id: '2',
          name: 'option 2',
          onClick: handleClick,
          description: 'description option 2',
          icon: <Avatar src={doopageLogo} size="small" shadow={false} />,
          closeOnClick: false,
        },
      ]}
    />
  )
}

Properties

Option

Prop name	Type	Default	Required	Description
closeOnClick	`boolean \| undefined`	—	false
onClick	`(item: MenuOptionProps, e?: any) => void`	—	true
title	`string \| undefined`	—	false
disabled	`boolean \| undefined`	—	false
onChange	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
classes	`Partial<Record<MenuItemClassKey, string>> \| undefined`	—	false	Override or extend the styles applied to the component.
defaultChecked	`boolean \| undefined`	—	false
defaultValue	`string \| number \| readonly string[] \| undefined`	—	false
suppressContentEditableWarning	`boolean \| undefined`	—	false
suppressHydrationWarning	`boolean \| undefined`	—	false
accessKey	`string \| undefined`	—	false
className	`string \| undefined`	—	false
contentEditable	`boolean \| "true" \| "false" \| "inherit" \| undefined`	—	false
contextMenu	`string \| undefined`	—	false
dir	`string \| undefined`	—	false
draggable	`boolean \| "true" \| "false" \| undefined`	—	false
hidden	`boolean \| undefined`	—	false
id	`string \| undefined`	—	false
lang	`string \| undefined`	—	false
placeholder	`string \| undefined`	—	false
slot	`string \| undefined`	—	false
spellCheck	`boolean \| "true" \| "false" \| undefined`	—	false
style	`CSSProperties \| undefined`	—	false
tabIndex	`number \| undefined`	—	false
translate	`"yes" \| "no" \| undefined`	—	false
radioGroup	`string \| undefined`	—	false
role	`string \| undefined`	—	false
about	`string \| undefined`	—	false
datatype	`string \| undefined`	—	false
inlist	`any`	—	false
prefix	`string \| undefined`	—	false
property	`string \| undefined`	—	false
resource	`string \| undefined`	—	false
typeof	`string \| undefined`	—	false
vocab	`string \| undefined`	—	false
autoCapitalize	`string \| undefined`	—	false
autoCorrect	`string \| undefined`	—	false
autoSave	`string \| undefined`	—	false
color	`string \| undefined`	—	false
itemProp	`string \| undefined`	—	false
itemScope	`boolean \| undefined`	—	false
itemType	`string \| undefined`	—	false
itemID	`string \| undefined`	—	false
itemRef	`string \| undefined`	—	false
results	`number \| undefined`	—	false
security	`string \| undefined`	—	false
unselectable	`"on" \| "off" \| undefined`	—	false
inputMode	`"none" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal" \| "search" \| undefined`	—	false	Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
is	`string \| undefined`	—	false	Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
aria-activedescendant	`string \| undefined`	—	false	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete	`"none" \| "inline" \| "list" \| "both" \| undefined`	—	false	Indicates whether inputting text could trigger display of one or more predictions of the user’s intended value for an input and specifies how predictions would be presented if they are made.
aria-busy	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
aria-checked	`boolean \| "true" \| "false" \| "mixed" \| undefined`	—	false	Indicates the current “checked” state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.
aria-colcount	`number \| undefined`	—	false	Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.
aria-colindex	`number \| undefined`	—	false	Defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.
aria-colspan	`number \| undefined`	—	false	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.
aria-controls	`string \| undefined`	—	false	Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.
aria-current	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time" \| undefined`	—	false	Indicates the element that represents the current item within a container or set of related elements.
aria-describedby	`string \| undefined`	—	false	Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-details	`string \| undefined`	—	false	Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.
aria-disabled	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.
aria-dropeffect	`"none" \| "copy" \| "execute" \| "link" \| "move" \| "popup" \| undefined`	—	false	Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1
aria-errormessage	`string \| undefined`	—	false	Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.
aria-expanded	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto	`string \| undefined`	—	false	Identifies the next element (or elements) in an alternate reading order of content which, at the user’s discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates an element’s “grabbed” state in a drag-and-drop operation. @deprecated in ARIA 1.1
aria-haspopup	`boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog" \| undefined`	—	false	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-invalid	`boolean \| "true" \| "false" \| "grammar" \| "spelling" \| undefined`	—	false	Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.
aria-keyshortcuts	`string \| undefined`	—	false	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label	`string \| undefined`	—	false	Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby	`string \| undefined`	—	false	Identifies the element (or elements) that labels the current element. @see aria-describedby.
aria-level	`number \| undefined`	—	false	Defines the hierarchical level of an element within a structure.
aria-live	`"off" \| "assertive" \| "polite" \| undefined`	—	false	Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates whether an element is modal when displayed.
aria-multiline	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation	`"horizontal" \| "vertical" \| undefined`	—	false	Indicates whether the element’s orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns	`string \| undefined`	—	false	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls.
aria-placeholder	`string \| undefined`	—	false	Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset	`number \| undefined`	—	false	Defines an element’s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize.
aria-pressed	`boolean \| "true" \| "false" \| "mixed" \| undefined`	—	false	Indicates the current “pressed” state of toggle buttons. @see aria-checked @see aria-selected.
aria-readonly	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.
aria-relevant	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals" \| undefined`	—	false	Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.
aria-required	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates that user input is required on the element before a form may be submitted.
aria-roledescription	`string \| undefined`	—	false	Defines a human-readable, author-localized description for the role of an element.
aria-rowcount	`number \| undefined`	—	false	Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.
aria-rowindex	`number \| undefined`	—	false	Defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.
aria-rowspan	`number \| undefined`	—	false	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.
aria-selected	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates the current “selected” state of various widgets. @see aria-checked @see aria-pressed.
aria-setsize	`number \| undefined`	—	false	Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset.
aria-sort	`"none" \| "ascending" \| "descending" \| "other" \| undefined`	—	false	Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax	`number \| undefined`	—	false	Defines the maximum allowed value for a range widget.
aria-valuemin	`number \| undefined`	—	false	Defines the minimum allowed value for a range widget.
aria-valuenow	`number \| undefined`	—	false	Defines the current value for a range widget. @see aria-valuetext.
aria-valuetext	`string \| undefined`	—	false	Defines the human readable text alternative of aria-valuenow for a range widget.
dangerouslySetInnerHTML	`{ __html: string; } \| undefined`	—	false
onCopy	`((event: ClipboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onCopyCapture	`((event: ClipboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onCut	`((event: ClipboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onCutCapture	`((event: ClipboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPaste	`((event: ClipboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPasteCapture	`((event: ClipboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onCompositionEnd	`((event: CompositionEvent<HTMLLIElement>) => void) \| undefined`	—	false
onCompositionEndCapture	`((event: CompositionEvent<HTMLLIElement>) => void) \| undefined`	—	false
onCompositionStart	`((event: CompositionEvent<HTMLLIElement>) => void) \| undefined`	—	false
onCompositionStartCapture	`((event: CompositionEvent<HTMLLIElement>) => void) \| undefined`	—	false
onCompositionUpdate	`((event: CompositionEvent<HTMLLIElement>) => void) \| undefined`	—	false
onCompositionUpdateCapture	`((event: CompositionEvent<HTMLLIElement>) => void) \| undefined`	—	false
onFocus	`((event: FocusEvent<HTMLLIElement>) => void) \| undefined`	—	false
onFocusCapture	`((event: FocusEvent<HTMLLIElement>) => void) \| undefined`	—	false
onBlur	`((event: FocusEvent<HTMLLIElement>) => void) \| undefined`	—	false
onBlurCapture	`((event: FocusEvent<HTMLLIElement>) => void) \| undefined`	—	false
onChangeCapture	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
onBeforeInput	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
onBeforeInputCapture	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
onInput	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
onInputCapture	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
onReset	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
onResetCapture	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
onSubmit	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
onSubmitCapture	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
onInvalid	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
onInvalidCapture	`((event: FormEvent<HTMLLIElement>) => void) \| undefined`	—	false
onLoad	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onLoadCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onError	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onErrorCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onKeyDown	`((event: KeyboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onKeyDownCapture	`((event: KeyboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onKeyPress	`((event: KeyboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onKeyPressCapture	`((event: KeyboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onKeyUp	`((event: KeyboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onKeyUpCapture	`((event: KeyboardEvent<HTMLLIElement>) => void) \| undefined`	—	false
onAbort	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onAbortCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onCanPlay	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onCanPlayCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onCanPlayThrough	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onCanPlayThroughCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onDurationChange	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onDurationChangeCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onEmptied	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onEmptiedCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onEncrypted	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onEncryptedCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onEnded	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onEndedCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onLoadedData	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onLoadedDataCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onLoadedMetadata	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onLoadedMetadataCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onLoadStart	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onLoadStartCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onPause	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onPauseCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onPlay	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onPlayCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onPlaying	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onPlayingCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onProgress	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onProgressCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onRateChange	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onRateChangeCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onSeeked	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onSeekedCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onSeeking	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onSeekingCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onStalled	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onStalledCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onSuspend	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onSuspendCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onTimeUpdate	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onTimeUpdateCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onVolumeChange	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onVolumeChangeCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onWaiting	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onWaitingCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onAuxClick	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onAuxClickCapture	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onClickCapture	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onContextMenu	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onContextMenuCapture	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onDoubleClick	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onDoubleClickCapture	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onDrag	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragCapture	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragEnd	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragEndCapture	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragEnter	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragEnterCapture	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragExit	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragExitCapture	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragLeave	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragLeaveCapture	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragOver	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragOverCapture	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragStart	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDragStartCapture	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDrop	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onDropCapture	`((event: DragEvent<HTMLLIElement>) => void) \| undefined`	—	false
onMouseDown	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onMouseDownCapture	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onMouseEnter	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onMouseLeave	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onMouseMove	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onMouseMoveCapture	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onMouseOut	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onMouseOutCapture	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onMouseOver	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onMouseOverCapture	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onMouseUp	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onMouseUpCapture	`((event: MouseEvent<HTMLLIElement, MouseEvent>) => void) \| undefined`	—	false
onSelect	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onSelectCapture	`((event: SyntheticEvent<HTMLLIElement, Event>) => void) \| undefined`	—	false
onTouchCancel	`((event: TouchEvent<HTMLLIElement>) => void) \| undefined`	—	false
onTouchCancelCapture	`((event: TouchEvent<HTMLLIElement>) => void) \| undefined`	—	false
onTouchEnd	`((event: TouchEvent<HTMLLIElement>) => void) \| undefined`	—	false
onTouchEndCapture	`((event: TouchEvent<HTMLLIElement>) => void) \| undefined`	—	false
onTouchMove	`((event: TouchEvent<HTMLLIElement>) => void) \| undefined`	—	false
onTouchMoveCapture	`((event: TouchEvent<HTMLLIElement>) => void) \| undefined`	—	false
onTouchStart	`((event: TouchEvent<HTMLLIElement>) => void) \| undefined`	—	false
onTouchStartCapture	`((event: TouchEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerDown	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerDownCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerMove	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerMoveCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerUp	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerUpCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerCancel	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerCancelCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerEnter	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerEnterCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerLeave	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerLeaveCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerOver	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerOverCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerOut	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onPointerOutCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onGotPointerCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onGotPointerCaptureCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onLostPointerCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onLostPointerCaptureCapture	`((event: PointerEvent<HTMLLIElement>) => void) \| undefined`	—	false
onScroll	`((event: UIEvent<HTMLLIElement, UIEvent>) => void) \| undefined`	—	false
onScrollCapture	`((event: UIEvent<HTMLLIElement, UIEvent>) => void) \| undefined`	—	false
onWheel	`((event: WheelEvent<HTMLLIElement>) => void) \| undefined`	—	false
onWheelCapture	`((event: WheelEvent<HTMLLIElement>) => void) \| undefined`	—	false
onAnimationStart	`((event: AnimationEvent<HTMLLIElement>) => void) \| undefined`	—	false
onAnimationStartCapture	`((event: AnimationEvent<HTMLLIElement>) => void) \| undefined`	—	false
onAnimationEnd	`((event: AnimationEvent<HTMLLIElement>) => void) \| undefined`	—	false
onAnimationEndCapture	`((event: AnimationEvent<HTMLLIElement>) => void) \| undefined`	—	false
onAnimationIteration	`((event: AnimationEvent<HTMLLIElement>) => void) \| undefined`	—	false
onAnimationIterationCapture	`((event: AnimationEvent<HTMLLIElement>) => void) \| undefined`	—	false
onTransitionEnd	`((event: TransitionEvent<HTMLLIElement>) => void) \| undefined`	—	false
onTransitionEndCapture	`((event: TransitionEvent<HTMLLIElement>) => void) \| undefined`	—	false
innerRef	`((instance: any) => void) \| RefObject<any> \| null \| undefined`	—	false
ref	`((instance: HTMLLIElement \| null) => void) \| RefObject<HTMLLIElement> \| null \| undefined`	—	false
button	`boolean \| undefined`	—	false
image	`string \| undefined`	—	false
inputValue	`string \| undefined`	—	false	Special props, need for allowCreate feature of auto complete com
value	`string \| number \| readonly string[] \| undefined`	—	false
key	`string \| number \| null \| undefined`	—	false
autoFocus	`boolean \| undefined`	—	false
name	`string \| undefined`	—	false
endIcon	`ReactNode`	—	false
focusVisibleClassName	`string \| undefined`	—	false
icon	`ReactNode`	—	false
avatar	`string \| undefined`	—	false
dense	`boolean \| undefined`	—	false
selected	`boolean \| undefined`	—	false
hide	`boolean \| undefined`	—	false
description	`string \| undefined`	—	false
justContent	`boolean \| undefined`	—	false
allowRemove	`boolean \| undefined`	—	false	Special props, use for select locale
alignItems	`"flex-start" \| "center" \| undefined`	—	false
ContainerComponent	`"object" \| "time" \| "menu" \| "abbr" \| "address" \| "article" \| "aside" \| "b" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "dd" \| "del" \| ... 61 more ... \| undefined`	—	false
ContainerProps	`HTMLAttributes<HTMLDivElement> \| undefined`	—	false
disableGutters	`boolean \| undefined`	—	false
divider	`boolean \| undefined`	—	false

Prop name	Type	Default	Required	Description
options	`MenuOptionProps[]`	—	true
divider	`boolean \| undefined`	—	false	Apply divider for all item
hide	`boolean \| undefined`	—	false
buttonProps	`ButtonProps \| undefined`	—	false
button	`ReactNode`	—	false
label	`ReactNode`	—	false
hover	`boolean \| undefined`	—	false
fullWidth	`boolean \| undefined`	—	false
popupState	`PopupState \| undefined`	—	false
getContextMenu	`((value: (e: SyntheticEvent<Element, Event>) => { top: number; left: number; }) => void) \| undefined`	—	false
title	`string \| undefined`	—	false
onChange	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
classes	`Partial<Record<PopoverClassKey, string>> \| undefined`	—	false	Override or extend the styles applied to the component.
defaultChecked	`boolean \| undefined`	—	false
defaultValue	`string \| number \| readonly string[] \| undefined`	—	false
suppressContentEditableWarning	`boolean \| undefined`	—	false
suppressHydrationWarning	`boolean \| undefined`	—	false
accessKey	`string \| undefined`	—	false
className	`string \| undefined`	—	false
contentEditable	`boolean \| "true" \| "false" \| "inherit" \| undefined`	—	false
dir	`string \| undefined`	—	false
draggable	`boolean \| "true" \| "false" \| undefined`	—	false
hidden	`boolean \| undefined`	—	false
id	`string \| undefined`	—	false
lang	`string \| undefined`	—	false
placeholder	`string \| undefined`	—	false
slot	`string \| undefined`	—	false
spellCheck	`boolean \| "true" \| "false" \| undefined`	—	false
style	`CSSProperties \| undefined`	—	false
tabIndex	`number \| undefined`	—	false
translate	`"yes" \| "no" \| undefined`	—	false
radioGroup	`string \| undefined`	—	false
role	`string \| undefined`	—	false
about	`string \| undefined`	—	false
datatype	`string \| undefined`	—	false
inlist	`any`	—	false
prefix	`string \| undefined`	—	false
property	`string \| undefined`	—	false
resource	`string \| undefined`	—	false
typeof	`string \| undefined`	—	false
vocab	`string \| undefined`	—	false
autoCapitalize	`string \| undefined`	—	false
autoCorrect	`string \| undefined`	—	false
autoSave	`string \| undefined`	—	false
color	`string \| undefined`	—	false
itemProp	`string \| undefined`	—	false
itemScope	`boolean \| undefined`	—	false
itemType	`string \| undefined`	—	false
itemID	`string \| undefined`	—	false
itemRef	`string \| undefined`	—	false
results	`number \| undefined`	—	false
security	`string \| undefined`	—	false
unselectable	`"on" \| "off" \| undefined`	—	false
inputMode	`"none" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal" \| "search" \| undefined`	—	false	Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
is	`string \| undefined`	—	false	Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
aria-activedescendant	`string \| undefined`	—	false	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-atomic	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
aria-autocomplete	`"none" \| "inline" \| "list" \| "both" \| undefined`	—	false	Indicates whether inputting text could trigger display of one or more predictions of the user’s intended value for an input and specifies how predictions would be presented if they are made.
aria-busy	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
aria-checked	`boolean \| "true" \| "false" \| "mixed" \| undefined`	—	false	Indicates the current “checked” state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.
aria-colcount	`number \| undefined`	—	false	Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.
aria-colindex	`number \| undefined`	—	false	Defines an element’s column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.
aria-colspan	`number \| undefined`	—	false	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.
aria-controls	`string \| undefined`	—	false	Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.
aria-current	`boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time" \| undefined`	—	false	Indicates the element that represents the current item within a container or set of related elements.
aria-describedby	`string \| undefined`	—	false	Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-details	`string \| undefined`	—	false	Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.
aria-disabled	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.
aria-dropeffect	`"none" \| "copy" \| "execute" \| "link" \| "move" \| "popup" \| undefined`	—	false	Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1
aria-errormessage	`string \| undefined`	—	false	Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.
aria-expanded	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-flowto	`string \| undefined`	—	false	Identifies the next element (or elements) in an alternate reading order of content which, at the user’s discretion, allows assistive technology to override the general default of reading in document source order.
aria-grabbed	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates an element’s “grabbed” state in a drag-and-drop operation. @deprecated in ARIA 1.1
aria-haspopup	`boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog" \| undefined`	—	false	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-hidden	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-invalid	`boolean \| "true" \| "false" \| "grammar" \| "spelling" \| undefined`	—	false	Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.
aria-keyshortcuts	`string \| undefined`	—	false	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
aria-label	`string \| undefined`	—	false	Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby	`string \| undefined`	—	false	Identifies the element (or elements) that labels the current element. @see aria-describedby.
aria-level	`number \| undefined`	—	false	Defines the hierarchical level of an element within a structure.
aria-live	`"off" \| "assertive" \| "polite" \| undefined`	—	false	Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
aria-modal	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates whether an element is modal when displayed.
aria-multiline	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates whether a text box accepts multiple lines of input or only a single line.
aria-multiselectable	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates that the user may select more than one item from the current selectable descendants.
aria-orientation	`"horizontal" \| "vertical" \| undefined`	—	false	Indicates whether the element’s orientation is horizontal, vertical, or unknown/ambiguous.
aria-owns	`string \| undefined`	—	false	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls.
aria-placeholder	`string \| undefined`	—	false	Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
aria-posinset	`number \| undefined`	—	false	Defines an element’s number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize.
aria-pressed	`boolean \| "true" \| "false" \| "mixed" \| undefined`	—	false	Indicates the current “pressed” state of toggle buttons. @see aria-checked @see aria-selected.
aria-readonly	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.
aria-relevant	`"text" \| "additions" \| "additions removals" \| "additions text" \| "all" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals" \| undefined`	—	false	Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.
aria-required	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates that user input is required on the element before a form may be submitted.
aria-roledescription	`string \| undefined`	—	false	Defines a human-readable, author-localized description for the role of an element.
aria-rowcount	`number \| undefined`	—	false	Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.
aria-rowindex	`number \| undefined`	—	false	Defines an element’s row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.
aria-rowspan	`number \| undefined`	—	false	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.
aria-selected	`boolean \| "true" \| "false" \| undefined`	—	false	Indicates the current “selected” state of various widgets. @see aria-checked @see aria-pressed.
aria-setsize	`number \| undefined`	—	false	Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset.
aria-sort	`"none" \| "ascending" \| "descending" \| "other" \| undefined`	—	false	Indicates if items in a table or grid are sorted in ascending or descending order.
aria-valuemax	`number \| undefined`	—	false	Defines the maximum allowed value for a range widget.
aria-valuemin	`number \| undefined`	—	false	Defines the minimum allowed value for a range widget.
aria-valuenow	`number \| undefined`	—	false	Defines the current value for a range widget. @see aria-valuetext.
aria-valuetext	`string \| undefined`	—	false	Defines the human readable text alternative of aria-valuenow for a range widget.
children	`ReactNode`	—	false	The content of the component.
dangerouslySetInnerHTML	`{ __html: string; } \| undefined`	—	false
onCopy	`((event: ClipboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onCopyCapture	`((event: ClipboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onCut	`((event: ClipboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onCutCapture	`((event: ClipboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPaste	`((event: ClipboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPasteCapture	`((event: ClipboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onCompositionEnd	`((event: CompositionEvent<HTMLDivElement>) => void) \| undefined`	—	false
onCompositionEndCapture	`((event: CompositionEvent<HTMLDivElement>) => void) \| undefined`	—	false
onCompositionStart	`((event: CompositionEvent<HTMLDivElement>) => void) \| undefined`	—	false
onCompositionStartCapture	`((event: CompositionEvent<HTMLDivElement>) => void) \| undefined`	—	false
onCompositionUpdate	`((event: CompositionEvent<HTMLDivElement>) => void) \| undefined`	—	false
onCompositionUpdateCapture	`((event: CompositionEvent<HTMLDivElement>) => void) \| undefined`	—	false
onFocus	`((event: FocusEvent<HTMLDivElement>) => void) \| undefined`	—	false
onFocusCapture	`((event: FocusEvent<HTMLDivElement>) => void) \| undefined`	—	false
onBlur	`((event: FocusEvent<HTMLDivElement>) => void) \| undefined`	—	false
onBlurCapture	`((event: FocusEvent<HTMLDivElement>) => void) \| undefined`	—	false
onChangeCapture	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
onBeforeInput	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
onBeforeInputCapture	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
onInput	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
onInputCapture	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
onReset	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
onResetCapture	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
onSubmit	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
onSubmitCapture	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
onInvalid	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
onInvalidCapture	`((event: FormEvent<HTMLDivElement>) => void) \| undefined`	—	false
onLoad	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onLoadCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onError	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onErrorCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onKeyDown	`((event: KeyboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onKeyDownCapture	`((event: KeyboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onKeyPress	`((event: KeyboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onKeyPressCapture	`((event: KeyboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onKeyUp	`((event: KeyboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onKeyUpCapture	`((event: KeyboardEvent<HTMLDivElement>) => void) \| undefined`	—	false
onAbort	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onAbortCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onCanPlay	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onCanPlayCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onCanPlayThrough	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onCanPlayThroughCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onDurationChange	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onDurationChangeCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onEmptied	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onEmptiedCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onEncrypted	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onEncryptedCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onEnded	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onEndedCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onLoadedData	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onLoadedDataCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onLoadedMetadata	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onLoadedMetadataCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onLoadStart	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onLoadStartCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onPause	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onPauseCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onPlay	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onPlayCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onPlaying	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onPlayingCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onProgress	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onProgressCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onRateChange	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onRateChangeCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onSeeked	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onSeekedCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onSeeking	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onSeekingCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onStalled	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onStalledCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onSuspend	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onSuspendCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onTimeUpdate	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onTimeUpdateCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onVolumeChange	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onVolumeChangeCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onWaiting	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onWaitingCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onAuxClick	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onAuxClickCapture	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onClick	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onClickCapture	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onContextMenu	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onContextMenuCapture	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onDoubleClick	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onDoubleClickCapture	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onDrag	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragCapture	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragEnd	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragEndCapture	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragEnter	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragEnterCapture	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragExit	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragExitCapture	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragLeave	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragLeaveCapture	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragOver	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragOverCapture	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragStart	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDragStartCapture	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDrop	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onDropCapture	`((event: DragEvent<HTMLDivElement>) => void) \| undefined`	—	false
onMouseDown	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onMouseDownCapture	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onMouseEnter	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onMouseLeave	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onMouseMove	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onMouseMoveCapture	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onMouseOut	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onMouseOutCapture	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onMouseOver	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onMouseOverCapture	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onMouseUp	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onMouseUpCapture	`((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) \| undefined`	—	false
onSelect	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onSelectCapture	`((event: SyntheticEvent<HTMLDivElement, Event>) => void) \| undefined`	—	false
onTouchCancel	`((event: TouchEvent<HTMLDivElement>) => void) \| undefined`	—	false
onTouchCancelCapture	`((event: TouchEvent<HTMLDivElement>) => void) \| undefined`	—	false
onTouchEnd	`((event: TouchEvent<HTMLDivElement>) => void) \| undefined`	—	false
onTouchEndCapture	`((event: TouchEvent<HTMLDivElement>) => void) \| undefined`	—	false
onTouchMove	`((event: TouchEvent<HTMLDivElement>) => void) \| undefined`	—	false
onTouchMoveCapture	`((event: TouchEvent<HTMLDivElement>) => void) \| undefined`	—	false
onTouchStart	`((event: TouchEvent<HTMLDivElement>) => void) \| undefined`	—	false
onTouchStartCapture	`((event: TouchEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerDown	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerDownCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerMove	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerMoveCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerUp	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerUpCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerCancel	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerCancelCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerEnter	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerEnterCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerLeave	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerLeaveCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerOver	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerOverCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerOut	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onPointerOutCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onGotPointerCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onGotPointerCaptureCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onLostPointerCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onLostPointerCaptureCapture	`((event: PointerEvent<HTMLDivElement>) => void) \| undefined`	—	false
onScroll	`((event: UIEvent<HTMLDivElement, UIEvent>) => void) \| undefined`	—	false
onScrollCapture	`((event: UIEvent<HTMLDivElement, UIEvent>) => void) \| undefined`	—	false
onWheel	`((event: WheelEvent<HTMLDivElement>) => void) \| undefined`	—	false
onWheelCapture	`((event: WheelEvent<HTMLDivElement>) => void) \| undefined`	—	false
onAnimationStart	`((event: AnimationEvent<HTMLDivElement>) => void) \| undefined`	—	false
onAnimationStartCapture	`((event: AnimationEvent<HTMLDivElement>) => void) \| undefined`	—	false
onAnimationEnd	`((event: AnimationEvent<HTMLDivElement>) => void) \| undefined`	—	false
onAnimationEndCapture	`((event: AnimationEvent<HTMLDivElement>) => void) \| undefined`	—	false
onAnimationIteration	`((event: AnimationEvent<HTMLDivElement>) => void) \| undefined`	—	false
onAnimationIterationCapture	`((event: AnimationEvent<HTMLDivElement>) => void) \| undefined`	—	false
onTransitionEnd	`((event: TransitionEvent<HTMLDivElement>) => void) \| undefined`	—	false
onTransitionEndCapture	`((event: TransitionEvent<HTMLDivElement>) => void) \| undefined`	—	false
elevation	`number \| undefined`	—	false	The elevation of the popover.
innerRef	`((instance: any) => void) \| RefObject<any> \| null \| undefined`	—	false
ref	`((instance: unknown) => void) \| RefObject<unknown> \| null \| undefined`	—	false
TransitionComponent	`ComponentClass<TransitionProps & { children?: ReactElement<any, any> \| undefined; }, any> \| FunctionComponent<TransitionProps & { children?: ReactElement<any, any> \| undefined; }> \| undefined`	—	false	The component used for the transition. Follow this guide to learn more about the requirements for this component.
TransitionProps	`TransitionProps \| undefined`	—	false	Props applied to the `Transition` element.
disablePortal	`boolean \| undefined`	—	false
onClose	`((event: {}, reason: "backdropClick" \| "escapeKeyDown") => void) \| undefined`	—	false	Callback fired when the component requests to be closed.
action	`((instance: PopoverActions \| null) => void) \| RefObject<PopoverActions> \| null \| undefined`	—	false	A ref for imperative actions. It currently only supports updatePosition() action.
onEnter	`((node: HTMLElement, isAppearing: boolean) => void) \| undefined`	—	false	Callback fired before the component is entering.
onEntering	`((node: HTMLElement, isAppearing: boolean) => void) \| undefined`	—	false	Callback fired when the component is entering.
onEntered	`((node: HTMLElement, isAppearing: boolean) => void) \| undefined`	—	false	Callback fired when the component has entered.
onExit	`((node: HTMLElement) => void) \| undefined`	—	false	Callback fired before the component is exiting.
onExiting	`((node: HTMLElement) => void) \| undefined`	—	false	Callback fired when the component is exiting.
onExited	`((node: HTMLElement) => void) \| undefined`	—	false	Callback fired when the component has exited.
BackdropComponent	`ComponentClass<BackdropProps, any> \| FunctionComponent<BackdropProps> \| undefined`	—	false
BackdropProps	`Partial<BackdropProps> \| undefined`	—	false
closeAfterTransition	`boolean \| undefined`	—	false
container	`Element \| Component<any, {}, any> \| (() => Element \| Component<any, {}, any> \| null) \| null \| undefined`	—	false	A HTML element, component instance, or function that returns either. The `container` will passed to the Modal component. By default, it uses the body of the anchorEl’s top-level document object, so it’s simply `document.body` most of the time.
disableAutoFocus	`boolean \| undefined`	—	false
disableBackdropClick	`boolean \| undefined`	—	false
disableEnforceFocus	`boolean \| undefined`	—	false
disableEscapeKeyDown	`boolean \| undefined`	—	false
disableRestoreFocus	`boolean \| undefined`	—	false
disableScrollLock	`boolean \| undefined`	—	false
hideBackdrop	`boolean \| undefined`	—	false
keepMounted	`boolean \| undefined`	—	false
manager	`ModalManager \| undefined`	—	false
onBackdropClick	`((event: SyntheticEvent<{}, Event>) => void) \| undefined`	—	false
onEscapeKeyDown	`((event: SyntheticEvent<{}, Event>) => void) \| undefined`	—	false
onRendered	`(() => void) \| undefined`	—	false
anchorEl	`Element \| ((element: Element) => Element) \| null \| undefined`	—	false	A HTML element, or a function that returns it. It’s used to set the position of the popover.
anchorOrigin	`PopoverOrigin \| undefined`	—	false	This is the point on the anchor where the popover’s `anchorEl` will attach to. This is not used when the anchorReference is ‘anchorPosition’. Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
anchorPosition	`PopoverPosition \| undefined`	—	false	This is the position that may be used to set the position of the popover. The coordinates are relative to the application’s client area.
anchorReference	`"none" \| "anchorEl" \| "anchorPosition" \| undefined`	—	false	This determines which anchor prop to refer to to set the position of the popover.
getContentAnchorEl	`((element: Element) => Element) \| null \| undefined`	—	false	This function is called in order to retrieve the content anchor element. It’s the opposite of the `anchorEl` prop. The content anchor element should be an element inside the popover. It’s used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element.
marginThreshold	`number \| undefined`	—	false	Specifies how close to the edge of the window the popover can appear.
PaperProps	`Partial<PaperProps> \| undefined`	—	false	Props applied to the `Paper` element.
transformOrigin	`PopoverOrigin \| undefined`	—	false	This is the point on the popover which will attach to the anchor’s origin. Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)].
transitionDuration	`number \| "auto" \| { appear?: number \| undefined; enter?: number \| undefined; exit?: number \| undefined; } \| { appear?: number \| undefined; enter?: number \| undefined; exit?: number \| undefined; } \| undefined`	—	false	Set to ‘auto’ to automatically calculate transition time based on height.

Playground

Basic

Hover

Context Menu

Properties

Option

Menu