feat(floatingui): set floating-ui as a peer dependency (#313)

AmadeusITGroup · Dec 13, 2023 · 5d4649a · 5d4649a
1 parent 8a8d8a6
commit 5d4649a
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 46 deletions.
diff --git a/angular/demo/package.json b/angular/demo/package.json
@@ -24,6 +24,7 @@
 		"@angular/platform-browser": "^17.0.6",
 		"@angular/platform-browser-dynamic": "^17.0.6",
 		"@angular/router": "^17.0.6",
+		"@floating-ui/dom": "^1.5.3",
 		"rxjs": "^7.8.1",
 		"tslib": "^2.6.2",
 		"zone.js": "~0.14.2"

diff --git a/angular/demo/src/app/samples/floatingUI/floatingUI.route.ts b/angular/demo/src/app/samples/floatingUI/floatingUI.route.ts
@@ -1,5 +1,6 @@
-import {AgnosUIAngularModule, createFloatingUI, floatingUI, toAngularSignal} from '@agnos-ui/angular';
+import {AgnosUIAngularModule, createFloatingUI, toAngularSignal} from '@agnos-ui/angular';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {autoPlacement, hide, offset, shift} from '@floating-ui/dom';
 
 const scrollToMiddle = (element: HTMLElement) => {
 	element.scrollTo({left: 326, top: 420});
@@ -39,12 +40,12 @@ export default class FloatingUIComponent {
 			},
 			computePositionOptions: {
 				middleware: [
-					floatingUI.offset(10),
-					floatingUI.autoPlacement(),
-					floatingUI.shift({
+					offset(10),
+					autoPlacement(),
+					shift({
 						padding: 5,
 					}),
-					floatingUI.hide(),
+					hide(),
 				],
 			},
 		},

diff --git a/angular/lib/src/select/select.component.ts b/angular/lib/src/select/select.component.ts
@@ -1,12 +1,4 @@
-import type {
-	AdaptSlotContentProps,
-	ItemContext,
-	SelectItemContext,
-	SelectWidget,
-	SlotContent,
-	WidgetState,
-	floatingUI,
-} from '@agnos-ui/angular-headless';
+import type {AdaptSlotContentProps, ItemContext, SelectItemContext, SelectWidget, SlotContent, WidgetState} from '@agnos-ui/angular-headless';
 import {
 	SlotDirective,
 	UseDirective,
@@ -21,6 +13,7 @@ import {
 } from '@agnos-ui/angular-headless';
 import type {AfterContentChecked, OnChanges, Signal, SimpleChanges} from '@angular/core';
 import {ChangeDetectionStrategy, Component, ContentChild, Directive, EventEmitter, Input, Output, TemplateRef, inject} from '@angular/core';
+import type {Placement} from '@floating-ui/dom';
 
 @Directive({selector: 'ng-template[auSelectBadgeLabel]', standalone: true})
 export class SelectBadgeLabelDirective<Item> {
@@ -119,7 +112,7 @@ export class SelectComponent<Item> implements OnChanges, AfterContentChecked {
 	 * List of allowed placements for the dropdown.
 	 * This refers to the [allowedPlacements from floating UI](https://floating-ui.com/docs/autoPlacement#allowedplacements), given the different [Placement possibilities](https://floating-ui.com/docs/computePosition#placement).
 	 */
-	@Input('auAllowedPlacements') allowedPlacements: floatingUI.Placement[] | undefined;
+	@Input('auAllowedPlacements') allowedPlacements: Placement[] | undefined;
 
 	/**
 	 * true if the select is open

diff --git a/core/package.json b/core/package.json
@@ -50,11 +50,13 @@
 		"test:coverage": "node -r @agnos-ui/code-coverage/interceptReadFile ../node_modules/vitest/vitest.mjs run --coverage"
 	},
 	"dependencies": {
-		"@amadeus-it-group/tansu": "0.0.24",
-		"@floating-ui/dom": "^1.5.3"
+		"@amadeus-it-group/tansu": "0.0.24"
 	},
 	"devDependencies": {
 		"eslint-plugin-jsdoc": "^46.9.0"
 	},
+	"peerDependencies": {
+		"@floating-ui/dom": "*"
+	},
 	"sideEffects": false
 }
diff --git a/core/src/components/select/select.ts b/core/src/components/select/select.ts
@@ -1,6 +1,8 @@
 import {asWritable, computed, writable} from '@amadeus-it-group/tansu';
+import type {Placement} from '@floating-ui/dom';
+import {autoPlacement, offset, size} from '@floating-ui/dom';
 import type {FloatingUI} from '../../services/floatingUI';
-import {createFloatingUI, floatingUI} from '../../services/floatingUI';
+import {createFloatingUI} from '../../services/floatingUI';
 import type {HasFocus} from '../../services/focustrack';
 import {createHasFocus} from '../../services/focustrack';
 import type {PropsConfig, SlotContent, Widget, WidgetSlotContext} from '../../types';
@@ -94,7 +96,7 @@ export interface SelectProps<T> extends SelectCommonPropsAndState<T> {
 	 * List of allowed placements for the dropdown.
 	 * This refers to the [allowedPlacements from floating UI](https://floating-ui.com/docs/autoPlacement#allowedplacements), given the different [Placement possibilities](https://floating-ui.com/docs/computePosition#placement).
 	 */
-	allowedPlacements: floatingUI.Placement[];
+	allowedPlacements: Placement[];
 
 	/**
 	 * Custom function to get the id of an item
@@ -163,7 +165,7 @@ export interface SelectState<Item> extends SelectCommonPropsAndState<Item> {
 	/**
 	 * Current placement of the dropdown
 	 */
-	placement: floatingUI.Placement | undefined;
+	placement: Placement | undefined;
 }
 
 export interface SelectApi<Item> {
@@ -420,11 +422,11 @@ export function createSelect<Item>(config?: PropsConfig<SelectProps<Item>>): Sel
 			computePositionOptions: asWritable(
 				computed(() => ({
 					middleware: [
-						floatingUI.offset(5),
-						floatingUI.autoPlacement({
+						offset(5),
+						autoPlacement({
 							allowedPlacements: allowedPlacements$(),
 						}),
-						floatingUI.size(),
+						size(),
 					],
 				})),
 			),

diff --git a/core/src/services/floatingUI.ts b/core/src/services/floatingUI.ts
@@ -1,13 +1,10 @@
 import {computed, derived} from '@amadeus-it-group/tansu';
 import type {ArrowOptions, AutoUpdateOptions, ComputePositionConfig, ComputePositionReturn, Derivable} from '@floating-ui/dom';
 import {arrow, autoUpdate, computePosition} from '@floating-ui/dom';
+import type {PropsConfig} from '../types';
 import {createStoreDirective, directiveSubscribe, mergeDirectives} from '../utils/directive';
-import {stateStores, writablesForProps} from '../utils/stores';
-
-import * as floatingUI from '@floating-ui/dom';
 import {promiseStoreToValueStore} from '../utils/internal/promise';
-import type {PropsConfig} from '../types';
-export {floatingUI};
+import {stateStores, writablesForProps} from '../utils/stores';
 
 export interface FloatingUIProps {
 	/**

diff --git a/package-lock.json b/package-lock.json
diff --git a/react/demo/package.json b/react/demo/package.json
@@ -25,6 +25,7 @@
 		"@agnos-ui/react": "*",
 		"@agnos-ui/style-bootstrap": "*",
 		"@amadeus-it-group/tansu": "0.0.24",
+		"@floating-ui/dom": "^1.5.3",
 		"classnames": "^2.3.2"
 	},
 	"peerDependencies": {

diff --git a/react/demo/src/app/samples/floatingUI/FloatingUI.route.tsx b/react/demo/src/app/samples/floatingUI/FloatingUI.route.tsx
@@ -1,5 +1,6 @@
 import '@agnos-ui/common/samples/floatingui/floatingui.scss';
-import {createFloatingUI, floatingUI, useDirective, useObservable} from '@agnos-ui/react';
+import {createFloatingUI, useDirective, useObservable} from '@agnos-ui/react';
+import {autoPlacement, hide, offset, shift} from '@floating-ui/dom';
 import {useMemo, useState} from 'react';
 
 const scrollToMiddle = (element: HTMLElement) => {
@@ -17,12 +18,12 @@ const FloatingUI = () => {
 					},
 					computePositionOptions: {
 						middleware: [
-							floatingUI.offset(10),
-							floatingUI.autoPlacement(),
-							floatingUI.shift({
+							offset(10),
+							autoPlacement(),
+							shift({
 								padding: 5,
 							}),
-							floatingUI.hide(),
+							hide(),
 						],
 					},
 				},

diff --git a/svelte/demo/package.json b/svelte/demo/package.json
@@ -12,7 +12,8 @@
 		"check": "svelte-check --fail-on-warnings --output human-verbose"
 	},
 	"dependencies": {
-		"@amadeus-it-group/tansu": "0.0.24"
+		"@amadeus-it-group/tansu": "0.0.24",
+		"@floating-ui/dom": "^1.5.3"
 	},
 	"devDependencies": {
 		"@sveltejs/package": "^2.2.3",

diff --git a/svelte/demo/src/app/samples/floatingUI/FloatingUI.route.svelte b/svelte/demo/src/app/samples/floatingUI/FloatingUI.route.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '@agnos-ui/common/samples/floatingui/floatingui.scss';
-	import {createFloatingUI, floatingUI} from '@agnos-ui/core';
+	import {createFloatingUI} from '@agnos-ui/core';
+	import {autoPlacement, hide, offset, shift} from '@floating-ui/dom';
 
 	const {
 		directives: {floatingDirective, referenceDirective, arrowDirective},
@@ -12,12 +13,12 @@
 			},
 			computePositionOptions: {
 				middleware: [
-					floatingUI.offset(10),
-					floatingUI.autoPlacement(),
-					floatingUI.shift({
+					offset(10),
+					autoPlacement(),
+					shift({
 						padding: 5,
 					}),
-					floatingUI.hide(),
+					hide(),
 				],
 			},
 		},