@agnos-ui/core 0.0.1-alpha.4 → 0.0.1-alpha.5

package/package.json

@@ -21,19 +21,46 @@
 		".": {
 			"types": "./index.d.ts",
 			"default": "./index.js"
+		},
+		"./components/*": {
+			"types": "./components/*/*.d.ts",
+			"default": "./components/*/*.js"
+		},
+		"./config": {
+			"types": "./config.d.ts",
+			"default": "./config.js"
+		},
+		"./types": {
+			"types": "./types.d.ts",
+			"default": "./types.js"
+		},
+		"./services/*": {
+			"types": "./services/*.d.ts",
+			"default": "./services/*.js"
+		},
+		"./services/transitions/*": {
+			"types": "./services/transitions/*.d.ts",
+			"default": "./services/transitions/*.js"
+		},
+		"./utils/*": {
+			"types": "./utils/*.d.ts",
+			"default": "./utils/*.js"
 		}
 	},
 	"dependencies": {
-		"@amadeus-it-group/tansu": "0.0.23"
+		"@amadeus-it-group/tansu": "0.0.24"
+	},
+	"peerDependencies": {
+		"@floating-ui/dom": "*"
 	},
 	"sideEffects": false,
-	"version": "0.0.1-alpha.4",
+	"version": "0.0.1-alpha.5",
 	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
 	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/AmadeusITGroup/AgnosUI.git",
-		"directory": "core/lib"
+		"directory": "core"
 	}
 }

package/services/extendWidget.d.ts

@@ -0,0 +1,23 @@
+import type { ConfigValidator, SlotContent, Widget, WidgetFactory, WidgetProps, WidgetSlotContext, WidgetState } from '../types';
+/**
+ * Type extending the original Widget props and state with ExtraProps
+ */
+export type ExtendWidgetProps<W extends Widget, ExtraProps extends object> = Widget<ExtendWidgetAdaptSlotWidgetProps<WidgetProps<W>, ExtraProps>, ExtendWidgetAdaptSlotWidgetProps<WidgetState<W>, ExtraProps>, W['api'], W['actions'], W['directives']>;
+/**
+ * Type replacing the original Props with WidgetSlotContext contaning ExtraProps
+ */
+export type ExtendWidgetAdaptSlotContentProps<Props extends Record<string, any>, ExtraProps extends object> = Props extends WidgetSlotContext<infer U> ? WidgetSlotContext<ExtendWidgetProps<U, ExtraProps>> & Omit<Props, keyof WidgetSlotContext<any>> : Props;
+/**
+ * Type enriching the original widget slot Props with ExtraProps slots
+ */
+export type ExtendWidgetAdaptSlotWidgetProps<Props, ExtraProps extends object> = Omit<Props, `slot${string}`> & ExtraProps & {
+    [K in keyof Props & `slot${string}`]: Props[K] extends SlotContent<infer U> ? SlotContent<ExtendWidgetAdaptSlotContentProps<U, ExtraProps>> : Props[K];
+};
+/**
+ * Method to extend the original widget with extra props with validator
+ * @param factory - original widget factory
+ * @param extraPropsDefaults - object containing default value for each extra prop
+ * @param extraPropsConfig - object verifying the type of each extra prop
+ * @returns widget factory with the extra props
+ */
+export declare const extendWidgetProps: <W extends Widget<object, object, object, object, object>, ExtraProps extends object>(factory: WidgetFactory<W>, extraPropsDefaults: ExtraProps, extraPropsConfig?: ConfigValidator<ExtraProps> | undefined) => WidgetFactory<ExtendWidgetProps<W, ExtraProps>>;

package/{extendWidget.js → services/extendWidget.js}

@@ -1,5 +1,12 @@
 import { batch } from '@amadeus-it-group/tansu';
-import { stateStores, writablesWithDefault } from './services/stores';
+import { stateStores, writablesWithDefault } from '../utils/stores';
+/**
+ * Method to extend the original widget with extra props with validator
+ * @param factory - original widget factory
+ * @param extraPropsDefaults - object containing default value for each extra prop
+ * @param extraPropsConfig - object verifying the type of each extra prop
+ * @returns widget factory with the extra props
+ */
 export const extendWidgetProps = (factory, extraPropsDefaults, extraPropsConfig) => (propsConfig) => {
     const extraPropsWritables = writablesWithDefault(extraPropsDefaults, propsConfig, extraPropsConfig);
     const widget = factory(propsConfig);

package/services/floatingUI.d.ts

@@ -0,0 +1,48 @@
+import type { ArrowOptions, AutoUpdateOptions, ComputePositionConfig, Derivable } from '@floating-ui/dom';
+import type { PropsConfig } from '../types';
+export interface FloatingUIProps {
+    /**
+     * Options to use when calling computePosition from Floating UI
+     */
+    computePositionOptions: ComputePositionConfig;
+    /**
+     * Options to use when calling autoUpdate from Floating UI
+     */
+    autoUpdateOptions: AutoUpdateOptions;
+    /**
+     * Options to use when calling the arrow middleware from Floating UI
+     */
+    arrowOptions: Omit<ArrowOptions, 'element'> | Derivable<Omit<ArrowOptions, 'element'>>;
+}
+export type FloatingUI = ReturnType<typeof createFloatingUI>;
+export declare const createFloatingUI: (propsConfig?: PropsConfig<FloatingUIProps>) => {
+    directives: {
+        /**
+         * Directive to be used on the reference element from where the floating element will be positioned
+         */
+        referenceDirective: import("../types").Directive;
+        /**
+         * Directive to be used on the floating element
+         */
+        floatingDirective: import("../types").Directive<void>;
+        /**
+         * Directive to be used on the arrow element, if any
+         */
+        arrowDirective: import("../types").Directive<void>;
+    };
+    state$: import("@amadeus-it-group/tansu").ReadableSignal<import("../utils/stores").ToState<{
+        x$: import("@amadeus-it-group/tansu").ReadableSignal<number | undefined>;
+        y$: import("@amadeus-it-group/tansu").ReadableSignal<number | undefined>;
+        strategy$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/utils").Strategy | undefined>;
+        placement$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/utils").Placement | undefined>;
+        middlewareData$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/core").MiddlewareData | undefined>;
+    }>>;
+    stores: {
+        x$: import("@amadeus-it-group/tansu").ReadableSignal<number | undefined>;
+        y$: import("@amadeus-it-group/tansu").ReadableSignal<number | undefined>;
+        strategy$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/utils").Strategy | undefined>;
+        placement$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/utils").Placement | undefined>;
+        middlewareData$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/core").MiddlewareData | undefined>;
+    };
+    patch: <U extends Partial<FloatingUIProps>>(storesValues?: void | U | undefined) => void;
+};

package/services/floatingUI.js

@@ -0,0 +1,97 @@
+import { computed, derived } from '@amadeus-it-group/tansu';
+import { arrow, autoUpdate, computePosition } from '@floating-ui/dom';
+import { createStoreDirective, directiveSubscribe, mergeDirectives } from '../utils/directive';
+import { promiseStoreToValueStore } from '../utils/internal/promise';
+import { stateStores, writablesForProps } from '../utils/stores';
+const defaultConfig = {
+    computePositionOptions: {},
+    autoUpdateOptions: {},
+    arrowOptions: {},
+};
+export const createFloatingUI = (propsConfig) => {
+    const [{ autoUpdateOptions$, computePositionOptions$: computePositionInputOptions$, arrowOptions$: arrowInputOptions$ }, patch] = writablesForProps(defaultConfig, propsConfig);
+    const { directive: floatingDirective, element$: floatingElement$ } = createStoreDirective();
+    const { directive: referenceDirective, element$: referenceElement$ } = createStoreDirective();
+    const { directive: arrowDirective, element$: arrowElement$ } = createStoreDirective();
+    const arrowOptions$ = computed(() => {
+        const arrowElement = arrowElement$();
+        if (!arrowElement) {
+            return null;
+        }
+        const arrowInputOptions = arrowInputOptions$();
+        return typeof arrowInputOptions === 'function'
+            ? (state) => ({ ...arrowInputOptions(state), element: arrowElement })
+            : { ...arrowInputOptions, element: arrowElement };
+    });
+    const computePositionOptions$ = computed(() => {
+        let options = computePositionInputOptions$();
+        const arrowOptions = arrowOptions$();
+        if (arrowOptions) {
+            options = {
+                ...options,
+                middleware: [...(options.middleware ?? []), arrow(arrowOptions)],
+            };
+        }
+        return options;
+    });
+    const promisePosition$ = derived([floatingElement$, referenceElement$, computePositionOptions$, autoUpdateOptions$], ([floatingElement, referenceElement, computePositionOptions, autoUpdateOptions], set) => {
+        if (floatingElement && referenceElement) {
+            const clean = autoUpdate(referenceElement, floatingElement, () => {
+                set(computePosition(referenceElement, floatingElement, computePositionOptions));
+            }, autoUpdateOptions);
+            return () => {
+                set(null);
+                clean();
+            };
+        }
+        return undefined;
+    }, null);
+    const position$ = promiseStoreToValueStore(promisePosition$, null);
+    const placement$ = computed(() => position$()?.placement);
+    const middlewareData$ = computed(() => position$()?.middlewareData);
+    const x$ = computed(() => position$()?.x);
+    const y$ = computed(() => position$()?.y);
+    const strategy$ = computed(() => position$()?.strategy);
+    const arrowX$ = computed(() => middlewareData$()?.arrow?.x);
+    const arrowY$ = computed(() => middlewareData$()?.arrow?.y);
+    const floatingStyleApplyAction$ = computed(() => {
+        const floatingElement = floatingElement$();
+        if (floatingElement) {
+            floatingElement.style.left = `${x$() ?? 0}px`;
+            floatingElement.style.top = `${y$() ?? 0}px`;
+        }
+    });
+    const arrowStyleApplyAction$ = computed(() => {
+        const arrowElement = arrowElement$();
+        if (arrowElement) {
+            const arrowX = arrowX$();
+            const arrowY = arrowY$();
+            arrowElement.style.left = arrowX != null ? `${arrowX}px` : '';
+            arrowElement.style.top = arrowY != null ? `${arrowY}px` : '';
+        }
+    });
+    return {
+        patch,
+        ...stateStores({
+            x$,
+            y$,
+            strategy$,
+            placement$,
+            middlewareData$,
+        }),
+        directives: {
+            /**
+             * Directive to be used on the reference element from where the floating element will be positioned
+             */
+            referenceDirective,
+            /**
+             * Directive to be used on the floating element
+             */
+            floatingDirective: mergeDirectives(floatingDirective, directiveSubscribe(floatingStyleApplyAction$)),
+            /**
+             * Directive to be used on the arrow element, if any
+             */
+            arrowDirective: mergeDirectives(arrowDirective, directiveSubscribe(arrowStyleApplyAction$)),
+        },
+    };
+};

package/services/focustrack.js

@@ -1,5 +1,5 @@
 import { computed, readable } from '@amadeus-it-group/tansu';
-import { createStoreArrayDirective } from './directiveUtils';
+import { createStoreArrayDirective } from '../utils/directive';
 const evtFocusIn = 'focusin';
 const evtFocusOut = 'focusout';
 export const activeElement$ = readable(null, {

package/services/intersection.d.ts

@@ -1,4 +1,4 @@
-import type { PropsConfig } from './stores';
+import type { PropsConfig } from '../types';
 export interface IntersectionProps {
     /**
      * elements to observe

package/services/intersection.js

@@ -1,6 +1,6 @@
 import { asReadable, derived } from '@amadeus-it-group/tansu';
-import { noop } from '../utils';
-import { writablesForProps } from './stores';
+import { noop } from '../utils/internal/func';
+import { writablesForProps } from '../utils/stores';
 const defaultValues = {
     elements: [],
     options: undefined,

package/services/navManager.d.ts

@@ -1,5 +1,87 @@
 import type { Directive } from '../types';
 export type NavManager = ReturnType<typeof createNavManager>;
+/**
+ * Returns the key name given the keyboard event. The key name is built using event.key (such as ArrowLeft, PageDown...),
+ * prefixed with the modifiers. If present, modifiers are always in the same order: Meta+Ctrl+Alt+Shift+...
+ * @param event - keyboard event
+ * @returns the name of the key, including modifiers
+ */
+export declare const getKeyName: (event: KeyboardEvent) => string;
+/**
+ * Returns true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside
+ * the input and false otherwise (i.e. the key is not ArrowLeft, ArrowRight, Home or End key, or that would not make the cursor move
+ * because it is already at one end of the input)
+ * @param event - keyboard event
+ * @returns true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside
+ * the input and false otherwise.
+ */
+export declare const isInternalInputNavigation: (event: KeyboardEvent) => boolean;
+/**
+ * Type of a key handler of the navigation manager.
+ * A key handler receives an object as its parameter, with the following properties:
+ * - event: key event
+ * - directiveElement: DOM element which has the navigation manager directive
+ * - navManager: navigation manager instance
+ */
+export type NavManagerKeyHandler = (info: {
+    directiveElement: HTMLElement;
+    event: KeyboardEvent;
+    navManager: NavManager;
+}) => void;
+/**
+ * Type of the parameter of the navigation manager directive.
+ */
+export interface NavManagerItemConfig {
+    /**
+     * Map of key handlers.
+     * The key in the map should match the result of calling {@link getKeyName} on the key event (for example "ArrowLeft" or "Ctrl+PageDown").
+     * The value in the map is the corresponding key handler.
+     */
+    keys?: Record<string, NavManagerKeyHandler>;
+    /**
+     * Function returning DOM elements to include in the navigation manager.
+     * It receives as a parameter the DOM element on which the navigation manager directive is used.
+     * If not specified, the default selector function only returns the element on which the navigation manager directive is used.
+     */
+    selector?: (directiveElement: HTMLElement) => Iterable<HTMLElement>;
+}
+/**
+ * Returns a new instance of the navigation manager.
+ *
+ * The navigation manager simplifies keyboard navigation for a set of DOM elements.
+ * It provides a directive to use on some DOM elements, both to add the keydown event handler and to specify which elements should be managed
+ * (either by directly putting the directive on those elements, or by putting the directive on a parent element and
+ * specifying which child elements should be included through a selector function).
+ *
+ * It provides some utilities to move the focus between those elements (focusFirst/focusLast, focusLeft/focusRight, focusPrevious/focusNext).
+ *
+ * @returns a new instance of the navigation manager
+ */
 export declare const createNavManager: () => {
-    directive: Directive;
+    elementsInDomOrder$: import("@amadeus-it-group/tansu").ReadableSignal<HTMLElement[]>;
+    directive: Directive<NavManagerItemConfig>;
+    focusIndex: (index: number, moveDirection?: -1 | 0 | 1) => HTMLElement | null;
+    focusPrevious: ({ event, referenceElement, }?: {
+        event?: KeyboardEvent | undefined;
+        referenceElement?: HTMLElement | null | undefined;
+    }) => HTMLElement | null;
+    focusNext: ({ event, referenceElement, }?: {
+        event?: KeyboardEvent | undefined;
+        referenceElement?: HTMLElement | null | undefined;
+    }) => HTMLElement | null;
+    focusFirst: ({ event }?: {
+        event?: KeyboardEvent | undefined;
+    }) => HTMLElement | null;
+    focusLast: ({ event }?: {
+        event?: KeyboardEvent | undefined;
+    }) => HTMLElement | null;
+    focusLeft: (args_0?: {
+        event?: KeyboardEvent | undefined;
+        referenceElement?: HTMLElement | null | undefined;
+    } | undefined) => HTMLElement | null;
+    focusRight: (args_0?: {
+        event?: KeyboardEvent | undefined;
+        referenceElement?: HTMLElement | null | undefined;
+    } | undefined) => HTMLElement | null;
+    refreshElements: () => void;
 };

package/services/navManager.js

@@ -1,52 +1,168 @@
-import { compareDomOrder } from './sortUtils';
-import { registrationArray } from './directiveUtils';
-import { computed } from '@amadeus-it-group/tansu';
+import { computed, writable } from '@amadeus-it-group/tansu';
+import { registrationArray } from '../utils/directive';
+import { computeCommonAncestor } from '../utils/internal/dom';
+import { isFocusable } from '../utils/internal/isFocusable';
+import { compareDomOrder } from '../utils/internal/sort';
+import { getTextDirection } from '../utils/internal/textDirection';
 // cf https://html.spec.whatwg.org/multipage/input.html#concept-input-apply
 const textInputTypes = new Set(['text', 'search', 'url', 'tel', 'password']);
 const isTextInput = (element) => element instanceof HTMLInputElement && textInputTypes.has(element.type);
+/**
+ * Returns the key name given the keyboard event. The key name is built using event.key (such as ArrowLeft, PageDown...),
+ * prefixed with the modifiers. If present, modifiers are always in the same order: Meta+Ctrl+Alt+Shift+...
+ * @param event - keyboard event
+ * @returns the name of the key, including modifiers
+ */
+export const getKeyName = (event) => {
+    let key = event.key;
+    if (event.shiftKey) {
+        key = `Shift+${key}`;
+    }
+    if (event.altKey) {
+        key = `Alt+${key}`;
+    }
+    if (event.ctrlKey) {
+        key = `Ctrl+${key}`;
+    }
+    if (event.metaKey) {
+        key = `Meta+${key}`;
+    }
+    return key;
+};
+/**
+ * Returns true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside
+ * the input and false otherwise (i.e. the key is not ArrowLeft, ArrowRight, Home or End key, or that would not make the cursor move
+ * because it is already at one end of the input)
+ * @param event - keyboard event
+ * @returns true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside
+ * the input and false otherwise.
+ */
+export const isInternalInputNavigation = (event) => {
+    const { target, key } = event;
+    if (isTextInput(target) && (key === 'ArrowLeft' || key === 'ArrowRight' || key === 'Home' || key === 'End')) {
+        let startPosition;
+        if (key === 'ArrowLeft' || key === 'ArrowRight') {
+            const direction = getTextDirection(target);
+            startPosition = key === (direction === 'ltr' ? 'ArrowLeft' : 'ArrowRight');
+        }
+        else {
+            startPosition = key === 'Home';
+        }
+        const cursorPosition = target.selectionStart === target.selectionEnd ? target.selectionStart : null;
+        if ((startPosition && cursorPosition !== 0) || (!startPosition && cursorPosition !== target.value.length)) {
+            // let the text input process the key
+            return true;
+        }
+    }
+    return false;
+};
+const defaultSelector = (directiveElement) => [directiveElement];
+/**
+ * Returns a new instance of the navigation manager.
+ *
+ * The navigation manager simplifies keyboard navigation for a set of DOM elements.
+ * It provides a directive to use on some DOM elements, both to add the keydown event handler and to specify which elements should be managed
+ * (either by directly putting the directive on those elements, or by putting the directive on a parent element and
+ * specifying which child elements should be included through a selector function).
+ *
+ * It provides some utilities to move the focus between those elements (focusFirst/focusLast, focusLeft/focusRight, focusPrevious/focusNext).
+ *
+ * @returns a new instance of the navigation manager
+ */
 export const createNavManager = () => {
-    const array$ = registrationArray();
-    const sortedArray$ = computed(() => [...array$()].sort(compareDomOrder));
-    const directive = (element) => {
-        const onKeyDown = (event) => {
-            let move = 0;
-            switch (event.key) {
-                case 'ArrowLeft':
-                    move = -1;
-                    break;
-                case 'ArrowRight':
-                    move = 1;
-                    break;
-            }
-            if (isTextInput(event.target)) {
-                const cursorPosition = event.target.selectionStart === event.target.selectionEnd ? event.target.selectionStart : null;
-                if ((cursorPosition !== 0 && move < 0) || (cursorPosition !== event.target.value.length && move > 0)) {
-                    move = 0;
+    const directiveInstances$ = registrationArray();
+    const elementsRefresh$ = writable({});
+    const refreshElements = () => elementsRefresh$.set({});
+    const elements$ = computed(() => {
+        elementsRefresh$();
+        const res = [];
+        for (const item of directiveInstances$()) {
+            res.push(...item());
+        }
+        return res;
+    });
+    const commonAncestor$ = computed(() => computeCommonAncestor(elements$()), { equal: Object.is });
+    const elementsInDomOrder$ = computed(() => [...elements$()].sort(compareDomOrder));
+    const ancestorDirection = () => {
+        const commonAncestor = commonAncestor$();
+        return commonAncestor ? getTextDirection(commonAncestor) : 'ltr';
+    };
+    const preventDefaultIfRelevant = (value, event) => {
+        if (value) {
+            event?.preventDefault();
+        }
+        return value;
+    };
+    const focusIndex = (index, moveDirection = 0) => {
+        const array = elementsInDomOrder$();
+        while (index >= 0 && index < array.length) {
+            const newItem = array[index];
+            if (isFocusable(newItem)) {
+                newItem.focus();
+                if (moveDirection != 0 && isTextInput(newItem)) {
+                    const changeDirection = ancestorDirection() !== getTextDirection(newItem);
+                    const position = moveDirection > 0 !== changeDirection ? 0 : newItem.value.length;
+                    newItem.setSelectionRange(position, position, position === 0 ? 'forward' : 'backward');
                 }
+                return newItem;
             }
-            if (move != 0) {
-                const array = sortedArray$();
-                const currentIndex = array.indexOf(element);
-                const newIndex = currentIndex + move;
-                if (newIndex < array.length && newIndex >= 0) {
-                    const newItem = array[newIndex];
-                    event.preventDefault();
-                    newItem.focus();
-                    if (isTextInput(newItem)) {
-                        const position = move < 0 ? newItem.value.length : 0;
-                        newItem.setSelectionRange(position, position);
-                    }
-                }
+            if (moveDirection === 0) {
+                break;
+            }
+            else {
+                index += moveDirection;
+            }
+        }
+        return null;
+    };
+    const createFocusNeighbour = (moveDirection) => ({ event, referenceElement = event?.target ?? document.activeElement, } = {}) => {
+        const curIndex = referenceElement ? elementsInDomOrder$().indexOf(referenceElement) : -1;
+        if (curIndex > -1) {
+            return preventDefaultIfRelevant(focusIndex(curIndex + moveDirection, moveDirection), event);
+        }
+        return null;
+    };
+    const directive = (directiveElement, config) => {
+        const onKeyDown = (event) => {
+            if (isInternalInputNavigation(event)) {
+                return;
+            }
+            const keyName = getKeyName(event);
+            const handler = config.keys?.[keyName];
+            if (handler) {
+                refreshElements();
+                handler({ event, directiveElement, navManager });
             }
         };
-        element.addEventListener('keydown', onKeyDown);
-        const unregister = array$.register(element);
+        directiveElement.addEventListener('keydown', onKeyDown);
+        const unregister = directiveInstances$.register(() => (config?.selector ?? defaultSelector)(directiveElement));
         return {
+            update(newConfig) {
+                config = newConfig;
+            },
             destroy() {
-                element.removeEventListener('keydown', onKeyDown);
+                directiveElement.removeEventListener('keydown', onKeyDown);
                 unregister();
             },
         };
     };
-    return { directive };
+    const focusPrevious = createFocusNeighbour(-1);
+    const focusNext = createFocusNeighbour(1);
+    const focusFirst = ({ event } = {}) => preventDefaultIfRelevant(focusIndex(0, 1), event);
+    const focusLast = ({ event } = {}) => preventDefaultIfRelevant(focusIndex(elementsInDomOrder$().length - 1, -1), event);
+    const focusLeft = (...args) => (ancestorDirection() === 'rtl' ? focusNext : focusPrevious)(...args);
+    const focusRight = (...args) => (ancestorDirection() === 'rtl' ? focusPrevious : focusNext)(...args);
+    const navManager = {
+        elementsInDomOrder$,
+        directive,
+        focusIndex,
+        focusPrevious,
+        focusNext,
+        focusFirst,
+        focusLast,
+        focusLeft,
+        focusRight,
+        refreshElements,
+    };
+    return navManager;
 };

package/services/portal.js

@@ -8,14 +8,18 @@ export const portal = (content, newArg) => {
         }
     };
     const update = (newArg) => {
-        if (newArg !== arg) {
+        if (newArg !== arg && (newArg?.container !== arg?.container || newArg?.insertBefore !== arg?.insertBefore)) {
             arg = newArg;
             const container = arg?.container ?? arg?.insertBefore?.parentElement;
             if (container) {
-                if (!replaceComment) {
-                    replaceComment = content.parentNode?.insertBefore(content.ownerDocument.createComment('portal'), content);
+                const insertBefore = arg?.insertBefore ?? null;
+                const moveNeeded = content.parentElement !== container || content.nextSibling !== insertBefore;
+                if (moveNeeded) {
+                    if (!replaceComment) {
+                        replaceComment = content.parentNode?.insertBefore(content.ownerDocument.createComment('portal'), content);
+                    }
+                    container.insertBefore(content, insertBefore);
                 }
-                container.insertBefore(content, arg?.insertBefore ?? null);
             }
             else {
                 removeReplaceComment();

package/services/siblingsInert.d.ts

@@ -1,7 +1,8 @@
+import type { Directive } from '../types';
 /**
  * sliblingsInert directive
  * When used on an element, all siblings of the element and of its ancestors will be inert with the inert attribute.
  * In case it is used on multiple elements, only the last one has an effect (the directive keeps a stack of elements
  * on which it is used, so when the last one disappears, the previous one in the list becomes the one in effect).
  */
-export declare const sliblingsInert: import("..").Directive<void>;
+export declare const sliblingsInert: Directive;

package/services/siblingsInert.js

@@ -1,6 +1,6 @@
 import { computed } from '@amadeus-it-group/tansu';
-import { noop } from '../utils';
-import { createStoreArrayDirective, directiveSubscribe, mergeDirectives } from './directiveUtils';
+import { noop } from '../utils/internal/func';
+import { createStoreArrayDirective, directiveSubscribe, mergeDirectives } from '../utils/directive';
 const internalSetSiblingsInert = (element) => {
     const inertValues = new Map();
     const recursiveHelper = (element) => {

package/{transitions → services/transitions}/baseTransitions.d.ts

@@ -1,5 +1,4 @@
-import type { PropsConfig } from '../services';
-import type { Directive, Widget } from '../types';
+import type { Directive, PropsConfig, Widget } from '../../types';
 /**
  * Function that implements a transition.
  */

package/{transitions → services/transitions}/baseTransitions.js

@@ -1,7 +1,9 @@
 import { batch, computed, derived, writable } from '@amadeus-it-group/tansu';
-import { bindableDerived, createStoreDirective, directiveSubscribe, directiveUpdate, mergeDirectives, stateStores, writablesForProps, } from '../services';
-import { typeBoolean, typeFunction } from '../services/writables';
-const noop = () => { };
+import { typeBoolean, typeBooleanOrNull, typeFunction } from '../../utils/writables';
+import { promiseWithResolve } from '../../utils/internal/promise';
+import { noop } from '../../utils/internal/func';
+import { bindableDerived, stateStores, writablesForProps } from '../../utils/stores';
+import { createStoreDirective, directiveSubscribe, directiveUpdate, mergeDirectives } from '../../utils/directive';
 const neverEndingPromise = new Promise(noop);
 export const noAnimation = async (element, direction) => {
     element.style.display = direction === 'show' ? '' : 'none';
@@ -23,13 +25,8 @@ const configValidator = {
     transition: typeFunction,
     onShown: typeFunction,
     onHidden: typeFunction,
-};
-const promiseWithResolve = () => {
-    let resolve;
-    const promise = new Promise((r) => {
-        resolve = r;
-    });
-    return { promise, resolve: resolve };
+    onVisibleChange: typeFunction,
+    initDone: typeBooleanOrNull,
 };
 export const createTransition = (config) => {
     const [{ animation$, initDone$, visible$: requestedVisible$, transition$, onShown$, onHidden$, onVisibleChange$, animationOnInit$ }, patch] = writablesForProps(defaultValues, config, configValidator);

package/services/transitions/bootstrap/collapse.d.ts

@@ -0,0 +1,2 @@
+export declare const collapseVerticalTransition: import("../baseTransitions").TransitionFn;
+export declare const collapseHorizontalTransition: import("../baseTransitions").TransitionFn;

package/services/transitions/bootstrap/fade.d.ts

@@ -0,0 +1 @@
+export declare const fadeTransition: import("../baseTransitions").TransitionFn;

package/services/transitions/bootstrap.d.ts

@@ -0,0 +1,2 @@
+export * from './bootstrap/collapse';
+export * from './bootstrap/fade';