@agnos-ui/core 0.1.1 → 0.3.0

package/services/extendWidget.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const utils_stores = require("../utils/stores.cjs");
+const extendWidgetProps = (factory, extraPropsDefaults, extraPropsConfig, overrideDefaults) => (propsConfig) => {
+  const extraPropsWritables = utils_stores.writablesWithDefault(extraPropsDefaults, propsConfig, extraPropsConfig);
+  const propsConfigConfig = propsConfig == null ? void 0 : propsConfig.config;
+  const config = utils_stores.isStore(propsConfigConfig) ? tansu.computed(() => ({ ...overrideDefaults, ...propsConfigConfig() })) : { ...overrideDefaults, ...propsConfigConfig ?? {} };
+  const widget = factory({ props: propsConfig == null ? void 0 : propsConfig.props, config });
+  return {
+    ...widget,
+    ...utils_stores.stateStores({ ...widget.stores, ...extraPropsWritables }),
+    patch: (storesValues) => tansu.batch(() => {
+      let widgetProps;
+      for (const [name, value] of Object.entries(storesValues ?? {})) {
+        const extraPropsStore = extraPropsWritables[`${name}$`];
+        if (extraPropsStore) {
+          extraPropsStore.set(value);
+        } else {
+          if (!widgetProps) {
+            widgetProps = {};
+          }
+          widgetProps[name] = value;
+        }
+      }
+      if (widgetProps) {
+        widget.patch(widgetProps);
+      }
+    })
+  };
+};
+exports.extendWidgetProps = extendWidgetProps;

package/services/extendWidget.d.ts

@@ -2,22 +2,27 @@ import type { ConfigValidator, SlotContent, Widget, WidgetFactory, WidgetProps,
 /**
  * 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']>;
+export type ExtendWidgetProps<W extends Widget, ExtraProps extends object, ExtraDirectives extends object = object> = Widget<ExtendWidgetAdaptSlotWidgetProps<WidgetProps<W>, ExtraProps, ExtraDirectives>, ExtendWidgetAdaptSlotWidgetProps<WidgetState<W>, ExtraProps, ExtraDirectives>, W['api'], W['actions'], ExtendWidgetInterfaces<W['directives'], ExtraDirectives>>;
+/**
+ * Type merging the passed interfaces together
+ */
+export type ExtendWidgetInterfaces<Interfaces, ExtraInterfaces> = Interfaces & ExtraInterfaces;
 /**
  * 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;
+export type ExtendWidgetAdaptSlotContentProps<Props extends Record<string, any>, ExtraProps extends object, ExtraDirectives extends object> = Props extends WidgetSlotContext<infer U> ? WidgetSlotContext<ExtendWidgetProps<U, ExtraProps, ExtraDirectives>> & 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];
+export type ExtendWidgetAdaptSlotWidgetProps<Props, ExtraProps extends object, ExtraDirectives extends object> = Omit<Props, `slot${string}`> & ExtraProps & {
+    [K in keyof Props & `slot${string}`]: Props[K] extends SlotContent<infer U> ? SlotContent<ExtendWidgetAdaptSlotContentProps<U, ExtraProps, ExtraDirectives>> : 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
+ * @param overrideDefaults - object overriding some default props of the widget to extend
  * @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>>;
+export declare const extendWidgetProps: <W extends Widget<object, object, object, object, object>, ExtraProps extends object, ExtraDirectives extends object = object>(factory: WidgetFactory<W>, extraPropsDefaults: ExtraProps, extraPropsConfig?: ConfigValidator<ExtraProps>, overrideDefaults?: Partial<WidgetState<W>>) => WidgetFactory<ExtendWidgetProps<W, ExtraProps, ExtraDirectives>>;

package/services/extendWidget.js

@@ -1,35 +1,32 @@
-import { batch } from '@amadeus-it-group/tansu';
-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);
-    return {
-        ...widget,
-        ...stateStores({ ...widget.stores, ...extraPropsWritables }),
-        patch: (storesValues) => batch(() => {
-            let widgetProps;
-            for (const [name, value] of Object.entries(storesValues ?? {})) {
-                const extraPropsStore = extraPropsWritables[`${name}$`];
-                if (extraPropsStore) {
-                    extraPropsStore.set(value);
-                }
-                else {
-                    if (!widgetProps) {
-                        widgetProps = {};
-                    }
-                    widgetProps[name] = value;
-                }
-            }
-            if (widgetProps) {
-                widget.patch(widgetProps);
-            }
-        }),
-    };
+import { computed, batch } from "@amadeus-it-group/tansu";
+import { writablesWithDefault, isStore, stateStores } from "../utils/stores.js";
+const extendWidgetProps = (factory, extraPropsDefaults, extraPropsConfig, overrideDefaults) => (propsConfig) => {
+  const extraPropsWritables = writablesWithDefault(extraPropsDefaults, propsConfig, extraPropsConfig);
+  const propsConfigConfig = propsConfig == null ? void 0 : propsConfig.config;
+  const config = isStore(propsConfigConfig) ? computed(() => ({ ...overrideDefaults, ...propsConfigConfig() })) : { ...overrideDefaults, ...propsConfigConfig ?? {} };
+  const widget = factory({ props: propsConfig == null ? void 0 : propsConfig.props, config });
+  return {
+    ...widget,
+    ...stateStores({ ...widget.stores, ...extraPropsWritables }),
+    patch: (storesValues) => batch(() => {
+      let widgetProps;
+      for (const [name, value] of Object.entries(storesValues ?? {})) {
+        const extraPropsStore = extraPropsWritables[`${name}$`];
+        if (extraPropsStore) {
+          extraPropsStore.set(value);
+        } else {
+          if (!widgetProps) {
+            widgetProps = {};
+          }
+          widgetProps[name] = value;
+        }
+      }
+      if (widgetProps) {
+        widget.patch(widgetProps);
+      }
+    })
+  };
+};
+export {
+  extendWidgetProps
 };

package/services/floatingUI.cjs

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const dom = require("@floating-ui/dom");
+const utils_directive = require("../directive-BTSEYLF3.cjs");
+const promise = require("../promise-BMJ8qhA8.cjs");
+const utils_stores = require("../utils/stores.cjs");
+const defaultConfig = {
+  computePositionOptions: {},
+  autoUpdateOptions: {},
+  arrowOptions: {}
+};
+const createFloatingUI = (propsConfig) => {
+  const [{ autoUpdateOptions$, computePositionOptions$: computePositionInputOptions$, arrowOptions$: arrowInputOptions$ }, patch] = utils_stores.writablesForProps(
+    defaultConfig,
+    propsConfig
+  );
+  const { directive: floatingDirective, element$: floatingElement$ } = utils_directive.createBrowserStoreDirective();
+  const { directive: referenceDirective, element$: referenceElement$ } = utils_directive.createBrowserStoreDirective();
+  const { directive: arrowDirective, element$: arrowElement$ } = utils_directive.createBrowserStoreDirective();
+  const arrowOptions$ = tansu.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$ = tansu.computed(() => {
+    let options = computePositionInputOptions$();
+    const arrowOptions = arrowOptions$();
+    if (arrowOptions) {
+      options = {
+        ...options,
+        middleware: [...options.middleware ?? [], dom.arrow(arrowOptions)]
+      };
+    }
+    return options;
+  });
+  const promisePosition$ = tansu.derived(
+    [floatingElement$, referenceElement$, computePositionOptions$, autoUpdateOptions$],
+    ([floatingElement, referenceElement, computePositionOptions, autoUpdateOptions], set) => {
+      if (floatingElement && referenceElement) {
+        const clean = dom.autoUpdate(
+          referenceElement,
+          floatingElement,
+          () => {
+            set(dom.computePosition(referenceElement, floatingElement, computePositionOptions));
+          },
+          autoUpdateOptions
+        );
+        return () => {
+          set(null);
+          clean();
+        };
+      }
+      return void 0;
+    },
+    null
+  );
+  const position$ = promise.promiseStoreToValueStore(promisePosition$, null);
+  const placement$ = tansu.computed(() => {
+    var _a;
+    return (_a = position$()) == null ? void 0 : _a.placement;
+  });
+  const middlewareData$ = tansu.computed(() => {
+    var _a;
+    return (_a = position$()) == null ? void 0 : _a.middlewareData;
+  });
+  const x$ = tansu.computed(() => {
+    var _a;
+    return (_a = position$()) == null ? void 0 : _a.x;
+  });
+  const y$ = tansu.computed(() => {
+    var _a;
+    return (_a = position$()) == null ? void 0 : _a.y;
+  });
+  const strategy$ = tansu.computed(() => {
+    var _a;
+    return (_a = position$()) == null ? void 0 : _a.strategy;
+  });
+  const arrowX$ = tansu.computed(() => {
+    var _a, _b;
+    return (_b = (_a = middlewareData$()) == null ? void 0 : _a.arrow) == null ? void 0 : _b.x;
+  });
+  const arrowY$ = tansu.computed(() => {
+    var _a, _b;
+    return (_b = (_a = middlewareData$()) == null ? void 0 : _a.arrow) == null ? void 0 : _b.y;
+  });
+  const floatingStyleApplyAction$ = tansu.computed(() => {
+    const floatingElement = floatingElement$();
+    if (floatingElement) {
+      floatingElement.style.left = `${x$() ?? 0}px`;
+      floatingElement.style.top = `${y$() ?? 0}px`;
+    }
+  });
+  const arrowStyleApplyAction$ = tansu.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,
+    ...utils_stores.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: utils_directive.mergeDirectives(floatingDirective, utils_directive.directiveSubscribe(floatingStyleApplyAction$)),
+      /**
+       * Directive to be used on the arrow element, if any
+       */
+      arrowDirective: utils_directive.mergeDirectives(arrowDirective, utils_directive.directiveSubscribe(arrowStyleApplyAction$))
+    }
+  };
+};
+exports.createFloatingUI = createFloatingUI;

package/services/floatingUI.d.ts

@@ -1,4 +1,4 @@
-import type { ArrowOptions, AutoUpdateOptions, ComputePositionConfig, Derivable } from '@floating-ui/dom';
+import type { ArrowOptions, AutoUpdateOptions, ComputePositionConfig, Derivable, MiddlewareData, Placement, Strategy } from '@floating-ui/dom';
 import type { PropsConfig } from '../types';
 export interface FloatingUIProps {
     /**
@@ -14,6 +14,28 @@ export interface FloatingUIProps {
      */
     arrowOptions: Omit<ArrowOptions, 'element'> | Derivable<Omit<ArrowOptions, 'element'>>;
 }
+export interface FloatingUIState {
+    /**
+     * The x coordinate of the floating ui
+     */
+    x: number | undefined;
+    /**
+     * The y coordinate of the floating ui
+     */
+    y: number | undefined;
+    /**
+     * The strategy used to position the floating element
+     */
+    strategy: Strategy | undefined;
+    /**
+     * The final chosen placement of the floating element
+     */
+    placement: Placement | undefined;
+    /**
+     * Object containing data returned from all middleware, keyed by their name
+     */
+    middlewareData: MiddlewareData | undefined;
+}
 export type FloatingUI = ReturnType<typeof createFloatingUI>;
 /**
  * Create a floating UI service.
@@ -28,29 +50,23 @@ export declare const createFloatingUI: (propsConfig?: PropsConfig<FloatingUIProp
         /**
          * Directive to be used on the reference element from where the floating element will be positioned
          */
-        referenceDirective: import("../types").Directive;
+        referenceDirective: import("../types").Directive<void, import("../types").SSRHTMLElement>;
         /**
          * Directive to be used on the floating element
          */
-        floatingDirective: import("../types").Directive<void>;
+        floatingDirective: import("../types").Directive<void, import("../types").SSRHTMLElement>;
         /**
          * Directive to be used on the arrow element, if any
          */
-        arrowDirective: import("../types").Directive<void>;
+        arrowDirective: import("../types").Directive<void, import("../types").SSRHTMLElement>;
     };
-    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>;
-    }>>;
+    state$: import("@amadeus-it-group/tansu").ReadableSignal<FloatingUIState>;
     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>;
+        strategy$: import("@amadeus-it-group/tansu").ReadableSignal<Strategy | undefined>;
+        placement$: import("@amadeus-it-group/tansu").ReadableSignal<Placement | undefined>;
+        middlewareData$: import("@amadeus-it-group/tansu").ReadableSignal<MiddlewareData | undefined>;
     };
     patch: <U extends Partial<FloatingUIProps>>(storesValues?: void | U | undefined) => void;
 };

package/services/floatingUI.js

@@ -1,105 +1,131 @@
-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';
+import { computed, derived } from "@amadeus-it-group/tansu";
+import { arrow, autoUpdate, computePosition } from "@floating-ui/dom";
+import { j as createBrowserStoreDirective, k as mergeDirectives, d as directiveSubscribe } from "../directive-DCYlDznf.js";
+import { p as promiseStoreToValueStore } from "../promise-CY2U8bTP.js";
+import { writablesForProps, stateStores } from "../utils/stores.js";
 const defaultConfig = {
-    computePositionOptions: {},
-    autoUpdateOptions: {},
-    arrowOptions: {},
+  computePositionOptions: {},
+  autoUpdateOptions: {},
+  arrowOptions: {}
 };
-/**
- * Create a floating UI service.
- *
- * The returned service includes the patch method to patch the states, the stores to track the states and directives to apply.
- *
- * @param propsConfig - the props config for the floating UI service
- * @returns the floating UI service
- */
-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$)),
-        },
-    };
+const createFloatingUI = (propsConfig) => {
+  const [{ autoUpdateOptions$, computePositionOptions$: computePositionInputOptions$, arrowOptions$: arrowInputOptions$ }, patch] = writablesForProps(
+    defaultConfig,
+    propsConfig
+  );
+  const { directive: floatingDirective, element$: floatingElement$ } = createBrowserStoreDirective();
+  const { directive: referenceDirective, element$: referenceElement$ } = createBrowserStoreDirective();
+  const { directive: arrowDirective, element$: arrowElement$ } = createBrowserStoreDirective();
+  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 void 0;
+    },
+    null
+  );
+  const position$ = promiseStoreToValueStore(promisePosition$, null);
+  const placement$ = computed(() => {
+    var _a;
+    return (_a = position$()) == null ? void 0 : _a.placement;
+  });
+  const middlewareData$ = computed(() => {
+    var _a;
+    return (_a = position$()) == null ? void 0 : _a.middlewareData;
+  });
+  const x$ = computed(() => {
+    var _a;
+    return (_a = position$()) == null ? void 0 : _a.x;
+  });
+  const y$ = computed(() => {
+    var _a;
+    return (_a = position$()) == null ? void 0 : _a.y;
+  });
+  const strategy$ = computed(() => {
+    var _a;
+    return (_a = position$()) == null ? void 0 : _a.strategy;
+  });
+  const arrowX$ = computed(() => {
+    var _a, _b;
+    return (_b = (_a = middlewareData$()) == null ? void 0 : _a.arrow) == null ? void 0 : _b.x;
+  });
+  const arrowY$ = computed(() => {
+    var _a, _b;
+    return (_b = (_a = middlewareData$()) == null ? void 0 : _a.arrow) == null ? void 0 : _b.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$))
+    }
+  };
+};
+export {
+  createFloatingUI
 };

package/services/focustrack.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tansu = require("@amadeus-it-group/tansu");
+const utils_directive = require("../directive-BTSEYLF3.cjs");
+const esmEnv = require("esm-env");
+const evtFocusIn = "focusin";
+const evtFocusOut = "focusout";
+const activeElement$ = !esmEnv.BROWSER ? tansu.readable(null) : tansu.readable(null, {
+  onUse({ set }) {
+    function setActiveElement() {
+      set(document.activeElement);
+    }
+    setActiveElement();
+    const container = document.documentElement;
+    function onFocusOut() {
+      setTimeout(setActiveElement);
+    }
+    container.addEventListener(evtFocusIn, setActiveElement, { capture: true });
+    container.addEventListener(evtFocusOut, onFocusOut, { capture: true });
+    return () => {
+      container.removeEventListener(evtFocusIn, setActiveElement, { capture: true });
+      container.removeEventListener(evtFocusOut, onFocusOut, { capture: true });
+    };
+  },
+  equal: Object.is
+});
+function createHasFocus() {
+  const { elements$, directive } = utils_directive.createBrowserStoreArrayDirective();
+  const hasFocus$ = tansu.computed(() => {
+    const activeElement = activeElement$();
+    if (!activeElement) {
+      return false;
+    }
+    for (const element of elements$()) {
+      if (element === activeElement || element.contains(activeElement)) {
+        return true;
+      }
+    }
+    return false;
+  });
+  return {
+    directive,
+    hasFocus$
+  };
+}
+exports.activeElement$ = activeElement$;
+exports.createHasFocus = createHasFocus;