feat: React DOM Interactions package (floating-ui#1585)

Author: atomiks

.config/tsconfig.json

@@ -2,14 +2,16 @@
   "include": ["../packages/**/src/**/*.ts"],
   "exclude": ["../**/*.test.ts"],
   "compilerOptions": {
-    "target": "es2015",
-    "lib": ["dom", "es2017"],
+    "target": "es2021",
+    "lib": ["dom", "es2021"],
     "moduleResolution": "node",
     "module": "es2015",
     "removeComments": false,
     "skipLibCheck": true,
     "declaration": true,
     "emitDeclarationOnly": true,
-    "outDir": "../packages"
+    "jsx": "react-jsx",
+    "outDir": "../packages",
+    "allowSyntheticDefaultImports": true
   }
 }

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
   },

README.md

@@ -1,38 +1,70 @@
 <p align="center">
-  <img height="300" src="https://github.com/atomiks/floating-ui/blob/main/website/assets/logo.png" alt="Floating UI">
+  <img height="560" src="https://github.com/floating-ui/floating-ui/blob/master/website/assets/floating-ui-banner.png" alt="Floating UI">
 <p>
-  
-> **Popper is now Floating UI! For Popper v2, visit [its dedicated branch.](https://github.com/floating-ui/popper-core/tree/v2.x)**
 
-[![Rolling Versions](https://img.shields.io/badge/Rolling%20Versions-Enabled-brightgreen)](https://rollingversions.com/floating-ui/floating-ui)
+> **Popper is now Floating UI! For Popper v2, visit
+> [its dedicated branch.](https://github.com/floating-ui/floating-ui/tree/v2.x)**
 
-[Website](https://floating-ui.com)
+[Floating UI](https://floating-ui.com) is a low-level library for creating
+"floating" elements like tooltips, popovers, dropdowns, menus, and more.
 
-Floating UI is a low-level library for positioning "floating" elements like
-tooltips, popovers, dropdowns, menus and more while intelligently keeping them
-in view.
+The library provides two key functionalities:
 
-Challenges arise when positioning floating elements as they get taken out of the
-normal layout flow of a document, leading to issues with clipping and overflow,
-which is where this library can help!
+- **Positioning primitives**: Ensure your floating element is positioned
+  optimally in the viewport for the user (placement, overflow
+  prevention/clipping detection, and more).
+- **Interaction primitives**: Add accessible interactions that power floating
+  elements (event listeners, dismissing, ARIA attributes, focus trapping, list
+  navigation, and more).
 
-- **Tiny**: 600-byte core with highly modular architecture for tree-shaking
-- **Low-level**: Granular control over positioning behavior
-- **Pure**: Predictable and side-effect free
-- **Extensible**: Powerful middleware system
-- **Platform-agnostic**: Runs on any JavaScript environment which provides
-  measurement APIs, including the web and React Native
+The positioning engine features a tiny 600-byte core with strong tree-shaking
+support, is extensible through custom middleware, and can support any platform.
 
-## Installation
+## Install
 
-To use it on the web:
+Choose the package that suits you.
+
+### Vanilla DOM positioning engine
+
+Use with vanilla JavaScript or a non-React framework
+([view tutorial](https://floating-ui.com/docs/tutorial)).
 
 ```shell
 npm install @floating-ui/dom
 ```
 
+### React DOM positioning engine
+
+Use with React DOM ([view docs](https://floating-ui.com/docs/react-dom)).
+
 ```shell
-yarn add @floating-ui/dom
+npm install @floating-ui/react-dom
+```
+
+### React DOM interactions and positioning engine
+
+Primitive hooks and components, in addition to the positioning engine, to use
+with React DOM
+([view docs](https://floating-ui.com/docs/react-dom-interactions)).
+
+```shell
+npm install @floating-ui/react-dom-interactions
+```
+
+### React Native positioning engine
+
+Use with React Native ([view docs](https://floating-ui.com/docs/react-native)).
+
+```shell
+npm install @floating-ui/react-native
+```
+
+### Canvas or other platforms
+
+Learn about creating a [Platform](https://floating-ui.com/docs/platform).
+
+```shell
+npm install @floating-ui/core
 ```
 
 ## Quick start
@@ -62,33 +94,20 @@ computePosition(referenceElement, floatingElement, {
 
 ## Development and production builds
 
-Floating UI is published with default, development, and
-production builds, using Node's support for
+Floating UI is published with default, development, and production builds, using
+Node's support for
 [export conditions](https://nodejs.org/api/packages.html#packages_conditional_exports).
 
-- `"default"`: uses `process.env.NODE_ENV`, in which
-  your bundler handles the env variable, dead code elimination,
-  and minification
+- `"default"`: uses `process.env.NODE_ENV`, in which your bundler handles the
+  env variable, dead code elimination, and minification
 - `"production"`: minified with no debug logging
 - `"development"`: unminified with debug logging
 
-If you're using a bundler like webpack, Vite, or Parcel, this is
-handled for you **automatically**.
+If you're using a bundler like webpack, Vite, or Parcel, this is handled for you
+**automatically**.
 
-If this is not handled, you must opt into one of the builds in
-tools that support export conditions. This is done differently
-for each tool.
-
-## React
-
-- [React DOM](https://floating-ui.com/docs/react-dom)
-- [React Native](https://floating-ui.com/docs/react-native) (\*experimental)
-
-## Components
-
-Right now, Floating UI focuses on positioning floating elements, but a package
-that exposes higher-level primitives for building these elements more easily is
-in development.
+If this is not handled, you must opt into one of the builds in tools that
+support export conditions. This is done differently for each tool.
 
 ## Contributing
 
@@ -119,6 +138,13 @@ as much as possible.
 `npm -w website run dev` in the root will launch the website at
 `localhost:3000`.
 
+## Credits
+
+The floating shapes in the banner image are made by the amazing artists
+[@artstar3d](https://figma.com/@artstar3d),
+[@killnicole](https://figma.com/@killnicole) and
+[@liiiiiiii](https://www.figma.com/@liiiiiii) on Figma — check out their work!
+
 ## License
 
 MIT