@agnos-ui/core 0.0.1-alpha.3 → 0.0.1-alpha.5

package/services/portal.js

@@ -8,14 +8,18 @@ export const portal = (content, newArg) => {
         }
     };
     const update = (newArg) => {
-        if (newArg !== arg) {
+        if (newArg !== arg && (newArg?.container !== arg?.container || newArg?.insertBefore !== arg?.insertBefore)) {
             arg = newArg;
             const container = arg?.container ?? arg?.insertBefore?.parentElement;
             if (container) {
-                if (!replaceComment) {
-                    replaceComment = content.parentNode?.insertBefore(content.ownerDocument.createComment('portal'), content);
+                const insertBefore = arg?.insertBefore ?? null;
+                const moveNeeded = content.parentElement !== container || content.nextSibling !== insertBefore;
+                if (moveNeeded) {
+                    if (!replaceComment) {
+                        replaceComment = content.parentNode?.insertBefore(content.ownerDocument.createComment('portal'), content);
+                    }
+                    container.insertBefore(content, insertBefore);
                 }
-                container.insertBefore(content, arg?.insertBefore ?? null);
             }
             else {
                 removeReplaceComment();

package/services/siblingsInert.d.ts

@@ -1,7 +1,8 @@
+import type { Directive } from '../types';
 /**
  * sliblingsInert directive
  * When used on an element, all siblings of the element and of its ancestors will be inert with the inert attribute.
  * In case it is used on multiple elements, only the last one has an effect (the directive keeps a stack of elements
  * on which it is used, so when the last one disappears, the previous one in the list becomes the one in effect).
  */
-export declare const sliblingsInert: import("..").Directive<void>;
+export declare const sliblingsInert: Directive;

package/services/siblingsInert.js

@@ -1,6 +1,6 @@
 import { computed } from '@amadeus-it-group/tansu';
-import { noop } from '../utils';
-import { createStoreArrayDirective, directiveSubscribe, mergeDirectives } from './directiveUtils';
+import { noop } from '../utils/internal/func';
+import { createStoreArrayDirective, directiveSubscribe, mergeDirectives } from '../utils/directive';
 const internalSetSiblingsInert = (element) => {
     const inertValues = new Map();
     const recursiveHelper = (element) => {

package/{transitions → services/transitions}/baseTransitions.d.ts

@@ -1,5 +1,4 @@
-import type { PropsConfig } from '../services';
-import type { Directive, Widget } from '../types';
+import type { Directive, PropsConfig, Widget } from '../../types';
 /**
  * Function that implements a transition.
  */

package/{transitions → services/transitions}/baseTransitions.js

@@ -1,7 +1,9 @@
 import { batch, computed, derived, writable } from '@amadeus-it-group/tansu';
-import { bindableDerived, createStoreDirective, directiveSubscribe, directiveUpdate, mergeDirectives, stateStores, writablesForProps, } from '../services';
-import { typeBoolean, typeFunction } from '../services/writables';
-const noop = () => { };
+import { typeBoolean, typeBooleanOrNull, typeFunction } from '../../utils/writables';
+import { promiseWithResolve } from '../../utils/internal/promise';
+import { noop } from '../../utils/internal/func';
+import { bindableDerived, stateStores, writablesForProps } from '../../utils/stores';
+import { createStoreDirective, directiveSubscribe, directiveUpdate, mergeDirectives } from '../../utils/directive';
 const neverEndingPromise = new Promise(noop);
 export const noAnimation = async (element, direction) => {
     element.style.display = direction === 'show' ? '' : 'none';
@@ -23,13 +25,8 @@ const configValidator = {
     transition: typeFunction,
     onShown: typeFunction,
     onHidden: typeFunction,
-};
-const promiseWithResolve = () => {
-    let resolve;
-    const promise = new Promise((r) => {
-        resolve = r;
-    });
-    return { promise, resolve: resolve };
+    onVisibleChange: typeFunction,
+    initDone: typeBooleanOrNull,
 };
 export const createTransition = (config) => {
     const [{ animation$, initDone$, visible$: requestedVisible$, transition$, onShown$, onHidden$, onVisibleChange$, animationOnInit$ }, patch] = writablesForProps(defaultValues, config, configValidator);

package/services/transitions/bootstrap/collapse.d.ts

@@ -0,0 +1,2 @@
+export declare const collapseVerticalTransition: import("../baseTransitions").TransitionFn;
+export declare const collapseHorizontalTransition: import("../baseTransitions").TransitionFn;

package/services/transitions/bootstrap/fade.d.ts

@@ -0,0 +1 @@
+export declare const fadeTransition: import("../baseTransitions").TransitionFn;

package/services/transitions/bootstrap.d.ts

@@ -0,0 +1,2 @@
+export * from './bootstrap/collapse';
+export * from './bootstrap/fade';

package/services/transitions/bootstrap.js

@@ -0,0 +1,2 @@
+export * from './bootstrap/collapse';
+export * from './bootstrap/fade';

package/{transitions → services/transitions}/collapse.js

@@ -1,5 +1,5 @@
 import { createCSSTransition } from './cssTransitions';
-import { addClasses, reflow, removeClasses } from './utils';
+import { addClasses, reflow, removeClasses } from '../../utils/internal/dom';
 export const createCollapseTransition = ({ dimension = 'height', showClasses, hideClasses, animationPendingClasses } = {}) => createCSSTransition((element, direction, animation, context) => {
     if (animation) {
         let { maxSize, minSize } = context;

package/{transitions → services/transitions}/cssTransitions.js

@@ -1,4 +1,5 @@
-import { promiseFromEvent, promiseFromTimeout } from './utils';
+import { noop } from '../../utils/internal/func';
+import { promiseFromEvent, promiseFromTimeout } from '../../utils/internal/promise';
 /**
  * Check if the provided html element has a transition
  * @param element - the html element
@@ -18,9 +19,6 @@ export function getTransitionDurationMs(element) {
     const transitionDurationSec = parseFloat(transitionDuration);
     return (transitionDelaySec + transitionDurationSec) * 1000;
 }
-const noop = () => {
-    /* do nothing */
-};
 export const createCSSTransition = (start) => async (element, direction, animation, signal, context) => {
     const endFn = start(element, direction, animation, context) ?? noop;
     if (animation && hasTransition(element)) {

package/{transitions → services/transitions}/simpleClassTransition.js

@@ -1,5 +1,5 @@
 import { createCSSTransition } from './cssTransitions';
-import { addClasses, reflow, removeClasses } from './utils';
+import { addClasses, reflow, removeClasses } from '../../utils/internal/dom';
 export const createSimpleClassTransition = ({ animationPendingClasses, animationPendingShowClasses, animationPendingHideClasses, showClasses, hideClasses, }) => createCSSTransition((element, direction, animation, context) => {
     removeClasses(element, showClasses);
     removeClasses(element, hideClasses);

package/types.d.ts

@@ -1,5 +1,22 @@
-import type { ReadableSignal, SubscribableStore } from '@amadeus-it-group/tansu';
-import type { PropsConfig } from './services';
+import type { ReadableSignal, StoreOptions, SubscribableStore, WritableSignal } from '@amadeus-it-group/tansu';
+export type ValuesOrReadableSignals<T extends object> = {
+    [K in keyof T]?: ReadableSignal<T[K] | undefined> | T[K];
+};
+export type ValuesOrWritableSignals<T extends object> = {
+    [K in keyof T]?: WritableSignal<T[K] | undefined> | T[K];
+};
+export interface PropsConfig<U extends object> {
+    /**
+     * Object containing, for each property, either its initial value, or a store that will contain the value at any time.
+     * When the value of a property is undefined or invalid, the value from the config is used.
+     */
+    props?: ValuesOrWritableSignals<U>;
+    /**
+     * Either a store of objects containing, for each property, the default value,
+     * or an object containing, for each property, either a store containing the default value or the default value itself.
+     */
+    config?: ReadableSignal<Partial<U>> | ValuesOrReadableSignals<Partial<U>>;
+}
 export interface Widget<Props extends object = object, State extends object = object, Api extends object = object, Actions extends object = object, Directives extends object = object> {
     /**
      * the reactive state of the widget, combining all the values served by the stores
@@ -29,6 +46,7 @@ export interface Widget<Props extends object = object, State extends object = ob
      */
     api: Api;
 }
+export type ContextWidget<W extends Widget> = Pick<W, 'actions' | 'api' | 'directives' | 'state$' | 'stores'>;
 export interface WidgetSlotContext<W extends Widget> {
     /**
      * the state of the widget
@@ -37,9 +55,9 @@ export interface WidgetSlotContext<W extends Widget> {
     /**
      * the widget
      */
-    widget: Pick<W, 'actions' | 'api' | 'directives' | 'state$' | 'stores'>;
+    widget: ContextWidget<W>;
 }
-export declare const toSlotContextWidget: <W extends Widget<object, object, object, object, object>>(w: W) => Pick<W, "actions" | "api" | "directives" | "state$" | "stores">;
+export declare const toSlotContextWidget: <W extends Widget<object, object, object, object, object>>(w: W) => ContextWidget<W>;
 export type WidgetState<T extends {
     state$: SubscribableStore<any>;
 }> = T extends {
@@ -56,3 +74,18 @@ export type Directive<T = void> = (node: HTMLElement, args: T) => void | {
     destroy?: () => void;
 };
 export type SlotContent<Props extends object = object> = undefined | null | string | ((props: Props) => string);
+export declare const INVALID_VALUE: unique symbol;
+export type NormalizeValue<T> = (value: T) => T | typeof INVALID_VALUE;
+export interface WritableWithDefaultOptions<T> {
+    /**
+     * the normalize value function. should return the invalidValue symbol when the provided value is invalid
+     */
+    normalizeValue?: NormalizeValue<T>;
+    /**
+     * the equal function, allowing to compare two values. used to check if a previous and current values are equals.
+     */
+    equal?: StoreOptions<T>['equal'];
+}
+export type ConfigValidator<T extends object> = {
+    [K in keyof T]?: WritableWithDefaultOptions<T[K]>;
+};

package/types.js

@@ -5,3 +5,4 @@ export const toSlotContextWidget = (w) => ({
     state$: w.state$,
     stores: w.stores,
 });
+export const INVALID_VALUE = Symbol();

package/{services/directiveUtils.js → utils/directive.js}

@@ -1,5 +1,5 @@
 import { asReadable, batch, readable, writable } from '@amadeus-it-group/tansu';
-import { noop } from '../utils';
+import { noop } from './internal/func';
 /**
  * Binds the given directive to a store that provides its argument.
  *

package/{services → utils/internal}/checks.d.ts

@@ -35,3 +35,15 @@ export declare const isArray: (arg: any) => arg is any[];
  * @returns the clamped value
  */
 export declare function clamp(value: number, max: number, min?: number): number;
+/**
+ * an html element type guard
+ * @param value the value to check
+ * @returns true if the value is an instance of HTMLElement
+ */
+export declare const isHTMLElement: (value: any) => value is HTMLElement;
+/**
+ * Returns a new type guard that is based on the provided type guard and also returns true for null values.
+ * @param isType base type guard
+ * @returns A type guard function that returns true for null values and calls the provided type guard for other values.
+ */
+export declare const allowNull: <T>(isType: (value: any) => value is T) => (value: any) => value is T | null;

package/{services → utils/internal}/checks.js

@@ -46,3 +46,15 @@ export const isArray = Array.isArray;
 export function clamp(value, max, min = 0) {
     return Math.max(Math.min(value, max), min);
 }
+/**
+ * an html element type guard
+ * @param value the value to check
+ * @returns true if the value is an instance of HTMLElement
+ */
+export const isHTMLElement = (value) => value instanceof HTMLElement;
+/**
+ * Returns a new type guard that is based on the provided type guard and also returns true for null values.
+ * @param isType base type guard
+ * @returns A type guard function that returns true for null values and calls the provided type guard for other values.
+ */
+export const allowNull = (isType) => (value) => value === null || isType(value);

package/utils/internal/dom.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns the common ancestor of the provided DOM elements.
+ * @param elements - array of DOM elements
+ * @returns the common ancestor, or null if the array is empty or if there is no common ancestor (e.g.: if elements are detached)
+ */
+export declare const computeCommonAncestor: (elements: HTMLElement[]) => HTMLElement | null;
+/**
+ * Launch a reflow using a call to the provided html element getBoudingClientRect
+ * @param element - the html element
+ */
+export declare function reflow(element?: HTMLElement): void;
+export declare const addClasses: (element: HTMLElement, classes?: string[]) => void;
+export declare const removeClasses: (element: HTMLElement, classes?: string[]) => void;

package/utils/internal/dom.js

@@ -0,0 +1,49 @@
+/**
+ * Returns the common ancestor of the provided DOM elements.
+ * @param elements - array of DOM elements
+ * @returns the common ancestor, or null if the array is empty or if there is no common ancestor (e.g.: if elements are detached)
+ */
+export const computeCommonAncestor = (elements) => {
+    const length = elements.length;
+    if (length === 0)
+        return null;
+    let ancestor = elements[0];
+    for (let i = 1; i < length && ancestor; i++) {
+        const element = elements[i];
+        while (ancestor) {
+            if (ancestor === element) {
+                break;
+            }
+            const comparison = ancestor.compareDocumentPosition(element);
+            if (comparison & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+                break;
+            }
+            else if (comparison & Node.DOCUMENT_POSITION_CONTAINS) {
+                ancestor = element;
+                break;
+            }
+            else if (comparison & Node.DOCUMENT_POSITION_DISCONNECTED) {
+                return null;
+            }
+            ancestor = ancestor.parentElement;
+        }
+    }
+    return ancestor;
+};
+/**
+ * Launch a reflow using a call to the provided html element getBoudingClientRect
+ * @param element - the html element
+ */
+export function reflow(element = document.body) {
+    element.getBoundingClientRect();
+}
+export const addClasses = (element, classes) => {
+    if (classes && classes.length > 0) {
+        element.classList.add(...classes);
+    }
+};
+export const removeClasses = (element, classes) => {
+    if (classes && classes.length > 0) {
+        element.classList.remove(...classes);
+    }
+};

package/utils/internal/isFocusable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns true if the given HTML element is programmatically focusable.
+ * Warning: this is a best-effort approximation of whether the element is really focusable.
+ * It may not handle all use cases accurately.
+ *
+ * @param element - element to test
+ * @returns true if the element is programmatically focusable.
+ */
+export declare const isFocusable: (element: HTMLElement) => boolean;

package/utils/internal/isFocusable.js

@@ -0,0 +1,35 @@
+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),
+};
+/**
+ * Returns true if the given HTML element is programmatically focusable.
+ * Warning: this is a best-effort approximation of whether the element is really focusable.
+ * It may not handle all use cases accurately.
+ *
+ * @param element - element to test
+ * @returns true if the element is programmatically focusable.
+ */
+export const isFocusable = (element) => !isInertOrInvisible(element) && (isFocusableByTagName[element.tagName] ?? isFocusableOtherTags)(element);

package/utils/internal/math.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param number - decimal number
+ * @returns the decimal precision of the number
+ */
+export declare function getDecimalPrecision(number: number): number;

package/utils/internal/math.js

@@ -0,0 +1,13 @@
+const decimalRegExp = /(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/;
+/**
+ * @param number - decimal number
+ * @returns the decimal precision of the number
+ */
+export function getDecimalPrecision(number) {
+    const matches = ('' + number).match(decimalRegExp);
+    return Math.max(0, 
+    // Number of digits right of decimal point.
+    (matches[1]?.length ?? 0) -
+        // Adjust for exponential notation.
+        (+matches[2] || 0));
+}

package/utils/internal/promise.d.ts

@@ -0,0 +1,31 @@
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+export interface PromisePendingResult {
+    /** Pending status */
+    status: 'pending';
+}
+export declare const promisePending: PromisePendingResult;
+export type PromiseState<T> = PromiseFulfilledResult<T> | PromiseRejectedResult | PromisePendingResult;
+export declare const promiseStateStore: <T>(value: T) => ReadableSignal<Readonly<PromiseState<Awaited<T>>>>;
+export declare const promiseStoreToPromiseStateStore: <T>(promiseStore$: ReadableSignal<T>) => ReadableSignal<PromiseState<Awaited<T>>>;
+export declare const promiseStateStoreToValueStore: <T>(store$: ReadableSignal<PromiseState<T>>, initialValue: T, equal?: ((a: T, b: T) => boolean) | undefined) => ReadableSignal<T>;
+export declare const promiseStoreToValueStore: <T>(promiseStore$: ReadableSignal<T>, initialValue: Awaited<T>, equal?: ((a: Awaited<T>, b: Awaited<T>) => boolean) | undefined) => ReadableSignal<Awaited<T>>;
+export declare const promiseFromStore: <T>(store: ReadableSignal<T>, condition?: (value: T) => boolean) => {
+    promise: Promise<T>;
+    unsubscribe(): void;
+};
+export declare const promiseFromEvent: (element: EventTarget, event: string) => {
+    promise: Promise<Event>;
+    unsubscribe(): void;
+};
+export declare const promiseFromTimeout: (delay: number) => {
+    promise: Promise<void>;
+    unsubscribe(): void;
+};
+/**
+ * Utility method to create a promise with resolve
+ * @returns a promise with resolve
+ */
+export declare const promiseWithResolve: () => {
+    promise: Promise<void>;
+    resolve: (value: void | Promise<void>) => void;
+};

package/utils/internal/promise.js

@@ -0,0 +1,113 @@
+import { asReadable, computed, derived, equal, readable, writable } from '@amadeus-it-group/tansu';
+import { noop } from './func';
+export const promisePending = { status: 'pending' };
+const isThenable = (value) => {
+    // cf https://tc39.es/ecma262/#sec-promise-resolve-functions
+    const type = typeof value;
+    return (type === 'object' && value !== null) || type === 'function' ? typeof value.then === 'function' : false;
+};
+const createPromiseStateStore = (promise) => {
+    const store = writable(promisePending);
+    Promise.resolve(promise).then((value) => store.set({ status: 'fulfilled', value }), (reason) => store.set({ status: 'rejected', reason }));
+    return asReadable(store);
+};
+const promiseWeakMap = new WeakMap();
+export const promiseStateStore = (value) => {
+    if (!isThenable(value)) {
+        return readable({ status: 'fulfilled', value: value });
+    }
+    let response = promiseWeakMap.get(value);
+    if (!response) {
+        response = createPromiseStateStore(value);
+        promiseWeakMap.set(value, response);
+    }
+    return response;
+};
+const promiseStateStoreEqual = (a, b) => Object.is(a, b) ||
+    (a.status === b.status &&
+        (a.status !== 'fulfilled' || equal(a.value, b.value)) &&
+        (a.status !== 'rejected' || equal(a.reason, b.reason)));
+export const promiseStoreToPromiseStateStore = (promiseStore$) => computed(() => promiseStateStore(promiseStore$())(), { equal: promiseStateStoreEqual });
+export const promiseStateStoreToValueStore = (store$, initialValue, equal) => derived(store$, {
+    derive: (state, set) => {
+        if (state.status === 'fulfilled') {
+            set(state.value);
+        }
+    },
+    equal,
+}, initialValue);
+export const promiseStoreToValueStore = (promiseStore$, initialValue, equal) => promiseStateStoreToValueStore(promiseStoreToPromiseStateStore(promiseStore$), initialValue, equal);
+const truthyValue = (value) => !!value;
+export const promiseFromStore = (store, condition = truthyValue) => {
+    let resolve;
+    const promise = new Promise((r) => (resolve = r));
+    let unsubscribe = () => {
+        storeUnsubscribe();
+        unsubscribe = noop;
+    };
+    let storeUnsubscribe = noop;
+    storeUnsubscribe = store.subscribe((value) => {
+        if (condition(value)) {
+            resolve(value);
+            unsubscribe();
+        }
+    });
+    if (unsubscribe === noop) {
+        storeUnsubscribe();
+    }
+    return {
+        promise,
+        unsubscribe() {
+            unsubscribe();
+        },
+    };
+};
+export const promiseFromEvent = (element, event) => {
+    let resolve;
+    const promise = new Promise((r) => (resolve = r));
+    let unsubscribe = () => {
+        element.removeEventListener(event, eventListener);
+        unsubscribe = noop;
+    };
+    const eventListener = (event) => {
+        if (event.target === element) {
+            resolve(event);
+            unsubscribe();
+        }
+    };
+    element.addEventListener(event, eventListener);
+    return {
+        promise,
+        unsubscribe() {
+            unsubscribe();
+        },
+    };
+};
+export const promiseFromTimeout = (delay) => {
+    let timeout;
+    return {
+        promise: new Promise((r) => {
+            timeout = setTimeout(() => {
+                timeout = undefined;
+                r();
+            }, delay);
+        }),
+        unsubscribe() {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = undefined;
+            }
+        },
+    };
+};
+/**
+ * Utility method to create a promise with resolve
+ * @returns a promise with resolve
+ */
+export const promiseWithResolve = () => {
+    let resolve;
+    const promise = new Promise((r) => {
+        resolve = r;
+    });
+    return { promise, resolve: resolve };
+};

package/{modal → utils/internal}/scrollbars.js

@@ -1,4 +1,4 @@
-import { noop } from '../utils';
+import { noop } from './func';
 const internalRemoveScrollbars = () => {
     const scrollbarWidth = Math.abs(window.innerWidth - document.documentElement.clientWidth);
     const body = document.body;

package/utils/internal/textDirection.d.ts

@@ -0,0 +1 @@
+export declare const getTextDirection: (element: HTMLElement) => "rtl" | "ltr";

package/utils/internal/textDirection.js

@@ -0,0 +1 @@
+export const getTextDirection = (element) => getComputedStyle(element).direction;

package/utils/internal/traversal.d.ts

@@ -0,0 +1,54 @@
+interface TraversalFnOptions {
+    /**
+     * Remove symbol to return to remove the value
+     */
+    removeSymbol?: symbol;
+    /**
+     * index of the array, when looping on the elements
+     */
+    index?: number;
+}
+type TraversalFn = (key: string, value: any, options: TraversalFnOptions) => any;
+/**
+ * Creates a JSON walker function that can be used to traverse and transform
+ * the properties of a JSON object.
+ *
+ * @param fn - The callback function called for each property in the JSON object.
+ * @returns A function that takes a JSON object as input and applies the provided
+ * callback function to each property.
+ *
+ * @example
+ * ```typescript
+ * const json = {
+ *   name: 'John',
+ *   age: 30,
+ *   address: {
+ *     city: 'New York',
+ *     country: 'USA',
+ *   },
+ *   useless: '',
+ * };
+ *
+ * const transform = createTraversal((key, value, {removeSymbol}) => {
+ *   if (key === 'age') {
+ *     return value * 2; // Double the age
+ *   }
+ *   if (key === 'useless') {
+ * 	   return removeSymbol;
+ *   }
+ *   return value;
+ * });
+ *
+ * const transformedJson = transform(json);
+ * ```
+ */
+export declare function createTraversal(fn: TraversalFn): (json: any) => any;
+/**
+ * Utility method to create a promise with resolve
+ * @returns a promise with resolve
+ */
+export declare const promiseWithResolve: () => {
+    promise: Promise<void>;
+    resolve: (value: void | Promise<void>) => void;
+};
+export {};