@gooddata/sdk-ui-kit 10.34.0-alpha.2 → 10.34.0-alpha.20

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

@@ -55,7 +55,7 @@ import { default as React_2 } from 'react';
 import * as React_3 from 'react';
 import { ReactNode } from 'react';
 import { ShareStatus } from '@gooddata/sdk-model';
-import { SortDirection } from '@gooddata/sdk-model';
+import { SortDirection as SortDirection_2 } from '@gooddata/sdk-model';
 import { WeekStart } from '@gooddata/sdk-model';
 import { WithIntlProps } from 'react-intl';
 import { WrappedComponentProps } from 'react-intl';
@@ -141,6 +141,13 @@ export declare type ArrowOffsets = Record<string, ArrowOffset>;
  */
 export declare function AsyncList<T>(props: IAsyncListProps<T>): React_2.JSX.Element;
 
+/**
+ * @internal
+ */
+export declare const AsyncTable: <T extends {
+    id: string;
+}>(props: IAsyncTableProps<T>) => React_2.JSX.Element;
+
 /**
  * @internal
  */
@@ -1364,6 +1371,64 @@ export declare interface IAsyncListProps<T> {
     onLoadNextPage?: () => void;
 }
 
+/**
+ * @internal
+ */
+export declare interface IAsyncTableFilter {
+    label: string;
+    options: Array<IAsyncTableFilterOption>;
+    onItemClick: (option: IAsyncTableFilterOption) => void;
+    selected?: string;
+}
+
+/**
+ * @internal
+ */
+export declare interface IAsyncTableFilterOption {
+    value: string;
+    label?: string;
+    isSelected?: boolean;
+}
+
+/**
+ * @internal
+ */
+export declare interface IAsyncTableProps<T extends {
+    id: string;
+}> {
+    items: T[];
+    totalItemsCount?: number;
+    columns: Array<IColumn<T>>;
+    width?: number;
+    maxHeight?: number;
+    smallHeader?: boolean;
+    skeletonItemsCount?: number;
+    isLoading?: boolean;
+    hasNextPage?: boolean;
+    loadNextPage?: () => void;
+    title: string;
+    onSearch?: (search: string) => void;
+    renderTitleIcon?: () => React.ReactNode;
+    titleActions?: Array<IAsyncTableTitleAction>;
+    filters?: Array<IAsyncTableFilter>;
+    sortBy?: keyof T;
+    sortDirection?: SortDirection;
+    onSort?: (key: keyof T) => void;
+    bulkActions?: Array<IBulkAction>;
+    selectedItemIds?: Array<string>;
+    setSelectedItemIds?: (items: Array<string>) => void;
+    renderItem?: (item: T) => React.ReactNode;
+    renderHeader?: () => React.ReactNode;
+    locale?: string;
+}
+
+/**
+ * @internal
+ */
+export declare interface IAsyncTableTitleAction {
+    renderAction: () => React.ReactNode;
+}
+
 /**
  * @internal
  */
@@ -1514,6 +1579,14 @@ export declare interface IBucketItemDescriptors {
     [localIdentifier: string]: IBucketItemDescriptor;
 }
 
+/**
+ * @internal
+ */
+export declare interface IBulkAction {
+    label: string;
+    onClick: () => void;
+}
+
 /**
  * @internal
  */
@@ -1592,6 +1665,24 @@ export declare interface IColorPreviewProps {
     className?: string;
 }
 
+/**
+ * @internal
+ */
+export declare interface IColumn<T> {
+    key?: keyof T;
+    label?: string;
+    width?: number;
+    renderMenu?: (item: T) => React.ReactNode;
+    renderButton?: (item: T) => React.ReactNode;
+    renderRoleIcon?: (item: T) => React.ReactNode;
+    renderPrefixIcon?: (item: T) => React.ReactNode;
+    renderSuffixIcon?: (item: T) => React.ReactNode;
+    renderBadge?: (item: T) => React.ReactNode;
+    getMultiLineContent?: (item: T) => Array<string>;
+    bold?: boolean;
+    sortable?: boolean;
+}
+
 /**
  * @internal
  */
@@ -1997,7 +2088,7 @@ export declare interface IDropdownButtonRenderProps {
     /**
      * Props supporting accessibility that can be passed down to a <Button/>
      */
-    accessibilityConfig: Pick<IButtonAccessibilityConfig, "role" | "isExpanded" | "popupId">;
+    accessibilityConfig: Pick<IButtonAccessibilityConfig, "role" | "isExpanded" | "popupId" | "ariaLabel">;
 }
 
 /**
@@ -4449,7 +4540,7 @@ export declare interface ISnapPoints {
 export declare interface ISortTypeItem {
     id: SORT_TARGET_TYPE;
     title: string;
-    sortDirection: SortDirection;
+    sortDirection: SortDirection_2;
     type: "alphabetical" | "date" | "default" | "numerical";
     localIdentifier: string;
 }
@@ -5777,11 +5868,21 @@ export declare type SizeMedium = "medium";
  */
 export declare type SizeSmall = "small";
 
+/**
+ * @internal
+ */
+export declare type SizeXLarge = "xlarge";
+
 /**
  * @internal
  */
 export declare type SizeXSmall = "xsmall";
 
+/**
+ * @internal
+ */
+export declare type SizeXXLarge = "xxlarge";
+
 /**
  * @internal
  */
@@ -5815,6 +5916,11 @@ export declare enum SORT_TARGET_TYPE {
  */
 export declare function sortDateDatasets<T extends IDateDataset>(dateDatasets: T[], recommendedDate?: T, unrelatedDate?: T): Array<T | IDateDatasetHeader>;
 
+/**
+ * @internal
+ */
+export declare type SortDirection = "asc" | "desc";
+
 /**
  * @internal
  */
@@ -6042,6 +6148,18 @@ export declare const UiAutofocus: React_2.FC<{
     children: React_2.ReactNode;
 } & IUiAutofocusOptions>;
 
+/**
+ * @internal
+ */
+export declare const UiBadge: React_2.FC<UiBadgeProps>;
+
+/**
+ * @internal
+ */
+export declare interface UiBadgeProps {
+    label: string;
+}
+
 /**
  * @internal
  */
@@ -6067,6 +6185,21 @@ export declare interface UiButtonProps {
     accessibilityConfig?: IUiButtonAccessibilityConfig;
 }
 
+/**
+ * @internal
+ */
+export declare const UiCheckbox: React_2.FC<UiCheckboxProps>;
+
+/**
+ * @internal
+ */
+export declare interface UiCheckboxProps {
+    checked: boolean;
+    onChange?: (e: React_2.ChangeEvent) => void;
+    preventDefault?: boolean;
+    indeterminate?: boolean;
+}
+
 /**
  * @internal
  */
@@ -6135,8 +6268,8 @@ export declare type UiIconButtonProps = UiIconButtonPublicProps;
 export declare interface UiIconButtonPublicProps {
     icon: IconType;
     label?: string;
-    size?: SizeXSmall | SizeSmall | SizeMedium | SizeLarge;
-    variant?: VariantPrimary | VariantSecondary | VariantTertiary | VariantPopOut | VariantDanger;
+    size?: SizeXSmall | SizeSmall | SizeMedium | SizeLarge | SizeXLarge | SizeXXLarge;
+    variant?: VariantPrimary | VariantSecondary | VariantTertiary | VariantPopOut | VariantDanger | VariantTable;
     isDisabled?: boolean;
     isActive?: boolean;
     onClick?: (e: React_2.MouseEvent<HTMLButtonElement>) => void;
@@ -6144,7 +6277,7 @@ export declare interface UiIconButtonPublicProps {
     dataId?: string;
     dataTestId?: string;
     ariaAttributes?: IDropdownButtonRenderProps["ariaAttributes"];
-    accessibilityConfig?: IDropdownButtonRenderProps["accessibilityConfig"] & Pick<React_2.AriaAttributes, "aria-label">;
+    accessibilityConfig?: IDropdownButtonRenderProps["accessibilityConfig"];
 }
 
 /**
@@ -6232,17 +6365,11 @@ export declare function UiMenu<T extends IUiMenuItemData = object, M extends obj
  */
 export declare interface UiMenuProps<T extends IUiMenuItemData = object, M = object> extends Partial<IUiMenuPluggableComponents<T>> {
     items: IUiMenuItem<T>[];
-    /**
-     * @deprecated use `dataTestId` instead. Prop will be removed.
-     */
-    className?: ((context: IUiMenuContext<T>) => string | undefined) | string;
     dataTestId?: ((context: IUiMenuContext<T>) => string | undefined) | string;
-    /**
-     * @deprecated use `itemDataTestId` instead. Prop will be removed.
-     */
-    itemClassName?: ((item: IUiMenuItem<T>) => string | undefined) | string;
     itemDataTestId?: ((item: IUiMenuItem<T>) => string | undefined) | string;
     maxWidth?: number;
+    maxHeight?: ((context: IUiMenuContext<T>) => number | undefined) | number;
+    containerBottomPadding?: "none" | "small" | "medium";
     onSelect?: (item: IUiMenuInteractiveItem<T>) => void;
     onLevelChange?: (level: number, item?: IUiMenuContentItem<T> | IUiMenuInteractiveItem<T>) => void;
     onClose?: () => void;
@@ -6294,7 +6421,10 @@ export declare interface UiPagedVirtualListProps<T> {
      * If not provided, object identity (`===`) is used for comparison.
      */
     scrollToItemKeyExtractor?: (item: T) => string | number;
+    scrollToIndex?: number;
+    shouldLoadNextPage?: (lastItemIndex: number, itemsCount: number, skeletonItemsCount: number) => boolean;
     children: (item: T) => React_2.ReactNode;
+    scrollbarHoverEffect?: boolean;
     SkeletonItem?: React_2.ComponentType<UiPagedVirtualListSkeletonItemProps>;
 }
 
@@ -6315,7 +6445,7 @@ export declare const UiReturnFocusOnUnmount: React_2.FC<IUiReturnFocusOnUnmountO
 /**
  * @internal
  */
-export declare function UiSkeleton({ itemsCount, itemHeight, itemWidth, itemsGap, direction, itemBorderRadius, }: UiSkeletonProps): React_2.JSX.Element;
+export declare function UiSkeleton({ itemsCount, itemHeight, itemPadding, itemWidth, itemsGap, direction, itemBorderRadius, }: UiSkeletonProps): React_2.JSX.Element;
 
 /**
  * @internal
@@ -6333,6 +6463,10 @@ export declare interface UiSkeletonProps {
      * Width of the item, or items.
      */
     itemWidth?: (number | string) | (number | string)[];
+    /**
+     * Padding of the item, or items.
+     */
+    itemPadding?: number | number[];
     /**
      * Gap between the items.
      */
@@ -6666,6 +6800,11 @@ export declare type VariantPrimary = "primary";
  */
 export declare type VariantSecondary = "secondary";
 
+/**
+ * @internal
+ */
+export declare type VariantTable = "table";
+
 /**
  * @internal
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "10.34.0-alpha.2",
+  "version": "10.34.0-alpha.20",
   "description": "GoodData SDK - UI Building Components",
   "repository": {
     "type": "git",
@@ -75,11 +75,11 @@
     "@floating-ui/dom": "1.6.13",
     "@floating-ui/react-dom": "2.1.2",
     "@floating-ui/react": "~0.27.12",
-    "@gooddata/sdk-backend-spi": "10.34.0-alpha.2",
-    "@gooddata/sdk-model": "10.34.0-alpha.2",
-    "@gooddata/util": "10.34.0-alpha.2",
-    "@gooddata/sdk-ui-theme-provider": "10.34.0-alpha.2",
-    "@gooddata/sdk-ui": "10.34.0-alpha.2"
+    "@gooddata/sdk-backend-spi": "10.34.0-alpha.20",
+    "@gooddata/sdk-ui-theme-provider": "10.34.0-alpha.20",
+    "@gooddata/sdk-ui": "10.34.0-alpha.20",
+    "@gooddata/sdk-model": "10.34.0-alpha.20",
+    "@gooddata/util": "10.34.0-alpha.20"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -134,8 +134,8 @@
     "typescript": "5.3.3",
     "vitest": "3.0.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/reference-workspace": "10.34.0-alpha.2",
-    "@gooddata/sdk-backend-mockingbird": "10.34.0-alpha.2"
+    "@gooddata/reference-workspace": "10.34.0-alpha.20",
+    "@gooddata/sdk-backend-mockingbird": "10.34.0-alpha.20"
   },
   "scripts": {
     "clean": "rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",
@@ -155,11 +155,12 @@
     "dep-cruiser-ci": "depcruise --validate .dependency-cruiser.cjs --output-type err-long src/",
     "stylelint": "stylelint '**/*.scss'",
     "stylelint-ci": "stylelint '**/*.scss' --custom-formatter=node_modules/stylelint-checkstyle-formatter > ./ci/results/stylelint-results.xml",
-    "validate": "npm run dep-cruiser && npm run eslint && npm run stylelint && npm run validate-locales && npm run prettier-check && npm run validate-theming",
-    "validate-ci": "export BROWSERSLIST_IGNORE_OLD_DATA=true && npm run dep-cruiser-ci && npm run eslint-ci && npm run stylelint-ci && npm run validate-locales-ci && npm run prettier-check && npm run validate-theming",
+    "validate": "npm run dep-cruiser && npm run eslint && npm run stylelint && npm run validate-locales && npm run prettier-check && npm run validate-theming && npm run validate-ui-components",
+    "validate-ci": "export BROWSERSLIST_IGNORE_OLD_DATA=true && npm run dep-cruiser-ci && npm run eslint-ci && npm run stylelint-ci && npm run validate-locales-ci && npm run prettier-check && npm run validate-theming && npm run validate-ui-components",
     "validate-locales": "cd ../sdk-ui && npm run validate-locales",
     "validate-locales-ci": "cd ../sdk-ui && npm run validate-locales-ci",
     "validate-theming": "npm run scss && node scripts/validateCss.js",
+    "validate-ui-components": "node scripts/validateUiComponents.js",
     "scss": "sass --load-path=node_modules --load-path=node_modules/fixed-data-table-2/dist styles/scss:styles/css"
   }
 }

package/src/@ui/UiBadge/UiBadge.scss

@@ -0,0 +1,16 @@
+// (C) 2025 GoodData Corporation
+
+.gd-ui-kit-badge {
+    display: flex;
+    padding: 0 var(--gd-spacing-10px);
+    justify-content: center;
+    align-items: center;
+    border-radius: 30px;
+    font-size: 12px;
+
+    font-weight: 400;
+    line-height: 20px;
+
+    background: var(--gd-palette-complementary-2);
+    color: var(--gd-palette-complementary-7);
+}

package/src/@ui/UiCheckbox/UiCheckbox.scss

@@ -0,0 +1,71 @@
+// (C) 2025 GoodData Corporation
+
+.gd-ui-kit-checkbox {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+
+    &__input {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    &__box {
+        width: 12px;
+        height: 12px;
+        border: 1px solid var(--gd-palette-complementary-5);
+        border-radius: 2px;
+        position: relative;
+        transition: background-color 0.2s, border-color 0.2s;
+        background-color: var(--gd-palette-complementary-0);
+
+        &:hover {
+            border-color: var(--gd-palette-complementary-6);
+            box-shadow: 0 1px 2px 0 rgba(31, 53, 74, 0.15) inset;
+        }
+
+        &::after {
+            content: "";
+            position: absolute;
+            height: 3px;
+            top: 3px;
+            transform: scale(0) rotate(315deg) skew(-2deg);
+            transform-origin: center top;
+            transition: transform 0.2s ease-out;
+            width: 7px;
+            border-bottom: 2px solid var(--gd-palette-complementary-0);
+            border-left: 2px solid var(--gd-palette-complementary-0);
+        }
+
+        &--checked {
+            background-color: var(--gd-palette-primary-base);
+            box-shadow: none;
+            border-color: var(--gd-palette-primary-base);
+
+            &::after {
+                transform: scale(1) rotate(315deg) skew(-2deg);
+            }
+        }
+
+        &--checked#{&}--indeterminate {
+            &::after {
+                content: "";
+                position: absolute;
+                top: 5px;
+                left: 2px;
+                width: 8px;
+                height: 2px;
+                background: var(--gd-palette-complementary-0);
+                border: none;
+                transform: scale(1) rotate(0deg);
+            }
+        }
+    }
+
+    &__input:focus-visible + &__box {
+        box-shadow: 0 0 0 2px var(--gd-palette-primary-focus);
+    }
+}

package/src/@ui/UiIconButton/UiIconButton.scss

@@ -55,6 +55,22 @@
                 width: var(--gd-button-L);
             }
         }
+
+        &-xlarge {
+            height: var(--gd-button-XL);
+
+            &#{$root}--type-button {
+                width: var(--gd-button-XL);
+            }
+        }
+
+        &-xxlarge {
+            height: var(--gd-button-XXL);
+
+            &#{$root}--type-button {
+                width: var(--gd-button-XXL);
+            }
+        }
     }
 
     /**
@@ -155,6 +171,27 @@
             }
         }
 
+        &-table {
+            --gd-icon-fill-color: var(--gd-palette-complementary-7);
+            background-color: inherit;
+            border: none;
+            border-radius: 0;
+            transition: inherit;
+
+            &:disabled {
+                --gd-icon-fill-color: var(--gd-palette-complementary-5);
+            }
+
+            &#{$root}--active,
+            &:hover {
+                background-color: var(--gd-palette-complementary-3);
+            }
+
+            &#{$root}--active {
+                --gd-icon-fill-color: var(--gd-palette-complementary-7);
+            }
+        }
+
         &-danger {
             --gd-icon-fill-color: var(--gd-palette-complementary-0);
             background-color: var(--gd-palette-error-base);

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

@@ -14,11 +14,23 @@
     flex-direction: column;
     user-select: none;
 
+    &__content-container {
+        display: contents;
+    }
+
     &__items-container {
         width: 100%;
         height: 100%;
         overflow-y: auto;
         overflow-x: hidden;
+
+        &--container-bottom-padding-small {
+            padding-bottom: 8px;
+        }
+
+        &--container-bottom-padding-medium {
+            padding-bottom: 10px;
+        }
     }
 
     @media #{variables.$small-only} {

package/src/@ui/UiPagedVirtualList/UiPagedVirtualList.scss

@@ -39,6 +39,23 @@
             background-color: var(--gd-palette-complementary-2);
             border-radius: 3px;
         }
+
+        &--hover {
+            &::-webkit-scrollbar {
+                width: 10px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border: 2px solid transparent;
+                border-radius: 5px;
+                background-clip: padding-box;
+
+                &:hover {
+                    border: 0;
+                    background-color: var(--gd-palette-complementary-5);
+                }
+            }
+        }
     }
 
     &__item {

package/src/@ui/UiSkeleton/UiSkeleton.scss

@@ -1,4 +1,4 @@
-// (C) 2024 GoodData Corporation
+// (C) 2024-2025 GoodData Corporation
 @use "react-loading-skeleton/dist/skeleton.css";
 
 .gd-ui-kit-skeleton {
@@ -24,6 +24,7 @@
         border-radius: 3px;
         width: 100%;
         height: 100%;
+        box-sizing: border-box;
     }
 
     .react-loading-skeleton {

package/src/@ui/defaultTheme.scss

@@ -217,7 +217,10 @@
     --gd-spacing-3px: 3px;
     --gd-spacing-14px: 14px;
     --gd-spacing-16px: 16px;
+    --gd-spacing-34px: 34px;
     --gd-transition-all: all 0.25s ease-in-out;
+    --gd-button-XXL: 55px;
+    --gd-button-XL: 45px;
     --gd-button-L: 38px;
     --gd-button-M: 32px;
     --gd-button-S: 27px;
@@ -225,4 +228,18 @@
     --gd-tabs-height-L: 56px;
     --gd-tabs-height-M: 27px;
     --gd-tabs-height-S: 23px;
+    --gd-table-font-size: 14px;
+    --gd-table-row-height-normal: 45px;
+    --gd-table-row-height-large: 55px;
+    --gd-table-row-height-small: 27px;
+    --gd-table-row-line-height: 27px;
+    --gd-table-label-font-size: 11px;
+    --gd-table-counter-font-size: 12px;
+    --gd-table-dropdown-item-font-size: 12px;
+    --gd-table-multi-line-font-size: 12px;
+    --gd-table-multi-line-line-height: 17px;
+    --gd-table-multi-line-font-size-large: 14px;
+    --gd-table-multi-line-line-height-large: 23px;
+    --gd-table-dropdown-item-height: 28px;
+    --gd-table-title-font-size: 24px;
 }

package/src/@ui/index.scss

@@ -12,3 +12,5 @@
 @use "./UiTooltip/UiTooltip.scss";
 @use "./UiLink/UiLink.scss";
 @use "./UiNavigationBypass/UiNavigationBypass.scss";
+@use "./UiBadge/UiBadge.scss";
+@use "./UiCheckbox/UiCheckbox.scss";