@dynatrace/strato-components 3.1.3 → 3.2.1

package/esm/layouts/help-menu/HelpMenu.js

@@ -131,7 +131,14 @@ const HelpMenuButton = ({
   ] });
 };
 const HelpMenu = (props) => {
-  const { entries, children } = props;
+  const {
+    entries,
+    onOpenChange,
+    children,
+    "data-testid": dataTestId,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow
+  } = props;
   const [isOpen, setIsOpen] = useState(false);
   const intl = useIntl();
   const label = intl.formatMessage({
@@ -140,7 +147,7 @@ const HelpMenu = (props) => {
   });
   const handleOpenChange = (value) => {
     setIsOpen(value);
-    props.onOpenChange?.(value);
+    onOpenChange?.(value);
   };
   return /* @__PURE__ */ jsxs(
     Menu,
@@ -148,8 +155,18 @@ const HelpMenu = (props) => {
       open: isOpen,
       onOpenChange: handleOpenChange,
       "data-dt-component": COMPONENT_NAME,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
       children: [
-        /* @__PURE__ */ jsx(Tooltip, { text: label, children: /* @__PURE__ */ jsx(Menu.Trigger, { "data-dt-component": COMPONENT_NAME, children: /* @__PURE__ */ jsx(Button, { "aria-label": label, children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(HelpIcon, {}) }) }) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { text: label, children: /* @__PURE__ */ jsx(
+          Menu.Trigger,
+          {
+            "data-dt-component": COMPONENT_NAME,
+            "data-dt-name": "OpenMenu",
+            children: /* @__PURE__ */ jsx(Button, { "aria-label": label, children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(HelpIcon, {}) }) })
+          }
+        ) }),
         /* @__PURE__ */ jsxs(Menu.Content, { children: [
           MENU_ITEMS.map(({ label: label2, key, icon }) => {
             const entry = entries[key];

package/esm/layouts/help-menu/HelpMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/help-menu/HelpMenu.tsx"],
-  "sourcesContent": ["import { type ReactNode, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport {\n  DescriptionIcon,\n  ExternalLinkIcon,\n  FeedbackIcon,\n  GuideIcon,\n  HelpIcon,\n  InformationIcon,\n  KeyboardIcon,\n  PlayIcon,\n  WhatsNewIcon,\n} from '@dynatrace/strato-icons';\nimport { getAppId, getAppVersion } from '@dynatrace-sdk/app-environment';\nimport { sendIntent } from '@dynatrace-sdk/navigation';\n\nimport { Button } from '../../buttons/button/Button.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport { Flex } from '../flex/Flex.js';\n\nconst COMPONENT_NAME = 'HelpMenu';\n\ntype MenuItem = {\n  label: ReactNode;\n  icon: ReactNode;\n  key: keyof HelpMenuProps['entries'];\n};\n\nconst MENU_ITEMS: MenuItem[] = [\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"What's new\" id=\"TY3F/kE6n91t0TL0\" />\n    ),\n    icon: <WhatsNewIcon />,\n    key: 'whatsNew',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Get started\" id=\"kOQNUENAg02eeaTY\" />\n    ),\n    icon: <GuideIcon />,\n    key: 'getStarted',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Documentation\" id=\"npzzIhowJGIZhj8d\" />\n    ),\n    icon: <DescriptionIcon />,\n    key: 'documentation',\n  },\n  {\n    label: (\n      <FormattedMessage\n        defaultMessage=\"Keyboard shortcuts\"\n        id=\"JmaVR5qUnuxE3qnb\"\n      />\n    ),\n    icon: <KeyboardIcon />,\n    key: 'keyboardShortcuts',\n  },\n  {\n    label: (\n      <FormattedMessage\n        defaultMessage=\"Try in Playground\"\n        id=\"Nar807M4NJhqMw/T\"\n      />\n    ),\n    icon: <PlayIcon />,\n    key: 'playground',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Share feedback\" id=\"Ia87HCOLBoxMcV9t\" />\n    ),\n    icon: <FeedbackIcon />,\n    key: 'feedback',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"About this app\" id=\"9/nhbjHpPPAhMbHo\" />\n    ),\n    icon: <InformationIcon />,\n    key: 'about',\n  },\n] as const;\n\nconst HelpMenuFooter = () => {\n  const version = getAppVersion();\n  if (!version) {\n    return null;\n  }\n  return (\n    <Menu.Label>\n      <div\n        style={{\n          maxWidth: 500,\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n        }}\n      >\n        <FormattedMessage\n          defaultMessage=\"Version {version}\"\n          description=\"App version label\"\n          id=\"W2KEm8AIcM8pOixf\"\n          values={{ version }}\n        />\n      </div>\n    </Menu.Label>\n  );\n};\n\nconst HelpMenuLink = ({\n  href,\n  target = '_blank',\n  onSelect,\n  label,\n  icon,\n  ...rest\n}: {\n  href: string;\n  target?: string;\n  onSelect?: () => void;\n  label: ReactNode;\n  icon?: ReactNode;\n}) => {\n  return (\n    <Menu.Link\n      {...rest}\n      onClick={() => onSelect?.()}\n      href={href}\n      target={target}\n    >\n      {icon ? <Menu.Prefix>{icon}</Menu.Prefix> : null}\n      <Flex justifyContent=\"space-between\" width=\"inherit\">\n        {label}\n        <ExternalLinkIcon style={{ flexShrink: 0 }} />\n      </Flex>\n    </Menu.Link>\n  );\n};\n\nconst HelpMenuButton = ({\n  onSelect,\n  label,\n  icon,\n  ...rest\n}: {\n  onSelect: () => void;\n  label: ReactNode;\n  icon?: ReactNode;\n}) => {\n  return (\n    <Menu.Item onSelect={onSelect} {...rest}>\n      {icon ? <Menu.Prefix>{icon}</Menu.Prefix> : null}\n      {label}\n    </Menu.Item>\n  );\n};\n\n/** @public */\nexport type HelpMenuButtonEntry = {\n  onSelect: () => void;\n};\n\n/** @public */\nexport type HelpMenuLinkEntry = {\n  href: string;\n  /** Specify how to open the linked content. */\n  target?: string;\n  onSelect?: () => void;\n};\n\n/**\n * Use the default behavior via app configuration / SDKs\n * @public\n **/\nexport type HelpMenuDefault = 'default';\n\n/** @public */\nexport interface HelpMenuCustomLinkEntry extends HelpMenuLinkEntry {\n  label: string;\n}\n/** @public */\nexport interface HelpMenuCustomItemEntry extends HelpMenuButtonEntry {\n  label: string;\n}\n/** @public */\nexport type HelpMenuChildrenEntry = Array<\n  HelpMenuCustomLinkEntry | HelpMenuCustomItemEntry\n>;\n\n/** @public */\nexport interface HelpMenuProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  entries: {\n    whatsNew?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n    getStarted?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuChildrenEntry;\n    documentation?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuChildrenEntry;\n    keyboardShortcuts?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuDefault;\n    playground?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n    feedback?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuChildrenEntry;\n    about?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n  };\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * A prebuilt menu as entrypoint for app specific help links and actions.\n * @public\n */\nexport const HelpMenu = (props: HelpMenuProps) => {\n  const { entries, children } = props;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const intl = useIntl();\n\n  const label = intl.formatMessage({\n    defaultMessage: 'Help',\n    id: 'xHrhU3DP4e0nge7c',\n  });\n\n  const handleOpenChange = (value: boolean) => {\n    setIsOpen(value);\n    props.onOpenChange?.(value);\n  };\n\n  return (\n    <Menu\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <Tooltip text={label}>\n        <Menu.Trigger data-dt-component={COMPONENT_NAME}>\n          <Button aria-label={label}>\n            <Button.Prefix>\n              <HelpIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n      </Tooltip>\n      <Menu.Content>\n        {MENU_ITEMS.map(({ label, key, icon }) => {\n          const entry = entries[key];\n          if (!entry) {\n            return null;\n          }\n\n          if (entry === 'default') {\n            return (\n              <HelpMenuDefaults\n                key={key}\n                entryKey={key}\n                icon={icon}\n                label={label}\n              />\n            );\n          }\n\n          if (Array.isArray(entry)) {\n            return (\n              <Menu.Sub key={key}>\n                <Menu.SubTrigger>\n                  <Menu.Prefix>{icon}</Menu.Prefix>\n                  {label}\n                </Menu.SubTrigger>\n                <Menu.SubContent>\n                  {entry.map((entryChild) => {\n                    if ('href' in entryChild) {\n                      return (\n                        <HelpMenuLink\n                          key={entryChild.label}\n                          label={entryChild.label}\n                          onSelect={entryChild.onSelect}\n                          href={entryChild.href}\n                          target={entryChild.target}\n                        />\n                      );\n                    }\n                    return (\n                      <HelpMenuButton\n                        key={entryChild.label}\n                        label={entryChild.label}\n                        onSelect={entryChild.onSelect}\n                      />\n                    );\n                  })}\n                </Menu.SubContent>\n              </Menu.Sub>\n            );\n          }\n\n          if ('href' in entry) {\n            return (\n              <HelpMenuLink\n                key={key}\n                label={label}\n                icon={icon}\n                onSelect={entry.onSelect}\n                href={entry.href}\n                target={entry.target}\n              />\n            );\n          }\n          return (\n            <HelpMenuButton\n              key={key}\n              label={label}\n              icon={icon}\n              onSelect={entry.onSelect}\n            />\n          );\n        })}\n        {children}\n        <HelpMenuFooter />\n      </Menu.Content>\n    </Menu>\n  );\n};\n\nconst HelpMenuDefaults = (props: {\n  label: ReactNode;\n  entryKey: keyof HelpMenuProps['entries'];\n  icon: ReactNode;\n}) => {\n  switch (props.entryKey) {\n    case 'whatsNew':\n      return (\n        <HelpMenuButton\n          onSelect={() =>\n            sendIntent(\n              {\n                appId: getAppId(),\n                version: getAppVersion(),\n              },\n              {\n                recommendedAppId: 'dynatrace.hub',\n                recommendedIntentId: 'view_app_releases_add_on_intent',\n              },\n            )\n          }\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'keyboardShortcuts':\n      return (\n        <HelpMenuButton\n          onSelect={() => {\n            // This is a workaround to call the keyboard modal for now.\n            // In the future this should be called via an sdk.\n            // It is not yet clear yet in which sdk this will be available.\n            // If it is available this will be replaced.\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (globalThis as any).dtRuntime?.uiCommands?.showUiCommands?.();\n          }}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'playground':\n      return (\n        <HelpMenuLink\n          href={`https://wkf10640.apps.dynatrace.com/ui/apps/${getAppId()}`}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'about':\n      return (\n        <HelpMenuButton\n          onSelect={() => {\n            sendIntent(\n              { appId: getAppId() },\n              {\n                recommendedAppId: 'dynatrace.hub',\n                recommendedIntentId: 'view_app_details',\n              },\n            );\n          }}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    default:\n      return null;\n  }\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type ReactNode, useState } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport {\n  DescriptionIcon,\n  ExternalLinkIcon,\n  FeedbackIcon,\n  GuideIcon,\n  HelpIcon,\n  InformationIcon,\n  KeyboardIcon,\n  PlayIcon,\n  WhatsNewIcon,\n} from '@dynatrace/strato-icons';\nimport { getAppId, getAppVersion } from '@dynatrace-sdk/app-environment';\nimport { sendIntent } from '@dynatrace-sdk/navigation';\n\nimport { Button } from '../../buttons/button/Button.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../overlays/tooltip/Tooltip.js';\nimport { Flex } from '../flex/Flex.js';\n\nconst COMPONENT_NAME = 'HelpMenu';\n\ntype MenuItem = {\n  label: ReactNode;\n  icon: ReactNode;\n  key: keyof HelpMenuProps['entries'];\n};\n\nconst MENU_ITEMS: MenuItem[] = [\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"What's new\" id=\"TY3F/kE6n91t0TL0\" />\n    ),\n    icon: <WhatsNewIcon />,\n    key: 'whatsNew',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Get started\" id=\"kOQNUENAg02eeaTY\" />\n    ),\n    icon: <GuideIcon />,\n    key: 'getStarted',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Documentation\" id=\"npzzIhowJGIZhj8d\" />\n    ),\n    icon: <DescriptionIcon />,\n    key: 'documentation',\n  },\n  {\n    label: (\n      <FormattedMessage\n        defaultMessage=\"Keyboard shortcuts\"\n        id=\"JmaVR5qUnuxE3qnb\"\n      />\n    ),\n    icon: <KeyboardIcon />,\n    key: 'keyboardShortcuts',\n  },\n  {\n    label: (\n      <FormattedMessage\n        defaultMessage=\"Try in Playground\"\n        id=\"Nar807M4NJhqMw/T\"\n      />\n    ),\n    icon: <PlayIcon />,\n    key: 'playground',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"Share feedback\" id=\"Ia87HCOLBoxMcV9t\" />\n    ),\n    icon: <FeedbackIcon />,\n    key: 'feedback',\n  },\n  {\n    label: (\n      <FormattedMessage defaultMessage=\"About this app\" id=\"9/nhbjHpPPAhMbHo\" />\n    ),\n    icon: <InformationIcon />,\n    key: 'about',\n  },\n] as const;\n\nconst HelpMenuFooter = () => {\n  const version = getAppVersion();\n  if (!version) {\n    return null;\n  }\n  return (\n    <Menu.Label>\n      <div\n        style={{\n          maxWidth: 500,\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n        }}\n      >\n        <FormattedMessage\n          defaultMessage=\"Version {version}\"\n          description=\"App version label\"\n          id=\"W2KEm8AIcM8pOixf\"\n          values={{ version }}\n        />\n      </div>\n    </Menu.Label>\n  );\n};\n\nconst HelpMenuLink = ({\n  href,\n  target = '_blank',\n  onSelect,\n  label,\n  icon,\n  ...rest\n}: {\n  href: string;\n  target?: string;\n  onSelect?: () => void;\n  label: ReactNode;\n  icon?: ReactNode;\n}) => {\n  return (\n    <Menu.Link\n      {...rest}\n      onClick={() => onSelect?.()}\n      href={href}\n      target={target}\n    >\n      {icon ? <Menu.Prefix>{icon}</Menu.Prefix> : null}\n      <Flex justifyContent=\"space-between\" width=\"inherit\">\n        {label}\n        <ExternalLinkIcon style={{ flexShrink: 0 }} />\n      </Flex>\n    </Menu.Link>\n  );\n};\n\nconst HelpMenuButton = ({\n  onSelect,\n  label,\n  icon,\n  ...rest\n}: {\n  onSelect: () => void;\n  label: ReactNode;\n  icon?: ReactNode;\n}) => {\n  return (\n    <Menu.Item onSelect={onSelect} {...rest}>\n      {icon ? <Menu.Prefix>{icon}</Menu.Prefix> : null}\n      {label}\n    </Menu.Item>\n  );\n};\n\n/** @public */\nexport type HelpMenuButtonEntry = {\n  onSelect: () => void;\n};\n\n/** @public */\nexport type HelpMenuLinkEntry = {\n  href: string;\n  /** Specify how to open the linked content. */\n  target?: string;\n  onSelect?: () => void;\n};\n\n/**\n * Use the default behavior via app configuration / SDKs\n * @public\n **/\nexport type HelpMenuDefault = 'default';\n\n/** @public */\nexport interface HelpMenuCustomLinkEntry extends HelpMenuLinkEntry {\n  label: string;\n}\n/** @public */\nexport interface HelpMenuCustomItemEntry extends HelpMenuButtonEntry {\n  label: string;\n}\n/** @public */\nexport type HelpMenuChildrenEntry = Array<\n  HelpMenuCustomLinkEntry | HelpMenuCustomItemEntry\n>;\n\n/** @public */\nexport interface HelpMenuProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  entries: {\n    whatsNew?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n    getStarted?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuChildrenEntry;\n    documentation?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuChildrenEntry;\n    keyboardShortcuts?:\n      | HelpMenuButtonEntry\n      | HelpMenuLinkEntry\n      | HelpMenuDefault;\n    playground?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n    feedback?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuChildrenEntry;\n    about?: HelpMenuButtonEntry | HelpMenuLinkEntry | HelpMenuDefault;\n  };\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * A prebuilt menu as entrypoint for app specific help links and actions.\n * @public\n */\nexport const HelpMenu = (props: HelpMenuProps) => {\n  const {\n    entries,\n    onOpenChange,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n\n  const [isOpen, setIsOpen] = useState(false);\n  const intl = useIntl();\n\n  const label = intl.formatMessage({\n    defaultMessage: 'Help',\n    id: 'xHrhU3DP4e0nge7c',\n  });\n\n  const handleOpenChange = (value: boolean) => {\n    setIsOpen(value);\n    onOpenChange?.(value);\n  };\n\n  return (\n    <Menu\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      data-dt-component={COMPONENT_NAME}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n    >\n      <Tooltip text={label}>\n        <Menu.Trigger\n          data-dt-component={COMPONENT_NAME}\n          data-dt-name=\"OpenMenu\"\n        >\n          <Button aria-label={label}>\n            <Button.Prefix>\n              <HelpIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n      </Tooltip>\n      <Menu.Content>\n        {MENU_ITEMS.map(({ label, key, icon }) => {\n          const entry = entries[key];\n          if (!entry) {\n            return null;\n          }\n\n          if (entry === 'default') {\n            return (\n              <HelpMenuDefaults\n                key={key}\n                entryKey={key}\n                icon={icon}\n                label={label}\n              />\n            );\n          }\n\n          if (Array.isArray(entry)) {\n            return (\n              <Menu.Sub key={key}>\n                <Menu.SubTrigger>\n                  <Menu.Prefix>{icon}</Menu.Prefix>\n                  {label}\n                </Menu.SubTrigger>\n                <Menu.SubContent>\n                  {entry.map((entryChild) => {\n                    if ('href' in entryChild) {\n                      return (\n                        <HelpMenuLink\n                          key={entryChild.label}\n                          label={entryChild.label}\n                          onSelect={entryChild.onSelect}\n                          href={entryChild.href}\n                          target={entryChild.target}\n                        />\n                      );\n                    }\n                    return (\n                      <HelpMenuButton\n                        key={entryChild.label}\n                        label={entryChild.label}\n                        onSelect={entryChild.onSelect}\n                      />\n                    );\n                  })}\n                </Menu.SubContent>\n              </Menu.Sub>\n            );\n          }\n\n          if ('href' in entry) {\n            return (\n              <HelpMenuLink\n                key={key}\n                label={label}\n                icon={icon}\n                onSelect={entry.onSelect}\n                href={entry.href}\n                target={entry.target}\n              />\n            );\n          }\n          return (\n            <HelpMenuButton\n              key={key}\n              label={label}\n              icon={icon}\n              onSelect={entry.onSelect}\n            />\n          );\n        })}\n        {children}\n        <HelpMenuFooter />\n      </Menu.Content>\n    </Menu>\n  );\n};\n\nconst HelpMenuDefaults = (props: {\n  label: ReactNode;\n  entryKey: keyof HelpMenuProps['entries'];\n  icon: ReactNode;\n}) => {\n  switch (props.entryKey) {\n    case 'whatsNew':\n      return (\n        <HelpMenuButton\n          onSelect={() =>\n            sendIntent(\n              {\n                appId: getAppId(),\n                version: getAppVersion(),\n              },\n              {\n                recommendedAppId: 'dynatrace.hub',\n                recommendedIntentId: 'view_app_releases_add_on_intent',\n              },\n            )\n          }\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'keyboardShortcuts':\n      return (\n        <HelpMenuButton\n          onSelect={() => {\n            // This is a workaround to call the keyboard modal for now.\n            // In the future this should be called via an sdk.\n            // It is not yet clear yet in which sdk this will be available.\n            // If it is available this will be replaced.\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            (globalThis as any).dtRuntime?.uiCommands?.showUiCommands?.();\n          }}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'playground':\n      return (\n        <HelpMenuLink\n          href={`https://wkf10640.apps.dynatrace.com/ui/apps/${getAppId()}`}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    case 'about':\n      return (\n        <HelpMenuButton\n          onSelect={() => {\n            sendIntent(\n              { appId: getAppId() },\n              {\n                recommendedAppId: 'dynatrace.hub',\n                recommendedIntentId: 'view_app_details',\n              },\n            );\n          }}\n          label={props.label}\n          icon={props.icon}\n        />\n      );\n    default:\n      return null;\n  }\n};\n"],
+  "mappings": "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",
   "names": ["label"]
 }

package/esm/layouts/index.js

@@ -21,6 +21,15 @@ import { inputGroupClassName } from "./input-group/InputGroup.sty.js";
 import {
   SplitLayout
 } from "./split-layout/SplitLayout.js";
+import {
+  SidebarLayout
+} from "./page-layout/sidebar-layout/SidebarLayout.js";
+import {
+  DetailsLayout
+} from "./page-layout/details-layout/DetailsLayout.js";
+import {
+  PageLayout
+} from "./page-layout/PageLayout.js";
 export {
   AppHeader,
   Logo2 as AppNavLink,
@@ -35,6 +44,9 @@ export {
   Surface,
   TitleBar,
   ActionGroup as _ActionGroup,
+  DetailsLayout as _DetailsLayout,
+  PageLayout as _PageLayout,
+  SidebarLayout as _SidebarLayout,
   SplitLayout as _SplitLayout,
   surfaceBorderRadius as _surfaceBorderRadius,
   useContainerColoring as _useContainerColoring,

package/esm/layouts/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/layouts/index.ts"],
-  "sourcesContent": ["export { Flex, type FlexOwnProps, type FlexProps } from './flex/Flex.js';\nexport { Grid, type GridOwnProps, type GridProps } from './grid/Grid.js';\nexport { Divider } from './divider/Divider.js';\nexport type { DividerProps } from './divider/Divider.js';\nexport {\n  Container,\n  useContainerColoring as _useContainerColoring,\n  type ContainerColoring as _ContainerColoring,\n} from './container/Container.js';\nexport type {\n  ContainerOwnProps,\n  ContainerProps,\n} from './container/Container.js';\nexport type { LayoutSizeCSS } from './types/layout.types.js';\nexport { Surface } from './surface/Surface.js';\nexport type { SurfaceOwnProps, SurfaceProps } from './surface/surface-types.js';\nexport { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.sty.js';\nexport { useBreakpoint } from './hooks/useBreakpoint.js';\nexport { AppHeader } from './app-header/AppHeader.js';\nexport type { AppHeaderProps } from './app-header/AppHeader.js';\nexport type {\n  AppHeaderActionButtonOwnProps,\n  AppHeaderActionButtonProps,\n} from './app-header/ActionButton.js';\nexport type { AppHeaderActionItemsProps } from './app-header/ActionItems.js';\nexport type { ActionItemGroupProps } from './app-header/ActionItemGroup.js';\nexport { HelpMenu } from './help-menu/HelpMenu.js';\nexport type {\n  HelpMenuProps,\n  HelpMenuButtonEntry,\n  HelpMenuLinkEntry,\n  HelpMenuChildrenEntry,\n  HelpMenuCustomLinkEntry,\n  HelpMenuCustomItemEntry,\n  HelpMenuDefault,\n} from './help-menu/HelpMenu.js';\nexport type {\n  AppHeaderNavigationProps,\n  AppHeaderNavigationItemOwnProps,\n  AppHeaderNavigationItemProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderNavigationProps as AppHeaderNavItemsProps,\n} from './app-header/Navigation.js';\nexport type { AppIconProps } from './app-header/app-icon/AppIcon.js';\nexport { Logo, Logo as AppNavLink } from './app-header/Logo.js';\nexport type {\n  AppHeaderLogoProps,\n  AppHeaderLogoOwnProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderLogoProps as AppNavLinkProps,\n  AppHeaderLogoOwnProps as AppNavLinkOwnProps,\n  AppNavLinkInternalOwnProps, // exported for backwards compatibility\n} from './app-header/Logo.js';\nexport type {\n  ActionButtonOwnProps,\n  ActionButtonProps,\n} from './app-header/action-group/ActionButton.js';\nexport { ActionGroup as _ActionGroup } from './app-header/action-group/ActionGroup.js';\nexport type { ActionGroupProps as _ActionGroupProps } from './app-header/action-group/ActionGroup.js';\nexport type {\n  NavItemProps,\n  NavItemOwnProps,\n} from './app-header/action-group/NavItem.js';\nexport type { GroupProps } from './app-header/action-group/Group.js';\n\nexport type {\n  ControlledDetailViewProps,\n  DetailViewOwnProps,\n  DetailViewProps,\n  UncontrolledDetailViewProps,\n} from './page/DetailView.js';\nexport type { HeaderProps } from './page/Header.js';\nexport type { MainProps } from './page/Main.js';\nexport { Page } from './page/Page.js';\nexport type { PageProps } from './page/Page.js';\nexport { panelSizeUnits } from './page/panel-types.js';\nexport type {\n  PanelSize,\n  PanelSizeUnit,\n  Direction as _Direction,\n} from './page/panel-types.js';\nexport type { PanelControlButtonProps } from './page/PanelControlButton.js';\nexport type {\n  ControlledSidebarProps,\n  SidebarOwnProps,\n  SidebarProps,\n  UncontrolledSidebarProps,\n} from './page/Sidebar.js';\nexport { pagePanels } from './page/page-types.js';\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DismissiblePagePanels,\n  PagePanelSizes,\n  PanelName,\n  /** @deprecated Use `PanelName` instead. */\n  PanelName as PagePanels,\n  ControlledPagePanelProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PagePanelProps,\n  UncontrolledPagePanelProps,\n} from './page/page-types.js';\n\nexport type { TitleBarActionProps } from './title-bar/Action.js';\nexport type { TitleBarNavigationProps } from './title-bar/Navigation.js';\nexport type { TitleBarPrefixProps } from './title-bar/Prefix.js';\nexport type { TitleBarSubtitleProps } from './title-bar/Subtitle.js';\nexport type { TitleBarSuffixProps } from './title-bar/Suffix.js';\nexport type { TitleBarTitleProps } from './title-bar/Title.js';\nexport { TitleBar } from './title-bar/TitleBar.js';\nexport type { TitleBarProps } from './title-bar/TitleBar.js';\n\nexport { InputGroup, type InputGroupProps } from './input-group/InputGroup.js';\nexport { inputGroupClassName } from './input-group/InputGroup.sty.js';\n\nexport {\n  SplitLayout as _SplitLayout,\n  type ContentProps as _SplitLayoutContentProps,\n  type PanelProps as _SplitLayoutPanelProps,\n  type ResizeHandleProps as _SplitLayoutResizeHandleProps,\n  type RootProps as _SplitLayoutRootProps,\n} from './split-layout/SplitLayout.js';\nexport type { PanelWidth } from './split-layout/width-utils.js';\n"],
-  "mappings": "AAAA,SAAS,YAA+C;AACxD,SAAS,YAA+C;AACxD,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACwB;AAAA,OAEnB;AAMP,SAAS,eAAe;AAExB,SAAgC,2BAA4B;AAC5D,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAQ1B,SAAS,gBAAgB;AAkBzB,SAAS,MAAc,QAARA,aAA0B;AAazC,SAAwB,mBAAoB;AAgB5C,SAAS,YAAY;AAErB,SAAS,sBAAsB;AAa/B,SAAS,kBAAkB;AAoB3B,SAAS,gBAAgB;AAGzB,SAAS,kBAAwC;AACjD,SAAS,2BAA2B;AAEpC;AAAA,EACiB;AAAA,OAKV;",
+  "sourcesContent": ["export { Flex, type FlexOwnProps, type FlexProps } from './flex/Flex.js';\nexport { Grid, type GridOwnProps, type GridProps } from './grid/Grid.js';\nexport { Divider } from './divider/Divider.js';\nexport type { DividerProps } from './divider/Divider.js';\nexport {\n  Container,\n  useContainerColoring as _useContainerColoring,\n  type ContainerColoring as _ContainerColoring,\n} from './container/Container.js';\nexport type {\n  ContainerOwnProps,\n  ContainerProps,\n} from './container/Container.js';\nexport type { LayoutSizeCSS } from './types/layout.types.js';\nexport { Surface } from './surface/Surface.js';\nexport type { SurfaceOwnProps, SurfaceProps } from './surface/surface-types.js';\nexport { surfaceBorderRadius as _surfaceBorderRadius } from './surface/variables.sty.js';\nexport { useBreakpoint } from './hooks/useBreakpoint.js';\nexport { AppHeader } from './app-header/AppHeader.js';\nexport type { AppHeaderProps } from './app-header/AppHeader.js';\nexport type {\n  AppHeaderActionButtonOwnProps,\n  AppHeaderActionButtonProps,\n} from './app-header/ActionButton.js';\nexport type { AppHeaderActionItemsProps } from './app-header/ActionItems.js';\nexport type { ActionItemGroupProps } from './app-header/ActionItemGroup.js';\nexport { HelpMenu } from './help-menu/HelpMenu.js';\nexport type {\n  HelpMenuProps,\n  HelpMenuButtonEntry,\n  HelpMenuLinkEntry,\n  HelpMenuChildrenEntry,\n  HelpMenuCustomLinkEntry,\n  HelpMenuCustomItemEntry,\n  HelpMenuDefault,\n} from './help-menu/HelpMenu.js';\nexport type {\n  AppHeaderNavigationProps,\n  AppHeaderNavigationItemOwnProps,\n  AppHeaderNavigationItemProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderNavigationProps as AppHeaderNavItemsProps,\n} from './app-header/Navigation.js';\nexport type { AppIconProps } from './app-header/app-icon/AppIcon.js';\nexport { Logo, Logo as AppNavLink } from './app-header/Logo.js';\nexport type {\n  AppHeaderLogoProps,\n  AppHeaderLogoOwnProps,\n  // exported with alternate name for backwards compatibility\n  AppHeaderLogoProps as AppNavLinkProps,\n  AppHeaderLogoOwnProps as AppNavLinkOwnProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  AppNavLinkInternalOwnProps, // exported for backwards compatibility\n} from './app-header/Logo.js';\nexport type {\n  ActionButtonOwnProps,\n  ActionButtonProps,\n} from './app-header/action-group/ActionButton.js';\nexport { ActionGroup as _ActionGroup } from './app-header/action-group/ActionGroup.js';\nexport type { ActionGroupProps as _ActionGroupProps } from './app-header/action-group/ActionGroup.js';\nexport type {\n  NavItemProps,\n  NavItemOwnProps,\n} from './app-header/action-group/NavItem.js';\nexport type { GroupProps } from './app-header/action-group/Group.js';\n\nexport type {\n  ControlledDetailViewProps,\n  DetailViewOwnProps,\n  DetailViewProps,\n  UncontrolledDetailViewProps,\n} from './page/DetailView.js';\nexport type { HeaderProps } from './page/Header.js';\nexport type { MainProps } from './page/Main.js';\nexport { Page } from './page/Page.js';\nexport type { PageProps } from './page/Page.js';\nexport { panelSizeUnits } from './page/panel-types.js';\nexport type {\n  PanelSize,\n  PanelSizeUnit,\n  Direction as _Direction,\n} from './page/panel-types.js';\nexport type { PanelControlButtonProps } from './page/PanelControlButton.js';\nexport type {\n  ControlledSidebarProps,\n  SidebarOwnProps,\n  SidebarProps,\n  UncontrolledSidebarProps,\n} from './page/Sidebar.js';\nexport { pagePanels } from './page/page-types.js';\nexport type {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  DismissiblePagePanels,\n  PagePanelSizes,\n  PanelName,\n  /** @deprecated Use `PanelName` instead. */\n  PanelName as PagePanels,\n  ControlledPagePanelProps,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PagePanelProps,\n  UncontrolledPagePanelProps,\n} from './page/page-types.js';\n\nexport type { TitleBarActionProps } from './title-bar/Action.js';\nexport type { TitleBarNavigationProps } from './title-bar/Navigation.js';\nexport type { TitleBarPrefixProps } from './title-bar/Prefix.js';\nexport type { TitleBarSubtitleProps } from './title-bar/Subtitle.js';\nexport type { TitleBarSuffixProps } from './title-bar/Suffix.js';\nexport type { TitleBarTitleProps } from './title-bar/Title.js';\nexport { TitleBar } from './title-bar/TitleBar.js';\nexport type { TitleBarProps } from './title-bar/TitleBar.js';\n\nexport { InputGroup, type InputGroupProps } from './input-group/InputGroup.js';\nexport { inputGroupClassName } from './input-group/InputGroup.sty.js';\n\nexport {\n  SplitLayout as _SplitLayout,\n  type ContentProps as _SplitLayoutContentProps,\n  type PanelProps as _SplitLayoutPanelProps,\n  type ResizeHandleProps as _SplitLayoutResizeHandleProps,\n  type RootProps as _SplitLayoutRootProps,\n} from './split-layout/SplitLayout.js';\nexport type { PanelWidth } from './split-layout/width-utils.js';\nexport type { CollapsibleProps as _CollapsibleProps } from './page-layout/shared/collapsible.js';\nexport {\n  SidebarLayout as _SidebarLayout,\n  type LayoutRootProps as _SidebarLayoutRootProps,\n} from './page-layout/sidebar-layout/SidebarLayout.js';\nexport type { SidebarProps as _PageLayoutSidebarProps } from './page-layout/sidebar-layout/slots.js';\nexport {\n  DetailsLayout as _DetailsLayout,\n  type RootProps as _DetailsLayoutRootProps,\n} from './page-layout/details-layout/DetailsLayout.js';\nexport type {\n  DetailsProps as _PageLayoutDetailsProps,\n  DetailsControlBarProps as _PageLayoutDetailsControlBarProps,\n} from './page-layout/details-layout/slots.js';\nexport type { LayoutMode as _DetailsLayoutLayoutMode } from './page-layout/details-layout/DetailsLayoutContext.js';\nexport {\n  PageLayout as _PageLayout,\n  type HeaderProps as _PageLayoutHeaderProps,\n  type RootProps as _PageLayoutRootProps,\n} from './page-layout/PageLayout.js';\nexport type { SubLayoutProps as _PageLayoutSubLayoutProps } from './page-layout/SubLayout.js';\nexport type { ProxyProps as _PageLayoutProxyProps } from './page-layout/shared/slots.js';\n"],
+  "mappings": "AAAA,SAAS,YAA+C;AACxD,SAAS,YAA+C;AACxD,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACwB;AAAA,OAEnB;AAMP,SAAS,eAAe;AAExB,SAAgC,2BAA4B;AAC5D,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAQ1B,SAAS,gBAAgB;AAkBzB,SAAS,MAAc,QAARA,aAA0B;AAczC,SAAwB,mBAAoB;AAgB5C,SAAS,YAAY;AAErB,SAAS,sBAAsB;AAa/B,SAAS,kBAAkB;AAoB3B,SAAS,gBAAgB;AAGzB,SAAS,kBAAwC;AACjD,SAAS,2BAA2B;AAEpC;AAAA,EACiB;AAAA,OAKV;AAGP;AAAA,EACmB;AAAA,OAEZ;AAEP;AAAA,EACmB;AAAA,OAEZ;AAMP;AAAA,EACgB;AAAA,OAGT;",
   "names": ["Logo"]
 }

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

@@ -1,46 +1,46 @@
-._1x4bl8z0-3-1-3 > .strato-inputgroup:not(:last-child),
- ._1x4bl8z0-3-1-3 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z0-3-2-1 > .strato-inputgroup:not(:last-child),
+ ._1x4bl8z0-3-2-1 > *:not(:last-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1x4bl8z0-3-1-3 > .strato-inputgroup:not(:first-child),
- ._1x4bl8z0-3-1-3 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
+._1x4bl8z0-3-2-1 > .strato-inputgroup:not(:first-child),
+ ._1x4bl8z0-3-2-1 > *:not(:first-child) :is(.strato-inputgroup, .cm-editor) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._1x4bl8z0-3-1-3 > ._mvcxum0-3-1-3 {
+._1x4bl8z0-3-2-1 > ._mvcxum0-3-2-1 {
   display: grid;
   align-items: center;
   grid-template-rows: subgrid;
 }
-._1x4bl8z0-3-1-3:has(> ._mvcxum0-3-1-3 > label):has(> ._mvcxum0-3-1-3 > ._1l9bja60-3-1-3:last-child:not(:empty)) > ._mvcxum0-3-1-3 {
+._1x4bl8z0-3-2-1:has(> ._mvcxum0-3-2-1 > label):has(> ._mvcxum0-3-2-1 > ._1l9bja60-3-2-1:last-child:not(:empty)) > ._mvcxum0-3-2-1 {
   grid-row: 1 / span 3;
 }
-._1x4bl8z0-3-1-3:has(> ._mvcxum0-3-1-3 > label):not(:has(> ._mvcxum0-3-1-3 > ._1l9bja60-3-1-3:last-child:not(:empty))) > ._mvcxum0-3-1-3 {
+._1x4bl8z0-3-2-1:has(> ._mvcxum0-3-2-1 > label):not(:has(> ._mvcxum0-3-2-1 > ._1l9bja60-3-2-1:last-child:not(:empty))) > ._mvcxum0-3-2-1 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-1-3:not(:has(> ._mvcxum0-3-1-3 > label)):has(> ._mvcxum0-3-1-3 > ._1l9bja60-3-1-3:last-child:not(:empty)) > ._mvcxum0-3-1-3 {
+._1x4bl8z0-3-2-1:not(:has(> ._mvcxum0-3-2-1 > label)):has(> ._mvcxum0-3-2-1 > ._1l9bja60-3-2-1:last-child:not(:empty)) > ._mvcxum0-3-2-1 {
   grid-row: 1 / span 2;
 }
-._1x4bl8z0-3-1-3 > ._mvcxum0-3-1-3 > label {
+._1x4bl8z0-3-2-1 > ._mvcxum0-3-2-1 > label {
   grid-row: 1 / 2;
   align-self: end;
 }
-._1x4bl8z0-3-1-3 > ._mvcxum0-3-1-3:has(> :not(label, ._1l9bja60-3-1-3)) > label {
+._1x4bl8z0-3-2-1 > ._mvcxum0-3-2-1:has(> :not(label, ._1l9bja60-3-2-1)) > label {
   width: 0;
   min-width: 100%;
 }
-._1x4bl8z0-3-1-3 > :not(._mvcxum0-3-1-3) {
+._1x4bl8z0-3-2-1 > :not(._mvcxum0-3-2-1) {
   grid-row: 1 / 2;
 }
-._1x4bl8z0-3-1-3:has(> ._mvcxum0-3-1-3 > label) > :not(._mvcxum0-3-1-3), ._1x4bl8z0-3-1-3:has(> ._mvcxum0-3-1-3 > label) > ._mvcxum0-3-1-3 > :not(label, ._1l9bja60-3-1-3) {
+._1x4bl8z0-3-2-1:has(> ._mvcxum0-3-2-1 > label) > :not(._mvcxum0-3-2-1), ._1x4bl8z0-3-2-1:has(> ._mvcxum0-3-2-1 > label) > ._mvcxum0-3-2-1 > :not(label, ._1l9bja60-3-2-1) {
   grid-row: 2 / 3;
 }
-._1x4bl8z0-3-1-3:has(> ._mvcxum0-3-1-3 > label) > ._mvcxum0-3-1-3 > ._1l9bja60-3-1-3 {
+._1x4bl8z0-3-2-1:has(> ._mvcxum0-3-2-1 > label) > ._mvcxum0-3-2-1 > ._1l9bja60-3-2-1 {
   grid-row: 3 / 4;
   align-self: start;
 }
-._1x4bl8z0-3-1-3 > ._mvcxum0-3-1-3:has(> :not(label, ._1l9bja60-3-1-3)) > ._1l9bja60-3-1-3 ._16z6rg14-3-1-3 {
+._1x4bl8z0-3-2-1 > ._mvcxum0-3-2-1:has(> :not(label, ._1l9bja60-3-2-1)) > ._1l9bja60-3-2-1 ._16z6rg14-3-2-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-1-3";
+var inputGroup = "_1x4bl8z0-3-2-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-1-3';\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-2-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-1-3 {
+._wapl5d0-3-2-1 {
   grid-area: details;
   flex-direction: row-reverse;
 }
-._wapl5d1-3-1-3 {
+._wapl5d1-3-2-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-1-3";
-var details = "_wapl5d0-3-1-3";
+var content = "_wapl5d1-3-2-1";
+var details = "_wapl5d0-3-2-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-1-3';\nexport var details = '_wapl5d0-3-1-3';"],
+  "sourcesContent": ["import './DetailView.css';\nexport var content = '_wapl5d1-3-2-1';\nexport var details = '_wapl5d0-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,UAAU;",
   "names": []
 }

package/esm/layouts/page/Header.css

@@ -1,4 +1,4 @@
-._150dima0-3-1-3 {
+._150dima0-3-2-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-1-3";
+var header = "_150dima0-3-2-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-1-3';"],
+  "sourcesContent": ["import './Header.css';\nexport var header = '_150dima0-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;",
   "names": []
 }

package/esm/layouts/page/Main.css

@@ -1,17 +1,17 @@
-._5zin930-3-1-3 {
+._5zin930-3-2-1 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   grid-area: main;
   overflow: hidden;
 }
-._5zin931-3-1-3 {
+._5zin931-3-2-1 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._5zin932-3-1-3 {
+._5zin932-3-2-1 {
   border-top-left-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._5zin933-3-1-3 {
+._5zin933-3-2-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-1-3";
-var main = "_5zin930-3-1-3";
-var withDetails = "_5zin933-3-1-3";
-var withSidebar = "_5zin932-3-1-3";
+var content = "_5zin931-3-2-1";
+var main = "_5zin930-3-2-1";
+var withDetails = "_5zin933-3-2-1";
+var withSidebar = "_5zin932-3-2-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-1-3';\nexport var main = '_5zin930-3-1-3';\nexport var withDetails = '_5zin933-3-1-3';\nexport var withSidebar = '_5zin932-3-1-3';"],
+  "sourcesContent": ["import './Main.css';\nexport var content = '_5zin931-3-2-1';\nexport var main = '_5zin930-3-2-1';\nexport var withDetails = '_5zin933-3-2-1';\nexport var withSidebar = '_5zin932-3-2-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-1-3 {
+._1j29czt0-3-2-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-1-3";
+var page = "_1j29czt0-3-2-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-1-3';"],
+  "sourcesContent": ["import './Page.css';\nexport var page = '_1j29czt0-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/layouts/page/Panel.js

@@ -190,7 +190,8 @@ const ResizeHandle = forwardRef(
           },
           { label: panelName }
         ),
-        tabIndex: 0
+        tabIndex: 0,
+        "data-dt-name": `${panelName.replace(/\s/g, "")}ResizePanelHandle`
       }
     );
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/page/Panel.tsx"],
-  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\nimport { useMemo, type HTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\n\nimport { KeepMountedProvider } from './keepMounted.js';\nimport type { PanelName } from './page-types.js';\nimport { panelContext } from './panel-context.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as styles from './panel.sty.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\ninterface PanelRootProps\n  extends WithChildren,\n    StylingProps,\n    HTMLAttributes<HTMLDivElement> {\n  name: PanelName;\n}\n\nconst PanelRoot = (props: PanelRootProps) => {\n  const { className, id, style, children, name }: PanelRootProps = props;\n\n  const ctx = useMemo(() => ({ name }), [name]);\n\n  return (\n    <panelContext.Provider value={ctx}>\n      <KeepMountedProvider>\n        <aside\n          {...props}\n          id={id}\n          className={clsx(styles.root, className)}\n          style={style}\n        >\n          {children}\n        </aside>\n      </KeepMountedProvider>\n    </panelContext.Provider>\n  );\n};\n\ninterface PanelContentProps extends WithChildren, StylingProps {\n  isDismissed?: boolean; // To retain the size when dismissing and expanding the panel, we need to handle the dismissed display mode inside\n  /** @defaultValue `right` */\n  handle?: 'left' | 'right' | 'hidden';\n  /** Descriptive label for the panel. */\n  label: string;\n  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\n  /**\n   * The desired width of the sidebar.\n   * Depending on the available screen width and other panel configurations,\n   * the size of the panel might not match the `preferredWidth` exactly.\n   * @defaultValue 15%\n   */\n  preferredWidth?: PanelSize;\n  /** Callback triggered after resizing is finished. */\n  onResize?: (width: number) => void;\n  /** Available size of the containing element. Used to calculate size with relative units. */\n  containerSize: number;\n}\n\nconst PanelContent = forwardRef<HTMLDivElement, PanelContentProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className,\n      handle = 'right',\n      isDismissed,\n      label,\n      minWidth,\n      onResize,\n      preferredWidth,\n      style,\n      containerSize,\n      ...restProps\n    }: PanelContentProps = props;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const panelRefs = useMergeRefs([panelRef, forwardedRef]);\n\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const draggedSize = useRef<number>();\n    const wasResized = useRef(false);\n\n    const setPanelSize = useCallback(\n      (size: number) => {\n        if (!panelRef.current) {\n          return;\n        }\n\n        let sizeToApply = Math.floor(size * 1000) / 1000;\n        draggedSize.current = sizeToApply;\n\n        // users can resize out of bounds and create negative size values. we dont want to apply those as css\n        if (size < 0) {\n          return;\n        }\n\n        if (minWidth && sizeToApply < minWidth) {\n          sizeToApply = minWidth;\n        }\n\n        panelRef.current.style.setProperty('width', `${sizeToApply}px`);\n      },\n      [minWidth],\n    );\n\n    const ensurePanelSizeMatchesComputedWidth = useCallback(\n      (element: HTMLElement, size: number) => {\n        const actualWidth = parseFloat(getComputedStyle(element).width);\n        if (size !== actualWidth) {\n          setPanelSize(actualWidth);\n        }\n        return actualWidth;\n      },\n      [setPanelSize],\n    );\n\n    const handleDrag = useCallback(\n      (deltaX: number) => {\n        if (!draggedSize.current) {\n          return;\n        }\n        setPanelSize(\n          draggedSize.current + deltaX * (handle === 'right' ? 1 : -1),\n        );\n        wasResized.current = true;\n      },\n      [handle, setPanelSize],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      const size = ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n      onResize?.(size);\n    }, [ensurePanelSizeMatchesComputedWidth, onResize]);\n\n    const handleDragStart = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n    }, [ensurePanelSizeMatchesComputedWidth]);\n\n    useGesture(\n      {\n        onDragStart: handleDragStart,\n        onDragEnd: handleDragEnd,\n        onDrag: ({ delta: [deltaX] }) => handleDrag(deltaX),\n      },\n      {\n        target: handleRef,\n        eventOptions: { passive: false },\n        drag: { filterTaps: true },\n      },\n    );\n\n    useEffect(\n      function initializePanelSize() {\n        if (!panelRef.current || wasResized.current || isDismissed) {\n          return;\n        }\n\n        if (typeof preferredWidth === 'number') {\n          setPanelSize(preferredWidth);\n          return;\n        }\n\n        // percentage based values on grid children use the available space of the area, not the full grid container\n        if (preferredWidth?.includes('%')) {\n          const size = containerSize * (parseFloat(preferredWidth) / 100);\n          setPanelSize(size);\n          return;\n        }\n\n        if (preferredWidth?.includes('px')) {\n          const size = parseFloat(preferredWidth);\n          setPanelSize(size);\n          return;\n        }\n\n        // for all other units we let the browser compute the size\n        if (typeof preferredWidth === 'string') {\n          panelRef.current.style.setProperty('width', preferredWidth);\n          const size = parseFloat(getComputedStyle(panelRef.current).width);\n          setPanelSize(size);\n          return;\n        }\n\n        const size = parseFloat(getComputedStyle(panelRef.current).width);\n        setPanelSize(size);\n      },\n      [containerSize, preferredWidth, setPanelSize, isDismissed],\n    );\n\n    if (isDismissed) {\n      return null;\n    }\n\n    return (\n      <>\n        <div\n          {...restProps}\n          ref={panelRefs}\n          className={clsx(styles.panelContent, className)}\n          style={{ ...style, minWidth, width: draggedSize.current }}\n        >\n          {children}\n        </div>\n\n        <div className={styles.resizeHandleContainer}>\n          {handle !== 'hidden' ? (\n            <ResizeHandle\n              panelName={label}\n              panelSize={draggedSize.current}\n              ref={handleRef}\n            />\n          ) : null}\n        </div>\n      </>\n    );\n  },\n);\n\ninterface ResizeHandleProps {\n  panelName: string;\n  panelSize?: number;\n}\n\nconst ResizeHandle = forwardRef<HTMLHRElement, ResizeHandleProps>(\n  (props, ref) => {\n    const { panelName, panelSize = 0 } = props;\n\n    const intl = useIntl();\n    const { focusProps, focusClassName } = useFocusRing({ focusWithin: true });\n\n    return (\n      <hr\n        {...focusProps}\n        ref={ref}\n        className={clsx(styles.resizeHandle, focusClassName)}\n        aria-valuenow={panelSize}\n        aria-valuetext={`${Math.round(panelSize)}px`}\n        aria-orientation=\"vertical\"\n        aria-label={intl.formatMessage(\n          {\n            defaultMessage: 'Resize {label} panel',\n            id: 'Ym3RUHtaLVFsGlaM',\n            description:\n              'Label for the resize handle of the panel to resize it with drag and drop or keyboard.',\n          },\n          { label: panelName },\n        )}\n        tabIndex={0}\n      />\n    );\n  },\n);\n\nexport const Panel = Object.assign(PanelRoot, {\n  Content: PanelContent,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useGesture } from '@use-gesture/react';\nimport clsx from 'clsx';\nimport { forwardRef, useCallback, useEffect, useRef } from 'react';\nimport { useMemo, type HTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { KeepMountedProvider } from './keepMounted.js';\nimport type { PanelName } from './page-types.js';\nimport { panelContext } from './panel-context.js';\nimport type { PanelSize } from './panel-types.js';\nimport * as styles from './panel.sty.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\ninterface PanelRootProps\n  extends WithChildren,\n    StylingProps,\n    HTMLAttributes<HTMLDivElement> {\n  name: PanelName;\n}\n\nconst PanelRoot = (props: PanelRootProps) => {\n  const { className, id, style, children, name }: PanelRootProps = props;\n\n  const ctx = useMemo(() => ({ name }), [name]);\n\n  return (\n    <panelContext.Provider value={ctx}>\n      <KeepMountedProvider>\n        <aside\n          {...props}\n          id={id}\n          className={clsx(styles.root, className)}\n          style={style}\n        >\n          {children}\n        </aside>\n      </KeepMountedProvider>\n    </panelContext.Provider>\n  );\n};\n\ninterface PanelContentProps extends WithChildren, StylingProps {\n  isDismissed?: boolean; // To retain the size when dismissing and expanding the panel, we need to handle the dismissed display mode inside\n  /** @defaultValue `right` */\n  handle?: 'left' | 'right' | 'hidden';\n  /** Descriptive label for the panel. */\n  label: string;\n  /**\n   * The minimum width of the sidebar in pixels.\n   * @defaultValue 200\n   */\n  minWidth?: number;\n  /**\n   * The desired width of the sidebar.\n   * Depending on the available screen width and other panel configurations,\n   * the size of the panel might not match the `preferredWidth` exactly.\n   * @defaultValue 15%\n   */\n  preferredWidth?: PanelSize;\n  /** Callback triggered after resizing is finished. */\n  onResize?: (width: number) => void;\n  /** Available size of the containing element. Used to calculate size with relative units. */\n  containerSize: number;\n}\n\nconst PanelContent = forwardRef<HTMLDivElement, PanelContentProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      className,\n      handle = 'right',\n      isDismissed,\n      label,\n      minWidth,\n      onResize,\n      preferredWidth,\n      style,\n      containerSize,\n      ...restProps\n    }: PanelContentProps = props;\n\n    const panelRef = useRef<HTMLDivElement>(null);\n    const panelRefs = useMergeRefs([panelRef, forwardedRef]);\n\n    const handleRef = useRef<HTMLHRElement>(null);\n\n    const draggedSize = useRef<number>();\n    const wasResized = useRef(false);\n\n    const setPanelSize = useCallback(\n      (size: number) => {\n        if (!panelRef.current) {\n          return;\n        }\n\n        let sizeToApply = Math.floor(size * 1000) / 1000;\n        draggedSize.current = sizeToApply;\n\n        // users can resize out of bounds and create negative size values. we dont want to apply those as css\n        if (size < 0) {\n          return;\n        }\n\n        if (minWidth && sizeToApply < minWidth) {\n          sizeToApply = minWidth;\n        }\n\n        panelRef.current.style.setProperty('width', `${sizeToApply}px`);\n      },\n      [minWidth],\n    );\n\n    const ensurePanelSizeMatchesComputedWidth = useCallback(\n      (element: HTMLElement, size: number) => {\n        const actualWidth = parseFloat(getComputedStyle(element).width);\n        if (size !== actualWidth) {\n          setPanelSize(actualWidth);\n        }\n        return actualWidth;\n      },\n      [setPanelSize],\n    );\n\n    const handleDrag = useCallback(\n      (deltaX: number) => {\n        if (!draggedSize.current) {\n          return;\n        }\n        setPanelSize(\n          draggedSize.current + deltaX * (handle === 'right' ? 1 : -1),\n        );\n        wasResized.current = true;\n      },\n      [handle, setPanelSize],\n    );\n\n    const handleDragEnd = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      const size = ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n      onResize?.(size);\n    }, [ensurePanelSizeMatchesComputedWidth, onResize]);\n\n    const handleDragStart = useCallback(() => {\n      if (!panelRef.current || !draggedSize.current) {\n        return;\n      }\n      ensurePanelSizeMatchesComputedWidth(\n        panelRef.current,\n        draggedSize.current,\n      );\n    }, [ensurePanelSizeMatchesComputedWidth]);\n\n    useGesture(\n      {\n        onDragStart: handleDragStart,\n        onDragEnd: handleDragEnd,\n        onDrag: ({ delta: [deltaX] }) => handleDrag(deltaX),\n      },\n      {\n        target: handleRef,\n        eventOptions: { passive: false },\n        drag: { filterTaps: true },\n      },\n    );\n\n    useEffect(\n      function initializePanelSize() {\n        if (!panelRef.current || wasResized.current || isDismissed) {\n          return;\n        }\n\n        if (typeof preferredWidth === 'number') {\n          setPanelSize(preferredWidth);\n          return;\n        }\n\n        // percentage based values on grid children use the available space of the area, not the full grid container\n        if (preferredWidth?.includes('%')) {\n          const size = containerSize * (parseFloat(preferredWidth) / 100);\n          setPanelSize(size);\n          return;\n        }\n\n        if (preferredWidth?.includes('px')) {\n          const size = parseFloat(preferredWidth);\n          setPanelSize(size);\n          return;\n        }\n\n        // for all other units we let the browser compute the size\n        if (typeof preferredWidth === 'string') {\n          panelRef.current.style.setProperty('width', preferredWidth);\n          const size = parseFloat(getComputedStyle(panelRef.current).width);\n          setPanelSize(size);\n          return;\n        }\n\n        const size = parseFloat(getComputedStyle(panelRef.current).width);\n        setPanelSize(size);\n      },\n      [containerSize, preferredWidth, setPanelSize, isDismissed],\n    );\n\n    if (isDismissed) {\n      return null;\n    }\n\n    return (\n      <>\n        <div\n          {...restProps}\n          ref={panelRefs}\n          className={clsx(styles.panelContent, className)}\n          style={{ ...style, minWidth, width: draggedSize.current }}\n        >\n          {children}\n        </div>\n\n        <div className={styles.resizeHandleContainer}>\n          {handle !== 'hidden' ? (\n            <ResizeHandle\n              panelName={label}\n              panelSize={draggedSize.current}\n              ref={handleRef}\n            />\n          ) : null}\n        </div>\n      </>\n    );\n  },\n);\n\ninterface ResizeHandleProps {\n  panelName: string;\n  panelSize?: number;\n}\n\nconst ResizeHandle = forwardRef<HTMLHRElement, ResizeHandleProps>(\n  (props, ref) => {\n    const { panelName, panelSize = 0 } = props;\n\n    const intl = useIntl();\n    const { focusProps, focusClassName } = useFocusRing({ focusWithin: true });\n\n    return (\n      <hr\n        {...focusProps}\n        ref={ref}\n        className={clsx(styles.resizeHandle, focusClassName)}\n        aria-valuenow={panelSize}\n        aria-valuetext={`${Math.round(panelSize)}px`}\n        aria-orientation=\"vertical\"\n        aria-label={intl.formatMessage(\n          {\n            defaultMessage: 'Resize {label} panel',\n            id: 'Ym3RUHtaLVFsGlaM',\n            description:\n              'Label for the resize handle of the panel to resize it with drag and drop or keyboard.',\n          },\n          { label: panelName },\n        )}\n        tabIndex={0}\n        data-dt-name={`${panelName.replace(/\\s/g, '')}ResizePanelHandle`}\n      />\n    );\n  },\n);\n\nexport const Panel = Object.assign(PanelRoot, {\n  Content: PanelContent,\n});\n"],
+  "mappings": "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",
   "names": ["size"]
 }

package/esm/layouts/page/PanelControlButton.js

@@ -51,6 +51,9 @@ const PanelControlButton = (props) => {
     }
   };
   const shouldOpen = action === "open" || action === "toggle" && isPanelDismissed === true;
+  const panelName = targetPanel === "sidebar" ? "Sidebar" : "DetailView";
+  const panelAction = shouldOpen ? "Open" : "Close";
+  const dataDtName = targetPanel === "main" ? void 0 : `${panelAction}${panelName}`;
   let localizedPanel = intl.formatMessage({
     defaultMessage: "Sidebar",
     id: "MYBFw8pxHVA1QTDj",
@@ -97,6 +100,7 @@ const PanelControlButton = (props) => {
       style: consumerStyle,
       onClick: handleClick,
       ...remainingProps,
+      "data-dt-name": dataDtName,
       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  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    >\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": "AAqHkB;AApHlB,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,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,MAEH,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 { 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 panelName = targetPanel === 'sidebar' ? 'Sidebar' : 'DetailView';\n  const panelAction = shouldOpen ? 'Open' : 'Close';\n  const dataDtName =\n    targetPanel === 'main' ? undefined : `${panelAction}${panelName}`;\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={dataDtName}\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": "AA0HkB;AAzHlB,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,YAAY,gBAAgB,YAAY,YAAY;AAC1D,QAAM,cAAc,aAAa,SAAS;AAC1C,QAAM,aACJ,gBAAgB,SAAS,SAAY,GAAG,WAAW,GAAG,SAAS;AAEjE,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,gBAAc;AAAA,MAEb,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;",
   "names": []
 }