@gooddata/sdk-ui-kit 11.13.0-alpha.1 → 11.13.0-alpha.2

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

@@ -51,7 +51,8 @@ import { IMeasureSortTarget } from '@gooddata/sdk-model';
 import { IMetadataObjectBase } from '@gooddata/sdk-model';
 import { IntlShape } from 'react-intl';
 import { ISeparators } from '@gooddata/sdk-ui';
-import { ISeparators as ISeparators_2 } from '@gooddata/sdk-model';
+import { ISeparators as ISeparators_2 } from '@gooddata/number-formatter';
+import { ISeparators as ISeparators_3 } from '@gooddata/sdk-model';
 import { ISettings } from '@gooddata/sdk-model';
 import { ISortItem } from '@gooddata/sdk-model';
 import { ITheme } from '@gooddata/sdk-model';
@@ -64,6 +65,7 @@ import { KeyboardEventHandler } from 'react';
 import { LocalIdRef } from '@gooddata/sdk-model';
 import { MemoExoticComponent } from 'react';
 import { MessageDescriptor } from 'react-intl';
+import type { MetricType } from '@gooddata/sdk-model';
 import { ModifierKey } from 'react';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MutableRefObject } from 'react';
@@ -148,7 +150,7 @@ export declare type Alignment = {
 /**
  * @internal
  */
-export declare const AppHeader: ComponentType<Omit<WithIntlProps<IAppHeaderProps & WrappedComponentProps>, "theme" | "themeIsLoading" | "themeStatus">>;
+export declare const AppHeader: ComponentType<Omit<IAppHeaderProps, "theme" | "themeIsLoading" | "themeStatus">>;
 
 /**
  * @internal
@@ -417,9 +419,7 @@ export declare type Color = string;
 /**
  * @internal
  */
-export declare const ColorPicker: FC<WithIntlProps<IColorPickerProps & WrappedComponentProps>> & {
-    WrappedComponent: ComponentType<IColorPickerProps & WrappedComponentProps>;
-};
+export declare function ColorPicker(props: IColorPickerProps): JSX.Element;
 
 /**
  * @internal
@@ -468,6 +468,29 @@ export declare function ContentDivider({ className }: {
  */
 export declare type CopyCodeOriginType = "keyboard" | "button";
 
+/**
+ * Creates localized currency format presets.
+ *
+ * @param formatMessage - Function to format localized messages (e.g., from react-intl)
+ * @returns Array of currency format presets with localized names
+ * @internal
+ */
+export declare function createCurrencyPresets(formatMessage: (descriptor: {
+    id: string;
+}) => string): IFormatPreset[];
+
+/**
+ * Base currency preset definitions.
+ * These are the raw preset data that can be used to create localized presets.
+ * @internal
+ */
+export declare const CURRENCY_PRESET_DEFINITIONS: readonly ICurrencyPresetDefinition[];
+
+/**
+ * @alpha
+ */
+export declare type CurrencyFormatValidationErrorCode = "empty" | "invalidFormat" | "missingCurrencySymbol" | "missingDecimalPlaces";
+
 /**
  * @internal
  */
@@ -833,9 +856,7 @@ export declare function FilterGroupItem({ title, subtitle, selectedItemsCount, s
 /**
  * @internal
  */
-export declare const FilterLabel: FC<WithIntlProps<IFilterLabelProps & WrappedComponentProps>> & {
-    WrappedComponent: ComponentType<IFilterLabelProps & WrappedComponentProps>;
-};
+export declare const FilterLabel: NamedExoticComponent<IFilterLabelProps>;
 
 /**
  * @internal
@@ -2321,6 +2342,56 @@ export declare function IconWebsite({ color, className, width, height }: IIconPr
  */
 export declare function IconWidget({ color, className, width, height }: IIconProps): JSX.Element;
 
+/**
+ * @alpha
+ */
+export declare interface ICurrencyFormatValidationError {
+    code: CurrencyFormatValidationErrorCode;
+    /**
+     * Indexes of sections (0-based) that failed validation.
+     * The value is only present for section-driven validations.
+     */
+    sectionIndexes?: number[];
+    message: string;
+}
+
+/**
+ * @alpha
+ */
+export declare interface ICurrencyFormatValidationOptions {
+    /**
+     * Sample value used to verify the formatter does not throw.
+     * Defaults to 12345.67 to cover both thousands and decimals.
+     */
+    sampleValue?: number;
+    /**
+     * Number of mandatory decimal places each section must contain.
+     * Set to 0 (or a negative value) to skip the decimal check.
+     * Defaults to 2.
+     */
+    requiredDecimalPlaces?: number;
+    separators?: ISeparators_2;
+}
+
+/**
+ * @alpha
+ */
+export declare interface ICurrencyFormatValidationResult {
+    isValid: boolean;
+    errors: ICurrencyFormatValidationError[];
+}
+
+/**
+ * Base currency preset definitions without localized names.
+ * @internal
+ */
+export declare interface ICurrencyPresetDefinition {
+    localIdentifier: string;
+    format: string;
+    previewNumber: number;
+    messageId: string;
+}
+
 /**
  * @internal
  */
@@ -2413,7 +2484,7 @@ export declare interface IDescriptionPanelProps {
     useReferences?: boolean;
     LoadingComponent?: ComponentType;
     filters?: IFilter[];
-    separators?: ISeparators_2;
+    separators?: ISeparators_3;
     execConfig?: IExecutionConfig;
     id?: string;
 }
@@ -3470,7 +3541,7 @@ export declare interface IInsightListItemProps {
     type?: string;
     width?: number;
     filters?: IFilter[];
-    separators?: ISeparators_2;
+    separators?: ISeparators_3;
     onClick?: () => void;
     onDelete?: () => void;
     onDescriptionPanelOpen?: () => void;
@@ -3894,7 +3965,6 @@ export declare interface ILegacyListState {
  * @internal
  */
 export declare interface ILegacyMultiSelectListItemProps {
-    intl: IntlShape;
     isLoading?: boolean;
     onMouseOut?: (source: any) => void;
     onMouseOver?: (source: any) => void;
@@ -4257,7 +4327,6 @@ export declare interface IMultiSelectListItemProps {
  * @internal
  */
 export declare interface IMultiSelectListProps<T> {
-    intl: IntlShape;
     height?: number;
     width?: number;
     itemHeight?: number;
@@ -4435,49 +4504,13 @@ export declare interface InputState {
 /**
  * @internal
  */
-export declare class InputWithNumberFormat extends PureComponent<InputWithNumberFormatProps, InputWithNumberFormatState> {
-    private input;
-    static defaultProps: {
-        separators: {
-            thousand: string;
-            decimal: string;
-        };
-        autofocus: boolean;
-        className: string;
-        clearOnEsc: boolean;
-        disabled: boolean;
-        hasError: boolean;
-        hasWarning: boolean;
-        isSearch: boolean;
-        isSmall: boolean;
-        maxlength: number;
-        onChange: (..._: any[]) => void;
-        onEscKeyPress: (..._: any[]) => void;
-        onEnterKeyPress: (..._: any[]) => void;
-        onBlur: (..._: any[]) => void;
-        onFocus: (..._: any[]) => void;
-        placeholder: string;
-        prefix: string;
-        readonly: boolean;
-        suffix: string;
-        label: string;
-        labelPositionTop: boolean;
-        value: string;
-    };
-    constructor(props: InputWithNumberFormatProps);
-    UNSAFE_componentWillReceiveProps({ value: newValue }: InputWithNumberFormatProps): void;
-    onChange: (value: number, e: ChangeEvent<HTMLInputElement>) => void;
-    onFocus: (e: FocusEvent_2<HTMLInputElement>) => void;
-    onBlur: (e: FocusEvent_2<HTMLInputElement>) => void;
-    handleCaretShift(e: ChangeEvent<HTMLInputElement>): void;
-    render(): JSX.Element;
-}
+export declare const InputWithNumberFormat: NamedExoticComponent<InputWithNumberFormatProps>;
 
 /**
  * @internal
  */
 export declare interface InputWithNumberFormatOwnProps {
-    separators: Separators;
+    separators?: Separators;
 }
 
 /**
@@ -4506,9 +4539,7 @@ export declare function InsightIcon({ visualizationUrl, iconProps, }: IInsightIc
 /**
  * @internal
  */
-export declare const InsightListItem: FC<WithIntlProps<IInsightListItemProps & WrappedComponentProps>> & {
-    WrappedComponent: ComponentType<IInsightListItemProps & WrappedComponentProps>;
-};
+export declare function InsightListItem({ title, description, updated, type, isSelected, isLoading, filters, separators, LoadingComponent, onClick, onDescriptionPanelOpen, showDescriptionPanel, useRichText, useReferences, richTextExecConfig, width, isLocked, onDelete, metadataTimeZone, }: IInsightListItemProps): JSX.Element;
 
 /**
  * @internal
@@ -4853,7 +4884,7 @@ export declare interface IRichTextProps {
     /**
      * Separators to be used for rendering references.
      */
-    separators?: ISeparators_2;
+    separators?: ISeparators_3;
     /**
      * @alpha
      */
@@ -4948,6 +4979,14 @@ export declare interface IScrollGradientProps {
     children?: ReactNode;
 }
 
+/**
+ * Checks if a format string represents a currency format.
+ * A currency format is one where at least one numeric section contains a currency symbol.
+ *
+ * @alpha
+ */
+export declare function isCurrencyFormat(format: string | undefined | null): boolean;
+
 /**
  * @internal
  */
@@ -5411,7 +5450,7 @@ export declare interface IStylingSettingWidgetProps<T extends StylingPickerItemC
     className?: string;
     shouldDisableCancelButton?: boolean;
     shouldDisableApplyButton?: boolean;
-    onApply?: (ref: ObjRef) => void;
+    onApply?: (ref: ObjRef | null) => void;
     onCancel?: () => void;
     onListActionClick?: () => void;
     onItemEdit?: (modifiedItem: IStylingPickerItem<T>) => void;
@@ -5419,7 +5458,7 @@ export declare interface IStylingSettingWidgetProps<T extends StylingPickerItemC
     locale?: string;
     onHelpClick?: () => void;
     onItemMenuToggle?: (ref: ObjRef) => void;
-    onItemSelect?: (ref: ObjRef) => void;
+    onItemSelect?: (ref: ObjRef | null) => void;
     isEditingSupported?: boolean;
     isSavingActionInProgress?: boolean;
 }
@@ -6444,9 +6483,7 @@ export declare const modifierNegator: "!";
 /**
  * @internal
  */
-export declare const MultiSelectList: FC<WithIntlProps<IMultiSelectListProps<unknown>>> & {
-    WrappedComponent: ComponentType<IMultiSelectListProps<unknown>>;
-};
+export declare function MultiSelectList<T>({ isMobile, width, height, items, itemHeight, itemsCount, onScrollEnd, renderItem, selectedItems, listClassNames, onSelectAll, onSelectNone, isInverted, isSearching, isSelected, filteredItemsCount, selectAllCheckbox, tagName, }: IMultiSelectListProps<T>): JSX.Element;
 
 /**
  * @internal
@@ -7183,6 +7220,7 @@ export declare interface UiAsyncTableAccessibilityConfig<T> {
 export declare interface UiAsyncTableBulkAction {
     label: string;
     onClick: () => void;
+    accessibilityConfig?: IAccessibilityConfigBase;
 }
 
 /**
@@ -7795,6 +7833,92 @@ export declare interface UiPagedVirtualListSkeletonItemProps {
     itemHeight: number;
 }
 
+/**
+ * A circular button used for pagination navigation (previous/next).
+ *
+ * @remarks
+ * The button has a circular shape with a light gray background that darkens on hover.
+ * The icon color inverts to white when hovered or active.
+ *
+ * @internal
+ */
+export declare const UiPaginationButton: ForwardRefExoticComponent<UiPaginationButtonProps & RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Direction of the pagination button arrow.
+ *
+ * @internal
+ */
+export declare type UiPaginationButtonDirection = "previous" | "next";
+
+/**
+ * Props for the UiPaginationButton component.
+ *
+ * @internal
+ */
+export declare interface UiPaginationButtonProps {
+    /**
+     * Direction of the arrow icon.
+     * - "previous" shows left arrow (paginationLeft)
+     * - "next" shows right arrow (paginationRight)
+     */
+    direction: UiPaginationButtonDirection;
+    /**
+     * Accessible label for the button.
+     */
+    label: string;
+    /**
+     * Size of the button.
+     * - "small" (22x22) - for desktop views
+     * - "large" (32x32) - for mobile views
+     * @defaultValue "small"
+     */
+    size?: UiPaginationButtonSize;
+    /**
+     * Whether the button is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the button is in active/selected state.
+     */
+    isActive?: boolean;
+    /**
+     * Click handler.
+     */
+    onClick?: (e: MouseEvent_2<HTMLButtonElement>) => void;
+    /**
+     * Keyboard event handler.
+     */
+    onKeyDown?: (e: KeyboardEvent_2<HTMLButtonElement>) => void;
+    /**
+     * Data attribute for tracking/analytics.
+     */
+    dataId?: string;
+    /**
+     * Data attribute for testing.
+     */
+    dataTestId?: string;
+    /**
+     * Tab index for keyboard navigation.
+     */
+    tabIndex?: number;
+    /**
+     * HTML id attribute.
+     */
+    id?: string;
+    /**
+     * Accessibility configuration for ARIA attributes.
+     */
+    accessibilityConfig?: IAccessibilityConfigBase;
+}
+
+/**
+ * Size variant for UiPaginationButton.
+ *
+ * @internal
+ */
+export declare type UiPaginationButtonSize = "small" | "large";
+
 /**
  * @internal
  */
@@ -8163,6 +8287,27 @@ export declare function useAsyncTableResponsiveColumns<T>(columns: Array<UiAsync
     columns: UiAsyncTableColumnDefinitionResponsive<T>[];
 };
 
+/**
+ * @internal
+ *
+ * Ensures that currency metrics default to a meaningful preset instead of falling back to custom formats.
+ * - When no format is set yet, it applies the inherited override or the standard currency preset.
+ * - When switching to currency with an incompatible format, it coerces the format to a supported preset.
+ */
+export declare function useCurrencyFormatDefaults({ metricType, normalizedFormat, currencyFormatOverride, presetFormats, hasInheritPreset, onFormatChange, shouldBootstrap, fallbackFormat, }: UseCurrencyFormatDefaultsConfig): void;
+
+/** @internal */
+export declare interface UseCurrencyFormatDefaultsConfig {
+    metricType?: MetricType;
+    normalizedFormat: string | null;
+    currencyFormatOverride?: string | null;
+    presetFormats: string[];
+    hasInheritPreset: boolean;
+    onFormatChange: (format: string | null) => void;
+    shouldBootstrap: boolean;
+    fallbackFormat?: string;
+}
+
 /**
  * @internal
  */
@@ -8393,6 +8538,13 @@ export declare function useUiTreeViewEventSubscriber<T extends UiTreeViewEventTy
  */
 export declare const useZoom: () => IZoomContextState;
 
+/**
+ * Validates a number format string that is expected to represent a currency amount.
+ *
+ * @alpha
+ */
+export declare function validateCurrencyFormat(format: string | undefined | null, options?: ICurrencyFormatValidationOptions): ICurrencyFormatValidationResult;
+
 /**
  * @internal
  * Icon button variant same as tertiary but removing extra padding around the icon

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.13.0-alpha.1",
+  "version": "11.13.0-alpha.2",
   "description": "GoodData SDK - UI Building Components",
   "repository": {
     "type": "git",
@@ -76,11 +76,11 @@
     "tslib": "2.8.1",
     "unified": "^11.0.5",
     "uuid": "^11.1.0",
-    "@gooddata/sdk-backend-spi": "11.13.0-alpha.1",
-    "@gooddata/sdk-ui": "11.13.0-alpha.1",
-    "@gooddata/sdk-ui-theme-provider": "11.13.0-alpha.1",
-    "@gooddata/util": "11.13.0-alpha.1",
-    "@gooddata/sdk-model": "11.13.0-alpha.1"
+    "@gooddata/sdk-backend-spi": "11.13.0-alpha.2",
+    "@gooddata/sdk-model": "11.13.0-alpha.2",
+    "@gooddata/util": "11.13.0-alpha.2",
+    "@gooddata/sdk-ui-theme-provider": "11.13.0-alpha.2",
+    "@gooddata/sdk-ui": "11.13.0-alpha.2"
   },
   "devDependencies": {
     "@gooddata/stylelint-config": "^5.0.0",
@@ -130,9 +130,9 @@
     "typescript": "5.8.3",
     "vitest": "3.2.4",
     "vitest-dom": "0.1.1",
-    "@gooddata/eslint-config": "11.13.0-alpha.1",
-    "@gooddata/sdk-backend-mockingbird": "11.13.0-alpha.1",
-    "@gooddata/reference-workspace": "11.13.0-alpha.1"
+    "@gooddata/eslint-config": "11.13.0-alpha.2",
+    "@gooddata/reference-workspace": "11.13.0-alpha.2",
+    "@gooddata/sdk-backend-mockingbird": "11.13.0-alpha.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiPaginationButton/UiPaginationButton.scss

@@ -0,0 +1,56 @@
+// (C) 2025 GoodData Corporation
+
+.gd-ui-kit-pagination-button {
+    // Circular shape
+    border-radius: 50%;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    transition: var(--gd-transition-all);
+
+    // Default state colors
+    --gd-icon-fill-color: var(--gd-palette-complementary-7);
+    background-color: var(--gd-palette-complementary-2);
+
+    &:disabled {
+        cursor: default;
+        opacity: 0.5;
+    }
+
+    &:not(:disabled) {
+        &:hover,
+        &:focus-visible,
+        &:active {
+            --gd-icon-fill-color: var(--gd-palette-complementary-0);
+            background-color: var(--gd-palette-complementary-5);
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--gd-palette-primary-base);
+            outline-offset: 1px;
+        }
+    }
+
+    &--isActive {
+        --gd-icon-fill-color: var(--gd-palette-complementary-0);
+        background-color: var(--gd-palette-complementary-5);
+    }
+
+    /**
+     * Size variants
+     */
+    &--size {
+        &-small {
+            width: 22px;
+            height: 22px;
+        }
+
+        &-large {
+            width: 32px;
+            height: 32px;
+        }
+    }
+}

package/src/@ui/index.scss

@@ -3,6 +3,7 @@
 @use "./UiButton/UiButton.scss";
 @use "./UiButtonSegmentedControl/UiButtonSegmentedControl.scss";
 @use "./UiIconButton/UiIconButton.scss";
+@use "./UiPaginationButton/UiPaginationButton.scss";
 @use "./UiIcon/UiIcon.scss";
 @use "./UiSkeleton/UiSkeleton.scss";
 @use "./UiPagedVirtualList/UiPagedVirtualList.scss";

package/styles/css/main.css

@@ -740,6 +740,46 @@
   --gd-icon-fill-color: var(--gd-palette-complementary-7);
 }
 
+.gd-ui-kit-pagination-button {
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: var(--gd-transition-all);
+  --gd-icon-fill-color: var(--gd-palette-complementary-7);
+  background-color: var(--gd-palette-complementary-2);
+  /**
+   * Size variants
+   */
+}
+.gd-ui-kit-pagination-button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.gd-ui-kit-pagination-button:not(:disabled):hover, .gd-ui-kit-pagination-button:not(:disabled):focus-visible, .gd-ui-kit-pagination-button:not(:disabled):active {
+  --gd-icon-fill-color: var(--gd-palette-complementary-0);
+  background-color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-pagination-button:not(:disabled):focus-visible {
+  outline: 2px solid var(--gd-palette-primary-base);
+  outline-offset: 1px;
+}
+.gd-ui-kit-pagination-button--isActive {
+  --gd-icon-fill-color: var(--gd-palette-complementary-0);
+  background-color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-pagination-button--size-small {
+  width: 22px;
+  height: 22px;
+}
+.gd-ui-kit-pagination-button--size-large {
+  width: 32px;
+  height: 32px;
+}
+
 .gd-ui-kit-icon {
   fill: var(--gd-icon-fill-color);
 }