@gooddata/sdk-ui-kit 10.40.0-alpha.7 → 10.40.0

package/esm/@ui/UiTags/UiTags.js

@@ -0,0 +1,88 @@
+// (C) 2025 GoodData Corporation
+import React, { useRef } from "react";
+import noop from "lodash/noop.js";
+import { useResponsiveTags } from "./hooks/useResponsiveTags.js";
+import { useTagsInteractions } from "./interactions.js";
+import { UiTag } from "./UiTag.js";
+import { Input } from "../../Form/index.js";
+import { bem } from "../@utils/bem.js";
+import { UiButton } from "../UiButton/UiButton.js";
+import { UiPopover } from "../UiPopover/UiPopover.js";
+const { b, e } = bem("gd-ui-kit-tags");
+const defaultAccessibilityConfig = {};
+/**
+ * @internal
+ */
+export function UiTags({ tags, addLabel = "Add tag", nameLabel = "Name", cancelLabel = "Cancel", closeLabel = "Close", saveLabel = "Save", noTagsLabel = "No tags", moreLabel = "More tags", removeLabel = "Remove", mode = "single-line", canDeleteTags = true, canCreateTag = true, readOnly = false, onTagClick = noop, onTagAdd = noop, onTagRemove = noop, accessibilityConfig = defaultAccessibilityConfig, }) {
+    const inputRef = useRef(null);
+    const expanded = mode === "multi-line";
+    const isDeletable = canDeleteTags && !readOnly;
+    const isAddable = canCreateTag && !readOnly;
+    const { rootRef, showedTags, hiddenTags, tagsContainerRef, hiddenTagsContainerRef, tooltipTagsContainerRef, addButtonRef, allContainerRef, tooltipWidth, availableWidth, lastAvailableWidth, setTooltipContainer, } = useResponsiveTags(tags, mode, [canCreateTag, canDeleteTags, readOnly]);
+    const items = [...showedTags, hiddenTags];
+    const { handleKeyDown, interactionState, onMoreOpen, onMoreClose, onAddOpen, onAddClose, showedFocusedIndex, hiddenFocusedIndex, tag, setTag, onTagClickHandler, onTagRemoveHandler, onTagAddHandler, } = useTagsInteractions(rootRef, tooltipTagsContainerRef, showedTags, hiddenTags, onTagClick, onTagAdd, onTagRemove);
+    return (React.createElement("div", { ref: rootRef, tabIndex: tags.length === 0 ? -1 : 0, onKeyDown: handleKeyDown, className: b({ readOnly, mode }), "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-expanded": accessibilityConfig?.ariaExpanded ?? expanded, role: accessibilityConfig?.role ?? "list" },
+        React.createElement("div", { className: e("shadow-container"), ref: allContainerRef }, tags.map((tag) => {
+            return (React.createElement(UiTag, { key: getKey(tag, isDeletable, readOnly), tag: tag, isDeletable: isDeletable }));
+        })),
+        React.createElement("div", { className: e("tags-container"), ref: tagsContainerRef },
+            items.map((tag, i) => {
+                if (Array.isArray(tag)) {
+                    if (hiddenTags.length === 0) {
+                        return null;
+                    }
+                    return (React.createElement("div", { key: i, role: "listitem", className: e("hidden-tags", { isFocused: showedFocusedIndex === i }) }, hiddenTags.length > 0 ? (React.createElement(UiPopover, { onOpen: onMoreOpen, onClose: onMoreClose, initialFocus: tooltipTagsContainerRef, returnFocusTo: rootRef, anchor: React.createElement(UiButton, { tabIndex: -1, label: `+${hiddenTags.length}`, size: "small", variant: "tertiary", ref: (ref) => {
+                                hiddenTagsContainerRef.current = ref;
+                                interactionState.current.more = ref;
+                            } }), width: 300, title: moreLabel, content: () => (React.createElement("div", { onKeyDown: handleKeyDown, className: e("tags-more-tooltip"), ref: (ref) => {
+                                tooltipTagsContainerRef.current = ref;
+                                setTooltipContainer(ref);
+                            }, tabIndex: 0 }, hiddenTags.map((tag, i) => {
+                            return (React.createElement(UiTag, { key: i, tag: tag, deleteLabel: removeLabel, ref: (ref) => {
+                                    interactionState.current.tags[tag.id] = ref;
+                                }, isDeletable: isDeletable, isDisabled: readOnly, isFocused: hiddenFocusedIndex === i, maxWidth: tooltipWidth, onDelete: onTagRemoveHandler, onClick: onTagClickHandler }));
+                        }))), footer: ({ onClose }) => (React.createElement(React.Fragment, null,
+                            React.createElement(UiButton, { ref: (ref) => {
+                                    interactionState.current.close = ref;
+                                }, label: closeLabel, variant: "secondary", onClick: () => {
+                                    onClose();
+                                } }))) })) : null));
+                }
+                return (React.createElement(UiTag, { tag: tag, ref: (ref) => {
+                        interactionState.current.tags[tag.id] = ref;
+                    }, isDeletable: isDeletable, isDisabled: readOnly, deleteLabel: removeLabel, isFocused: showedFocusedIndex === i, onDelete: onTagRemoveHandler, onClick: onTagClickHandler, key: getKey(tag, isDeletable, readOnly), maxWidth: i === showedTags.length - 1 ? lastAvailableWidth : availableWidth }));
+            }),
+            isAddable ? (React.createElement("div", { className: e("add-button"), ref: addButtonRef },
+                React.createElement(UiPopover, { onOpen: onAddOpen, onClose: () => {
+                        setTag("");
+                        onAddClose();
+                    }, anchor: React.createElement(UiButton, { label: showedTags.length > 0 ? "" : addLabel, accessibilityConfig: {
+                            ariaLabel: showedTags.length > 0 ? addLabel : undefined,
+                        }, size: "small", iconBefore: "plus", variant: "tertiary", ref: (ref) => {
+                            interactionState.current.add = ref;
+                        } }), title: addLabel, initialFocus: inputRef, content: ({ onClose }) => (React.createElement(Input, { label: nameLabel, ref: (ref) => {
+                            inputRef.current = ref?.inputNodeRef?.inputNodeRef;
+                            interactionState.current.input = inputRef.current;
+                        }, value: tag, autocomplete: "on", labelPositionTop: true, className: e("add-input"), onChange: (value) => {
+                            setTag(String(value));
+                        }, onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                                onTagAddHandler();
+                                onClose();
+                            }
+                        } })), footer: ({ onClose }) => (React.createElement(React.Fragment, null,
+                        React.createElement(UiButton, { label: cancelLabel, variant: "secondary", onClick: onClose, ref: (ref) => {
+                                interactionState.current.close = ref;
+                            } }),
+                        React.createElement(UiButton, { label: saveLabel, isDisabled: !tag, variant: "primary", onClick: () => {
+                                onTagAddHandler();
+                                onClose();
+                            }, ref: (ref) => {
+                                interactionState.current.save = ref;
+                            } }))) }))) : null,
+            !isAddable && tags.length === 0 ? (React.createElement("div", { className: e("empty-state") }, noTagsLabel)) : null)));
+}
+function getKey(tag, isDeletable, readOnly) {
+    return [tag.id, tag.isDeletable, isDeletable, readOnly].filter(Boolean).join("-");
+}
+//# sourceMappingURL=UiTags.js.map

package/esm/@ui/UiTags/UiTags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiTags.js","sourceRoot":"","sources":["../../../src/@ui/UiTags/UiTags.tsx"],"names":[],"mappings":"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"}

package/esm/@ui/UiTags/hooks/useResponsiveTags.d.ts

@@ -0,0 +1,17 @@
+import { DependencyList } from "react";
+import { UiTagDef } from "../types.js";
+export declare function useResponsiveTags(tags: UiTagDef[], mode: "single-line" | "multi-line", deps?: DependencyList): {
+    rootRef: import("react").MutableRefObject<HTMLDivElement>;
+    showedTags: UiTagDef[];
+    hiddenTags: UiTagDef[];
+    allContainerRef: import("react").MutableRefObject<HTMLDivElement>;
+    tagsContainerRef: import("react").MutableRefObject<HTMLDivElement>;
+    hiddenTagsContainerRef: import("react").MutableRefObject<HTMLButtonElement>;
+    tooltipTagsContainerRef: import("react").MutableRefObject<HTMLDivElement>;
+    addButtonRef: import("react").MutableRefObject<HTMLDivElement>;
+    availableWidth: number | "none";
+    lastAvailableWidth: number | "none";
+    tooltipWidth: number | "none";
+    setTooltipContainer: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement>>;
+};
+//# sourceMappingURL=useResponsiveTags.d.ts.map

package/esm/@ui/UiTags/hooks/useResponsiveTags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveTags.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiTags/hooks/useResponsiveTags.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAA6B,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKvC,wBAAgB,iBAAiB,CAC7B,IAAI,EAAE,QAAQ,EAAE,EAChB,IAAI,EAAE,aAAa,GAAG,YAAY,EAClC,IAAI,CAAC,EAAE,cAAc;;;;;;;;;;;;;EAgFxB"}

package/esm/@ui/UiTags/hooks/useResponsiveTags.js

@@ -0,0 +1,100 @@
+// (C) 2025 GoodData Corporation
+import { useLayoutEffect, useState } from "react";
+import { useTagsElements } from "./useTagsElements.js";
+const PADDING = 5;
+const MIN_WIDTH = 10;
+export function useResponsiveTags(tags, mode, deps) {
+    const { rootRef, allContainerRef, tagsContainerRef, tagsContainerWidth, hiddenTagsContainerRef, addButtonRef, tooltipTagsContainerRef, tooltipTagsContainer, setTooltipContainer, } = useTagsElements();
+    const [showedTags, setShowedTags] = useState(tags);
+    const [hiddenTags, setHiddenTags] = useState([]);
+    const [availableWidth, setAvailableWidth] = useState("none");
+    const [lastAvailableWidth, setLastAvailableWidth] = useState("none");
+    const [tooltipWidth, setTooltipWidth] = useState("none");
+    useLayoutEffect(() => {
+        const container = allContainerRef.current;
+        const hiddenContainer = hiddenTagsContainerRef.current;
+        const addButton = addButtonRef.current;
+        if (!container) {
+            return;
+        }
+        switch (mode) {
+            case "single-line": {
+                const { showedTags, hiddenTags, availableWidth, lastAvailableWidth } = recalculateSingleLineTags(tags, container, tagsContainerWidth, hiddenContainer, addButton);
+                setShowedTags(showedTags);
+                setHiddenTags(hiddenTags);
+                setAvailableWidth(availableWidth);
+                setLastAvailableWidth(lastAvailableWidth);
+                break;
+            }
+            case "multi-line": {
+                const { showedTags, hiddenTags, availableWidth, lastAvailableWidth } = recalculateMultiLineTags(tags, tagsContainerWidth, addButton);
+                setShowedTags(showedTags);
+                setHiddenTags(hiddenTags);
+                setAvailableWidth(availableWidth);
+                setLastAvailableWidth(lastAvailableWidth);
+                break;
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tagsContainerWidth, tags, allContainerRef, hiddenTagsContainerRef, addButtonRef, mode, ...deps]);
+    useLayoutEffect(() => {
+        const width = tooltipTagsContainer?.offsetWidth ?? 0;
+        setTooltipWidth(width > MIN_WIDTH ? width : "none");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tooltipTagsContainer?.offsetWidth]);
+    return {
+        rootRef,
+        showedTags,
+        hiddenTags,
+        allContainerRef,
+        tagsContainerRef,
+        hiddenTagsContainerRef,
+        tooltipTagsContainerRef,
+        addButtonRef,
+        availableWidth,
+        lastAvailableWidth,
+        tooltipWidth,
+        setTooltipContainer,
+    };
+}
+function recalculateSingleLineTags(tags, container, tagsContainerWidth, hiddenContainer, addButton) {
+    let currentWidth = 0;
+    let i = 0;
+    // add offset width from elements
+    currentWidth += hiddenContainer?.offsetWidth ?? 0;
+    currentWidth += addButton?.offsetWidth ?? 0;
+    const availableWidth = tagsContainerWidth - currentWidth;
+    const count = container.children.length;
+    for (; i < count; i++) {
+        const child = container.children[i];
+        const tempWidth = currentWidth + child.offsetWidth;
+        if (tempWidth > tagsContainerWidth) {
+            break;
+        }
+        // add offset width
+        currentWidth += child.offsetWidth;
+    }
+    let showedTags = tags.slice(0, i);
+    let hiddenTags = tags.slice(i);
+    if (count > 0 && showedTags.length === 0) {
+        showedTags = tags.slice(0, 1);
+        hiddenTags = tags.slice(1);
+    }
+    return {
+        showedTags,
+        hiddenTags,
+        availableWidth,
+        lastAvailableWidth: availableWidth,
+    };
+}
+function recalculateMultiLineTags(tags, tagsContainerWidth, addButton) {
+    const availableWidth = tagsContainerWidth;
+    const lastAvailableWidth = availableWidth - (addButton?.offsetWidth ? addButton.offsetWidth + PADDING : 0);
+    return {
+        showedTags: tags,
+        hiddenTags: [],
+        availableWidth,
+        lastAvailableWidth,
+    };
+}
+//# sourceMappingURL=useResponsiveTags.js.map

package/esm/@ui/UiTags/hooks/useResponsiveTags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveTags.js","sourceRoot":"","sources":["../../../../src/@ui/UiTags/hooks/useResponsiveTags.ts"],"names":[],"mappings":"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"}

package/esm/@ui/UiTags/hooks/useTagsElements.d.ts

@@ -0,0 +1,15 @@
+export declare function useTagsElements(): {
+    rootRef: import("react").MutableRefObject<HTMLDivElement>;
+    allContainerRef: import("react").MutableRefObject<HTMLDivElement>;
+    allContainerWidth: number;
+    allContainerHeight: number;
+    tagsContainerRef: import("react").MutableRefObject<HTMLDivElement>;
+    tagsContainerWidth: number;
+    tagsContainerHeight: number;
+    hiddenTagsContainerRef: import("react").MutableRefObject<HTMLButtonElement>;
+    tooltipTagsContainerRef: import("react").MutableRefObject<HTMLDivElement>;
+    tooltipTagsContainer: HTMLDivElement;
+    setTooltipContainer: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement>>;
+    addButtonRef: import("react").MutableRefObject<HTMLDivElement>;
+};
+//# sourceMappingURL=useTagsElements.d.ts.map

package/esm/@ui/UiTags/hooks/useTagsElements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTagsElements.d.ts","sourceRoot":"","sources":["../../../../src/@ui/UiTags/hooks/useTagsElements.ts"],"names":[],"mappings":"AAKA,wBAAgB,eAAe;;;;;;;;;;;;;EAqC9B"}

package/esm/@ui/UiTags/hooks/useTagsElements.js

@@ -0,0 +1,32 @@
+// (C) 2025 GoodData Corporation
+import { useRef, useState } from "react";
+import { useElementSize } from "../../hooks/useElementSize.js";
+export function useTagsElements() {
+    const { ref: allContainerRef, width: allContainerWidth, height: allContainerHeight, } = useElementSize();
+    const { ref: tagsContainerRef, width: tagsContainerWidth, height: tagsContainerHeight, } = useElementSize();
+    const rootRef = useRef(null);
+    const tooltipTagsContainerRef = useRef(null);
+    const hiddenTagsContainerRef = useRef(null);
+    const addButtonRef = useRef(null);
+    const [tooltipTagsContainer, setTooltipContainer] = useState(null);
+    return {
+        rootRef,
+        // container
+        allContainerRef,
+        allContainerWidth,
+        allContainerHeight,
+        // tags container
+        tagsContainerRef,
+        tagsContainerWidth,
+        tagsContainerHeight,
+        // hidden tags container
+        hiddenTagsContainerRef,
+        // tooltip tags container
+        tooltipTagsContainerRef,
+        tooltipTagsContainer,
+        setTooltipContainer,
+        // add button
+        addButtonRef,
+    };
+}
+//# sourceMappingURL=useTagsElements.js.map

package/esm/@ui/UiTags/hooks/useTagsElements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTagsElements.js","sourceRoot":"","sources":["../../../../src/@ui/UiTags/hooks/useTagsElements.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,MAAM,UAAU,eAAe;IAC3B,MAAM,EACF,GAAG,EAAE,eAAe,EACpB,KAAK,EAAE,iBAAiB,EACxB,MAAM,EAAE,kBAAkB,GAC7B,GAAG,cAAc,EAAkB,CAAC;IACrC,MAAM,EACF,GAAG,EAAE,gBAAgB,EACrB,KAAK,EAAE,kBAAkB,EACzB,MAAM,EAAE,mBAAmB,GAC9B,GAAG,cAAc,EAAkB,CAAC;IAErC,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACpD,MAAM,uBAAuB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7D,MAAM,sBAAsB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC/D,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,oBAAoB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAEnF,OAAO;QACH,OAAO;QACP,YAAY;QACZ,eAAe;QACf,iBAAiB;QACjB,kBAAkB;QAClB,iBAAiB;QACjB,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,wBAAwB;QACxB,sBAAsB;QACtB,yBAAyB;QACzB,uBAAuB;QACvB,oBAAoB;QACpB,mBAAmB;QACnB,aAAa;QACb,YAAY;KACf,CAAC;AACN,CAAC"}

package/esm/@ui/UiTags/interactions.d.ts

@@ -0,0 +1,29 @@
+import { MutableRefObject } from "react";
+import { UiTagDef, UiTagsProps } from "./types.js";
+type InteractionState = {
+    moreOpen: boolean;
+    addOpen: boolean;
+    tags: Record<string, HTMLButtonElement>;
+    more: HTMLButtonElement | null;
+    add: HTMLButtonElement | null;
+    close: HTMLButtonElement | null;
+    save: HTMLButtonElement | null;
+    input: HTMLInputElement | null;
+};
+export declare function useTagsInteractions(rootRef: MutableRefObject<HTMLDivElement | null>, hiddenTagsRef: MutableRefObject<HTMLDivElement | null>, showedTags: UiTagDef[], hiddenTags: UiTagDef[], onTagClick: UiTagsProps["onTagClick"], onTagAdd: UiTagsProps["onTagAdd"], onTagRemove: UiTagsProps["onTagRemove"]): {
+    tag: string;
+    setTag: import("react").Dispatch<import("react").SetStateAction<string>>;
+    onAddOpen: () => void;
+    onAddClose: () => void;
+    onMoreOpen: () => void;
+    onMoreClose: () => void;
+    handleKeyDown: (event: import("react").KeyboardEvent<Element>) => void;
+    interactionState: MutableRefObject<InteractionState>;
+    showedFocusedIndex: number;
+    hiddenFocusedIndex: number;
+    onTagAddHandler: () => void;
+    onTagRemoveHandler: (tag: UiTagDef) => void;
+    onTagClickHandler: (tag: UiTagDef) => void;
+};
+export {};
+//# sourceMappingURL=interactions.d.ts.map

package/esm/@ui/UiTags/interactions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTags/interactions.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAGnD,KAAK,gBAAgB,GAAG;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IACxC,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC/B,GAAG,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC9B,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAChC,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC/B,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,EAChD,aAAa,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,EACtD,UAAU,EAAE,QAAQ,EAAE,EACtB,UAAU,EAAE,QAAQ,EAAE,EACtB,UAAU,EAAE,WAAW,CAAC,YAAY,CAAC,EACrC,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,EACjC,WAAW,EAAE,WAAW,CAAC,aAAa,CAAC;;;;;;;;;;;;8BAiD7B,QAAQ;6BAcR,QAAQ;EAiOrB"}

package/esm/@ui/UiTags/interactions.js

@@ -0,0 +1,274 @@
+// (C) 2025 GoodData Corporation
+import { useCallback, useMemo, useRef, useState } from "react";
+import { makeTabsKeyboardNavigation } from "../@utils/keyboardNavigation.js";
+export function useTagsInteractions(rootRef, hiddenTagsRef, showedTags, hiddenTags, onTagClick, onTagAdd, onTagRemove) {
+    const [tag, setTag] = useState("");
+    const [showedFocusedIndex, setShowedFocusedIndex] = useState(0);
+    const [hiddenFocusedIndex, setHiddenFocusedIndex] = useState(0);
+    const rootItems = useMemo(() => {
+        return [...showedTags, ...(hiddenTags.length > 0 ? [hiddenTags] : [])];
+    }, [showedTags, hiddenTags]);
+    const interactionState = useRef({
+        moreOpen: false,
+        addOpen: false,
+        tags: {},
+        more: null,
+        add: null,
+        close: null,
+        save: null,
+        input: null,
+    });
+    const onMoreOpen = useCallback(() => {
+        interactionState.current.moreOpen = true;
+        setShowedFocusedIndex(rootItems.length - 1);
+        setHiddenFocusedIndex(0);
+    }, [rootItems]);
+    const onMoreClose = useCallback(() => {
+        interactionState.current.moreOpen = false;
+        setShowedFocusedIndex(rootItems.length - 1);
+        setHiddenFocusedIndex(0);
+    }, [rootItems]);
+    const onAddOpen = useCallback(() => {
+        interactionState.current.addOpen = true;
+    }, []);
+    const onAddClose = useCallback(() => {
+        interactionState.current.addOpen = false;
+    }, []);
+    const onTagAddHandler = useCallback(() => {
+        const newTag = {
+            id: tag,
+            label: tag,
+        };
+        onTagAdd(newTag);
+        setTag("");
+    }, [tag, onTagAdd]);
+    const onTagRemoveHandler = useCallback((tag) => {
+        const deletedShowedTag = showedTags.findIndex((t) => t === tag);
+        const deletedHiddenTag = hiddenTags.findIndex((t) => t === tag);
+        if (deletedShowedTag !== -1) {
+            setShowedFocusedIndex(Math.min(deletedShowedTag, showedTags.length - 1));
+        }
+        if (deletedHiddenTag !== -1) {
+            setHiddenFocusedIndex(Math.min(deletedHiddenTag, hiddenTags.length - 1));
+        }
+        onTagRemove(tag);
+    }, [hiddenTags, onTagRemove, showedTags]);
+    const onTagClickHandler = useCallback((tag) => {
+        const showedTag = showedTags.findIndex((t) => t === tag);
+        if (showedTag !== -1) {
+            setShowedFocusedIndex(showedTag);
+        }
+        const hiddenTag = hiddenTags.findIndex((t) => t === tag);
+        if (hiddenTag !== -1) {
+            setHiddenFocusedIndex(hiddenTag);
+        }
+        onTagClick(tag);
+    }, [hiddenTags, onTagClick, showedTags]);
+    const handleKeyDown = useMemo(() => makeTabsKeyboardNavigation({
+        onFocusPrevious: (event) => {
+            if (interactionState.current.addOpen) {
+                return;
+            }
+            if (event.target === interactionState.current.add) {
+                return;
+            }
+            if (interactionState.current.moreOpen) {
+                hiddenTagsRef.current?.focus();
+                if (hiddenFocusedIndex === 0) {
+                    setHiddenFocusedIndex(hiddenTags.length - 1);
+                }
+                else {
+                    setHiddenFocusedIndex(Math.min(hiddenFocusedIndex - 1, hiddenTags.length - 1));
+                }
+            }
+            else {
+                rootRef.current?.focus();
+                if (showedFocusedIndex === 0) {
+                    setShowedFocusedIndex(rootItems.length - 1);
+                }
+                else {
+                    setShowedFocusedIndex(Math.min(showedFocusedIndex - 1, showedTags.length - 1));
+                }
+            }
+        },
+        onFocusNext: (event) => {
+            if (interactionState.current.addOpen) {
+                return;
+            }
+            if (event.target === interactionState.current.add) {
+                return;
+            }
+            if (interactionState.current.moreOpen) {
+                hiddenTagsRef.current?.focus();
+                if (hiddenTags.length - 1 <= hiddenFocusedIndex) {
+                    setHiddenFocusedIndex(0);
+                }
+                else {
+                    setHiddenFocusedIndex(hiddenFocusedIndex + 1);
+                }
+            }
+            else {
+                rootRef.current?.focus();
+                if (rootItems.length - 1 <= showedFocusedIndex) {
+                    setShowedFocusedIndex(0);
+                }
+                else {
+                    setShowedFocusedIndex(showedFocusedIndex + 1);
+                }
+            }
+        },
+        onFocusFirst: (event) => {
+            if (interactionState.current.addOpen) {
+                return;
+            }
+            if (event.target === interactionState.current.add) {
+                return;
+            }
+            if (interactionState.current.moreOpen) {
+                hiddenTagsRef.current?.focus();
+                setHiddenFocusedIndex(0);
+            }
+            else {
+                rootRef.current?.focus();
+                setShowedFocusedIndex(0);
+            }
+        },
+        onFocusLast: (event) => {
+            if (interactionState.current.addOpen) {
+                return;
+            }
+            if (event.target === interactionState.current.add) {
+                return;
+            }
+            if (interactionState.current.moreOpen) {
+                hiddenTagsRef.current?.focus();
+                setHiddenFocusedIndex(hiddenTags.length - 1);
+            }
+            else {
+                rootRef.current?.focus();
+                setShowedFocusedIndex(rootItems.length - 1);
+            }
+        },
+        onSelect: (event) => {
+            const { button, input } = loadActiveElement(interactionState, event.target);
+            if (button) {
+                button.click();
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            // Do not handle any select if add is open
+            if (input) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            // Tags
+            if (interactionState.current.moreOpen) {
+                const item = loadActiveTag(interactionState, hiddenTags, hiddenFocusedIndex, false);
+                if (item) {
+                    item.click();
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            }
+            else {
+                const item = loadActiveTag(interactionState, showedTags, showedFocusedIndex, true);
+                if (item) {
+                    item.click();
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            }
+        },
+        onUnhandledKeyDown: (event) => {
+            //Delete
+            if (event.key === "Backspace" || event.key === "Delete") {
+                const { button, input } = loadActiveElement(interactionState, event.target);
+                if (button || input) {
+                    return;
+                }
+                if (interactionState.current.moreOpen) {
+                    const item = loadActiveTag(interactionState, hiddenTags, hiddenFocusedIndex, false);
+                    if (item) {
+                        onTagRemoveHandler(hiddenTags[hiddenFocusedIndex]);
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                }
+                else {
+                    const item = loadActiveTag(interactionState, showedTags, showedFocusedIndex, false);
+                    if (item) {
+                        onTagRemoveHandler(showedTags[showedFocusedIndex]);
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                }
+            }
+        },
+    }, {
+        shouldPreventDefault: false,
+        shouldStopPropagation: false,
+    }), [
+        hiddenTagsRef,
+        hiddenFocusedIndex,
+        hiddenTags,
+        rootRef,
+        showedFocusedIndex,
+        rootItems.length,
+        showedTags,
+        onTagRemoveHandler,
+    ]);
+    return {
+        tag,
+        setTag,
+        onAddOpen,
+        onAddClose,
+        onMoreOpen,
+        onMoreClose,
+        handleKeyDown,
+        interactionState,
+        showedFocusedIndex,
+        hiddenFocusedIndex,
+        onTagAddHandler,
+        onTagRemoveHandler,
+        onTagClickHandler,
+    };
+}
+function loadActiveTag(interactionState, tags, index, allowMore) {
+    // More
+    if (index === tags.length) {
+        if (!allowMore) {
+            return null;
+        }
+        const more = interactionState.current.more;
+        if (more) {
+            return more;
+        }
+        return null;
+    }
+    // Tag
+    const tag = tags[index];
+    const item = interactionState.current.tags[tag?.id];
+    if (item) {
+        return item;
+    }
+    return null;
+}
+function loadActiveElement(interactionState, target) {
+    const buttons = [
+        interactionState.current.add,
+        interactionState.current.close,
+        interactionState.current.save,
+    ];
+    const button = buttons.find((b) => b === target);
+    if (button) {
+        return { button };
+    }
+    // Do not handle any select if add is open
+    if (target === interactionState.current.input) {
+        return { input: interactionState.current.input };
+    }
+    return {};
+}
+//# sourceMappingURL=interactions.js.map

package/esm/@ui/UiTags/interactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactions.js","sourceRoot":"","sources":["../../../src/@ui/UiTags/interactions.ts"],"names":[],"mappings":"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"}

package/esm/@ui/UiTags/types.d.ts

@@ -0,0 +1,32 @@
+import { IAccessibilityConfigBase } from "../../typings/accessibility.js";
+/**
+ * @internal
+ */
+export interface UiTagsProps {
+    tags: Array<UiTagDef>;
+    addLabel?: string;
+    nameLabel?: string;
+    cancelLabel?: string;
+    closeLabel?: string;
+    saveLabel?: string;
+    moreLabel?: string;
+    noTagsLabel?: string;
+    removeLabel?: string;
+    readOnly?: boolean;
+    canCreateTag?: boolean;
+    canDeleteTags?: boolean;
+    mode?: "single-line" | "multi-line";
+    onTagClick?: (tag: UiTagDef) => void;
+    onTagAdd?: (tag: UiTagDef) => void;
+    onTagRemove?: (tag: UiTagDef) => void;
+    accessibilityConfig?: IAccessibilityConfigBase;
+}
+/**
+ * @internal
+ */
+export interface UiTagDef {
+    id: string;
+    label: string;
+    isDeletable?: false;
+}
+//# sourceMappingURL=types.d.ts.map