@gooddata/sdk-ui-kit 11.39.0-alpha.3 → 11.39.0

package/esm/@ui/UiRadioRow/UiRadioRow.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+/**
+ * @internal
+ */
+export interface IUiRadioRowProps {
+    /** Whether this row's radio is selected. */
+    checked: boolean;
+    /** Fires when the user picks this row. */
+    onChange?: () => void;
+    /**
+     * `name` attribute shared by a group of mutually exclusive
+     * radio rows.
+     */
+    name?: string;
+    /** Value sent on the change — typically the row's option identifier. */
+    value?: string;
+    /** Primary label, bold complementary-8. */
+    title: string;
+    /** Optional descriptive subline, regular complementary-6. */
+    description?: string;
+    /** Optional trailing content rendered after the text (e.g. row controls). */
+    trailing?: ReactNode;
+    disabled?: boolean;
+    /** Test id forwarded to the root element. */
+    dataTestId?: string;
+}
+/**
+ * Selectable row composed of a radio + title + optional description + optional
+ * trailing slot. Mirror of `UiLabelChecklistRow` for the radio case.
+ *
+ * @internal
+ */
+export declare function UiRadioRow({ checked, onChange, name, value, title, description, trailing, disabled, dataTestId }: IUiRadioRowProps): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiRadioRow/UiRadioRow.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useId } from "react";
+import { bem } from "../@utils/bem.js";
+import { UiRadio } from "../UiRadio/UiRadio.js";
+const { b, e } = bem("gd-ui-kit-radio-row");
+/**
+ * Selectable row composed of a radio + title + optional description + optional
+ * trailing slot. Mirror of `UiLabelChecklistRow` for the radio case.
+ *
+ * @internal
+ */
+export function UiRadioRow({ checked, onChange, name, value, title, description, trailing, disabled, dataTestId, }) {
+    const inputId = useId();
+    const descriptionId = useId();
+    return (_jsxs("div", { className: b({ disabled: disabled ?? false }), "data-testid": dataTestId, children: [
+            _jsx(UiRadio, { id: inputId, checked: checked, onChange: onChange ? () => onChange() : undefined, name: name, value: value, disabled: disabled, accessibilityConfig: description ? { ariaDescribedBy: descriptionId } : undefined }), _jsxs("span", { className: e("text"), children: [
+                    _jsx("label", { className: e("title"), htmlFor: inputId, children: title }), description ? (_jsx("span", { id: descriptionId, className: e("description"), children: description })) : null] }), trailing ? _jsx("span", { className: e("trailing"), children: trailing }) : null] }));
+}

package/esm/@ui/UiTextInput/UiTextInput.d.ts

@@ -0,0 +1,55 @@
+import { type IAccessibilityConfigBase } from "../../typings/accessibility.js";
+import { type IconType } from "../@types/icon.js";
+/**
+ * Clickable trailing icon button (e.g. a clear button). Bundles its own
+ * accessible name so the button can never be rendered unnamed.
+ *
+ * @internal
+ */
+export interface IUiTextInputIconAfterButton {
+    /** Icon rendered inside the button. */
+    icon: IconType;
+    /** Fires on click. */
+    onClick: () => void;
+    /** Accessible name for the icon-only button. */
+    ariaLabel: string;
+}
+/**
+ * @internal
+ */
+export interface IUiTextInputProps {
+    /** HTML input `type`. Defaults to `"text"`. */
+    type?: "text" | "search" | "email" | "url";
+    /** Current value. */
+    value: string;
+    /** Fires with the next value on every change. */
+    onChange: (next: string) => void;
+    /** Optional label rendered above the input. */
+    label?: string;
+    /** Placeholder shown when the input is empty. */
+    placeholder?: string;
+    /** Optional icon rendered inside the input at the start. */
+    iconBefore?: IconType;
+    /** Optional static (non-interactive) icon rendered inside the input at the end. */
+    iconAfter?: IconType;
+    /**
+     * Optional interactive trailing icon button (e.g. a clear button). Takes
+     * precedence over `iconAfter`. Carries its own `ariaLabel`, so the button
+     * always has an accessible name.
+     */
+    onIconAfter?: IUiTextInputIconAfterButton;
+    /** Accessibility config forwarded to the input element. */
+    accessibilityConfig?: IAccessibilityConfigBase;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    /** Test id forwarded to the input element. */
+    dataTestId?: string;
+}
+/**
+ * Single-line text input with optional label and leading / trailing icons.
+ * The kit's canonical text-field rendering: 32px height, 1px
+ * complementary-4 border, inset shadow, primary-blue focus state.
+ *
+ * @internal
+ */
+export declare function UiTextInput({ type, value, onChange, label, placeholder, iconBefore, iconAfter, onIconAfter, accessibilityConfig, disabled, autoFocus, dataTestId }: IUiTextInputProps): import("react/jsx-runtime").JSX.Element;

package/esm/@ui/UiTextInput/UiTextInput.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useId } from "react";
+import { accessibilityConfigToAttributes } from "../../typings/utilities.js";
+import { bem } from "../@utils/bem.js";
+import { UiIcon } from "../UiIcon/UiIcon.js";
+import { UiIconButton } from "../UiIconButton/UiIconButton.js";
+const { b, e } = bem("gd-ui-kit-text-input");
+/**
+ * Single-line text input with optional label and leading / trailing icons.
+ * The kit's canonical text-field rendering: 32px height, 1px
+ * complementary-4 border, inset shadow, primary-blue focus state.
+ *
+ * @internal
+ */
+export function UiTextInput({ type = "text", value, onChange, label, placeholder, iconBefore, iconAfter, onIconAfter, accessibilityConfig, disabled = false, autoFocus = false, dataTestId, }) {
+    const id = useId();
+    const { ariaLabel, ...restA11y } = accessibilityConfig ?? {};
+    // When a visible <label> is present, the label provides the accessible name;
+    // forwarding aria-label would override it (WCAG name-in-name mismatch).
+    const inputA11y = label ? restA11y : { ...restA11y, ariaLabel };
+    return (_jsxs("div", { className: b(), children: [label ? (_jsx("label", { className: e("label"), htmlFor: id, children: label })) : null, _jsxs("div", { className: e("field", { disabled }), children: [iconBefore ? (_jsx("span", { className: e("icon-before"), children: _jsx(UiIcon, { type: iconBefore, size: 14, color: "complementary-6" }) })) : null, _jsx("input", { id: id, type: type, className: e("input"), value: value, placeholder: placeholder, disabled: disabled, autoFocus: autoFocus, "data-testid": dataTestId, onChange: (event) => onChange(event.target.value), ...accessibilityConfigToAttributes(inputA11y) }), onIconAfter ? (_jsx("span", { className: e("icon-after"), children: _jsx(UiIconButton, { icon: onIconAfter.icon, size: "xsmall", variant: "tertiary", onClick: onIconAfter.onClick, isDisabled: disabled, label: onIconAfter.ariaLabel, iconColor: "complementary-6" }) })) : iconAfter ? (_jsx("span", { className: e("icon-after"), children: _jsx(UiIcon, { type: iconAfter, size: 14, color: "complementary-6" }) })) : null] })
+        ] }));
+}

package/esm/index.d.ts

@@ -453,3 +453,12 @@ export { UiDialogShell, type IUiDialogShellProps, type IUiDialogShellAccessibili
 export { UiDialogHeader, type IUiDialogHeaderProps, type DialogHeaderTitleSize, } from "./@ui/UiDialogShell/UiDialogHeader.js";
 export { UiDialogFooter, type IUiDialogFooterProps } from "./@ui/UiDialogShell/UiDialogFooter.js";
 export { UiConfirmDialog, type IUiConfirmDialogProps, type ConfirmDialogVariant, } from "./@ui/UiConfirmDialog/UiConfirmDialog.js";
+export { UiTextInput, type IUiTextInputProps, type IUiTextInputIconAfterButton, } from "./@ui/UiTextInput/UiTextInput.js";
+export { UiRadio, type IUiRadioProps } from "./@ui/UiRadio/UiRadio.js";
+export { UiRadioRow, type IUiRadioRowProps } from "./@ui/UiRadioRow/UiRadioRow.js";
+export { UiAvatar, type IUiAvatarProps } from "./@ui/UiAvatar/UiAvatar.js";
+export { UiGranteeAvatar, type IUiGranteeAvatarProps, type GranteeAvatarKind, } from "./@ui/UiGranteeAvatar/UiGranteeAvatar.js";
+export { UiGranteeRow, type IUiGranteeRowProps } from "./@ui/UiGranteeRow/UiGranteeRow.js";
+export { UiObjectShareDialog, type IUiObjectShareDialogProps, type IUiObjectShareDialogGrantee, } from "./@ui/UiObjectShareDialog/UiObjectShareDialog.js";
+export { UiAddGranteeDialog, type IUiAddGranteeDialogProps, } from "./@ui/UiAddGranteeDialog/UiAddGranteeDialog.js";
+export { UiGeneralAccessRadio, type IUiGeneralAccessRadioProps, type GeneralAccessValue, } from "./@ui/UiGeneralAccessRadio/UiGeneralAccessRadio.js";

package/esm/index.js

@@ -408,3 +408,12 @@ export { UiDialogShell, } from "./@ui/UiDialogShell/UiDialogShell.js";
 export { UiDialogHeader, } from "./@ui/UiDialogShell/UiDialogHeader.js";
 export { UiDialogFooter } from "./@ui/UiDialogShell/UiDialogFooter.js";
 export { UiConfirmDialog, } from "./@ui/UiConfirmDialog/UiConfirmDialog.js";
+export { UiTextInput, } from "./@ui/UiTextInput/UiTextInput.js";
+export { UiRadio } from "./@ui/UiRadio/UiRadio.js";
+export { UiRadioRow } from "./@ui/UiRadioRow/UiRadioRow.js";
+export { UiAvatar } from "./@ui/UiAvatar/UiAvatar.js";
+export { UiGranteeAvatar, } from "./@ui/UiGranteeAvatar/UiGranteeAvatar.js";
+export { UiGranteeRow } from "./@ui/UiGranteeRow/UiGranteeRow.js";
+export { UiObjectShareDialog, } from "./@ui/UiObjectShareDialog/UiObjectShareDialog.js";
+export { UiAddGranteeDialog, } from "./@ui/UiAddGranteeDialog/UiAddGranteeDialog.js";
+export { UiGeneralAccessRadio, } from "./@ui/UiGeneralAccessRadio/UiGeneralAccessRadio.js";

package/esm/locales.d.ts

@@ -87,3 +87,64 @@ export declare const commonDialogMessages: {
         id: string;
     };
 };
+export declare const olpGranteeAvatarMessages: {
+    user: {
+        id: string;
+    };
+    group: {
+        id: string;
+    };
+};
+export declare const olpGranteeRowMessages: {
+    ownerTag: {
+        id: string;
+    };
+};
+export declare const olpObjectShareDialogMessages: {
+    title: {
+        id: string;
+    };
+    sharedWith: {
+        id: string;
+    };
+    add: {
+        id: string;
+    };
+    generalAccess: {
+        id: string;
+    };
+};
+export declare const olpAddGranteeDialogMessages: {
+    back: {
+        id: string;
+    };
+    userOrGroup: {
+        id: string;
+    };
+    searchPlaceholder: {
+        id: string;
+    };
+    emptyState: {
+        id: string;
+    };
+    add: {
+        id: string;
+    };
+};
+export declare const olpGeneralAccessMessages: {
+    groupLabel: {
+        id: string;
+    };
+    restrictedTitle: {
+        id: string;
+    };
+    restrictedDescription: {
+        id: string;
+    };
+    workspaceTitle: {
+        id: string;
+    };
+    workspaceDescription: {
+        id: string;
+    };
+};

package/esm/locales.js

@@ -46,3 +46,30 @@ export const commonDialogMessages = defineMessages({
     cancel: { id: "cancel" },
     close: { id: "close" },
 });
+export const olpGranteeAvatarMessages = defineMessages({
+    user: { id: "shareDialog.olp.granteeAvatar.user" },
+    group: { id: "shareDialog.olp.granteeAvatar.group" },
+});
+export const olpGranteeRowMessages = defineMessages({
+    ownerTag: { id: "shareDialog.olp.granteeRow.ownerTag" },
+});
+export const olpObjectShareDialogMessages = defineMessages({
+    title: { id: "shareDialog.olp.objectShareDialog.title" },
+    sharedWith: { id: "shareDialog.olp.objectShareDialog.sharedWith" },
+    add: { id: "shareDialog.olp.objectShareDialog.add" },
+    generalAccess: { id: "shareDialog.olp.objectShareDialog.generalAccess" },
+});
+export const olpAddGranteeDialogMessages = defineMessages({
+    back: { id: "shareDialog.olp.addGranteeDialog.back" },
+    userOrGroup: { id: "shareDialog.olp.addGranteeDialog.userOrGroup" },
+    searchPlaceholder: { id: "shareDialog.olp.addGranteeDialog.searchPlaceholder" },
+    emptyState: { id: "shareDialog.olp.addGranteeDialog.emptyState" },
+    add: { id: "shareDialog.olp.addGranteeDialog.add" },
+});
+export const olpGeneralAccessMessages = defineMessages({
+    groupLabel: { id: "shareDialog.olp.generalAccess.groupLabel" },
+    restrictedTitle: { id: "shareDialog.olp.generalAccess.restricted.title" },
+    restrictedDescription: { id: "shareDialog.olp.generalAccess.restricted.description" },
+    workspaceTitle: { id: "shareDialog.olp.generalAccess.workspace.title" },
+    workspaceDescription: { id: "shareDialog.olp.generalAccess.workspace.description" },
+});