@gooddata/sdk-ui-kit 11.42.0-alpha.2 → 11.42.0-alpha.4

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

@@ -884,7 +884,7 @@ export declare function DomainHomepageLink({ onClick }: IDomainHomepageLinkProps
 /**
  * @internal
  */
-export declare function Dropdown({ isOpen: isOpenProp, onToggle, className, openOnInit, closeOnParentScroll, closeOnMouseDrag, closeOnOutsideClick, overlayPositionType, alignPoints, overlayZIndex, ignoreClicksOnByClass, renderBody, renderButton, onOpenStateChanged, fullscreenOnMobile, enableEventPropagation, enableAutoToggle, closeOnEscape, autofocusOnOpen, initialFocus, returnFocusTo, accessibilityConfig, shouldTrapFocus }: IDropdownProps): JSX.Element;
+export declare function Dropdown({ isOpen: isOpenProp, onToggle, className, openOnInit, closeOnParentScroll, closeOnMouseDrag, closeOnOutsideClick, overlayPositionType, alignPoints, overlayZIndex, ignoreClicksOnByClass, renderBody, renderButton, onOpenStateChanged, onAlign, fullscreenOnMobile, enableEventPropagation, enableAutoToggle, closeOnEscape, autofocusOnOpen, initialFocus, returnFocusTo, accessibilityConfig, shouldTrapFocus }: IDropdownProps): JSX.Element;
 
 /**
  * @internal
@@ -2599,7 +2599,7 @@ export declare function IconTreeMap({ className, width, height, color, ariaHidde
 /**
  * @internal
  */
-export declare type IconType = "aiAgent" | "aiAgentDisabled" | "brain" | "brainDisabled" | "check" | "checkCircle" | "certification" | "plus" | "plusCircle" | "sync" | "alert" | "alertPaused" | "close" | "cross" | "edit" | "crossCircle" | "question" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "date" | "navigateUp" | "navigateDown" | "navigateRight" | "navigateLeft" | "download" | "slack" | "expand" | "exclamationCircle" | "infoCircle" | "book" | "visible" | "invisible" | "lock" | "unlock" | "ai" | "aiFill" | "drawer" | "drawerEmpty" | "prohibited" | "dropDown" | "dropRight" | "clock" | "clockPaused" | "questionMark" | "upload" | "expandRectangle" | "file" | "number" | "code" | "user" | "userPlus" | "users" | "magic" | "tab" | "pauseCircle" | "filter" | "timer" | "mail" | "envelope" | "copy" | "rain" | "earth" | "geoCollection" | "geoCollectionUpload" | "minimize" | "shrink" | "copyright" | "ellipsis" | "pencil" | "folder" | "folderSmall" | "folderPlus" | "trash" | "arrowUp" | "arrowRight" | "arrowDown" | "arrowLeft" | "undo" | "redo" | "trendDown" | "trendUp" | "save" | "minus" | "minusCircle" | "percent" | "enter" | "enterRight" | "money" | "ghost" | "warning" | "home" | "settings" | "search" | "university" | "printer" | "picture" | "visualization" | "dashboard" | "metric" | "fact" | "ldmAttribute" | "ldmKey" | "ldmLabel" | "sharp" | "attribute" | "horn" | "cw" | "ccw" | "table" | "directionColumn" | "directionRow" | "header" | "genai" | "genai2" | "explainai" | "hiddenForAi" | "box" | "ellipsisVertical" | "list" | "drillTo" | "hierarchy" | "history" | "history2" | "thumbsUp" | "thumbsDown" | "send" | "visualizationArea" | "visualizationTable" | "visualizationTreemap" | "visualizationScatter" | "visualizationDonut" | "visualizationHeadline" | "visualizationColumn" | "visualizationLine" | "visualizationPyramid" | "visualizationFunnel" | "visualizationHeatmap" | "visualizationBubble" | "visualizationPie" | "visualizationBar" | "visualizationCombo" | "visualizationBullet" | "visualizationWaterfall" | "visualizationDependencywheel" | "visualizationSankey" | "visualizationPushpin" | "visualizationRepeater" | "visualizationXirr" | "link" | "externalLink" | "click" | "fileXlsx" | "filePptx" | "filePdf" | "fileImage" | "fileCsvFormatted" | "fileCsvRaw" | "aiDocument" | "recommendation" | "streamUp" | "streamDown" | "stream" | "density" | "parameter" | "pin" | "unpin";
+export declare type IconType = "aiAgent" | "aiAgentDisabled" | "brain" | "brainDisabled" | "check" | "checkCircle" | "certification" | "plus" | "plusCircle" | "sync" | "alert" | "alertPaused" | "close" | "cross" | "edit" | "crossCircle" | "question" | "chevronUp" | "chevronRight" | "chevronDown" | "chevronLeft" | "date" | "navigateUp" | "navigateDown" | "navigateRight" | "navigateLeft" | "download" | "slack" | "expand" | "exclamationCircle" | "infoCircle" | "book" | "visible" | "invisible" | "lock" | "unlock" | "ai" | "aiFill" | "drawer" | "drawerEmpty" | "prohibited" | "dropDown" | "dropRight" | "clock" | "clockPaused" | "questionMark" | "upload" | "expandRectangle" | "file" | "number" | "code" | "user" | "userPlus" | "users" | "magic" | "tab" | "pauseCircle" | "filter" | "timer" | "mail" | "envelope" | "copy" | "rain" | "earth" | "geoCollection" | "geoCollectionUpload" | "minimize" | "shrink" | "copyright" | "ellipsis" | "pencil" | "folder" | "folderSmall" | "folderPlus" | "trash" | "arrowUp" | "arrowRight" | "arrowDown" | "arrowLeft" | "undo" | "redo" | "trendDown" | "trendUp" | "save" | "minus" | "minusCircle" | "percent" | "enter" | "enterRight" | "money" | "ghost" | "warning" | "home" | "settings" | "search" | "university" | "printer" | "picture" | "visualization" | "dashboard" | "metric" | "fact" | "ldmAttribute" | "ldmKey" | "ldmLabel" | "sharp" | "attribute" | "horn" | "cw" | "ccw" | "table" | "directionColumn" | "directionRow" | "header" | "genai" | "genai2" | "explainai" | "hiddenForAi" | "box" | "ellipsisVertical" | "list" | "drillTo" | "hierarchy" | "history" | "history2" | "thumbsUp" | "thumbsDown" | "send" | "visualizationArea" | "visualizationTable" | "visualizationTreemap" | "visualizationScatter" | "visualizationDonut" | "visualizationHeadline" | "visualizationColumn" | "visualizationLine" | "visualizationPyramid" | "visualizationFunnel" | "visualizationHeatmap" | "visualizationBubble" | "visualizationPie" | "visualizationBar" | "visualizationCombo" | "visualizationBullet" | "visualizationWaterfall" | "visualizationDependencywheel" | "visualizationSankey" | "visualizationPushpin" | "visualizationRepeater" | "visualizationXirr" | "link" | "externalLink" | "click" | "fileXlsx" | "filePptx" | "filePdf" | "fileImage" | "fileCsvFormatted" | "fileCsvRaw" | "aiDocument" | "recommendation" | "streamUp" | "streamDown" | "stream" | "density" | "parameter" | "pin" | "unpin" | "speechBubble" | "pieChart";
 
 /**
  * @internal
@@ -3265,6 +3265,8 @@ export declare interface IDropdownProps {
     closeOnParentScroll?: boolean;
     ignoreClicksOnByClass?: string[];
     onOpenStateChanged?: (isOpen: boolean) => void;
+    /** Reports the align point the Overlay chose whenever it (re)positions the body. */
+    onAlign?: (alignment: Alignment) => void;
     overlayPositionType?: OverlayPositionType;
     overlayZIndex?: number;
     /**
@@ -6048,6 +6050,14 @@ export declare interface IStylingEditorDialogProps<T extends StylingPickerItemCo
     onExit?: (name: string, definition: string) => void;
     onInvalidDefinition?: (ref: ObjRef) => void;
     showBackButton?: boolean;
+    /**
+     * Optional validation of the parsed definition content (e.g. checking theme color values).
+     *
+     * @remarks
+     * Called only when the definition is valid JSON. Return a localized error message to block
+     * submission and display it, or undefined when the content is valid.
+     */
+    validateDefinition?: (content: T) => string | undefined;
 }
 
 /**
@@ -6301,36 +6311,51 @@ export declare interface ITypographyProps {
 /**
  * @internal
  */
-export declare interface IUiAddGranteeDialogProps {
-    /** Whether the dialog is shown. */
-    isOpen: boolean;
+export declare interface IUiAddGranteeDialogCardProps {
     /** Object title shown in the header — wrapped into `Share "\{title\}"`. */
     objectTitle: string;
-    /** Current search query. */
-    searchQuery: string;
-    /** Fires when the user edits the search query. */
-    onSearchQueryChange: (next: string) => void;
+    /** Loader passed straight through to the embedded `UiGranteeAsyncPicker`. */
+    loadOptions: (search: string) => Promise<IUiGranteeAsyncOptions>;
+    /**
+     * Grantees currently picked. Single source of truth — the card derives all
+     * row state from it and emits the next list via `onSelectedGranteesChange`.
+     */
+    selectedGrantees: ReadonlyArray<IUiPickedGrantee>;
+    /**
+     * Fires with the next list when the user picks a grantee, changes a row's
+     * permission level, or removes a row. Consumers store the result in their
+     * own state.
+     */
+    onSelectedGranteesChange: (next: IUiPickedGrantee[]) => void;
     /**
-     * Optional slot rendered between the search input and the bottom divider.
-     * When empty, the screen falls back to a "No user or group selected"
-     * placeholder. Callers typically render a single `UiGranteeRow`
-     * here to preview the grantee they've picked from the search dropdown.
+     * Permission level used when a grantee is added from the dropdown.
+     * Defaults to `"VIEW"`. Consumers that need a different default (e.g.
+     * "SHARE" for owners) override here.
      */
-    selectedGrantee?: ReactNode;
+    initialPermissionLevel?: PermissionMenuLevel;
     /** Fires when the user clicks the header back-arrow button. */
     onBack: () => void;
-    /** Fires when the user clicks the header X close button or dismisses the modal. */
+    /** Fires when the user clicks the header X close button. */
     onClose: () => void;
     /** Fires when the user clicks Cancel in the footer. */
     onCancel: () => void;
-    /** Fires when the user clicks the primary Add button in the footer. */
-    onAdd: () => void;
-    /** When true, the primary Add button is disabled. */
-    isAddDisabled?: boolean;
-    /** Test id forwarded to the modal overlay. */
+    /**
+     * Fires when the user clicks the primary Share button in the footer. The
+     * button is disabled while no grantee has been picked.
+     */
+    onShare: () => void;
+    /** Test id forwarded to the root element. */
     dataTestId?: string;
 }
 
+/**
+ * @internal
+ */
+export declare interface IUiAddGranteeDialogProps extends IUiAddGranteeDialogCardProps {
+    /** Whether the dialog is shown. */
+    isOpen: boolean;
+}
+
 /**
  * @internal
  */
@@ -6490,6 +6515,70 @@ export declare interface IUiAsyncTableTitleProps {
     scrollToStart: () => void;
 }
 
+/** @internal */
+export declare interface IUiAutocompleteLoadResult<T extends IUiAutocompleteOption = IUiAutocompleteOption> {
+    sections: IUiAutocompleteSection<T>[];
+    /** Show a "Load more" row whose activation calls the loader with the next page. */
+    hasNextPage?: boolean;
+}
+
+/**
+ * User-facing copy overrides. Omitted fields fall back to the kit default.
+ *
+ * @internal
+ */
+export declare interface IUiAutocompleteMessages {
+    searchPlaceholder?: string;
+    stateLoading?: string;
+    stateError?: string;
+    stateNoMatch?: string;
+    loadMore?: string;
+}
+
+/**
+ * Minimal option shape; specialized pickers map their domain objects onto it.
+ *
+ * @internal
+ */
+export declare interface IUiAutocompleteOption {
+    id: string;
+    label: string;
+    /** Secondary label rendered muted next to the primary label. */
+    secondaryText?: string;
+}
+
+/** @internal */
+export declare interface IUiAutocompleteProps<T extends IUiAutocompleteOption = IUiAutocompleteOption> {
+    /**
+     * Called with the debounced search and zero-based `page` index. Page 0
+     * fires on every query change; subsequent pages fire on Load-more.
+     *
+     * Must be referentially stable (memoize with `useCallback`) — it is a
+     * fetch dependency, so a new identity each render re-runs the page-0 query.
+     */
+    loadOptions: (search: string, page: number) => Promise<IUiAutocompleteLoadResult<T>>;
+    /** Filtered out of the dropdown so the user cannot pick the same option twice. */
+    selectedIds?: ReadonlyArray<string>;
+    onSelect: (option: T) => void;
+    /** Debounce delay for the input → loader path. Defaults to 400 ms. */
+    debounceMs?: number;
+    messages?: IUiAutocompleteMessages;
+    /**
+     * Forwarded to the search input for the accessible name / description.
+     * The combobox-internal attributes (`role`, `ariaExpanded`, `ariaControls`,
+     * `ariaAutocomplete`) are owned by the component and cannot be overridden.
+     */
+    accessibilityConfig?: IAccessibilityConfigBase;
+    dataTestId?: string;
+}
+
+/** @internal */
+export declare interface IUiAutocompleteSection<T extends IUiAutocompleteOption = IUiAutocompleteOption> {
+    id: string;
+    label: string;
+    options: T[];
+}
+
 /**
  * @internal
  */
@@ -6669,8 +6758,12 @@ export declare interface IUiChipProps {
 
 /** @internal */
 export declare interface IUiComboboxInputProps {
-    /** Accessible name for the input. */
-    "aria-label"?: string;
+    /**
+     * Accessible name/description for the input (e.g. `ariaLabel`,
+     * `ariaDescribedBy`). The combobox role and listbox-wiring attributes are
+     * owned by the component and override anything passed here.
+     */
+    accessibilityConfig?: IAccessibilityConfigBase;
     /** Visible placeholder. */
     placeholder?: string;
     /** Form field name forwarded to the underlying input. */
@@ -7200,6 +7293,60 @@ export declare interface IUiGeneralAccessRadioProps {
     dataTestId?: string;
 }
 
+/**
+ * One pickable user or group entry.
+ *
+ * @internal
+ */
+export declare interface IUiGranteeAsyncOption {
+    /** Stable identifier — used as the React key and as the value passed to `onSelect`. */
+    id: string;
+    /** Avatar variant. */
+    kind: GranteeAvatarKind;
+    /** Display name shown on the row. */
+    name: string;
+    /** Optional email subline (users only). */
+    email?: string;
+}
+
+/**
+ * Result returned by the consumer's loader: separate `groups` and `users` arrays
+ * so the dropdown can render the two sections independently. Either may be empty.
+ *
+ * @internal
+ */
+export declare interface IUiGranteeAsyncOptions {
+    groups: IUiGranteeAsyncOption[];
+    users: IUiGranteeAsyncOption[];
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiGranteeAsyncPickerProps {
+    /**
+     * Loader called whenever the (debounced) search query changes. The empty
+     * string is passed on mount to populate the initial dropdown. Pagination
+     * is intentionally not exposed at this layer — the loader returns the
+     * full search result and the consumer caps backend results elsewhere.
+     */
+    loadOptions: (search: string) => Promise<IUiGranteeAsyncOptions>;
+    /**
+     * Grantees already picked. Rendered below the search input as `UiGranteeRow`s
+     * with a `UiPermissionMenu` trigger and a Remove action. Also filtered out
+     * of the dropdown so the user cannot pick the same grantee twice.
+     */
+    selectedGrantees?: ReadonlyArray<IUiPickedGrantee>;
+    /** Fires when the user picks an option from the dropdown. */
+    onSelect: (option: IUiGranteeAsyncOption) => void;
+    /** Fires when the user changes the permission level on a picked row. */
+    onPermissionChange?: (grantee: IUiPickedGrantee, next: PermissionMenuLevel) => void;
+    /** Fires when the user picks Remove access in the row's permission menu. */
+    onRemove?: (grantee: IUiPickedGrantee) => void;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+
 /**
  * @internal
  */
@@ -8051,6 +8198,16 @@ export declare interface IUiPermissionMenuProps {
     dataTestId?: string;
 }
 
+/**
+ * A previously-picked grantee with its current permission level.
+ *
+ * @internal
+ */
+export declare interface IUiPickedGrantee extends IUiGranteeAsyncOption {
+    /** Permission level chosen for this grantee. Drives the row's permission menu trigger label. */
+    permissionLevel: PermissionMenuLevel;
+}
+
 /**
  * @internal
  */
@@ -10023,13 +10180,28 @@ export declare function Typography({ tagName: Tag, children, className, title, i
 export declare type TypographyTagName = "h1" | "h2" | "h3" | "p";
 
 /**
- * Modal dialog for adding a grantee, opened from the share dialog's
- * "+ Add" action. Lets the author search for a user or group, preview the
- * grantee they picked, and confirm adding them with the footer Add button.
+ * Add-grantee dialog — wraps `UiAddGranteeDialogCard` in `UiModalDialog`
+ * for the full modal contract (portal, dimmed backdrop, focus trap, Esc
+ * and backdrop dismiss).
+ *
+ * @internal
+ */
+export declare function UiAddGranteeDialog({ isOpen, ...cardProps }: IUiAddGranteeDialogProps): JSX.Element;
+
+/**
+ * Add-grantee dialog card — header + grantee picker (search input with
+ * sectioned Groups/Users dropdown and picked-rows list) + footer with Cancel
+ * and Share. Renders inline as a plain card. For modal behavior (portal,
+ * backdrop, focus trap, dismiss), use `UiAddGranteeDialog` which wraps this
+ * in `UiModalDialog`.
+ *
+ * The card owns the visual composition (picker layout) but no policy. The
+ * caller controls the picked list via `selectedGrantees` / `onSelectedGranteesChange`,
+ * and may override the initial permission level via `initialPermissionLevel`.
  *
  * @internal
  */
-export declare function UiAddGranteeDialog({ isOpen, objectTitle, searchQuery, onSearchQueryChange, selectedGrantee, onBack, onClose, onCancel, onAdd, isAddDisabled, dataTestId }: IUiAddGranteeDialogProps): JSX.Element;
+export declare function UiAddGranteeDialogCard({ objectTitle, loadOptions, selectedGrantees, onSelectedGranteesChange, initialPermissionLevel, onBack, onClose, onCancel, onShare, dataTestId }: IUiAddGranteeDialogCardProps): JSX.Element;
 
 /**
  * @internal
@@ -10099,6 +10271,14 @@ export declare function UiAsyncTableTitle({ title, onSearch, renderIcon, actions
  */
 export declare type UiAsyncTableVariant = "regular" | "small";
 
+/**
+ * Async autocomplete: text input + sectioned listbox driven by a `loadOptions`
+ * loader. Implements the ARIA combobox+listbox APG pattern.
+ *
+ * @internal
+ */
+export declare function UiAutocomplete<T extends IUiAutocompleteOption = IUiAutocompleteOption>({ loadOptions, selectedIds, onSelect, debounceMs, messages, accessibilityConfig, dataTestId }: IUiAutocompleteProps<T>): JSX.Element;
+
 /**
  * Wrapper that focuses the first focusable child when it mounts, or when `refocusKey` changes.
  *
@@ -10408,6 +10588,17 @@ export declare function UiFocusTrap({ root, children, focusCheckFn }: {
  */
 export declare function UiGeneralAccessRadio({ value, onChange, workspaceControls, dataTestId }: IUiGeneralAccessRadioProps): JSX.Element;
 
+/**
+ * Sectioned async grantee picker — specialization of `UiAutocomplete` for the
+ * share/access-control domain. Renders a search input with a dropdown split
+ * into `Groups` and `Users` sections, and a list of picked grantees below
+ * (each as a `UiGranteeRow` with a `UiPermissionMenu` trigger). The
+ * permission menu carries the Remove action; consumers wire it via `onRemove`.
+ *
+ * @internal
+ */
+export declare function UiGranteeAsyncPicker({ loadOptions, selectedGrantees, onSelect, onPermissionChange, onRemove, dataTestId }: IUiGranteeAsyncPickerProps): JSX.Element;
+
 /**
  * 32×32 circle avatar used by the OLP share-dialog grantee list. Thin wrapper
  * over `UiAvatar` that picks the right silhouette and i18n

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.42.0-alpha.2",
+  "version": "11.42.0-alpha.4",
   "description": "GoodData SDK - UI Building Components",
   "license": "MIT",
   "author": "GoodData Corporation",
@@ -75,11 +75,11 @@
     "tslib": "2.8.1",
     "unified": "^11.0.5",
     "uuid": "11.1.1",
-    "@gooddata/sdk-backend-spi": "11.42.0-alpha.2",
-    "@gooddata/sdk-model": "11.42.0-alpha.2",
-    "@gooddata/sdk-ui-theme-provider": "11.42.0-alpha.2",
-    "@gooddata/sdk-ui": "11.42.0-alpha.2",
-    "@gooddata/util": "11.42.0-alpha.2"
+    "@gooddata/sdk-backend-spi": "11.42.0-alpha.4",
+    "@gooddata/sdk-model": "11.42.0-alpha.4",
+    "@gooddata/sdk-ui": "11.42.0-alpha.4",
+    "@gooddata/sdk-ui-theme-provider": "11.42.0-alpha.4",
+    "@gooddata/util": "11.42.0-alpha.4"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.17.0",
@@ -128,11 +128,11 @@
     "typescript": "5.9.3",
     "vitest": "4.1.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.42.0-alpha.2",
-    "@gooddata/oxlint-config": "11.42.0-alpha.2",
-    "@gooddata/reference-workspace": "11.42.0-alpha.2",
-    "@gooddata/sdk-backend-mockingbird": "11.42.0-alpha.2",
-    "@gooddata/stylelint-config": "11.42.0-alpha.2"
+    "@gooddata/eslint-config": "11.42.0-alpha.4",
+    "@gooddata/oxlint-config": "11.42.0-alpha.4",
+    "@gooddata/reference-workspace": "11.42.0-alpha.4",
+    "@gooddata/sdk-backend-mockingbird": "11.42.0-alpha.4",
+    "@gooddata/stylelint-config": "11.42.0-alpha.4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiAddGranteeDialog/UiAddGranteeDialog.scss

@@ -5,18 +5,4 @@
     flex-direction: column;
     gap: var(--gd-spacing-10px);
     padding-bottom: var(--gd-spacing-5px);
-
-    &__preview {
-        display: flex;
-        align-items: center;
-        min-height: 50px;
-    }
-
-    &__empty-state {
-        flex: 1 1 auto;
-        text-align: center;
-        font-size: 14px;
-        line-height: 20px;
-        color: var(--gd-palette-complementary-6);
-    }
 }

package/src/@ui/UiAutocomplete/UiAutocomplete.scss

@@ -0,0 +1,53 @@
+.gd-ui-kit-autocomplete {
+    position: relative;
+
+    &__list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        max-height: 320px;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+    }
+
+    &__section-header {
+        padding: 4px 12px;
+    }
+
+    &__option {
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+        padding: 6px 12px;
+        line-height: 20px;
+        cursor: pointer;
+
+        &--isActive {
+            background: var(--gd-palette-complementary-2);
+        }
+
+        &:hover {
+            background: var(--gd-palette-complementary-2);
+        }
+    }
+
+    &__option-label {
+        color: var(--gd-palette-complementary-9);
+        font-size: 14px;
+    }
+
+    &__option-secondary {
+        color: var(--gd-palette-complementary-6);
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__state {
+        padding: 12px;
+        color: var(--gd-palette-complementary-6);
+        font-size: 14px;
+        text-align: center;
+    }
+}

package/src/@ui/UiGranteeAsyncPicker/UiGranteeAsyncPicker.scss

@@ -0,0 +1,28 @@
+.gd-ui-kit-grantee-async-picker {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    &__empty-state {
+        min-height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        font-size: 14px;
+        line-height: 20px;
+        color: var(--gd-palette-complementary-6);
+    }
+
+    &__picked-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__picked-item {
+        display: block;
+    }
+}

package/src/@ui/index.scss

@@ -10,6 +10,7 @@
 @use "./UiChip/UiChip.scss";
 @use "./UiControlButton/UiControlButton.scss";
 @use "./UiCombobox/UiCombobox.scss";
+@use "./UiAutocomplete/UiAutocomplete.scss";
 @use "./UiListbox/UiListbox.scss";
 @use "./UiTreeview/UiTreeview.scss";
 @use "./UiMenu/UiMenu.scss";
@@ -41,6 +42,7 @@
 @use "./UiModalDialog/UiModalDialog.scss";
 @use "./UiObjectShareDialog/UiObjectShareDialog.scss";
 @use "./UiAddGranteeDialog/UiAddGranteeDialog.scss";
+@use "./UiGranteeAsyncPicker/UiGranteeAsyncPicker.scss";
 @use "./UiGeneralAccessRadio/UiGeneralAccessRadio.scss";
 @use "./UiLabelRow/UiLabelRow.scss";
 @use "./UiLabelsList/UiLabelsList.scss";

package/styles/css/main.css

@@ -1592,6 +1592,52 @@
   color: var(--gd-palette-complementary-6, #94a1ad);
 }
 
+.gd-ui-kit-autocomplete {
+  position: relative;
+}
+.gd-ui-kit-autocomplete__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  max-height: 320px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.gd-ui-kit-autocomplete__section-header {
+  padding: 4px 12px;
+}
+.gd-ui-kit-autocomplete__option {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  padding: 6px 12px;
+  line-height: 20px;
+  cursor: pointer;
+}
+.gd-ui-kit-autocomplete__option--isActive {
+  background: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-autocomplete__option:hover {
+  background: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-autocomplete__option-label {
+  color: var(--gd-palette-complementary-9);
+  font-size: 14px;
+}
+.gd-ui-kit-autocomplete__option-secondary {
+  color: var(--gd-palette-complementary-6);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gd-ui-kit-autocomplete__state {
+  padding: 12px;
+  color: var(--gd-palette-complementary-6);
+  font-size: 14px;
+  text-align: center;
+}
+
 .gd-ui-kit-listbox {
   max-height: 300px;
   overflow-y: auto;
@@ -3730,18 +3776,32 @@
   gap: var(--gd-spacing-10px);
   padding-bottom: var(--gd-spacing-5px);
 }
-.gd-ui-kit-add-grantee-dialog__preview {
+
+.gd-ui-kit-grantee-async-picker {
   display: flex;
-  align-items: center;
-  min-height: 50px;
+  flex-direction: column;
+  gap: 12px;
 }
-.gd-ui-kit-add-grantee-dialog__empty-state {
-  flex: 1 1 auto;
+.gd-ui-kit-grantee-async-picker__empty-state {
+  min-height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   text-align: center;
   font-size: 14px;
   line-height: 20px;
   color: var(--gd-palette-complementary-6);
 }
+.gd-ui-kit-grantee-async-picker__picked-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+.gd-ui-kit-grantee-async-picker__picked-item {
+  display: block;
+}
 
 .gd-ui-kit-general-access-radio {
   display: flex;