@agnos-ui/core 0.0.1-alpha.0

package/dist/lib/services/portal.js

@@ -0,0 +1,33 @@
+export const portal = (content, newArg) => {
+    let arg;
+    let replaceComment;
+    const removeReplaceComment = () => {
+        if (replaceComment) {
+            replaceComment.parentNode?.replaceChild(content, replaceComment);
+            replaceComment = null;
+        }
+    };
+    const update = (newArg) => {
+        if (newArg !== arg) {
+            arg = newArg;
+            const container = arg?.container ?? arg?.insertBefore?.parentElement;
+            if (container) {
+                if (!replaceComment) {
+                    replaceComment = content.parentNode?.insertBefore(content.ownerDocument.createComment('portal'), content);
+                }
+                container.insertBefore(content, arg?.insertBefore ?? null);
+            }
+            else {
+                removeReplaceComment();
+            }
+        }
+    };
+    update(newArg);
+    return {
+        update,
+        destroy: () => {
+            removeReplaceComment();
+            content.parentNode?.removeChild(content);
+        },
+    };
+};

package/dist/lib/services/siblingsInert.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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>;

package/dist/lib/services/siblingsInert.js

@@ -0,0 +1,40 @@
+import { computed } from '@amadeus-it-group/tansu';
+import { noop } from '../utils';
+import { createStoreArrayDirective, directiveSubscribe, mergeDirectives } from './directiveUtils';
+const internalSetSiblingsInert = (element) => {
+    const inertValues = new Map();
+    const recursiveHelper = (element) => {
+        const parent = element.parentElement;
+        if (parent && element !== document.body) {
+            Array.from(parent.children).forEach((sibling) => {
+                if (sibling !== element && sibling.nodeName !== 'SCRIPT') {
+                    inertValues.set(sibling, sibling.hasAttribute('inert'));
+                    sibling.toggleAttribute('inert', true);
+                }
+            });
+            recursiveHelper(parent);
+        }
+    };
+    recursiveHelper(element);
+    return () => inertValues.forEach((value, element) => {
+        element.toggleAttribute('inert', value);
+    });
+};
+let internalRevert = noop;
+const setSiblingsInert = (element) => {
+    internalRevert();
+    internalRevert = element ? internalSetSiblingsInert(element) : noop;
+};
+const { directive: storeArrayDirective, elements$ } = createStoreArrayDirective();
+const lastElement$ = computed(() => {
+    const elements = elements$();
+    return elements[elements.length - 1];
+}, { equal: Object.is });
+const inertAction$ = computed(() => setSiblingsInert(lastElement$()));
+/**
+ * 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 const sliblingsInert = mergeDirectives(storeArrayDirective, directiveSubscribe(inertAction$));

package/dist/lib/services/stores.d.ts

@@ -0,0 +1,140 @@
+import type { ReadableSignal, WritableSignal, StoreOptions, StoreInput, StoresInputValues } from '@amadeus-it-group/tansu';
+export type ToWritableSignal<P, V = P> = {
+    [K in keyof P & keyof V as `${K & string}$`]-?: WritableSignal<P[K], V[K] | undefined>;
+};
+export type ValuesOrStores<T extends object> = {
+    [K in keyof T]?: ReadableSignal<T[K]> | T[K];
+};
+export type WithoutDollar<S extends `${string}$`> = S extends `${infer U}$` ? U : never;
+export type ValueOfStore<S extends ReadableSignal<any>> = S extends ReadableSignal<infer U> ? U : never;
+export type ToState<S extends {
+    [K in keyof S & `${string}$`]: ReadableSignal<any>;
+}> = {
+    [K in keyof S & `${string}$` as WithoutDollar<K>]: ValueOfStore<S[K]>;
+};
+/**
+ *
+ * Utility function designed to create a `patch` function related to the provided stores.
+ * Any key given to the patch function which is not in the original object will be ignored.
+ *
+ * @example
+ *
+ * ```typescript
+ * const storeA$ = writable(1);
+ * const storeB$ = writable(1);
+ * const patch = createPatch({a: storeA$, b: storeB$});
+ *
+ * patch({a: 2}) // will perform storeA$.set(2)
+ * patch({a: 2, b: 2}) // will perform storeA$.set(2) and storeB$.set(2) in the same batch.
+ * patch({a: 2, c: 2}) // will perform storeA$.set(2), c is ignored.
+ *
+ * ```
+ * @param stores - object of stores
+ * @returns the patch function
+ */
+export declare function createPatch<T extends object, V extends object = T>(stores: ToWritableSignal<T, V>): <U extends Partial<T>>(storesValues?: void | U | undefined) => void;
+/**
+ * This utility function is designed to compare the first level of two objects.
+ *
+ * It returns a new object which has all the keys for which the values in `obj1`
+ * and `obj2` are different, with the values from `obj2`, or null if objects
+ * are identical.
+ *
+ * @param obj1 - First object
+ * @param obj2 - Second object
+ * @returns the object with changed properties
+ */
+export declare function findChangedProperties<T extends Record<string, any>>(obj1: Partial<T>, obj2: Partial<T>): Partial<T> | null;
+export declare const INVALID_VALUE: unique symbol;
+export type NormalizeValue<T, U = T> = (value: U) => T | typeof INVALID_VALUE;
+export interface WritableWithDefaultOptions<T, U = T> {
+    /**
+     * the normalize value function. should return the invalidValue symbol when the provided value is invalid
+     */
+    normalizeValue?: NormalizeValue<T, U>;
+    /**
+     * the equal function, allowing to compare two values. used to check if a previous and current values are equals.
+     */
+    equal?: StoreOptions<T>['equal'];
+}
+/**
+ * Returns a writable store whose value is either its own value (when it is not undefined) or a default value
+ * that comes either from the `config$` store (when it is not undefined) or from `defValue`.
+ * If a normalizeValue function is passed in the options, it is called to normalize non-undefined values coming
+ * either from the `config$` store or from the `set` or `update` functions. If a value is invalid (i.e. normalizeValue
+ * returns the `invalidValue` symbol), an error is logged on the console and it is either not set (if it comes from the
+ * `set` or `update` functions), or the `defValue` is used instead (if the invalid value comes from the `config$` store).
+ *
+ * @param defValue - Default value used when both the own value and the config$ value are undefined.
+ * @param config$ - Default value used when the own value is undefined
+ * @param options - Object which can contain the following optional functions: normalizeValue and equal
+ * @returns a writable store with the extra default value and normalization logic described above
+ */
+export declare function writableWithDefault<T, U = T>(defValue: T, config$?: ReadableSignal<U | undefined>, { normalizeValue, equal }?: WritableWithDefaultOptions<T, U>): WritableSignal<T, U | undefined>;
+export type ConfigValidator<T extends object, U extends object = T> = {
+    [K in keyof T & keyof U]?: WritableWithDefaultOptions<T[K], U[K]>;
+};
+/**
+ * Returns an object containing, for each property of `defConfig`, a corresponding writable with the normalization and default value logic
+ * described in {@link writableWithDefault}. Keys in the returned object are the same as the ones present in `defConfig`,
+ * with the exta `$` suffix (showing that they are stores).
+ *
+ * @param defConfig - object containing, for each property, a default value to use in case `config$` does not provide the suitable default
+ * value for that property
+ * @param config - either a store of objects containing, for each property of `defConfig`, the default value or an object containing
+ * for each property of `defConfig` either a store containing the default value or the default value itself
+ * @param options - object containing, for each property of `defConfig`, an optional object with the following optional functions: normalizeValue and equal
+ * @returns an object containing writables
+ *
+ * @example With a store
+ * ```ts
+ * const defConfig = {propA: 1};
+ * const validation = {propA: {normalizeValue: value => +value}};
+ * const config$ = writable({propA: 5});
+ * const {propA$} = writablesWithDefault(defConfig, config$, validation);
+ * ```
+ *
+ * @example With an object containing a value and a store
+ * ```ts
+ * const defConfig = {propA: 1, propB: 2};
+ * const validation = {propA: {normalizeValue: value => +value}};
+ * const config = {propA: 5, propB: writable(3)};
+ * const {propA$, propB$} = writablesWithDefault(defConfig, config, validation);
+ * ```
+ */
+export declare const writablesWithDefault: <T extends object, U extends object = T>(defConfig: T, config?: PropsConfig<U> | undefined, options?: ConfigValidator<T, U> | undefined) => ToWritableSignal<T, U>;
+/**
+ * Shortcut for calling both {@link writablesWithDefault} and {@link createPatch} in one call.
+ * @param defConfig - object containing, for each property, a default value to use in case `config` does not provide the suitable default
+ * value for that property
+ * @param config - either a store of objects containing, for each property of `defConfig`, the default value or an object containing
+ * for each property of `defConfig` either a store containing the default value or the default value itself
+ * @param options - object containing, for each property of `defConfig`, an optional object with the following optional functions: normalizeValue and equal
+ * @returns an array with two items: the first one containing the writables (returned by {@link writablesWithDefault}),
+ * and the second one containing the patch function (returned by {@link createPatch})
+ *
+ * @example With a store
+ * ```ts
+ * const defConfig = {propA: 1};
+ * const validation = {propA: {normalizeValue: value => +value}};
+ * const config$ = writable({propA: 5});
+ * const [{propA$}, patch] = writablesForProps(defConfig, config$, validation);
+ * ```
+ *
+ * @example With an object containing a value and a store
+ * ```ts
+ * const defConfig = {propA: 1, propB: 2};
+ * const validation = {propA: {normalizeValue: value => +value}};
+ * const config = {propA: 5, propB: writable(3)};
+ * const [{propA$, propB$}, patch] = writablesForProps(defConfig, config, validation);
+ * ```
+ */
+export declare const writablesForProps: <T extends object, U extends object = T>(defConfig: T, config?: PropsConfig<U> | undefined, options?: { [K in keyof T & keyof U]?: WritableWithDefaultOptions<T[K], U[K]> | undefined; } | undefined) => [ToWritableSignal<T, U>, <U_1 extends Partial<T>>(storesValues?: void | U_1 | undefined) => void];
+export type PropsConfig<T extends object> = ReadableSignal<Partial<T>> | ValuesOrStores<T>;
+export declare const stateStores: <A extends {
+    [x: `${string}$`]: ReadableSignal<any>;
+}>(inputStores: A) => {
+    state$: ReadableSignal<ToState<A>>;
+    stores: { [key in `${string}$` & keyof A]: ReadableSignal<ValueOfStore<A[key]>>; };
+};
+export declare const bindableDerived: <T, U extends [WritableSignal<T, T>, ...StoreInput<any>[]]>(onChange$: ReadableSignal<(value: T) => void>, stores: U, adjustValue: (arg: StoresInputValues<U>) => T) => ReadableSignal<T>;

package/dist/lib/services/stores.js

@@ -0,0 +1,219 @@
+import { batch, computed, derived, get, readable, writable, asReadable } from '@amadeus-it-group/tansu';
+import { identity } from '../utils';
+/**
+ *
+ * Utility function designed to create a `patch` function related to the provided stores.
+ * Any key given to the patch function which is not in the original object will be ignored.
+ *
+ * @example
+ *
+ * ```typescript
+ * const storeA$ = writable(1);
+ * const storeB$ = writable(1);
+ * const patch = createPatch({a: storeA$, b: storeB$});
+ *
+ * patch({a: 2}) // will perform storeA$.set(2)
+ * patch({a: 2, b: 2}) // will perform storeA$.set(2) and storeB$.set(2) in the same batch.
+ * patch({a: 2, c: 2}) // will perform storeA$.set(2), c is ignored.
+ *
+ * ```
+ * @param stores - object of stores
+ * @returns the patch function
+ */
+export function createPatch(stores) {
+    return function (storesValues) {
+        batch(() => {
+            for (const [name, value] of Object.entries(storesValues ?? {})) {
+                stores[`${name}$`]?.set(value);
+            }
+        });
+    };
+}
+/**
+ * This utility function is designed to compare the first level of two objects.
+ *
+ * It returns a new object which has all the keys for which the values in `obj1`
+ * and `obj2` are different, with the values from `obj2`, or null if objects
+ * are identical.
+ *
+ * @param obj1 - First object
+ * @param obj2 - Second object
+ * @returns the object with changed properties
+ */
+export function findChangedProperties(obj1, obj2) {
+    if (obj1 === obj2) {
+        return null;
+    }
+    let hasUpdate = false;
+    const changedValues = {};
+    const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);
+    for (const key of keys) {
+        const value = obj2[key];
+        if (obj1[key] !== value) {
+            changedValues[key] = value;
+            hasUpdate = true;
+        }
+    }
+    return hasUpdate ? changedValues : null;
+}
+const update = function (updater) {
+    this.set(updater(this()));
+};
+export const INVALID_VALUE = Symbol();
+/* eslint-disable jsdoc/check-param-names, jsdoc/require-param */
+/**
+ * Returns a writable store whose value is either its own value (when it is not undefined) or a default value
+ * that comes either from the `config$` store (when it is not undefined) or from `defValue`.
+ * If a normalizeValue function is passed in the options, it is called to normalize non-undefined values coming
+ * either from the `config$` store or from the `set` or `update` functions. If a value is invalid (i.e. normalizeValue
+ * returns the `invalidValue` symbol), an error is logged on the console and it is either not set (if it comes from the
+ * `set` or `update` functions), or the `defValue` is used instead (if the invalid value comes from the `config$` store).
+ *
+ * @param defValue - Default value used when both the own value and the config$ value are undefined.
+ * @param config$ - Default value used when the own value is undefined
+ * @param options - Object which can contain the following optional functions: normalizeValue and equal
+ * @returns a writable store with the extra default value and normalization logic described above
+ */
+export function writableWithDefault(defValue, config$ = readable(undefined), { normalizeValue = identity, equal = Object.is } = {}) {
+    const own$ = writable(undefined);
+    const validatedDefConfig$ = computed(() => {
+        const value = config$();
+        const normalizedValue = value === undefined ? undefined : normalizeValue(value);
+        if (normalizedValue === INVALID_VALUE) {
+            console.error('Not using invalid value from default config', value);
+            return defValue;
+        }
+        if (normalizedValue === undefined) {
+            return defValue;
+        }
+        return normalizedValue;
+    }, { equal });
+    return asReadable(computed(() => {
+        const ownValue = own$();
+        return ownValue !== undefined ? ownValue : validatedDefConfig$();
+    }, { equal }), {
+        set(value) {
+            const normalizedValue = value === undefined ? undefined : normalizeValue(value);
+            if (normalizedValue === INVALID_VALUE) {
+                console.error('Not setting invalid value', value);
+            }
+            else {
+                own$.set(normalizedValue);
+            }
+        },
+        update,
+    });
+}
+const isStore = (x) => !!(x && typeof x === 'function' && 'subscribe' in x);
+/**
+ * Returns an object containing, for each property of `defConfig`, a corresponding writable with the normalization and default value logic
+ * described in {@link writableWithDefault}. Keys in the returned object are the same as the ones present in `defConfig`,
+ * with the exta `$` suffix (showing that they are stores).
+ *
+ * @param defConfig - object containing, for each property, a default value to use in case `config$` does not provide the suitable default
+ * value for that property
+ * @param config - either a store of objects containing, for each property of `defConfig`, the default value or an object containing
+ * for each property of `defConfig` either a store containing the default value or the default value itself
+ * @param options - object containing, for each property of `defConfig`, an optional object with the following optional functions: normalizeValue and equal
+ * @returns an object containing writables
+ *
+ * @example With a store
+ * ```ts
+ * const defConfig = {propA: 1};
+ * const validation = {propA: {normalizeValue: value => +value}};
+ * const config$ = writable({propA: 5});
+ * const {propA$} = writablesWithDefault(defConfig, config$, validation);
+ * ```
+ *
+ * @example With an object containing a value and a store
+ * ```ts
+ * const defConfig = {propA: 1, propB: 2};
+ * const validation = {propA: {normalizeValue: value => +value}};
+ * const config = {propA: 5, propB: writable(3)};
+ * const {propA$, propB$} = writablesWithDefault(defConfig, config, validation);
+ * ```
+ */
+export const writablesWithDefault = (defConfig, config, options) => {
+    const res = {};
+    const configIsStore = isStore(config);
+    for (const key of Object.keys(defConfig)) {
+        let store = configIsStore ? computed(() => config()[key]) : undefined;
+        if (!configIsStore && config) {
+            const value = config[key];
+            store = isStore(value) ? value : readable(value);
+        }
+        res[`${key}$`] = writableWithDefault(defConfig[key], store, options?.[key]);
+    }
+    return res;
+};
+/**
+ * Shortcut for calling both {@link writablesWithDefault} and {@link createPatch} in one call.
+ * @param defConfig - object containing, for each property, a default value to use in case `config` does not provide the suitable default
+ * value for that property
+ * @param config - either a store of objects containing, for each property of `defConfig`, the default value or an object containing
+ * for each property of `defConfig` either a store containing the default value or the default value itself
+ * @param options - object containing, for each property of `defConfig`, an optional object with the following optional functions: normalizeValue and equal
+ * @returns an array with two items: the first one containing the writables (returned by {@link writablesWithDefault}),
+ * and the second one containing the patch function (returned by {@link createPatch})
+ *
+ * @example With a store
+ * ```ts
+ * const defConfig = {propA: 1};
+ * const validation = {propA: {normalizeValue: value => +value}};
+ * const config$ = writable({propA: 5});
+ * const [{propA$}, patch] = writablesForProps(defConfig, config$, validation);
+ * ```
+ *
+ * @example With an object containing a value and a store
+ * ```ts
+ * const defConfig = {propA: 1, propB: 2};
+ * const validation = {propA: {normalizeValue: value => +value}};
+ * const config = {propA: 5, propB: writable(3)};
+ * const [{propA$, propB$}, patch] = writablesForProps(defConfig, config, validation);
+ * ```
+ */
+export const writablesForProps = (defConfig, config, options) => {
+    const stores = writablesWithDefault(defConfig, config, options);
+    return [stores, createPatch(stores)];
+};
+export const stateStores = (inputStores) => {
+    const storesNames = [];
+    const storesArray = [];
+    const stores = {};
+    for (const key of Object.keys(inputStores)) {
+        if (key.endsWith('$')) {
+            const store = inputStores[key];
+            storesNames.push(key.substring(0, key.length - 1));
+            storesArray.push(store);
+            stores[key] = asReadable(store);
+        }
+    }
+    return {
+        stores,
+        state$: computed(() => {
+            const values = storesArray.map(get);
+            const res = {};
+            storesNames.forEach((name, index) => {
+                res[name] = values[index];
+            });
+            return res;
+        }),
+    };
+};
+export const bindableDerived = (onChange$, stores, adjustValue) => {
+    let currentValue = stores[0]();
+    return derived(stores, (values) => {
+        const newValue = adjustValue(values);
+        const rectifiedValue = newValue !== values[0];
+        if (rectifiedValue) {
+            stores[0].set(newValue);
+        }
+        if (rectifiedValue || newValue !== currentValue) {
+            currentValue = newValue;
+            // TODO check if we should do this async to avoid issue
+            // with angular and react only when rectifiedValue is true?
+            onChange$()(newValue);
+        }
+        return newValue;
+    });
+};

package/dist/lib/services/writables.d.ts

@@ -0,0 +1,7 @@
+import type { WritableWithDefaultOptions } from './stores';
+import { INVALID_VALUE } from './stores';
+export declare const testToNormalizeValue: <T>(filter: (value: T) => boolean) => (value: T) => typeof INVALID_VALUE | T;
+export declare const typeNumber: WritableWithDefaultOptions<number>;
+export declare const typeBoolean: WritableWithDefaultOptions<boolean>;
+export declare const typeString: WritableWithDefaultOptions<string, any>;
+export declare const typeFunction: WritableWithDefaultOptions<(...args: any[]) => any>;

package/dist/lib/services/writables.js

@@ -0,0 +1,16 @@
+import { isBoolean, isFunction, isNumber, isString } from './checks';
+import { INVALID_VALUE } from './stores';
+export const testToNormalizeValue = (filter) => (value) => filter(value) ? value : INVALID_VALUE;
+export const typeNumber = {
+    normalizeValue: testToNormalizeValue(isNumber),
+};
+export const typeBoolean = {
+    normalizeValue: testToNormalizeValue(isBoolean),
+};
+export const typeString = {
+    normalizeValue: testToNormalizeValue(isString),
+};
+export const typeFunction = {
+    normalizeValue: testToNormalizeValue(isFunction),
+    equal: Object.is,
+};

package/dist/lib/transitions/baseTransitions.d.ts

@@ -0,0 +1,136 @@
+import type { PropsConfig } from '../services';
+import type { Directive, Widget } from '../types';
+/**
+ * Function that implements a transition.
+ */
+export type TransitionFn = (
+/**
+ * Element on which the transition should be applied.
+ */
+element: HTMLElement, 
+/**
+ * Whether the element should be shown or hidden.
+ */
+direction: 'show' | 'hide', 
+/**
+ * Whether the transition should be animated.
+ */
+animation: boolean, 
+/**
+ * Signal allowing to stop the transition while running.
+ */
+signal: AbortSignal, 
+/**
+ * Context of the current transition. It is reused between calls if the previous transition was stopped while running on the same element.
+ */
+context: object) => Promise<void>;
+export interface TransitionProps {
+    /**
+     * Transition to be called.
+     */
+    transition: TransitionFn;
+    /**
+     * Whether the element should be visible when the transition is completed.
+     */
+    visible: boolean;
+    /**
+     * Whether the transition should be animated.
+     */
+    animation: boolean;
+    /**
+     * If the element is initially visible, whether the element should be animated when first displayed.
+     */
+    animationOnInit: boolean;
+    /**
+     * Whether initialization is finished. It determines which setting between {@link TransitionProps.animation}
+     * and {@link TransitionProps.animationOnInit} is used to enable or disable animations.
+     * @remarks
+     * If it is `true`, initialization is considered finished, and {@link TransitionProps.animationOnInit} is no longer used.
+     * Otherwise, initialization is considered unfinished and {@link TransitionProps.animationOnInit} is used instead of {@link TransitionProps.animation}.
+     * If it is `null`, it will be set to `true` automatically when the directive is called with a DOM element.
+     * If it is `false`, it will not be updated automatically.
+     */
+    initDone: boolean | null;
+    /**
+     * Function to be called when the transition is completed and the element is visible.
+     */
+    onShown: () => void;
+    /**
+     * Function to be called when the transition is completed and the element is not visible.
+     */
+    onHidden: () => void;
+    /**
+     * Function to be called when the visible property changes.
+     *
+     * @param visible - new value of the visible propery
+     */
+    onVisibleChange: (visible: boolean) => void;
+}
+/**
+ * Transition state.
+ */
+export interface TransitionState {
+    /**
+     * Whether the element is visible or will be visible when the transition is completed.
+     */
+    visible: boolean;
+    /**
+     * Whether the element to be animated is present in the DOM.
+     */
+    elementPresent: boolean;
+    /**
+     * Reference to the DOM element.
+     */
+    element: HTMLElement | null;
+    /**
+     * Whether a transition is currently running.
+     */
+    transitioning: boolean;
+    /**
+     * Equals: {@link TransitionState.visible | visible} && ! {@link TransitionState.transitioning | transitioning}
+     */
+    shown: boolean;
+    /**
+     * Equals: ! {@link TransitionState.visible | visible} && ! {@link TransitionState.transitioning | transitioning}
+     */
+    hidden: boolean;
+}
+export interface TransitionApi {
+    /**
+     * Runs the transition to show the element. It is equivalent to {@link TransitionApi.toggle | toggle} with true as the first parameter.
+     *
+     * @param animation - whether the transition should be animated. If the parameter is not defined, the {@link TransitionProps.animation | animation } property is used.
+     *
+     * @returns A promise that is fulfilled when the transition is completed. If the transition is canceled, or if the same transition was
+     * already running, the promise never completes.
+     */
+    show: (animation?: boolean) => Promise<void>;
+    /**
+     * Runs the transition to hide the element. It is equivalent to {@link TransitionApi.toggle | toggle} with false as the first parameter.
+     *
+     * @param animation - whether the transition should be animated. If the parameter is not defined, the {@link TransitionProps.animation | animation } property is used.
+     *
+     * @returns A promise that is fulfilled when the transition is completed. If the transition is canceled, or if the same transition was
+     * already running, the promise never completes.
+     */
+    hide: (animation?: boolean) => Promise<void>;
+    /**
+     * Runs the transition to show or hide the element depending on the first parameter.
+     *
+     * @param visible - whether the element should be made visible or not. If the parameter is not defined, the opposite of the current {@link TransitionProps.visible | visible } property is used.
+     * @param animation - whether the transition should be animated. If the parameter is not defined, the {@link TransitionProps.animation | animation } property is used.
+     *
+     * @returns A promise that is fulfilled when the transition is completed. If the transition is canceled, or if the same transition was
+     * already running, the promise never completes.
+     */
+    toggle: (visible?: boolean, animation?: boolean) => Promise<void>;
+}
+export interface TransitionDirectives {
+    /**
+     * the transition directive
+     */
+    directive: Directive<void | Partial<TransitionProps>>;
+}
+export type TransitionWidget = Widget<TransitionProps, TransitionState, TransitionApi, object, TransitionDirectives>;
+export declare const noAnimation: TransitionFn;
+export declare const createTransition: (config?: PropsConfig<TransitionProps>) => TransitionWidget;