@gooddata/sdk-ui-kit 11.39.0-alpha.2 → 11.39.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/@ui/@types/icon.d.ts +1 -1
- package/esm/@ui/UiButton/UiButton.d.ts +7 -0
- package/esm/@ui/UiButton/UiButton.js +2 -2
- package/esm/@ui/UiConfirmDialog/UiConfirmDialog.d.ts +38 -0
- package/esm/@ui/UiConfirmDialog/UiConfirmDialog.js +28 -0
- package/esm/@ui/UiDialogShell/UiDialogFooter.d.ts +21 -0
- package/esm/@ui/UiDialogShell/UiDialogFooter.js +12 -0
- package/esm/@ui/UiDialogShell/UiDialogHeader.d.ts +26 -0
- package/esm/@ui/UiDialogShell/UiDialogHeader.js +19 -0
- package/esm/@ui/UiDialogShell/UiDialogShell.d.ts +58 -0
- package/esm/@ui/UiDialogShell/UiDialogShell.js +36 -0
- package/esm/@ui/UiIcon/icons.js +4 -0
- package/esm/@ui/UiSectionHeading/UiSectionHeading.d.ts +18 -0
- package/esm/@ui/UiSectionHeading/UiSectionHeading.js +14 -0
- package/esm/index.d.ts +5 -0
- package/esm/index.js +5 -0
- package/esm/locales.d.ts +8 -0
- package/esm/locales.js +5 -1
- package/esm/sdk-ui-kit.d.ts +168 -1
- package/package.json +11 -11
- package/src/@ui/UiConfirmDialog/UiConfirmDialog.scss +13 -0
- package/src/@ui/UiDialogShell/UiDialogShell.scss +57 -0
- package/src/@ui/UiSectionHeading/UiSectionHeading.scss +29 -0
- package/src/@ui/index.scss +3 -0
- package/styles/css/main.css +87 -0
- package/styles/css/main.css.map +1 -1
package/esm/@ui/@types/icon.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @internal
|
|
3
3
|
*/
|
|
4
|
-
export 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" | "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" | "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" | "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";
|
|
4
|
+
export 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" | "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" | "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";
|
|
@@ -34,6 +34,13 @@ export interface IUiButtonProps {
|
|
|
34
34
|
accessibilityConfig?: IUiButtonAccessibilityConfig;
|
|
35
35
|
maxWidth?: number;
|
|
36
36
|
tabIndex?: number;
|
|
37
|
+
/**
|
|
38
|
+
* When true, the button is focused on mount via the native HTML
|
|
39
|
+
* <code>autofocus</code> attribute. Use sparingly — best fit is the safest
|
|
40
|
+
* action in a confirmation dialog so accidental Enter presses cancel
|
|
41
|
+
* rather than confirm a destructive action.
|
|
42
|
+
*/
|
|
43
|
+
autoFocus?: boolean;
|
|
37
44
|
}
|
|
38
45
|
/**
|
|
39
46
|
* @internal
|
|
@@ -11,7 +11,7 @@ const getGeneratedTestId = (label, ariaLabel) => {
|
|
|
11
11
|
/**
|
|
12
12
|
* @internal
|
|
13
13
|
*/
|
|
14
|
-
export const UiButton = forwardRef(({ id, size = "medium", variant = "secondary", tabIndex = 0, label, isDisabled, isSelected, isLoading, disableIconAnimation, iconBefore, iconBeforeSize: iconBeforeSizeProp, iconAfter, iconAfterSize: iconAfterSizeProp, badgeAfter, onClick, onKeyDown, dataId, dataTestId, accessibilityConfig, maxWidth, }, ref) => {
|
|
14
|
+
export const UiButton = forwardRef(({ id, size = "medium", variant = "secondary", tabIndex = 0, label, isDisabled, isSelected, isLoading, disableIconAnimation, iconBefore, iconBeforeSize: iconBeforeSizeProp, iconAfter, iconAfterSize: iconAfterSizeProp, badgeAfter, onClick, onKeyDown, dataId, dataTestId, accessibilityConfig, maxWidth, autoFocus, }, ref) => {
|
|
15
15
|
const iconBeforeSize = iconBeforeSizeProp ?? (size === "small" ? 16 : 18);
|
|
16
16
|
const iconAfterSize = iconAfterSizeProp ?? (size === "small" ? 16 : 18);
|
|
17
17
|
const hasIconBefore = !!iconBefore;
|
|
@@ -24,6 +24,6 @@ export const UiButton = forwardRef(({ id, size = "medium", variant = "secondary"
|
|
|
24
24
|
hasIconBefore,
|
|
25
25
|
hasIconAfter,
|
|
26
26
|
isSelected: isSelected ?? false,
|
|
27
|
-
}), disabled: isDisabled, tabIndex: tabIndex, onClick: onClick, onKeyDown: onKeyDown, "data-id": dataId, "data-testid": testId, "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-expanded": accessibilityConfig?.ariaExpanded, "aria-description": accessibilityConfig?.ariaDescription, "aria-controls": accessibilityConfig?.ariaControls, "aria-haspopup": accessibilityConfig?.ariaHaspopup, role: accessibilityConfig?.role, children: [iconBefore ? (_jsx(UiIcon, { type: iconBefore, size: iconBeforeSize, accessibilityConfig: { ariaHidden: accessibilityConfig?.iconAriaHidden }, disableAnimation: disableIconAnimation })) : null, _jsx("span", { className: e("text"), style: { maxWidth }, children: label }), badgeAfter !== undefined && typeof badgeAfter === "number" ? (_jsxs("span", { className: e("badge"), children: ["(", badgeAfter, ")"] })) : null, badgeAfter !== undefined && typeof badgeAfter === "string" ? (_jsx("span", { className: e("badge"), children: badgeAfter })) : null, iconAfter ? (_jsx(UiIcon, { type: iconAfter, size: iconAfterSize, accessibilityConfig: { ariaHidden: accessibilityConfig?.iconAriaHidden }, disableAnimation: disableIconAnimation })) : null] }));
|
|
27
|
+
}), disabled: isDisabled, tabIndex: tabIndex, autoFocus: autoFocus, onClick: onClick, onKeyDown: onKeyDown, "data-id": dataId, "data-testid": testId, "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": accessibilityConfig?.ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, "aria-expanded": accessibilityConfig?.ariaExpanded, "aria-description": accessibilityConfig?.ariaDescription, "aria-controls": accessibilityConfig?.ariaControls, "aria-haspopup": accessibilityConfig?.ariaHaspopup, role: accessibilityConfig?.role, children: [iconBefore ? (_jsx(UiIcon, { type: iconBefore, size: iconBeforeSize, accessibilityConfig: { ariaHidden: accessibilityConfig?.iconAriaHidden }, disableAnimation: disableIconAnimation })) : null, _jsx("span", { className: e("text"), style: { maxWidth }, children: label }), badgeAfter !== undefined && typeof badgeAfter === "number" ? (_jsxs("span", { className: e("badge"), children: ["(", badgeAfter, ")"] })) : null, badgeAfter !== undefined && typeof badgeAfter === "string" ? (_jsx("span", { className: e("badge"), children: badgeAfter })) : null, iconAfter ? (_jsx(UiIcon, { type: iconAfter, size: iconAfterSize, accessibilityConfig: { ariaHidden: accessibilityConfig?.iconAriaHidden }, disableAnimation: disableIconAnimation })) : null] }));
|
|
28
28
|
});
|
|
29
29
|
UiButton.displayName = "UiButton";
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
import { type VariantDanger, type VariantPrimary } from "../@types/variant.js";
|
|
3
|
+
/**
|
|
4
|
+
* Visual variant of the confirm button.
|
|
5
|
+
*
|
|
6
|
+
* @internal
|
|
7
|
+
*/
|
|
8
|
+
export type ConfirmDialogVariant = VariantPrimary | VariantDanger;
|
|
9
|
+
/**
|
|
10
|
+
* @internal
|
|
11
|
+
*/
|
|
12
|
+
export interface IUiConfirmDialogProps {
|
|
13
|
+
/** Dialog title rendered inside the header. */
|
|
14
|
+
title: string;
|
|
15
|
+
/** Body content — typically a sentence or two of description. */
|
|
16
|
+
description: ReactNode;
|
|
17
|
+
/** Label for the confirm button — e.g. "Confirm", "Remove", "Transfer". */
|
|
18
|
+
confirmLabel: string;
|
|
19
|
+
/** Visual variant of the confirm button. */
|
|
20
|
+
confirmVariant?: ConfirmDialogVariant;
|
|
21
|
+
/** Fires when the user clicks the header X close button. */
|
|
22
|
+
onClose: () => void;
|
|
23
|
+
/** Fires when the user clicks the footer Cancel button. */
|
|
24
|
+
onCancel: () => void;
|
|
25
|
+
/** Fires when the user clicks the footer confirm button. */
|
|
26
|
+
onConfirm: () => void;
|
|
27
|
+
/** Test id forwarded to the root element. */
|
|
28
|
+
dataTestId?: string;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Compact modal confirm dialog used by the OLP share flow for actions that
|
|
32
|
+
* need explicit user confirmation (granting workspace access, restricting
|
|
33
|
+
* access, removing a grantee, transferring ownership). Always modal — focus
|
|
34
|
+
* is trapped inside, autofocus + return-focus apply, and ESC fires onClose.
|
|
35
|
+
*
|
|
36
|
+
* @internal
|
|
37
|
+
*/
|
|
38
|
+
export declare function UiConfirmDialog({ title, description, confirmLabel, confirmVariant, onClose, onCancel, onConfirm, dataTestId }: IUiConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// (C) 2026 GoodData Corporation
|
|
3
|
+
import { useId } from "react";
|
|
4
|
+
import { useIntl } from "react-intl";
|
|
5
|
+
import { commonDialogMessages } from "../../locales.js";
|
|
6
|
+
import { bem } from "../@utils/bem.js";
|
|
7
|
+
import { UiButton } from "../UiButton/UiButton.js";
|
|
8
|
+
import { UiDialogFooter } from "../UiDialogShell/UiDialogFooter.js";
|
|
9
|
+
import { UiDialogHeader } from "../UiDialogShell/UiDialogHeader.js";
|
|
10
|
+
import { UiDialogShell } from "../UiDialogShell/UiDialogShell.js";
|
|
11
|
+
const { b, e } = bem("gd-ui-kit-confirm-dialog");
|
|
12
|
+
/**
|
|
13
|
+
* Compact modal confirm dialog used by the OLP share flow for actions that
|
|
14
|
+
* need explicit user confirmation (granting workspace access, restricting
|
|
15
|
+
* access, removing a grantee, transferring ownership). Always modal — focus
|
|
16
|
+
* is trapped inside, autofocus + return-focus apply, and ESC fires onClose.
|
|
17
|
+
*
|
|
18
|
+
* @internal
|
|
19
|
+
*/
|
|
20
|
+
export function UiConfirmDialog({ title, description, confirmLabel, confirmVariant = "primary", onClose, onCancel, onConfirm, dataTestId, }) {
|
|
21
|
+
const intl = useIntl();
|
|
22
|
+
const descriptionId = useId();
|
|
23
|
+
return (_jsx(UiDialogShell, { width: 420, isModal: true, onClose: onClose, dataTestId: dataTestId, accessibilityConfig: { ariaDescribedBy: descriptionId }, children: _jsxs("div", { className: b(), children: [
|
|
24
|
+
_jsx(UiDialogHeader, { title: title, onClose: onClose }), _jsx("div", { className: e("body"), id: descriptionId, children: description }), _jsxs(UiDialogFooter, { children: [
|
|
25
|
+
_jsx(UiButton, { label: intl.formatMessage(commonDialogMessages.cancel), variant: "secondary", size: "medium", onClick: onCancel, autoFocus: true }), _jsx(UiButton, { label: confirmLabel, variant: confirmVariant, size: "medium", onClick: onConfirm })
|
|
26
|
+
] })
|
|
27
|
+
] }) }));
|
|
28
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @internal
|
|
4
|
+
*/
|
|
5
|
+
export interface IUiDialogFooterProps {
|
|
6
|
+
/** Right-aligned cluster of footer controls (typically Cancel + primary). */
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* When true, draws a 1px complementary-3 divider above the footer and adds
|
|
10
|
+
* matching top padding. ObjectShareDialog and AddGranteeScreen want this;
|
|
11
|
+
* ConfirmDialog does not.
|
|
12
|
+
*/
|
|
13
|
+
divider?: boolean;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Dialog footer: right-aligned cluster of action buttons. Optionally renders
|
|
17
|
+
* a 1px divider above the actions.
|
|
18
|
+
*
|
|
19
|
+
* @internal
|
|
20
|
+
*/
|
|
21
|
+
export declare function UiDialogFooter({ children, divider }: IUiDialogFooterProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { bem } from "../@utils/bem.js";
|
|
3
|
+
const { b } = bem("gd-ui-kit-dialog-footer");
|
|
4
|
+
/**
|
|
5
|
+
* Dialog footer: right-aligned cluster of action buttons. Optionally renders
|
|
6
|
+
* a 1px divider above the actions.
|
|
7
|
+
*
|
|
8
|
+
* @internal
|
|
9
|
+
*/
|
|
10
|
+
export function UiDialogFooter({ children, divider = false }) {
|
|
11
|
+
return _jsx("div", { className: b({ divider }), children: children });
|
|
12
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Title sizing variant.
|
|
4
|
+
*
|
|
5
|
+
* @internal
|
|
6
|
+
*/
|
|
7
|
+
export type DialogHeaderTitleSize = "default" | "large";
|
|
8
|
+
/**
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
export interface IUiDialogHeaderProps {
|
|
12
|
+
/** Title shown in the header. */
|
|
13
|
+
title: string;
|
|
14
|
+
/** Title size — <code>"default"</code> = 18/26, <code>"large"</code> = 20/26. */
|
|
15
|
+
titleSize?: DialogHeaderTitleSize;
|
|
16
|
+
/** Fires when the user clicks the X close button. Omit to hide the X. */
|
|
17
|
+
onClose?: () => void;
|
|
18
|
+
/** Optional leading slot rendered before the title (e.g. a back button). */
|
|
19
|
+
leading?: ReactNode;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Dialog header: optional leading slot + title + optional close X.
|
|
23
|
+
*
|
|
24
|
+
* @internal
|
|
25
|
+
*/
|
|
26
|
+
export declare function UiDialogHeader({ title, titleSize, onClose, leading }: IUiDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useIntl } from "react-intl";
|
|
3
|
+
import { commonDialogMessages } from "../../locales.js";
|
|
4
|
+
import { bem } from "../@utils/bem.js";
|
|
5
|
+
import { UiIconButton } from "../UiIconButton/UiIconButton.js";
|
|
6
|
+
import { useUiDialogContext } from "./UiDialogShell.js";
|
|
7
|
+
const { b, e } = bem("gd-ui-kit-dialog-header");
|
|
8
|
+
/**
|
|
9
|
+
* Dialog header: optional leading slot + title + optional close X.
|
|
10
|
+
*
|
|
11
|
+
* @internal
|
|
12
|
+
*/
|
|
13
|
+
export function UiDialogHeader({ title, titleSize = "default", onClose, leading }) {
|
|
14
|
+
const intl = useIntl();
|
|
15
|
+
const dialogContext = useUiDialogContext();
|
|
16
|
+
return (_jsxs("div", { className: b(), children: [leading ? _jsx("span", { className: e("leading"), children: leading }) : null, _jsx("h2", { id: dialogContext?.titleId, className: e("title", { size: titleSize }), children: title }), onClose ? (_jsx(UiIconButton, { icon: "cross", variant: "tertiary", size: "small", onClick: onClose, accessibilityConfig: {
|
|
17
|
+
ariaLabel: intl.formatMessage(commonDialogMessages.close),
|
|
18
|
+
} })) : null] }));
|
|
19
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Accessibility config for a dialog. By default the shell wires
|
|
4
|
+
* <code>aria-labelledby</code> to the <code>UiDialogHeader</code> title via
|
|
5
|
+
* context — no config is needed when a header is present. For headerless
|
|
6
|
+
* dialogs, pass <code>ariaLabel</code>; to point at an external title
|
|
7
|
+
* element, pass <code>ariaLabelledBy</code>.
|
|
8
|
+
*
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
export interface IUiDialogShellAccessibilityConfig {
|
|
12
|
+
ariaLabel?: string;
|
|
13
|
+
ariaLabelledBy?: string;
|
|
14
|
+
ariaDescribedBy?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* @internal
|
|
18
|
+
*/
|
|
19
|
+
export interface IUiDialogShellProps {
|
|
20
|
+
/** Header / body / footer composed by the caller. */
|
|
21
|
+
children: ReactNode;
|
|
22
|
+
/** Dialog width in px. Defaults to 540. */
|
|
23
|
+
width?: number;
|
|
24
|
+
/**
|
|
25
|
+
* When true, the dialog acts as a modal: focus is trapped inside,
|
|
26
|
+
* autofocus + return-focus-on-unmount apply, ESC fires <code>onClose</code>,
|
|
27
|
+
* and <code>aria-modal="true"</code> is set. Leave off for inline
|
|
28
|
+
* non-blocking dialog cards.
|
|
29
|
+
*/
|
|
30
|
+
isModal?: boolean;
|
|
31
|
+
/** Fires when the user dismisses via ESC. Only active when <code>isModal</code>. */
|
|
32
|
+
onClose?: () => void;
|
|
33
|
+
/**
|
|
34
|
+
* Accessibility config. Usually unnecessary — when <code>UiDialogHeader</code>
|
|
35
|
+
* is used as a child the shell auto-wires <code>aria-labelledby</code> to
|
|
36
|
+
* the header's title.
|
|
37
|
+
*/
|
|
38
|
+
accessibilityConfig?: IUiDialogShellAccessibilityConfig;
|
|
39
|
+
/** Test id forwarded to the root element. */
|
|
40
|
+
dataTestId?: string;
|
|
41
|
+
}
|
|
42
|
+
interface IUiDialogContext {
|
|
43
|
+
titleId: string;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* @internal
|
|
47
|
+
*/
|
|
48
|
+
export declare function useUiDialogContext(): IUiDialogContext | null;
|
|
49
|
+
/**
|
|
50
|
+
* Plain dialog card chrome — 4px radius, soft shadow, complementary-0 fill,
|
|
51
|
+
* 20px padding. Holds whatever the caller composes inside. Set
|
|
52
|
+
* <code>isModal</code> for blocking dialogs (adds focus trap, autofocus,
|
|
53
|
+
* return-focus, ESC handling and <code>aria-modal</code>).
|
|
54
|
+
*
|
|
55
|
+
* @internal
|
|
56
|
+
*/
|
|
57
|
+
export declare function UiDialogShell({ children, width, isModal, onClose, accessibilityConfig, dataTestId }: IUiDialogShellProps): import("react/jsx-runtime").JSX.Element;
|
|
58
|
+
export {};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
// (C) 2026 GoodData Corporation
|
|
3
|
+
import { createContext, useContext, useId } from "react";
|
|
4
|
+
import { bem } from "../@utils/bem.js";
|
|
5
|
+
import { UiFocusManager } from "../UiFocusManager/UiFocusManager.js";
|
|
6
|
+
const { b } = bem("gd-ui-kit-dialog-shell");
|
|
7
|
+
const UiDialogContext = createContext(null);
|
|
8
|
+
/**
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
export function useUiDialogContext() {
|
|
12
|
+
return useContext(UiDialogContext);
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Plain dialog card chrome — 4px radius, soft shadow, complementary-0 fill,
|
|
16
|
+
* 20px padding. Holds whatever the caller composes inside. Set
|
|
17
|
+
* <code>isModal</code> for blocking dialogs (adds focus trap, autofocus,
|
|
18
|
+
* return-focus, ESC handling and <code>aria-modal</code>).
|
|
19
|
+
*
|
|
20
|
+
* @internal
|
|
21
|
+
*/
|
|
22
|
+
export function UiDialogShell({ children, width = 540, isModal = false, onClose, accessibilityConfig, dataTestId, }) {
|
|
23
|
+
const titleId = useId();
|
|
24
|
+
const ariaLabelledBy = accessibilityConfig?.ariaLabelledBy ?? (accessibilityConfig?.ariaLabel ? undefined : titleId);
|
|
25
|
+
const handleKeyDown = (event) => {
|
|
26
|
+
if (isModal && event.key === "Escape" && onClose) {
|
|
27
|
+
event.stopPropagation();
|
|
28
|
+
onClose();
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
const card = (_jsx("div", { className: b(), "data-testid": dataTestId, style: { width }, role: "dialog", "aria-modal": isModal || undefined, "aria-label": accessibilityConfig?.ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": accessibilityConfig?.ariaDescribedBy, onKeyDown: handleKeyDown, children: _jsx(UiDialogContext.Provider, { value: { titleId }, children: children }) }));
|
|
32
|
+
if (!isModal) {
|
|
33
|
+
return card;
|
|
34
|
+
}
|
|
35
|
+
return (_jsx(UiFocusManager, { enableAutofocus: true, enableFocusTrap: true, enableReturnFocusOnUnmount: true, children: card }));
|
|
36
|
+
}
|
package/esm/@ui/UiIcon/icons.js
CHANGED
|
@@ -120,6 +120,10 @@ export const iconPaths = {
|
|
|
120
120
|
ldmAttribute: (_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.79195 7.00251L6.53195 13.6414C6.53195 13.642 6.53223 13.6425 6.5325 13.6431C6.53278 13.6436 6.53306 13.6442 6.53306 13.6447C6.56084 13.7136 6.57417 13.7847 6.57417 13.8558C6.57417 13.9325 6.55862 14.0047 6.52861 14.0725C6.50195 14.1336 6.46528 14.1892 6.41973 14.2381C6.3675 14.2936 6.30417 14.337 6.23084 14.367C6.21417 14.3736 6.17195 14.387 6.15306 14.3903C6.1375 14.3936 6.04417 14.4081 6.0275 14.4081C5.9675 14.4081 5.90862 14.3981 5.85417 14.3781C5.80862 14.3614 5.76862 14.3414 5.72973 14.3181C5.68306 14.2881 5.64306 14.2536 5.60973 14.2158C5.56861 14.1703 5.53639 14.117 5.51417 14.057L4.7475 12.1936H1.82417L1.05417 14.0647C1.02528 14.1358 0.98306 14.1992 0.927504 14.2525C0.878615 14.2981 0.824171 14.3347 0.76306 14.3625C0.634171 14.4214 0.480838 14.4236 0.339727 14.367C0.267504 14.337 0.204171 14.2936 0.151949 14.2381C0.101949 14.1847 0.0652822 14.1236 0.0397266 14.0581C0.0163933 13.997 0.00305995 13.9325 0.000837725 13.8692C-0.00360672 13.7925 0.00972661 13.717 0.0386155 13.6447L2.77862 7.00474C2.79973 6.95363 2.82862 6.90696 2.86306 6.86474C2.89639 6.82363 2.93639 6.78696 2.98084 6.75807C3.0275 6.72474 3.07973 6.7014 3.13639 6.68585C3.23306 6.6614 3.33084 6.65918 3.43528 6.68585C3.49195 6.7014 3.54417 6.72474 3.59084 6.75807C3.63528 6.78696 3.67528 6.82363 3.70862 6.86474C3.74306 6.90696 3.77195 6.95363 3.79195 7.00251ZM3.28749 8.65697L2.28193 11.0903H4.29082L3.28749 8.65697ZM12.952 11.107C12.8831 10.9492 12.7931 10.807 12.6842 10.6825C12.5775 10.5603 12.4553 10.4558 12.3153 10.3681L12.222 10.3136C12.3131 10.1947 12.3931 10.0603 12.4564 9.91362C12.522 9.76473 12.5686 9.60029 12.5953 9.4214C12.6208 9.25695 12.6353 9.07695 12.6397 8.87362C12.6353 8.50584 12.5831 8.1814 12.4831 7.90917C12.3786 7.61917 12.2097 7.37695 11.9831 7.18918C11.7642 7.00695 11.4897 6.87251 11.1675 6.78806C10.8597 6.70806 10.4886 6.66695 10.0664 6.66695H8.14751C8.07085 6.66695 7.99974 6.68251 7.93751 6.71251C7.88085 6.74029 7.82862 6.77695 7.78418 6.82251C7.72974 6.87695 7.68974 6.94029 7.66529 7.0114C7.64529 7.06806 7.63307 7.12806 7.62529 7.21917L7.63196 13.8281C7.62307 13.9147 7.63751 14.0003 7.67307 14.0803C7.69862 14.1392 7.73196 14.1914 7.77085 14.2381C7.81751 14.2925 7.8764 14.337 7.9464 14.367C8.01085 14.3947 8.0764 14.4081 8.14307 14.4081H10.3275C10.5664 14.4081 10.7797 14.4003 10.9675 14.3858C11.1597 14.3703 11.3353 14.3492 11.4964 14.3203C11.6664 14.2914 11.8175 14.2503 11.9486 14.2014C12.082 14.1503 12.2053 14.0903 12.322 14.0192C12.4553 13.9347 12.5775 13.8303 12.6842 13.7092C12.7931 13.5847 12.8831 13.4425 12.952 13.2847C13.0164 13.1336 13.0675 12.9636 13.1008 12.7814C13.1342 12.6003 13.1497 12.4003 13.1464 12.1981C13.1497 11.9892 13.1342 11.7914 13.1008 11.6092C13.0675 11.427 13.0164 11.2581 12.952 11.107ZM11.5375 8.34141C11.5197 8.28585 11.4964 8.23585 11.4664 8.19363C11.4319 8.14363 11.393 8.1003 11.3519 8.06363C11.3008 8.01919 11.2364 7.97808 11.1653 7.94363C11.0864 7.90585 10.9953 7.87474 10.893 7.8503C10.783 7.82474 10.6608 7.80474 10.5264 7.79141C10.3875 7.77697 10.2342 7.7703 10.0664 7.7703H8.65971L8.65638 9.98252H10.0664C10.2342 9.98252 10.3875 9.97697 10.5264 9.96252C10.6608 9.94919 10.783 9.92919 10.893 9.90252C10.9953 9.87919 11.0864 9.84697 11.1653 9.80919C11.2364 9.77585 11.3008 9.73474 11.3542 9.68808C11.393 9.65252 11.4319 9.60919 11.4664 9.5603C11.4964 9.51697 11.5197 9.46808 11.5375 9.41252C11.5608 9.33919 11.5786 9.25919 11.593 9.1703C11.6075 9.08363 11.613 8.98808 11.6097 8.88585C11.613 8.76585 11.6075 8.6703 11.593 8.58252C11.5786 8.49474 11.5608 8.41363 11.5375 8.34141ZM10.3219 13.2992H8.65638L8.65971 11.087H10.2642C10.2674 11.087 10.2742 11.0864 10.2829 11.0856L10.293 11.0847C10.4044 11.0932 10.5154 11.0944 10.62 11.0956C10.7074 11.0966 10.7904 11.0975 10.8653 11.1025C11.0175 11.1125 11.1564 11.1292 11.2808 11.1503C11.3975 11.1714 11.4997 11.197 11.5864 11.227C11.6675 11.2559 11.7419 11.2892 11.7997 11.3225C11.8386 11.3481 11.8808 11.3814 11.923 11.4214C11.953 11.4481 11.9808 11.4892 12.0075 11.5425C12.0386 11.6092 12.0664 11.6959 12.0908 11.7992C12.1142 11.9014 12.1242 12.0325 12.1208 12.1992C12.1242 12.3581 12.1142 12.4903 12.0908 12.5914C12.0675 12.6947 12.0397 12.7803 12.0075 12.8447C11.9819 12.8981 11.9519 12.9403 11.9197 12.9714C11.8775 13.0114 11.8375 13.0436 11.8086 13.0625C11.7419 13.1014 11.6675 13.1359 11.5864 13.1636C11.4997 13.1947 11.3975 13.2203 11.2808 13.2403C11.1575 13.2625 11.0197 13.277 10.8675 13.2859C10.7097 13.2947 10.5275 13.2992 10.3219 13.2992ZM19.8175 13.3458C19.8275 13.2747 19.8242 13.2014 19.8086 13.1292C19.792 13.057 19.7642 12.9914 19.7353 12.947C19.6942 12.877 19.642 12.8214 19.5797 12.7825C19.5264 12.7492 19.4697 12.727 19.4131 12.7158C19.3553 12.707 19.2964 12.7081 19.2364 12.7203C19.1675 12.7358 19.1031 12.7703 19.0531 12.8147C18.9575 12.8925 18.852 12.9614 18.7375 13.0225C18.6231 13.0847 18.4975 13.1358 18.3631 13.1758C18.2242 13.217 18.0753 13.2481 17.9153 13.2681C17.5597 13.3125 17.1431 13.3092 16.802 13.2558C16.6186 13.227 16.4497 13.1836 16.2997 13.127C16.1486 13.0692 16.0108 12.9992 15.8875 12.9158C15.7653 12.8336 15.6553 12.7381 15.5642 12.637C15.472 12.5281 15.3875 12.4025 15.3153 12.2636C15.2431 12.1225 15.182 11.9647 15.132 11.7925C15.082 11.6214 15.0431 11.4281 15.0186 11.2181C14.9931 11.0081 14.9808 10.7781 14.9808 10.5347C14.9808 10.2914 14.9931 10.0614 15.0186 9.8514C15.0431 9.64251 15.082 9.44918 15.132 9.27696C15.182 9.10473 15.2431 8.94696 15.3153 8.80696C15.3864 8.66918 15.4697 8.54584 15.562 8.44029C15.6575 8.3314 15.7675 8.23473 15.8875 8.15362C16.0108 8.0714 16.1486 8.00029 16.2997 7.94251C16.4497 7.88584 16.6186 7.84251 16.802 7.81362C17.142 7.7614 17.5575 7.75584 17.9142 7.80362C18.0742 7.82584 18.2231 7.85807 18.3631 7.89918C18.4997 7.94029 18.6242 7.99029 18.7408 8.0514C18.852 8.10918 18.9564 8.17807 19.0586 8.26473C19.1097 8.30362 19.1653 8.3314 19.2231 8.34807C19.2875 8.36584 19.3508 8.36918 19.4131 8.35918C19.4753 8.34807 19.5342 8.32251 19.5897 8.28362C19.6442 8.24473 19.6897 8.19696 19.7353 8.12807C19.7686 8.07029 19.7931 8.00696 19.8086 7.94029C19.8242 7.86807 19.8275 7.79473 19.8175 7.72362C19.8075 7.65029 19.7842 7.58251 19.7486 7.51918C19.7197 7.46807 19.6842 7.4214 19.6242 7.36251C19.4842 7.24473 19.3286 7.1414 19.162 7.05362C18.9997 6.96918 18.8231 6.89584 18.6375 6.83807C18.4531 6.7814 18.2553 6.73807 18.0497 6.70918C17.6031 6.64696 17.0753 6.65362 16.6375 6.72584C16.3975 6.76584 16.1697 6.82696 15.9597 6.90807C15.7475 6.98918 15.5486 7.09362 15.3697 7.21696C15.1897 7.3414 15.0253 7.48918 14.8797 7.65473C14.7342 7.8214 14.6042 8.0114 14.4953 8.21918C14.3875 8.42362 14.2964 8.64918 14.2253 8.8914C14.1553 9.12918 14.1008 9.38807 14.0642 9.6614C14.0275 9.93473 14.0097 10.2281 14.0097 10.5347C14.0097 10.8414 14.0275 11.1358 14.0642 11.4081C14.1008 11.6803 14.1542 11.9403 14.2253 12.1814C14.2964 12.4236 14.3875 12.6503 14.4964 12.8547C14.6042 13.0592 14.7342 13.2481 14.8797 13.4147C15.0253 13.5814 15.1897 13.7281 15.3697 13.8525C15.5486 13.9758 15.7464 14.0814 15.9586 14.1636C16.1697 14.247 16.3975 14.3092 16.6375 14.3492C16.8753 14.3881 17.132 14.4081 17.4008 14.4081C17.6286 14.4081 17.8453 14.3947 18.0497 14.3658C18.2553 14.3381 18.4531 14.2936 18.6375 14.237C18.8231 14.1792 18.9997 14.1058 19.1631 14.0181C19.3286 13.9292 19.4842 13.8247 19.6275 13.7047C19.6764 13.6614 19.7175 13.6092 19.752 13.5481C19.7853 13.4847 19.8075 13.417 19.8175 13.3458Z" })),
|
|
121
121
|
sharp: (_jsx("path", { d: "M16.084 6.12733C16.2402 6.12733 16.3704 6.17942 16.4746 6.28358C16.5918 6.38775 16.6504 6.51796 16.6504 6.67421C16.6504 6.83046 16.5918 6.96067 16.4746 7.06483C16.3704 7.169 16.2402 7.22108 16.084 7.22108H13.7988L12.8613 12.768H14.9902C15.1335 12.768 15.2572 12.8266 15.3613 12.9437C15.4785 13.0479 15.5371 13.1716 15.5371 13.3148C15.5371 13.4711 15.4785 13.6078 15.3613 13.725C15.2572 13.8292 15.1335 13.8812 14.9902 13.8812H12.6855L12.1973 16.7328C12.1842 16.876 12.1257 16.9932 12.0215 17.0844C11.9173 17.1625 11.8001 17.2016 11.6699 17.2016C11.6439 17.2016 11.6243 17.2016 11.6113 17.2016C11.5983 17.2016 11.5853 17.2016 11.5723 17.2016C11.416 17.1755 11.2923 17.1039 11.2012 16.9867C11.123 16.8565 11.097 16.7133 11.123 16.557L11.5527 13.8812H7.13867L6.66992 16.7328C6.64388 16.876 6.57878 16.9932 6.47461 17.0844C6.37044 17.1625 6.25326 17.2016 6.12305 17.2016C6.11003 17.2016 6.09049 17.2016 6.06445 17.2016C6.05143 17.2016 6.03841 17.2016 6.02539 17.2016C5.88216 17.1755 5.76497 17.1039 5.67383 16.9867C5.58268 16.8565 5.55013 16.7133 5.57617 16.557L6.02539 13.8812H3.89648C3.75326 13.8812 3.62305 13.8292 3.50586 13.725C3.40169 13.6078 3.34961 13.4711 3.34961 13.3148C3.34961 13.1716 3.40169 13.0479 3.50586 12.9437C3.62305 12.8266 3.75326 12.768 3.89648 12.768H6.20117L7.11914 7.22108H5.00977C4.85352 7.22108 4.72331 7.169 4.61914 7.06483C4.51497 6.96067 4.46289 6.83046 4.46289 6.67421C4.46289 6.51796 4.51497 6.38775 4.61914 6.28358C4.72331 6.17942 4.85352 6.12733 5.00977 6.12733H7.31445L7.7832 3.25624C7.80924 3.11301 7.88086 2.99582 7.99805 2.90468C8.12826 2.81353 8.27148 2.78098 8.42773 2.80702C8.58398 2.83306 8.70117 2.91119 8.7793 3.0414C8.87044 3.15858 8.90299 3.2953 8.87695 3.45155L8.42773 6.12733H12.8613L13.3301 3.25624C13.3561 3.11301 13.4277 2.99582 13.5449 2.90468C13.6751 2.81353 13.8184 2.78098 13.9746 2.80702C14.1178 2.83306 14.235 2.91119 14.3262 3.0414C14.4173 3.15858 14.4499 3.2953 14.4238 3.45155L13.9746 6.12733H16.084ZM11.748 12.768L12.666 7.22108H8.25195L7.33398 12.768H11.748Z" })),
|
|
122
122
|
attribute: (_jsx("path", { d: "M15.752 16.1035C15.804 16.2467 15.804 16.3835 15.752 16.5137C15.6999 16.6439 15.6087 16.7415 15.4785 16.8066C15.4395 16.8197 15.4004 16.8327 15.3613 16.8457C15.3353 16.8457 15.3027 16.8457 15.2637 16.8457C15.1595 16.8457 15.0618 16.8197 14.9707 16.7676C14.8926 16.7025 14.8275 16.6178 14.7754 16.5137L13.1543 12.627H6.8457L5.22461 16.5137C5.17253 16.6439 5.07487 16.7415 4.93164 16.8066C4.80143 16.8587 4.67122 16.8587 4.54102 16.8066C4.41081 16.7415 4.31315 16.6439 4.24805 16.5137C4.19596 16.3835 4.19596 16.2467 4.24805 16.1035L9.52148 3.48633C9.56055 3.38216 9.62565 3.30404 9.7168 3.25195C9.80794 3.18685 9.9056 3.1543 10.0098 3.1543C10.1139 3.1543 10.2116 3.18685 10.3027 3.25195C10.3939 3.30404 10.459 3.38216 10.498 3.48633L15.752 16.1035ZM7.29492 11.5723H12.7246L10.0098 5.04883L7.29492 11.5723Z" })),
|
|
123
|
+
ldmKey: (_jsx("g", { transform: "translate(3.5, 3)", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.81198 0.877486C8.98204 -0.29257 10.8855 -0.292214 12.0548 0.876865C13.225 2.04699 13.225 3.95021 12.0548 5.12033C11.03 6.14502 9.44298 6.27231 8.27872 5.50192L2.29696 11.4837L3.56976 12.7565C3.80395 12.9907 3.80395 13.3712 3.56976 13.6054C3.33556 13.8396 2.95501 13.8396 2.72081 13.6054L1.44802 12.3326L1.02417 12.7565C0.789979 12.9907 0.409424 12.9907 0.17523 12.7565C-0.0587544 12.5223 -0.0582723 12.1423 0.175852 11.9081L7.43039 4.6536C6.66042 3.48975 6.7873 1.90236 7.81198 0.877486ZM8.6603 1.72581C7.95885 2.4275 7.95883 3.56972 8.6603 4.27139C9.36197 4.97305 10.5041 4.97291 11.2059 4.27139C11.9076 3.56966 11.9076 2.42754 11.2059 1.72581C10.5041 1.02426 9.36198 1.02414 8.6603 1.72581Z" }) })),
|
|
124
|
+
ldmLabel: (_jsxs("g", { transform: "translate(2.1, 2.1)", children: [
|
|
125
|
+
_jsx("path", { d: "M8.07329 8.09529C8.26848 7.90013 8.58466 7.90026 8.77993 8.09529C8.9535 8.26886 8.97293 8.53851 8.83794 8.73338L8.77993 8.80281L5.78022 11.8025C5.58502 11.9976 5.26882 11.9975 5.07358 11.8025C4.90001 11.629 4.88058 11.3593 5.01557 11.1644L5.07358 11.095L8.07329 8.09529Z" }), _jsx("path", { d: "M7.57319 5.59568C7.76845 5.40042 8.08545 5.40042 8.28071 5.59568C8.45395 5.76925 8.47273 6.03815 8.33784 6.23289L8.28071 6.30232L4.28081 10.3022C4.08555 10.4975 3.76855 10.4975 3.57329 10.3022C3.3998 10.1287 3.38031 9.85897 3.51528 9.66414L3.57329 9.59558L7.57319 5.59568Z" }), _jsx("path", { d: "M11.9888 2.87722C12.541 2.87736 12.9881 3.32526 12.9881 3.87742C12.9881 4.42962 12.541 4.87748 11.9888 4.87761C11.4365 4.87761 10.9886 4.4297 10.9886 3.87742C10.9887 3.32518 11.4366 2.87722 11.9888 2.87722Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.76255 0.00495774L14.7125 0.712477C14.9324 0.743938 15.1047 0.916279 15.1362 1.13611L15.8437 6.08611C15.8658 6.24181 15.8134 6.39941 15.7022 6.51062L6.50971 15.7022C6.31445 15.8975 5.99833 15.8975 5.80307 15.7022L0.146432 10.0456C-0.0488081 9.85032 -0.0488134 9.5342 0.146432 9.33894L9.33891 0.146462C9.45008 0.0353866 9.60696 -0.0171295 9.76255 0.00495774ZM1.20727 9.69226L6.15639 14.6414L14.8189 5.97976L14.1993 1.64939L9.86889 1.02976L1.20727 9.69226Z" })
|
|
126
|
+
] })),
|
|
123
127
|
horn: (_jsx("path", { d: "M19.8047 4.10156C19.8698 4.15365 19.9154 4.21875 19.9414 4.29688C19.9805 4.36198 20 4.43359 20 4.51172V15.5078C20 15.5859 19.9805 15.6641 19.9414 15.7422C19.9154 15.8073 19.8698 15.8594 19.8047 15.8984C19.7526 15.9375 19.7005 15.9635 19.6484 15.9766C19.6094 15.9896 19.5573 15.9961 19.4922 15.9961C19.4792 15.9961 19.4596 15.9961 19.4336 15.9961C19.4076 15.9961 19.3815 15.9896 19.3555 15.9766C19.3424 15.9766 19.0951 15.9115 18.6133 15.7812C18.1445 15.638 17.5195 15.4622 16.7383 15.2539C15.957 15.0326 15.0651 14.7917 14.0625 14.5312C13.0729 14.2578 12.0443 13.9844 10.9766 13.7109L10.8594 14.2578C10.7812 14.6094 10.6055 14.8958 10.332 15.1172C10.0586 15.3255 9.74609 15.4297 9.39453 15.4297C9.34245 15.4297 9.29036 15.4297 9.23828 15.4297C9.1862 15.4167 9.13411 15.4036 9.08203 15.3906L6.15234 14.7461C5.95703 14.707 5.77474 14.6289 5.60547 14.5117C5.44922 14.3945 5.31901 14.2513 5.21484 14.082C5.09766 13.9128 5.01953 13.7305 4.98047 13.5352C4.95443 13.3398 4.96094 13.1445 5 12.9492L5.13672 12.3828C4.47266 12.2526 3.86719 12.1549 3.32031 12.0898C2.78646 12.0117 2.34375 11.9727 1.99219 11.9727C1.88802 11.9727 1.80339 11.9792 1.73828 11.9922C1.67318 11.9922 1.6276 11.9922 1.60156 11.9922C1.44531 12.0182 1.28906 12.0833 1.13281 12.1875C0.976562 12.2786 0.865885 12.3503 0.800781 12.4023C0.735677 12.4544 0.651042 12.487 0.546875 12.5C0.455729 12.513 0.364583 12.5 0.273438 12.4609C0.195312 12.4089 0.130208 12.3438 0.078125 12.2656C0.0260417 12.1875 0 12.1029 0 12.0117V8.00781C0 7.90365 0.0260417 7.8125 0.078125 7.73438C0.130208 7.65625 0.195312 7.59766 0.273438 7.55859C0.364583 7.51953 0.455729 7.50651 0.546875 7.51953C0.651042 7.51953 0.735677 7.55208 0.800781 7.61719C0.865885 7.65625 0.976562 7.72786 1.13281 7.83203C1.28906 7.92318 1.44531 7.98177 1.60156 8.00781C1.6276 8.02083 1.67318 8.03385 1.73828 8.04688C1.80339 8.04688 1.88802 8.04688 1.99219 8.04688C2.86458 8.04688 4.2513 7.83854 6.15234 7.42188C8.06641 7.00521 9.99349 6.54948 11.9336 6.05469C13.8737 5.54688 15.5859 5.08464 17.0703 4.66797C18.5677 4.2513 19.3294 4.03646 19.3555 4.02344C19.4336 3.9974 19.5117 3.9974 19.5898 4.02344C19.668 4.03646 19.7396 4.0625 19.8047 4.10156ZM9.88281 14.043L10.0195 13.4766C9.34245 13.3073 8.67188 13.151 8.00781 13.0078C7.35677 12.8516 6.72526 12.7083 6.11328 12.5781L5.97656 13.1641C5.96354 13.2292 5.96354 13.2943 5.97656 13.3594C5.98958 13.4245 6.01562 13.4896 6.05469 13.5547C6.09375 13.6068 6.13932 13.6523 6.19141 13.6914C6.24349 13.7305 6.30208 13.7565 6.36719 13.7695L9.29688 14.4141C9.42708 14.4401 9.55078 14.4206 9.66797 14.3555C9.78516 14.2773 9.85677 14.1732 9.88281 14.043ZM19.0039 14.8438V5.17578C18.3008 5.37109 17.168 5.68359 15.6055 6.11328C14.056 6.54297 12.4023 6.97917 10.6445 7.42188C8.89974 7.85156 7.22005 8.22917 5.60547 8.55469C4.00391 8.88021 2.79948 9.04297 1.99219 9.04297C1.875 9.04297 1.76432 9.04297 1.66016 9.04297C1.56901 9.02995 1.48438 9.01693 1.40625 9.00391C1.32812 8.97786 1.25651 8.95833 1.19141 8.94531C1.1263 8.91927 1.0612 8.89323 0.996094 8.86719V11.1328C1.0612 11.1068 1.1263 11.0872 1.19141 11.0742C1.25651 11.0482 1.32812 11.0286 1.40625 11.0156C1.48438 11.0026 1.56901 10.9896 1.66016 10.9766C1.76432 10.9635 1.875 10.957 1.99219 10.957C2.79948 10.957 4.00391 11.1263 5.60547 11.4648C7.22005 11.7904 8.89974 12.1745 10.6445 12.6172C12.4023 13.0469 14.056 13.4766 15.6055 13.9062C17.168 14.3229 18.3008 14.6354 19.0039 14.8438Z" })),
|
|
124
128
|
cw: (_jsx("path", { d: "M2.49023 3.98926C2.89388 3.58561 3.32682 3.23079 3.78906 2.9248C4.2513 2.6123 4.73633 2.35189 5.24414 2.14355C5.75195 1.93522 6.2793 1.77572 6.82617 1.66504C7.37305 1.55436 7.92969 1.49902 8.49609 1.49902C9.06901 1.49902 9.62565 1.55436 10.166 1.66504C10.7129 1.77572 11.2402 1.93522 11.748 2.14355C12.2624 2.35189 12.7507 2.6123 13.2129 2.9248C13.6751 3.23079 14.1081 3.58561 14.5117 3.98926C14.9154 4.3929 15.2702 4.82585 15.5762 5.28809C15.8887 5.75033 16.1491 6.23861 16.3574 6.75293C16.5658 7.26074 16.7253 7.78809 16.8359 8.33496C16.9466 8.87533 17.002 9.43197 17.002 10.0049V11.2939L19.1504 9.14551C19.248 9.04785 19.3652 8.99902 19.502 8.99902C19.6387 8.99902 19.7559 9.04785 19.8535 9.14551C19.9512 9.24316 20 9.36361 20 9.50684C20 9.64355 19.9512 9.76074 19.8535 9.8584L16.8555 12.8564C16.8034 12.902 16.7448 12.9378 16.6797 12.9639C16.6211 12.9899 16.5625 13.0029 16.5039 13.0029C16.4388 13.0029 16.3737 12.9899 16.3086 12.9639C16.25 12.9378 16.1947 12.902 16.1426 12.8564L13.1445 9.8584C13.0469 9.76074 12.998 9.64355 12.998 9.50684C12.998 9.36361 13.0469 9.24316 13.1445 9.14551C13.2422 9.04785 13.3594 8.99902 13.4961 8.99902C13.6393 8.99902 13.7598 9.04785 13.8574 9.14551L15.9961 11.2939V10.0049C15.9961 8.96973 15.8008 7.99642 15.4102 7.08496C15.0195 6.1735 14.4824 5.37923 13.7988 4.70215C13.1217 4.01855 12.3275 3.48145 11.416 3.09082C10.5046 2.7002 9.53125 2.50488 8.49609 2.50488C7.46745 2.50488 6.4974 2.7002 5.58594 3.09082C4.67448 3.48145 3.87695 4.01855 3.19336 4.70215C2.51628 5.37923 1.97917 6.1735 1.58203 7.08496C1.19141 7.99642 0.996094 8.96973 0.996094 10.0049C0.996094 11.0335 1.19141 12.0036 1.58203 12.915C1.97917 13.8265 2.51628 14.624 3.19336 15.3076C3.87695 15.9847 4.67448 16.5218 5.58594 16.9189C6.4974 17.3096 7.46745 17.5049 8.49609 17.5049C8.63932 17.5049 8.75977 17.5537 8.85742 17.6514C8.95508 17.749 9.00391 17.8662 9.00391 18.0029C9.00391 18.1396 8.95508 18.2568 8.85742 18.3545C8.75977 18.4521 8.63932 18.501 8.49609 18.501C7.92969 18.501 7.37305 18.4489 6.82617 18.3447C6.2793 18.234 5.75195 18.0745 5.24414 17.8662C4.73633 17.6514 4.2513 17.391 3.78906 17.085C3.32682 16.7725 2.89388 16.4144 2.49023 16.0107C2.08659 15.6071 1.72852 15.1742 1.41602 14.7119C1.11003 14.2497 0.849609 13.7646 0.634766 13.2568C0.426432 12.749 0.266927 12.2217 0.15625 11.6748C0.0520833 11.1279 0 10.5713 0 10.0049C0 9.43197 0.0520833 8.87533 0.15625 8.33496C0.266927 7.78809 0.426432 7.26074 0.634766 6.75293C0.849609 6.23861 1.11003 5.75033 1.41602 5.28809C1.72852 4.82585 2.08659 4.3929 2.49023 3.98926Z" })),
|
|
125
129
|
ccw: (_jsx("path", { d: "M17.5098 3.98926C17.9134 4.3929 18.2682 4.82585 18.5742 5.28809C18.8867 5.75033 19.1471 6.23861 19.3555 6.75293C19.5703 7.26074 19.7298 7.78809 19.834 8.33496C19.9447 8.87533 20 9.43197 20 10.0049C20 10.5713 19.9447 11.1279 19.834 11.6748C19.7298 12.2217 19.5703 12.749 19.3555 13.2568C19.1471 13.7646 18.8867 14.2497 18.5742 14.7119C18.2682 15.1742 17.9134 15.6071 17.5098 16.0107C17.1061 16.4144 16.6732 16.7725 16.2109 17.085C15.7487 17.391 15.2637 17.6514 14.7559 17.8662C14.248 18.0745 13.7207 18.234 13.1738 18.3447C12.627 18.4489 12.0703 18.501 11.5039 18.501C11.3607 18.501 11.2402 18.4521 11.1426 18.3545C11.0449 18.2568 10.9961 18.1396 10.9961 18.0029C10.9961 17.8662 11.0449 17.749 11.1426 17.6514C11.2402 17.5537 11.3607 17.5049 11.5039 17.5049C12.5326 17.5049 13.5026 17.3096 14.4141 16.9189C15.3255 16.5218 16.1198 15.9847 16.7969 15.3076C17.4805 14.624 18.0176 13.8265 18.4082 12.915C18.8053 12.0036 19.0039 11.0335 19.0039 10.0049C19.0039 8.96973 18.8053 7.99642 18.4082 7.08496C18.0176 6.1735 17.4805 5.37923 16.7969 4.70215C16.1198 4.01855 15.3255 3.48145 14.4141 3.09082C13.5026 2.7002 12.5326 2.50488 11.5039 2.50488C10.4688 2.50488 9.49544 2.7002 8.58398 3.09082C7.67253 3.48145 6.875 4.01855 6.19141 4.70215C5.51432 5.37923 4.98047 6.1735 4.58984 7.08496C4.19922 7.99642 4.00391 8.96973 4.00391 10.0049V11.2939L6.14258 9.14551C6.24023 9.04785 6.35742 8.99902 6.49414 8.99902C6.63737 8.99902 6.75781 9.04785 6.85547 9.14551C6.95312 9.24316 7.00195 9.36361 7.00195 9.50684C7.00195 9.64355 6.95312 9.76074 6.85547 9.8584L3.85742 12.8564C3.80534 12.902 3.74674 12.9378 3.68164 12.9639C3.62305 12.9899 3.5612 13.0029 3.49609 13.0029C3.4375 13.0029 3.37565 12.9899 3.31055 12.9639C3.25195 12.9378 3.19661 12.902 3.14453 12.8564L0.146484 9.8584C0.0488281 9.76074 0 9.64355 0 9.50684C0 9.36361 0.0488281 9.24316 0.146484 9.14551C0.244141 9.04785 0.361328 8.99902 0.498047 8.99902C0.634766 8.99902 0.751953 9.04785 0.849609 9.14551L2.99805 11.2939V10.0049C2.99805 9.43197 3.05339 8.87533 3.16406 8.33496C3.27474 7.78809 3.43424 7.26074 3.64258 6.75293C3.85091 6.23861 4.10807 5.75033 4.41406 5.28809C4.72656 4.82585 5.08464 4.3929 5.48828 3.98926C5.89193 3.58561 6.32487 3.23079 6.78711 2.9248C7.24935 2.6123 7.73438 2.35189 8.24219 2.14355C8.75651 1.93522 9.28385 1.77572 9.82422 1.66504C10.3711 1.55436 10.931 1.49902 11.5039 1.49902C12.0703 1.49902 12.627 1.55436 13.1738 1.66504C13.7207 1.77572 14.248 1.93522 14.7559 2.14355C15.2637 2.35189 15.7487 2.6123 16.2109 2.9248C16.6732 3.23079 17.1061 3.58561 17.5098 3.98926Z" })),
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* @internal
|
|
4
|
+
*/
|
|
5
|
+
export interface IUiSectionHeadingProps {
|
|
6
|
+
/** Section label rendered in 11px upper-case complementary-6. */
|
|
7
|
+
label: string;
|
|
8
|
+
/** Optional action rendered after the rule (e.g. a link or button). */
|
|
9
|
+
action?: ReactNode;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* "LABEL ────── action" pattern used by dialog sections (e.g. SHARED WITH +
|
|
13
|
+
* Add link). The horizontal rule fills the space between the label and the
|
|
14
|
+
* trailing action.
|
|
15
|
+
*
|
|
16
|
+
* @internal
|
|
17
|
+
*/
|
|
18
|
+
export declare function UiSectionHeading({ label, action }: IUiSectionHeadingProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { bem } from "../@utils/bem.js";
|
|
3
|
+
const { b, e } = bem("gd-ui-kit-section-heading");
|
|
4
|
+
/**
|
|
5
|
+
* "LABEL ────── action" pattern used by dialog sections (e.g. SHARED WITH +
|
|
6
|
+
* Add link). The horizontal rule fills the space between the label and the
|
|
7
|
+
* trailing action.
|
|
8
|
+
*
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
export function UiSectionHeading({ label, action }) {
|
|
12
|
+
return (_jsxs("div", { className: b(), children: [
|
|
13
|
+
_jsx("span", { className: e("label"), children: label }), _jsx("span", { className: e("rule"), role: "separator" }), action ? _jsx("span", { className: e("action"), children: action }) : null] }));
|
|
14
|
+
}
|
package/esm/index.d.ts
CHANGED
|
@@ -448,3 +448,8 @@ export type { CatalogItemPickerSelectionMode, CatalogItemPickerType, ICatalogIte
|
|
|
448
448
|
export { ParameterPicker, type IParameterPickerProps } from "./ParameterPicker/ParameterPicker.js";
|
|
449
449
|
export { ParameterControlButton, type IParameterControlButtonProps, } from "./ParameterControl/ParameterControlButton.js";
|
|
450
450
|
export { ParameterControlDropdown, type IParameterControlDropdownProps, } from "./ParameterControl/ParameterControlDropdown.js";
|
|
451
|
+
export { UiSectionHeading, type IUiSectionHeadingProps } from "./@ui/UiSectionHeading/UiSectionHeading.js";
|
|
452
|
+
export { UiDialogShell, type IUiDialogShellProps, type IUiDialogShellAccessibilityConfig, } from "./@ui/UiDialogShell/UiDialogShell.js";
|
|
453
|
+
export { UiDialogHeader, type IUiDialogHeaderProps, type DialogHeaderTitleSize, } from "./@ui/UiDialogShell/UiDialogHeader.js";
|
|
454
|
+
export { UiDialogFooter, type IUiDialogFooterProps } from "./@ui/UiDialogShell/UiDialogFooter.js";
|
|
455
|
+
export { UiConfirmDialog, type IUiConfirmDialogProps, type ConfirmDialogVariant, } from "./@ui/UiConfirmDialog/UiConfirmDialog.js";
|
package/esm/index.js
CHANGED
|
@@ -403,3 +403,8 @@ export { CatalogItemPicker } from "./CatalogItemPicker/CatalogItemPicker.js";
|
|
|
403
403
|
export { ParameterPicker } from "./ParameterPicker/ParameterPicker.js";
|
|
404
404
|
export { ParameterControlButton, } from "./ParameterControl/ParameterControlButton.js";
|
|
405
405
|
export { ParameterControlDropdown, } from "./ParameterControl/ParameterControlDropdown.js";
|
|
406
|
+
export { UiSectionHeading } from "./@ui/UiSectionHeading/UiSectionHeading.js";
|
|
407
|
+
export { UiDialogShell, } from "./@ui/UiDialogShell/UiDialogShell.js";
|
|
408
|
+
export { UiDialogHeader, } from "./@ui/UiDialogShell/UiDialogHeader.js";
|
|
409
|
+
export { UiDialogFooter } from "./@ui/UiDialogShell/UiDialogFooter.js";
|
|
410
|
+
export { UiConfirmDialog, } from "./@ui/UiConfirmDialog/UiConfirmDialog.js";
|
package/esm/locales.d.ts
CHANGED
package/esm/locales.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// (C) 2022-
|
|
1
|
+
// (C) 2022-2026 GoodData Corporation
|
|
2
2
|
import { defineMessages } from "react-intl";
|
|
3
3
|
//NOTE: Follow-up ticket for move all messages: https://gooddata.atlassian.net/browse/FET-1050
|
|
4
4
|
export const dialogHeadlineLabels = defineMessages({
|
|
@@ -42,3 +42,7 @@ export const granularPermissionMessageTooltips = defineMessages({
|
|
|
42
42
|
cannotGrantLowerForUser: { id: "shareDialog.share.granular.granularUser.tooltip.cannotGrantLower" },
|
|
43
43
|
cannotGrantLowerForGroup: { id: "shareDialog.share.granular.granularGroup.tooltip.cannotGrantLower" },
|
|
44
44
|
});
|
|
45
|
+
export const commonDialogMessages = defineMessages({
|
|
46
|
+
cancel: { id: "cancel" },
|
|
47
|
+
close: { id: "close" },
|
|
48
|
+
});
|