chore!: replace Popper with Floating UI (#1709)

see `docs/migration.md` for details

Author: jzempel

docs/migration.md

@@ -4,6 +4,19 @@
 
 ### Breaking Changes
 
+Garden has transitioned from utilizing [Popper](https://popper.js.org/docs/) to
+adopting the enhanced [Floating UI](https://floating-ui.com/) library. In the
+past, Popper's [modifiers](https://popper.js.org/docs/v2/modifiers/) were
+directly accessible as component props, creating a rigid dependency that
+hindered updates to the positioning library. To address this, these properties
+have been removed since Floating UI is designed to intuitively handle component
+positioning in the majority of scenarios. Should you find yourself in need of
+specific functionality provided by the former modifiers, we encourage you to
+file an [issue](https://github.com/zendeskgarden/react-components/issues),
+making sure to mention the relevant Floating UI
+[middleware](https://floating-ui.com/docs/middleware) for clarity. Garden will
+consider additional positioning prop support on a case-by-case basis.
+
 #### All Packages
 
 - Garden v9 packages use `styled-components` version range `^5.1.0`.
@@ -21,18 +34,42 @@
 
 #### @zendeskgarden/react-colorpickers
 
+- `ColorPickerDialog`: removed `popperModifiers` prop (see [note](#breaking-changes))
 - `ColorSwatch`
   - The new `name` prop is required because the refactored component is now
     backed by a native radio or checkbox group.
   - Removed `rowIndex`, `colIndex`, `defaultRowIndex`, and `defaultColIndex`.
     For the sake of accessibility, focus state should not be exposed or controlled.
-- `ColorSwatchDialog`: same breaking changes as `ColorSwatch`.
+- `ColorSwatchDialog`
+  - same breaking changes as `ColorSwatch`.
+  - `popperModifiers` prop (see [note](#breaking-changes))
+
+#### @zendeskgarden/react-datepickers
+
+- Removed `GardenPlacement` type export. Use `IDatePickerProps['placement']` instead.
+- `DatePicker`
+  - removed `eventsEnabled` prop (no longer exposed by Floating UI)
+  - removed `popperModifiers` prop (see [note](#breaking-changes))
+
+#### @zendeskgarden/react-dropdowns
+
+- `Menu`: value `auto` is no longer valid for the `fallbackPlacements` prop.
+
+#### @zendeskgarden/react-modals
+
+- `TooltipModal`: removed `popperModifiers` prop (see [note](#breaking-changes))
 
 #### @zendeskgarden/react-theming
 
 - Utility function `isRtl` has been removed. Use `props.theme.rtl` instead.
 - Utility function `getDocument` has been removed. Use `useDocument` instead.
 
+#### @zendeskgarden/react-tooltips
+
+- `Tooltip`
+  - removed `eventsEnabled` prop (no longer exposed by Floating UI)
+  - removed `popperModifiers` prop (see [note](#breaking-changes))
+
 #### @zendeskgarden/react-utilities
 
 - This package has been removed.

package-lock.json

@@ -17,7 +17,6 @@ import README from '../README.md';
     focusInset: { control: 'boolean' },
     hasArrow: { control: 'boolean' },
     isOpaque: { control: 'boolean' },
-    popperModifiers: { control: 'array' },
     zIndex: { control: 'number' }
   }}
   parameters={{

packages/colorpickers/demo/colorPickerDialog.stories.mdx

@@ -18,7 +18,6 @@ import README from '../README.md';
   argTypes={{
     focusInset: { control: 'boolean' },
     hasArrow: { control: 'boolean' },
-    popperModifiers: { control: 'array' },
     zIndex: { control: 'number' }
   }}
   parameters={{

packages/colorpickers/demo/colorSwatchDialog.stories.mdx

@@ -46,7 +46,6 @@ export const ColorSwatchDialog = forwardRef<HTMLDivElement, IColorSwatchDialogPr
       onSelect,
       hasArrow,
       isAnimated,
-      popperModifiers,
       zIndex,
       isOpen,
       focusInset,
@@ -161,7 +160,6 @@ export const ColorSwatchDialog = forwardRef<HTMLDivElement, IColorSwatchDialogPr
           focusOnMount={false}
           placement={placement}
           isAnimated={isAnimated}
-          popperModifiers={popperModifiers}
           referenceElement={referenceElement}
           onClose={closeDialog}
           aria-label={ariaLabelText}
@@ -192,7 +190,6 @@ ColorSwatchDialog.propTypes = {
   onDialogChange: PropTypes.func,
   disabled: PropTypes.bool,
   buttonProps: PropTypes.object,
-  popperModifiers: PropTypes.any,
   zIndex: PropTypes.number,
   hasArrow: PropTypes.bool,
   isAnimated: PropTypes.bool,

packages/colorpickers/src/elements/ColorSwatchDialog/index.tsx

@@ -45,7 +45,6 @@ export const ColorpickerDialog = forwardRef<HTMLDivElement, IColorpickerDialogPr
       isAnimated,
       isOpaque,
       isOpen,
-      popperModifiers,
       zIndex,
       focusInset,
       disabled,
@@ -125,7 +124,6 @@ export const ColorpickerDialog = forwardRef<HTMLDivElement, IColorpickerDialogPr
         <StyledTooltipModal
           ref={ref}
           hasArrow={hasArrow}
-          popperModifiers={popperModifiers}
           zIndex={zIndex}
           isAnimated={isAnimated}
           isOpaque={isOpaque}
@@ -164,7 +162,6 @@ ColorpickerDialog.propTypes = {
   disabled: PropTypes.bool,
   labels: PropTypes.object,
   buttonProps: PropTypes.object,
-  popperModifiers: PropTypes.any,
   zIndex: PropTypes.number,
   hasArrow: PropTypes.bool,
   isAnimated: PropTypes.bool,

packages/colorpickers/src/elements/ColorpickerDialog/index.tsx

@@ -78,10 +78,6 @@ export interface IColorpickerDialogProps extends IColorpickerProps {
   placement?: ITooltipModalProps['placement'];
   /** Disables the color dialog button */
   disabled?: boolean;
-  /**
-   * Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic
-   */
-  popperModifiers?: ITooltipModalProps['popperModifiers'];
   /**
    * Sets the `z-index` of the color dialog
    */
@@ -143,8 +139,6 @@ export interface IColorSwatchDialogProps extends IColorSwatchProps {
   placement?: ITooltipModalProps['placement'];
   /** Disables the color dialog button */
   disabled?: boolean;
-  /** Modifies [Popper instance](https://popper.js.org/docs/v2/modifiers/) to customize positioning logic */
-  popperModifiers?: ITooltipModalProps['popperModifiers'];
   /** Sets the `z-index` of the color dialog */
   zIndex?: ITooltipModalProps['zIndex'];
   /** Adds an arrow to the color dialog */

packages/colorpickers/src/types/index.ts

@@ -16,7 +16,7 @@ import README from '../README.md';
 <Canvas>
   <Story
     name="Datepicker"
-    args={{ dateStyle: DATE_STYLE_OPTIONS[1], eventsEnabled: true, isAnimated: true }}
+    args={{ dateStyle: DATE_STYLE_OPTIONS[1], isAnimated: true }}
     argTypes={{
       value: { control: 'date' },
       minValue: { control: 'date' },

packages/datepickers/demo/datepicker.stories.mdx

@@ -21,10 +21,11 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
+    "@floating-ui/react-dom": "^2.0.0",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "date-fns": "^3.0.0",
     "prop-types": "^15.5.7",
-    "react-popper": "^1.3.4"
+    "react-merge-refs": "^2.0.0"
   },
   "peerDependencies": {
     "@zendeskgarden/react-theming": "^8.1.0",

packages/datepickers/package.json

@@ -17,7 +17,7 @@ import { IDatepickerProps } from '../../types';
 
 const DEFAULT_DATE = new Date(2019, 1, 5);
 
-const Example = (props: IDatepickerProps) => (
+const Example = (props: Omit<IDatepickerProps, 'children'>) => (
   <>
     <label data-test-id="label" htmlFor="input">
       Label
@@ -440,7 +440,7 @@ describe('Datepicker', () => {
     });
   });
 
-  describe('Popper', () => {
+  describe('Calendar', () => {
     it('applies LTR classes by default', async () => {
       const { getByTestId } = render(<Example value={DEFAULT_DATE} />);