@design-factory/core 21.1.0 → 22.0.0-next.1

package/{rating-DWgGgwk3.js → rating-DLsgFSyB.js}

@@ -1,7 +1,7 @@
 import { computed, writable, readable } from "@amadeus-it-group/tansu";
 import { INVALID_VALUE } from "./types.js";
-import { g as createAttributesDirective } from "./directive-CNNSo5Yn.js";
-import { j as typeString, e as typeFunction, b as typeBoolean, g as typeNumber, l as clamp, m as isNumber } from "./writables-DYGjj5T3.js";
+import { g as createAttributesDirective } from "./directive-CMT2vEDg.js";
+import { k as typeString, f as typeFunction, d as typeBoolean, h as typeNumber, m as clamp, n as isNumber } from "./writables-_7BriMb2.js";
 import { noop } from "./utils/func.js";
 import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
 import { createWidgetFactory } from "./utils/widget.js";

package/services/extendWidget.d.ts

@@ -28,4 +28,4 @@ export type ExtendWidgetInterfaces<Interfaces, ExtraInterfaces> = Interfaces & E
  * @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, ExtraProps extends object, ExtraDirectives extends object = object>(factory: WidgetFactory<W>, extraPropsDefaults: ExtraProps, extraPropsConfig?: ConfigValidator<ExtraProps>, overrideDefaults?: Partial<WidgetState<W>>) => WidgetFactory<ExtendWidgetProps<W, ExtraProps, ExtraDirectives>>;
+export declare const extendWidgetProps: <W extends Widget, ExtraProps extends object, ExtraDirectives extends object = object>(factory: WidgetFactory<W>, extraPropsDefaults: ExtraProps, extraPropsConfig?: ConfigValidator<ExtraProps>, overrideDefaults?: Partial<WidgetProps<W>>) => WidgetFactory<ExtendWidgetProps<W, ExtraProps, ExtraDirectives>>;

package/services/focusElement.js

@@ -1,5 +1,5 @@
-import { d as browserDirective } from "../directive-CNNSo5Yn.js";
-import { i as isFocusable } from "../isFocusable-Ckwus82R.js";
+import { d as browserDirective } from "../directive-CMT2vEDg.js";
+import { i as isFocusable } from "../isFocusable-C2iRr0zh.js";
 const stack = [];
 let stackProcessPlanned = false;
 const processStack = () => {

package/services/focustrack.js

@@ -1,12 +1,12 @@
 import { readable, computed } from "@amadeus-it-group/tansu";
-import { h as createBrowserStoreArrayDirective } from "../directive-CNNSo5Yn.js";
+import { h as createBrowserStoreArrayDirective } from "../directive-CMT2vEDg.js";
 import { BROWSER } from "esm-env";
 const evtFocusIn = "focusin";
 const evtFocusOut = "focusout";
 const activeElement$ = !BROWSER ? readable(null) : readable(null, {
   onUse({ set }) {
     function setActiveElement() {
-      set(document.activeElement);
+      set(document.hasFocus() ? document.activeElement : null);
     }
     setActiveElement();
     const container = document.documentElement;

package/services/matchMedia.js

@@ -1,6 +1,6 @@
 import { readable } from "@amadeus-it-group/tansu";
 import { BROWSER } from "esm-env";
-import { w as addEvent } from "../directive-CNNSo5Yn.js";
+import { w as addEvent } from "../directive-CMT2vEDg.js";
 import { false$ } from "../utils/stores.js";
 const createMatchMedia = (query) => BROWSER ? readable(false, {
   onUse({ set }) {

package/services/mousetrack.d.ts

@@ -0,0 +1,34 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+import type { Directive } from '../types';
+/**
+ * Represents a mouse tracking service that monitors whether the mouse is inside
+ * one or more DOM elements.
+ */
+export interface HasMouseInside {
+    /**
+     * A directive to apply to DOM elements that should be tracked.
+     * When applied to an element, it listens for `mouseenter` and `mouseleave` events
+     * and updates the internal tracking state accordingly.
+     * The directive can be applied to multiple elements simultaneously.
+     */
+    directive: Directive;
+    /**
+     * A readable signal that emits `true` when the mouse is inside any of the tracked elements,
+     * and `false` otherwise.
+     */
+    hasMouseInside$: ReadableSignal<boolean>;
+}
+/**
+ * Creates a mouse tracking service that monitors whether the mouse is inside
+ * one or more DOM elements.
+ *
+ * @remarks
+ * The returned {@link HasMouseInside.directive | directive} can be applied to multiple DOM elements.
+ * The {@link HasMouseInside.hasMouseInside$ | hasMouseInside$} signal aggregates the mouse state
+ * across all registered elements and returns `true` if the mouse is inside any of them.
+ *
+ * In a non-browser environment (SSR), the directive is a no-op and the signal always returns `false`.
+ *
+ * @returns A {@link HasMouseInside} object containing the directive and the reactive signal.
+ */
+export declare function createHasMouseInside(): HasMouseInside;

package/services/mousetrack.js

@@ -0,0 +1,41 @@
+import { computed, writable } from "@amadeus-it-group/tansu";
+import { u as registrationArray, d as browserDirective } from "../directive-CMT2vEDg.js";
+const evtMouseEnter = "mouseenter";
+const evtMouseLeave = "mouseleave";
+function createHasMouseInside() {
+  const mouseInsideSignals$ = registrationArray();
+  const directive = browserDirective((element) => {
+    const mouseInside$ = writable(false);
+    const unregister = mouseInsideSignals$.register(mouseInside$);
+    function onMouseEnter() {
+      mouseInside$.set(true);
+    }
+    function onMouseLeave() {
+      mouseInside$.set(false);
+    }
+    element.addEventListener(evtMouseEnter, onMouseEnter);
+    element.addEventListener(evtMouseLeave, onMouseLeave);
+    return {
+      destroy() {
+        element.removeEventListener(evtMouseEnter, onMouseEnter);
+        element.removeEventListener(evtMouseLeave, onMouseLeave);
+        unregister();
+      }
+    };
+  });
+  const hasMouseInside$ = computed(() => {
+    for (const mouseInside$ of mouseInsideSignals$()) {
+      if (mouseInside$()) {
+        return true;
+      }
+    }
+    return false;
+  });
+  return {
+    directive,
+    hasMouseInside$
+  };
+}
+export {
+  createHasMouseInside
+};

package/services/navManager.js

@@ -1,6 +1,6 @@
 import { writable, computed } from "@amadeus-it-group/tansu";
-import { u as registrationArray, A as computeCommonAncestor, d as browserDirective } from "../directive-CNNSo5Yn.js";
-import { i as isFocusable } from "../isFocusable-Ckwus82R.js";
+import { u as registrationArray, A as computeCommonAncestor, d as browserDirective } from "../directive-CMT2vEDg.js";
+import { i as isFocusable } from "../isFocusable-C2iRr0zh.js";
 import { g as getTextDirection } from "../textDirection-cNgt24LJ.js";
 const compareDomOrder = (element1, element2) => {
   if (element1 === element2) {

package/services/pointerdownPosition.js

@@ -1,4 +1,4 @@
-import { d as browserDirective, w as addEvent } from "../directive-CNNSo5Yn.js";
+import { d as browserDirective, w as addEvent } from "../directive-CMT2vEDg.js";
 import { noop } from "../utils/func.js";
 const createPointerdownPositionDirective = (onStart) => browserDirective((element, arg) => {
   let activePointerId = null;

package/services/portal.js

@@ -1,4 +1,4 @@
-import { d as browserDirective } from "../directive-CNNSo5Yn.js";
+import { d as browserDirective } from "../directive-CMT2vEDg.js";
 const portal = browserDirective(
   (content, newArg) => {
     let arg;

package/services/positioning.d.ts

@@ -0,0 +1,101 @@
+import type { Strategy } from '@floating-ui/dom';
+import type { Directive, PickRequired, PropsConfig, SSRHTMLElement, Widget, WritableWithDefaultOptions } from '../types';
+/**
+ * Represents the possible placement values for a floating element relative to its reference element.
+ *
+ * Standard placements (`top`, `bottom`, `left`, `right`) position the floating element on the corresponding side.
+ * Compound placements (e.g. `top-start`, `bottom-end`) add alignment along the cross axis.
+ *
+ * The `start` and `end` placements are RTL-aware: `start` resolves to `left` in LTR and `right` in RTL,
+ * while `end` resolves to `right` in LTR and `left` in RTL.
+ */
+export type Placement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'start' | 'end' | 'start-start' | 'start-end' | 'end-start' | 'end-end';
+/**
+ * Normalizes a single placement value, ensuring it is one of the allowed placements defined in the `Placement` type.
+ */
+export declare const typePlacement: PickRequired<WritableWithDefaultOptions<Placement>, 'normalizeValue'>;
+/**
+ * Normalizes an array of placements, allowing the input to be either a space-separated string or an array of strings.
+ */
+export declare const typePlacementArray: PickRequired<WritableWithDefaultOptions<Placement[]>, 'normalizeValue' | 'equal'>;
+/**
+ * Interface representing the properties for configuring the positioning service.
+ */
+export interface PositioningProps {
+    /**
+     * List of placements, in order of preference.
+     * The first placement is used as the primary position, and the remaining ones serve as fallbacks
+     * when the primary placement does not fit within the available space.
+     *
+     * Placements starting with `start` or `end` are automatically converted to `left`/`right`
+     * based on the text direction (LTR or RTL) of the reference element.
+     */
+    placement: Placement[];
+    /**
+     * The distance in pixels between the reference and floating elements. This offset is applied along the main axis of the placement.
+     * For example, if the placement is `top`, the offset will be applied vertically, creating space between the top of the reference element and the bottom of the floating element.
+     */
+    offset?: number;
+    /**
+     * The CSS `position` strategy used for the floating element.
+     * - `'fixed'`: the floating element uses `position: fixed`.
+     * - `'absolute'`: the floating element uses `position: absolute`.
+     *
+     * @defaultValue `'fixed'`
+     */
+    strategy?: Strategy;
+}
+/**
+ * Represents the state of the positioning service.
+ */
+export interface PositioningState {
+    /**
+     * The final chosen placement of the floating element, after evaluating available space
+     * and applying the flip middleware. Undefined until both reference and floating elements are attached.
+     */
+    placement: Placement | undefined;
+    /**
+     * Indicates whether the reference element is hidden (clipped).
+     * The floating element should be consequently hidden as well in this case.
+     */
+    referenceHidden: boolean;
+}
+/**
+ * Interface representing the directives used by the positioning service.
+ */
+export interface PositioningDirectives {
+    /**
+     * Directive to attach to the reference element.
+     * The reference element serves as the anchor from which the floating element is positioned.
+     * It is also used to determine the text direction (LTR/RTL) for resolving `start`/`end` placements.
+     */
+    referenceDirective: Directive<void, SSRHTMLElement>;
+    /**
+     * Directive to attach to the floating element.
+     * The floating element is the one whose position is computed relative to the reference element.
+     * Its `position`, `top`, and `left` CSS properties are automatically set
+     * (`position` matches the configured `strategy`, defaulting to `'fixed'`),
+     * so consumers should not override `position` from their own stylesheets.
+     */
+    floatingDirective: Directive<void, SSRHTMLElement>;
+}
+/**
+ * Represents the type returned by the {@link createPositioning} function.
+ *
+ * This type defines the structure and behavior of the positioning widget.
+ */
+export type Positioning = Widget<PositioningProps, PositioningState, object, PositioningDirectives>;
+/**
+ * Creates a positioning service that manages the placement of a floating element relative to a reference element.
+ *
+ * This service wraps Floating UI and provides RTL-aware placement resolution. Placements prefixed with `start` or `end`
+ * are automatically converted to `left` or `right` based on the text direction of the reference element.
+ * The flip middleware is used to fall back to alternative placements when the preferred one does not fit.
+ *
+ * The returned service includes the patch method to update properties, stores to track state, and directives to apply
+ * to the reference, floating, and arrow DOM elements.
+ *
+ * @param propsConfig - the props config for the positioning service
+ * @returns the positioning service
+ */
+export declare const createPositioning: (propsConfig?: PropsConfig<PositioningProps>) => Positioning;

package/services/positioning.js

@@ -0,0 +1,104 @@
+import { computed, derived } from "@amadeus-it-group/tansu";
+import { hide, offset, flip, autoUpdate, computePosition } from "@floating-ui/dom";
+import { i as createBrowserStoreDirective, s as mergeDirectives, g as createAttributesDirective } from "../directive-CMT2vEDg.js";
+import { a as promiseStoreToValueStore } from "../promise-CkIc0KKt.js";
+import { g as getTextDirection } from "../textDirection-cNgt24LJ.js";
+import { writablesForProps, stateStores } from "../utils/stores.js";
+import { c as createTypeEnum, a as createTypeStringSpacedArray } from "../writables-_7BriMb2.js";
+const typePlacement = createTypeEnum([
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+  "left-start",
+  "left-end",
+  "right-start",
+  "right-end",
+  "start",
+  "end",
+  "start-start",
+  "start-end",
+  "end-start",
+  "end-end"
+]);
+const typePlacementArray = createTypeStringSpacedArray(typePlacement.normalizeValue);
+const defaultConfig = {
+  placement: ["top"],
+  offset: 4,
+  strategy: "fixed"
+};
+const createPositioning = (propsConfig) => {
+  const [{ placement$: placementProp$, offset$, strategy$ }, patch] = writablesForProps(defaultConfig, propsConfig);
+  const { directive: referenceDirective, element$: referenceElement$ } = createBrowserStoreDirective();
+  const { directive: floatingDirective, element$: floatingElement$ } = createBrowserStoreDirective();
+  const isRtl$ = computed(() => {
+    const referenceElement = referenceElement$();
+    return referenceElement ? getTextDirection(referenceElement) === "rtl" : false;
+  });
+  const placementsArray$ = computed(
+    () => placementProp$().map((p) => {
+      return p.replace(/^(start|end)\b/, (match) => {
+        if (match === "start") {
+          return isRtl$() ? "right" : "left";
+        } else {
+          return isRtl$() ? "left" : "right";
+        }
+      });
+    })
+  );
+  const computePositionOptions$ = computed(() => {
+    const placements = placementsArray$();
+    return {
+      placement: placements[0],
+      strategy: strategy$(),
+      middleware: [hide(), offset({ mainAxis: offset$() }), flip({ fallbackPlacements: placements.slice(1) })]
+    };
+  });
+  const promisePosition$ = derived(
+    [floatingElement$, referenceElement$, computePositionOptions$],
+    ([floatingElement, referenceElement, computePositionOptions], set) => {
+      if (floatingElement && referenceElement) {
+        const clean = autoUpdate(referenceElement, floatingElement, () => {
+          set(computePosition(referenceElement, floatingElement, computePositionOptions));
+        });
+        return () => {
+          set(null);
+          clean();
+        };
+      }
+      return void 0;
+    },
+    null
+  );
+  const position$ = promiseStoreToValueStore(promisePosition$, null);
+  const placement$ = computed(() => position$()?.placement);
+  const referenceHidden$ = computed(() => position$()?.middlewareData.hide?.referenceHidden ?? false);
+  const floatingStyleDirective = createAttributesDirective(() => ({
+    styles: {
+      position: strategy$,
+      left: computed(() => `${position$()?.x ?? 0}px`),
+      top: computed(() => `${position$()?.y ?? 0}px`)
+    }
+  }));
+  return {
+    patch,
+    ...stateStores({
+      placement$,
+      referenceHidden$
+    }),
+    directives: {
+      referenceDirective,
+      floatingDirective: mergeDirectives(floatingDirective, floatingStyleDirective)
+    },
+    api: {}
+  };
+};
+export {
+  createPositioning,
+  typePlacement,
+  typePlacementArray
+};

package/services/resizeObserver.js

@@ -1,5 +1,5 @@
 import { derived } from "@amadeus-it-group/tansu";
-import { h as createBrowserStoreArrayDirective, d as browserDirective } from "../directive-CNNSo5Yn.js";
+import { h as createBrowserStoreArrayDirective, d as browserDirective } from "../directive-CMT2vEDg.js";
 import { noop } from "../utils/func.js";
 const createResizeObserverMap = () => {
   const { elements$, directive } = createBrowserStoreArrayDirective();

package/services/siblingsInert.js

@@ -1,5 +1,5 @@
 import { computed } from "@amadeus-it-group/tansu";
-import { j as createConditionalBrowserStoreArrayDirective, s as mergeDirectives, o as directiveSubscribe } from "../directive-CNNSo5Yn.js";
+import { j as createConditionalBrowserStoreArrayDirective, s as mergeDirectives, o as directiveSubscribe } from "../directive-CMT2vEDg.js";
 import { noop } from "../utils/func.js";
 const ignoreInertAttributeName = "data-agnos-ignore-inert";
 const applyInertToSiblingsRecursively = (element) => {

package/services/transitions/baseTransitions.js

@@ -1,9 +1,9 @@
 import { computed, writable, derived, batch } from "@amadeus-it-group/tansu";
-import { d as typeBooleanOrNull, e as typeFunction, b as typeBoolean } from "../../writables-DYGjj5T3.js";
-import { d as promiseWithResolve } from "../../promise-D-RZVPuv.js";
+import { e as typeBooleanOrNull, f as typeFunction, d as typeBoolean } from "../../writables-_7BriMb2.js";
+import { b as promiseWithResolve } from "../../promise-CkIc0KKt.js";
 import { noop } from "../../utils/func.js";
-import { writablesForProps, bindableDerived, stateStores } from "../../utils/stores.js";
-import { m as createStoreDirective, s as mergeDirectives, o as directiveSubscribe } from "../../directive-CNNSo5Yn.js";
+import { writablesForProps, bindableProp, stateStores } from "../../utils/stores.js";
+import { m as createStoreDirective, s as mergeDirectives, o as directiveSubscribe } from "../../directive-CMT2vEDg.js";
 const neverEndingPromise = new Promise(noop);
 const noAnimation = (element, direction) => {
   element.style.display = direction === "show" ? "" : "none";
@@ -44,7 +44,7 @@ const createTransition = (config) => {
   ] = writablesForProps(defaultValues, config, configValidator);
   const { element$, directive: storeDirective } = createStoreDirective();
   const elementPresent$ = computed(() => !!element$());
-  const visible$ = bindableDerived(onVisibleChange$, [requestedVisible$], ([visible]) => visible);
+  const visible$ = bindableProp(requestedVisible$, onVisibleChange$);
   const currentTransition$ = writable(
     null
   );
@@ -91,7 +91,7 @@ const createTransition = (config) => {
   const effectiveAnimation$ = computed(() => initDone$() ? animated$() : animatedOnInit$());
   const animationFromToggle$ = writable(null);
   let previousElement;
-  let previousVisible = requestedVisible$();
+  let previousVisible = visible$();
   let pendingTransition = null;
   const visibleAction$ = derived(
     [visible$, element$, effectiveAnimation$, animationFromToggle$, transition$, currentTransition$],
@@ -132,14 +132,14 @@ const createTransition = (config) => {
     }
   );
   let lastToggle = {};
-  const toggle = async (visible = !requestedVisible$(), animated = effectiveAnimation$()) => {
+  const toggle = async (visible = !visible$(), animated = effectiveAnimation$()) => {
     const currentToggle = {};
     lastToggle = currentToggle;
     try {
       await batch(() => {
         try {
           animationFromToggle$.set(animated);
-          requestedVisible$.set(visible);
+          visible$.set(visible);
           return visibleAction$();
         } finally {
           animationFromToggle$.set(null);

package/services/transitions/collapse.d.ts

@@ -3,6 +3,10 @@ import type { TransitionFn } from './baseTransitions';
  * Represents the context for a collapsible element.
  */
 export interface CollapseContext {
+    /**
+     * Whether the previous transition using this context was interrupted.
+     */
+    interrupted?: boolean;
     /**
      * the maximum size of the collapseable content.
      */

package/services/transitions/collapse.js

@@ -1,4 +1,4 @@
-import { q as isBrowserHTMLElement, x as removeClasses, y as addClasses, z as reflow } from "../../directive-CNNSo5Yn.js";
+import { q as isBrowserHTMLElement, x as removeClasses, y as addClasses, z as reflow } from "../../directive-CMT2vEDg.js";
 import { createCSSTransition } from "./cssTransitions.js";
 const createCollapseTransition = ({
   dimension = "height",
@@ -7,25 +7,29 @@ const createCollapseTransition = ({
   animationPendingClasses
 } = {}) => createCSSTransition((element, direction, animated, context) => {
   if (animated && isBrowserHTMLElement(element)) {
-    let { maxSize, minSize } = context;
-    removeClasses(element, animationPendingClasses);
-    removeClasses(element, hideClasses);
-    addClasses(element, showClasses);
-    maxSize = element.getBoundingClientRect()[dimension] + "px";
-    context.maxSize = maxSize;
-    removeClasses(element, animationPendingClasses);
-    removeClasses(element, showClasses);
-    addClasses(element, hideClasses);
-    minSize = element.getBoundingClientRect()[dimension] + "px";
-    context.minSize = minSize;
-    removeClasses(element, showClasses);
-    removeClasses(element, hideClasses);
-    const values = direction === "show" ? [minSize, maxSize] : [maxSize, minSize];
-    element.style[dimension] = values[0];
-    reflow(element);
-    addClasses(element, animationPendingClasses);
-    reflow(element);
+    const interrupted = context.interrupted;
+    if (!context.maxSize || !context.minSize) {
+      element.style[dimension] = "";
+      removeClasses(element, animationPendingClasses);
+      removeClasses(element, hideClasses);
+      addClasses(element, showClasses);
+      context.maxSize = element.getBoundingClientRect()[dimension] + "px";
+      removeClasses(element, animationPendingClasses);
+      removeClasses(element, showClasses);
+      addClasses(element, hideClasses);
+      context.minSize = element.getBoundingClientRect()[dimension] + "px";
+      removeClasses(element, showClasses);
+      removeClasses(element, hideClasses);
+    }
+    const values = direction === "show" ? [context.minSize, context.maxSize] : [context.maxSize, context.minSize];
+    if (!interrupted) {
+      element.style[dimension] = values[0];
+      reflow(element);
+      addClasses(element, animationPendingClasses);
+      reflow(element);
+    }
     element.style[dimension] = values[1];
+    context.interrupted = true;
   } else {
     removeClasses(element, direction === "show" ? hideClasses : showClasses);
   }

package/services/transitions/cssTransitions.js

@@ -1,6 +1,6 @@
-import { q as isBrowserHTMLElement } from "../../directive-CNNSo5Yn.js";
+import { q as isBrowserHTMLElement } from "../../directive-CMT2vEDg.js";
 import { noop } from "../../utils/func.js";
-import { b as promiseFromEvent, c as promiseFromTimeout } from "../../promise-D-RZVPuv.js";
+import { c as promiseFromEvent, d as promiseFromTimeout } from "../../promise-CkIc0KKt.js";
 function hasTransition(element) {
   return window.getComputedStyle(element).transitionProperty !== "none";
 }

package/services/transitions/simpleClassTransition.js

@@ -1,5 +1,5 @@
 import { createCSSTransition } from "./cssTransitions.js";
-import { x as removeClasses, y as addClasses, z as reflow } from "../../directive-CNNSo5Yn.js";
+import { x as removeClasses, y as addClasses, z as reflow } from "../../directive-CMT2vEDg.js";
 const createSimpleClassTransition = (config) => {
   const {
     animationPendingClasses,