@gooddata/sdk-ui-kit 11.40.0-alpha.1 → 11.40.0-alpha.3

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

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useRef } from "react";
+import { useIntl } from "react-intl";
+import { olpPermissionMessages } from "../../locales.js";
+import { bem } from "../@utils/bem.js";
+import { UiIconButton } from "../UiIconButton/UiIconButton.js";
+import { UiPopover } from "../UiPopover/UiPopover.js";
+import { UiTooltip } from "../UiTooltip/UiTooltip.js";
+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.
+ *
+ * @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 })) }));
+}
+function MenuBody({ selectedLevel, onPermissionChange, onTransferOwnership, onLabelsClick, labelsCounter, onRemoveAccess, onClose, dataTestId, }) {
+    const intl = useIntl();
+    const choose = (next) => () => {
+        next();
+        onClose();
+    };
+    const levelItems = [
+        {
+            key: "SHARE",
+            label: intl.formatMessage(olpPermissionMessages.canViewAndShare),
+            tooltip: intl.formatMessage(olpPermissionMessages.canViewAndShareTooltip),
+            radioValue: "SHARE",
+            onClick: choose(() => onPermissionChange("SHARE")),
+        },
+        {
+            key: "VIEW",
+            label: intl.formatMessage(olpPermissionMessages.canView),
+            tooltip: intl.formatMessage(olpPermissionMessages.canViewTooltip),
+            radioValue: "VIEW",
+            onClick: choose(() => onPermissionChange("VIEW")),
+        },
+    ];
+    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),
+            onClick: choose(onRemoveAccess),
+        });
+    }
+    const menuRef = useRef(null);
+    const handleKeyDown = (event) => {
+        const root = menuRef.current;
+        if (!root)
+            return;
+        const focusable = Array.from(root.querySelectorAll('button[role^="menuitem"]'));
+        const currentIndex = focusable.indexOf(document.activeElement);
+        if (currentIndex < 0)
+            return;
+        let nextIndex = null;
+        switch (event.key) {
+            case "ArrowDown":
+                nextIndex = (currentIndex + 1) % focusable.length;
+                break;
+            case "ArrowUp":
+                nextIndex = (currentIndex - 1 + focusable.length) % focusable.length;
+                break;
+            case "Home":
+                nextIndex = 0;
+                break;
+            case "End":
+                nextIndex = focusable.length - 1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        focusable[nextIndex]?.focus();
+    };
+    return (_jsx("div", { className: b(), "data-testid": dataTestId, children: _jsxs("div", { ref: menuRef, className: e("items"), role: "menu", "aria-orientation": "vertical", "aria-label": intl.formatMessage(olpPermissionMessages.menuLabel), onKeyDown: handleKeyDown, children: [levelItems.map((item) => (_jsx(PermissionMenuItem, { item: item, selectedLevel: selectedLevel }, item.key))), actionItems.length > 0 ? _jsx("div", { className: e("divider"), role: "separator" }) : null, actionItems.map((item) => (_jsx(PermissionMenuItem, { item: item, selectedLevel: selectedLevel }, item.key)))] }) }));
+}
+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
+    // 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: {
+                        ariaLabel: intl.formatMessage(olpPermissionMessages.moreInfoAriaLabel, {
+                            label: item.label,
+                        }),
+                    } }) })) : null] }));
+}

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

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode, type RefObject } from "react";
+import { type AriaAttributes, type ReactElement, type ReactNode, type RefObject } from "react";
 import { type IAccessibilityConfigBase } from "../../typings/accessibility.js";
 import { type IUiTooltipProps } from "../UiTooltip/types.js";
 /**
@@ -7,6 +7,18 @@ import { type IUiTooltipProps } from "../UiTooltip/types.js";
 export interface IUiPopoverProps {
     id?: string;
     anchor: ReactElement<any>;
+    /**
+     * Accessibility attributes forwarded to the anchor element (the trigger).
+     * `ariaHaspopup` defaults to `"dialog"` — pass
+     * `"menu"` for menu-style popovers, `"listbox"` for
+     * single-select pickers, etc. Set `ariaHaspopup: false` to
+     * suppress. (Separate from `accessibilityConfig`, which targets
+     * the popover content surface.)
+     */
+    anchorAccessibilityConfig?: {
+        ariaHaspopup?: "dialog" | "menu" | "listbox" | "tree" | "grid" | false;
+        ariaControls?: AriaAttributes["aria-controls"];
+    };
     width?: "default" | number;
     disabled?: boolean;
     tabIndex?: number;
@@ -40,4 +52,4 @@ export interface IUiPopoverProps {
 /**
  * @internal
  */
-export declare function UiPopover({ id, accessibilityConfig, anchor, 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, footer, closeText, closeVisible, initialFocus, returnFocusTo, triggerBy, returnFocusAfterClose, focusCheckFn, enableFocusTrap, onOpen, onClose }: IUiPopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,22 +9,39 @@ import { defaultFocusCheckFn } from "../UiFocusManager/utils.js";
 import { UiTooltip } from "../UiTooltip/UiTooltip.js";
 const { b, e } = bem("gd-ui-kit-popover");
 const defaultAccessibilityConfig = {};
+function buildAnchorAriaAttrs(cfg) {
+    const ariaHaspopup = cfg?.ariaHaspopup ?? "dialog";
+    const out = {};
+    if (ariaHaspopup !== false) {
+        out["aria-haspopup"] = ariaHaspopup;
+    }
+    if (cfg?.ariaControls) {
+        out["aria-controls"] = cfg.ariaControls;
+    }
+    return out;
+}
 /**
  * @internal
  */
-export function UiPopover({ id, accessibilityConfig = defaultAccessibilityConfig, anchor, 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, footer, closeText, closeVisible, initialFocus, returnFocusTo, triggerBy = ["click"], returnFocusAfterClose = true, focusCheckFn = defaultFocusCheckFn, enableFocusTrap = false, onOpen, onClose, }) {
     const ref = useRef(null);
     const returnFocus = useMemo(() => {
         return returnFocusTo ?? ref;
     }, [returnFocusTo]);
     const currentId = useIdPrefixed("popover");
     const titleId = useIdPrefixed("popover-title");
+    // Only point aria-labelledby at the title element when one will actually
+    // render — i.e. the caller supplied a title. Without this guard, titleless
+    // 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: {
+            ariaLabelledBy: titleLabelledBy,
             ...accessibilityConfig,
             role: "dialog",
-            ariaLabelledBy: titleId,
         }, anchor: cloneElement(anchor, {
             ...(tabIndex === undefined ? {} : { tabIndex }),
+            ...buildAnchorAriaAttrs(anchorAccessibilityConfig),
             ref: mergeRefs(ref, anchor.props?.ref),
         }), offset: 0, content: ({ onClose, type }) => {
             //NOTE: Do not make screen reader tooltip visible, live content is enough
@@ -37,10 +54,9 @@ export function UiPopover({ id, accessibilityConfig = defaultAccessibilityConfig
                     ? undefined
                     : () => {
                         onClose();
-                    }, children: _jsxs("div", { id: id ?? currentId, tabIndex: 0, className: b(), style: { width: width === "default" ? undefined : width }, children: [
-                        _jsxs("div", { className: e("header"), children: [typeof title === "string" ? (_jsx("div", { id: titleId, className: e("header-title"), children: title })) : (_jsx("div", { id: titleId, children: title })), closeVisible ? (_jsx("div", { className: e("header-close"), children: _jsx(UiButton, { label: "", size: "small", variant: "tertiary", iconBefore: "close", accessibilityConfig: {
+                    }, 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] }), 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] }) }));
+                                        }, 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 }));
 }
 function mergeRefs(...refs) {

package/esm/index.d.ts

@@ -462,3 +462,9 @@ export { UiGranteeRow, type IUiGranteeRowProps } from "./@ui/UiGranteeRow/UiGran
 export { UiObjectShareDialog, type IUiObjectShareDialogProps, type IUiObjectShareDialogGrantee, } from "./@ui/UiObjectShareDialog/UiObjectShareDialog.js";
 export { UiAddGranteeDialog, type IUiAddGranteeDialogProps, } from "./@ui/UiAddGranteeDialog/UiAddGranteeDialog.js";
 export { UiGeneralAccessRadio, type IUiGeneralAccessRadioProps, type GeneralAccessValue, } from "./@ui/UiGeneralAccessRadio/UiGeneralAccessRadio.js";
+export { UiLabelRow, type IUiLabelRowProps, type LabelRowKind } from "./@ui/UiLabelRow/UiLabelRow.js";
+export { UiLabelChecklistRow, type IUiLabelChecklistRowProps, } from "./@ui/UiLabelChecklistRow/UiLabelChecklistRow.js";
+export { UiLabelsList, type IUiLabelsListProps, type IUiLabelsListItem, } from "./@ui/UiLabelsList/UiLabelsList.js";
+export { UiLabelsPicker, isLabelsPickerItemChecked, type IUiLabelsPickerProps, type IUiLabelsPickerItem, } from "./@ui/UiLabelsPicker/UiLabelsPicker.js";
+export { UiPermissionMenu, type IUiPermissionMenuProps, type PermissionMenuLevel, } from "./@ui/UiPermissionMenu/UiPermissionMenu.js";
+export { UiGranteeRowControls, type IUiGranteeRowControlsProps, } from "./@ui/UiGranteeRowControls/UiGranteeRowControls.js";

package/esm/index.js

@@ -417,3 +417,9 @@ export { UiGranteeRow } from "./@ui/UiGranteeRow/UiGranteeRow.js";
 export { UiObjectShareDialog, } from "./@ui/UiObjectShareDialog/UiObjectShareDialog.js";
 export { UiAddGranteeDialog, } from "./@ui/UiAddGranteeDialog/UiAddGranteeDialog.js";
 export { UiGeneralAccessRadio, } from "./@ui/UiGeneralAccessRadio/UiGeneralAccessRadio.js";
+export { UiLabelRow } from "./@ui/UiLabelRow/UiLabelRow.js";
+export { UiLabelChecklistRow, } from "./@ui/UiLabelChecklistRow/UiLabelChecklistRow.js";
+export { UiLabelsList, } from "./@ui/UiLabelsList/UiLabelsList.js";
+export { UiLabelsPicker, isLabelsPickerItemChecked, } from "./@ui/UiLabelsPicker/UiLabelsPicker.js";
+export { UiPermissionMenu, } from "./@ui/UiPermissionMenu/UiPermissionMenu.js";
+export { UiGranteeRowControls, } from "./@ui/UiGranteeRowControls/UiGranteeRowControls.js";

package/esm/locales.d.ts

@@ -80,6 +80,9 @@ export declare const granularPermissionMessageTooltips: {
     };
 };
 export declare const commonDialogMessages: {
+    apply: {
+        id: string;
+    };
     cancel: {
         id: string;
     };
@@ -148,3 +151,54 @@ export declare const olpGeneralAccessMessages: {
         id: string;
     };
 };
+export declare const olpLabelMessages: {
+    suffixPrimary: {
+        id: string;
+    };
+    suffixDefault: {
+        id: string;
+    };
+    listHeading: {
+        id: string;
+    };
+    popoverTitle: {
+        id: string;
+    };
+};
+export declare const olpPermissionMessages: {
+    canViewAndShare: {
+        id: string;
+    };
+    canView: {
+        id: string;
+    };
+    canViewAndShareTooltip: {
+        id: string;
+    };
+    canViewTooltip: {
+        id: string;
+    };
+    transferOwnership: {
+        id: string;
+    };
+    labels: {
+        id: string;
+    };
+    removeAccess: {
+        id: string;
+    };
+    menuLabel: {
+        id: string;
+    };
+    moreInfoAriaLabel: {
+        id: string;
+    };
+};
+export declare const olpGranteeControlsMessages: {
+    allLabels: {
+        id: string;
+    };
+    labelsCount: {
+        id: string;
+    };
+};

package/esm/locales.js

@@ -43,6 +43,7 @@ export const granularPermissionMessageTooltips = defineMessages({
     cannotGrantLowerForGroup: { id: "shareDialog.share.granular.granularGroup.tooltip.cannotGrantLower" },
 });
 export const commonDialogMessages = defineMessages({
+    apply: { id: "apply" },
     cancel: { id: "cancel" },
     close: { id: "close" },
 });
@@ -73,3 +74,24 @@ export const olpGeneralAccessMessages = defineMessages({
     workspaceTitle: { id: "shareDialog.olp.generalAccess.workspace.title" },
     workspaceDescription: { id: "shareDialog.olp.generalAccess.workspace.description" },
 });
+export const olpLabelMessages = defineMessages({
+    suffixPrimary: { id: "shareDialog.olp.label.suffix.primary" },
+    suffixDefault: { id: "shareDialog.olp.label.suffix.default" },
+    listHeading: { id: "shareDialog.olp.labels.heading" },
+    popoverTitle: { id: "shareDialog.olp.labels.popoverTitle" },
+});
+export const olpPermissionMessages = defineMessages({
+    canViewAndShare: { id: "shareDialog.share.granular.grantee.permission.share" },
+    canView: { id: "shareDialog.share.granular.grantee.permission.view" },
+    canViewAndShareTooltip: { id: "shareDialog.olp.permission.tooltip.share" },
+    canViewTooltip: { id: "shareDialog.olp.permission.tooltip.view" },
+    transferOwnership: { id: "shareDialog.olp.permission.transferOwnership" },
+    labels: { id: "shareDialog.olp.permission.labels" },
+    removeAccess: { id: "shareDialog.olp.permission.removeAccess" },
+    menuLabel: { id: "shareDialog.olp.permission.menuLabel" },
+    moreInfoAriaLabel: { id: "shareDialog.olp.permission.moreInfoAriaLabel" },
+});
+export const olpGranteeControlsMessages = defineMessages({
+    allLabels: { id: "shareDialog.olp.granteeControls.allLabels" },
+    labelsCount: { id: "shareDialog.olp.granteeControls.labelsCount" },
+});