@gooddata/sdk-ui-kit 10.28.0-alpha.24 → 10.28.0-alpha.26

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

@@ -26,6 +26,7 @@ import { IAnalyticalBackend } from '@gooddata/sdk-backend-spi';
 import { IAuditableUsers } from '@gooddata/sdk-model';
 import { IColorPalette } from '@gooddata/sdk-model';
 import { IColorPaletteDefinition } from '@gooddata/sdk-model';
+import { IContextStore } from '@gooddata/sdk-ui';
 import { IExecutionConfig } from '@gooddata/sdk-model';
 import { IFilter } from '@gooddata/sdk-model';
 import { ILocale } from '@gooddata/sdk-ui';
@@ -561,15 +562,51 @@ export declare function DefaultUiListboxInteractiveItemComponent<T>({ item, isFo
 export declare function DefaultUiListboxStaticItemComponent<T>({ item, }: UiListboxStaticItemProps<T>): React_2.ReactNode;
 
 /**
+ * Container for rendering custom content in menu.
  * @internal
  */
-export declare function DefaultUiMenuInteractiveItemComponent<T extends IUiMenuItemData = object>({ item, isFocused, onSelect, }: UiMenuInteractiveItemProps<T>): React_2.ReactNode;
+export declare const DefaultUiMenuContent: React_2.MemoExoticComponent<(<T extends IUiMenuItemData = object>({ item }: {
+    item: IUiMenuContentItem<T>;
+}) => React_2.ReactElement)>;
+
+/**
+ * @internal
+ */
+export declare function DefaultUiMenuContentItem<T extends IUiMenuItemData = object>({ item, isFocused, onSelect, }: IUiMenuContentItemProps<T>): React_2.ReactNode;
+
+/**
+ * Default component for rendering content menu items.
+ * @internal
+ */
+export declare const DefaultUiMenuContentItemWrapper: React_2.MemoExoticComponent<(<T extends IUiMenuItemData = object>({ item }: IUiMenuContentItemWrapperProps<T>) => React_2.ReactElement)>;
+
+/**
+ * @internal
+ */
+export declare function DefaultUiMenuGroupItem<T extends IUiMenuItemData = object>({ item, }: IUiMenuGroupItemProps<T>): React_2.ReactNode;
+
+/**
+ * Renders the submenu header when in a submenu.
+ * If not in a submenu, returns null.
+ * @internal
+ */
+export declare const DefaultUiMenuHeader: React_2.FC;
+
+/**
+ * @internal
+ */
+export declare function DefaultUiMenuInteractiveItem<T extends IUiMenuItemData = object>({ item, isFocused, onSelect, }: IUiMenuInteractiveItemProps<T>): React_2.ReactNode;
+
+/**
+ * @internal
+ */
+export declare function DefaultUiMenuInteractiveItemWrapper<T extends IUiMenuItemData = object>({ item, }: IUiMenuInteractiveItemWrapperProps<T>): React_2.ReactNode;
 
 /**
  * By default just renders the data.
  * @internal
  */
-export declare const DefaultUiMenuStaticItemComponent: React_2.MemoExoticComponent<(<T extends IUiMenuItemData = object>({ item }: UiMenuStaticItemProps<T>) => React_2.ReactElement)>;
+export declare const DefaultUiMenuStaticItem: React_2.MemoExoticComponent<(<T extends IUiMenuItemData = object>({ item }: IUiMenuStaticItemProps<T>) => React_2.ReactElement)>;
 
 /**
  * @internal
@@ -747,6 +784,18 @@ export declare const FilterLabel: React_2.FC<WithIntlProps<IFilterLabelProps & W
     WrappedComponent: React_2.ComponentType<IFilterLabelProps & WrappedComponentProps>;
 };
 
+/**
+ * Finds an interactive menu item that matches the predicate.
+ * @internal
+ */
+export declare const findInteractiveItem: <T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[], predicate: (item: IUiMenuInteractiveItem<T>) => boolean) => IUiMenuInteractiveItem<T>;
+
+/**
+ * Recursively finds an item in the menu tree that matches the predicate.
+ * @internal
+ */
+export declare const findItem: <T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[], predicate: (item: IUiMenuItem<T>) => boolean) => IUiMenuItem<T>;
+
 /**
  * @internal
  */
@@ -838,6 +887,17 @@ export declare function generateHeaderStaticHelpMenuItems(documentationUrl?: str
  */
 export declare function generateSupportUrl(projectId?: string, sessionId?: string, userEmail?: string, url?: string): string;
 
+/**
+ * Gets the closest focusable sibling item in the specified direction.
+ * @internal
+ */
+export declare const getClosestFocusableSibling: <T extends IUiMenuItemData = object>(args: {
+    items: IUiMenuItem<T>[];
+    isItemFocusable: (item: IUiMenuItem<T>) => boolean;
+    itemId?: string;
+    direction: "forward" | "backward";
+}) => IUiMenuItem<T>;
+
 /**
  * This function transforms a color palette into an array of max ten colors which is used
  * to render the color palette in styling picker.
@@ -893,6 +953,36 @@ export declare const getGranteeItemTestId: (grantee: GranteeItem, prefix?: "opti
  */
 export declare const getHeightWithUnitsForEmbedCode: (codeOption: EmbedOptionsType) => string | number;
 
+/**
+ * Gets an interactive menu item by its ID.
+ * @internal
+ */
+export declare const getInteractiveItem: <T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[], itemId: string) => IUiMenuInteractiveItem<T>;
+
+/**
+ * Gets a menu item by its ID.
+ * @internal
+ */
+export declare const getItem: <T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[], itemId: string) => IUiMenuItem<T>;
+
+/**
+ * Gets the interactive parent of a menu item.
+ * @internal
+ */
+export declare const getItemInteractiveParent: <T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[], itemId: string) => IUiMenuInteractiveItem<T>;
+
+/**
+ * Gets all items under a specific interactive parent item.
+ * @internal
+ */
+export declare const getItemsByInteractiveParent: <T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[], parentId?: string) => IUiMenuItem<T>[];
+
+/**
+ * Gets all next sibling items of a menu item with wraparound.
+ * @internal
+ */
+export declare const getNextSiblings: <T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[], itemId: string) => IUiMenuItem<T>[];
+
 /**
  * @internal
  */
@@ -925,11 +1015,28 @@ export declare type GetPositionedSelfRegion = {
     alignPoint: IAlignPoint;
 };
 
+/**
+ * Gets all previous sibling items of a menu item with wraparound.
+ * @internal
+ */
+export declare const getPreviousSiblings: <T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[], itemId: string) => IUiMenuItem<T>[];
+
 /**
  * @internal
  */
 export declare function getRecommendedDateDataset<T extends IDateDataset>(items: T[]): T;
 
+/**
+ * @internal
+ */
+export declare const getSelectedMenuId: <T extends IUiMenuItemData = object, M = object>(context: IUiMenuContext<T, M>) => string | undefined;
+
+/**
+ * Gets all sibling items of a menu item.
+ * @internal
+ */
+export declare const getSiblingItems: <T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[], itemId: string) => IUiMenuItem<T>[];
+
 /**
  * @internal
  */
@@ -1395,6 +1502,7 @@ export declare interface IButtonAccessibilityConfig extends IAccessibilityConfig
  */
 export declare interface IButtonProps {
     id?: string;
+    dataId?: string;
     className?: string;
     disabled?: boolean;
     tabIndex?: number;
@@ -4460,21 +4568,63 @@ export declare interface IUiListboxStaticItem<T> {
 /**
  * @internal
  */
-export declare interface IUiMenuContext<T extends IUiMenuItemData = object> extends IUiMenuPluggableComponents<T> {
+export declare type IUiMenuContentItem<T extends IUiMenuItemData = object> = {
+    type: "content";
+    id: string;
+    stringTitle: string;
+    isDisabled?: boolean;
+    showComponentOnly?: boolean;
+    data: T["content"];
+    Component: React_2.ComponentType<{
+        onBack: () => void;
+        onClose: () => void;
+    }>;
+};
+
+/**
+ * @internal
+ */
+export declare interface IUiMenuContentItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuContentItem<T>;
+    isFocused: boolean;
+    onSelect: () => void;
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiMenuContentItemWrapperProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuContentItem<T>;
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiMenuContentProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuContentItem<T>;
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiMenuContext<T extends IUiMenuItemData = object, M = object> extends IUiMenuPluggableComponents<T> {
     items: IUiMenuItem<T>[];
-    focusedItem: IUiMenuInteractiveItem<T> | undefined;
-    onSelect: (item: IUiMenuInteractiveItem<T> | undefined) => void;
+    focusedItem: IUiMenuFocusableItem<T> | undefined;
+    shownCustomContentItemId?: string;
+    setShownCustomContentItemId: React_2.Dispatch<React_2.SetStateAction<string | undefined>>;
+    onSelect: (item: IUiMenuFocusableItem<T> | undefined) => void;
     onClose?: () => void;
     setFocusedId: React_2.Dispatch<React_2.SetStateAction<string | undefined>>;
     isItemFocusable: (item: IUiMenuItem<T>) => boolean;
     controlType: IUiMenuControlType;
     setControlType: React_2.Dispatch<React_2.SetStateAction<IUiMenuControlType>>;
     scrollToView: (element: HTMLElement | null) => void;
-    makeItemId: (item: IUiMenuItem<T>) => string;
+    makeItemId: (item: IUiMenuItem<T>) => string | undefined;
     itemClassName?: ((item: IUiMenuItem<T>) => string | undefined) | string;
-    ItemComponent: React_2.ComponentType<UiMenuItemProps<T>>;
+    ItemComponent: React_2.ComponentType<IUiMenuItemProps<T>>;
     menuComponentRef: React_2.RefObject<HTMLElement>;
     itemsContainerRef: React_2.RefObject<HTMLElement>;
+    menuCtxData?: M;
 }
 
 /**
@@ -4482,6 +4632,11 @@ export declare interface IUiMenuContext<T extends IUiMenuItemData = object> exte
  */
 export declare type IUiMenuControlType = "keyboard" | "mouse" | "unknown";
 
+/**
+ * @internal
+ */
+export declare type IUiMenuFocusableItem<T extends IUiMenuItemData = object> = IUiMenuInteractiveItem<T> | IUiMenuContentItem<T>;
+
 /**
  * @internal
  */
@@ -4493,6 +4648,13 @@ export declare type IUiMenuGroupItem<T extends IUiMenuItemData = object> = {
     subItems: IUiMenuItem<T>[];
 };
 
+/**
+ * @internal
+ */
+export declare interface IUiMenuGroupItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuGroupItem<T>;
+}
+
 /**
  * @internal
  */
@@ -4508,7 +4670,23 @@ export declare type IUiMenuInteractiveItem<T extends IUiMenuItemData = object> =
 /**
  * @internal
  */
-export declare type IUiMenuItem<T extends IUiMenuItemData = object> = IUiMenuStaticItem<T> | IUiMenuInteractiveItem<T> | IUiMenuGroupItem<T>;
+export declare interface IUiMenuInteractiveItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuInteractiveItem<T>;
+    isFocused: boolean;
+    onSelect: () => void;
+}
+
+/**
+ * @internal
+ */
+export declare interface IUiMenuInteractiveItemWrapperProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuInteractiveItem<T>;
+}
+
+/**
+ * @internal
+ */
+export declare type IUiMenuItem<T extends IUiMenuItemData = object> = IUiMenuStaticItem<T> | IUiMenuInteractiveItem<T> | IUiMenuGroupItem<T> | IUiMenuContentItem<T>;
 
 /**
  * @internal
@@ -4517,15 +4695,25 @@ export declare type IUiMenuItemData = {
     [type in IUiMenuItem<any>["type"]]?: unknown;
 };
 
+/**
+ * @internal
+ */
+export declare interface IUiMenuItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuItem<T>;
+}
+
 /**
  * @internal
  */
 export declare interface IUiMenuPluggableComponents<T extends IUiMenuItemData = object> {
-    InteractiveItemComponent: React_2.ComponentType<UiMenuInteractiveItemProps<T>>;
-    InteractiveItemWrapperComponent: React_2.ComponentType<UiMenuInteractiveItemWrapperProps<T>>;
-    GroupItemComponent: React_2.ComponentType<UiMenuGroupItemProps<T>>;
-    StaticItemComponent: React_2.ComponentType<UiMenuStaticItemProps<T>>;
-    MenuHeaderComponent: React_2.ComponentType;
+    InteractiveItem: React_2.ComponentType<IUiMenuInteractiveItemProps<T>>;
+    InteractiveItemWrapper: React_2.ComponentType<IUiMenuInteractiveItemWrapperProps<T>>;
+    GroupItem: React_2.ComponentType<IUiMenuGroupItemProps<T>>;
+    StaticItem: React_2.ComponentType<IUiMenuStaticItemProps<T>>;
+    ContentItemWrapper: React_2.ComponentType<IUiMenuContentItemWrapperProps<T>>;
+    ContentItem: React_2.ComponentType<IUiMenuContentItemProps<T>>;
+    Content: React_2.ComponentType<IUiMenuContentProps<T>>;
+    MenuHeader: React_2.ComponentType;
 }
 
 /**
@@ -4537,6 +4725,13 @@ export declare type IUiMenuStaticItem<T extends IUiMenuItemData = object> = {
     data: T["static"];
 };
 
+/**
+ * @internal
+ */
+export declare interface IUiMenuStaticItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuStaticItem<T>;
+}
+
 /**
  * @internal
  */
@@ -5266,6 +5461,11 @@ export declare type SizeMedium = "medium";
  */
 export declare type SizeSmall = "small";
 
+/**
+ * @internal
+ */
+export declare type SizeXSmall = "xsmall";
+
 /**
  * @internal
  */
@@ -5497,6 +5697,11 @@ export declare type TStylingEditorDialogFooterProps = {
  */
 export declare type TUTMContent = "main_menu_help_documentation" | "main_menu_help_university" | "main_menu_help_community" | "main_menu_help_support" | "main_menu_help_ticket" | "main_menu_help_slack";
 
+/**
+ * @internal
+ */
+export declare const typedUiMenuContextStore: <T extends IUiMenuItemData = object, M = object>() => IContextStore<IUiMenuContext<T, M>>;
+
 /**
  * @internal
  */
@@ -5599,7 +5804,7 @@ export declare const UiIconButton: React_2.ForwardRefExoticComponent<UiIconButto
 export declare interface UiIconButtonProps {
     icon: IconType;
     label: string;
-    size?: SizeSmall | SizeMedium | SizeLarge;
+    size?: SizeXSmall | SizeSmall | SizeMedium | SizeLarge;
     variant?: VariantPrimary | VariantSecondary | VariantTertiary | VariantPopOut | VariantDanger;
     isDisabled?: boolean;
     onClick?: (e: React_2.MouseEvent<HTMLButtonElement>) => void;
@@ -5671,47 +5876,18 @@ export declare interface UiListboxStaticItemProps<T> {
  *
  * @internal
  */
-export declare function UiMenu<T extends IUiMenuItemData = object>(props: UiMenuProps<T>): React_2.ReactNode;
-
-/**
- * @internal
- */
-export declare interface UiMenuGroupItemProps<T extends IUiMenuItemData = object> {
-    item: IUiMenuGroupItem<T>;
-}
-
-/**
- * @internal
- */
-export declare interface UiMenuInteractiveItemProps<T extends IUiMenuItemData = object> {
-    item: IUiMenuInteractiveItem<T>;
-    isFocused: boolean;
-    onSelect: () => void;
-}
-
-/**
- * @internal
- */
-export declare interface UiMenuInteractiveItemWrapperProps<T extends IUiMenuItemData = object> {
-    item: IUiMenuInteractiveItem<T>;
-}
-
-/**
- * @internal
- */
-export declare interface UiMenuItemProps<T extends IUiMenuItemData = object> {
-    item: IUiMenuItem<T>;
-}
+export declare function UiMenu<T extends IUiMenuItemData = object, M extends object = object>(props: UiMenuProps<T, M>): React_2.ReactNode;
 
 /**
  * @internal
  */
-export declare interface UiMenuProps<T extends IUiMenuItemData = object> extends Partial<IUiMenuPluggableComponents<T>> {
+export declare interface UiMenuProps<T extends IUiMenuItemData = object, M = object> extends Partial<IUiMenuPluggableComponents<T>> {
     items: IUiMenuItem<T>[];
-    className?: string;
+    className?: ((context: IUiMenuContext<T>) => string | undefined) | string;
     itemClassName?: ((item: IUiMenuItem<T>) => string | undefined) | string;
     maxWidth?: number;
     onSelect?: (item: IUiMenuInteractiveItem<T>) => void;
+    onLevelChange?: (level: number, item?: IUiMenuContentItem<T> | IUiMenuInteractiveItem<T>) => void;
     onClose?: () => void;
     onUnhandledKeyDown?: (event: React_2.KeyboardEvent, context: IUiMenuContext<T>) => void;
     shouldKeyboardActionPreventDefault?: boolean;
@@ -5719,13 +5895,7 @@ export declare interface UiMenuProps<T extends IUiMenuItemData = object> extends
     shouldCloseOnSelect?: boolean;
     isDisabledFocusable?: boolean;
     ariaAttributes: Omit<IDropdownBodyRenderProps["ariaAttributes"], "role">;
-}
-
-/**
- * @internal
- */
-export declare interface UiMenuStaticItemProps<T extends IUiMenuItemData = object> {
-    item: IUiMenuStaticItem<T>;
+    menuCtxData?: M;
 }
 
 /**
@@ -5802,6 +5972,12 @@ export declare type UnitsType = "px" | "%" | "rem" | "em";
  */
 export declare const unrelatedHeader: IDateDatasetHeader;
 
+/**
+ * Unwraps items from group containers into a flat array.
+ * @internal
+ */
+export declare function unwrapGroupItems<T extends IUiMenuItemData = object>(items: IUiMenuItem<T>[]): IUiMenuItem<T>[];
+
 /**
  * A helper hook to provide not just state/setState pair but also a debounced version of the state.
  * @internal

package/esm/utils/domUtilities.d.ts

@@ -39,4 +39,10 @@ export declare const getFocusableElements: (element?: HTMLElement) => {
     firstElement: HTMLElement;
     lastElement: HTMLElement;
 };
+/**
+ * @internal
+ * @param element - the element to test for focusability
+ * @returns whether or not the supplied element is focusable
+ */
+export declare const isElementFocusable: (element?: HTMLElement | null) => boolean;
 //# sourceMappingURL=domUtilities.d.ts.map

package/esm/utils/domUtilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"domUtilities.d.ts","sourceRoot":"","sources":["../../src/utils/domUtilities.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,aAAa,YAAa,WAAW,KAAG,IAIpD,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,YACN,WAAW,wBACE,OAAO,gDAE9B,OAeF,CAAC;AAiBF;;;;GAIG;AACH,eAAO,MAAM,eAAe,YAAa,WAAW,GAAG,MAAM,KAAG,OAe/D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,sBACH,WAAW,GAAG,MAAM,6BACZ,OAAO,KACnC,OAuCF,CAAC;AAEF,eAAO,MAAM,kBAAkB,YAAa,WAAW,GAAG,WAAW,GAAG,IAAI,GAAG,SAAS,KAAG,OAc1F,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,mBAAmB,YAI/D,CAAC;AAwBF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,aAAc,WAAW;;;;CAKzD,CAAC"}
+{"version":3,"file":"domUtilities.d.ts","sourceRoot":"","sources":["../../src/utils/domUtilities.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,aAAa,YAAa,WAAW,KAAG,IAIpD,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,YACN,WAAW,wBACE,OAAO,gDAE9B,OAeF,CAAC;AAiBF;;;;GAIG;AACH,eAAO,MAAM,eAAe,YAAa,WAAW,GAAG,MAAM,KAAG,OAe/D,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,sBACH,WAAW,GAAG,MAAM,6BACZ,OAAO,KACnC,OAuCF,CAAC;AAEF,eAAO,MAAM,kBAAkB,YAAa,WAAW,GAAG,WAAW,GAAG,IAAI,GAAG,SAAS,KAAG,OAc1F,CAAC;AAEF,eAAO,MAAM,qBAAqB,UAAW,mBAAmB,YAI/D,CAAC;AAwBF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,aAAc,WAAW;;;;CAKzD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,aAAc,WAAW,GAAG,IAAI,YAE9D,CAAC"}

package/esm/utils/domUtilities.js

@@ -145,4 +145,12 @@ export const getFocusableElements = (element) => {
     const lastElement = focusableElements?.[focusableElements.length - 1];
     return { focusableElements, firstElement, lastElement };
 };
+/**
+ * @internal
+ * @param element - the element to test for focusability
+ * @returns whether or not the supplied element is focusable
+ */
+export const isElementFocusable = (element) => {
+    return element?.matches(focusableElementsSelector);
+};
 //# sourceMappingURL=domUtilities.js.map

package/esm/utils/domUtilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"domUtilities.js","sourceRoot":"","sources":["../../src/utils/domUtilities.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAGhE;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAoB,EAAQ,EAAE;IACxD,IAAI,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC;AACL,CAAC,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAClB,OAAoB,EACpB,mBAA6B,EAC7B,YAAY,GAAG,MAAM,EACd,EAAE;IACT,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACrD,MAAM,UAAU,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC;IAC5F,MAAM,SAAS,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC;IAC1F,MAAM,KAAK,GAAG,OAAO,CAAC,WAAW,IAAI,YAAY,CAAC,KAAK,CAAC;IACxD,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,CAAC;IAE3D,OAAO;QACH,IAAI,EAAE,UAAU;QAChB,GAAG,EAAE,SAAS;QACd,KAAK;QACL,MAAM;QACN,MAAM,EAAE,SAAS,GAAG,MAAM;QAC1B,KAAK,EAAE,UAAU,GAAG,KAAK;KAC5B,CAAC;AACN,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,OAAO,GAAG,CAAC,OAAY,EAAE,EAAE;IAC7B,IAAI,IAAI,GAAG,OAAO,CAAC;IACnB,OAAO,IAAI,EAAE,CAAC;QACV,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IACD,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAA6B,EAAW,EAAE;IACtE,IAAI,IAAI,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAiB,CAAC,CAAC,CAAC,OAAO,CAAC;IAEpG,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,IAAI,EAAE,CAAC;QACV,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,KAAK,OAAO,EAAE,CAAC;YACnC,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,IAAI,GAAG,IAAI,CAAC,UAAyB,CAAC;IAC1C,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CACzB,iBAAuC,EACvC,wBAAkC,EAC3B,EAAE;IACT,MAAM,IAAI,GACN,OAAO,iBAAiB,KAAK,QAAQ;QACjC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAiB;QAC5D,CAAC,CAAC,iBAAiB,CAAC;IAE5B,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,EAAa,CAAC;IACzB,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAChB,qEAAqE;QACrE,OAAO,MAAM,CAAC,IAAI,EAAE,wBAAwB,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,wCAAwC;IACxC,uDAAuD;IACvD,yEAAyE;IACzE,yDAAyD;IACzD,MAAM,WAAW,GAAG;QAChB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ;QAC7B,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU;KACpC,CAAC;IAEF,yEAAyE;IACzE,kBAAkB;IAClB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IACjC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAEhC,0BAA0B;IAC1B,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzB,6CAA6C;IAC7C,aAAa,CAAC,IAAI,CAAC,CAAC;IACpB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC;IAC3C,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC;IAE/C,OAAO,GAAG,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAqD,EAAW,EAAE;IACjG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,SAAS,IAAI,OAAO,CAAC,EAAE,CAAC;QACtC,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,OAA2B,CAAC;IAEtD,MAAM,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;IACjD,MAAM,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvD,OAAO,CACH,kBAAkB,KAAK,UAAU;QACjC,CAAC,kBAAkB,KAAK,OAAO,IAAI,CAAC,eAAe,KAAK,MAAM,IAAI,eAAe,KAAK,QAAQ,CAAC,CAAC,CACnG,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA0B,EAAE,EAAE;IAChE,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,MAAqB,CAAC;IAE3C,OAAO,EAAE,KAAK,sBAAsB,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG;IAC9B,4BAA4B;IAC5B,mDAAmD;IACnD,kDAAkD;IAClD,mDAAmD;IACnD,qDAAqD;IAErD,kBAAkB;IAClB,SAAS;IACT,YAAY;IAEZ,gCAAgC;IAChC,4EAA4E;IAE5E,sBAAsB;IACtB,iBAAiB;IACjB,iBAAiB;IAEjB,mBAAmB;IACnB,kDAAkD;CACrD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ;;;;;GAKG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAqB,EAAE,EAAE;IAC1D,MAAM,iBAAiB,GAAG,OAAO,EAAE,gBAAgB,CAAc,yBAAyB,CAAC,CAAC;IAC5F,MAAM,YAAY,GAAG,iBAAiB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,iBAAiB,EAAE,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACtE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;AAC5D,CAAC,CAAC"}
+{"version":3,"file":"domUtilities.js","sourceRoot":"","sources":["../../src/utils/domUtilities.ts"],"names":[],"mappings":"AAAA,qCAAqC;AAErC,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAGhE;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,OAAoB,EAAQ,EAAE;IACxD,IAAI,OAAO,EAAE,UAAU,EAAE,CAAC;QACtB,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC5C,CAAC;AACL,CAAC,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAClB,OAAoB,EACpB,mBAA6B,EAC7B,YAAY,GAAG,MAAM,EACd,EAAE;IACT,MAAM,YAAY,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IACrD,MAAM,UAAU,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC;IAC5F,MAAM,SAAS,GAAG,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC;IAC1F,MAAM,KAAK,GAAG,OAAO,CAAC,WAAW,IAAI,YAAY,CAAC,KAAK,CAAC;IACxD,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,CAAC;IAE3D,OAAO;QACH,IAAI,EAAE,UAAU;QAChB,GAAG,EAAE,SAAS;QACd,KAAK;QACL,MAAM;QACN,MAAM,EAAE,SAAS,GAAG,MAAM;QAC1B,KAAK,EAAE,UAAU,GAAG,KAAK;KAC5B,CAAC;AACN,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,OAAO,GAAG,CAAC,OAAY,EAAE,EAAE;IAC7B,IAAI,IAAI,GAAG,OAAO,CAAC;IACnB,OAAO,IAAI,EAAE,CAAC;QACV,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IACD,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAA6B,EAAW,EAAE;IACtE,IAAI,IAAI,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAiB,CAAC,CAAC,CAAC,OAAO,CAAC;IAEpG,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,IAAI,EAAE,CAAC;QACV,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,KAAK,OAAO,EAAE,CAAC;YACnC,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,IAAI,GAAG,IAAI,CAAC,UAAyB,CAAC;IAC1C,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CACzB,iBAAuC,EACvC,wBAAkC,EAC3B,EAAE;IACT,MAAM,IAAI,GACN,OAAO,iBAAiB,KAAK,QAAQ;QACjC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAiB;QAC5D,CAAC,CAAC,iBAAiB,CAAC;IAE5B,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,EAAa,CAAC;IACzB,CAAC;IAED,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAChB,qEAAqE;QACrE,OAAO,MAAM,CAAC,IAAI,EAAE,wBAAwB,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,wCAAwC;IACxC,uDAAuD;IACvD,yEAAyE;IACzE,yDAAyD;IACzD,MAAM,WAAW,GAAG;QAChB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ;QAC7B,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU;KACpC,CAAC;IAEF,yEAAyE;IACzE,kBAAkB;IAClB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;IACjC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAEhC,0BAA0B;IAC1B,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAEzB,6CAA6C;IAC7C,aAAa,CAAC,IAAI,CAAC,CAAC;IACpB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC;IAC3C,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,WAAW,CAAC,UAAU,CAAC;IAE/C,OAAO,GAAG,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAAqD,EAAW,EAAE;IACjG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,SAAS,IAAI,OAAO,CAAC,EAAE,CAAC;QACtC,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,OAA2B,CAAC;IAEtD,MAAM,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;IACjD,MAAM,eAAe,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvD,OAAO,CACH,kBAAkB,KAAK,UAAU;QACjC,CAAC,kBAAkB,KAAK,OAAO,IAAI,CAAC,eAAe,KAAK,MAAM,IAAI,eAAe,KAAK,QAAQ,CAAC,CAAC,CACnG,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAA0B,EAAE,EAAE;IAChE,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,MAAqB,CAAC;IAE3C,OAAO,EAAE,KAAK,sBAAsB,CAAC;AACzC,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG;IAC9B,4BAA4B;IAC5B,mDAAmD;IACnD,kDAAkD;IAClD,mDAAmD;IACnD,qDAAqD;IAErD,kBAAkB;IAClB,SAAS;IACT,YAAY;IAEZ,gCAAgC;IAChC,4EAA4E;IAE5E,sBAAsB;IACtB,iBAAiB;IACjB,iBAAiB;IAEjB,mBAAmB;IACnB,kDAAkD;CACrD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ;;;;;GAKG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,OAAqB,EAAE,EAAE;IAC1D,MAAM,iBAAiB,GAAG,OAAO,EAAE,gBAAgB,CAAc,yBAAyB,CAAC,CAAC;IAC5F,MAAM,YAAY,GAAG,iBAAiB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,iBAAiB,EAAE,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACtE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;AAC5D,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,OAA4B,EAAE,EAAE;IAC/D,OAAO,OAAO,EAAE,OAAO,CAAC,yBAAyB,CAAC,CAAC;AACvD,CAAC,CAAC"}

package/esm/utils/useAutofocusOnMount.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Focuses the element when it mounts.
+ *
+ * @internal
+ */
+export declare const useAutofocusOnMount: (timeout?: number) => (node: HTMLElement | null) => void;
+//# sourceMappingURL=useAutofocusOnMount.d.ts.map

package/esm/utils/useAutofocusOnMount.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutofocusOnMount.d.ts","sourceRoot":"","sources":["../../src/utils/useAutofocusOnMount.ts"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,aAAc,MAAM,YA6BhB,WAAW,GAAG,IAAI,SAQrD,CAAC"}

package/esm/utils/useAutofocusOnMount.js

@@ -0,0 +1,40 @@
+// (C) 2025 GoodData Corporation
+import React from "react";
+import { getFocusableElements, isElementFocusable } from "./domUtilities.js";
+import { useAutoupdateRef } from "@gooddata/sdk-ui";
+/**
+ * Focuses the element when it mounts.
+ *
+ * @internal
+ */
+export const useAutofocusOnMount = (timeout) => {
+    const [element, setElement] = React.useState(null);
+    const hasFiredRef = React.useRef(false);
+    const timeoutRef = useAutoupdateRef(timeout);
+    React.useEffect(() => {
+        if (!element) {
+            return undefined;
+        }
+        if (element.contains(document.activeElement)) {
+            // Do not change focus, if the focused element is already inside the ref
+            return undefined;
+        }
+        const elementToFocus = isElementFocusable(element)
+            ? element
+            : getFocusableElements(element).firstElement;
+        const timeoutId = window.setTimeout(() => {
+            elementToFocus?.focus();
+        }, timeoutRef.current);
+        return () => {
+            window.clearTimeout(timeoutId);
+        };
+    }, [element, timeoutRef]);
+    return React.useCallback((node) => {
+        if (hasFiredRef.current || !node) {
+            return;
+        }
+        hasFiredRef.current = true;
+        setElement(node);
+    }, []);
+};
+//# sourceMappingURL=useAutofocusOnMount.js.map

package/esm/utils/useAutofocusOnMount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAutofocusOnMount.js","sourceRoot":"","sources":["../../src/utils/useAutofocusOnMount.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAEhC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,OAAgB,EAAE,EAAE;IACpD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEvE,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAE7C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,OAAO,EAAE,CAAC;YACX,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,IAAI,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;YAC3C,wEAAwE;YACxE,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,cAAc,GAAG,kBAAkB,CAAC,OAAO,CAAC;YAC9C,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC;QAEjD,MAAM,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrC,cAAc,EAAE,KAAK,EAAE,CAAC;QAC5B,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;QAEvB,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACnC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAE1B,OAAO,KAAK,CAAC,WAAW,CAAC,CAAC,IAAwB,EAAE,EAAE;QAClD,IAAI,WAAW,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;YAC/B,OAAO;QACX,CAAC;QACD,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAE3B,UAAU,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "10.28.0-alpha.24",
+  "version": "10.28.0-alpha.26",
   "description": "GoodData SDK - UI Building Components",
   "repository": {
     "type": "git",
@@ -75,11 +75,11 @@
     "@codemirror/autocomplete": "^6.18.6",
     "@lezer/highlight": "~1.2.1",
     "@codemirror/commands": "~6.8.1",
-    "@gooddata/sdk-backend-spi": "10.28.0-alpha.24",
-    "@gooddata/sdk-ui": "10.28.0-alpha.24",
-    "@gooddata/sdk-model": "10.28.0-alpha.24",
-    "@gooddata/sdk-ui-theme-provider": "10.28.0-alpha.24",
-    "@gooddata/util": "10.28.0-alpha.24"
+    "@gooddata/sdk-backend-spi": "10.28.0-alpha.26",
+    "@gooddata/sdk-model": "10.28.0-alpha.26",
+    "@gooddata/sdk-ui": "10.28.0-alpha.26",
+    "@gooddata/sdk-ui-theme-provider": "10.28.0-alpha.26",
+    "@gooddata/util": "10.28.0-alpha.26"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -137,8 +137,8 @@
     "typescript": "5.3.3",
     "vitest": "3.0.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/reference-workspace": "10.28.0-alpha.24",
-    "@gooddata/sdk-backend-mockingbird": "10.28.0-alpha.24"
+    "@gooddata/reference-workspace": "10.28.0-alpha.26",
+    "@gooddata/sdk-backend-mockingbird": "10.28.0-alpha.26"
   },
   "scripts": {
     "clean": "rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",

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

@@ -30,30 +30,31 @@
     }
 
     &__menu-header {
+        padding: 10px;
         display: flex;
-        gap: 0.5rem;
+        gap: 4px;
         align-items: center;
         width: 100%;
-        background: variables.$default-is-focused-background;
-        border-bottom: 1px solid variables.$gd-border-color;
+        background: variables.$is-focused-background;
 
         &-title {
-            line-height: 2rem;
             cursor: pointer;
             display: flex;
-            gap: 0.5rem;
+            gap: 4px;
             align-items: center;
             flex-grow: 1;
             background: none;
             border: none;
-            font-size: 11px;
+            padding: 0;
             color: variables.$gd-color-state-blank;
             overflow: hidden;
 
             &-text {
                 margin: 0;
                 white-space: nowrap;
-                font-weight: bold;
+                font-size: 11px;
+                font-style: normal;
+                font-weight: 700;
                 text-transform: uppercase;
                 overflow: hidden;
             }
@@ -71,6 +72,7 @@
 
     &__group-title-container {
         padding: 4px 10px;
+        display: flex;
     }
 
     &__group-title {
@@ -81,6 +83,12 @@
         margin: 0;
     }
 
+    &__group-separator {
+        flex-grow: 1;
+        display: flex;
+        vertical-align: middle;
+    }
+
     &__items {
         list-style: none;
         margin: 0;