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

package/components/drawer/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../drawer-BIIfJa0F.js";
+import { c, g } from "../../drawer-CpGnS2ln.js";
 export {
   c as createDrawer,
   g as getDrawerDefaultConfig

package/components/dropdown/dropdown.d.ts

@@ -0,0 +1,110 @@
+import { type Placement } from '../../services/positioning';
+import { type Directive, type Widget, type WidgetFactory } from '../../types';
+export type DropdownSize = 'sm' | 'md' | 'lg';
+/**
+ * Common props and state for the Dropdown component.
+ */
+interface DropdownCommonPropsAndState {
+    /**
+     * If `true` the dropdown menu is open
+     */
+    opened: boolean;
+    /**
+     * Size of the dropdown.
+     *
+     * @defaultValue `'md'`
+     */
+    size: DropdownSize;
+}
+/**
+ * Represents the state of a Dropdown component.
+ */
+export interface DropdownState extends DropdownCommonPropsAndState {
+}
+/**
+ * Properties for the Dropdown component.
+ */
+export interface DropdownProps extends DropdownCommonPropsAndState {
+    /**
+     * Callback called when the open state of the dropdown changes.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onOpenedChange: (opened: boolean) => void;
+    /**
+     * Preferred dropdown menu placement.
+     *
+     * Must be a space-separated list or an array of Placement, where the first value is the main placement and
+     * subsequent values are fallback placements.
+     *
+     * @defaultValue `['bottom-start', 'bottom-end', 'top-start', 'top-end']`
+     */
+    placement: Placement[];
+    /**
+     * Which element should contain the dropdown menu DOM element.
+     * - `'body'`: the menu is appended to `document.body` (useful when the toggle is inside an element that clips
+     *   its content via `overflow` or creates a stacking context).
+     * - `null` (default): the menu is rendered inline, where the dropdown is declared.
+     *
+     * @defaultValue `null`
+     */
+    container: 'body' | null;
+}
+/**
+ * Interface representing the API for a dropdown component.
+ */
+export interface DropdownApi {
+    /**
+     * Triggers dropdown closing programmatically.
+     */
+    close(): void;
+    /**
+     * Triggers the dropdown content to be displayed for the user.
+     */
+    open(): void;
+    /**
+     * Toggles the dropdown content visibility.
+     * @param open Optional parameter to explicitly set the dropdown state. If not provided, the state will be toggled.
+     */
+    toggle(open?: boolean): void;
+}
+/**
+ * Interface representing the directives used in a dropdown component.
+ */
+export interface DropdownDirectives {
+    /**
+     * Directive to apply to the anchor element (the reference point for positioning the dropdown menu)
+     */
+    anchorDirective: Directive;
+    /**
+     * Directive to apply positioned.
+     */
+    menuDirective: Directive;
+    /**
+     * Directive to apply to the dropdown host element (carries the ARIA semantics: `id`, `aria-live`).
+     */
+    dropdownDirective: Directive;
+}
+/**
+ * Represents a widget for handling dropdown functionality.
+ *
+ * This type defines the structure of a DropdownWidget, which includes properties, state, API, and directives
+ * necessary for managing the dropdown behavior in the UI.
+ *
+ * @type {Widget<DropdownProps, DropdownState, DropdownApi, DropdownDirectives>}
+ */
+export type DropdownWidget = Widget<DropdownProps, DropdownState, DropdownApi, DropdownDirectives>;
+/**
+ * Retrieve a shallow copy of the default dropdown config
+ * @returns the default dropdown config
+ */
+export declare function getDropdownDefaultConfig(): DropdownProps;
+/**
+ * Create an DropdownWidget factory
+ * @returns an DropdownWidget
+ */
+export declare const createDropdown: WidgetFactory<DropdownWidget>;
+export {};

package/components/dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './dropdown';

package/components/dropdown/index.js

@@ -0,0 +1,5 @@
+import { c, g } from "../../dropdown-Bjj2ql6d.js";
+export {
+  c as createDropdown,
+  g as getDropdownDefaultConfig
+};

package/components/modal/index.js

@@ -1,4 +1,4 @@
-import { c, g, m, a, b } from "../../modal-C13G13jV.js";
+import { c, g, m, a, b } from "../../modal-CQWh2Sm5.js";
 export {
   c as createModal,
   g as getModalDefaultConfig,

package/components/pagination/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../pagination-BQWusWXN.js";
+import { c, g } from "../../pagination-DIRcpdRE.js";
 export {
   c as createPagination,
   g as getPaginationDefaultConfig

package/components/progressbar/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../progressbar-S1pNn5rM.js";
+import { c, g } from "../../progressbar-Bth8r3Qu.js";
 export {
   c as createProgressbar,
   g as getProgressbarDefaultConfig

package/components/rating/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../rating-DWgGgwk3.js";
+import { c, g } from "../../rating-DLsgFSyB.js";
 export {
   c as createRating,
   g as getRatingDefaultConfig

package/components/slider/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../slider-Br_Qiopx.js";
+import { c, g } from "../../slider-b9cVFNAL.js";
 export {
   c as createSlider,
   g as getSliderDefaultConfig

package/components/slider/slider.d.ts

@@ -162,16 +162,22 @@ interface SliderCommonPropsAndState extends WidgetsCommonPropsAndState {
      */
     showTicks: boolean;
     /**
-     * It `true` slider display is inversed
+     * If `true`, visually flips the slider direction (both horizontal and vertical).
      *
      * @defaultValue `false`
      */
-    rtl: boolean;
+    flip: boolean;
 }
 /**
  * Represents the state of a slider component.
  */
 export interface SliderState extends SliderCommonPropsAndState {
+    /**
+     * It `true` slider display is inversed
+     *
+     * @defaultValue `false`
+     */
+    rtl: boolean;
     /**
      * Sorted slider values
      */
@@ -221,6 +227,13 @@ export interface SliderState extends SliderCommonPropsAndState {
  * Interface representing the properties for the Slider component.
  */
 export interface SliderProps extends SliderCommonPropsAndState {
+    /**
+     * If set, overrides the auto-detected RTL direction.
+     * When not set (`undefined`), RTL is auto-detected from the element's computed CSS direction.
+     *
+     * @defaultValue `undefined`
+     */
+    rtl: boolean | undefined;
     /**
      * Return the value for the 'aria-label' attribute for the handle
      * @param sortedIndex - index of the handle in the sorted list
@@ -277,16 +290,22 @@ export interface SliderProps extends SliderCommonPropsAndState {
      */
     showTickValues: boolean;
     /**
-     * Minimum distance between two values.
+     * Minimum distance between two handle values.
      * When set to 0, no minimum distance constraint is applied.
      *
+     * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),
+     * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.
+     *
      * @defaultValue `0`
      */
     minRange: number;
     /**
-     * Maximum distance between two values
+     * Maximum distance between two handle values.
      * When set to 0, no maximum distance constraint is applied.
      *
+     * Note: constraints are only enforced when a handle value changes (via user interaction or programmatic update),
+     * not on the initial values. If the initial values violate the constraint, they are rendered as-is until a handle moves.
+     *
      * @defaultValue `0`
      */
     maxRange: number;

package/components/toast/index.js

@@ -1,4 +1,4 @@
-import { T, c, d, g } from "../../toaster-BUBzFeJM.js";
+import { T, c, d, g } from "../../toaster-BS9qeRLF.js";
 export {
   T as Toaster,
   c as createToast,

package/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './tooltip';

package/components/tooltip/index.js

@@ -0,0 +1,174 @@
+import { writable, derived, computed, readable } from "@amadeus-it-group/tansu";
+import { createHasFocus, activeElement$ } from "../../services/focustrack.js";
+import { createHasMouseInside } from "../../services/mousetrack.js";
+import { typePlacement, createPositioning } from "../../services/positioning.js";
+import { createTransition } from "../../services/transitions/baseTransitions.js";
+import { createSimpleClassTransition } from "../../services/transitions/simpleClassTransition.js";
+import { debounceSignal } from "../../utils/debounceSignal.js";
+import { w as addEvent, s as mergeDirectives, g as createAttributesDirective, o as directiveSubscribe } from "../../directive-CMT2vEDg.js";
+import { createEdgeState } from "../../utils/edgeState.js";
+import { generateId } from "../../utils/id.js";
+import { writablesForProps, stateStores } from "../../utils/stores.js";
+import { createWidgetFactory } from "../../utils/widget.js";
+import { a as createTypeStringSpacedArray, d as typeBoolean, l as typeStringOrNull, c as createTypeEnum } from "../../writables-_7BriMb2.js";
+const verticalPlacement = ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"];
+const horizontalPlacement = ["end", "end-end", "end-start", "start", "start-end", "start-start"];
+const defaultPlacement = [...verticalPlacement, ...horizontalPlacement];
+const fadeTransition = createSimpleClassTransition({
+  animationPendingClasses: ["df-fade"],
+  animationPendingShowClasses: ["df-show"],
+  showClasses: ["df-show", "df-fade"],
+  hideClasses: ["df-hidden", "df-fade"]
+});
+const defaultTooltipConfig = {
+  animated: true,
+  content: "",
+  disabled: false,
+  placement: defaultPlacement,
+  size: "md"
+};
+const tooltipConfigValidator = {
+  animated: typeBoolean,
+  content: typeStringOrNull,
+  disabled: typeBoolean,
+  placement: createTypeStringSpacedArray((placement) => {
+    if (placement === "auto") {
+      return defaultPlacement;
+    } else if (placement === "vertical") {
+      return verticalPlacement;
+    } else if (placement === "horizontal") {
+      return horizontalPlacement;
+    }
+    return typePlacement.normalizeValue(placement);
+  }),
+  size: createTypeEnum(["sm", "md", "lg"])
+};
+const DEBOUNCE_DELAY = 200;
+const createTooltip = createWidgetFactory(
+  "tooltip",
+  (config) => {
+    const [{ placement$, animated$, disabled$, content$, ...stateProps }, patch] = writablesForProps(
+      defaultTooltipConfig,
+      config,
+      tooltipConfigValidator
+    );
+    const floating = createPositioning({
+      props: {
+        placement: placement$
+      }
+    });
+    const { directive: hasFocusDirective, hasFocus$ } = createHasFocus();
+    const forceVisibleOnFocus$ = writable(false);
+    const hasVisibleFocus$ = derived(
+      [hasFocus$, activeElement$, forceVisibleOnFocus$],
+      ([hasFocus, activeElement, forceVisibleOnFocus], set) => {
+        if (hasFocus) {
+          if (forceVisibleOnFocus || activeElement?.matches(":focus-visible")) {
+            set(true);
+          }
+        } else {
+          set(false);
+        }
+      },
+      false
+    );
+    const debouncedHasVisibleFocus$ = debounceSignal(hasVisibleFocus$, (value) => value ? DEBOUNCE_DELAY : -1);
+    const { directive: hasMouseInsideDirective, hasMouseInside$ } = createHasMouseInside();
+    const debouncedHasMouseInside$ = debounceSignal(hasMouseInside$, DEBOUNCE_DELAY);
+    const visible$ = createEdgeState(
+      {
+        mouseInside: debouncedHasMouseInside$,
+        hasVisibleFocus: debouncedHasVisibleFocus$
+      },
+      computed(() => disabled$() || !content$() || floating.stores.referenceHidden$())
+    );
+    const transition = createTransition({
+      props: {
+        transition: fadeTransition,
+        visible: visible$,
+        animated: animated$,
+        animatedOnInit: true
+      }
+    });
+    const escDismiss$ = readable(void 0, {
+      onUse: () => addEvent(
+        document.documentElement,
+        "keydown",
+        (event) => {
+          if (visible$() && event.key === "Escape") {
+            visible$.set(false);
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        },
+        { capture: true }
+      )
+    });
+    const id$ = computed(generateId);
+    return {
+      ...stateStores({
+        ...stateProps,
+        content$,
+        animated$,
+        disabled$,
+        placement$,
+        visible$: transition.stores.visible$,
+        hidden$: transition.stores.hidden$
+      }),
+      patch,
+      api: {},
+      directives: {
+        referenceDirective: mergeDirectives(
+          floating.directives.referenceDirective,
+          hasFocusDirective,
+          hasMouseInsideDirective,
+          createAttributesDirective(() => ({
+            attributes: {
+              "aria-describedby": computed(() => transition.stores.hidden$() ? void 0 : id$())
+            },
+            styles: {
+              // prevents the trigger element from being selected when long-pressing on touch devices
+              userSelect: computed(() => disabled$() ? void 0 : "none")
+            },
+            events: {
+              contextmenu: (event) => {
+                if (event.pointerType === "touch" && !disabled$()) {
+                  event.preventDefault();
+                  if (hasVisibleFocus$()) {
+                    visible$.set(true);
+                  } else {
+                    forceVisibleOnFocus$.set(true);
+                    event.currentTarget?.focus?.();
+                    forceVisibleOnFocus$.set(false);
+                  }
+                }
+              }
+            }
+          }))
+        ),
+        floatingDirective: mergeDirectives(
+          floating.directives.floatingDirective,
+          transition.directives.directive,
+          hasMouseInsideDirective,
+          directiveSubscribe(escDismiss$),
+          createAttributesDirective(() => ({
+            attributes: {
+              role: readable("tooltip"),
+              id: id$
+            },
+            events: {
+              mousedown: (event) => {
+                if (hasVisibleFocus$() && debouncedHasMouseInside$() && !event.defaultPrevented) {
+                  visible$.skipNextSourceValue("hasVisibleFocus", false);
+                }
+              }
+            }
+          }))
+        )
+      }
+    };
+  }
+);
+export {
+  createTooltip
+};

package/components/tooltip/tooltip.d.ts

@@ -0,0 +1,63 @@
+import { type Placement } from '../../services/positioning';
+import type { Directive, SSRHTMLElement, Widget, WidgetFactory } from '../../types';
+/**
+ * Valid placement values for the tooltip.
+ * Includes all individual {@link Placement} values plus `'auto'`, `'vertical'` and `'horizontal'` shortcuts.
+ *
+ * - `'auto'` expands to `'vertical horizontal'`
+ * - `'vertical'` expands to `'top top-start top-end bottom bottom-start bottom-end'`
+ * - `'horizontal'` expands to `'end end-end end-start start start-end start-start'`
+ */
+export type TooltipPlacement = Placement | 'auto' | 'vertical' | 'horizontal';
+export type TooltipSize = 'sm' | 'md' | 'lg';
+export interface TooltipCommonPropsAndState {
+    /**
+     * Text content to be displayed inside the tooltip.
+     */
+    content: string | null;
+    /**
+     * Size of the tooltip.
+     */
+    size: TooltipSize;
+    /**
+     * Whether showing or hiding the tooltip should be animated.
+     */
+    animated: boolean;
+    /**
+     * Whether the tooltip is disabled. When `true`, the tooltip will not be displayed, even if the reference element is focused, hovered or long-pressed.
+     */
+    disabled: boolean;
+    /**
+     * List of placements, in order of preference. The first valid placement will be used.
+     */
+    placement: Placement[];
+}
+export interface TooltipState extends TooltipCommonPropsAndState {
+    /**
+     * Whether the tooltip is currently visible.
+     */
+    visible: boolean;
+    /**
+     * Whether the tooltip is currently hidden. Note that there can be a delay between when `visible` becomes false and when `hidden` becomes true (while the transition is running if animated is true).
+     */
+    hidden: boolean;
+}
+export interface TooltipProps extends TooltipCommonPropsAndState {
+}
+export interface TooltipDirectives {
+    /**
+     * Directive to attach to the reference element
+     */
+    referenceDirective: Directive<void, SSRHTMLElement>;
+    /**
+     * Directive to attach to the floating element
+     */
+    floatingDirective: Directive<void, SSRHTMLElement>;
+}
+export type TooltipWidget = Widget<TooltipProps, TooltipState, Record<string, never>, TooltipDirectives>;
+/**
+ * Create a TooltipWidget with given config props
+ * @param config - an optional tooltip config
+ * @returns a TooltipWidget
+ */
+export declare const createTooltip: WidgetFactory<TooltipWidget>;

package/components/tree/index.js

@@ -1,4 +1,4 @@
-import { c, g } from "../../tree-vD7ZkV8Z.js";
+import { c, g } from "../../tree-DW6iLxdw.js";
 export {
   c as createTree,
   g as getTreeDefaultConfig

package/{directive-CNNSo5Yn.js → directive-CMT2vEDg.js}

@@ -221,10 +221,13 @@ function clsx() {
   for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
   return n;
 }
-const isBrowserHTMLElement = BROWSER ? ((element) => {
-  const contentWindow = element?.ownerDocument?.defaultView ?? window;
-  return element instanceof contentWindow.HTMLElement;
-}) : (
+const isBrowserHTMLElement = BROWSER ? (
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+  ((element) => {
+    const contentWindow = element?.ownerDocument?.defaultView ?? window;
+    return element instanceof contentWindow.HTMLElement;
+  })
+) : (
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ((element) => false)
 );

package/{drawer-BIIfJa0F.js → drawer-CpGnS2ln.js}

@@ -4,12 +4,12 @@ import { createPointerdownPositionDirective } from "./services/pointerdownPositi
 import { portal } from "./services/portal.js";
 import { siblingsInert } from "./services/siblingsInert.js";
 import { createTransition } from "./services/transitions/baseTransitions.js";
-import { b as bindDirective, i as createBrowserStoreDirective, s as mergeDirectives, g as createAttributesDirective, q as isBrowserHTMLElement, f as conditionalDirective, o as directiveSubscribe } from "./directive-CNNSo5Yn.js";
+import { b as bindDirective, i as createBrowserStoreDirective, s as mergeDirectives, g as createAttributesDirective, q as isBrowserHTMLElement, f as conditionalDirective, o as directiveSubscribe } from "./directive-CMT2vEDg.js";
 import { noop } from "./utils/func.js";
-import { a as revertScrollbars, r as removeScrollbars } from "./scrollbars-CcxSrnCx.js";
+import { a as revertScrollbars, r as removeScrollbars } from "./scrollbars-ChGk75QR.js";
 import { writablesForProps, bindableProp, stateStores, true$ } from "./utils/stores.js";
 import { createWidgetFactory } from "./utils/widget.js";
-import { b as typeBoolean, i as typeNumberOrNull, e as typeFunction, f as typeHTMLElementOrNull, j as typeString, c as createTypeEnum } from "./writables-DYGjj5T3.js";
+import { d as typeBoolean, j as typeNumberOrNull, f as typeFunction, g as typeHTMLElementOrNull, k as typeString, c as createTypeEnum } from "./writables-_7BriMb2.js";
 import { g as getTextDirection } from "./textDirection-cNgt24LJ.js";
 function getDrawerDefaultConfig() {
   return {
@@ -36,6 +36,7 @@ const defaultDrawerConfig = {
   onResizingChange: noop,
   resizable: false,
   backdrop: true,
+  closeOnBackdropClick: true,
   bodyScroll: false,
   size: null,
   focusOnInit: true,
@@ -62,6 +63,7 @@ const configValidator = {
   onResizingChange: typeFunction,
   resizable: typeBoolean,
   backdrop: typeBoolean,
+  closeOnBackdropClick: typeBoolean,
   bodyScroll: typeBoolean,
   size: typeNumberOrNull,
   focusOnInit: typeBoolean,
@@ -96,6 +98,7 @@ const createDrawer = createWidgetFactory(
         focusOnInit$,
         configuration$,
         position$,
+        closeOnBackdropClick$,
         ...stateProps
       },
       patch
@@ -189,7 +192,11 @@ const createDrawer = createWidgetFactory(
         "data-agnos-ignore-inert": true$
       },
       events: {
-        click: () => void transition.api.hide()
+        click: () => {
+          if (closeOnBackdropClick$()) {
+            void transition.api.hide();
+          }
+        }
       }
     }));
     const direction$ = computed(() => {
@@ -222,11 +229,11 @@ const createDrawer = createWidgetFactory(
         let isResizing = false;
         return {
           onMove(event2) {
-            setSize(startSize + directionFactor * direction * (event2[clientXorY] - startPos));
             if (!isResizing) {
               isResizing = true;
               onResizingChange$()(true);
             }
+            setSize(startSize + directionFactor * direction * (event2[clientXorY] - startPos));
           },
           onEnd() {
             drawerElement.style[isVertical ? "height" : "width"] = "";