@gooddata/sdk-ui-kit 10.40.0-alpha.7 → 10.40.0-alpha.8

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.d.ts

@@ -28,5 +28,5 @@ export interface ISyntaxHighlightingInputProps {
 /**
  * @internal
  */
-export declare const SyntaxHighlightingInput: React.FC<ISyntaxHighlightingInputProps>;
+export declare function SyntaxHighlightingInput(props: ISyntaxHighlightingInputProps): React.JSX.Element;
 //# sourceMappingURL=SyntaxHighlightingInput.d.ts.map

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SyntaxHighlightingInput.d.ts","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAK9C;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAChE,cAAc,CAAC,EAAE;QACb,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAmC3E,CAAC"}
+{"version":3,"file":"SyntaxHighlightingInput.d.ts","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAK9C;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACxD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACvD,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;IAChE,cAAc,CAAC,EAAE;QACb,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,WAAW,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,6BAA6B,qBAmC3E"}

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js

@@ -5,7 +5,7 @@ import { useCodemirror } from "./hooks/useCodemirror.js";
 /**
  * @internal
  */
-export const SyntaxHighlightingInput = (props) => {
+export function SyntaxHighlightingInput(props) {
     const { value, label, placeholder, autocompletion, onApi, onChange, onCursor, onKeyDown, onCompletion, onFocus, onBlur, className, extensions = [], disabled, } = props;
     const { editorRef } = useCodemirror({
         placeholderText: placeholder,
@@ -23,5 +23,5 @@ export const SyntaxHighlightingInput = (props) => {
         onBlur,
     });
     return React.createElement("div", { className: cx(className, "gd-input-syntax-highlighting-input"), ref: editorRef });
-};
+}
 //# sourceMappingURL=SyntaxHighlightingInput.js.map

package/esm/syntaxHighlightingInput/SyntaxHighlightingInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SyntaxHighlightingInput.js","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AA0BzD;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAA4C,CAAC,KAAK,EAAE,EAAE;IACtF,MAAM,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,cAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,UAAU,GAAG,EAAE,EACf,QAAQ,GACX,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC;QAChC,eAAe,EAAE,WAAW;QAC5B,cAAc;QACd,KAAK;QACL,UAAU;QACV,QAAQ;QACR,KAAK;QACL,QAAQ;QACR,KAAK;QACL,QAAQ;QACR,SAAS;QACT,YAAY;QACZ,OAAO;QACP,MAAM;KACT,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,oCAAoC,CAAC,EAAE,GAAG,EAAE,SAAS,GAAI,CAAC;AACnG,CAAC,CAAC"}
+{"version":3,"file":"SyntaxHighlightingInput.js","sourceRoot":"","sources":["../../src/syntaxHighlightingInput/SyntaxHighlightingInput.tsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AA0BzD;;GAEG;AACH,MAAM,UAAU,uBAAuB,CAAC,KAAoC;IACxE,MAAM,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,cAAc,EACd,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,EACT,UAAU,GAAG,EAAE,EACf,QAAQ,GACX,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC;QAChC,eAAe,EAAE,WAAW;QAC5B,cAAc;QACd,KAAK;QACL,UAAU;QACV,QAAQ;QACR,KAAK;QACL,QAAQ;QACR,KAAK;QACL,QAAQ;QACR,SAAS;QACT,YAAY;QACZ,OAAO;QACP,MAAM;KACT,CAAC,CAAC;IAEH,OAAO,6BAAK,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,oCAAoC,CAAC,EAAE,GAAG,EAAE,SAAS,GAAI,CAAC;AACnG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "10.40.0-alpha.7",
+  "version": "10.40.0-alpha.8",
   "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.40.0-alpha.7",
-    "@gooddata/sdk-model": "10.40.0-alpha.7",
-    "@gooddata/sdk-ui": "10.40.0-alpha.7",
-    "@gooddata/util": "10.40.0-alpha.7",
-    "@gooddata/sdk-ui-theme-provider": "10.40.0-alpha.7"
+    "@gooddata/sdk-backend-spi": "10.40.0-alpha.8",
+    "@gooddata/sdk-ui": "10.40.0-alpha.8",
+    "@gooddata/sdk-model": "10.40.0-alpha.8",
+    "@gooddata/sdk-ui-theme-provider": "10.40.0-alpha.8",
+    "@gooddata/util": "10.40.0-alpha.8"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
@@ -134,8 +134,8 @@
     "typescript": "5.8.3",
     "vitest": "3.2.4",
     "vitest-dom": "0.1.1",
-    "@gooddata/reference-workspace": "10.40.0-alpha.7",
-    "@gooddata/sdk-backend-mockingbird": "10.40.0-alpha.7"
+    "@gooddata/reference-workspace": "10.40.0-alpha.8",
+    "@gooddata/sdk-backend-mockingbird": "10.40.0-alpha.8"
   },
   "scripts": {
     "clean": "../../common/scripts/clean-command-state.sh && rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",

package/src/@ui/UiPopover/UiPopover.scss

@@ -0,0 +1,78 @@
+// (C) 2025 GoodData Corporation
+
+@use "../../../styles/scss/variables";
+
+$popover_min_width: 220px;
+$popover_padding: -7px -10px;
+$popover_border_radius: 3px;
+$popover_header_padding: 10px;
+$popover_content_padding: 10px;
+$popover_content_gap: 20px;
+$popover_footer_padding: 10px;
+$popover_footer_gap: 10px;
+
+.gd-ui-kit-popover {
+    $root: &;
+
+    background: variables.$gd-color-white;
+    color: variables.$gd-medium-gray;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    margin: $popover_padding;
+    width: $popover_min_width;
+    border-radius: $popover_border_radius;
+    border: 1px solid variables.$gd-border-color;
+    box-shadow:
+        0 1px 3px 0 var(--gd-shadow-color-from-theme, rgba(20, 56, 93, 0.1)),
+        0 2px 9px 0 var(--gd-shadow-color, rgba(20, 56, 93, 0.15));
+
+    &__header {
+        display: flex;
+        align-self: stretch;
+        align-items: center;
+        justify-content: space-between;
+        padding: $popover_header_padding;
+        background: variables.$is-focused-background;
+
+        #{$root}__header-title {
+            color: variables.$gd-color-state-blank;
+            font-size: 11px;
+            font-style: normal;
+            font-weight: 700;
+            line-height: normal;
+            text-transform: uppercase;
+        }
+
+        #{$root}__header-close {
+            margin: -$popover_header_padding;
+        }
+    }
+
+    &__content {
+        display: flex;
+        padding: $popover_content_padding;
+        gap: $popover_content_gap;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    &__footer {
+        display: flex;
+        padding: $popover_footer_padding;
+        gap: $popover_footer_gap;
+        justify-content: flex-end;
+        align-items: center;
+        align-self: stretch;
+        border-top: 1px solid variables.$gd-border-color;
+
+        &:empty {
+            display: none;
+        }
+    }
+}

package/src/@ui/UiTag/UiTag.scss

@@ -0,0 +1,158 @@
+// (C) 2025 GoodData Corporation
+
+@use "../../../styles/scss/variables";
+
+$tag_font_size: 12px;
+$tag_border_width: 1px;
+
+$tag_small_border_radius: 30px;
+$tag_small_height: 18px;
+$tag_small_padding_x: 7px;
+$tag_small_padding_y: 0;
+$tag_small_gap: 3px;
+
+$tag_large_border_radius: 20px;
+$tag_large_height: 25px;
+$tag_large_padding_x: 7px;
+$tag_large_padding_y: 6px;
+$tag_large_gap: 5px;
+
+.gd-ui-kit-tag {
+    $root: &;
+    font-family: variables.$gd-font-primary;
+
+    padding: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-style: normal;
+    font-weight: 400;
+    color: variables.$gd-medium-gray;
+    font-size: $tag_font_size;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    .gd-ui-kit-tooltip__anchor {
+        display: inline-flex;
+        overflow: hidden;
+    }
+
+    &--size-small {
+        border-radius: $tag_small_border_radius;
+        height: $tag_small_height;
+        line-height: $tag_small_height;
+
+        #{$root}__trigger,
+        #{$root}__delete {
+            border-radius: $tag_small_border_radius;
+        }
+
+        #{$root}__trigger {
+            padding: $tag_small_padding_y $tag_small_padding_x;
+
+            &--isDeletable:not(&--isDisabled) {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                padding-right: calc($tag_small_gap / 2);
+            }
+        }
+        #{$root}__delete {
+            padding-right: $tag_small_padding_x;
+            padding-left: calc($tag_small_gap / 2);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    &--size-large {
+        border-radius: $tag_large_border_radius;
+        height: $tag_large_height;
+        line-height: $tag_large_height;
+
+        #{$root}__trigger,
+        #{$root}__delete {
+            border-radius: $tag_large_border_radius;
+        }
+
+        #{$root}__trigger {
+            padding: $tag_large_padding_y $tag_large_padding_x;
+
+            &--isDeletable:not(&--isDisabled) {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                padding-right: calc($tag_large_gap / 2);
+            }
+        }
+
+        #{$root}__delete {
+            padding-right: $tag_large_padding_x;
+            padding-left: calc($tag_large_gap / 2);
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+    }
+
+    &--variant-solid {
+        border: $tag_border_width solid variables.$is-focused-background;
+        background: variables.$is-focused-background;
+    }
+
+    &--variant-outlined {
+        border: $tag_border_width solid variables.$is-focused-background;
+        background: variables.$gd-color-white;
+    }
+
+    &--variant-decorated {
+        border: $tag_border_width solid transparent;
+        background: linear-gradient(270deg, #2637ef 0.35%, #8104ca 80.03%);
+
+        #{$root}__trigger,
+        #{$root}__delete {
+            color: variables.$gd-color-white;
+        }
+    }
+
+    &__trigger,
+    &__delete {
+        font-family: inherit;
+        transition: var(--gd-transition-all);
+        color: variables.$gd-medium-gray;
+        background-color: transparent;
+        white-space: nowrap;
+        display: inline-flex;
+        justify-content: flex-start;
+        align-items: center;
+        cursor: pointer;
+        height: 100%;
+        min-width: 0;
+        flex-shrink: 1;
+        gap: 0;
+        text-decoration: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+
+        &:disabled {
+            cursor: default;
+            color: variables.$gd-color-disabled;
+        }
+
+        #{$root}__icon-delete {
+            display: flex;
+        }
+    }
+
+    &__delete {
+        flex-shrink: 0;
+        flex-grow: 0;
+    }
+
+    &__label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.gd-ui-kit-tag__tooltip {
+    max-width: 300px;
+}

package/src/@ui/UiTags/UiTags.scss

@@ -0,0 +1,153 @@
+// (C) 2025 GoodData Corporation
+
+@use "../../../styles/scss/variables";
+
+$tags_line_height: 20px;
+$tags_tooltip_max_width: 280px;
+
+@mixin tag($margin-right: 5px) {
+    .gd-ui-kit-tags__tag {
+        display: inline-flex;
+
+        .gd-ui-kit-tag {
+            margin-right: $margin-right;
+        }
+
+        &:last-child {
+            .gd-ui-kit-tag {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+@mixin tagFocused() {
+    .gd-ui-kit-tags__tag {
+        &--isFocused .gd-ui-kit-tag {
+            outline: 2px solid variables.$gd-input-text-border-outline;
+        }
+    }
+}
+
+.gd-ui-kit-tags {
+    $root: &;
+
+    font-family: variables.$gd-font-primary;
+    display: flex;
+
+    &:focus-visible {
+        outline: none;
+
+        #{$root}__tags-container {
+            @include tagFocused();
+        }
+        #{$root}__hidden-tags {
+            &--isFocused button {
+                outline: 2px solid variables.$gd-input-text-border-outline;
+            }
+        }
+    }
+
+    #{$root}__shadow-container {
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+        pointer-events: none;
+        visibility: hidden;
+
+        @include tag();
+    }
+
+    &--mode-multi-line {
+        #{$root}__tags-container {
+            flex-wrap: wrap;
+            gap: 5px;
+
+            @include tag(0);
+        }
+    }
+
+    &--mode-single-line {
+        #{$root}__tags-container {
+            @include tag();
+        }
+    }
+
+    &--mode-single-line,
+    &--mode-multi-line {
+        #{$root}__tags-container {
+            flex-shrink: 1;
+            flex-grow: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            padding: 2px;
+
+            #{$root}__add-button {
+                display: flex;
+                align-items: center;
+                height: $tags_line_height;
+            }
+
+            #{$root}__add-button > .gd-ui-kit-tooltip__anchor {
+                display: flex;
+                align-items: center;
+
+                button {
+                    height: $tags_line_height;
+                    border-radius: 30px;
+                }
+
+                button:focus-visible {
+                    outline: 2px solid variables.$gd-input-text-border-outline;
+                }
+            }
+
+            #{$root}__hidden-tags {
+                button {
+                    display: inline-flex;
+                    color: variables.$gd-color-link;
+                    text-decoration: none;
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: 400;
+                    cursor: pointer;
+                    line-height: $tags_line_height;
+                    height: $tags_line_height;
+                    border-radius: $tags_line_height;
+                }
+            }
+
+            #{$root}__empty-state {
+                display: inline-flex;
+                color: variables.$gd-color-text-dimmed;
+                font-size: 12px;
+                font-style: italic;
+                font-weight: 400;
+                line-height: $tags_line_height;
+            }
+        }
+    }
+}
+
+.gd-ui-kit-tags__tags-more-tooltip {
+    display: flex;
+    max-width: $tags_tooltip_max_width;
+    width: $tags_tooltip_max_width;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 5px;
+
+    @include tag(0);
+
+    &:focus-visible {
+        outline: none;
+
+        @include tagFocused();
+    }
+}
+
+.gd-ui-kit-tags__add-input {
+    width: 100%;
+}

package/src/@ui/UiTooltip/UiTooltip.scss

@@ -32,5 +32,10 @@
             --bg-color: var(--gd-palette-error-base);
             --text-color: var(--gd-palette-complementary-0);
         }
+
+        &-none {
+            --bg-color: transparent;
+            --text-color: var(--gd-palette-complementary-7-from-theme);
+        }
     }
 }

package/src/@ui/index.scss

@@ -17,3 +17,6 @@
 @use "./UiBadge/UiBadge.scss";
 @use "./UiCheckbox/UiCheckbox.scss";
 @use "./UiAsyncTable/asyncTable.scss";
+@use "./UiTags/UiTags.scss";
+@use "./UiTag/UiTag.scss";
+@use "./UiPopover/UiPopover.scss";