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

package/components/select/select.d.ts

@@ -0,0 +1,337 @@
+import type { Placement } from '@floating-ui/dom';
+import type { FloatingUI } from '../../services/floatingUI';
+import type { HasFocus } from '../../services/focustrack';
+import type { PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+/**
+ * A type for the slot context of the pagination widget
+ */
+export type SelectContext<Item> = WidgetSlotContext<SelectWidget<Item>>;
+export interface SelectItemContext<Item> extends SelectContext<Item> {
+    /**
+     * Contextual data related to an item
+     */
+    itemContext: ItemContext<Item>;
+}
+export interface SelectCommonPropsAndState<Item> extends WidgetsCommonPropsAndState {
+    /**
+     * id used for the input inside the select
+     */
+    id: string | undefined;
+    /**
+     * aria-label used for the input inside the select
+     */
+    ariaLabel: string | undefined;
+    /**
+     * List of selected item ids
+     */
+    selected: Item[];
+    /**
+     * Filtered text to be display in the filter input
+     */
+    filterText: string;
+    /**
+     * true if the select is disabled
+     */
+    disabled: boolean;
+    /**
+     * true if the select is open
+     */
+    open: boolean;
+    /**
+     * Class to be added on the dropdown menu container
+     */
+    menuClassName: string;
+    /**
+     * Class to be added on menu items
+     */
+    menuItemClassName: string;
+    /**
+     * Class to be added on selected items (displayed in the input zone)
+     */
+    badgeClassName: string;
+    /**
+     * true if a loading process is being done
+     */
+    loading: boolean;
+    /**
+     * The template to override the way each badge on the left of the input is displayed.
+     * This define the content of the badge inside the badge container.
+     */
+    slotBadgeLabel: SlotContent<SelectItemContext<Item>>;
+    /**
+     * The template to override the way each item is displayed in the list.
+     * This define the content of the badge inside the badge container.
+     */
+    slotItem: SlotContent<SelectItemContext<Item>>;
+}
+export interface SelectProps<T> extends SelectCommonPropsAndState<T> {
+    /**
+     * List of available items for the dropdown
+     */
+    items: T[];
+    /**
+     * List of allowed placements for the dropdown.
+     * This refers to the [allowedPlacements from floating UI](https://floating-ui.com/docs/autoPlacement#allowedplacements), given the different [Placement possibilities](https://floating-ui.com/docs/computePosition#placement).
+     */
+    allowedPlacements: Placement[];
+    /**
+     * Custom function to get the id of an item
+     * By default, the item is returned
+     */
+    itemIdFn(item: T): string;
+    /**
+     * Callback called dropdown open state change
+     * @param isOpen - updated open state
+     */
+    onOpenChange(isOpen: boolean): void;
+    /**
+     * Callback called when the text filter change
+     * @param text - Filtered text
+     */
+    onFilterTextChange(text: string): void;
+    /**
+     * Callback called when the selection change
+     */
+    onSelectedChange(selected: T[]): void;
+}
+/**
+ * Item representation built from the items provided in parameters
+ */
+export interface ItemContext<T> {
+    /**
+     * Original item given in the parameters
+     */
+    item: T;
+    /**
+     * Unique id to identify the item
+     */
+    id: string;
+    /**
+     * Specify if the item is checked
+     */
+    selected: boolean;
+}
+export interface SelectState<Item> extends SelectCommonPropsAndState<Item> {
+    /**
+     * List of item contexts, to be displayed in the menu
+     */
+    visibleItems: ItemContext<Item>[];
+    /**
+    /**
+     * List of selected items to be display
+     */
+    selectedContexts: ItemContext<Item>[];
+    /**
+     * Highlighted item context.
+     * It is designed to define the highlighted item in the dropdown menu
+     */
+    highlighted: ItemContext<Item> | undefined;
+    /**
+     * Current placement of the dropdown
+     */
+    placement: Placement | undefined;
+}
+export interface SelectApi<Item> {
+    /**
+     * Clear all the selected items
+     */
+    clear(): void;
+    /**
+     * Clear the filter text
+     */
+    clearText(): void;
+    /**
+     * Highlight the given item, if there is a corresponding match among the visible list
+     */
+    highlight(item: Item): void;
+    /**
+     * Highlight the first item among the visible list
+     */
+    highlightFirst(): void;
+    /**
+     * Highlight the previous item among the visible list
+     * Loop to the last item if needed
+     */
+    highlightPrevious(): void;
+    /**
+     * Highlight the next item among the visible list.
+     * Loop to the first item if needed
+     */
+    highlightNext(): void;
+    /**
+     * Highlight the last item among the visible list
+     */
+    highlightLast(): void;
+    /**
+     * Focus the provided item among the selected list.
+     * The focus feature is designed to know what item must be focused in the UI, i.e. among the badge elements.
+     */
+    focus(item: Item): void;
+    /**
+     * Focus the first element
+     */
+    focusFirst(): void;
+    /**
+     * Focus the previous element. If no element was focused before the call, nothing happens.
+     */
+    focusPrevious(): void;
+    /**
+     * Focus the next element. If no element was focused before the call, nothing happens.
+     */
+    focusNext(): void;
+    /**
+     * Focus the last element. If no element was focused before the call, nothing happens.
+     */
+    focusLast(): void;
+    /**
+     * Select the provided item.
+     * The selected list is used to
+     * @param item - the item to select
+     */
+    select(item: Item): void;
+    /**
+     * Unselect the provided item.
+     * @param item - the item to unselect
+     */
+    unselect(item: Item): void;
+    /**
+     * Toggle the selection of an item
+     * @param item - the item to toggle
+     * @param selected - an optional boolean to enforce the selected/unselected state instead of toggling
+     */
+    toggleItem(item: Item, selected?: boolean): void;
+    /**
+     * open the select
+     */
+    open(): void;
+    /**
+     * close the select
+     */
+    close(): void;
+    /**
+     * Toggle the dropdown menu
+     * @param isOpen - If specified, set the menu in the defined state.
+     */
+    toggle(isOpen?: boolean): void;
+}
+export interface SelectDirectives {
+    /**
+     * Directive to be used in the input group and the menu containers
+     */
+    hasFocusDirective: HasFocus['directive'];
+    /**
+     * Directive that enables dynamic positioning of menu element
+     */
+    floatingDirective: FloatingUI['directives']['floatingDirective'];
+    /**
+     * A directive to be applied to the input group element serves as the base for menu positioning
+     */
+    referenceDirective: FloatingUI['directives']['referenceDirective'];
+}
+export interface SelectActions {
+    /**
+     * Method to be plugged to on the 'input' event. The input text will be used as the filter text.
+     */
+    onInput: (e: {
+        target: any;
+    }) => void;
+    /**
+     * Method to be plugged to on an keydown event, in order to control the keyboard interactions with the highlighted item.
+     * It manages arrow keys to move the highlighted item, or enter to toggle the item.
+     */
+    onInputKeydown: (e: any) => void;
+}
+export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions, SelectDirectives>;
+export declare const defaultConfig: SelectProps<any>;
+/**
+ * Returns a shallow copy of the default select config.
+ * @returns a copy of the default config
+ */
+export declare function getSelectDefaultConfig(): {
+    /**
+     * List of available items for the dropdown
+     */
+    items: any[];
+    /**
+     * List of allowed placements for the dropdown.
+     * This refers to the [allowedPlacements from floating UI](https://floating-ui.com/docs/autoPlacement#allowedplacements), given the different [Placement possibilities](https://floating-ui.com/docs/computePosition#placement).
+     */
+    allowedPlacements: Placement[];
+    /**
+     * Custom function to get the id of an item
+     * By default, the item is returned
+     */
+    itemIdFn(item: any): string;
+    /**
+     * Callback called dropdown open state change
+     * @param isOpen - updated open state
+     */
+    onOpenChange(isOpen: boolean): void;
+    /**
+     * Callback called when the text filter change
+     * @param text - Filtered text
+     */
+    onFilterTextChange(text: string): void;
+    /**
+     * Callback called when the selection change
+     */
+    onSelectedChange(selected: any[]): void;
+    /**
+     * id used for the input inside the select
+     */
+    id: string | undefined;
+    /**
+     * aria-label used for the input inside the select
+     */
+    ariaLabel: string | undefined;
+    /**
+     * List of selected item ids
+     */
+    selected: any[];
+    /**
+     * Filtered text to be display in the filter input
+     */
+    filterText: string;
+    /**
+     * true if the select is disabled
+     */
+    disabled: boolean;
+    /**
+     * true if the select is open
+     */
+    open: boolean;
+    /**
+     * Class to be added on the dropdown menu container
+     */
+    menuClassName: string;
+    /**
+     * Class to be added on menu items
+     */
+    menuItemClassName: string;
+    /**
+     * Class to be added on selected items (displayed in the input zone)
+     */
+    badgeClassName: string;
+    /**
+     * true if a loading process is being done
+     */
+    loading: boolean;
+    /**
+     * The template to override the way each badge on the left of the input is displayed.
+     * This define the content of the badge inside the badge container.
+     */
+    slotBadgeLabel: SlotContent<SelectItemContext<any>>;
+    /**
+     * The template to override the way each item is displayed in the list.
+     * This define the content of the badge inside the badge container.
+     */
+    slotItem: SlotContent<SelectItemContext<any>>;
+    className: string;
+};
+/**
+ * Create a SelectWidget with given config props
+ * @param config - an optional alert config
+ * @returns a SelectWidget
+ */
+export declare function createSelect<Item>(config?: PropsConfig<SelectProps<Item>>): SelectWidget<Item>;

package/components/select/select.js

@@ -0,0 +1,266 @@
+import { asWritable, computed, writable } from '@amadeus-it-group/tansu';
+import { autoPlacement, offset, size } from '@floating-ui/dom';
+import { createFloatingUI } from '../../services/floatingUI';
+import { createHasFocus } from '../../services/focustrack';
+import { noop } from '../../utils/internal/func';
+import { bindableDerived, stateStores, writablesForProps } from '../../utils/stores';
+const defaultItemId = (item) => '' + item;
+export const defaultConfig = {
+    id: undefined,
+    ariaLabel: 'Select',
+    open: false,
+    disabled: false,
+    items: [],
+    filterText: '',
+    loading: false,
+    selected: [],
+    itemIdFn: defaultItemId,
+    onOpenChange: noop,
+    onFilterTextChange: noop,
+    onSelectedChange: noop,
+    allowedPlacements: ['bottom-start', 'top-start', 'bottom-end', 'top-end'],
+    className: '',
+    menuClassName: '',
+    menuItemClassName: '',
+    badgeClassName: '',
+    slotBadgeLabel: ({ itemContext }) => itemContext.item,
+    slotItem: ({ itemContext }) => itemContext.item,
+};
+/**
+ * Returns a shallow copy of the default select config.
+ * @returns a copy of the default config
+ */
+export function getSelectDefaultConfig() {
+    return { ...defaultConfig };
+}
+/**
+ * Create a SelectWidget with given config props
+ * @param config - an optional alert config
+ * @returns a SelectWidget
+ */
+export function createSelect(config) {
+    // Props
+    const [{ open$: _dirtyOpen$, filterText$: _dirtyFilterText$, items$, itemIdFn$, onOpenChange$, onFilterTextChange$, onSelectedChange$, allowedPlacements$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config);
+    const { selected$ } = stateProps;
+    const filterText$ = bindableDerived(onFilterTextChange$, [_dirtyFilterText$]);
+    const { hasFocus$, directive: hasFocusDirective } = createHasFocus();
+    const open$ = bindableDerived(onOpenChange$, [_dirtyOpen$, hasFocus$], ([_dirtyOpen, hasFocus]) => _dirtyOpen && hasFocus);
+    const selectedContextsMap$ = computed(() => {
+        const selectedItemsContext = new Map();
+        const itemIdFn = itemIdFn$();
+        for (const item of selected$()) {
+            const id = itemIdFn(item);
+            selectedItemsContext.set(id, {
+                item,
+                id: itemIdFn(item),
+                selected: true,
+            });
+        }
+        return selectedItemsContext;
+    });
+    const selectedContexts$ = computed(() => [...selectedContextsMap$().values()]);
+    const highlightedIndex$ = (function () {
+        const store = writable(0);
+        return asWritable(store, (index) => {
+            const { length } = visibleItems$();
+            if (index != undefined) {
+                if (!length) {
+                    index = undefined;
+                }
+                else if (index < 0) {
+                    index = length - 1;
+                }
+                else if (index >= length) {
+                    index = 0;
+                }
+            }
+            store.set(index);
+        });
+    })();
+    const itemContexts$ = computed(() => {
+        const itemContexts = new Map();
+        if (open$()) {
+            const selectedContextsMap = selectedContextsMap$();
+            const itemIdFn = itemIdFn$();
+            for (const item of items$()) {
+                const id = itemIdFn(item);
+                itemContexts.set(id, {
+                    item,
+                    id,
+                    selected: selectedContextsMap.has(id),
+                });
+            }
+        }
+        return itemContexts;
+    });
+    const visibleItems$ = computed(() => (open$() ? [...itemContexts$().values()] : []));
+    const highlighted$ = computed(() => {
+        const visibleItems = visibleItems$();
+        const highlightedIndex = highlightedIndex$();
+        return visibleItems.length && highlightedIndex != undefined ? visibleItems[highlightedIndex] : undefined;
+    });
+    const { directives: { floatingDirective, referenceDirective }, stores: { placement$ }, } = createFloatingUI({
+        props: {
+            computePositionOptions: asWritable(computed(() => ({
+                middleware: [
+                    offset(5),
+                    autoPlacement({
+                        allowedPlacements: allowedPlacements$(),
+                    }),
+                    size(),
+                ],
+            }))),
+        },
+    });
+    const widget = {
+        ...stateStores({
+            visibleItems$,
+            highlighted$,
+            open$,
+            selectedContexts$,
+            filterText$,
+            placement$,
+            ...stateProps,
+        }),
+        patch,
+        api: {
+            clear() {
+                selected$.set([]);
+            },
+            select(item) {
+                widget.api.toggleItem(item, true);
+            },
+            unselect(item) {
+                widget.api.toggleItem(item, false);
+            },
+            toggleItem(item, selected) {
+                const itemIdFn = itemIdFn$();
+                const itemId = itemIdFn(item);
+                const selectedContextsMap = selectedContextsMap$();
+                const isInSelected = selectedContextsMap.has(itemId);
+                if (selected == null) {
+                    selected = !isInSelected;
+                }
+                if ((selected && !itemContexts$().has(itemId)) || (!selected && !isInSelected)) {
+                    // Nothing to do in this case
+                    return;
+                }
+                selected$.update((selectedItems) => {
+                    selectedItems = [...selectedItems]; // Mutate the array
+                    if (selected && !isInSelected) {
+                        selectedItems.push(item);
+                    }
+                    else if (!selected && isInSelected) {
+                        const index = selectedItems.findIndex((item) => itemIdFn(item) === itemId);
+                        selectedItems.splice(index, 1);
+                    }
+                    onSelectedChange$()?.(selectedItems);
+                    return selectedItems;
+                });
+            },
+            clearText() {
+                // FIXME: not implemented yet!
+            },
+            highlight(item) {
+                const index = visibleItems$().findIndex((itemCtx) => itemCtx.item === item);
+                highlightedIndex$.set(index === -1 ? undefined : index);
+            },
+            highlightFirst() {
+                highlightedIndex$.set(0);
+            },
+            highlightPrevious() {
+                highlightedIndex$.update((highlightedIndex) => {
+                    return highlightedIndex != null ? highlightedIndex - 1 : -1;
+                });
+            },
+            highlightNext() {
+                highlightedIndex$.update((highlightedIndex) => {
+                    return highlightedIndex != null ? highlightedIndex + 1 : Infinity;
+                });
+            },
+            highlightLast() {
+                highlightedIndex$.set(-1);
+            },
+            focus(item) {
+                // FIXME: not implemented yet!
+            },
+            focusFirst() {
+                // FIXME: not implemented yet!
+            },
+            focusPrevious() {
+                // FIXME: not implemented yet!
+            },
+            focusNext() {
+                // FIXME: not implemented yet!
+            },
+            focusLast() {
+                // FIXME: not implemented yet!
+            },
+            open: () => widget.api.toggle(true),
+            close: () => widget.api.toggle(false),
+            toggle(isOpen) {
+                _dirtyOpen$.update((value) => (isOpen != null ? isOpen : !value));
+            },
+        },
+        directives: {
+            hasFocusDirective,
+            floatingDirective,
+            referenceDirective,
+        },
+        actions: {
+            onInput({ target }) {
+                const value = target.value;
+                patch({
+                    open: value != null && value !== '',
+                    filterText: value,
+                });
+            },
+            onInputKeydown(e) {
+                const { ctrlKey, key } = e;
+                let keyManaged = true;
+                switch (key) {
+                    case 'ArrowDown': {
+                        const isOpen = open$();
+                        if (isOpen) {
+                            if (ctrlKey) {
+                                widget.api.highlightLast();
+                            }
+                            else {
+                                widget.api.highlightNext();
+                            }
+                        }
+                        else {
+                            widget.api.open();
+                            widget.api.highlightFirst();
+                        }
+                        break;
+                    }
+                    case 'ArrowUp':
+                        if (ctrlKey) {
+                            widget.api.highlightFirst();
+                        }
+                        else {
+                            widget.api.highlightPrevious();
+                        }
+                        break;
+                    case 'Enter': {
+                        const itemCtx = highlighted$();
+                        if (itemCtx) {
+                            widget.api.toggleItem(itemCtx.item);
+                        }
+                        break;
+                    }
+                    case 'Escape':
+                        _dirtyOpen$.set(false);
+                        break;
+                    default:
+                        keyManaged = false;
+                }
+                if (keyManaged) {
+                    e.preventDefault();
+                }
+            },
+        },
+    };
+    return widget;
+}