@gooddata/sdk-ui-kit 11.11.0-alpha.4 → 11.11.0-alpha.5

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

@@ -2820,6 +2820,7 @@ export declare interface IDropdownTagsProps {
 export declare interface IEditableLabelProps {
     children?: ReactNode;
     className?: string;
+    id?: string;
     maxLength?: number;
     maxRows?: number;
     onCancel?: (value: string) => void;
@@ -7255,6 +7256,7 @@ export declare interface UiButtonProps {
     id?: string;
     size?: SizeSmall | SizeMedium | SizeLarge;
     variant?: VariantPrimary | VariantSecondary | VariantTertiary | VariantPopOut | VariantDanger | VariantTooltip | VariantLink;
+    disableIconAnimation?: boolean;
     iconBefore?: IconType;
     iconBeforeSize?: number;
     badgeAfter?: number;
@@ -7437,7 +7439,7 @@ export declare function UiFocusTrap({ root, children, focusCheckFn, }: {
 /**
  * @internal
  */
-export declare function UiIcon({ type, label, color, layout, ariaHidden, size, backgroundSize, backgroundColor, backgroundType, backgroundShape, }: UiIconProps): JSX.Element;
+export declare function UiIcon({ type, label, color, layout, disableAnimation, ariaHidden, size, backgroundSize, backgroundColor, backgroundType, backgroundShape, }: UiIconProps): JSX.Element;
 
 /**
  * @internal
@@ -7456,6 +7458,7 @@ export declare interface UiIconButtonPublicProps {
     icon: IconType;
     label?: string;
     size?: SizeXSmall | SizeSmall | SizeMedium | SizeLarge | SizeXLarge | SizeXXLarge;
+    disableAnimation?: boolean;
     variant?: VariantPrimary | VariantSecondary | VariantTertiary | VariantPopOut | VariantDanger | VariantTable | VariantBare;
     isDisabled?: boolean;
     isActive?: boolean;
@@ -7478,6 +7481,7 @@ export declare interface UiIconProps {
     label?: string;
     size?: number;
     ariaHidden?: boolean;
+    disableAnimation?: boolean;
     backgroundSize?: number;
     backgroundColor?: ThemeColor;
     backgroundType?: BackgroundType;
@@ -7665,7 +7669,7 @@ export declare interface UiPagedVirtualListSkeletonItemProps {
 /**
  * @internal
  */
-export declare function UiPopover({ accessibilityConfig, anchor, width, title, tabIndex, disabled, content, footer, closeText, closeVisible, initialFocus, returnFocusTo, triggerBy, returnFocusAfterClose, focusCheckFn, onOpen, onClose, }: UiPopoverProps): JSX.Element;
+export declare function UiPopover({ accessibilityConfig, anchor, width, title, tabIndex, disabled, content, footer, closeText, closeVisible, initialFocus, returnFocusTo, triggerBy, returnFocusAfterClose, focusCheckFn, enableFocusTrap, onOpen, onClose, }: UiPopoverProps): JSX.Element;
 
 /**
  * @internal
@@ -7694,6 +7698,11 @@ export declare interface UiPopoverProps {
      * default is check if active element is exactly focused element.
      */
     focusCheckFn?: (element: HTMLElement) => boolean;
+    /**
+     * Enable focus trap to prevent tabbing out of the popover
+     * When true, uses UiFocusManager's focus trap instead of tabOutHandler
+     */
+    enableFocusTrap?: boolean;
     onOpen?: () => void;
     onClose?: () => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gooddata/sdk-ui-kit",
-  "version": "11.11.0-alpha.4",
+  "version": "11.11.0-alpha.5",
   "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-model": "11.11.0-alpha.4",
-    "@gooddata/sdk-backend-spi": "11.11.0-alpha.4",
-    "@gooddata/sdk-ui": "11.11.0-alpha.4",
-    "@gooddata/sdk-ui-theme-provider": "11.11.0-alpha.4",
-    "@gooddata/util": "11.11.0-alpha.4"
+    "@gooddata/sdk-backend-spi": "11.11.0-alpha.5",
+    "@gooddata/sdk-model": "11.11.0-alpha.5",
+    "@gooddata/sdk-ui": "11.11.0-alpha.5",
+    "@gooddata/sdk-ui-theme-provider": "11.11.0-alpha.5",
+    "@gooddata/util": "11.11.0-alpha.5"
   },
   "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/reference-workspace": "11.11.0-alpha.4",
-    "@gooddata/sdk-backend-mockingbird": "11.11.0-alpha.4",
-    "@gooddata/eslint-config": "11.11.0-alpha.4"
+    "@gooddata/eslint-config": "11.11.0-alpha.5",
+    "@gooddata/reference-workspace": "11.11.0-alpha.5",
+    "@gooddata/sdk-backend-mockingbird": "11.11.0-alpha.5"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/@ui/UiIcon/UiIcon.scss

@@ -36,6 +36,12 @@
     path {
         transition: var(--gd-transition-all);
     }
+
+    &--disableAnimation {
+        path {
+            transition: none;
+        }
+    }
 }
 
 .gd-ui-kit-icon-background {

package/src/@ui/UiTabs/UiTabs.scss

@@ -44,11 +44,22 @@
     }
 
     &__dropdown-wrapper {
+        position: relative;
         display: flex;
         align-self: stretch;
         flex-shrink: 0;
-        border-left: 1px solid var(--gd-palette-complementary-3);
         margin-right: calc(-1 * var(--gd-spacing-5px));
+
+        &::after {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translateY(-50%);
+            width: 1px;
+            height: 20px;
+            content: "";
+            background-color: var(--gd-palette-complementary-3);
+        }
     }
 
     &__dropdown {
@@ -75,6 +86,7 @@
 
     &__dropdown .gd-ui-kit-icon-button {
         width: 45px;
+        margin-right: var(--gd-spacing-5px);
     }
 
     &__tab-wrapper {
@@ -98,6 +110,24 @@
         }
     }
 
+    &__tab-scroll-target {
+        position: absolute;
+        left: calc(-1 * var(--scroll-target-margin));
+        right: calc(-1 * var(--scroll-target-margin));
+        top: 0;
+        bottom: 0;
+        content: "";
+        pointer-events: none;
+    }
+
+    &__tab-wrapper:first-of-type #{$root}__tab-scroll-target {
+        left: 0;
+    }
+
+    &__tab-wrapper:last-of-type #{$root}__tab-scroll-target {
+        right: 0;
+    }
+
     &__item {
         appearance: none;
         background: none;
@@ -154,13 +184,12 @@
         opacity: 0;
         transition: opacity 0.2s;
         position: absolute;
-        top: 50%;
+        top: calc(50% + 1px);
         right: 0;
         transform: translateY(-50%);
 
-        & .gd-ui-kit-icon-button {
-            align-items: center;
-            justify-items: end;
+        &:hover svg {
+            fill: var(--gd-palette-primary-base);
         }
     }
 
@@ -175,6 +204,10 @@
         flex-shrink: 0;
         opacity: 0;
         transition: opacity 0.2s;
+
+        &:hover svg {
+            fill: var(--gd-palette-primary-base);
+        }
     }
 
     &__tab-list {
@@ -226,6 +259,8 @@
 
     &--size {
         &-large {
+            --scroll-target-margin: 50px;
+
             #{$root}__tab-wrapper {
                 height: var(--gd-tabs-height-L, 56px);
                 padding: var(--gd-spacing-16px) var(--gd-spacing-20px) var(--gd-spacing-14px)
@@ -238,6 +273,8 @@
         }
 
         &-medium {
+            --scroll-target-margin: 30px;
+
             #{$root}__tab-wrapper {
                 height: var(--gd-tabs-height-M, 27px);
                 padding: var(--gd-spacing-3px) var(--gd-spacing-6px) var(--gd-spacing-3px)
@@ -250,6 +287,8 @@
         }
 
         &-small {
+            --scroll-target-margin: 10px;
+
             #{$root}__tab-wrapper {
                 height: var(--gd-tabs-height-S, 23px);
                 padding: var(--gd-spacing-3px) var(--gd-spacing-6px) var(--gd-spacing-3px)

package/styles/css/main.css

@@ -805,6 +805,9 @@
 .gd-ui-kit-icon path {
   transition: var(--gd-transition-all);
 }
+.gd-ui-kit-icon--disableAnimation path {
+  transition: none;
+}
 
 .gd-ui-kit-icon-background {
   display: flex;
@@ -1523,12 +1526,22 @@
   display: none;
 }
 .gd-ui-kit-tabs__dropdown-wrapper {
+  position: relative;
   display: flex;
   align-self: stretch;
   flex-shrink: 0;
-  border-left: 1px solid var(--gd-palette-complementary-3);
   margin-right: calc(-1 * var(--gd-spacing-5px));
 }
+.gd-ui-kit-tabs__dropdown-wrapper::after {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 20px;
+  content: "";
+  background-color: var(--gd-palette-complementary-3);
+}
 .gd-ui-kit-tabs__dropdown {
   display: flex;
   border-bottom: 1px solid transparent;
@@ -1548,6 +1561,7 @@
 }
 .gd-ui-kit-tabs__dropdown .gd-ui-kit-icon-button {
   width: 45px;
+  margin-right: var(--gd-spacing-5px);
 }
 .gd-ui-kit-tabs__tab-wrapper {
   position: relative;
@@ -1567,6 +1581,21 @@
 .gd-ui-kit-tabs__tab-wrapper--variant-placeholder.gd-ui-kit-tabs__tab-wrapper--selected {
   border-bottom: 3px solid var(--gd-palette-complementary-3);
 }
+.gd-ui-kit-tabs__tab-scroll-target {
+  position: absolute;
+  left: calc(-1 * var(--scroll-target-margin));
+  right: calc(-1 * var(--scroll-target-margin));
+  top: 0;
+  bottom: 0;
+  content: "";
+  pointer-events: none;
+}
+.gd-ui-kit-tabs__tab-wrapper:first-of-type .gd-ui-kit-tabs__tab-scroll-target {
+  left: 0;
+}
+.gd-ui-kit-tabs__tab-wrapper:last-of-type .gd-ui-kit-tabs__tab-scroll-target {
+  right: 0;
+}
 .gd-ui-kit-tabs__item {
   appearance: none;
   background: none;
@@ -1608,13 +1637,12 @@
   opacity: 0;
   transition: opacity 0.2s;
   position: absolute;
-  top: 50%;
+  top: calc(50% + 1px);
   right: 0;
   transform: translateY(-50%);
 }
-.gd-ui-kit-tabs__tabs-actions .gd-ui-kit-icon-button {
-  align-items: center;
-  justify-items: end;
+.gd-ui-kit-tabs__tabs-actions:hover svg {
+  fill: var(--gd-palette-primary-base);
 }
 .gd-ui-kit-tabs__tab-list-item-value {
   padding: var(--gd-spacing-10px) var(--gd-spacing-10px);
@@ -1627,6 +1655,9 @@
   opacity: 0;
   transition: opacity 0.2s;
 }
+.gd-ui-kit-tabs__tab-list-item-actions:hover svg {
+  fill: var(--gd-palette-primary-base);
+}
 .gd-ui-kit-tabs__tab-list {
   width: 250px;
   max-height: 400px;
@@ -1664,6 +1695,9 @@
 .gd-ui-kit-tabs__container .gd-ui-kit-tabs__label--variant-placeholder.gd-ui-kit-tabs__label--selected {
   color: var(--gd-palette-complementary-6);
 }
+.gd-ui-kit-tabs--size-large {
+  --scroll-target-margin: 50px;
+}
 .gd-ui-kit-tabs--size-large .gd-ui-kit-tabs__tab-wrapper {
   height: var(--gd-tabs-height-L, 56px);
   padding: var(--gd-spacing-16px) var(--gd-spacing-20px) var(--gd-spacing-14px) var(--gd-spacing-20px);
@@ -1672,6 +1706,9 @@
   font-size: 14px;
   line-height: normal;
 }
+.gd-ui-kit-tabs--size-medium {
+  --scroll-target-margin: 30px;
+}
 .gd-ui-kit-tabs--size-medium .gd-ui-kit-tabs__tab-wrapper {
   height: var(--gd-tabs-height-M, 27px);
   padding: var(--gd-spacing-3px) var(--gd-spacing-6px) var(--gd-spacing-3px) var(--gd-spacing-6px);
@@ -1680,6 +1717,9 @@
   font-size: 14px;
   line-height: 18px;
 }
+.gd-ui-kit-tabs--size-small {
+  --scroll-target-margin: 10px;
+}
 .gd-ui-kit-tabs--size-small .gd-ui-kit-tabs__tab-wrapper {
   height: var(--gd-tabs-height-S, 23px);
   padding: var(--gd-spacing-3px) var(--gd-spacing-6px) var(--gd-spacing-3px) var(--gd-spacing-6px);