@dynatrace/strato-components 3.3.0 → 3.3.1

package/esm/layouts/app-header/app-icon/AppIcon.css

@@ -1,4 +1,4 @@
-@keyframes _1dtfpz50-3-3-0 {
+@keyframes _1dtfpz50-3-3-1 {
   0% {
     opacity: 0;
   }
@@ -6,11 +6,11 @@
     opacity: 1;
   }
 }
-._1dtfpz51-3-3-0 {
+._1dtfpz51-3-3-1 {
   object-fit: contain;
 }
-._1dtfpz52-3-3-0 {
-  animation-name: _1dtfpz50-3-3-0;
+._1dtfpz52-3-3-1 {
+  animation-name: _1dtfpz50-3-3-1;
   animation-duration: var(--dt-animations-fade-in-duration-slow, 350ms);
   animation-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
 }

package/esm/layouts/app-header/app-icon/AppIcon.sty.js

@@ -1,6 +1,6 @@
 import "./AppIcon.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var icon = _7a468({ defaultClassName: "_1dtfpz51-3-3-0", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var icon = _7a468({ defaultClassName: "_1dtfpz51-3-3-1", variantClassNames: { fadeIn: { true: "_1dtfpz52-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   icon
 };

package/esm/layouts/app-header/app-icon/AppIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/app-header/app-icon/AppIcon.css.ts"],
-  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-3-0',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-3-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './AppIcon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var icon = _7a468({defaultClassName:'_1dtfpz51-3-3-1',variantClassNames:{fadeIn:{true:'_1dtfpz52-3-3-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/container/Container.css

@@ -1,8 +1,8 @@
-._f32lcd0-3-3-0 {
+._f32lcd0-3-3-1 {
   border-style: var(--dt-borders-style-default, solid);
   border-width: var(--dt-borders-width-emphasized, 2px);
   border-radius: var(--dt-borders-radius-container-default, 9px);
-  color: var(--_6levse0-3-3-0);
-  border-color: var(--_6levse2-3-3-0);
-  background-color: var(--_6levse1-3-3-0);
+  color: var(--_6levse0-3-3-1);
+  border-color: var(--_6levse2-3-3-1);
+  background-color: var(--_6levse1-3-3-1);
 }

package/esm/layouts/container/Container.sty.js

@@ -1,6 +1,6 @@
 import "../../styles/container.css";
 import "./Container.css";
-var containerCSS = "_f32lcd0-3-3-0";
+var containerCSS = "_f32lcd0-3-3-1";
 export {
   containerCSS
 };

package/esm/layouts/container/Container.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/container/Container.css.ts"],
-  "sourcesContent": ["import '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-3-0';"],
+  "sourcesContent": ["import '../../styles/container.css';\nimport './Container.css';\nexport var containerCSS = '_f32lcd0-3-3-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/divider/Divider.css

@@ -1,21 +1,21 @@
-._1thxv8m0-3-3-0 {
+._1thxv8m0-3-3-1 {
   border: none;
   margin: 0;
   overflow-wrap: break-word;
-  background-color: var(--_k096v42-3-3-0);
+  background-color: var(--_k096v42-3-3-1);
 }
-._1thxv8m1-3-3-0 {
+._1thxv8m1-3-3-1 {
   width: 100%;
   height: var(--dt-borders-width-default, 1px);
 }
-._1thxv8m2-3-3-0 {
+._1thxv8m2-3-3-1 {
   width: var(--dt-borders-width-default, 1px);
   height: 100%;
 }
-._1thxv8m5-3-3-0 {
+._1thxv8m5-3-3-1 {
   flex-shrink: 0;
 }
-._1thxv8m6-3-3-0 {
+._1thxv8m6-3-3-1 {
   flex-shrink: 0;
   width: var(--dt-borders-width-default, 1px);
   height: auto;

package/esm/layouts/divider/Divider.sty.js

@@ -1,7 +1,7 @@
 import "../../core/utils/colorUtils.css";
 import "./Divider.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-3-0", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-3-0", vertical: "_1thxv8m2-3-3-0" }, flexItem: { true: "_1thxv8m3-3-3-0", false: "_1thxv8m4-3-3-0" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-3-0"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-3-0"]] });
+var dividerCSS = _7a468({ defaultClassName: "_1thxv8m0-3-3-1", variantClassNames: { orientation: { horizontal: "_1thxv8m1-3-3-1", vertical: "_1thxv8m2-3-3-1" }, flexItem: { true: "_1thxv8m3-3-3-1", false: "_1thxv8m4-3-3-1" } }, defaultVariants: {}, compoundVariants: [[{ orientation: "horizontal", flexItem: false }, "_1thxv8m5-3-3-1"], [{ orientation: "vertical", flexItem: true }, "_1thxv8m6-3-3-1"]] });
 export {
   dividerCSS
 };

package/esm/layouts/divider/Divider.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/divider/Divider.css.ts"],
-  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-3-0',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-3-0',vertical:'_1thxv8m2-3-3-0'},flexItem:{true:'_1thxv8m3-3-3-0',false:'_1thxv8m4-3-3-0'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-3-0'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-3-0']]});"],
+  "sourcesContent": ["import '../../core/utils/colorUtils.css';\nimport './Divider.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dividerCSS = _7a468({defaultClassName:'_1thxv8m0-3-3-1',variantClassNames:{orientation:{horizontal:'_1thxv8m1-3-3-1',vertical:'_1thxv8m2-3-3-1'},flexItem:{true:'_1thxv8m3-3-3-1',false:'_1thxv8m4-3-3-1'}},defaultVariants:{},compoundVariants:[[{orientation:'horizontal',flexItem:false},'_1thxv8m5-3-3-1'],[{orientation:'vertical',flexItem:true},'_1thxv8m6-3-3-1']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,aAAY,cAAa,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,aAAY,YAAW,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/input-group/InputGroup.css

@@ -1,46 +1,46 @@
-._1x4bl8z0-3-3-0 > .strato-inputgroup:not(:last-child),
- ._1x4bl8z0-3-3-0 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z0-3-3-1 > .strato-inputgroup:not(:last-child),
+ ._1x4bl8z0-3-3-1 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1x4bl8z0-3-3-0 > .strato-inputgroup:not(:first-child),
- ._1x4bl8z0-3-3-0 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z0-3-3-1 > .strato-inputgroup:not(:first-child),
+ ._1x4bl8z0-3-3-1 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._1x4bl8z0-3-3-0 > ._mvcxum0-3-3-0 {
+._1x4bl8z0-3-3-1 > ._mvcxum0-3-3-1 {
   display: grid;
   align-items: center;
   grid-template-rows: subgrid;
 }
-._1x4bl8z0-3-3-0:has(> ._mvcxum0-3-3-0 > label):has(> ._mvcxum0-3-3-0 > ._1l9bja60-3-3-0:last-child:not(:empty)) > ._mvcxum0-3-3-0 {
+._1x4bl8z0-3-3-1:has(> ._mvcxum0-3-3-1 > label):has(> ._mvcxum0-3-3-1 > ._1l9bja60-3-3-1:last-child:not(:empty)) > ._mvcxum0-3-3-1 {
   grid-row: 1 / span 3;
 }
-._1x4bl8z0-3-3-0:has(> ._mvcxum0-3-3-0 > label):not(:has(> ._mvcxum0-3-3-0 > ._1l9bja60-3-3-0:last-child:not(:empty))) > ._mvcxum0-3-3-0 {
+._1x4bl8z0-3-3-1:has(> ._mvcxum0-3-3-1 > label):not(:has(> ._mvcxum0-3-3-1 > ._1l9bja60-3-3-1:last-child:not(:empty))) > ._mvcxum0-3-3-1 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-3-0:not(:has(> ._mvcxum0-3-3-0 > label)):has(> ._mvcxum0-3-3-0 > ._1l9bja60-3-3-0:last-child:not(:empty)) > ._mvcxum0-3-3-0 {
+._1x4bl8z0-3-3-1:not(:has(> ._mvcxum0-3-3-1 > label)):has(> ._mvcxum0-3-3-1 > ._1l9bja60-3-3-1:last-child:not(:empty)) > ._mvcxum0-3-3-1 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-3-0 > ._mvcxum0-3-3-0 > label {
+._1x4bl8z0-3-3-1 > ._mvcxum0-3-3-1 > label {
   grid-row: 1 / 2;
   align-self: end;
 }
-._1x4bl8z0-3-3-0 > ._mvcxum0-3-3-0:has(> :not(label, ._1l9bja60-3-3-0)) > label {
+._1x4bl8z0-3-3-1 > ._mvcxum0-3-3-1:has(> :not(label, ._1l9bja60-3-3-1)) > label {
   width: 0;
   min-width: 100%;
 }
-._1x4bl8z0-3-3-0 > :not(._mvcxum0-3-3-0) {
+._1x4bl8z0-3-3-1 > :not(._mvcxum0-3-3-1) {
   grid-row: 1 / 2;
 }
-._1x4bl8z0-3-3-0:has(> ._mvcxum0-3-3-0 > label) > :not(._mvcxum0-3-3-0), ._1x4bl8z0-3-3-0:has(> ._mvcxum0-3-3-0 > label) > ._mvcxum0-3-3-0 > :not(label, ._1l9bja60-3-3-0) {
+._1x4bl8z0-3-3-1:has(> ._mvcxum0-3-3-1 > label) > :not(._mvcxum0-3-3-1), ._1x4bl8z0-3-3-1:has(> ._mvcxum0-3-3-1 > label) > ._mvcxum0-3-3-1 > :not(label, ._1l9bja60-3-3-1) {
   grid-row: 2 / 3;
 }
-._1x4bl8z0-3-3-0:has(> ._mvcxum0-3-3-0 > label) > ._mvcxum0-3-3-0 > ._1l9bja60-3-3-0 {
+._1x4bl8z0-3-3-1:has(> ._mvcxum0-3-3-1 > label) > ._mvcxum0-3-3-1 > ._1l9bja60-3-3-1 {
   grid-row: 3 / 4;
   align-self: start;
 }
-._1x4bl8z0-3-3-0 > ._mvcxum0-3-3-0:has(> :not(label, ._1l9bja60-3-3-0)) > ._1l9bja60-3-3-0 ._16z6rg14-3-3-0 {
+._1x4bl8z0-3-3-1 > ._mvcxum0-3-3-1:has(> :not(label, ._1l9bja60-3-3-1)) > ._1l9bja60-3-3-1 ._16z6rg14-3-3-1 {
   width: 0;
   flex: 1 1 auto;
 }

package/esm/layouts/input-group/InputGroup.sty.js

@@ -2,7 +2,7 @@ import "../../forms/forms-core/components/form-field/FormField.css";
 import "../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css";
 import "../../forms/forms-core/components/form-field-messages/FormFieldMessages.css";
 import "./InputGroup.css";
-var inputGroup = "_1x4bl8z0-3-3-0";
+var inputGroup = "_1x4bl8z0-3-3-1";
 var inputGroupClassName = "strato-inputgroup";
 export {
   inputGroup,

package/esm/layouts/input-group/InputGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/input-group/InputGroup.css.ts"],
-  "sourcesContent": ["import '../../forms/forms-core/components/form-field/FormField.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessages.css';\nimport './InputGroup.css';\nexport var inputGroup = '_1x4bl8z0-3-3-0';\nexport var inputGroupClassName = 'strato-inputgroup';"],
+  "sourcesContent": ["import '../../forms/forms-core/components/form-field/FormField.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessageItem.css';\nimport '../../forms/forms-core/components/form-field-messages/FormFieldMessages.css';\nimport './InputGroup.css';\nexport var inputGroup = '_1x4bl8z0-3-3-1';\nexport var inputGroupClassName = 'strato-inputgroup';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,sBAAsB;",
   "names": []
 }

package/esm/layouts/page/DetailView.css

@@ -1,8 +1,8 @@
-._wapl5d0-3-3-0 {
+._wapl5d0-3-3-1 {
   grid-area: details;
   flex-direction: row-reverse;
 }
-._wapl5d1-3-3-0 {
+._wapl5d1-3-3-1 {
   background: var(--dt-colors-background-base-default, #f9f9fa);
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }

package/esm/layouts/page/DetailView.sty.js

@@ -1,6 +1,6 @@
 import "./DetailView.css";
-var content = "_wapl5d1-3-3-0";
-var details = "_wapl5d0-3-3-0";
+var content = "_wapl5d1-3-3-1";
+var details = "_wapl5d0-3-3-1";
 export {
   content,
   details

package/esm/layouts/page/DetailView.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/DetailView.css.ts"],
-  "sourcesContent": ["import './DetailView.css';\nexport var content = '_wapl5d1-3-3-0';\nexport var details = '_wapl5d0-3-3-0';"],
+  "sourcesContent": ["import './DetailView.css';\nexport var content = '_wapl5d1-3-3-1';\nexport var details = '_wapl5d0-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/Header.css

@@ -1,4 +1,4 @@
-._150dima0-3-3-0 {
+._150dima0-3-3-1 {
   grid-area: header;
   width: 100%;
   padding: var(--dt-spacings-size-8, 8px);

package/esm/layouts/page/Header.sty.js

@@ -1,5 +1,5 @@
 import "./Header.css";
-var header = "_150dima0-3-3-0";
+var header = "_150dima0-3-3-1";
 export {
   header
 };

package/esm/layouts/page/Header.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Header.css.ts"],
-  "sourcesContent": ["import './Header.css';\nexport var header = '_150dima0-3-3-0';"],
+  "sourcesContent": ["import './Header.css';\nexport var header = '_150dima0-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/page/Main.css

@@ -1,17 +1,17 @@
-._5zin930-3-3-0 {
+._5zin930-3-3-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   grid-area: main;
   overflow: hidden;
 }
-._5zin931-3-3-0 {
+._5zin931-3-3-1 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._5zin932-3-3-0 {
+._5zin932-3-3-1 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._5zin933-3-3-0 {
+._5zin933-3-3-1 {
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }

package/esm/layouts/page/Main.sty.js

@@ -1,8 +1,8 @@
 import "./Main.css";
-var content = "_5zin931-3-3-0";
-var main = "_5zin930-3-3-0";
-var withDetails = "_5zin933-3-3-0";
-var withSidebar = "_5zin932-3-3-0";
+var content = "_5zin931-3-3-1";
+var main = "_5zin930-3-3-1";
+var withDetails = "_5zin933-3-3-1";
+var withSidebar = "_5zin932-3-3-1";
 export {
   content,
   main,

package/esm/layouts/page/Main.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Main.css.ts"],
-  "sourcesContent": ["import './Main.css';\nexport var content = '_5zin931-3-3-0';\nexport var main = '_5zin930-3-3-0';\nexport var withDetails = '_5zin933-3-3-0';\nexport var withSidebar = '_5zin932-3-3-0';"],
+  "sourcesContent": ["import './Main.css';\nexport var content = '_5zin931-3-3-1';\nexport var main = '_5zin930-3-3-1';\nexport var withDetails = '_5zin933-3-3-1';\nexport var withSidebar = '_5zin932-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,cAAc;AAClB,IAAI,cAAc;",
   "names": []
 }

package/esm/layouts/page/Page.css

@@ -1,4 +1,4 @@
-._1j29czt0-3-3-0 {
+._1j29czt0-3-3-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
   display: grid;
   height: 100dvh;

package/esm/layouts/page/Page.sty.js

@@ -1,5 +1,5 @@
 import "./Page.css";
-var page = "_1j29czt0-3-3-0";
+var page = "_1j29czt0-3-3-1";
 export {
   page
 };

package/esm/layouts/page/Page.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Page.css.ts"],
-  "sourcesContent": ["import './Page.css';\nexport var page = '_1j29czt0-3-3-0';"],
+  "sourcesContent": ["import './Page.css';\nexport var page = '_1j29czt0-3-3-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/layouts/page/PanelControlButton.js

@@ -8,6 +8,7 @@ import {
 import { usePageContext } from "./page-context.js";
 import { usePanelContext } from "./panel-context.js";
 import { Button } from "../../buttons/button/Button.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { isDev } from "../../core/utils/is-node-environment.js";
 const PanelControlButton = (props) => {
   const {
@@ -19,6 +20,7 @@ const PanelControlButton = (props) => {
     style: consumerStyle,
     ...remainingProps
   } = props;
+  const intl = useIntl();
   const pageCtx = usePageContext();
   const panelCtx = usePanelContext();
   const targetPanel = targetProp ?? panelCtx?.name ?? "details";
@@ -26,7 +28,14 @@ const PanelControlButton = (props) => {
   const panel = pageCtx.panels[targetPanel];
   const isPanelControlled = panel?.isControlled;
   const isPanelDismissed = panel?.isDismissed;
-  const intl = useIntl();
+  const shouldOpen = action === "open" || action === "toggle" && isPanelDismissed === true;
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  const defaultDataDtProperties = `state:${shouldOpen ? "expand" : "collapse"}`;
+  const {
+    "data-dt-name": dataDtName = "ExpandCollapse",
+    "data-dt-properties": dataDtProperties = defaultDataDtProperties,
+    ...remainingBehavioralTrackingProps
+  } = behavioralTrackingProps;
   const handleClick = (event) => {
     if (isPanelControlled && !onClick && isDev()) {
       console.warn(
@@ -50,8 +59,6 @@ const PanelControlButton = (props) => {
         break;
     }
   };
-  const shouldOpen = action === "open" || action === "toggle" && isPanelDismissed === true;
-  const dataDtProperties = `state:${shouldOpen ? "expand" : "collapse"}`;
   let localizedPanel = intl.formatMessage({
     defaultMessage: "Sidebar",
     id: "MYBFw8pxHVA1QTDj",
@@ -97,9 +104,10 @@ const PanelControlButton = (props) => {
       className: consumerClassName,
       style: consumerStyle,
       onClick: handleClick,
-      ...remainingProps,
-      "data-dt-name": "ExpandCollapse",
+      "data-dt-name": dataDtName,
       "data-dt-properties": dataDtProperties,
+      ...remainingBehavioralTrackingProps,
+      ...restProps,
       children: childrenProp ?? /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(
         "div",
         {

package/esm/layouts/page/PanelControlButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/PanelControlButton.tsx"],
-  "sourcesContent": ["import { type MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  XmarkIcon,\n  OpenSidebarIcon,\n  CloseSidebarIcon,\n} from '@dynatrace/strato-icons';\n\nimport { usePageContext } from './page-context.js';\nimport { usePanelContext } from './panel-context.js';\nimport { Button, ButtonProps } from '../../buttons/button/Button.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\n\n/** @public */\nexport interface PanelControlButtonProps\n  extends Omit<ButtonProps<'button'>, 'as' | 'type' | 'loading'> {\n  /** The action triggered by the button. */\n  action?: 'toggle' | 'open' | 'close';\n  /** The target panel controlled by the button. */\n  target?: 'sidebar' | 'details';\n}\n\n/**\n * Use the `PanelControlButton` to get the correct icon for toggling the sidebar / detail view.\n * Depending on where it is rendered and the current state of the panel, the corresponding icon is rendered.\n * You can customize the rendered content by passing any children.\n * @public\n */\nexport const PanelControlButton = (props: PanelControlButtonProps) => {\n  const {\n    action: actionProp,\n    target: targetProp,\n    children: childrenProp,\n    onClick,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  }: PanelControlButtonProps = props;\n\n  const pageCtx = usePageContext();\n  const panelCtx = usePanelContext();\n\n  const targetPanel = targetProp ?? panelCtx?.name ?? 'details';\n  const action = actionProp ?? (panelCtx !== null ? 'close' : 'toggle');\n  const panel = pageCtx.panels[targetPanel];\n\n  const isPanelControlled = panel?.isControlled;\n  const isPanelDismissed = panel?.isDismissed;\n\n  const intl = useIntl();\n\n  const handleClick = (event: MouseEvent) => {\n    if (isPanelControlled && !onClick && isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"You are using the panel control button with a controlled panel, but didn't provide an 'onClick' callback. Implement the 'onClick' to update the panel state with the panel control button.\",\n      );\n      return;\n    }\n\n    onClick?.(event);\n\n    if (isPanelControlled) {\n      return;\n    }\n\n    switch (action) {\n      case 'open':\n        pageCtx.expandPanel(targetPanel);\n        break;\n      case 'close':\n        pageCtx.dismissPanel(targetPanel);\n        break;\n      case 'toggle':\n        pageCtx.togglePanel(targetPanel);\n        break;\n    }\n  };\n\n  const shouldOpen =\n    action === 'open' || (action === 'toggle' && isPanelDismissed === true);\n\n  const dataDtProperties = `state:${shouldOpen ? 'expand' : 'collapse'}`;\n\n  let localizedPanel = intl.formatMessage({\n    defaultMessage: 'Sidebar',\n    id: 'MYBFw8pxHVA1QTDj',\n    description: 'Panel name translation',\n  });\n  if (targetPanel === 'details') {\n    localizedPanel = intl.formatMessage({\n      defaultMessage: 'Detail View',\n      id: '0ntbampPIxNnacS8',\n      description: 'Panel name translation',\n    });\n  }\n\n  let ariaLabel = intl.formatMessage(\n    {\n      defaultMessage: 'Close {panelName}',\n      id: 'QsfELKqpB23/KKWM',\n      description: 'Label for the panel control button.',\n    },\n    { panelName: localizedPanel },\n  );\n  if (shouldOpen) {\n    ariaLabel = intl.formatMessage(\n      {\n        defaultMessage: 'Open {panelName}',\n        id: '01469lp26TkXjPEz',\n        description: 'Label for the panel control button.',\n      },\n      { panelName: localizedPanel },\n    );\n  }\n\n  let defaultIcon;\n  if (shouldOpen) {\n    defaultIcon = <OpenSidebarIcon />;\n  } else if (action === 'toggle') {\n    defaultIcon = <CloseSidebarIcon />;\n  } else {\n    defaultIcon = <XmarkIcon />;\n  }\n\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={consumerClassName}\n      style={consumerStyle}\n      onClick={handleClick}\n      {...remainingProps}\n      data-dt-name=\"ExpandCollapse\"\n      data-dt-properties={dataDtProperties}\n    >\n      {childrenProp ?? (\n        <Button.Prefix>\n          <div\n            style={{\n              rotate: targetPanel === 'sidebar' ? '0deg' : '180deg',\n              lineHeight: 0,\n            }}\n          >\n            {defaultIcon}\n          </div>\n        </Button.Prefix>\n      )}\n    </Button>\n  );\n};\n(\n  PanelControlButton as typeof PanelControlButton & { displayName: string }\n).displayName = 'Page.PanelControlButton';\n"],
-  "mappings": "AAuHkB;AAtHlB,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,cAA2B;AACpC,SAAS,aAAa;AAiBf,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAA6B;AAE7B,QAAM,UAAU,eAAe;AAC/B,QAAM,WAAW,gBAAgB;AAEjC,QAAM,cAAc,cAAc,UAAU,QAAQ;AACpD,QAAM,SAAS,eAAe,aAAa,OAAO,UAAU;AAC5D,QAAM,QAAQ,QAAQ,OAAO,WAAW;AAExC,QAAM,oBAAoB,OAAO;AACjC,QAAM,mBAAmB,OAAO;AAEhC,QAAM,OAAO,QAAQ;AAErB,QAAM,cAAc,CAAC,UAAsB;AACzC,QAAI,qBAAqB,CAAC,WAAW,MAAM,GAAG;AAE5C,cAAQ;AAAA,QACN;AAAA,MACF;AACA;AAAA,IACF;AAEA,cAAU,KAAK;AAEf,QAAI,mBAAmB;AACrB;AAAA,IACF;AAEA,YAAQ,QAAQ;AAAA,MACd,KAAK;AACH,gBAAQ,YAAY,WAAW;AAC/B;AAAA,MACF,KAAK;AACH,gBAAQ,aAAa,WAAW;AAChC;AAAA,MACF,KAAK;AACH,gBAAQ,YAAY,WAAW;AAC/B;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,aACJ,WAAW,UAAW,WAAW,YAAY,qBAAqB;AAEpE,QAAM,mBAAmB,SAAS,aAAa,WAAW,UAAU;AAEpE,MAAI,iBAAiB,KAAK,cAAc;AAAA,IACtC,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AACD,MAAI,gBAAgB,WAAW;AAC7B,qBAAiB,KAAK,cAAc;AAAA,MAClC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AAAA,EACH;AAEA,MAAI,YAAY,KAAK;AAAA,IACnB;AAAA,MACE,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf;AAAA,IACA,EAAE,WAAW,eAAe;AAAA,EAC9B;AACA,MAAI,YAAY;AACd,gBAAY,KAAK;AAAA,MACf;AAAA,QACE,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,aAAa;AAAA,MACf;AAAA,MACA,EAAE,WAAW,eAAe;AAAA,IAC9B;AAAA,EACF;AAEA,MAAI;AACJ,MAAI,YAAY;AACd,kBAAc,oBAAC,mBAAgB;AAAA,EACjC,WAAW,WAAW,UAAU;AAC9B,kBAAc,oBAAC,oBAAiB;AAAA,EAClC,OAAO;AACL,kBAAc,oBAAC,aAAU;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW;AAAA,MACX,OAAO;AAAA,MACP,SAAS;AAAA,MACR,GAAG;AAAA,MACJ,gBAAa;AAAA,MACb,sBAAoB;AAAA,MAEnB,0BACC,oBAAC,OAAO,QAAP,EACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,QAAQ,gBAAgB,YAAY,SAAS;AAAA,YAC7C,YAAY;AAAA,UACd;AAAA,UAEC;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EAEJ;AAEJ;AAEE,mBACA,cAAc;",
+  "sourcesContent": ["import { type MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  XmarkIcon,\n  OpenSidebarIcon,\n  CloseSidebarIcon,\n} from '@dynatrace/strato-icons';\n\nimport { usePageContext } from './page-context.js';\nimport { usePanelContext } from './panel-context.js';\nimport { Button, ButtonProps } from '../../buttons/button/Button.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\n\n/** @public */\nexport interface PanelControlButtonProps\n  extends Omit<ButtonProps<'button'>, 'as' | 'type' | 'loading'> {\n  /** The action triggered by the button. */\n  action?: 'toggle' | 'open' | 'close';\n  /** The target panel controlled by the button. */\n  target?: 'sidebar' | 'details';\n}\n\n/**\n * Use the `PanelControlButton` to get the correct icon for toggling the sidebar / detail view.\n * Depending on where it is rendered and the current state of the panel, the corresponding icon is rendered.\n * You can customize the rendered content by passing any children.\n * @public\n */\nexport const PanelControlButton = (props: PanelControlButtonProps) => {\n  const {\n    action: actionProp,\n    target: targetProp,\n    children: childrenProp,\n    onClick,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  }: PanelControlButtonProps = props;\n\n  const intl = useIntl();\n  const pageCtx = usePageContext();\n  const panelCtx = usePanelContext();\n\n  const targetPanel = targetProp ?? panelCtx?.name ?? 'details';\n  const action = actionProp ?? (panelCtx !== null ? 'close' : 'toggle');\n  const panel = pageCtx.panels[targetPanel];\n\n  const isPanelControlled = panel?.isControlled;\n  const isPanelDismissed = panel?.isDismissed;\n  const shouldOpen =\n    action === 'open' || (action === 'toggle' && isPanelDismissed === true);\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const defaultDataDtProperties = `state:${shouldOpen ? 'expand' : 'collapse'}`;\n  const {\n    'data-dt-name': dataDtName = 'ExpandCollapse',\n    'data-dt-properties': dataDtProperties = defaultDataDtProperties,\n    ...remainingBehavioralTrackingProps\n  } = behavioralTrackingProps;\n\n  const handleClick = (event: MouseEvent) => {\n    if (isPanelControlled && !onClick && isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        \"You are using the panel control button with a controlled panel, but didn't provide an 'onClick' callback. Implement the 'onClick' to update the panel state with the panel control button.\",\n      );\n      return;\n    }\n\n    onClick?.(event);\n\n    if (isPanelControlled) {\n      return;\n    }\n\n    switch (action) {\n      case 'open':\n        pageCtx.expandPanel(targetPanel);\n        break;\n      case 'close':\n        pageCtx.dismissPanel(targetPanel);\n        break;\n      case 'toggle':\n        pageCtx.togglePanel(targetPanel);\n        break;\n    }\n  };\n\n  let localizedPanel = intl.formatMessage({\n    defaultMessage: 'Sidebar',\n    id: 'MYBFw8pxHVA1QTDj',\n    description: 'Panel name translation',\n  });\n  if (targetPanel === 'details') {\n    localizedPanel = intl.formatMessage({\n      defaultMessage: 'Detail View',\n      id: '0ntbampPIxNnacS8',\n      description: 'Panel name translation',\n    });\n  }\n\n  let ariaLabel = intl.formatMessage(\n    {\n      defaultMessage: 'Close {panelName}',\n      id: 'QsfELKqpB23/KKWM',\n      description: 'Label for the panel control button.',\n    },\n    { panelName: localizedPanel },\n  );\n  if (shouldOpen) {\n    ariaLabel = intl.formatMessage(\n      {\n        defaultMessage: 'Open {panelName}',\n        id: '01469lp26TkXjPEz',\n        description: 'Label for the panel control button.',\n      },\n      { panelName: localizedPanel },\n    );\n  }\n\n  let defaultIcon;\n  if (shouldOpen) {\n    defaultIcon = <OpenSidebarIcon />;\n  } else if (action === 'toggle') {\n    defaultIcon = <CloseSidebarIcon />;\n  } else {\n    defaultIcon = <XmarkIcon />;\n  }\n\n  return (\n    <Button\n      aria-label={ariaLabel}\n      className={consumerClassName}\n      style={consumerStyle}\n      onClick={handleClick}\n      data-dt-name={dataDtName}\n      data-dt-properties={dataDtProperties}\n      {...remainingBehavioralTrackingProps}\n      {...restProps}\n    >\n      {childrenProp ?? (\n        <Button.Prefix>\n          <div\n            style={{\n              rotate: targetPanel === 'sidebar' ? '0deg' : '180deg',\n              lineHeight: 0,\n            }}\n          >\n            {defaultIcon}\n          </div>\n        </Button.Prefix>\n      )}\n    </Button>\n  );\n};\n(\n  PanelControlButton as typeof PanelControlButton & { displayName: string }\n).displayName = 'Page.PanelControlButton';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/layouts/page/Sidebar.css

@@ -1,16 +1,16 @@
-._zdcge90-3-3-0 {
+._zdcge90-3-3-1 {
   grid-area: sidebar;
   justify-content: flex-end;
 }
-._zdcge91-3-3-0 {
+._zdcge91-3-3-1 {
   flex-shrink: 0;
   height: 100%;
   left: 0;
   position: relative;
   width: 0;
 }
-._zdcge93-3-3-0 {
-  --_zdcge92-3-3-0: 16px;
+._zdcge93-3-3-1 {
+  --_zdcge92-3-3-1: 16px;
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -20,29 +20,29 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: background-color, translate;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
-  width: var(--_zdcge92-3-3-0);
-  translate: calc(0px - var(--_zdcge92-3-3-0) * 2);
+  width: var(--_zdcge92-3-3-1);
+  translate: calc(0px - var(--_zdcge92-3-3-1) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1p91g301-3-3-0:is(:hover,:focus-within) ._zdcge93-3-3-0 {
+._1p91g301-3-3-1:is(:hover,:focus-within) ._zdcge93-3-3-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
-  translate: calc(0px - var(--_zdcge92-3-3-0) - var(--_zdcge92-3-3-0) / 2);
+  translate: calc(0px - var(--_zdcge92-3-3-1) - var(--_zdcge92-3-3-1) / 2);
 }
-._zdcge95-3-3-0 {
-  --_zdcge94-3-3-0: 24px;
+._zdcge95-3-3-1 {
+  --_zdcge94-3-3-1: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
-  left: calc(0px - var(--_zdcge94-3-3-0) / 2 + 2px);
+  left: calc(0px - var(--_zdcge94-3-3-1) / 2 + 2px);
 }
-._zdcge96-3-3-0 {
-  width: var(--_zdcge94-3-3-0);
-  height: var(--_zdcge94-3-3-0);
+._zdcge96-3-3-1 {
+  width: var(--_zdcge94-3-3-1);
+  height: var(--_zdcge94-3-3-1);
   box-sizing: border-box;
   outline-color: transparent;
   outline-style: var(--dt-borders-style-default, solid);
   outline-width: var(--dt-borders-width-emphasized, 2px);
 }
-._zdcge97-3-3-0 {
+._zdcge97-3-3-1 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   opacity: 0;
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
@@ -50,27 +50,27 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._zdcge97-3-3-0:hover {
+._zdcge97-3-3-1:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._zdcge97-3-3-0:focus {
+._zdcge97-3-3-1:focus {
   opacity: 1;
 }
-._1p91g301-3-3-0:hover ._zdcge97-3-3-0 {
+._1p91g301-3-3-1:hover ._zdcge97-3-3-1 {
   opacity: 1;
 }
-._zdcge98-3-3-0 {
+._zdcge98-3-3-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge98-3-3-0:hover {
+._zdcge98-3-3-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   outline-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._zdcge99-3-3-0._1p91g302-3-3-0 {
+._zdcge99-3-3-1._1p91g302-3-3-1 {
   width: var(--dt-spacings-size-16, 16px);
 }
-._zdcge9a-3-3-0 {
+._zdcge9a-3-3-1 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-inline: var(--dt-spacings-size-8, 8px);

package/esm/layouts/page/Sidebar.sty.js

@@ -1,14 +1,14 @@
 import "./panel.css";
 import "../../core/styles/focusRingStatic.css";
 import "./Sidebar.css";
-var buttonContainer = "_zdcge95-3-3-0";
-var dismissButton = "_zdcge97-3-3-0 _zdcge96-3-3-0";
-var expandButton = "_zdcge98-3-3-0 _zdcge96-3-3-0";
-var hint = "_zdcge93-3-3-0 _z0fq9b4-3-3-0 _z0fq9bc-3-3-0 _z0fq9b6-3-3-0 _z0fq9bb-3-3-0";
-var integratedControls = "_zdcge91-3-3-0";
-var integratedControlsDrawerHeader = "_zdcge9a-3-3-0";
-var integratedControlsPanel = "_zdcge99-3-3-0";
-var sidebar = "_zdcge90-3-3-0";
+var buttonContainer = "_zdcge95-3-3-1";
+var dismissButton = "_zdcge97-3-3-1 _zdcge96-3-3-1";
+var expandButton = "_zdcge98-3-3-1 _zdcge96-3-3-1";
+var hint = "_zdcge93-3-3-1 _z0fq9b4-3-3-1 _z0fq9bc-3-3-1 _z0fq9b6-3-3-1 _z0fq9bb-3-3-1";
+var integratedControls = "_zdcge91-3-3-1";
+var integratedControlsDrawerHeader = "_zdcge9a-3-3-1";
+var integratedControlsPanel = "_zdcge99-3-3-1";
+var sidebar = "_zdcge90-3-3-1";
 export {
   buttonContainer,
   dismissButton,

package/esm/layouts/page/Sidebar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Sidebar.css.ts"],
-  "sourcesContent": ["import './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-3-0';\nexport var dismissButton = '_zdcge97-3-3-0 _zdcge96-3-3-0';\nexport var expandButton = '_zdcge98-3-3-0 _zdcge96-3-3-0';\nexport var hint = '_zdcge93-3-3-0 _z0fq9b4-3-3-0 _z0fq9bc-3-3-0 _z0fq9b6-3-3-0 _z0fq9bb-3-3-0';\nexport var integratedControls = '_zdcge91-3-3-0';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-3-0';\nexport var integratedControlsPanel = '_zdcge99-3-3-0';\nexport var sidebar = '_zdcge90-3-3-0';"],
+  "sourcesContent": ["import './panel.css';\nimport '../../core/styles/focusRingStatic.css';\nimport './Sidebar.css';\nexport var buttonContainer = '_zdcge95-3-3-1';\nexport var dismissButton = '_zdcge97-3-3-1 _zdcge96-3-3-1';\nexport var expandButton = '_zdcge98-3-3-1 _zdcge96-3-3-1';\nexport var hint = '_zdcge93-3-3-1 _z0fq9b4-3-3-1 _z0fq9bc-3-3-1 _z0fq9b6-3-3-1 _z0fq9bb-3-3-1';\nexport var integratedControls = '_zdcge91-3-3-1';\nexport var integratedControlsDrawerHeader = '_zdcge9a-3-3-1';\nexport var integratedControlsPanel = '_zdcge99-3-3-1';\nexport var sidebar = '_zdcge90-3-3-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,OAAO;AACX,IAAI,qBAAqB;AACzB,IAAI,iCAAiC;AACrC,IAAI,0BAA0B;AAC9B,IAAI,UAAU;",
   "names": []
 }