import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Components/OverflowMenu/Feature Flag" name="Flag details" />

# OverflowMenu

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/OverflowMenu/next)

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
- [Menu Alignment](#menu-alignment)
- [menuTarget Prop](#menutarget-prop)
- [Dynamically set floating styles](#dynamically-set-floating-styles)
- [Enable dynamic setting of floating styles](#enable-dynamic-setting-of-floating-styles)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

This version of the `OverflowMenu` can be enabled by using the
`enable-v12-overflowmenu` feature flag and supports all
[subcomponents of `Menu`](/docs/components-menu--default#subcomponents).

```jsx
<FeatureFlags enableV12OverflowMenu>
  <OverflowMenu label="Primary action">
    <MenuItem label="Stop app" />
    <MenuItem label="Restart app" />
    <MenuItem label="Rename app" />
    <MenuItem label="Edit routes and access" />
    <MenuItemDivider />
    <MenuItem label="Delete app" kind="danger" />
  </OverflowMenu>
</FeatureFlags>
```

## Menu Alignment

The `menuAlignment` prop enables you to define the placement of the Menu in
relation to the `OverflowMenu`. For instance, setting
`menuAlignment="top-start"` on the `OverflowMenu` will render the Menu above the
button.

If it seems your specified `menuAlignment` isn't working, it's because we
prioritize ensuring the Menu remains visible. We calculate the optimal position
to display the Menu in case the provided `menuAlignment` obscures it.

We encourage you to play around in the Storybook Default stories to better
understand the `menuAlignment` prop.

## menuTarget Prop

The `menuTarget` prop specifies where the `OverflowMenu` should render, which is
particularly useful when using `OverflowMenu` inside a modal. By default, the
menu renders in `document.body`, but this can disrupt focus order in modals or
other components with focus management.

Pass the `menuTarget` prop to render the `OverflowMenu` inside the modal or any
specific element where you want it to render:

## Dynamically set floating styles

Components with `autoAlign` use the
[`floating-ui`](https://github.com/floating-ui/floating-ui) library to handle
the dynamic positioning of floating elements relative to their trigger / anchor
element. This also includes collision detection that repositions the floating
element as necessary to keep it visible within the viewport. In the majority of
cases, the styling from the `floating-ui` 'fixed' positioning strategy prevents
the floating element from being
[clipped](https://floating-ui.com/docs/misc#clipping) by an ancestor element.

The `enable-v12-dynamic-floating-styles` flag enables this dynamic styling
without the collision detection.

**Note**: The flag has no effect when used with `autoAlign` because `autoAlign`
includes both the dynamic positioning styles and collision detection.

To use `autoAlign` your project needs to be using React v17+, see
https://github.com/carbon-design-system/carbon/issues/18714.

## Enable dynamic setting of floating styles

```js
<FeatureFlags enableV12DynamicFloatingStyles>
  <OverflowMenu>
    <MenuItem label="Stop app" />
    <MenuItem label="Restart app" />
    <MenuItem label="Rename app" />
    <MenuItem label="Edit routes and access" />
    <MenuItemDivider />
    <MenuItem label="Delete app" kind="danger" />
  </OverflowMenu>
</FeatureFlags>
```

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/OverflowMenu/next/OverflowMenu.mdx).
