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

package/dropdown-Bjj2ql6d.js

@@ -0,0 +1,246 @@
+import { computed, readable, derived } from "@amadeus-it-group/tansu";
+import { createHasFocus } from "./services/focustrack.js";
+import { createNavManager } from "./services/navManager.js";
+import { typePlacementArray, createPositioning } from "./services/positioning.js";
+import { s as mergeDirectives, g as createAttributesDirective, d as browserDirective, o as directiveSubscribe, b as bindDirective } from "./directive-CMT2vEDg.js";
+import { noop } from "./utils/func.js";
+import { generateId } from "./utils/id.js";
+import { i as isFocusable, f as findPreviousFocusableElement, a as findNextFocusableElement, b as findNextElementSkippingSubtree, c as findNextElement } from "./isFocusable-C2iRr0zh.js";
+import { writablesForProps, bindableProp, stateStores } from "./utils/stores.js";
+import { createWidgetFactory } from "./utils/widget.js";
+import { f as typeFunction, d as typeBoolean, c as createTypeEnum } from "./writables-_7BriMb2.js";
+const defaultDropdownConfig = {
+  opened: false,
+  onOpenedChange: noop,
+  placement: ["bottom-start", "bottom-end", "top-start", "top-end"],
+  container: null,
+  size: "md"
+};
+function getDropdownDefaultConfig() {
+  return { ...defaultDropdownConfig };
+}
+const commonDropdownConfigValidator = {
+  opened: typeBoolean,
+  onOpenedChange: typeFunction,
+  placement: typePlacementArray,
+  container: createTypeEnum(["body", null]),
+  size: createTypeEnum(["sm", "md", "lg"])
+};
+const createDropdown = createWidgetFactory(
+  "dropdown",
+  (config) => {
+    const [{ placement$, opened$: _dirtyOpened$, container$, onOpenedChange$, ...stateProps }, patch] = writablesForProps(defaultDropdownConfig, config, commonDropdownConfigValidator);
+    const opened$ = bindableProp(_dirtyOpened$, onOpenedChange$);
+    const id$ = computed(generateId);
+    const menuId$ = computed(generateId);
+    const {
+      directive: navDirective,
+      focusPrevious,
+      focusNext,
+      focusFirst,
+      focusLast,
+      refreshElements
+    } = createNavManager();
+    let anchorElement;
+    const menuItemSelector = '.df-dropdown-item:not(:disabled):not([aria-disabled="true"])';
+    const navManagerConfig$ = readable({
+      keys: {
+        Tab: ({ event, directiveElement }) => {
+          if (anchorElement) {
+            if (positioningBeforeRef$()) {
+              event.preventDefault();
+              anchorElement.focus();
+            } else {
+              const next = findNextFocusableElement(
+                anchorElement,
+                (element) => directiveElement.contains(element) ? findNextElementSkippingSubtree(directiveElement) : findNextElement(element)
+              );
+              if (next && !directiveElement.contains(next)) {
+                event.preventDefault();
+                next.focus();
+              }
+            }
+          }
+        },
+        "Shift+Tab": ({ event }) => {
+          if (anchorElement) {
+            event.preventDefault();
+            (positioningBeforeRef$() ? findPreviousFocusableElement(anchorElement) : anchorElement)?.focus();
+          }
+        },
+        ArrowUp: ({ event }) => {
+          event.preventDefault();
+          focusPrevious({ event });
+        },
+        ArrowDown: ({ event }) => {
+          event.preventDefault();
+          focusNext({ event });
+        },
+        Home: ({ event }) => {
+          event.preventDefault();
+          focusFirst({ event });
+        },
+        End: ({ event }) => {
+          event.preventDefault();
+          focusLast({ event });
+        },
+        Escape: ({ event }) => {
+          event.preventDefault();
+          toggle(false);
+          anchorElement?.focus();
+        }
+      },
+      selector: (menuElement) => menuElement.querySelectorAll(menuItemSelector)
+    });
+    const positioning = createPositioning({
+      props: {
+        placement: placement$,
+        strategy: "absolute"
+      }
+    });
+    const positioningBeforeRef$ = computed(() => positioning.stores.placement$()?.startsWith("top"));
+    const { directive: hasFocusDirective, hasFocus$ } = createHasFocus();
+    let previousHasFocus = false;
+    const autoClose$ = derived(hasFocus$, (hasFocus) => {
+      if (previousHasFocus && !hasFocus) {
+        toggle(false);
+      }
+      previousHasFocus = hasFocus;
+    });
+    function toggle(opened) {
+      opened$.update((currentOpened) => {
+        return opened !== void 0 ? opened : !currentOpened;
+      });
+    }
+    const menuIdIfNeeded$ = computed(() => opened$() && container$() === "body" ? menuId$() : void 0);
+    const idIfOpen$ = computed(() => opened$() ? id$() : void 0);
+    return {
+      ...stateStores({ opened$, ...stateProps }),
+      patch,
+      api: {
+        open: () => toggle(true),
+        close: () => toggle(false),
+        toggle
+      },
+      directives: {
+        menuDirective: mergeDirectives(
+          positioning.directives.floatingDirective,
+          bindDirective(navDirective, navManagerConfig$),
+          hasFocusDirective,
+          directiveSubscribe(autoClose$),
+          createAttributesDirective(() => ({
+            events: {
+              // Clicking a non-interactive region of the menu (separator, padding, headers, aria-disabled items)
+              // would otherwise blur focus to <body> and trigger the focus-loss auto-close. Prevent the focus shift
+              // so the menu stays open; only enabled items are allowed to move focus and then close on click.
+              mousedown: (event) => {
+                let { currentTarget, target } = event;
+                while (target && target !== currentTarget) {
+                  if (isFocusable(target)) {
+                    return;
+                  }
+                  target = target.parentElement;
+                }
+                event.preventDefault();
+              },
+              // Selecting an enabled menu item performs its action and closes the menu. Click also covers keyboard
+              // activation (Enter on link/button, Space on button), which dispatches a bubbling click event.
+              // The walk is bounded at `currentTarget` (this menu): an item belonging to an enclosing dropdown
+              // (e.g. when this menu is nested inside another dropdown's item) is never reached, so it cannot
+              // close this menu.
+              click: (event) => {
+                let { currentTarget, target } = event;
+                while (target && target !== currentTarget) {
+                  if (target.matches(menuItemSelector)) {
+                    toggle(false);
+                    return;
+                  }
+                  target = target.parentElement;
+                }
+              }
+            },
+            attributes: {
+              id: menuIdIfNeeded$
+            }
+          }))
+        ),
+        dropdownDirective: createAttributesDirective(() => ({
+          attributes: {
+            id: id$,
+            "aria-owns": menuIdIfNeeded$,
+            "aria-live": readable(`polite`),
+            // The host only holds the menu content while opened, so it is hidden from the accessibility tree when closed.
+            "aria-hidden": computed(() => opened$() ? void 0 : "true")
+          }
+        })),
+        anchorDirective: mergeDirectives(
+          positioning.directives.referenceDirective,
+          browserDirective((anchor) => {
+            anchorElement = anchor;
+            return {
+              destroy: () => {
+                if (anchorElement === anchor) {
+                  anchorElement = void 0;
+                }
+              }
+            };
+          }),
+          hasFocusDirective,
+          createAttributesDirective(() => ({
+            events: {
+              click: () => toggle(),
+              keydown: (event) => {
+                const key = event.key;
+                if (opened$()) {
+                  if (key === "ArrowDown") {
+                    event.preventDefault();
+                    refreshElements(true);
+                    focusFirst();
+                  } else if (key === "ArrowUp") {
+                    event.preventDefault();
+                    refreshElements(true);
+                    focusLast();
+                  } else if (key === "Escape") {
+                    event.preventDefault();
+                    toggle(false);
+                  } else if (key === "Tab") {
+                    const before = positioningBeforeRef$();
+                    if (!!event.shiftKey === before) {
+                      event.preventDefault();
+                      refreshElements(true);
+                      (before ? focusLast : focusFirst)();
+                    }
+                  }
+                } else if (key === "Enter" || key === " ") {
+                  event.preventDefault();
+                  toggle(true);
+                  requestAnimationFrame(() => {
+                    refreshElements(true);
+                    const menuElement = document.getElementById(menuIdIfNeeded$() ?? id$());
+                    const activeItem = menuElement?.querySelector(
+                      `.df-dropdown-item.df-active:not(:disabled):not([aria-disabled="true"])`
+                    );
+                    if (activeItem) {
+                      activeItem.focus();
+                    } else {
+                      focusFirst();
+                    }
+                  });
+                }
+              }
+            },
+            attributes: {
+              "aria-haspopup": readable("true"),
+              "aria-expanded": computed(() => `${opened$()}`),
+              "aria-controls": idIfOpen$
+            }
+          }))
+        )
+      }
+    };
+  }
+);
+export {
+  createDropdown as c,
+  getDropdownDefaultConfig as g
+};

package/index.d.ts

@@ -2,6 +2,7 @@ export * from './types';
 export * from './components/accordion';
 export * from './components/alert';
 export * from './components/collapse';
+export * from './components/dropdown';
 export * from './components/modal';
 export * from './components/pagination';
 export * from './components/progressbar';
@@ -12,12 +13,13 @@ export * from './components/tree';
 export * from './components/drawer';
 export * from './config';
 export * from './services/extendWidget';
-export * from './services/floatingUI';
 export * from './services/focustrack';
 export * from './services/intersection';
 export * from './services/matchMedia';
+export * from './services/mousetrack';
 export * from './services/navManager';
 export * from './services/portal';
+export * from './services/positioning';
 export * from './services/resizeObserver';
 export * from './services/siblingsInert';
 export * from './services/hash';

package/index.js

@@ -1,32 +1,34 @@
 import { FACTORY_WIDGET_NAME, INVALID_VALUE } from "./types.js";
-import { c, a, f, g } from "./accordion-D9ba0XYq.js";
-import { c as c2, g as g2 } from "./alert-Cb9FhbFQ.js";
-import { c as c3, g as g3 } from "./collapse-Bn8iHKrd.js";
-import { c as c4, g as g4, m, a as a2, b } from "./modal-BH9nrwVz.js";
-import { c as c5, g as g5 } from "./pagination-BQWusWXN.js";
-import { c as c6, g as g6 } from "./progressbar-S1pNn5rM.js";
-import { c as c7, g as g7 } from "./rating-DWgGgwk3.js";
-import { c as c8, g as g8 } from "./slider-Br_Qiopx.js";
-import { T, c as c9, d, g as g9 } from "./toaster-BUBzFeJM.js";
-import { c as c10, g as g10 } from "./tree-vD7ZkV8Z.js";
-import { c as c11, g as g11 } from "./drawer-CoBXUPyv.js";
+import { c, a, f, g } from "./accordion-B5RqDwi3.js";
+import { c as c2 } from "./alert-Db6cG6JE.js";
+import { c as c3, g as g2 } from "./collapse-D8Jo56k9.js";
+import { c as c4, g as g3 } from "./dropdown-Bjj2ql6d.js";
+import { c as c5, g as g4, m, a as a2, b } from "./modal-CQWh2Sm5.js";
+import { c as c6, g as g5 } from "./pagination-DIRcpdRE.js";
+import { c as c7, g as g6 } from "./progressbar-Bth8r3Qu.js";
+import { c as c8, g as g7 } from "./rating-DLsgFSyB.js";
+import { c as c9, g as g8 } from "./slider-b9cVFNAL.js";
+import { T, c as c10, d, g as g9 } from "./toaster-BS9qeRLF.js";
+import { c as c11, g as g10 } from "./tree-DW6iLxdw.js";
+import { c as c12, g as g11 } from "./drawer-CpGnS2ln.js";
 import { createWidgetsConfig, mergeInto } from "./config.js";
 import { extendWidgetProps } from "./services/extendWidget.js";
-import { createFloatingUI } from "./services/floatingUI.js";
 import { activeElement$, createHasFocus } from "./services/focustrack.js";
 import { createIntersection } from "./services/intersection.js";
 import { createMatchMedia } from "./services/matchMedia.js";
+import { createHasMouseInside } from "./services/mousetrack.js";
 import { createNavManager, getKeyName, isInternalInputNavigation } from "./services/navManager.js";
 import { portal } from "./services/portal.js";
+import { createPositioning, typePlacement, typePlacementArray } from "./services/positioning.js";
 import { createResizeObserver, createResizeObserverMap } from "./services/resizeObserver.js";
 import { siblingsInert } from "./services/siblingsInert.js";
 import { hash$ } from "./services/hash.js";
 import { createTransition, noAnimation } from "./services/transitions/baseTransitions.js";
 import { createCSSTransition, getTransitionDurationMs, hasTransition } from "./services/transitions/cssTransitions.js";
 import { createSimpleClassTransition } from "./services/transitions/simpleClassTransition.js";
-import { a as a3, b as b2, c as c12, d as d2, e, f as f2, g as g12, h, i, j, k, l, m as m2, n, o, p, q, r, s, t, u, v } from "./directive-CNNSo5Yn.js";
+import { a as a3, b as b2, c as c13, d as d2, e, f as f2, g as g12, h, i, j, k, l, m as m2, n, o, p, q, r, s, t, u, v } from "./directive-CMT2vEDg.js";
 import { bindableDerived, bindableProp, createPatch, false$, findChangedProperties, idWithDefault, isStore, mergeConfigStores, normalizeConfigStores, stateStores, toReadableStore, toWritableStore, true$, writableWithDefault, writablesForProps, writablesWithDefault } from "./utils/stores.js";
-import { c as c13, t as t2, a as a4, b as b3, d as d3, e as e2, f as f3, g as g13, h as h2, i as i2, j as j2, k as k2 } from "./writables-DYGjj5T3.js";
+import { c as c14, a as a4, t as t2, b as b3, d as d3, e as e2, f as f3, g as g13, h as h2, i as i2, j as j2, k as k2, l as l2 } from "./writables-_7BriMb2.js";
 export {
   FACTORY_WIDGET_NAME,
   INVALID_VALUE,
@@ -34,7 +36,7 @@ export {
   activeElement$,
   a3 as attributesData,
   b2 as bindDirective,
-  c12 as bindDirectiveNoArg,
+  c13 as bindDirectiveNoArg,
   bindableDerived,
   bindableProp,
   d2 as browserDirective,
@@ -50,27 +52,30 @@ export {
   c3 as createCollapse,
   j as createConditionalBrowserStoreArrayDirective,
   k as createConditionalStoreArrayDirective,
-  c11 as createDrawer,
-  createFloatingUI,
+  c12 as createDrawer,
+  c4 as createDropdown,
   createHasFocus,
+  createHasMouseInside,
   createIntersection,
   createMatchMedia,
-  c4 as createModal,
+  c5 as createModal,
   createNavManager,
-  c5 as createPagination,
+  c6 as createPagination,
   createPatch,
-  c6 as createProgressbar,
-  c7 as createRating,
+  createPositioning,
+  c7 as createProgressbar,
+  c8 as createRating,
   createResizeObserver,
   createResizeObserverMap,
   createSimpleClassTransition,
-  c8 as createSlider,
+  c9 as createSlider,
   l as createStoreArrayDirective,
   m2 as createStoreDirective,
-  c9 as createToast,
+  c10 as createToast,
   createTransition,
-  c10 as createTree,
-  c13 as createTypeEnum,
+  c11 as createTree,
+  c14 as createTypeEnum,
+  a4 as createTypeStringSpacedArray,
   createWidgetsConfig,
   d as defaultToasterProps,
   n as directiveAttributes,
@@ -81,9 +86,9 @@ export {
   false$,
   findChangedProperties,
   g as getAccordionDefaultConfig,
-  g2 as getAlertDefaultConfig,
-  g3 as getCollapseDefaultConfig,
+  g2 as getCollapseDefaultConfig,
   g11 as getDrawerDefaultConfig,
+  g3 as getDropdownDefaultConfig,
   getKeyName,
   g4 as getModalDefaultConfig,
   g5 as getPaginationDefaultConfig,
@@ -118,16 +123,18 @@ export {
   toReadableStore,
   toWritableStore,
   true$,
-  a4 as typeArray,
-  b3 as typeBoolean,
-  d3 as typeBooleanOrNull,
-  e2 as typeFunction,
-  f3 as typeHTMLElementOrNull,
-  g13 as typeNumber,
-  h2 as typeNumberInRangeFactory,
-  i2 as typeNumberOrNull,
-  j2 as typeString,
-  k2 as typeStringOrNull,
+  b3 as typeArray,
+  d3 as typeBoolean,
+  e2 as typeBooleanOrNull,
+  f3 as typeFunction,
+  g13 as typeHTMLElementOrNull,
+  h2 as typeNumber,
+  i2 as typeNumberInRangeFactory,
+  j2 as typeNumberOrNull,
+  typePlacement,
+  typePlacementArray,
+  k2 as typeString,
+  l2 as typeStringOrNull,
   writableWithDefault,
   writablesForProps,
   writablesWithDefault

package/isFocusable-C2iRr0zh.js

@@ -0,0 +1,72 @@
+const isInertOrInvisible = (element) => {
+  let curElement = element;
+  while (curElement) {
+    const style = getComputedStyle(curElement);
+    if (curElement.inert || curElement.hidden || style.display === "none" || style.visibility === "hidden") {
+      return true;
+    }
+    curElement = curElement.parentElement;
+  }
+  return false;
+};
+const checkNotDisabled = (element) => {
+  if (element.disabled) {
+    return false;
+  }
+  const parentFieldset = element.parentElement?.closest("fieldset");
+  return parentFieldset ? checkNotDisabled(parentFieldset) : true;
+};
+const isFocusableOtherTags = (element) => element.isContentEditable || !!element.hasAttribute("tabindex");
+const isFocusableByTagName = {
+  INPUT: (element) => element.type !== "hidden" && checkNotDisabled(element),
+  SELECT: checkNotDisabled,
+  TEXTAREA: checkNotDisabled,
+  BUTTON: checkNotDisabled,
+  A: (element) => !!element.href || isFocusableOtherTags(element)
+};
+const isFocusable = (element) => {
+  return document.contains(element) && !isInertOrInvisible(element) && (isFocusableByTagName[element.tagName] ?? isFocusableOtherTags)(element);
+};
+const findNextElementSkippingSubtree = (element) => {
+  let curElement = element;
+  while (curElement) {
+    if (curElement.nextElementSibling) {
+      return curElement.nextElementSibling;
+    }
+    curElement = curElement.parentElement;
+  }
+  return null;
+};
+const findNextElement = (element) => (
+  // First descend into the first child, if any; otherwise skip past this element's subtree.
+  element.firstElementChild ?? findNextElementSkippingSubtree(element)
+);
+const findPreviousElement = (element) => {
+  const previousSibling = element.previousElementSibling;
+  if (previousSibling) {
+    let curElement = previousSibling;
+    while (curElement.lastElementChild) {
+      curElement = curElement.lastElementChild;
+    }
+    return curElement;
+  }
+  return element.parentElement;
+};
+const findNextFocusableElement = (element, findNextElementFn = findNextElement) => {
+  let nextElement = findNextElementFn(element);
+  while (nextElement) {
+    if (isFocusable(nextElement)) {
+      return nextElement;
+    }
+    nextElement = findNextElementFn(nextElement);
+  }
+  return null;
+};
+const findPreviousFocusableElement = (element, findPreviousElementFn = findPreviousElement) => findNextFocusableElement(element, findPreviousElementFn);
+export {
+  findNextFocusableElement as a,
+  findNextElementSkippingSubtree as b,
+  findNextElement as c,
+  findPreviousFocusableElement as f,
+  isFocusable as i
+};

package/{modal-BH9nrwVz.js → modal-CQWh2Sm5.js}

@@ -1,11 +1,11 @@
 import { computed, readable } from "@amadeus-it-group/tansu";
-import { b as typeBoolean, e as typeFunction, j as typeString, f as typeHTMLElementOrNull } from "./writables-DYGjj5T3.js";
+import { d as typeBoolean, f as typeFunction, k as typeString, g as typeHTMLElementOrNull } from "./writables-_7BriMb2.js";
 import { writablesForProps, stateStores } from "./utils/stores.js";
 import { createTransition } from "./services/transitions/baseTransitions.js";
-import { p as promiseFromStore } from "./promise-D-RZVPuv.js";
+import { p as promiseFromStore } from "./promise-CkIc0KKt.js";
 import { noop } from "./utils/func.js";
 import { r as removeScrollbars, a as revertScrollbars } from "./scrollbars-ChGk75QR.js";
-import { u as registrationArray, b as bindDirective, g as createAttributesDirective, d as browserDirective, s as mergeDirectives, o as directiveSubscribe, c as bindDirectiveNoArg } from "./directive-CNNSo5Yn.js";
+import { u as registrationArray, b as bindDirective, g as createAttributesDirective, d as browserDirective, s as mergeDirectives, o as directiveSubscribe, c as bindDirectiveNoArg } from "./directive-CMT2vEDg.js";
 import { portal } from "./services/portal.js";
 import { siblingsInert } from "./services/siblingsInert.js";
 import { createWidgetFactory } from "./utils/widget.js";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@design-factory/core",
 	"description": "Internal package used by the Design Factory.",
-	"version": "21.1.0",
+	"version": "22.0.0-next.0",
 	"type": "module",
 	"main": "./index.cjs",
 	"module": "./index.js",

package/{pagination-BQWusWXN.js → pagination-DIRcpdRE.js}

@@ -1,8 +1,8 @@
 import { computed } from "@amadeus-it-group/tansu";
 import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.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 { 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 { g as createAttributesDirective } from "./directive-CNNSo5Yn.js";
+import { g as createAttributesDirective } from "./directive-CMT2vEDg.js";
 import { createWidgetFactory } from "./utils/widget.js";
 const PAGE_LINK_DEFAULT = "#";
 const defaultConfig = {

package/{progressbar-S1pNn5rM.js → progressbar-Bth8r3Qu.js}

@@ -1,7 +1,7 @@
-import { e as typeFunction, j as typeString, g as typeNumber, l as clamp } from "./writables-DYGjj5T3.js";
+import { f as typeFunction, k as typeString, h as typeNumber, m as clamp } from "./writables-_7BriMb2.js";
 import { writablesForProps, stateStores } from "./utils/stores.js";
 import { computed, readable } from "@amadeus-it-group/tansu";
-import { g as createAttributesDirective } from "./directive-CNNSo5Yn.js";
+import { g as createAttributesDirective } from "./directive-CMT2vEDg.js";
 import { createWidgetFactory } from "./utils/widget.js";
 const defaultConfig = {
   min: 0,

package/{promise-D-RZVPuv.js → promise-CkIc0KKt.js}

@@ -112,8 +112,8 @@ const promiseWithResolve = () => {
 };
 export {
   promiseStoreToValueStore as a,
-  promiseFromEvent as b,
-  promiseFromTimeout as c,
-  promiseWithResolve as d,
+  promiseWithResolve as b,
+  promiseFromEvent as c,
+  promiseFromTimeout as d,
   promiseFromStore as p
 };

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;