@gooddata/sdk-ui-kit 10.27.0-alpha.8 → 10.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "10.27.0-alpha.8",
+  "version": "10.27.0",
   "description": "GoodData SDK - UI Building Components",
   "repository": {
     "type": "git",
@@ -41,7 +41,6 @@
     "@gooddata/number-formatter": "^1.0.6",
     "@tanstack/react-virtual": "^3.11.1",
     "classnames": "^2.3.1",
-    "codemirror": "^5.54.0",
     "copy-to-clipboard": "^3.3.1",
     "cron-parser": "^5.1.1",
     "date-fns": "^2.22.1",
@@ -70,25 +69,29 @@
     "tslib": "^2.5.0",
     "uuid": "^8.3.2",
     "unified": "^11.0.5",
-    "@gooddata/sdk-backend-spi": "10.27.0-alpha.8",
-    "@gooddata/sdk-ui": "10.27.0-alpha.8",
-    "@gooddata/sdk-model": "10.27.0-alpha.8",
-    "@gooddata/sdk-ui-theme-provider": "10.27.0-alpha.8",
-    "@gooddata/util": "10.27.0-alpha.8"
+    "@codemirror/language": "~6.11.0",
+    "@codemirror/state": "~6.5.2",
+    "@codemirror/view": "~6.36.4",
+    "@lezer/highlight": "~1.2.1",
+    "@codemirror/commands": "~6.8.1",
+    "@gooddata/sdk-backend-spi": "10.27.0",
+    "@gooddata/sdk-model": "10.27.0",
+    "@gooddata/sdk-ui": "10.27.0",
+    "@gooddata/util": "10.27.0",
+    "@gooddata/sdk-ui-theme-provider": "10.27.0"
   },
   "peerDependencies": {
     "react": "^16.10.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.10.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@gooddata/eslint-config": "^4.1.0",
+    "@gooddata/eslint-config": "^4.1.1",
     "@gooddata/stylelint-config": "^5.0.0",
     "@microsoft/api-documenter": "^7.17.0",
     "@microsoft/api-extractor": "^7.36.0",
     "@testing-library/dom": "~9.2.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.2",
-    "@types/codemirror": "^5.60.7",
     "@types/debounce-promise": "^3.1.4",
     "@types/kefir": "^3.8.5",
     "@types/lodash": "^4.14.202",
@@ -133,8 +136,8 @@
     "typescript": "5.3.3",
     "vitest": "3.0.8",
     "vitest-dom": "0.1.1",
-    "@gooddata/sdk-backend-mockingbird": "10.27.0-alpha.8",
-    "@gooddata/reference-workspace": "10.27.0-alpha.8"
+    "@gooddata/reference-workspace": "10.27.0",
+    "@gooddata/sdk-backend-mockingbird": "10.27.0"
   },
   "scripts": {
     "clean": "rm -rf ci dist esm coverage styles/css *.log tsconfig.tsbuildinfo",
@@ -158,6 +161,6 @@
     "validate-locales": "cd ../sdk-ui && npm run validate-locales",
     "validate-locales-ci": "cd ../sdk-ui && npm run validate-locales-ci",
     "validate-theming": "npm run scss && node scripts/validateCss.js",
-    "scss": "sass --load-path=node_modules --load-path=node_modules/fixed-data-table-2/dist --load-path=node_modules/codemirror/lib styles/scss:styles/css"
+    "scss": "sass --load-path=node_modules --load-path=node_modules/fixed-data-table-2/dist styles/scss:styles/css"
   }
 }

package/src/@ui/UiChip/UiChip.scss

@@ -26,6 +26,7 @@ $action-box-shadow: var(--gd-button-dropShadow, 0 -1px 0 0) var(--gd-palette-err
 
     border-radius: $border-radius;
     border: 1px solid $border-color;
+    background-color: $background-color;
 
     &:has(#{$root}__trigger:hover) {
         border-color: $border-color;

package/src/@ui/UiListbox/UiListbox.scss

@@ -1,6 +1,7 @@
 // (C) 2025 GoodData Corporation
 
 @use "../../../styles/scss/variables";
+@use "../../../styles/scss/mixins";
 
 .gd-ui-kit-listbox {
     $root: &;
@@ -26,10 +27,7 @@
         outline: none;
 
         &:focus-visible #{$root}__item--isFocused {
-            outline-offset: -2px;
-            outline: auto 5px Highlight; /* For Firefox */
-            // stylelint-disable-next-line declaration-block-no-duplicate-properties
-            outline: auto 5px -webkit-focus-ring-color; /* For Chrome */
+            @include mixins.focus-ring;
         }
     }
 

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

@@ -0,0 +1,122 @@
+// (C) 2025 GoodData Corporation
+
+@use "../../../styles/scss/variables";
+@use "../../../styles/scss/mixins";
+
+.gd-ui-kit-menu {
+    $root: &;
+
+    max-height: 300px;
+    width: 100%;
+    min-width: 200px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    user-select: none;
+
+    &__items-container {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    @media #{variables.$small-only} {
+        // !important to override inline style from maxWidth prop
+        /* stylelint-disable-next-line declaration-no-important */
+        max-width: 100vw !important;
+        max-height: 100vh;
+        width: 100vw;
+    }
+
+    &__menu-header {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        width: 100%;
+        background: variables.$default-is-focused-background;
+        border-bottom: 1px solid variables.$gd-border-color;
+
+        &-title {
+            line-height: 2rem;
+            cursor: pointer;
+            display: flex;
+            gap: 0.5rem;
+            align-items: center;
+            flex-grow: 1;
+            background: none;
+            border: none;
+            font-size: 11px;
+            color: variables.$gd-color-state-blank;
+            overflow: hidden;
+
+            &-text {
+                margin: 0;
+                white-space: nowrap;
+                font-weight: bold;
+                text-transform: uppercase;
+                overflow: hidden;
+            }
+        }
+        &-close-icon {
+            flex-shrink: 0;
+        }
+    }
+
+    &__group {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    &__group-title-container {
+        padding: 4px 10px;
+    }
+
+    &__group-title {
+        text-transform: uppercase;
+        color: variables.$gd-color-text-dimmed;
+        font-size: 10px;
+        font-weight: normal;
+        margin: 0;
+    }
+
+    &__items {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        outline: none;
+
+        // Focus ring when not controlling by mouse
+        #{$root}:not(#{$root}--controlType-mouse) &:focus-visible #{$root}__item-wrapper--isFocused {
+            @include mixins.focus-ring;
+        }
+    }
+
+    &__item {
+        padding: 8px 10px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        line-height: 20px;
+        color: variables.$gd-color-text;
+        transition: background-color 0.2s;
+
+        // Controlled by mouse and has hover
+        #{$root}--controlType-mouse &:hover:not(&--isDisabled) {
+            background-color: variables.$is-focused-background;
+            color: variables.$is-focused-color;
+        }
+
+        &--isDisabled {
+            color: variables.$gd-color-disabled;
+            cursor: not-allowed;
+        }
+    }
+
+    &__item-title {
+        width: 100%;
+        white-space: nowrap;
+    }
+}

package/src/@ui/index.scss

@@ -7,3 +7,4 @@
 @use "./UiPagedVirtualList/UiPagedVirtualList.scss";
 @use "./UiChip/UiChip.scss";
 @use "./UiListbox/UiListbox.scss";
+@use "./UiMenu/UiMenu.scss";

package/styles/css/list.css

@@ -1166,7 +1166,7 @@
 
 button.gd-list-item {
   width: 100%;
-  border: none;
+  border-color: transparent;
   background: none;
   text-align: left;
 }