@gooddata/sdk-ui-kit 10.27.0-alpha.23 → 10.27.0-alpha.25

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

@@ -560,13 +560,13 @@ export declare function DefaultUiListboxStaticItemComponent<T>({ item, }: UiList
 /**
  * @internal
  */
-export declare function DefaultUiMenuInteractiveItemComponent<InteractiveItemData, StaticItemData>({ item, isFocused, onSelect, }: UiMenuInteractiveItemProps<InteractiveItemData, StaticItemData>): React_2.ReactNode;
+export declare function DefaultUiMenuInteractiveItemComponent<T extends IUiMenuItemData = object>({ item, isFocused, onSelect, }: UiMenuInteractiveItemProps<T>): React_2.ReactNode;
 
 /**
  * By default just renders the data.
  * @internal
  */
-export declare function DefaultUiMenuStaticItemComponent<T>({ item }: UiMenuStaticItemProps<T>): React_2.ReactNode;
+export declare const DefaultUiMenuStaticItemComponent: React_2.MemoExoticComponent<(<T extends IUiMenuItemData = object>({ item }: UiMenuStaticItemProps<T>) => React_2.ReactElement)>;
 
 /**
  * @internal
@@ -3028,7 +3028,7 @@ export declare interface IMenuAccessibilityConfig extends IAccessibilityConfigBa
     id?: string;
     role?: "menu" | "menuitem" | "separator" | "presentation";
     ariaDisabled?: "true" | "false";
-    ariaHaspopup?: "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog";
+    ariaHasPopup?: "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog";
     ariaControls?: string;
 }
 
@@ -4360,43 +4360,82 @@ export declare interface IUiListboxStaticItem<T> {
 /**
  * @internal
  */
-export declare interface IUiMenuContext<InteractiveItemData, StaticItemData = React_2.ReactNode> {
-    items: IUiMenuItem<InteractiveItemData, StaticItemData>[];
-    focusedItem: IUiMenuInteractiveItem<InteractiveItemData, StaticItemData> | undefined;
-    itemRefs: React_2.MutableRefObject<{
-        [id: string]: HTMLElement;
-    }>;
-    onSelect: (item: IUiMenuInteractiveItem<InteractiveItemData, StaticItemData> | undefined) => void;
+export declare interface IUiMenuContext<T extends IUiMenuItemData = object> extends IUiMenuPluggableComponents<T> {
+    items: IUiMenuItem<T>[];
+    focusedItem: IUiMenuInteractiveItem<T> | undefined;
+    onSelect: (item: IUiMenuInteractiveItem<T> | undefined) => void;
     onClose?: () => void;
     setFocusedId: React_2.Dispatch<React_2.SetStateAction<string | undefined>>;
-    isItemFocusable: (item: IUiMenuItem<InteractiveItemData, StaticItemData>) => boolean;
+    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;
+    itemClassName?: ((item: IUiMenuItem<T>) => string | undefined) | string;
+    ItemComponent: React_2.ComponentType<UiMenuItemProps<T>>;
+    menuComponentRef: React_2.RefObject<HTMLElement>;
+    itemsContainerRef: React_2.RefObject<HTMLElement>;
 }
 
 /**
  * @internal
  */
-export declare interface IUiMenuInteractiveItem<InteractiveItemData, StaticItemData = React_2.ReactNode> {
+export declare type IUiMenuControlType = "keyboard" | "mouse" | "unknown";
+
+/**
+ * @internal
+ */
+export declare type IUiMenuGroupItem<T extends IUiMenuItemData = object> = {
+    type: "group";
+    id: string;
+    stringTitle: string;
+    data: T["group"];
+    subItems: IUiMenuItem<T>[];
+};
+
+/**
+ * @internal
+ */
+export declare type IUiMenuInteractiveItem<T extends IUiMenuItemData = object> = {
     type: "interactive";
     id: string;
     stringTitle: string;
     isDisabled?: boolean;
-    data: InteractiveItemData;
-    subMenu?: IUiMenuItem<InteractiveItemData, StaticItemData>[];
-}
+    data: T["interactive"];
+    subItems?: IUiMenuItem<T>[];
+};
+
+/**
+ * @internal
+ */
+export declare type IUiMenuItem<T extends IUiMenuItemData = object> = IUiMenuStaticItem<T> | IUiMenuInteractiveItem<T> | IUiMenuGroupItem<T>;
+
+/**
+ * @internal
+ */
+export declare type IUiMenuItemData = {
+    [type in IUiMenuItem<any>["type"]]?: unknown;
+};
 
 /**
  * @internal
  */
-export declare type IUiMenuItem<InteractiveItemData, StaticItemData = React_2.ReactNode> = IUiMenuStaticItem<StaticItemData> | IUiMenuInteractiveItem<InteractiveItemData, StaticItemData>;
+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;
+}
 
 /**
  * @internal
  */
-export declare interface IUiMenuStaticItem<T> {
+export declare type IUiMenuStaticItem<T extends IUiMenuItemData = object> = {
     type: "static";
     id?: string;
-    data: T;
-}
+    data: T["static"];
+};
 
 /**
  * @internal
@@ -5532,22 +5571,20 @@ export declare interface UiListboxStaticItemProps<T> {
  *
  * @internal
  */
-export declare function UiMenu<InteractiveItemData, StaticItemData>({ items, className, itemClassName, maxWidth, onSelect, onClose, onUnhandledKeyDown, InteractiveItemComponent, StaticItemComponent, MenuHeaderComponent, shouldKeyboardActionPreventDefault, shouldKeyboardActionStopPropagation, shouldCloseOnSelect, isDisabledFocusable, ariaAttributes, }: UiMenuProps<InteractiveItemData, StaticItemData>): React_2.ReactNode;
+export declare function UiMenu<T extends IUiMenuItemData = object>(props: UiMenuProps<T>): React_2.ReactNode;
 
 /**
  * @internal
  */
-export declare interface UiMenuHeaderProps<InteractiveItemData, StaticItemData = React_2.ReactNode> {
-    onBack?: () => void;
-    onClose?: () => void;
-    parentItem?: IUiMenuInteractiveItem<InteractiveItemData, StaticItemData>;
+export declare interface UiMenuGroupItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuGroupItem<T>;
 }
 
 /**
  * @internal
  */
-export declare interface UiMenuInteractiveItemProps<InteractiveItemData, StaticItemData = React_2.ReactNode> {
-    item: IUiMenuInteractiveItem<InteractiveItemData, StaticItemData>;
+export declare interface UiMenuInteractiveItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuInteractiveItem<T>;
     isFocused: boolean;
     onSelect: () => void;
 }
@@ -5555,17 +5592,28 @@ export declare interface UiMenuInteractiveItemProps<InteractiveItemData, StaticI
 /**
  * @internal
  */
-export declare interface UiMenuProps<InteractiveItemData, StaticItemData = React_2.ReactNode> {
-    items: IUiMenuItem<InteractiveItemData, StaticItemData>[];
+export declare interface UiMenuInteractiveItemWrapperProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuInteractiveItem<T>;
+}
+
+/**
+ * @internal
+ */
+export declare interface UiMenuItemProps<T extends IUiMenuItemData = object> {
+    item: IUiMenuItem<T>;
+}
+
+/**
+ * @internal
+ */
+export declare interface UiMenuProps<T extends IUiMenuItemData = object> extends Partial<IUiMenuPluggableComponents<T>> {
+    items: IUiMenuItem<T>[];
     className?: string;
-    itemClassName?: ((item: IUiMenuItem<InteractiveItemData, StaticItemData>) => string | undefined) | string;
+    itemClassName?: ((item: IUiMenuItem<T>) => string | undefined) | string;
     maxWidth?: number;
-    onSelect?: (item: IUiMenuInteractiveItem<InteractiveItemData, StaticItemData>) => void;
+    onSelect?: (item: IUiMenuInteractiveItem<T>) => void;
     onClose?: () => void;
-    onUnhandledKeyDown?: (event: React_2.KeyboardEvent, context: IUiMenuContext<InteractiveItemData, StaticItemData>) => void;
-    InteractiveItemComponent?: React_2.ComponentType<UiMenuInteractiveItemProps<InteractiveItemData, StaticItemData>>;
-    StaticItemComponent?: React_2.ComponentType<UiMenuStaticItemProps<StaticItemData>>;
-    MenuHeaderComponent?: React_2.ComponentType<UiMenuHeaderProps<InteractiveItemData, StaticItemData>>;
+    onUnhandledKeyDown?: (event: React_2.KeyboardEvent, context: IUiMenuContext<T>) => void;
     shouldKeyboardActionPreventDefault?: boolean;
     shouldKeyboardActionStopPropagation?: boolean;
     shouldCloseOnSelect?: boolean;
@@ -5576,7 +5624,7 @@ export declare interface UiMenuProps<InteractiveItemData, StaticItemData = React
 /**
  * @internal
  */
-export declare interface UiMenuStaticItemProps<T> {
+export declare interface UiMenuStaticItemProps<T extends IUiMenuItemData = object> {
     item: IUiMenuStaticItem<T>;
 }
 

package/esm/typings/accessibility.d.ts

@@ -16,7 +16,7 @@ export interface IMenuAccessibilityConfig extends IAccessibilityConfigBase {
     id?: string;
     role?: "menu" | "menuitem" | "separator" | "presentation";
     ariaDisabled?: "true" | "false";
-    ariaHaspopup?: "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog";
+    ariaHasPopup?: "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog";
     ariaControls?: string;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "10.27.0-alpha.23",
+  "version": "10.27.0-alpha.25",
   "description": "GoodData SDK - UI Building Components",
   "repository": {
     "type": "git",
@@ -70,11 +70,11 @@
     "tslib": "^2.5.0",
     "uuid": "^8.3.2",
     "unified": "^11.0.5",
-    "@gooddata/sdk-backend-spi": "10.27.0-alpha.23",
-    "@gooddata/sdk-ui": "10.27.0-alpha.23",
-    "@gooddata/sdk-model": "10.27.0-alpha.23",
-    "@gooddata/util": "10.27.0-alpha.23",
-    "@gooddata/sdk-ui-theme-provider": "10.27.0-alpha.23"
+    "@gooddata/sdk-backend-spi": "10.27.0-alpha.25",
+    "@gooddata/sdk-ui": "10.27.0-alpha.25",
+    "@gooddata/sdk-model": "10.27.0-alpha.25",
+    "@gooddata/sdk-ui-theme-provider": "10.27.0-alpha.25",
+    "@gooddata/util": "10.27.0-alpha.25"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -133,8 +133,8 @@
     "typescript": "5.3.3",
     "vitest": "3.0.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/sdk-backend-mockingbird": "10.27.0-alpha.23",
-    "@gooddata/reference-workspace": "10.27.0-alpha.23"
+    "@gooddata/reference-workspace": "10.27.0-alpha.25",
+    "@gooddata/sdk-backend-mockingbird": "10.27.0-alpha.25"
   },
   "scripts": {
     "clean": "rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",

package/src/@ui/UiListbox/UiListbox.scss

@@ -1,6 +1,7 @@
 // (C) 2025 GoodData Corporation
 
 @use "../../../styles/scss/variables";
+@use "../../../styles/scss/mixins";
 
 .gd-ui-kit-listbox {
     $root: &;
@@ -26,10 +27,7 @@
         outline: none;
 
         &:focus-visible #{$root}__item--isFocused {
-            outline-offset: -2px;
-            outline: auto 5px Highlight; /* For Firefox */
-            // stylelint-disable-next-line declaration-block-no-duplicate-properties
-            outline: auto 5px -webkit-focus-ring-color; /* For Chrome */
+            @include mixins.focus-ring;
         }
     }
 

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

@@ -1,6 +1,7 @@
 // (C) 2025 GoodData Corporation
 
 @use "../../../styles/scss/variables";
+@use "../../../styles/scss/mixins";
 
 .gd-ui-kit-menu {
     $root: &;
@@ -62,18 +63,29 @@
         }
     }
 
+    &__group {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    &__group-title-container {
+        padding: 4px 10px;
+    }
+
+    &__group-title {
+        text-transform: uppercase;
+        color: variables.$gd-color-text-dimmed;
+        font-size: 10px;
+        font-weight: normal;
+        margin: 0;
+    }
+
     &__items {
         list-style: none;
         margin: 0;
         padding: 0;
         outline: none;
-
-        &:focus-visible #{$root}__item--isFocused {
-            outline-offset: -2px;
-            outline: auto 5px Highlight; /* For Firefox */
-            // stylelint-disable-next-line declaration-block-no-duplicate-properties
-            outline: auto 5px -webkit-focus-ring-color; /* For Chrome */
-        }
     }
 
     &__item {
@@ -96,10 +108,14 @@
         #{$root}--controlType-keyboard #{$root}__items:focus &--isFocused:not(&--isDisabled) {
             background-color: variables.$is-focused-background;
             color: variables.$is-focused-color;
+
+            @include mixins.focus-ring;
         }
         // Controlled by keyboard and has focus, disabled
         #{$root}--controlType-keyboard #{$root}__items:focus &--isFocused#{&}--isDisabled {
             background-color: variables.$is-focused-background;
+
+            @include mixins.focus-ring;
         }
 
         &--isDisabled {

package/styles/css/main.css

@@ -794,6 +794,8 @@
   transition: var(--gd-transition-all);
 }
 
+/* allow vendor prefixes and disable max length */
+/* allow vendor prefixes and disable max length */
 .gd-ui-kit-listbox {
   max-height: 300px;
   overflow-y: auto;
@@ -911,17 +913,27 @@
 .gd-ui-kit-menu__menu-header-close-icon {
   flex-shrink: 0;
 }
+.gd-ui-kit-menu__group {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.gd-ui-kit-menu__group-title-container {
+  padding: 4px 10px;
+}
+.gd-ui-kit-menu__group-title {
+  text-transform: uppercase;
+  color: var(--gd-palette-complementary-5, #b0beca);
+  font-size: 10px;
+  font-weight: normal;
+  margin: 0;
+}
 .gd-ui-kit-menu__items {
   list-style: none;
   margin: 0;
   padding: 0;
   outline: none;
 }
-.gd-ui-kit-menu__items:focus-visible .gd-ui-kit-menu__item--isFocused {
-  outline-offset: -2px;
-  outline: auto 5px Highlight; /* For Firefox */
-  outline: auto 5px -webkit-focus-ring-color; /* For Chrome */
-}
 .gd-ui-kit-menu__item {
   padding: 8px 10px;
   cursor: pointer;
@@ -939,9 +951,15 @@
 .gd-ui-kit-menu--controlType-keyboard .gd-ui-kit-menu__items:focus .gd-ui-kit-menu__item--isFocused:not(.gd-ui-kit-menu__item--isDisabled) {
   background-color: var(--gd-palette-complementary-2, #ebeff4);
   color: var(--gd-palette-complementary-9, #000);
+  outline-offset: -2px;
+  outline: auto 5px Highlight; /* For Firefox */
+  outline: auto 5px -webkit-focus-ring-color; /* For Chrome */
 }
 .gd-ui-kit-menu--controlType-keyboard .gd-ui-kit-menu__items:focus .gd-ui-kit-menu__item--isFocused.gd-ui-kit-menu__item--isDisabled {
   background-color: var(--gd-palette-complementary-2, #ebeff4);
+  outline-offset: -2px;
+  outline: auto 5px Highlight; /* For Firefox */
+  outline: auto 5px -webkit-focus-ring-color; /* For Chrome */
 }
 .gd-ui-kit-menu__item--isDisabled {
   color: var(--gd-palette-complementary-5, #b0beca);
@@ -1429,8 +1447,6 @@
   content: "\e642";
 }
 
-/* allow vendor prefixes and disable max length */
-/* allow vendor prefixes and disable max length */
 /* ==========================================================================
    Variables, mixins, silent classes etc.
    ========================================================================== */