@gooddata/sdk-ui-kit 11.43.0-alpha.0 → 11.43.0-alpha.2

package/esm/@ui/UiObjectShareDialog/UiObjectShareDialogCard.d.ts

@@ -19,6 +19,8 @@ export interface IUiObjectShareDialogGrantee {
     email?: string;
     /** When true, the row is rendered with the "Owner" tag instead of controls. */
     isOwner?: boolean;
+    /** When true, the row is visually muted to signal an in-flight save. */
+    isPending?: boolean;
     /** Per-row controls — usually `UiGranteeRowControls`. Owner rows leave this empty. */
     controls?: ReactNode;
 }
@@ -34,16 +36,27 @@ export interface IUiObjectShareDialogCardProps {
     grantees: IUiObjectShareDialogGrantee[];
     /** Fires when the user clicks the + Add link in the SHARED WITH heading. */
     onAddClick: () => void;
+    /** Disables the + Add action — e.g. while the object's labels are still loading. */
+    isAddDisabled?: boolean;
     /** Selected general-access option. */
     generalAccess: GeneralAccessValue;
     /** Fires when the user picks a different general-access option. */
     onGeneralAccessChange: (value: GeneralAccessValue) => void;
+    /** Disables the general-access radio — e.g. while the access list is still loading. */
+    isGeneralAccessDisabled?: boolean;
     /**
      * Optional slot rendered next to the "All workspace members" row — typically a
      * `UiGranteeRowControls` pair for the workspace-wide labels picker
      * and permission level.
      */
     workspaceControls?: ReactNode;
+    /**
+     * Optional error notice. When set, it replaces the grantee list and
+     * general-access sections (which can't reflect a real policy on a failed
+     * load), so the dialog shows why it's empty instead of a misleading
+     * "restricted, no one has access".
+     */
+    error?: ReactNode;
     /** Test id forwarded to the root element. */
     dataTestId?: string;
 }
@@ -55,5 +68,5 @@ export interface IUiObjectShareDialogCardProps {
  *
  * @internal
  */
-export declare function UiObjectShareDialogCard({ objectTitle, onClose, grantees, onAddClick, generalAccess, onGeneralAccessChange, workspaceControls, dataTestId }: IUiObjectShareDialogCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function UiObjectShareDialogCard({ objectTitle, onClose, grantees, onAddClick, isAddDisabled, generalAccess, onGeneralAccessChange, isGeneralAccessDisabled, workspaceControls, error, dataTestId }: IUiObjectShareDialogCardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=UiObjectShareDialogCard.d.ts.map

package/esm/@ui/UiObjectShareDialog/UiObjectShareDialogCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiObjectShareDialogCard.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiObjectShareDialog/UiObjectShareDialogCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,EACH,KAAK,kBAAkB,EAE1B,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAQ/E;;;;;;GAMG;AACH,MAAM,WAAW,2BAA2B;IACxC,+DAA6D;IAC7D,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,EAAE,iBAAiB,CAAC;IACxB,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wFAAsF;IACtF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC1C,6EAA2E;IAC3E,WAAW,EAAE,MAAM,CAAC;IACpB,iFAAiF;IACjF,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,0EAA0E;IAC1E,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,4EAA4E;IAC5E,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB,sCAAsC;IACtC,aAAa,EAAE,kBAAkB,CAAC;IAClC,mEAAmE;IACnE,qBAAqB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC3D;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAE9B,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,EACpC,WAAW,EACX,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,iBAAiB,EACjB,UAAU,EACb,EAAE,6BAA6B,2CAiD/B"}
+{"version":3,"file":"UiObjectShareDialogCard.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiObjectShareDialog/UiObjectShareDialogCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,OAAO,EACH,KAAK,kBAAkB,EAE1B,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAQ/E;;;;;;GAMG;AACH,MAAM,WAAW,2BAA2B;IACxC,+DAA6D;IAC7D,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,EAAE,iBAAiB,CAAC;IACxB,oBAAoB;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wFAAsF;IACtF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC1C,6EAA2E;IAC3E,WAAW,EAAE,MAAM,CAAC;IACpB,iFAAiF;IACjF,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,0EAA0E;IAC1E,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,4EAA4E;IAC5E,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,sFAAoF;IACpF,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,sCAAsC;IACtC,aAAa,EAAE,kBAAkB,CAAC;IAClC,mEAAmE;IACnE,qBAAqB,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC3D,yFAAuF;IACvF,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAE9B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,EACpC,WAAW,EACX,OAAO,EACP,QAAQ,EACR,UAAU,EACV,aAAa,EACb,aAAa,EACb,qBAAqB,EACrB,uBAAuB,EACvB,iBAAiB,EACjB,KAAK,EACL,UAAU,EACb,EAAE,6BAA6B,2CA8D/B"}

package/esm/@ui/UiObjectShareDialog/UiObjectShareDialogCard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
 import { commonDialogMessages, olpObjectShareDialogMessages } from "../../locales.js";
 import { bem } from "../@utils/bem.js";
@@ -17,10 +17,12 @@ const { b, e } = bem("gd-ui-kit-object-share-dialog");
  *
  * @internal
  */
-export function UiObjectShareDialogCard({ objectTitle, onClose, grantees, onAddClick, generalAccess, onGeneralAccessChange, workspaceControls, dataTestId, }) {
+export function UiObjectShareDialogCard({ objectTitle, onClose, grantees, onAddClick, isAddDisabled, generalAccess, onGeneralAccessChange, isGeneralAccessDisabled, workspaceControls, error, dataTestId, }) {
     const intl = useIntl();
     const dialogTitle = intl.formatMessage(olpObjectShareDialogMessages.title, { title: objectTitle });
     return (_jsxs("div", { className: b(), "data-testid": dataTestId, children: [
-            _jsx(UiDialogHeader, { title: dialogTitle, onClose: onClose }), _jsx(UiSectionHeading, { label: intl.formatMessage(olpObjectShareDialogMessages.sharedWith), action: _jsx(UiButton, { label: intl.formatMessage(olpObjectShareDialogMessages.add), variant: "popout", size: "small", iconBefore: "plus", onClick: onAddClick }) }), _jsx("div", { className: e("grantees"), children: grantees.map((grantee) => (_jsx(UiGranteeRow, { kind: grantee.kind, name: grantee.name, email: grantee.email, isOwner: grantee.isOwner, controls: grantee.controls }, grantee.id))) }), _jsx(UiSectionHeading, { label: intl.formatMessage(olpObjectShareDialogMessages.generalAccess) }), _jsx(UiGeneralAccessRadio, { value: generalAccess, onChange: onGeneralAccessChange, workspaceControls: workspaceControls }), _jsx(UiDialogFooter, { divider: true, children: _jsx(UiButton, { label: intl.formatMessage(commonDialogMessages.close), variant: "secondary", size: "medium", onClick: onClose }) })
+            _jsx(UiDialogHeader, { title: dialogTitle, onClose: onClose }), error ? (_jsx("div", { className: e("error"), role: "alert", children: error })) : (_jsxs(_Fragment, { children: [
+                    _jsx(UiSectionHeading, { label: intl.formatMessage(olpObjectShareDialogMessages.sharedWith), action: _jsx(UiButton, { label: intl.formatMessage(olpObjectShareDialogMessages.add), variant: "popout", size: "small", iconBefore: "plus", isDisabled: isAddDisabled, onClick: onAddClick }) }), _jsx("div", { className: e("grantees"), children: grantees.map((grantee) => (_jsx(UiGranteeRow, { kind: grantee.kind, name: grantee.name, email: grantee.email, isOwner: grantee.isOwner, isPending: grantee.isPending, controls: grantee.controls }, grantee.id))) }), _jsx(UiSectionHeading, { label: intl.formatMessage(olpObjectShareDialogMessages.generalAccess) }), _jsx(UiGeneralAccessRadio, { value: generalAccess, onChange: onGeneralAccessChange, disabled: isGeneralAccessDisabled, workspaceControls: workspaceControls })
+                ] })), _jsx(UiDialogFooter, { divider: true, children: _jsx(UiButton, { label: intl.formatMessage(commonDialogMessages.close), variant: "secondary", size: "medium", onClick: onClose }) })
         ] }));
 }

package/esm/@ui/UiPermissionMenu/UiPermissionMenu.d.ts

@@ -15,18 +15,6 @@ export interface IUiPermissionMenuProps {
     selectedLevel?: PermissionMenuLevel;
     /** Fires when the user picks a permission level. */
     onPermissionChange: (level: PermissionMenuLevel) => void;
-    /** Fires when the user picks Transfer ownership. */
-    onTransferOwnership?: () => void;
-    /**
-     * Fires when the user picks the Labels entry. Display the count via
-     * `labelsCounter`.
-     */
-    onLabelsClick?: () => void;
-    /**
-     * Counter shown next to the Labels row (e.g. `"4/4"`). Hidden
-     * if omitted.
-     */
-    labelsCounter?: string;
     /** Fires when the user picks Remove access. */
     onRemoveAccess?: () => void;
     /** Test id forwarded to the menu body. */
@@ -35,10 +23,11 @@ export interface IUiPermissionMenuProps {
 /**
  * Per-grantee permission popover. Renders a fixed set of rows — two
  * permission levels (Can view & share / Can view), an optional divider,
- * and optional Transfer ownership / Labels / Remove access action rows.
- * Each level row carries an `infoCircle` tooltip.
+ * and an optional Remove access action row. Each level row carries an
+ * `infoCircle` tooltip. Labels and Transfer ownership live in the separate
+ * {@link UiMoreOptionsMenu}.
  *
  * @internal
  */
-export declare function UiPermissionMenu({ anchor, selectedLevel, onPermissionChange, onTransferOwnership, onLabelsClick, labelsCounter, onRemoveAccess, dataTestId }: IUiPermissionMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function UiPermissionMenu({ anchor, selectedLevel, onPermissionChange, onRemoveAccess, dataTestId }: IUiPermissionMenuProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=UiPermissionMenu.d.ts.map

package/esm/@ui/UiPermissionMenu/UiPermissionMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiPermissionMenu.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiPermissionMenu/UiPermissionMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,YAAY,EAAU,MAAM,OAAO,CAAC;AAYtE;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACnC,4CAA4C;IAC5C,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IAC1B,qEAAmE;IACnE,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,oDAAoD;IACpD,kBAAkB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzD,oDAAoD;IACpD,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAiBD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,EACb,aAAa,EACb,cAAc,EACd,UAAU,EACb,EAAE,sBAAsB,2CAoBxB"}
+{"version":3,"file":"UiPermissionMenu.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiPermissionMenu/UiPermissionMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,YAAY,EAAU,MAAM,OAAO,CAAC;AActE;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACnC,4CAA4C;IAC5C,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IAC1B,qEAAmE;IACnE,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,oDAAoD;IACpD,kBAAkB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACzD,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,UAAU,EACb,EAAE,sBAAsB,2CAiBxB"}

package/esm/@ui/UiPermissionMenu/UiPermissionMenu.js

@@ -4,6 +4,7 @@ import { useRef } from "react";
 import { useIntl } from "react-intl";
 import { olpPermissionMessages } from "../../locales.js";
 import { bem } from "../@utils/bem.js";
+import { UiIcon } from "../UiIcon/UiIcon.js";
 import { UiIconButton } from "../UiIconButton/UiIconButton.js";
 import { UiPopover } from "../UiPopover/UiPopover.js";
 import { UiTooltip } from "../UiTooltip/UiTooltip.js";
@@ -11,15 +12,16 @@ const { b, e } = bem("gd-ui-kit-permission-menu");
 /**
  * Per-grantee permission popover. Renders a fixed set of rows — two
  * permission levels (Can view & share / Can view), an optional divider,
- * and optional Transfer ownership / Labels / Remove access action rows.
- * Each level row carries an `infoCircle` tooltip.
+ * and an optional Remove access action row. Each level row carries an
+ * `infoCircle` tooltip. Labels and Transfer ownership live in the separate
+ * {@link UiMoreOptionsMenu}.
  *
  * @internal
  */
-export function UiPermissionMenu({ anchor, selectedLevel, onPermissionChange, onTransferOwnership, onLabelsClick, labelsCounter, onRemoveAccess, dataTestId, }) {
-    return (_jsx(UiPopover, { anchor: anchor, anchorAccessibilityConfig: { ariaHaspopup: "menu" }, width: 180, content: ({ onClose }) => (_jsx(MenuBody, { selectedLevel: selectedLevel, onPermissionChange: onPermissionChange, onTransferOwnership: onTransferOwnership, onLabelsClick: onLabelsClick, labelsCounter: labelsCounter, onRemoveAccess: onRemoveAccess, onClose: onClose, dataTestId: dataTestId })) }));
+export function UiPermissionMenu({ anchor, selectedLevel, onPermissionChange, onRemoveAccess, dataTestId, }) {
+    return (_jsx(UiPopover, { anchor: anchor, anchorAccessibilityConfig: { ariaHaspopup: "menu" }, width: 180, content: ({ onClose }) => (_jsx(MenuBody, { selectedLevel: selectedLevel, onPermissionChange: onPermissionChange, onRemoveAccess: onRemoveAccess, onClose: onClose, dataTestId: dataTestId })) }));
 }
-function MenuBody({ selectedLevel, onPermissionChange, onTransferOwnership, onLabelsClick, labelsCounter, onRemoveAccess, onClose, dataTestId, }) {
+function MenuBody({ selectedLevel, onPermissionChange, onRemoveAccess, onClose, dataTestId, }) {
     const intl = useIntl();
     const choose = (next) => () => {
         next();
@@ -42,25 +44,11 @@ function MenuBody({ selectedLevel, onPermissionChange, onTransferOwnership, onLa
         },
     ];
     const actionItems = [];
-    if (onTransferOwnership) {
-        actionItems.push({
-            key: "transfer",
-            label: intl.formatMessage(olpPermissionMessages.transferOwnership),
-            onClick: choose(onTransferOwnership),
-        });
-    }
-    if (onLabelsClick) {
-        actionItems.push({
-            key: "labels",
-            label: intl.formatMessage(olpPermissionMessages.labels),
-            counter: labelsCounter,
-            onClick: choose(onLabelsClick),
-        });
-    }
     if (onRemoveAccess) {
         actionItems.push({
             key: "remove",
             label: intl.formatMessage(olpPermissionMessages.removeAccess),
+            icon: "trash",
             onClick: choose(onRemoveAccess),
         });
     }
@@ -99,13 +87,13 @@ function PermissionMenuItem({ item, selectedLevel }) {
     const intl = useIntl();
     // Tooltip anchor must live OUTSIDE the menu-item button so we don't nest an
     // interactive element inside a button (invalid HTML, breaks focus). The row
-    // wrapper provides the flex layout; the button covers label + counter; the
+    // wrapper provides the flex layout; the button covers the label; the
     // tooltip sits next to the button.
     const isRadio = !!item.radioValue;
     const isChecked = isRadio && item.radioValue === selectedLevel;
     return (_jsxs("div", { className: e("item-row"), children: [
-            _jsxs("button", { type: "button", role: isRadio ? "menuitemradio" : "menuitem", "aria-checked": isRadio ? isChecked : undefined, className: e("item"), onClick: item.onClick, children: [
-                    _jsx("span", { className: e("item-label"), children: item.label }), item.counter ? _jsx("span", { className: e("item-counter"), children: item.counter }) : null] }), item.tooltip ? (_jsx(UiTooltip, { triggerBy: ["hover", "focus"], content: item.tooltip, anchor: _jsx(UiIconButton, { icon: "infoCircle", variant: "tertiary", size: "small", accessibilityConfig: {
+            _jsxs("button", { type: "button", role: isRadio ? "menuitemradio" : "menuitem", "aria-checked": isRadio ? isChecked : undefined, className: e("item"), onClick: item.onClick, children: [item.icon ? _jsx(UiIcon, { type: item.icon, size: 16, color: "complementary-7" }) : null, _jsx("span", { className: e("item-label"), children: item.label })
+                ] }), item.tooltip ? (_jsx(UiTooltip, { triggerBy: ["hover", "focus"], content: item.tooltip, anchor: _jsx(UiIconButton, { icon: "infoCircle", variant: "tertiary", size: "small", accessibilityConfig: {
                         ariaLabel: intl.formatMessage(olpPermissionMessages.moreInfoAriaLabel, {
                             label: item.label,
                         }),

package/esm/@ui/UiPopover/UiPopover.d.ts

@@ -27,10 +27,29 @@ export interface IUiPopoverProps {
     content?: ReactNode | ((args: {
         onClose: () => void;
     }) => ReactNode);
+    /**
+     * Padding around the content surface. Defaults to `"default"`. Use `"none"`
+     * for edge-to-edge content whose own children carry their inset (e.g. a list
+     * of full-bleed rows); the surface then also stretches the content to its
+     * full width.
+     */
+    contentPadding?: "default" | "none";
     footer?: ReactNode | ((args: {
         onClose: () => void;
     }) => ReactNode);
     triggerBy?: IUiTooltipProps["triggerBy"];
+    /**
+     * Where the popover sits relative to its anchor (the arrow side; the panel
+     * opens on the opposite side). Defaults to `"top-start"` — i.e. the panel
+     * opens below the anchor, left-aligned.
+     */
+    arrowPlacement?: IUiTooltipProps["arrowPlacement"];
+    /**
+     * Allow the popover to flip to the opposite side when the preferred side
+     * would overflow. Defaults to `true`. Set `false` to pin it to
+     * `arrowPlacement` (e.g. an anchor that should always open downward).
+     */
+    optimalPlacement?: boolean;
     closeText?: string;
     closeVisible?: boolean;
     initialFocus?: RefObject<HTMLElement> | string;
@@ -46,11 +65,20 @@ export interface IUiPopoverProps {
      * When true, uses UiFocusManager's focus trap instead of tabOutHandler
      */
     enableFocusTrap?: boolean;
+    /**
+     * Controls the open state. When set, the popover ignores anchor clicks and
+     * opens/closes purely from this prop; pair with `onOpenChange` to
+     * react to outside-click / Escape. When omitted the popover stays
+     * uncontrolled and opens on anchor click as before.
+     */
+    isOpen?: boolean;
+    /** Fires when an interaction (outside-click, Escape) requests an open-state change. */
+    onOpenChange?: (open: boolean) => void;
     onOpen?: () => void;
     onClose?: () => void;
 }
 /**
  * @internal
  */
-export declare function UiPopover({ id, accessibilityConfig, anchor, anchorAccessibilityConfig, width, title, tabIndex, disabled, content, footer, closeText, closeVisible, initialFocus, returnFocusTo, triggerBy, returnFocusAfterClose, focusCheckFn, enableFocusTrap, onOpen, onClose }: IUiPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function UiPopover({ id, accessibilityConfig, anchor, anchorAccessibilityConfig, width, title, tabIndex, disabled, content, contentPadding, footer, closeText, closeVisible, initialFocus, returnFocusTo, triggerBy, arrowPlacement, optimalPlacement, returnFocusAfterClose, focusCheckFn, enableFocusTrap, isOpen, onOpenChange, onOpen, onClose }: IUiPopoverProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=UiPopover.d.ts.map

package/esm/@ui/UiPopover/UiPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiPopover.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiPopover/UiPopover.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,KAAK,cAAc,EAEnB,KAAK,YAAY,EACjB,KAAK,SAAS,EAGd,KAAK,SAAS,EAIjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAM/E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAqB7D;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IAC1B;;;;;;;OAOG;IACH,yBAAyB,CAAC,EAAE;QACxB,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;QACvE,YAAY,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;KAClD,CAAC;IACF,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACrE,MAAM,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACpE,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;IAC/C,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;IAChD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACtB,EAAE,EACF,mBAAgD,EAChD,MAAM,EACN,yBAAyB,EACzB,KAAiB,EACjB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,SAAqB,EACrB,qBAA4B,EAC5B,YAAkC,EAClC,eAAuB,EACvB,MAAM,EACN,OAAO,EACV,EAAE,eAAe,2CA4GjB"}
+{"version":3,"file":"UiPopover.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiPopover/UiPopover.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,KAAK,cAAc,EAEnB,KAAK,YAAY,EACjB,KAAK,SAAS,EAGd,KAAK,SAAS,EAIjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAM/E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAqB7D;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC;IAC1B;;;;;;;OAOG;IACH,yBAAyB,CAAC,EAAE;QACxB,YAAY,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;QACvE,YAAY,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;KAClD,CAAC;IACF,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACrE;;;;;OAKG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACpC,MAAM,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACpE,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC;;;;OAIG;IACH,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAC;IACnD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;IAC/C,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;IAChD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC;IACjD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uFAAuF;IACvF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACtB,EAAE,EACF,mBAAgD,EAChD,MAAM,EACN,yBAAyB,EACzB,KAAiB,EACjB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,cAA0B,EAC1B,MAAM,EACN,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,SAAqB,EACrB,cAA4B,EAC5B,gBAAuB,EACvB,qBAA4B,EAC5B,YAAkC,EAClC,eAAuB,EACvB,MAAM,EACN,YAAY,EACZ,MAAM,EACN,OAAO,EACV,EAAE,eAAe,2CA8GjB"}

package/esm/@ui/UiPopover/UiPopover.js

@@ -23,7 +23,7 @@ function buildAnchorAriaAttrs(cfg) {
 /**
  * @internal
  */
-export function UiPopover({ id, accessibilityConfig = defaultAccessibilityConfig, anchor, anchorAccessibilityConfig, width = "default", title, tabIndex, disabled, content, footer, closeText, closeVisible, initialFocus, returnFocusTo, triggerBy = ["click"], returnFocusAfterClose = true, focusCheckFn = defaultFocusCheckFn, enableFocusTrap = false, onOpen, onClose, }) {
+export function UiPopover({ id, accessibilityConfig = defaultAccessibilityConfig, anchor, anchorAccessibilityConfig, width = "default", title, tabIndex, disabled, content, contentPadding = "default", footer, closeText, closeVisible, initialFocus, returnFocusTo, triggerBy = ["click"], arrowPlacement = "top-start", optimalPlacement = true, returnFocusAfterClose = true, focusCheckFn = defaultFocusCheckFn, enableFocusTrap = false, isOpen, onOpenChange, onOpen, onClose, }) {
     const ref = useRef(null);
     const returnFocus = useMemo(() => {
         return returnFocusTo ?? ref;
@@ -35,7 +35,7 @@ export function UiPopover({ id, accessibilityConfig = defaultAccessibilityConfig
     // popovers (e.g. UiPermissionMenu) emit a dangling reference. Caller-supplied
     // ariaLabel / ariaLabelledBy in accessibilityConfig still takes precedence.
     const titleLabelledBy = title ? titleId : undefined;
-    return (_jsx(UiTooltip, { onOpen: onOpen, onClose: onClose, accessibilityConfig: {
+    return (_jsx(UiTooltip, { isOpen: isOpen, onOpenChange: onOpenChange, onOpen: onOpen, onClose: onClose, accessibilityConfig: {
             ariaLabelledBy: titleLabelledBy,
             ...accessibilityConfig,
             role: "dialog",
@@ -56,8 +56,8 @@ export function UiPopover({ id, accessibilityConfig = defaultAccessibilityConfig
                         onClose();
                     }, children: _jsxs("div", { id: id ?? currentId, tabIndex: 0, className: b(), style: { width: width === "default" ? undefined : width }, children: [title || closeVisible ? (_jsxs("div", { className: e("header"), children: [title ? (typeof title === "string" ? (_jsx("div", { id: titleId, className: e("header-title"), children: title })) : (_jsx("div", { id: titleId, children: title }))) : null, closeVisible ? (_jsx("div", { className: e("header-close"), children: _jsx(UiButton, { label: "", size: "small", variant: "tertiary", iconBefore: "close", accessibilityConfig: {
                                             ariaLabel: closeText,
-                                        }, onClick: onClose }) })) : null] })) : null, content ? (_jsx("div", { className: e("content"), children: typeof content === "function" ? content({ onClose }) : content })) : null, footer ? (_jsx("div", { className: e("footer"), children: typeof footer === "function" ? footer({ onClose }) : footer })) : null] }) }));
-        }, variant: "none", behaviour: "popover", triggerBy: triggerBy, showArrow: false, optimalPlacement: true, arrowPlacement: "top-start", disabled: disabled }));
+                                        }, onClick: onClose }) })) : null] })) : null, content ? (_jsx("div", { className: e("content", { padding: contentPadding }), children: typeof content === "function" ? content({ onClose }) : content })) : null, footer ? (_jsx("div", { className: e("footer"), children: typeof footer === "function" ? footer({ onClose }) : footer })) : null] }) }));
+        }, variant: "none", behaviour: "popover", triggerBy: triggerBy, showArrow: false, optimalPlacement: optimalPlacement, arrowPlacement: arrowPlacement, disabled: disabled }));
 }
 function mergeRefs(...refs) {
     return (value) => {

package/esm/@ui/UiTag/UiTag.d.ts

@@ -26,6 +26,7 @@ export type UiTagProps = {
     onDeleteKeyDown?: (event: KeyboardEvent<HTMLButtonElement>) => void;
     tabIndex?: number;
     deleteTabIndex?: number;
+    labelAs?: "button" | "span";
 };
 /**
  * @internal

package/esm/@ui/UiTag/UiTag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiTag.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTag/UiTag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAyC,MAAM,OAAO,CAAC;AAEnG,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAO3D;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACvE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IAC7C,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,0GA0FhB,CAAC"}
+{"version":3,"file":"UiTag.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTag/UiTag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAyC,MAAM,OAAO,CAAC;AAEnG,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AAC/E,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAO3D;;GAEG;AACH,MAAM,WAAW,yBAA0B,SAAQ,wBAAwB;IACvE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;IAC7C,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,0GA8GhB,CAAC"}

package/esm/@ui/UiTag/UiTag.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // (C) 2025-2026 GoodData Corporation
 import { forwardRef, useLayoutEffect, useState } from "react";
 import { bem } from "../@utils/bem.js";
@@ -8,7 +8,7 @@ const { b, e } = bem("gd-ui-kit-tag");
 /**
  * @internal
  */
-export const UiTag = forwardRef(function UiTag({ label, size = "small", variant = "solid", iconBefore, iconBeforeColor, tabIndex, deleteTabIndex, accessibilityConfig, isDisabled, isDeletable, dataTestId, onClick, onDelete, onDeleteKeyDown, }, ref) {
+export const UiTag = forwardRef(function UiTag({ label, size = "small", variant = "solid", iconBefore, iconBeforeColor, tabIndex, deleteTabIndex, accessibilityConfig, isDisabled, isDeletable, dataTestId, labelAs, onClick, onDelete, onDeleteKeyDown, }, ref) {
     const [labelRef, setLabelRef] = useState(null);
     const [hasTooltip, setHasTooltip] = useState(false);
     const { ariaLabel, ariaLabelledBy, deleteAriaLabel } = accessibilityConfig ?? {};
@@ -23,7 +23,13 @@ export const UiTag = forwardRef(function UiTag({ label, size = "small", variant
     const iconSize = size === "small" ? 14 : 16;
     const defaultIconColor = variant === "decorated" ? "complementary-0" : "complementary-6";
     const iconColor = iconBeforeColor ?? defaultIconColor;
-    const button = (_jsxs("button", { ref: ref, tabIndex: tabIndex, "data-testid": dataTestId, className: e("trigger", { isDeletable: isDeletable ?? false, isDisabled: isDisabled ?? false }), disabled: isDisabled, "aria-disabled": isDisabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onClick: onClick, children: [iconBefore ? (_jsx("span", { className: e("icon-before"), children: _jsx(UiIcon, { type: iconBefore, size: iconSize, color: iconColor }) })) : null, _jsx("span", { className: e("label"), ref: setLabelRef, children: label })
+    const labelIsButton = labelAs ? labelAs === "button" : onClick !== undefined;
+    const labelClassName = e("trigger", {
+        isDeletable: isDeletable ?? false,
+        isDisabled: isDisabled ?? false,
+    });
+    const labelInner = (_jsxs(_Fragment, { children: [iconBefore ? (_jsx("span", { className: e("icon-before"), children: _jsx(UiIcon, { type: iconBefore, size: iconSize, color: iconColor }) })) : null, _jsx("span", { className: e("label"), ref: setLabelRef, children: label })
         ] }));
-    return (_jsxs("div", { className: b({ size, variant }), children: [hasTooltip ? (_jsx(UiTooltip, { anchor: button, content: _jsx("div", { className: e("tooltip"), children: label }), triggerBy: ["hover"], arrowPlacement: "top" })) : (button), isDeletable && !isDisabled ? (_jsx("button", { tabIndex: deleteTabIndex, "data-testid": dataTestId ? `${dataTestId}-delete-button` : undefined, "aria-label": deleteAriaLabel, className: e("delete"), onClick: onDelete, onKeyDown: onDeleteKeyDown, children: _jsx("span", { className: e("icon-delete"), children: _jsx(UiIcon, { size: 14, type: "cross", color: variant === "decorated" ? "complementary-0" : "complementary-6" }) }) })) : null] }));
+    const labelElement = labelIsButton ? (_jsx("button", { ref: ref, tabIndex: tabIndex, "data-testid": dataTestId, className: labelClassName, disabled: isDisabled, "aria-disabled": isDisabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onClick: onClick, children: labelInner })) : (_jsx("span", { className: labelClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": dataTestId, children: labelInner }));
+    return (_jsxs("div", { className: b({ size, variant }), children: [hasTooltip ? (_jsx(UiTooltip, { anchor: labelElement, content: _jsx("div", { className: e("tooltip"), children: label }), triggerBy: ["hover"], arrowPlacement: "top" })) : (labelElement), isDeletable && !isDisabled ? (_jsx("button", { tabIndex: deleteTabIndex, "data-testid": dataTestId ? `${dataTestId}-delete-button` : undefined, "aria-label": deleteAriaLabel, className: e("delete"), onClick: onDelete, onKeyDown: onDeleteKeyDown, children: _jsx("span", { className: e("icon-delete"), children: _jsx(UiIcon, { size: 14, type: "cross", color: variant === "decorated" ? "complementary-0" : "complementary-6" }) }) })) : null] }));
 });

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

@@ -3,9 +3,7 @@ export interface IUiTagProps {
     tag: IUiTagDef;
     isDeletable: boolean;
     deleteLabel?: string;
-    isReadOnly?: boolean;
     isDisabled?: boolean;
-    isFocused?: boolean;
     size?: "small" | "large";
     onDelete?: (tag: IUiTagDef) => void;
     onClick?: (tag: IUiTagDef) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"UiTag.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTags/UiTag.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAI5C,MAAM,WAAW,WAAW;IACxB,GAAG,EAAE,SAAS,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,KAAK,2GA+BhB,CAAC"}
+{"version":3,"file":"UiTag.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTags/UiTag.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAI5C,MAAM,WAAW,WAAW;IACxB,GAAG,EAAE,SAAS,CAAC;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,KAAK,2GA6ChB,CAAC"}

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

@@ -4,16 +4,21 @@ import { forwardRef } from "react";
 import { bem } from "../@utils/bem.js";
 import { UiTag as UiTagComponent } from "../UiTag/UiTag.js";
 const { e } = bem("gd-ui-kit-tags");
-export const UiTag = forwardRef(function UiTag({ tag, maxWidth, isDeletable, isDisabled, isFocused, size, deleteLabel, onDelete, onClick }, ref) {
+export const UiTag = forwardRef(function UiTag({ tag, maxWidth, isDeletable, isDisabled, size, deleteLabel, onDelete, onClick }, ref) {
     const canBeDeleted = isDeletable && (tag.isDeletable ?? true);
-    return (_jsx("div", { className: e("tag", { isFocused: isFocused ?? false }), role: "listitem", style: { maxWidth }, children: _jsx(UiTagComponent, { ref: ref, tabIndex: -1, deleteTabIndex: -1, label: `${tag.label}`, size: size, iconBefore: tag.iconBefore, isDeletable: canBeDeleted, isDisabled: isDisabled, accessibilityConfig: {
+    const isClickable = onClick !== undefined;
+    return (_jsx("div", { className: e("tag"), style: { maxWidth }, "data-tag-id": tag.id, tabIndex: -1, "aria-label": tag.label, children: _jsx(UiTagComponent, { ref: isClickable ? ref : undefined, labelAs: isClickable ? "button" : "span", label: `${tag.label}`, size: size, iconBefore: tag.iconBefore, isDeletable: canBeDeleted, isDisabled: isDisabled, accessibilityConfig: {
                 ariaLabel: tag.label,
                 deleteAriaLabel: `${deleteLabel ?? "Delete"} ${tag.label}`,
-            }, onDelete: (e) => {
-                onDelete?.(tag);
-                e.stopPropagation();
-            }, onClick: (e) => {
-                onClick?.(tag);
-                e.stopPropagation();
-            } }) }));
+            }, onDelete: canBeDeleted
+                ? (e) => {
+                    onDelete?.(tag);
+                    e.stopPropagation();
+                }
+                : undefined, onClick: isClickable
+                ? (e) => {
+                    onClick(tag);
+                    e.stopPropagation();
+                }
+                : undefined }) }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"UiTags.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTags/UiTags.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAO/D;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACnB,IAAI,EACJ,UAAU,EACV,QAAoB,EACpB,SAAkB,EAClB,WAAsB,EACtB,UAAoB,EACpB,SAAkB,EAClB,WAAuB,EACvB,SAAuB,EACvB,WAAsB,EACtB,cAA+B,EAC/B,IAAoB,EACpB,IAAc,EACd,aAAoB,EACpB,YAAmB,EACnB,QAAgB,EAChB,UAAqB,EACrB,QAAmB,EACnB,WAAsB,EACtB,mBAAgD,EAChD,eAAe,EAClB,EAAE,YAAY,2CAmUd"}
+{"version":3,"file":"UiTags.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTags/UiTags.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAO/D;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACnB,IAAI,EACJ,UAAU,EACV,QAAoB,EACpB,SAAkB,EAClB,WAAsB,EACtB,UAAoB,EACpB,SAAkB,EAClB,WAAuB,EACvB,SAAuB,EACvB,WAAsB,EACtB,cAA+B,EAC/B,IAAoB,EACpB,IAAc,EACd,aAAoB,EACpB,YAAmB,EACnB,QAAgB,EAChB,UAAU,EACV,QAAmB,EACnB,WAAsB,EACtB,mBAAgD,EAChD,eAAe,EAClB,EAAE,YAAY,2CAuVd"}

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

@@ -9,6 +9,7 @@ import { UiComboboxList } from "../UiCombobox/UiComboboxList.js";
 import { UiComboboxListItem, UiComboboxListItemCreatableLabel, UiComboboxListItemLabel, } from "../UiCombobox/UiComboboxListItem.js";
 import { UiComboboxPopup } from "../UiCombobox/UiComboboxPopup.js";
 import { UiPopover } from "../UiPopover/UiPopover.js";
+import { UiTooltip } from "../UiTooltip/UiTooltip.js";
 import { useResponsiveTags } from "./hooks/useResponsiveTags.js";
 import { useTagsInteractions } from "./interactions.js";
 import { UiTag } from "./UiTag.js";
@@ -17,7 +18,7 @@ const defaultAccessibilityConfig = {};
 /**
  * @internal
  */
-export function UiTags({ tags, tagOptions, addLabel = "Add tag", nameLabel = "Name", cancelLabel = "Cancel", closeLabel = "Close", saveLabel = "Save", noTagsLabel = "No tags", moreLabel = "More tags", removeLabel = "Remove", creatableLabel = "(Create new)", mode = "single-line", size = "small", canDeleteTags = true, canCreateTag = true, readOnly = false, onTagClick = () => { }, onTagAdd = () => { }, onTagRemove = () => { }, accessibilityConfig = defaultAccessibilityConfig, renderAddButton, }) {
+export function UiTags({ tags, tagOptions, addLabel = "Add tag", nameLabel = "Name", cancelLabel = "Cancel", closeLabel = "Close", saveLabel = "Save", noTagsLabel = "No tags", moreLabel = "More tags", removeLabel = "Remove", creatableLabel = "(Create new)", mode = "single-line", size = "small", canDeleteTags = true, canCreateTag = true, readOnly = false, onTagClick, onTagAdd = () => { }, onTagRemove = () => { }, accessibilityConfig = defaultAccessibilityConfig, renderAddButton, }) {
     const inputRef = useRef(null);
     const [popupOpen, setPopupOpen] = useState(false);
     const popupId = useId();
@@ -27,7 +28,13 @@ export function UiTags({ tags, tagOptions, addLabel = "Add tag", nameLabel = "Na
     const isAddable = canCreateTag && !readOnly && !hasCustomAddButton;
     const { rootRef, showedTags, hiddenTags, tagsContainerRef, hiddenTagsContainerRef, tooltipTagsContainerRef, addButtonRef, allContainerRef, tooltipWidth, availableWidth, lastAvailableWidth, setTooltipContainer, } = useResponsiveTags(tags, mode, [canCreateTag, canDeleteTags, readOnly, hasCustomAddButton]);
     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);
+    const { interactionState, onAddOpen, onAddClose, onMoreOpen, onMoreClose, tag, setTag, onTagClickHandler, onTagRemoveHandler, onTagAddHandler, } = useTagsInteractions(tagsContainerRef, tooltipTagsContainerRef, showedTags, hiddenTags, onTagAdd, onTagRemove, onTagClick);
+    const [morePopoverOpen, setMorePopoverOpen] = useState(false);
+    const morePopoverId = useId();
+    const groupLabelId = useId();
+    const hasTagClickHandler = onTagClick !== undefined;
+    const groupLabelledBy = accessibilityConfig?.ariaLabelledBy ?? groupLabelId;
+    const groupLabelText = accessibilityConfig?.ariaLabel ?? (tags.length === 1 ? "Tags, 1" : `Tags, ${tags.length}`);
     const comboboxOptions = useMemo(() => {
         if (!tagOptions) {
             return [];
@@ -37,36 +44,44 @@ export function UiTags({ tags, tagOptions, addLabel = "Add tag", nameLabel = "Na
             .filter((tagOption) => !tagIds.has(tagOption.id))
             .map((tagOption) => ({ id: tagOption.id, label: tagOption.label }));
     }, [tagOptions, tags]);
-    return (_jsxs("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, role: accessibilityConfig?.role ?? "list", children: [
-            _jsx("div", { className: e("shadow-container"), ref: allContainerRef, children: tags.map((tag) => {
+    return (_jsxs("div", { ref: rootRef, className: b({ readOnly, mode }), "aria-labelledby": groupLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, role: accessibilityConfig?.role ?? "group", children: [accessibilityConfig?.ariaLabelledBy ? null : (_jsx("span", { className: "sr-only", id: groupLabelId, children: groupLabelText })), _jsx("div", { className: e("shadow-container"), ref: allContainerRef, children: tags.map((tag) => {
                     return (_jsx(UiTag, { tag: tag, isDeletable: isDeletable, size: size }, getKey(tag, isDeletable, readOnly)));
                 }) }), _jsxs("div", { className: e("tags-container"), ref: tagsContainerRef, children: [items.map((tag, i) => {
                         if (Array.isArray(tag)) {
                             if (hiddenTags.length === 0) {
                                 return null;
                             }
-                            return (_jsx("div", { role: "listitem", className: e("hidden-tags", { isFocused: showedFocusedIndex === i }), onClick: (e) => {
+                            return (_jsx("div", { className: e("hidden-tags"), onClick: (e) => {
                                     e.stopPropagation();
                                     e.preventDefault();
-                                }, children: hiddenTags.length > 0 ? (_jsx(UiPopover, { onOpen: onMoreOpen, onClose: onMoreClose, enableFocusTrap: true, initialFocus: tooltipTagsContainerRef, returnFocusTo: rootRef, anchor: _jsx(UiButton, { tabIndex: -1, label: `+${hiddenTags.length}`, size: "small", variant: "tertiary", ref: (ref) => {
+                                }, children: hiddenTags.length > 0 ? (_jsx(UiPopover, { id: morePopoverId, onOpen: () => {
+                                        setMorePopoverOpen(true);
+                                        onMoreOpen();
+                                    }, onClose: () => {
+                                        setMorePopoverOpen(false);
+                                        onMoreClose();
+                                    }, enableFocusTrap: true, initialFocus: tooltipTagsContainerRef, returnFocusTo: hiddenTagsContainerRef, anchorAccessibilityConfig: {
+                                        ariaHaspopup: "dialog",
+                                        ariaControls: morePopoverId,
+                                    }, anchor: _jsx(UiButton, { label: `+${hiddenTags.length}`, size: "small", variant: "tertiary", accessibilityConfig: {
+                                            ariaLabel: moreLabel,
+                                            ariaExpanded: morePopoverOpen,
+                                        }, ref: (ref) => {
                                             hiddenTagsContainerRef.current = ref;
-                                            interactionState.current.more = ref;
-                                        } }), width: 300, title: moreLabel, content: () => (_jsx("div", { onKeyDown: handleKeyDown, className: e("tags-more-tooltip"), ref: (ref) => {
+                                        } }), width: 300, title: moreLabel, content: () => (_jsx("div", { className: e("tags-more-tooltip"), ref: (ref) => {
                                             tooltipTagsContainerRef.current = ref;
                                             setTooltipContainer(ref);
-                                        }, tabIndex: 0, children: hiddenTags.map((tag, i) => {
-                                            return (_jsx(UiTag, { tag: tag, deleteLabel: removeLabel, ref: (ref) => {
-                                                    interactionState.current.tags[tag.id] = ref;
-                                                }, isDeletable: isDeletable, isDisabled: readOnly, isFocused: hiddenFocusedIndex === i, size: size, maxWidth: tooltipWidth, onDelete: onTagRemoveHandler, onClick: onTagClickHandler }, i));
+                                        }, children: hiddenTags.map((tag, i) => {
+                                            return (_jsx(UiTag, { tag: tag, deleteLabel: removeLabel, isDeletable: isDeletable, isDisabled: readOnly, size: size, maxWidth: tooltipWidth, onDelete: onTagRemoveHandler, onClick: hasTagClickHandler
+                                                    ? onTagClickHandler
+                                                    : undefined }, i));
                                         }) })), footer: ({ onClose }) => (_jsx(_Fragment, { children: _jsx(UiButton, { ref: (ref) => {
                                                 interactionState.current.close = ref;
                                             }, label: closeLabel, variant: "secondary", onClick: () => {
                                                 onClose();
                                             } }) })) })) : null }, i));
                         }
-                        return (_jsx(UiTag, { tag: tag, ref: (ref) => {
-                                interactionState.current.tags[tag.id] = ref;
-                            }, isDeletable: isDeletable, isDisabled: readOnly, deleteLabel: removeLabel, isFocused: showedFocusedIndex === i, size: size, onDelete: onTagRemoveHandler, onClick: onTagClickHandler, maxWidth: i === showedTags.length - 1 ? lastAvailableWidth : availableWidth }, getKey(tag, isDeletable, readOnly)));
+                        return (_jsx(UiTag, { tag: tag, isDeletable: isDeletable, isDisabled: readOnly, deleteLabel: removeLabel, size: size, onDelete: onTagRemoveHandler, onClick: hasTagClickHandler ? onTagClickHandler : undefined, maxWidth: i === showedTags.length - 1 ? lastAvailableWidth : availableWidth }, getKey(tag, isDeletable, readOnly)));
                     }), hasCustomAddButton ? (_jsx("div", { className: e("add-button"), ref: addButtonRef, onClick: (e) => {
                             e.stopPropagation();
                             e.preventDefault();
@@ -82,15 +97,14 @@ export function UiTags({ tags, tagOptions, addLabel = "Add tag", nameLabel = "Na
                                 setTag("");
                                 onAddClose();
                                 setPopupOpen(false);
-                            }, enableFocusTrap: true, anchor: _jsx(UiButton, { label: showedTags.length > 0 ? "" : addLabel, accessibilityConfig: {
-                                    ariaHaspopup: true,
-                                    ariaControls: popupId,
-                                    ariaLabel: showedTags.length > 0 ? addLabel : undefined,
-                                    ariaExpanded: popupOpen,
-                                    role: "listitem",
-                                }, size: "small", iconBefore: "plus", variant: "tertiary", ref: (ref) => {
-                                    interactionState.current.add = ref;
-                                } }), title: addLabel, initialFocus: inputRef, content: ({ onClose }) => (_jsxs(UiCombobox, { options: comboboxOptions, value: tag, onValueChange: setTag, creatable: true, children: [
+                            }, enableFocusTrap: true, anchor: _jsx(UiTooltip, { content: addLabel, triggerBy: ["hover", "focus"], anchorWrapperStyles: { display: "flex", alignItems: "center" }, anchor: _jsx(UiButton, { label: showedTags.length > 0 ? "" : addLabel, accessibilityConfig: {
+                                        ariaHaspopup: true,
+                                        ariaControls: popupId,
+                                        ariaLabel: addLabel,
+                                        ariaExpanded: popupOpen,
+                                    }, size: "small", iconBefore: "plus", variant: "tertiary", ref: (ref) => {
+                                        interactionState.current.add = ref;
+                                    } }) }), title: addLabel, initialFocus: inputRef, content: ({ onClose }) => (_jsxs(UiCombobox, { options: comboboxOptions, value: tag, onValueChange: setTag, creatable: true, children: [
                                     _jsx(UiComboboxInput, { ref: (node) => {
                                             inputRef.current = node;
                                             interactionState.current.input = node;

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

@@ -3,27 +3,22 @@ import { type IUiTagDef, type IUiTagsProps } 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: IUiTagDef[], hiddenTags: IUiTagDef[], onTagClick: IUiTagsProps["onTagClick"], onTagAdd: IUiTagsProps["onTagAdd"], onTagRemove: IUiTagsProps["onTagRemove"]): {
+export declare function useTagsInteractions(tagsContainerRef: MutableRefObject<HTMLDivElement | null>, tooltipTagsContainerRef: MutableRefObject<HTMLDivElement | null>, showedTags: IUiTagDef[], hiddenTags: IUiTagDef[], onTagAdd: IUiTagsProps["onTagAdd"], onTagRemove: IUiTagsProps["onTagRemove"], onTagClick: IUiTagsProps["onTagClick"]): {
     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: import("react").RefObject<InteractionState>;
-    showedFocusedIndex: number;
-    hiddenFocusedIndex: number;
     onTagAddHandler: () => void;
-    onTagRemoveHandler: (tag: IUiTagDef) => void;
-    onTagClickHandler: (tag: IUiTagDef) => void;
+    onTagRemoveHandler: (removedTag: IUiTagDef) => void;
+    onTagClickHandler: (clickedTag: IUiTagDef) => void;
+    interactionState: import("react").RefObject<InteractionState>;
 };
 export {};
 //# sourceMappingURL=interactions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTags/interactions.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAA0C,MAAM,OAAO,CAAC;AAItF,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/D,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,SAAS,EAAE,EACvB,UAAU,EAAE,SAAS,EAAE,EACvB,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC,EACtC,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,EAClC,WAAW,EAAE,YAAY,CAAC,aAAa,CAAC;;;;;;;;;;;;;;EA8R3C"}
+{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../../../src/@ui/UiTags/interactions.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAkD,MAAM,OAAO,CAAC;AAI9F,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAI/D,KAAK,gBAAgB,GAAG;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,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;AAmBF,wBAAgB,mBAAmB,CAC/B,gBAAgB,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,EACzD,uBAAuB,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,EAChE,UAAU,EAAE,SAAS,EAAE,EACvB,UAAU,EAAE,SAAS,EAAE,EACvB,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,EAClC,WAAW,EAAE,YAAY,CAAC,aAAa,CAAC,EACxC,UAAU,EAAE,YAAY,CAAC,YAAY,CAAC;;;;;;;;;;;EAiHzC"}