LG-4121: consolidate changesets for popover refactor

.changeset/chat-fixed-chat-window.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/fixed-chat-window': patch
+---
+
+Fix storybook snapshot

.changeset/chat-input-bar.md

@@ -0,0 +1,10 @@
+---
+'@lg-chat/input-bar': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): `InputBar` renders results menu in top layer using popover API. As a result, the following props are deprecated and removed:
+- `portalClassName`
+- `portalContainer`
+- `portalRef`
+- `scrollContainer`
+- `usePortal`

.changeset/chip.md

@@ -0,0 +1,17 @@
+---
+'@leafygreen-ui/chip': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): Removes `popoverZIndex` prop because the `InlineDefinition` component instance will now render in the top layer
+
+#### Migration guide
+
+##### Old
+```js
+<Chip popoverZIndex={9999} />
+```
+
+##### New
+```js
+<Chip />
+```

.changeset/code.md

@@ -0,0 +1,26 @@
+---
+'@leafygreen-ui/code': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): `Code` renders the copy button tooltip and language selector in the top layer using popover API. As a result, the following props are removed:
+- `popoverZIndex`
+- `portalClassName`
+- `portalContainer`
+- `scrollContainer`
+- `usePortal`
+
+#### Migration guide
+
+Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.
+
+##### Old
+```js
+<Code popoverZIndex={9999} usePortal={false} />
+<Code portalClassName="portal-class" usePortal />
+```
+
+##### New
+```js
+<Code />
+<Code />
+```

.changeset/combobox.md

@@ -0,0 +1,23 @@
+---
+'@leafygreen-ui/combobox': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): Replaces `usePortal` prop with `renderMode` prop. `renderMode="inline"` and `renderMode="portal"` are deprecated, and all popover elements should migrate to using the top layer. The old default was `usePortal=true`, and the new default is `renderMode="top-layer"`. 
+
+See [@leafygreen-ui/popover package 12.0.0 changelog](https://github.com/mongodb/leafygreen-ui/blob/main/packages/popover/CHANGELOG.md#1200) for more info.
+
+#### Migration guide
+
+Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.
+
+##### Old
+```js
+<Combobox popoverZIndex={9999} usePortal={false} />
+<Combobox portalClassName="portal-class" usePortal />
+```
+
+##### New
+```js
+<Combobox popoverZIndex={9999} renderMode="inline" />
+<Combobox portalClassName="portal-class" renderMode="portal" />
+```

.changeset/copyable.md

@@ -0,0 +1,21 @@
+---
+'@leafygreen-ui/copyable': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): `Copyable` renders tooltip in the top layer using popover API. As a result, the `shouldTooltipUsePortal` prop is removed
+
+#### Migration guide
+
+Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.
+
+##### Old
+```js
+<Copyable shouldTooltipUsePortal={false} />
+<Copyable shouldTooltipUsePortal />
+```
+
+##### New
+```js
+<Copyable />
+<Copyable />
+```

.changeset/date-picker.md

@@ -0,0 +1,30 @@
+---
+'@leafygreen-ui/date-picker': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): `DatePicker` renders menu, month selector, and year selector in top layer using popover API. As a result, the following props are deprecated and removed:
+- `popoverZIndex`
+- `portalClassName`
+- `portalContainer`
+- `portalRef`
+- `scrollContainer`
+
+Additional changes include:
+- Deprecates and removes `justify="fit"`. Instead, use `justify="middle"`
+- Removes unused `contentClassName` prop
+
+#### Migration guide
+
+Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.
+
+##### Old
+```js
+<DatePicker portalContainer={containerRef} scrollContainer={containerRef} />
+<DatePicker portalClassName="portal-class" />
+```
+
+##### New
+```js
+<DatePicker />
+<DatePicker />
+```

.changeset/guide-cue.md

@@ -0,0 +1,26 @@
+---
+'@leafygreen-ui/guide-cue': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): `GuideCue` renders beacon and tooltip using popover API. As a result, the following props are removed:
+- `popoverZIndex`
+- `portalClassName`
+- `portalContainer`
+- `portalRef`
+- `scrollContainer`
+
+#### Migration guide
+
+Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.
+
+##### Old
+```js
+<GuideCue popoverZIndex={9999} usePortal={false} />
+<GuideCue portalContainer={containerRef} scrollContainer={containerRef} usePortal />
+```
+
+##### New
+```js
+<GuideCue />
+<GuideCue />
+```

.changeset/info-sprinkle.md

@@ -0,0 +1,31 @@
+---
+'@leafygreen-ui/info-sprinkle': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): `InfoSprinkle` renders tooltip in the top layer using popover API. As a result, the following props are removed:
+- `popoverZIndex`
+- `portalClassName`
+- `portalContainer`
+- `portalRef`
+- `scrollContainer`
+- `usePortal`
+
+Additional changes include:
+- Deprecates and removes `justify="fit"`. Instead, use `justify="middle"`
+- Opens tooltip immediately on hover instead of default 500ms delay
+
+#### Migration guide
+
+Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.
+
+##### Old
+```js
+<InfoSprinkle popoverZIndex={9999} usePortal={false} />
+<InfoSprinkle portalClassName="portal-class" usePortal />
+```
+
+##### New
+```js
+<InfoSprinkle />
+<InfoSprinkle />
+```

.changeset/inline-definition.md

@@ -0,0 +1,32 @@
+---
+'@leafygreen-ui/inline-definition': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): `InlineDefinition` renders tooltip in the top layer using popover API. As a result, the following props are removed:
+- `popoverZIndex`
+- `portalClassName`
+- `portalContainer`
+- `portalRef`
+- `scrollContainer`
+- `usePortal`
+
+Additional changes include:
+- Deprecates and removes `justify="fit"`. Instead, use `justify="middle"`
+- Opens tooltip immediately on hover instead of default 500ms delay
+- Reorganizes file structure
+
+#### Migration guide
+
+Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.
+
+##### Old
+```js
+<InlineDefinition popoverZIndex={9999} usePortal={false} />
+<InlineDefinition portalClassName="portal-class" usePortal />
+```
+
+##### New
+```js
+<InlineDefinition />
+<InlineDefinition />
+```

.changeset/lg-provider.md

@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/leafygreen-provider': minor
+---
+
+[LG-4446](https://jira.mongodb.org/browse/LG-4446): Adds `PopoverPropsContext` to pass props to a deeply nested popover element
+
+Additionally exposes a `forceUseTopLayer` prop in the `LeafyGreenProvider` which can be used to test interactions with all LG popover elements forcibly set to `renderMode="top-layer"`. This can help pressure test for any regressions to more confidently and safely migrate. However, this should only be used when all LG dependencies are relying on v12+ of `@leafygreen-ui/popover`.

.changeset/menu.md

@@ -0,0 +1,23 @@
+---
+'@leafygreen-ui/menu': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): Replaces `usePortal` prop with `renderMode` prop. `renderMode="inline"` and `renderMode="portal"` are deprecated, and all popover elements should migrate to using the top layer. The old default was `usePortal=true`, and the new default is `renderMode="top-layer"`. 
+
+See [@leafygreen-ui/popover package 12.0.0 changelog](https://github.com/mongodb/leafygreen-ui/blob/main/packages/popover/CHANGELOG.md#1200) for more info.
+
+#### Migration guide
+
+Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.
+
+##### Old
+```js
+<Menu popoverZIndex={9999} usePortal={false} />
+<Menu portalClassName="portal-class" usePortal />
+```
+
+##### New
+```js
+<Menu popoverZIndex={9999} renderMode="inline" />
+<Menu portalClassName="portal-class" renderMode="portal" />
+```

.changeset/number-input.md

@@ -0,0 +1,30 @@
+---
+'@leafygreen-ui/number-input': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): `NumberInput` renders unit selector and tooltip in the top layer using popover API. As a result, the following props are removed:
+- `popoverZIndex`
+- `portalClassName`
+- `portalContainer`
+- `portalRef`
+- `scrollContainer`
+- `usePortal`
+
+Additional changes include:
+- Opens tooltip immediately on hover instead of default 500ms delay
+
+#### Migration guide
+
+Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.
+
+##### Old
+```js
+<NumberInput popoverZIndex={9999} usePortal={false} />
+<NumberInput portalClassName="portal-class" usePortal />
+```
+
+##### New
+```js
+<NumberInput />
+<NumberInput />
+```

.changeset/pagination.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/pagination': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): `Pagination` renders page selectors in the top layer using popover API

.changeset/pink-worms-tap.md

@@ -1,12 +1,8 @@
 ---
-'@leafygreen-ui/popover': major
-'@leafygreen-ui/inline-definition': major
-'@leafygreen-ui/info-sprinkle': major
-'@leafygreen-ui/date-picker': major
-'@leafygreen-ui/copyable': major
-'@leafygreen-ui/tooltip': major
 '@leafygreen-ui/code': major
+'@leafygreen-ui/copyable': major
 '@leafygreen-ui/menu': major
+'@leafygreen-ui/tooltip': major
 ---
 
-[LG-4516](https://jira.mongodb.org/browse/LG-4516): Deprecates justify="fit"; use justify="middle" instead
+[LG-4516](https://jira.mongodb.org/browse/LG-4516): Deprecates and removes `justify="fit"`. Instead, use `justify="middle"`

.changeset/pipeline.md

@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/pipeline': major
+---
+
+[LG-4121](https://jira.mongodb.org/browse/LG-4121): `Pipeline` renders tooltip in the top layer using popover API
+
+Additionally, the tooltip opens immediately on hover instead of default 500ms delay

.changeset/popover.md

@@ -0,0 +1,69 @@
+---
+'@leafygreen-ui/popover': major
+---
+
+[LG-4445](https://jira.mongodb.org/browse/LG-4445): Replaces `usePortal` prop with `renderMode` prop with values of `'inline'`, `'portal'`, and `'top-layer'`. `renderMode="inline"` and `renderMode="portal"` are deprecated, and all popover elements should migrate to using the top layer. The old default was `usePortal=true`, and the new default is `renderMode="top-layer"`.
+  - When `renderMode="top-layer"` or `renderMode` is `undefined`, the popover element will render in the top layer using the [popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+    - Adds `dismissMode` prop to control dismissal behavior of the popover element. [Read more about the popover attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover)
+    - Adds `onToggle` prop to run a callback function when the visibility of a popover element rendered in the top layer is toggled
+  - When `renderMode="inline"`, the popover element will render inline in the DOM where it's written
+  - When `renderMode="portal"`, the popover element will portal into a new div appended to the body. Alternatively, it can be portaled into a provided `portalContainer` element
+
+[LG-4446](https://jira.mongodb.org/browse/LG-4446): The `PopoverPropsProvider` from the `@leafygreen-ui/leafygreen-provider` package can be used to pass props to a deeply nested popover element. It will read `PopoverPropsContext` values if an explicit prop is not defined in the popover component instance. This applies for the following props:
+  - `dismissMode`
+  - `onEnter`
+  - `onEntering`
+  - `onEntered`
+  - `onExit`
+  - `onExiting`
+  - `onExited`
+  - `onToggle`
+  - `popoverZIndex`
+  - `portalClassName`
+  - `portalContainer`
+  - `portalRef`
+  - `renderMode`
+  - `scrollContainer`
+  - `spacing`
+
+Additional changes include:
+- Adds and exports `getPopoverRenderModeProps` util to pick popover props based on given `renderMode` value
+- Deprecates and removes `justify="fit"`. Instead, use `justify="middle"`
+- Removes unused `contentClassName` prop
+- Updates default value of `spacing` prop from 10px to 4px
+- Replaces internal position utils with `@floating-ui/react`
+
+#### Migration guide
+
+Use [popover-v12 codemod](https://github.com/mongodb/leafygreen-ui/tree/main/tools/codemods#popover-v12) for migration assistance.
+
+##### Old
+```js
+<Popover popoverZIndex={9999} usePortal={false} />
+<Popover portalClassName="portal-class" usePortal />
+<Popover />
+```
+
+##### New
+```js
+<Popover popoverZIndex={9999} renderMode="inline" />
+<Popover portalClassName="portal-class" renderMode="portal" />
+<Popover renderMode="portal" />
+```
+
+##### Globally render popover elements in top layer
+After running the codemod and addressing manual updates, the new `forceUseTopLayer` prop in the `LeafyGreenProvider` can be used to test interactions with all LG popover elements forcibly set to `renderMode="top-layer"`. This can help pressure test for any regressions to more confidently and safely migrate.
+
+```js
+import Combobox from '@leafygreen-ui/combobox';
+import LeafyGreenProvider from '@leafygreen-ui/leafygreen-provider';
+import Popover from '@leafygreen-ui/popover';
+import Select from '@leafygreen-ui/select';
+
+{/* all LG popover elements will render in top layer */}
+<LeafyGreenProvider forceUseTopLayer={true}>
+  <Popover renderMode="inline" />
+  <Combobox renderMode="portal" />
+  <Select renderMode="inline" />
+</LeafyGreenProvider>;
+```