@dynatrace/strato-components 3.0.1 → 3.1.0

package/layouts/title-bar/TitleBar.js

@@ -45,6 +45,7 @@ var import_useSlots = require("../../core/hooks/useSlots.js");
 var import_can_receive_default_text_format = require("../../core/utils/can-receive-default-text-format.js");
 var import_Divider = require("../divider/Divider.js");
 var import_Flex = require("../flex/Flex.js");
+const COMPONENT_NAME = "TitleBar";
 const TitleBarRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
   (props, forwardedRef) => {
     const {
@@ -81,6 +82,7 @@ const TitleBarRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
         "data-testid": dataTestId,
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
+        "data-dt-component": COMPONENT_NAME,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { flexDirection: "column", gap: 8, children: [
             slots.navigation && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { width: "100%", justifyContent: "space-between", gap: 8, children: [

package/layouts/title-bar/TitleBar.sty.js

@@ -27,7 +27,7 @@ module.exports = __toCommonJS(TitleBar_css_exports);
 var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_TitleBar_css_ts_vanilla = require("./TitleBar.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var navigationWrapperCSS = "_wcwjv22-3-0-1";
-var subtitleCSS = "_wcwjv23-3-0-1 _da9a8v0-3-0-1 _da9a8v2-3-0-1 _da9a8v3-3-0-1 _da9a8vb-3-0-1";
-var suffixWrapperCSS = "_wcwjv24-3-0-1";
-var titleSubtitleWrapperCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_wcwjv20-3-0-1", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
+var navigationWrapperCSS = "_wcwjv22-3-1-0";
+var subtitleCSS = "_wcwjv23-3-1-0 _da9a8v0-3-1-0 _da9a8v2-3-1-0 _da9a8v3-3-1-0 _da9a8vb-3-1-0";
+var suffixWrapperCSS = "_wcwjv24-3-1-0";
+var titleSubtitleWrapperCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_wcwjv20-3-1-0", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-1-0" } }, defaultVariants: {}, compoundVariants: [] });

package/navigation/app-link/AppLink.js

@@ -25,6 +25,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_useAppLink = require("./hooks/useAppLink.js");
 var import_Link = require("../../typography/link/Link.js");
+const COMPONENT_NAME = "AppLink";
 const AppLink = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     appId,
@@ -54,6 +55,7 @@ const AppLink = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRe
       "data-dtrum-allow": dataDtrumAllow,
       className: consumerClassName,
       style: consumerStyle,
+      "data-dt-component": COMPONENT_NAME,
       children
     }
   );

package/navigation/breadcrumbs/Breadcrumbs.css

@@ -1,27 +1,27 @@
-._hw98ku0-3-0-1 {
+._hw98ku0-3-1-0 {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
 }
-._hw98ku1-3-0-1 {
+._hw98ku1-3-1-0 {
   display: flex;
   gap: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   white-space: nowrap;
 }
-._hw98ku2-3-0-1 {
+._hw98ku2-3-1-0 {
   overflow: hidden;
 }
-._hw98ku3-3-0-1 {
+._hw98ku3-3-1-0 {
   overflow: visible;
 }
-._hw98ku4-3-0-1 {
+._hw98ku4-3-1-0 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._hw98ku5-3-0-1 {
+._hw98ku5-3-1-0 {
   cursor: pointer;
   padding: 0;
   background: none;
@@ -32,18 +32,18 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   text-decoration: underline;
 }
-._hw98ku6-3-0-1 {
+._hw98ku6-3-1-0 {
   cursor: default;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-decoration: none;
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   pointer-events: none;
 }
-._hw98ku7-3-0-1 {
+._hw98ku7-3-1-0 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._hw98ku8-3-0-1 {
+._hw98ku8-3-1-0 {
   min-width: var(--dt-spacings-size-20, 20px);
   min-height: var(--dt-spacings-size-20, 20px);
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);

package/navigation/breadcrumbs/Breadcrumbs.js

@@ -43,6 +43,7 @@ var import_useContainerSize = require("../../core/hooks/useContainerSize.js");
 var import_useMeasureChildren = require("../../core/hooks/useMeasureChildren.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_Menu = require("../menu/Menu.js");
+const COMPONENT_NAME = "Breadcrumbs";
 const BreadcrumbsRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     children,
@@ -139,6 +140,7 @@ const BreadcrumbsRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
       className: consumerClassName,
       style: consumerStyle,
       ...remainingProps,
+      "data-dt-component": COMPONENT_NAME,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ol", { ref: rootRef, className: import_Breadcrumbs_css.breadcrumbsContainerCSS, children: [
         slots.items[0],
         overflowingBreadcrumbs.current.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Menu.Menu, { children: [

package/navigation/breadcrumbs/Breadcrumbs.sty.js

@@ -27,8 +27,8 @@ __export(Breadcrumbs_css_exports, {
 module.exports = __toCommonJS(Breadcrumbs_css_exports);
 var import_Breadcrumbs_css_ts_vanilla = require("./Breadcrumbs.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var breadcrumbsContainerCSS = "_hw98ku0-3-0-1";
-var breadcrumbsItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku5-3-0-1", variantClassNames: { disabled: { true: "_hw98ku6-3-0-1" }, isLastItem: { true: "_hw98ku7-3-0-1" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
-var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-0-1";
-var breadcrumbsListItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku1-3-0-1", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-0-1", false: "_hw98ku3-3-0-1" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
-var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-0-1";
+var breadcrumbsContainerCSS = "_hw98ku0-3-1-0";
+var breadcrumbsItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku5-3-1-0", variantClassNames: { disabled: { true: "_hw98ku6-3-1-0" }, isLastItem: { true: "_hw98ku7-3-1-0" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
+var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-1-0";
+var breadcrumbsListItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_hw98ku1-3-1-0", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-1-0", false: "_hw98ku3-3-1-0" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
+var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-1-0";

package/navigation/menu/Menu.css

@@ -1,11 +1,11 @@
-._1m01arl1-3-0-1 {
+._1m01arl1-3-1-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   padding: var(--dt-spacings-size-8, 8px);
   max-width: 500px;
 }
-._1m01arl2-3-0-1 {
+._1m01arl2-3-1-0 {
   box-sizing: border-box;
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -18,13 +18,13 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   text-align: left;
 }
-._1m01arl0-3-0-1 ._1m01arl2-3-0-1 {
+._1m01arl0-3-1-0 ._1m01arl2-3-1-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-8, 8px);
 }
-._1m01arl3-3-0-1 {
+._1m01arl3-3-1-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   padding: var(--dt-spacings-size-4, 4px);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -34,13 +34,13 @@
   overflow-y: auto;
   max-width: 100dvw;
 }
-._1m01arl3-3-0-1 ._1m01arl4-3-0-1:not(:last-child) {
+._1m01arl3-3-1-0 ._1m01arl4-3-1-0:not(:last-child) {
   width: 100%;
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-0-1 {
+._1m01arl5-3-1-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   background-color: transparent;
@@ -56,35 +56,35 @@
   border-width: 0;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1m01arl6-3-0-1 {
+._1m01arl6-3-1-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
   outline: none;
 }
-._1m01arl7-3-0-1:hover, ._1m01arl7-3-0-1[data-state="open"] {
+._1m01arl7-3-1-0:hover, ._1m01arl7-3-1-0[data-state="open"] {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1m01arl7-3-0-1:focus {
+._1m01arl7-3-1-0:focus {
   outline: none;
 }
-._1m01arl7-3-0-1:active {
+._1m01arl7-3-1-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1m01arl8-3-0-1 {
+._1m01arl8-3-1-0 {
   width: 100%;
 }
-._1m01arl5-3-0-1 > ._1m01arl8-3-0-1:first-child {
+._1m01arl5-3-1-0 > ._1m01arl8-3-1-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-0-1 > ._1m01arl8-3-0-1:last-child:not(:has(svg:last-child)) {
+._1m01arl5-3-1-0 > ._1m01arl8-3-1-0:last-child:not(:has(svg:last-child)) {
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl9-3-0-1 {
+._1m01arl9-3-1-0 {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._1m01arl9-3-0-1:first-child {
+._1m01arl9-3-1-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }

package/navigation/menu/Menu.js

@@ -25,6 +25,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_react = require("react");
 var import_react_is = require("react-is");
+var import_constants = require("./constants.js");
 var import_Content = require("./Content.js");
 var import_MenuContext = require("./contexts/MenuContext.js");
 var import_Group = require("./Group.js");
@@ -65,12 +66,13 @@ function getMenuSlots(children) {
   });
   return slots;
 }
-function registerTabHandlers(children, handleTabKeyPressed) {
+function registerTabHandlers(children, handleTabKeyPressed, dataDtComponent) {
   return import_react.Children.map(children, (child) => {
     return (0, import_react.isValidElement)(child) && child.type === import_Content.Content ? (0, import_react.cloneElement)(
       child,
       (0, import_merge_props.mergeProps)(child.props, {
-        _onTabKeyPressed: handleTabKeyPressed
+        _onTabKeyPressed: handleTabKeyPressed,
+        "data-dt-component": dataDtComponent
       }),
       child.props.children
     ) : child;
@@ -82,7 +84,9 @@ const MenuRoot = (props) => {
     onOpenChange: onChange,
     modal = true,
     defaultOpen = false,
-    children
+    children,
+    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.
+    "data-dt-component": dataDtComponent = import_constants.COMPONENT_NAME
   } = props;
   const [open, updateOpen] = (0, import_useControllableState.useControllableState)({
     defaultValue: defaultOpen,
@@ -90,7 +94,9 @@ const MenuRoot = (props) => {
     onChange
   });
   const slots = (0, import_react.useMemo)(
-    () => getMenuSlots(registerTabHandlers(children, () => updateOpen(false))),
+    () => getMenuSlots(
+      registerTabHandlers(children, () => updateOpen(false), dataDtComponent)
+    ),
     [children, updateOpen]
   );
   const onWindowBlur = () => {

package/navigation/menu/Menu.sty.js

@@ -30,11 +30,11 @@ __export(Menu_css_exports, {
 module.exports = __toCommonJS(Menu_css_exports);
 var import_Menu_css_ts_vanilla = require("./Menu.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var content = "_1m01arl3-3-0-1";
-var group = "_1m01arl4-3-0-1";
-var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m01arl5-3-0-1", variantClassNames: { disabled: { true: "_1m01arl6-3-0-1", false: "_1m01arl7-3-0-1" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
-var itemChildren = "_1m01arl8-3-0-1";
-var label = "_1m01arl2-3-0-1";
-var subChildren = "_1m01arl9-3-0-1";
-var tooltip = "_1m01arl0-3-0-1";
-var tooltipWrapper = "_1m01arl1-3-0-1";
+var content = "_1m01arl3-3-1-0";
+var group = "_1m01arl4-3-1-0";
+var item = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m01arl5-3-1-0", variantClassNames: { disabled: { true: "_1m01arl6-3-1-0", false: "_1m01arl7-3-1-0" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+var itemChildren = "_1m01arl8-3-1-0";
+var label = "_1m01arl2-3-1-0";
+var subChildren = "_1m01arl9-3-1-0";
+var tooltip = "_1m01arl0-3-1-0";
+var tooltipWrapper = "_1m01arl1-3-1-0";

package/navigation/menu/Trigger.js

@@ -26,6 +26,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_react = require("react");
 var import_react_is = require("react-is");
+var import_constants = require("./constants.js");
 var import_useMenuContext = require("./hooks/useMenuContext.js");
 var import_useIsInViewport = require("../../core/hooks/useIsInViewport.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
@@ -39,6 +40,8 @@ const Trigger = /* @__PURE__ */ (0, import_react.forwardRef)(
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
     "aria-details": ariaDetails,
+    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.
+    "data-dt-component": dataDtComponent = import_constants.COMPONENT_NAME,
     ...remainingProps
   }, forwardedRef) => {
     const [containerRef, isVisible] = (0, import_useIsInViewport.useIsInViewport)();
@@ -62,6 +65,7 @@ const Trigger = /* @__PURE__ */ (0, import_react.forwardRef)(
         "aria-details": ariaDetails,
         "data-testid": "menu-trigger",
         asChild: true,
+        "data-dt-component": dataDtComponent,
         children
       }
     );

package/navigation/menu/constants.d.ts

@@ -0,0 +1,2 @@
+/** @internal */
+export declare const COMPONENT_NAME = "Menu";

package/navigation/menu/constants.js

@@ -0,0 +1,24 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  COMPONENT_NAME: () => COMPONENT_NAME
+});
+module.exports = __toCommonJS(constants_exports);
+const COMPONENT_NAME = "Menu";

package/navigation/tabs/RenderTab.css

@@ -1,4 +1,4 @@
-._39c1kf0-3-0-1 {
+._39c1kf0-3-1-0 {
   border-radius: var(--dt-borders-radius-field-default, 6px);
   background-color: inherit;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
@@ -11,7 +11,7 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   scroll-margin: var(--dt-spacings-size-64, 64px);
 }
-._39c1kf0-3-0-1::after {
+._39c1kf0-3-1-0::after {
   content: " ";
   border-bottom-width: var(--dt-borders-width-emphasized, 2px);
   border-bottom-style: var(--dt-borders-style-default, solid);
@@ -23,46 +23,46 @@
   padding-top: var(--dt-spacings-size-4, 4px);
   z-index: 1;
 }
-._39c1kf1-3-0-1 {
+._39c1kf1-3-1-0 {
   pointer-events: none;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._39c1kf2-3-0-1 {
+._39c1kf2-3-1-0 {
   cursor: pointer;
 }
-._39c1kf2-3-0-1:hover {
+._39c1kf2-3-1-0:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._39c1kf2-3-0-1:active {
+._39c1kf2-3-1-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._39c1kf5-3-0-1 {
+._39c1kf5-3-1-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._39c1kf5-3-0-1:hover {
+._39c1kf5-3-1-0:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._39c1kf5-3-0-1:active {
+._39c1kf5-3-1-0:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._39c1kf5-3-0-1::after {
+._39c1kf5-3-1-0::after {
   border-bottom-color: var(--dt-colors-icon-primary-default, #464cce);
 }
-._39c1kf6-3-0-1 {
+._39c1kf6-3-1-0 {
   display: flex;
   flex: 1;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
 }
-._39c1kf7-3-0-1 {
+._39c1kf7-3-1-0 {
   cursor: not-allowed;
 }
-._39c1kf0-3-0-1 .text-content {
+._39c1kf0-3-1-0 .text-content {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   white-space: nowrap;
   overflow: hidden;
@@ -71,6 +71,6 @@
   justify-content: center;
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._39c1kf0-3-0-1 svg + .text-content {
+._39c1kf0-3-1-0 svg + .text-content {
   padding-left: var(--dt-spacings-size-8, 8px);
 }

package/navigation/tabs/RenderTab.sty.js

@@ -25,6 +25,6 @@ __export(RenderTab_css_exports, {
 module.exports = __toCommonJS(RenderTab_css_exports);
 var import_RenderTab_css_ts_vanilla = require("./RenderTab.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var disabledTabWrapperCSS = "_39c1kf7-3-0-1";
-var tabButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_39c1kf0-3-0-1", variantClassNames: { disabled: { true: "_39c1kf1-3-0-1", false: "_39c1kf2-3-0-1" }, selected: { true: "_39c1kf3-3-0-1", false: "_39c1kf4-3-0-1" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-0-1"]] });
-var tabContentWrapperCSS = "_39c1kf6-3-0-1";
+var disabledTabWrapperCSS = "_39c1kf7-3-1-0";
+var tabButtonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_39c1kf0-3-1-0", variantClassNames: { disabled: { true: "_39c1kf1-3-1-0", false: "_39c1kf2-3-1-0" }, selected: { true: "_39c1kf3-3-1-0", false: "_39c1kf4-3-1-0" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-1-0"]] });
+var tabContentWrapperCSS = "_39c1kf6-3-1-0";

package/navigation/tabs/TabPanel.css

@@ -1,12 +1,12 @@
-._b4irt10-3-0-1 {
+._b4irt10-3-1-0 {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding-top: var(--dt-spacings-size-16, 16px);
 }
-._b4irt11-3-0-1 {
+._b4irt11-3-1-0 {
   overflow: hidden;
 }
-._b4irt12-3-0-1 {
+._b4irt12-3-1-0 {
   overflow-y: auto;
 }

package/navigation/tabs/TabPanel.sty.js

@@ -23,5 +23,5 @@ __export(TabPanel_css_exports, {
 });
 module.exports = __toCommonJS(TabPanel_css_exports);
 var import_TabPanel_css_ts_vanilla = require("./TabPanel.css");
-var tabPanelCSS = "_b4irt10-3-0-1";
-var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-0-1", "scroll-y": "_b4irt12-3-0-1" };
+var tabPanelCSS = "_b4irt10-3-1-0";
+var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-1-0", "scroll-y": "_b4irt12-3-1-0" };

package/navigation/tabs/Tabs.css

@@ -1,9 +1,9 @@
-._1tfbrxp0-3-0-1 {
+._1tfbrxp0-3-1-0 {
   display: flex;
   flex-direction: column;
   max-width: 100%;
 }
-._1tfbrxp1-3-0-1 {
+._1tfbrxp1-3-1-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
@@ -14,29 +14,29 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._1tfbrxp1-3-0-1::-webkit-scrollbar {
+._1tfbrxp1-3-1-0::-webkit-scrollbar {
   display: none;
 }
-._1tfbrxp2-3-0-1 {
+._1tfbrxp2-3-1-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp3-3-0-1 {
+._1tfbrxp3-3-1-0 {
   -webkit-mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp4-3-0-1 {
+._1tfbrxp4-3-1-0 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp5-3-0-1 {
+._1tfbrxp5-3-1-0 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._1tfbrxp5-3-0-1:after {
+._1tfbrxp5-3-1-0:after {
   content: '';
   display: block;
   position: absolute;
@@ -47,7 +47,7 @@
   left: 0;
   right: 0;
 }
-._1tfbrxp6-3-0-1 {
+._1tfbrxp6-3-1-0 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);

package/navigation/tabs/Tabs.js

@@ -49,6 +49,7 @@ var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_useRovingFocus = require("../../core/hooks/useRovingFocus.js");
 var import_is_node_environment = require("../../core/utils/is-node-environment.js");
 var import_is_slot = require("../../core/utils/is-slot.js");
+const COMPONENT_NAME = "Tab";
 const Tabs = /* @__PURE__ */ (0, import_react.forwardRef)(
   (props, forwardedRef) => {
     const {
@@ -240,6 +241,7 @@ const Tabs = /* @__PURE__ */ (0, import_react.forwardRef)(
         className: (0, import_clsx.default)(import_Tabs_css.tabsCSS, consumerClassName),
         style: consumerStyle,
         ...remainingProps,
+        "data-dt-component": COMPONENT_NAME,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_Tabs_css.tabsArrowWrapperCSS, children: [
             isOverflowingLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/navigation/tabs/Tabs.sty.js

@@ -26,8 +26,8 @@ __export(Tabs_css_exports, {
 });
 module.exports = __toCommonJS(Tabs_css_exports);
 var import_Tabs_css_ts_vanilla = require("./Tabs.css");
-var tabsArrowButtonCSS = "_1tfbrxp6-3-0-1";
-var tabsArrowWrapperCSS = "_1tfbrxp5-3-0-1";
-var tabsCSS = "_1tfbrxp0-3-0-1";
-var tabsWrapperCSS = "_1tfbrxp1-3-0-1";
-var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-0-1", right: "_1tfbrxp3-3-0-1", both: "_1tfbrxp4-3-0-1" };
+var tabsArrowButtonCSS = "_1tfbrxp6-3-1-0";
+var tabsArrowWrapperCSS = "_1tfbrxp5-3-1-0";
+var tabsCSS = "_1tfbrxp0-3-1-0";
+var tabsWrapperCSS = "_1tfbrxp1-3-1-0";
+var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-1-0", right: "_1tfbrxp3-3-1-0", both: "_1tfbrxp4-3-1-0" };

package/notifications/index.d.ts

@@ -2,6 +2,6 @@ export { dismissAllToasts, dismissToast, showToast } from './toast/Toast.js';
 export type { ToastOptions } from './toast/Toast.js';
 export { ToastContainer } from './toast/ToastContainer.js';
 export { NotificationSettings } from './notification-settings/NotificationSettings.js';
-export type { NotificationSettingsEventNotification, NotificationSettingsResourceNotification, NotificationSettingsConfig, NotificationSettingsProps, } from './notification-settings/NotificationSettings.js';
+export type { NotificationSettingsEventNotification, NotificationSettingsResourceNotification, NotificationSettingsConfig, NotificationSettingsProps, } from './notification-settings/notification-settings-types.js';
 export { useNotificationSettingsMenuItem } from './notification-settings/hooks/useNotificationSettingsMenuItem.js';
 export type { UseNotificationSettingsMenuItemProps } from './notification-settings/hooks/useNotificationSettingsMenuItem.js';

package/notifications/notification-settings/NotificationSettings.css

@@ -1,3 +1,3 @@
-._1cohdty0-3-0-1 {
+._1cohdty0-3-1-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/notifications/notification-settings/NotificationSettings.d.ts

@@ -1,54 +1,10 @@
-import { type PropsWithChildren, type ReactNode } from 'react';
-import type { EventNotificationRequest, ResourceNotificationRequest } from '@dynatrace-sdk/client-notification-v2';
-import type { AriaLabelingProps } from '../../core/types/a11y-props.js';
-import type { DataTestId } from '../../core/types/data-props.js';
-import type { DOMProps } from '../../core/types/dom.js';
-import type { MaskingProps } from '../../core/types/masking-props.js';
-import type { StylingProps } from '../../core/types/styling-props.js';
-/** @public */
-export interface NotificationSettingsResourceNotification {
-    /**
-     * Defines the type of the notifcation that should be subscribed to.
-     */
-    type: 'resource';
-    /**
-     * Configuration for a resource notification. Uses the `@dynatrace-sdk/client-notification-v2`.
-     */
-    config: ResourceNotificationRequest;
-}
-/** @public */
-export interface NotificationSettingsEventNotification {
-    /**
-     * Defines the type of the notifcation that should be subscribed to.
-     */
-    type: 'event';
-    /**
-     * Configuration for a event notification. Uses the `@dynatrace-sdk/client-notification-v2`.
-     */
-    config: EventNotificationRequest;
-}
-/** @public */
-export type NotificationSettingsConfig = NotificationSettingsEventNotification | NotificationSettingsResourceNotification;
-/**
- * @public
- */
-export type NotificationSettingsProps = StylingProps & DataTestId & MaskingProps & DOMProps & AriaLabelingProps & NotificationSettingsConfig & {
-    /**
-     * Either a ReactNode or a render function that gets passed certain values
-     * from the currently configured notification */
-    children?: (({ disabled, headingText, infoText, hasReadPermission, hasWritePermission, }: {
-        disabled: boolean;
-        headingText: string;
-        infoText: string;
-        hasReadPermission: boolean;
-        hasWritePermission: boolean;
-    }) => ReactNode) | ReactNode;
-};
+import { type PropsWithChildren } from 'react';
+import type { NotificationSettingsProps } from './notification-settings-types.js';
 /**
  * Switch function to determine which notification client should be used.
  * @internal
  */
-export declare function NotificationProvider(props: PropsWithChildren<Pick<NotificationSettingsProps, 'type' | 'config'>>): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime.js").JSX.Element | null | undefined;
+export declare function NotificationProvider(props: PropsWithChildren<Pick<NotificationSettingsProps, 'type' | 'config'>>): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime.js").JSX.Element | null | undefined;
 /**
  * NotificationSettings component
  * @public