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

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 { 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";

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,20 +7,17 @@ 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;
+    context.maxSize = element.getBoundingClientRect()[dimension] + "px";
     removeClasses(element, animationPendingClasses);
     removeClasses(element, showClasses);
     addClasses(element, hideClasses);
-    minSize = element.getBoundingClientRect()[dimension] + "px";
-    context.minSize = minSize;
+    context.minSize = element.getBoundingClientRect()[dimension] + "px";
     removeClasses(element, showClasses);
     removeClasses(element, hideClasses);
-    const values = direction === "show" ? [minSize, maxSize] : [maxSize, minSize];
+    const values = direction === "show" ? [context.minSize, context.maxSize] : [context.maxSize, context.minSize];
     element.style[dimension] = values[0];
     reflow(element);
     addClasses(element, animationPendingClasses);

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,