@gooddata/sdk-ui-kit 11.43.0-alpha.3 → 11.43.0-alpha.5

package/esm/List/List.js

@@ -1,87 +1,129 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // (C) 2007-2026 GoodData Corporation
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef, } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import cx from "classnames";
-import { Cell, Column, Table } from "fixed-data-table-2";
-import { DROPDOWN_BODY_CLASS } from "../Dropdown/Dropdown.js";
 // it configures max number of records due to
 // inefficiency with virtual memory allocation
 // that causes application crash (TNT-787)
 const MAX_NUMBER_OF_ROWS = 1000000;
-const BORDER_HEIGHT = 1;
 const HALF_ROW = 0.5;
+// delay (ms) after the last scroll event before onScrollEnd is fired
+const SCROLL_END_DELAY = 100;
 export const MAX_VISIBLE_ITEMS_COUNT = 10;
 export const DEFAULT_ITEM_HEIGHT = 28;
 /**
  * @internal
  */
-export function List({ id, className = "", compensateBorder = true, width = 200, height, maxHeight, items = [], itemsCount = items.length, itemHeight = DEFAULT_ITEM_HEIGHT, itemHeightGetter = null, maxVisibleItemsCount = MAX_VISIBLE_ITEMS_COUNT, renderItem, onScrollStart, onScrollEnd, scrollToItem, scrollDirection, accessibilityConfig, }) {
+export function List({ id, className = "", width = 200, height, maxHeight, items = [], itemsCount = items.length, itemHeight = DEFAULT_ITEM_HEIGHT, itemHeightGetter = null, maxVisibleItemsCount = MAX_VISIBLE_ITEMS_COUNT, renderItem, onScrollStart, onScrollEnd, scrollToItem, scrollDirection, accessibilityConfig, }) {
+    const scrollContainerRef = useRef(null);
+    const rowsCount = Math.min(itemsCount, MAX_NUMBER_OF_ROWS);
+    // when there are more items than fit, show half of the next row to hint scrollability
     const currentItemsCount = itemsCount > maxVisibleItemsCount ? maxVisibleItemsCount + HALF_ROW : itemsCount;
     const listHeight = height || currentItemsCount * itemHeight;
-    const listHeightWithBorder = compensateBorder ? listHeight + BORDER_HEIGHT * 2 : listHeight;
+    // the visible viewport height; the list is prop-sized so this is deterministic
+    const viewportHeight = maxHeight ? Math.min(maxHeight, listHeight) : listHeight;
+    const estimateSize = useCallback((index) => (itemHeightGetter ? itemHeightGetter(index) : itemHeight), [itemHeightGetter, itemHeight]);
+    // Report the viewport size to the virtualizer from the known props, falling back from a real
+    // measurement when the DOM has no layout (e.g. jsdom in tests). Keeps virtualization correct
+    // without depending on layout being available.
+    const observeElementRect = useCallback((_instance, cb) => {
+        const el = scrollContainerRef.current;
+        if (!el) {
+            return undefined;
+        }
+        const report = () => {
+            const rect = el.getBoundingClientRect();
+            cb({ width: rect.width || width, height: rect.height || viewportHeight });
+        };
+        report();
+        if (typeof ResizeObserver === "undefined") {
+            return undefined;
+        }
+        const resizeObserver = new ResizeObserver(report);
+        resizeObserver.observe(el);
+        return () => resizeObserver.disconnect();
+    }, [width, viewportHeight]);
+    const rowVirtualizer = useVirtualizer({
+        count: rowsCount,
+        getScrollElement: () => scrollContainerRef.current,
+        estimateSize,
+        observeElementRect,
+        overscan: 5,
+    });
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    // scroll the requested item into view (preserves the legacy +scrollDirection offset)
     const scrollToItemRowIndex = useMemo(() => {
         if (!scrollToItem) {
             return undefined;
         }
-        return items.indexOf(scrollToItem) + (scrollDirection ?? 1);
+        const index = items.indexOf(scrollToItem);
+        if (index < 0) {
+            return undefined;
+        }
+        return index + (scrollDirection ?? 1);
     }, [items, scrollToItem, scrollDirection]);
+    useEffect(() => {
+        if (scrollToItemRowIndex === undefined || rowsCount === 0) {
+            return;
+        }
+        rowVirtualizer.scrollToIndex(Math.min(Math.max(scrollToItemRowIndex, 0), rowsCount - 1));
+        // rowVirtualizer identity is stable; intentionally only react to the target index changing
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scrollToItemRowIndex, rowsCount]);
+    // converts vertical scroll position to the [first, last] visible item index range,
+    // matching the legacy fixed-data-table-based behavior consumers (e.g. AsyncList) depend on
     const getVisibleScrollRange = useCallback((scrollY) => {
         const rowIndex = Math.floor(scrollY / itemHeight);
         const visibleRange = Math.ceil(listHeight / itemHeight);
         return [rowIndex, rowIndex + visibleRange];
     }, [itemHeight, listHeight]);
-    const handleScrollStart = useCallback((_, y) => {
-        if (onScrollStart) {
-            const [startIndex, endIndex] = getVisibleScrollRange(y);
-            onScrollStart(startIndex, endIndex);
+    const isScrollingRef = useRef(false);
+    const scrollEndTimerRef = useRef(undefined);
+    const handleScroll = useCallback((event) => {
+        const scrollY = event.currentTarget.scrollTop;
+        const [startIndex, endIndex] = getVisibleScrollRange(scrollY);
+        if (!isScrollingRef.current) {
+            isScrollingRef.current = true;
+            onScrollStart?.(startIndex, endIndex);
         }
-    }, [onScrollStart, getVisibleScrollRange]);
-    const handleScrollEnd = useCallback((_, y) => {
-        if (onScrollEnd) {
-            const [startIndex, endIndex] = getVisibleScrollRange(y);
-            onScrollEnd(startIndex, endIndex);
+        if (scrollEndTimerRef.current) {
+            clearTimeout(scrollEndTimerRef.current);
         }
-    }, [onScrollEnd, getVisibleScrollRange]);
+        scrollEndTimerRef.current = setTimeout(() => {
+            isScrollingRef.current = false;
+            onScrollEnd?.(startIndex, endIndex);
+        }, SCROLL_END_DELAY);
+    }, [getVisibleScrollRange, onScrollStart, onScrollEnd]);
+    // clear any pending scroll-end timer on unmount so callbacks don't fire on an unmounted tree
     useEffect(() => {
         return () => {
-            enablePageScrolling();
+            if (scrollEndTimerRef.current) {
+                clearTimeout(scrollEndTimerRef.current);
+            }
         };
     }, []);
-    const styles = useMemo(() => {
-        return {
-            width,
-        };
-    }, [width]);
-    return (_jsx("div", { id: id, "data-testid": "gd-list", className: cx("gd-list gd-infinite-list", className), style: styles, onMouseOver: disablePageScrolling, onMouseOut: enablePageScrolling, role: accessibilityConfig?.role, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, children: _jsx(Table, { width: width, 
-            // compensates for https://github.com/facebook/fixed-data-table/blob/5373535d98b08b270edd84d7ce12833a4478c6b6/src/FixedDataTableNew.react.js#L872
-            height: maxHeight ? undefined : listHeightWithBorder, maxHeight: maxHeight, headerHeight: 0, rowHeight: itemHeight, rowHeightGetter: itemHeightGetter, rowsCount: Math.min(itemsCount, MAX_NUMBER_OF_ROWS), onScrollStart: handleScrollStart, onScrollEnd: handleScrollEnd, scrollToRow: scrollToItemRowIndex, touchScrollEnabled: isTouchDevice(), keyboardScrollEnabled: true, children: _jsx(Column, { flexGrow: 1, width: 1, cell: ({ columnKey, height, width, rowIndex, }) => {
-                    const item = items[rowIndex];
-                    return (_jsx(Cell, { width: width, height: height, rowIndex: rowIndex, columnKey: columnKey, children: renderItem({
-                            rowIndex,
+    const containerStyle = useMemo(() => ({
+        width,
+        height: maxHeight ? undefined : listHeight,
+        maxHeight,
+    }), [width, maxHeight, listHeight]);
+    return (_jsx("div", { id: id, "data-testid": "gd-list", className: cx("gd-list gd-infinite-list", className), style: { width }, role: accessibilityConfig?.role, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, children: _jsx("div", { ref: scrollContainerRef, className: "gd-infinite-list-scroll-container", style: containerStyle, onScroll: handleScroll, children: _jsx("div", { className: "gd-infinite-list-sizer", style: { height: rowVirtualizer.getTotalSize(), width: "100%", position: "relative" }, children: virtualItems.map((virtualRow) => {
+                    const item = items[virtualRow.index];
+                    return (_jsx("div", { className: "gd-infinite-list-item", style: {
+                            position: "absolute",
+                            top: 0,
+                            left: 0,
+                            width: "100%",
+                            height: virtualRow.size,
+                            transform: `translateY(${virtualRow.start}px)`,
+                        }, children: renderItem({
+                            rowIndex: virtualRow.index,
                             item,
                             width,
-                            height,
-                            isFirst: rowIndex === 0,
-                            isLast: rowIndex === itemsCount - 1,
-                        }) }));
-                } }) }) }));
-}
-function preventDefault(e) {
-    const wheelEvent = e;
-    const target = wheelEvent.target;
-    const isDropdownBodyScroll = target?.closest?.(`.${DROPDOWN_BODY_CLASS}`);
-    if (isDropdownBodyScroll) {
-        // allow to scroll another lists placed in dropdowns (e.g. in Filter Groups)
-        return;
-    }
-    e.preventDefault();
-}
-function isTouchDevice() {
-    return "ontouchstart" in document.documentElement;
-}
-function disablePageScrolling() {
-    document.body.addEventListener("wheel", preventDefault, { passive: false });
-}
-function enablePageScrolling() {
-    document.body.removeEventListener("wheel", preventDefault);
+                            height: virtualRow.size,
+                            isFirst: virtualRow.index === 0,
+                            isLast: virtualRow.index === itemsCount - 1,
+                        }) }, virtualRow.key));
+                }) }) }) }));
 }

package/esm/Overlay/Overlay.js

@@ -50,8 +50,8 @@ function alignExceedsThreshold(firstAlignment, secondAlignment) {
  * Stops React synthetic event propagation but re-dispatches native events
  * to document and documentElement so that:
  * - Other Overlays can detect outside clicks and close themselves
- * - Libraries listening on document.documentElement (like fixed-data-table-2's
- *   DOMMouseMoveTracker for scrollbar drag release) receive the events
+ * - Libraries listening on document / document.documentElement (e.g. for drag/scroll
+ *   release tracking) still receive the events
  */
 const stopPropagation = (e) => {
     e.stopPropagation();

package/esm/locales.d.ts

@@ -175,6 +175,9 @@ export declare const olpPermissionMessages: {
     canView: {
         id: string;
     };
+    canEdit: {
+        id: string;
+    };
     canViewAndShareTooltip: {
         id: string;
     };

package/esm/locales.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locales.d.ts","sourceRoot":"","sources":["../src/locales.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB;;;;CAE/B,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;CAMpC,CAAC;AAEH,eAAO,MAAM,+BAA+B;;;;;;;CAG1C,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;CAG/B,CAAC;AAEH,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;CAK1C,CAAC;AAEH,eAAO,MAAM,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgB5C,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;CAI/B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;CAGnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;CAEhC,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;CAKvC,CAAC;AAEH,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;CAMtC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;CAMnC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAM3B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAchC,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;CAMjC,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;CAMvC,CAAC"}
+{"version":3,"file":"locales.d.ts","sourceRoot":"","sources":["../src/locales.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,oBAAoB;;;;CAE/B,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;CAMpC,CAAC;AAEH,eAAO,MAAM,+BAA+B;;;;;;;CAG1C,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;CAG/B,CAAC;AAEH,eAAO,MAAM,+BAA+B;;;;;;;;;;;;;CAK1C,CAAC;AAEH,eAAO,MAAM,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgB5C,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;CAI/B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;CAGnC,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;CAEhC,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;CAKvC,CAAC;AAEH,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;CAMtC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;CAMnC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAM3B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAehC,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;CAMjC,CAAC;AAEH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;CAMvC,CAAC"}

package/esm/locales.js

@@ -84,6 +84,7 @@ export const olpLabelMessages = defineMessages({
 export const olpPermissionMessages = defineMessages({
     canViewAndShare: { id: "shareDialog.share.granular.grantee.permission.share" },
     canView: { id: "shareDialog.share.granular.grantee.permission.view" },
+    canEdit: { id: "shareDialog.olp.permission.edit" },
     canViewAndShareTooltip: { id: "shareDialog.olp.permission.tooltip.share" },
     canViewTooltip: { id: "shareDialog.olp.permission.tooltip.view" },
     transferOwnership: { id: "shareDialog.olp.permission.transferOwnership" },

package/esm/sdk-ui-kit.d.ts

@@ -3065,7 +3065,7 @@ export declare interface IDropdownButtonRenderProps {
     /**
      * Props supporting accessibility that can be passed down to a <Button/>
      */
-    accessibilityConfig: Pick<IButtonAccessibilityConfig, "role" | "isExpanded" | "popupId" | "ariaLabel" | "ariaDescribedBy" | "ariaControls" | "ariaExpanded" | "ariaHaspopup" | "ariaPressed">;
+    accessibilityConfig: Pick<IButtonAccessibilityConfig, "role" | "isExpanded" | "popupId" | "popupType" | "ariaLabel" | "ariaDescribedBy" | "ariaControls" | "ariaExpanded" | "ariaHaspopup" | "ariaPressed">;
 }
 
 /**
@@ -7371,13 +7371,15 @@ export declare interface IUiGranteeRowControlsProps {
     /** Locked items are always treated as selected. */
     labels: ReadonlyArray<IUiLabelsChecklistItem>;
     selectedLabelIds: ReadonlyArray<string>;
-    permissionLevel: PermissionMenuLevel;
+    /** The level to display. `EDIT` renders read-only; VIEW/SHARE are selectable. */
+    permissionLevel: AccessGranularPermission;
     /**
      * Set only when the grantee inherits a higher permission than `permissionLevel`
      * (e.g. from a group); drives the warning badge. Undefined when not elevated.
      */
-    effectivePermission?: PermissionMenuLevel;
+    effectivePermission?: AccessGranularPermission;
     onLabelsChange: (selectedIds: string[]) => void;
+    /** Fires only for selectable rows (VIEW/SHARE); EDIT rows have no level control. */
     onPermissionChange: (level: PermissionMenuLevel) => void;
     onTransferOwnership?: () => void;
     onRemoveAccess?: () => void;
@@ -7975,6 +7977,11 @@ export declare interface IUiMoreOptionsMenuProps {
     onLabelsChange?: (selectedIds: string[]) => void;
     /** Omit to hide the row (Transfer ownership is gated until wired). */
     onTransferOwnership?: () => void;
+    /**
+     * Omit to hide the row. Used for read-only permission rows (e.g. EDIT), whose
+     * level control has no dropdown to host Remove access — so the action lives here.
+     */
+    onRemoveAccess?: () => void;
     isDisabled?: boolean;
     dataTestId?: string;
 }
@@ -9246,7 +9253,7 @@ export declare function LegacyInvertableList<T>({ className, filteredItemsCount,
  * @deprecated  This component is deprecated use List instead
  * @internal
  */
-export declare function LegacyList({ className, onScroll, onScrollStart, onSelect, width, height, itemHeight, itemHeightGetter, compensateBorder, scrollToSelected, dataSource, rowItem }: ILegacyListProps): JSX.Element;
+export declare function LegacyList({ className, onScroll, onScrollStart, onSelect, width, height, itemHeight, itemHeightGetter, scrollToSelected, dataSource, rowItem }: ILegacyListProps): JSX.Element;
 
 /**
  * @internal
@@ -9286,7 +9293,7 @@ export declare type LevelTypesUnion<Levels extends unknown[]> = Levels[number];
 /**
  * @internal
  */
-export declare function List<T>({ id, className, compensateBorder, width, height, maxHeight, items, itemsCount, itemHeight, itemHeightGetter, maxVisibleItemsCount, renderItem, onScrollStart, onScrollEnd, scrollToItem, scrollDirection, accessibilityConfig }: IListProps<T>): ReactElement;
+export declare function List<T>({ id, className, width, height, maxHeight, items, itemsCount, itemHeight, itemHeightGetter, maxVisibleItemsCount, renderItem, onScrollStart, onScrollEnd, scrollToItem, scrollDirection, accessibilityConfig }: IListProps<T>): ReactElement;
 
 /**
  * @internal
@@ -9649,7 +9656,9 @@ export declare function ParameterControlDropdown({ name, value, resetValue, cons
 export declare function ParameterPicker({ parameters, excludedKeys, isLoading, maxListHeight, onAdd, onCancel }: IParameterPickerProps): JSX.Element;
 
 /**
- * Permission level offered by the menu.
+ * Selectable permission level. The menu and the add-grantee picker only ever
+ * assign VIEW or SHARE — EDIT is shown as a read-only row (via the model's
+ * `AccessGranularPermission`) and is never selectable from the UI.
  *
  * @internal
  */
@@ -10785,12 +10794,14 @@ export declare function UiMenu<T extends IUiMenuItemData = object, M extends obj
 export declare function UiModalDialog({ children, isOpen, onClose, width, accessibilityConfig, dataTestId }: IUiModalDialogProps): JSX.Element | null;
 
 /**
- * Per-grantee "⋯" menu: "Manage labels access" (drills into {@link UiLabelsChecklist})
- * and "Transfer ownership". Each row shows only when its data/handler is given.
+ * Per-grantee "⋯" menu: "Manage labels access" (drills into {@link UiLabelsChecklist}),
+ * "Transfer ownership" and "Remove access". Each row shows only when its data/handler
+ * is given. Remove access appears here for read-only permission rows whose level control
+ * has no dropdown to host it.
  *
  * @internal
  */
-export declare function UiMoreOptionsMenu({ labels, selectedLabelIds, onLabelsChange, onTransferOwnership, isDisabled, dataTestId }: IUiMoreOptionsMenuProps): JSX.Element;
+export declare function UiMoreOptionsMenu({ labels, selectedLabelIds, onLabelsChange, onTransferOwnership, onRemoveAccess, isDisabled, dataTestId }: IUiMoreOptionsMenuProps): JSX.Element;
 
 /**
  * @internal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.43.0-alpha.3",
+  "version": "11.43.0-alpha.5",
   "description": "GoodData SDK - UI Building Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -56,7 +56,6 @@
     "date-fns-tz": "^3.2.0",
     "debounce-promise": "^3.1.2",
     "default-import": "1.1.5",
-    "fixed-data-table-2": "2.0.22",
     "lodash-es": "^4.17.23",
     "moment": "^2.29.4",
     "react-content-loader": "^7.1.1",
@@ -75,11 +74,11 @@
     "tslib": "2.8.1",
     "unified": "^11.0.5",
     "uuid": "11.1.1",
-    "@gooddata/sdk-backend-spi": "11.43.0-alpha.3",
-    "@gooddata/sdk-ui": "11.43.0-alpha.3",
-    "@gooddata/sdk-ui-theme-provider": "11.43.0-alpha.3",
-    "@gooddata/util": "11.43.0-alpha.3",
-    "@gooddata/sdk-model": "11.43.0-alpha.3"
+    "@gooddata/sdk-backend-spi": "11.43.0-alpha.5",
+    "@gooddata/sdk-ui": "11.43.0-alpha.5",
+    "@gooddata/sdk-model": "11.43.0-alpha.5",
+    "@gooddata/sdk-ui-theme-provider": "11.43.0-alpha.5",
+    "@gooddata/util": "11.43.0-alpha.5"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -128,11 +127,11 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.43.0-alpha.3",
-    "@gooddata/oxlint-config": "11.43.0-alpha.3",
-    "@gooddata/reference-workspace": "11.43.0-alpha.3",
-    "@gooddata/stylelint-config": "11.43.0-alpha.3",
-    "@gooddata/sdk-backend-mockingbird": "11.43.0-alpha.3"
+    "@gooddata/eslint-config": "11.43.0-alpha.5",
+    "@gooddata/oxlint-config": "11.43.0-alpha.5",
+    "@gooddata/reference-workspace": "11.43.0-alpha.5",
+    "@gooddata/stylelint-config": "11.43.0-alpha.5",
+    "@gooddata/sdk-backend-mockingbird": "11.43.0-alpha.5"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -153,7 +152,7 @@
     "generate-theme": "node scripts/generateDefaultThemeScss.js && oxfmt --no-error-on-unmatched-pattern ./src/@ui/defaultTheme.scss",
     "lint": "oxlint . --quiet && eslint .",
     "lint-fix": "oxlint . --quiet --fix && eslint . --fix",
-    "scss": "sass --load-path=node_modules --load-path=node_modules/fixed-data-table-2/dist styles/scss:styles/css",
+    "scss": "sass --load-path=node_modules styles/scss:styles/css",
     "stylelint": "stylelint '**/*.scss'",
     "stylelint-fix": "stylelint '**/*.scss' --fix",
     "test": "vitest watch",

package/src/@ui/UiGranteeRowControls/UiGranteeRowControls.scss

@@ -12,4 +12,12 @@
         align-items: center;
         cursor: default;
     }
+
+    // Static label for a display-only level (EDIT): the grant can't be managed
+    // from this dialog, so it reads as plain text with no dropdown affordance.
+    &__readonly-permission {
+        font-size: 12px;
+        color: var(--gd-palette-complementary-6);
+        white-space: nowrap;
+    }
 }

package/src/@ui/UiLabelsChecklist/UiLabelsChecklist.scss

@@ -7,22 +7,33 @@
     align-self: stretch;
     display: flex;
     flex-direction: column;
+    // Fill the menu's bounded height so the header and actions stay pinned while
+    // only the rows scroll (see &__items).
+    min-height: 0;
+    flex: 1 1 auto;
 
     // The submenu header is width:100% + content-box, so its 10px side padding
     // would overflow the column by 20px. Make it border-box so it lines up with
     // the rows and the actions strip below.
     .gd-ui-kit-submenu-header {
         box-sizing: border-box;
+        flex: none;
     }
 
     &__items {
         display: flex;
         flex-direction: column;
         padding: var(--gd-spacing-5px) 0;
+        // Scroll the rows when the label list is taller than the menu, keeping the
+        // header and Cancel/Apply footer always visible.
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        min-height: 0;
     }
 
     &__actions {
         display: flex;
+        flex: none;
         justify-content: flex-end;
         gap: var(--gd-spacing-10px);
         padding: var(--gd-spacing-10px);

package/src/@ui/UiMenu/UiMenu.scss

@@ -33,6 +33,15 @@
         display: contents;
     }
 
+    // Wraps custom (drill-in) content. Becomes a flex child so its content is
+    // bounded by the menu's max-height and can scroll instead of overflowing.
+    &__content-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: 0;
+    }
+
     &__items-container {
         width: 100%;
         height: 100%;

package/styles/css/insightList.css

@@ -504,9 +504,7 @@
   background-image: url("@gooddata/sdk-ui-kit/styles/images/visualization-types/pushpin.svg"), url("@gooddata/sdk-ui-kit/styles/images/visualization-types/pushpin-active.svg");
 }
 
-.gd-visualizations-list .public_fixedDataTableRow_main,
-.gd-visualizations-list .public_fixedDataTableCell_main,
-.gd-visualizations-list .fixedDataTableCellGroupLayout_cellGroup {
+.gd-visualizations-list .gd-infinite-list-item {
   overflow: visible;
 }
 

package/styles/css/insightList.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/Button/_variables.scss","../scss/indigoFont.scss","../scss/insightList.scss","../scss/variables.scss"],"names":[],"mappings":"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","file":"insightList.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/Button/_variables.scss","../scss/indigoFont.scss","../scss/insightList.scss","../scss/variables.scss"],"names":[],"mappings":"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","file":"insightList.css"}