@agnos-ui/core 0.0.1-alpha.0 → 0.0.1-alpha.10

package/{dist/lib/config.js → config.js}

@@ -1,5 +1,5 @@
-import { asReadable, computed, writable } from '@amadeus-it-group/tansu';
-import { identity } from './utils';
+import { asWritable, computed, writable } from '@amadeus-it-group/tansu';
+import { identity } from './utils/internal/func';
 /**
  * Merges source object into destination object, up to the provided number of levels.
  * @param destination - destination object
@@ -44,7 +44,7 @@ export const mergeInto = (destination, source, levels = Infinity) => {
 export const createWidgetsConfig = (parent$, adaptParentConfig = identity) => {
     const own$ = writable({});
     const adaptedParent$ = adaptParentConfig === identity ? parent$ : computed(() => adaptParentConfig(mergeInto({}, parent$?.(), 2)));
-    return asReadable(computed(() => mergeInto(mergeInto({}, adaptedParent$?.(), 2), own$(), 2)), {
+    return asWritable(computed(() => mergeInto(mergeInto({}, adaptedParent$?.(), 2), own$(), 2)), {
         ...own$,
         own$,
         adaptedParent$,

package/index.d.ts

@@ -0,0 +1,25 @@
+export * from './components/commonProps';
+export * from './types';
+export * from './components/accordion';
+export * from './components/alert';
+export * from './components/modal';
+export * from './components/pagination';
+export * from './components/progressbar';
+export * from './components/rating';
+export * from './components/select';
+export * from './components/slider';
+export * from './config';
+export * from './services/extendWidget';
+export * from './services/floatingUI';
+export * from './services/focustrack';
+export * from './services/intersection';
+export * from './services/navManager';
+export * from './services/portal';
+export * from './services/siblingsInert';
+export * from './services/transitions/baseTransitions';
+export * from './services/transitions/cssTransitions';
+export * from './services/transitions/simpleClassTransition';
+export * from './services/transitions/bootstrap';
+export * from './utils/directive';
+export * from './utils/stores';
+export * from './utils/writables';

package/index.js

@@ -0,0 +1,31 @@
+// types
+export * from './components/commonProps';
+export * from './types';
+// components
+export * from './components/accordion';
+export * from './components/alert';
+export * from './components/modal';
+export * from './components/pagination';
+export * from './components/progressbar';
+export * from './components/rating';
+export * from './components/select';
+export * from './components/slider';
+// config
+export * from './config';
+// services
+export * from './services/extendWidget';
+export * from './services/floatingUI';
+export * from './services/focustrack';
+export * from './services/intersection';
+export * from './services/navManager';
+export * from './services/portal';
+export * from './services/siblingsInert';
+// services transitions
+export * from './services/transitions/baseTransitions';
+export * from './services/transitions/cssTransitions';
+export * from './services/transitions/simpleClassTransition';
+export * from './services/transitions/bootstrap';
+// public utils
+export * from './utils/directive';
+export * from './utils/stores';
+export * from './utils/writables';

package/package.json

@@ -1,52 +1,66 @@
 {
 	"name": "@agnos-ui/core",
 	"description": "Framework-agnostic headless widget library.",
-	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
 	"keywords": [
 		"headless",
 		"agnostic",
 		"components",
 		"widgets",
+		"accordion",
 		"alert",
 		"modal",
 		"pagination",
-		"rating"
+		"rating",
+		"slider"
 	],
 	"type": "module",
-	"main": "./dist/lib/index.js",
-	"module": "./dist/lib/index.js",
-	"types": "./dist/lib/index.d.ts",
+	"main": "./index.js",
+	"module": "./index.js",
+	"types": "./index.d.ts",
 	"exports": {
 		".": {
-			"types": "./dist/lib/index.d.ts",
-			"default": "./dist/lib/index.js"
+			"types": "./index.d.ts",
+			"default": "./index.js"
+		},
+		"./components/*": {
+			"types": "./components/*/*.d.ts",
+			"default": "./components/*/*.js"
+		},
+		"./config": {
+			"types": "./config.d.ts",
+			"default": "./config.js"
+		},
+		"./types": {
+			"types": "./types.d.ts",
+			"default": "./types.js"
+		},
+		"./services/*": {
+			"types": "./services/*.d.ts",
+			"default": "./services/*.js"
+		},
+		"./services/transitions/*": {
+			"types": "./services/transitions/*.d.ts",
+			"default": "./services/transitions/*.js"
+		},
+		"./utils/*": {
+			"types": "./utils/*.d.ts",
+			"default": "./utils/*.js"
 		}
 	},
-	"scripts": {
-		"build": "npm run build:lib && npm run build:tsc && npm run build:api-extractor",
-		"build:lib": "node ../scripts/rm.js dist/lib && tsc -p tsconfig.lib.json",
-		"build:tsc": "tsc",
-		"build:api-extractor": "api-extractor run",
-		"test": "vitest run",
-		"tdd": "vitest",
-		"tdd:ui": "vitest --ui",
-		"test:coverage": "vitest run --coverage"
-	},
 	"dependencies": {
-		"@amadeus-it-group/tansu": "0.0.22"
+		"@amadeus-it-group/tansu": "1.0.0"
 	},
-	"files": [
-		"dist/lib"
-	],
-	"license": "MIT",
+	"peerDependencies": {
+		"@floating-ui/dom": "*"
+	},
+	"sideEffects": false,
+	"version": "0.0.1-alpha.10",
+	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
 	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
+	"license": "MIT",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/AmadeusITGroup/AgnosUI.git",
 		"directory": "core"
-	},
-	"devDependencies": {
-		"eslint-plugin-jsdoc": "^46.4.6"
-	},
-	"version": "0.0.1-alpha.0"
-}
+	}
+}

package/services/extendWidget.d.ts

@@ -0,0 +1,23 @@
+import type { ConfigValidator, SlotContent, Widget, WidgetFactory, WidgetProps, WidgetSlotContext, WidgetState } from '../types';
+/**
+ * Type extending the original Widget props and state with ExtraProps
+ */
+export type ExtendWidgetProps<W extends Widget, ExtraProps extends object> = Widget<ExtendWidgetAdaptSlotWidgetProps<WidgetProps<W>, ExtraProps>, ExtendWidgetAdaptSlotWidgetProps<WidgetState<W>, ExtraProps>, W['api'], W['actions'], W['directives']>;
+/**
+ * Type replacing the original Props with WidgetSlotContext contaning ExtraProps
+ */
+export type ExtendWidgetAdaptSlotContentProps<Props extends Record<string, any>, ExtraProps extends object> = Props extends WidgetSlotContext<infer U> ? WidgetSlotContext<ExtendWidgetProps<U, ExtraProps>> & Omit<Props, keyof WidgetSlotContext<any>> : Props;
+/**
+ * Type enriching the original widget slot Props with ExtraProps slots
+ */
+export type ExtendWidgetAdaptSlotWidgetProps<Props, ExtraProps extends object> = Omit<Props, `slot${string}`> & ExtraProps & {
+    [K in keyof Props & `slot${string}`]: Props[K] extends SlotContent<infer U> ? SlotContent<ExtendWidgetAdaptSlotContentProps<U, ExtraProps>> : Props[K];
+};
+/**
+ * Method to extend the original widget with extra props with validator
+ * @param factory - original widget factory
+ * @param extraPropsDefaults - object containing default value for each extra prop
+ * @param extraPropsConfig - object verifying the type of each extra prop
+ * @returns widget factory with the extra props
+ */
+export declare const extendWidgetProps: <W extends Widget<object, object, object, object, object>, ExtraProps extends object>(factory: WidgetFactory<W>, extraPropsDefaults: ExtraProps, extraPropsConfig?: ConfigValidator<ExtraProps> | undefined) => WidgetFactory<ExtendWidgetProps<W, ExtraProps>>;

package/services/extendWidget.js

@@ -0,0 +1,35 @@
+import { batch } from '@amadeus-it-group/tansu';
+import { stateStores, writablesWithDefault } from '../utils/stores';
+/**
+ * Method to extend the original widget with extra props with validator
+ * @param factory - original widget factory
+ * @param extraPropsDefaults - object containing default value for each extra prop
+ * @param extraPropsConfig - object verifying the type of each extra prop
+ * @returns widget factory with the extra props
+ */
+export const extendWidgetProps = (factory, extraPropsDefaults, extraPropsConfig) => (propsConfig) => {
+    const extraPropsWritables = writablesWithDefault(extraPropsDefaults, propsConfig, extraPropsConfig);
+    const widget = factory(propsConfig);
+    return {
+        ...widget,
+        ...stateStores({ ...widget.stores, ...extraPropsWritables }),
+        patch: (storesValues) => batch(() => {
+            let widgetProps;
+            for (const [name, value] of Object.entries(storesValues ?? {})) {
+                const extraPropsStore = extraPropsWritables[`${name}$`];
+                if (extraPropsStore) {
+                    extraPropsStore.set(value);
+                }
+                else {
+                    if (!widgetProps) {
+                        widgetProps = {};
+                    }
+                    widgetProps[name] = value;
+                }
+            }
+            if (widgetProps) {
+                widget.patch(widgetProps);
+            }
+        }),
+    };
+};

package/services/floatingUI.d.ts

@@ -0,0 +1,56 @@
+import type { ArrowOptions, AutoUpdateOptions, ComputePositionConfig, Derivable } from '@floating-ui/dom';
+import type { PropsConfig } from '../types';
+export interface FloatingUIProps {
+    /**
+     * Options to use when calling computePosition from Floating UI
+     */
+    computePositionOptions: ComputePositionConfig;
+    /**
+     * Options to use when calling autoUpdate from Floating UI
+     */
+    autoUpdateOptions: AutoUpdateOptions;
+    /**
+     * Options to use when calling the arrow middleware from Floating UI
+     */
+    arrowOptions: Omit<ArrowOptions, 'element'> | Derivable<Omit<ArrowOptions, 'element'>>;
+}
+export type FloatingUI = ReturnType<typeof createFloatingUI>;
+/**
+ * Create a floating UI service.
+ *
+ * The returned service includes the patch method to patch the states, the stores to track the states and directives to apply.
+ *
+ * @param propsConfig - the props config for the floating UI service
+ * @returns the floating UI service
+ */
+export declare const createFloatingUI: (propsConfig?: PropsConfig<FloatingUIProps>) => {
+    directives: {
+        /**
+         * Directive to be used on the reference element from where the floating element will be positioned
+         */
+        referenceDirective: import("../types").Directive;
+        /**
+         * Directive to be used on the floating element
+         */
+        floatingDirective: import("../types").Directive<void>;
+        /**
+         * Directive to be used on the arrow element, if any
+         */
+        arrowDirective: import("../types").Directive<void>;
+    };
+    state$: import("@amadeus-it-group/tansu").ReadableSignal<import("../utils/stores").ToState<{
+        x$: import("@amadeus-it-group/tansu").ReadableSignal<number | undefined>;
+        y$: import("@amadeus-it-group/tansu").ReadableSignal<number | undefined>;
+        strategy$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/utils").Strategy | undefined>;
+        placement$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/utils").Placement | undefined>;
+        middlewareData$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/core").MiddlewareData | undefined>;
+    }>>;
+    stores: {
+        x$: import("@amadeus-it-group/tansu").ReadableSignal<number | undefined>;
+        y$: import("@amadeus-it-group/tansu").ReadableSignal<number | undefined>;
+        strategy$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/utils").Strategy | undefined>;
+        placement$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/utils").Placement | undefined>;
+        middlewareData$: import("@amadeus-it-group/tansu").ReadableSignal<import("@floating-ui/core").MiddlewareData | undefined>;
+    };
+    patch: <U extends Partial<FloatingUIProps>>(storesValues?: void | U | undefined) => void;
+};

package/services/floatingUI.js

@@ -0,0 +1,105 @@
+import { computed, derived } from '@amadeus-it-group/tansu';
+import { arrow, autoUpdate, computePosition } from '@floating-ui/dom';
+import { createStoreDirective, directiveSubscribe, mergeDirectives } from '../utils/directive';
+import { promiseStoreToValueStore } from '../utils/internal/promise';
+import { stateStores, writablesForProps } from '../utils/stores';
+const defaultConfig = {
+    computePositionOptions: {},
+    autoUpdateOptions: {},
+    arrowOptions: {},
+};
+/**
+ * Create a floating UI service.
+ *
+ * The returned service includes the patch method to patch the states, the stores to track the states and directives to apply.
+ *
+ * @param propsConfig - the props config for the floating UI service
+ * @returns the floating UI service
+ */
+export const createFloatingUI = (propsConfig) => {
+    const [{ autoUpdateOptions$, computePositionOptions$: computePositionInputOptions$, arrowOptions$: arrowInputOptions$ }, patch] = writablesForProps(defaultConfig, propsConfig);
+    const { directive: floatingDirective, element$: floatingElement$ } = createStoreDirective();
+    const { directive: referenceDirective, element$: referenceElement$ } = createStoreDirective();
+    const { directive: arrowDirective, element$: arrowElement$ } = createStoreDirective();
+    const arrowOptions$ = computed(() => {
+        const arrowElement = arrowElement$();
+        if (!arrowElement) {
+            return null;
+        }
+        const arrowInputOptions = arrowInputOptions$();
+        return typeof arrowInputOptions === 'function'
+            ? (state) => ({ ...arrowInputOptions(state), element: arrowElement })
+            : { ...arrowInputOptions, element: arrowElement };
+    });
+    const computePositionOptions$ = computed(() => {
+        let options = computePositionInputOptions$();
+        const arrowOptions = arrowOptions$();
+        if (arrowOptions) {
+            options = {
+                ...options,
+                middleware: [...(options.middleware ?? []), arrow(arrowOptions)],
+            };
+        }
+        return options;
+    });
+    const promisePosition$ = derived([floatingElement$, referenceElement$, computePositionOptions$, autoUpdateOptions$], ([floatingElement, referenceElement, computePositionOptions, autoUpdateOptions], set) => {
+        if (floatingElement && referenceElement) {
+            const clean = autoUpdate(referenceElement, floatingElement, () => {
+                set(computePosition(referenceElement, floatingElement, computePositionOptions));
+            }, autoUpdateOptions);
+            return () => {
+                set(null);
+                clean();
+            };
+        }
+        return undefined;
+    }, null);
+    const position$ = promiseStoreToValueStore(promisePosition$, null);
+    const placement$ = computed(() => position$()?.placement);
+    const middlewareData$ = computed(() => position$()?.middlewareData);
+    const x$ = computed(() => position$()?.x);
+    const y$ = computed(() => position$()?.y);
+    const strategy$ = computed(() => position$()?.strategy);
+    const arrowX$ = computed(() => middlewareData$()?.arrow?.x);
+    const arrowY$ = computed(() => middlewareData$()?.arrow?.y);
+    const floatingStyleApplyAction$ = computed(() => {
+        const floatingElement = floatingElement$();
+        if (floatingElement) {
+            floatingElement.style.left = `${x$() ?? 0}px`;
+            floatingElement.style.top = `${y$() ?? 0}px`;
+        }
+    });
+    const arrowStyleApplyAction$ = computed(() => {
+        const arrowElement = arrowElement$();
+        if (arrowElement) {
+            const arrowX = arrowX$();
+            const arrowY = arrowY$();
+            arrowElement.style.left = arrowX != null ? `${arrowX}px` : '';
+            arrowElement.style.top = arrowY != null ? `${arrowY}px` : '';
+        }
+    });
+    return {
+        patch,
+        ...stateStores({
+            x$,
+            y$,
+            strategy$,
+            placement$,
+            middlewareData$,
+        }),
+        directives: {
+            /**
+             * Directive to be used on the reference element from where the floating element will be positioned
+             */
+            referenceDirective,
+            /**
+             * Directive to be used on the floating element
+             */
+            floatingDirective: mergeDirectives(floatingDirective, directiveSubscribe(floatingStyleApplyAction$)),
+            /**
+             * Directive to be used on the arrow element, if any
+             */
+            arrowDirective: mergeDirectives(arrowDirective, directiveSubscribe(arrowStyleApplyAction$)),
+        },
+    };
+};

package/{dist/lib/services → services}/focustrack.js

@@ -1,5 +1,5 @@
 import { computed, readable } from '@amadeus-it-group/tansu';
-import { createStoreArrayDirective } from './directiveUtils';
+import { createStoreArrayDirective } from '../utils/directive';
 const evtFocusIn = 'focusin';
 const evtFocusOut = 'focusout';
 export const activeElement$ = readable(null, {
@@ -12,11 +12,11 @@ export const activeElement$ = readable(null, {
         function onFocusOut() {
             setTimeout(setActiveElement);
         }
-        container.addEventListener(evtFocusIn, setActiveElement);
-        container.addEventListener(evtFocusOut, onFocusOut);
+        container.addEventListener(evtFocusIn, setActiveElement, { capture: true });
+        container.addEventListener(evtFocusOut, onFocusOut, { capture: true });
         return () => {
-            container.removeEventListener(evtFocusIn, setActiveElement);
-            container.removeEventListener(evtFocusOut, onFocusOut);
+            container.removeEventListener(evtFocusIn, setActiveElement, { capture: true });
+            container.removeEventListener(evtFocusOut, onFocusOut, { capture: true });
         };
     },
     equal: Object.is,

package/services/intersection.d.ts

@@ -0,0 +1,34 @@
+import type { PropsConfig } from '../types';
+export interface IntersectionProps {
+    /**
+     * elements to observe
+     */
+    elements: HTMLElement[];
+    /**
+     * IntersectionObserverInit used in the IntersectionObserver
+     *
+     * See the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options)
+     */
+    options: Partial<IntersectionObserverInit> | undefined;
+}
+/**
+ * Create an intersection service.
+ *
+ * The returned service includes the patch method to set the elements to observe / intersection options and the states to track the visible elements.
+ *
+ * @param config - the props config for the intersection service
+ * @returns the intersection service
+ */
+export declare const createIntersection: (config?: PropsConfig<IntersectionProps>) => {
+    /**
+     * Readable of observed elements
+     */
+    elements$: import("@amadeus-it-group/tansu").ReadableSignal<HTMLElement[]>;
+    /**
+     * Store of map that contains the visible elements (for the key) and the corresponding entries
+     *
+     * See the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
+     */
+    visibleElements$: import("@amadeus-it-group/tansu").ReadableSignal<Map<Element, IntersectionObserverEntry>>;
+    patch: <U extends Partial<IntersectionProps>>(storesValues?: void | U | undefined) => void;
+};

package/services/intersection.js

@@ -0,0 +1,55 @@
+import { asReadable, derived } from '@amadeus-it-group/tansu';
+import { noop } from '../utils/internal/func';
+import { writablesForProps } from '../utils/stores';
+const defaultValues = {
+    elements: [],
+    options: undefined,
+};
+/**
+ * Create an intersection service.
+ *
+ * The returned service includes the patch method to set the elements to observe / intersection options and the states to track the visible elements.
+ *
+ * @param config - the props config for the intersection service
+ * @returns the intersection service
+ */
+export const createIntersection = (config) => {
+    const [{ elements$, options$ }, patch] = writablesForProps(defaultValues, config);
+    const visibleElements$ = derived([elements$, options$], ([elements, options], set) => {
+        if (elements.length) {
+            const visibleElements = new Map();
+            const observer = new IntersectionObserver((entries) => {
+                for (const entry of entries) {
+                    const { target, isIntersecting } = entry;
+                    if (isIntersecting) {
+                        visibleElements.set(target, entry);
+                    }
+                    else {
+                        visibleElements.delete(target);
+                    }
+                }
+                set(visibleElements);
+            }, options);
+            for (const element of elements) {
+                observer.observe(element);
+            }
+            return () => {
+                observer.disconnect();
+            };
+        }
+        return noop;
+    }, new Map());
+    return {
+        /**
+         * Readable of observed elements
+         */
+        elements$: asReadable(elements$),
+        /**
+         * Store of map that contains the visible elements (for the key) and the corresponding entries
+         *
+         * See the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
+         */
+        visibleElements$: asReadable(visibleElements$),
+        patch,
+    };
+};

package/services/navManager.d.ts

@@ -0,0 +1,93 @@
+import type { Directive } from '../types';
+export type NavManager = ReturnType<typeof createNavManager>;
+/**
+ * Returns the key name given the keyboard event. The key name is built using event.key (such as ArrowLeft, PageDown...),
+ * prefixed with the modifiers. If present, modifiers are always in the same order: Meta+Ctrl+Alt+Shift+...
+ * @param event - keyboard event
+ * @returns the name of the key, including modifiers
+ */
+export declare const getKeyName: (event: KeyboardEvent) => string;
+/**
+ * Returns true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside
+ * the input and false otherwise (i.e. the key is not ArrowLeft, ArrowRight, Home or End key, or that would not make the cursor move
+ * because it is already at one end of the input)
+ * @param event - keyboard event
+ * @returns true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside
+ * the input and false otherwise.
+ */
+export declare const isInternalInputNavigation: (event: KeyboardEvent) => boolean;
+/**
+ * Type of a key handler of the navigation manager.
+ * A key handler receives an object as its parameter, with the following properties:
+ * - event: key event
+ * - directiveElement: DOM element which has the navigation manager directive
+ * - navManager: navigation manager instance
+ */
+export type NavManagerKeyHandler = (info: {
+    directiveElement: HTMLElement;
+    event: KeyboardEvent;
+    navManager: NavManager;
+}) => void;
+/**
+ * Type of the parameter of the navigation manager directive.
+ */
+export interface NavManagerItemConfig {
+    /**
+     * Map of key handlers.
+     * The key in the map should match the result of calling {@link getKeyName} on the key event (for example "ArrowLeft" or "Ctrl+PageDown").
+     * The value in the map is the corresponding key handler.
+     */
+    keys?: Record<string, NavManagerKeyHandler>;
+    /**
+     * Function returning DOM elements to include in the navigation manager.
+     * It receives as a parameter the DOM element on which the navigation manager directive is used.
+     * If not specified, the default selector function only returns the element on which the navigation manager directive is used.
+     */
+    selector?: (directiveElement: HTMLElement) => Iterable<HTMLElement>;
+}
+/**
+ * Returns a new instance of the navigation manager.
+ *
+ * The navigation manager simplifies keyboard navigation for a set of DOM elements.
+ * It provides a directive to use on some DOM elements, both to add the keydown event handler and to specify which elements should be managed
+ * (either by directly putting the directive on those elements, or by putting the directive on a parent element and
+ * specifying which child elements should be included through a selector function).
+ *
+ * It provides some utilities to move the focus between those elements (focusFirst/focusLast, focusLeft/focusRight, focusPrevious/focusNext).
+ *
+ * @returns a new instance of the navigation manager
+ */
+export declare const createNavManager: () => {
+    elementsInDomOrder$: import("@amadeus-it-group/tansu").ReadableSignal<HTMLElement[]>;
+    directive: Directive<NavManagerItemConfig>;
+    focusIndex: (index: number, moveDirection?: -1 | 0 | 1) => HTMLElement | null;
+    focusPrevious: ({ event, referenceElement, }?: {
+        event?: KeyboardEvent | undefined;
+        referenceElement?: HTMLElement | null | undefined;
+    }) => HTMLElement | null;
+    focusNext: ({ event, referenceElement, }?: {
+        event?: KeyboardEvent | undefined;
+        referenceElement?: HTMLElement | null | undefined;
+    }) => HTMLElement | null;
+    focusFirst: ({ event }?: {
+        event?: KeyboardEvent | undefined;
+    }) => HTMLElement | null;
+    focusFirstLeft: (args_0?: {
+        event?: KeyboardEvent | undefined;
+    } | undefined) => HTMLElement | null;
+    focusFirstRight: (args_0?: {
+        event?: KeyboardEvent | undefined;
+    } | undefined) => HTMLElement | null;
+    focusLast: ({ event }?: {
+        event?: KeyboardEvent | undefined;
+    }) => HTMLElement | null;
+    focusLeft: (args_0?: {
+        event?: KeyboardEvent | undefined;
+        referenceElement?: HTMLElement | null | undefined;
+    } | undefined) => HTMLElement | null;
+    focusRight: (args_0?: {
+        event?: KeyboardEvent | undefined;
+        referenceElement?: HTMLElement | null | undefined;
+    } | undefined) => HTMLElement | null;
+    refreshElements: () => void;
+};