@dynatrace/strato-components 3.13.3 → 3.14.1

package/esm/buttons/notify-button/NotifyButton.spec.js

@@ -0,0 +1,372 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { QueryClient } from "@tanstack/react-query";
+import { screen, waitFor, within } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { createRef, useMemo } from "react";
+import { beforeEach, describe, expect, it } from "vitest";
+import { render } from "@dynatrace/strato-components-testing/vitest";
+import { NotifyButton } from "./NotifyButton.js";
+import { Flex } from "../../layouts/flex/Flex.js";
+import {
+  EventNotificationMock,
+  ResourceNotificationMock
+} from "../../notifications/notification-settings/__tests__/notification-endpoint-mocks.js";
+import { NotificationQueryClientContext } from "../../notifications/notification-settings/hooks/notification-query-client.js";
+import { ToastContainer } from "../../notifications/toast/ToastContainer.js";
+import { Text } from "../../typography/text/Text.js";
+function Wrapper(props) {
+  const queryClient = useMemo(
+    () => new QueryClient({
+      defaultOptions: {
+        queries: {
+          retry: false
+        },
+        mutations: {
+          retry: false
+        }
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(NotificationQueryClientContext.Provider, { value: queryClient, children: props.children });
+}
+const customRender = (ui) => render(ui, { wrapper: Wrapper });
+describe.each([
+  ["resourceNotification", "resource", ResourceNotificationMock],
+  ["eventNotification", "event", EventNotificationMock]
+])("NotificationConfig - %s", (name, type, MockClass) => {
+  const notificationMock = new MockClass();
+  beforeEach(() => {
+    notificationMock.reset();
+    notificationMock.list("empty-notifications");
+    notificationMock.create("working");
+    notificationMock.destroy("working");
+  });
+  it("sets className and style on the icon button", async () => {
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsx(
+        NotifyButton,
+        {
+          className: "test",
+          style: { backgroundColor: "khaki" },
+          type,
+          config: notificationMock.config
+        }
+      )
+    );
+    const iconButton = await screen.findByRole("button");
+    expect(iconButton).toHaveClass("test");
+    expect(iconButton).toHaveStyle("background-color: rgb(240, 230, 140)");
+  });
+  it("provides a ref to the icon button", async () => {
+    const ref = createRef();
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsx(NotifyButton, { ref, type, config: notificationMock.config })
+    );
+    const iconButton = await screen.findByRole("button");
+    expect(iconButton).toEqual(ref.current);
+  });
+  it("should not override the data-dt-component attribute", async () => {
+    const componentName = "NotifyComponent";
+    customRender(/* @__PURE__ */ jsx(NotifyButton, { "data-dt-component": componentName }));
+    const iconButton = await screen.findByRole("button");
+    expect(iconButton).toHaveAttribute("data-dt-component", "NotifyButton");
+  });
+  it("should add data-dt-* attributes to the button", async () => {
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsx(
+        NotifyButton,
+        {
+          "data-dt-content": "tracking",
+          "data-dt-name": "MyNotifyButton",
+          "data-dt-children-name": "NotifyChildren",
+          type,
+          config: notificationMock.config
+        }
+      )
+    );
+    const iconButton = await screen.findByRole("button");
+    expect(iconButton).toHaveAttribute("data-dt-content", "tracking");
+    expect(iconButton).toHaveAttribute("data-dt-name", "MyNotifyButton");
+    expect(iconButton).toHaveAttribute(
+      "data-dt-children-name",
+      "NotifyChildren"
+    );
+  });
+  it("sets aria-label for the icon button", async () => {
+    const label = "My label";
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsx(
+        NotifyButton,
+        {
+          "aria-label": label,
+          type,
+          config: notificationMock.config
+        }
+      )
+    );
+    const iconButton = await screen.findByRole("button", { name: label });
+    expect(iconButton).toBeInTheDocument();
+  });
+  it("should add data-dt-* attributes to NotifyButton.Content in the overlay", async () => {
+    const user = userEvent.setup();
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsx(NotifyButton, { type, config: notificationMock.config, children: /* @__PURE__ */ jsx(
+        NotifyButton.Content,
+        {
+          "data-dt-name": "MyContent",
+          "data-dt-features": "Feature1",
+          "data-dt-properties": "key=value",
+          children: "Custom content"
+        }
+      ) })
+    );
+    const iconButton = await screen.findByRole("button");
+    await user.click(iconButton);
+    const content = document.querySelector('[data-dt-name="MyContent"]');
+    expect(content).not.toBeNull();
+    expect(content).toHaveAttribute("data-dt-features", "Feature1");
+    expect(content).toHaveAttribute("data-dt-properties", "key=value");
+  });
+  it("sets data-dtrum on the icon button element", async () => {
+    customRender(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          NotifyButton,
+          {
+            "data-dtrum-mask": true,
+            "data-dtrum-allow": true,
+            type,
+            config: notificationMock.config,
+            "aria-label": "dtrum"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NotifyButton,
+          {
+            type,
+            config: notificationMock.config,
+            "aria-label": "no dtrum"
+          }
+        )
+      ] })
+    );
+    const dtrum = await screen.findByRole("button", { name: "dtrum" });
+    expect(dtrum).toHaveAttribute("data-dtrum-allow", "true");
+    expect(dtrum).toHaveAttribute("data-dtrum-mask", "true");
+    const noDtrum = await screen.findByRole("button", {
+      name: "no dtrum"
+    });
+    expect(noDtrum).not.toHaveAttribute("data-dtrum-allow", "true");
+    expect(noDtrum).not.toHaveAttribute("data-dtrum-mask", "true");
+  });
+  it("opens an overlay when clicking the icon button", async () => {
+    notificationMock.list("has-notification");
+    const user = userEvent.setup();
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsx(NotifyButton, { type, config: notificationMock.config })
+    );
+    const iconButton = await screen.findByRole("button");
+    expect(iconButton).toBeInTheDocument();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    await user.click(iconButton);
+    const overlay = screen.getByRole("dialog");
+    expect(overlay).toHaveTextContent("Notifications are turned on");
+    expect(overlay).toHaveTextContent(
+      "You'll be notified about updates via email."
+    );
+    expect(overlay).toHaveTextContent("Turn off notifications");
+  });
+  it("customRenders customRenders a button label when showLabel is true", async () => {
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsx(NotifyButton, { type, config: notificationMock.config, showLabel: true })
+    );
+    const button = await screen.findByRole("button");
+    expect(button).toHaveTextContent("Notifications");
+  });
+  it("customRenders NotifyButton.Content within the overlay and discards children without slot", async () => {
+    const user = userEvent.setup();
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsxs(NotifyButton, { type, config: notificationMock.config, children: [
+        /* @__PURE__ */ jsx(NotifyButton.Content, { children: "Test" }),
+        "should not customRender"
+      ] })
+    );
+    const iconButton = await screen.findByRole("button");
+    await user.click(iconButton);
+    expect(screen.getByText("Test")).toBeInTheDocument();
+    expect(
+      screen.queryByText("should not customRender")
+    ).not.toBeInTheDocument();
+  });
+  it("provides access to NotifyButton.Content props", async () => {
+    notificationMock.list("has-notification");
+    const user = userEvent.setup();
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsx(NotifyButton, { type, config: notificationMock.config, children: /* @__PURE__ */ jsx(NotifyButton.Content, { children: ({ disabled, headingText, infoText }) => /* @__PURE__ */ jsx("div", { "data-testid": "custom-customRender", children: /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            "data-testid": "custom-heading",
+            style: disabled ? { color: "red" } : { color: "green" },
+            children: [
+              "TEST: ",
+              headingText
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Text, { children: [
+          "TEST: ",
+          infoText
+        ] })
+      ] }) }) }) })
+    );
+    const iconButton = await screen.findByRole("button");
+    await user.click(iconButton);
+    const customHeading = screen.getByText("TEST: Notifications are turned on");
+    expect(customHeading).toHaveStyle("color: rgb(0, 128, 0)");
+    const customText = screen.getByText(
+      "TEST: You'll be notified about updates via email."
+    );
+    expect(customText).toBeInTheDocument();
+  });
+  it("can turn off notifications", async () => {
+    notificationMock.list("has-notification");
+    const user = userEvent.setup();
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsx(NotifyButton, { type, config: notificationMock.config })
+    );
+    const iconButton = await screen.findByRole("button");
+    await user.click(iconButton);
+    const offButton = screen.getByRole("button", {
+      name: "Turn off notifications"
+    });
+    await user.click(offButton);
+    expect(notificationMock.hasCalled("destroy")).toBe(true);
+  });
+  it("can turn on notifications", async () => {
+    const user = userEvent.setup();
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsx(NotifyButton, { type, config: notificationMock.config })
+    );
+    const iconButton = await screen.findByRole("button");
+    await user.click(iconButton);
+    const onButton = screen.getByRole("button", {
+      name: "Turn on notifications"
+    });
+    await user.click(onButton);
+    expect(notificationMock.hasCalled("create")).toBe(true);
+  });
+  it("shows a toast and closes the overlay when user doesn't have permissions to create the notification", async () => {
+    notificationMock.create("no-write-permission");
+    const user = userEvent.setup();
+    customRender(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(NotifyButton, { type, config: notificationMock.config }),
+        /* @__PURE__ */ jsx(ToastContainer, {})
+      ] })
+    );
+    const iconButton = await screen.findByRole("button");
+    await user.click(iconButton);
+    const overlay = screen.getByRole("dialog");
+    expect(overlay).toHaveTextContent("Notifications are turned off");
+    const onButton = screen.getByRole("button", {
+      name: "Turn on notifications"
+    });
+    await user.click(onButton);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    const toast = screen.getByRole("alert");
+    expect(toast).toHaveTextContent("No permission to turn on notifications");
+    expect(toast).toHaveTextContent(
+      "Copy and share missing permissions with your admin."
+    );
+    expect(
+      within(toast).getByRole("button", { name: "Copy missing permissions" })
+    ).toBeInTheDocument();
+  });
+  it("shows a toast and closes the overlay when user doesn't have permissions to delete the notification", async () => {
+    notificationMock.list("has-notification");
+    notificationMock.destroy("no-write-permission");
+    const user = userEvent.setup();
+    customRender(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(NotifyButton, { type, config: notificationMock.config }),
+        /* @__PURE__ */ jsx(ToastContainer, {})
+      ] })
+    );
+    const iconButton = await screen.findByRole("button");
+    await user.click(iconButton);
+    const overlay = screen.getByRole("dialog");
+    expect(overlay).toHaveTextContent("Notifications are turned on");
+    let onButton;
+    await waitFor(() => {
+      onButton = screen.getByRole("button", {
+        name: "Turn off notifications"
+      });
+    });
+    await user.click(onButton);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    const toast = screen.getByRole("alert");
+    expect(toast).toHaveTextContent("No permission to turn off notifications");
+    expect(toast).toHaveTextContent(
+      "Copy and share missing permissions with your admin."
+    );
+    expect(
+      within(toast).getByRole("button", { name: "Copy missing permissions" })
+    ).toBeInTheDocument();
+  });
+  it("shows a toast and closes the overlay on generic errors", async () => {
+    const user = userEvent.setup();
+    notificationMock.create("server-error");
+    customRender(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(NotifyButton, { type, config: notificationMock.config }),
+        /* @__PURE__ */ jsx(ToastContainer, {})
+      ] })
+    );
+    const iconButton = await screen.findByRole("button");
+    await user.click(iconButton);
+    await user.click(
+      screen.getByRole("button", { name: "Turn on notifications" })
+    );
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(screen.getByRole("alert")).toHaveTextContent(
+      "ErrorSomething went wrong. Please try again later."
+    );
+  });
+  it("disables the on-button and shows info, if user doesn't have read permissions", async () => {
+    notificationMock.list("no-read-permission");
+    const user = userEvent.setup();
+    customRender(
+      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */
+      /* @__PURE__ */ jsx(NotifyButton, { type, config: notificationMock.config })
+    );
+    const iconButton = await screen.findByRole("button");
+    await user.click(iconButton);
+    const onButton = screen.getByRole("button", {
+      name: "Turn on notifications"
+    });
+    expect(onButton).toBeDisabled();
+    const infoButton = screen.getByRole("button", {
+      name: "Open additional information."
+    });
+    await user.click(infoButton);
+    expect(
+      screen.getByRole("dialog", {
+        name: "No permission to turn on notifications Copy and share missing permissions with your admin: notification : notifications : read"
+      })
+    ).toBeInTheDocument();
+  });
+});
+//# sourceMappingURL=NotifyButton.spec.js.map

package/esm/buttons/notify-button/NotifyButton.spec.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/buttons/notify-button/NotifyButton.spec.tsx"],
+  "sourcesContent": ["import { QueryClient } from '@tanstack/react-query';\nimport { screen, waitFor, within } from '@testing-library/react';\nimport { userEvent } from '@testing-library/user-event';\nimport { createRef, useMemo, type PropsWithChildren } from 'react';\nimport { beforeEach, describe, expect, it } from 'vitest';\n\nimport { render } from '@dynatrace/strato-components-testing/vitest';\n\nimport { NotifyButton } from './NotifyButton.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport {\n  EventNotificationMock,\n  ResourceNotificationMock,\n} from '../../notifications/notification-settings/__tests__/notification-endpoint-mocks.js';\nimport { NotificationQueryClientContext } from '../../notifications/notification-settings/hooks/notification-query-client.js';\nimport { ToastContainer } from '../../notifications/toast/ToastContainer.js';\nimport { Text } from '../../typography/text/Text.js';\n\nfunction Wrapper(props: Readonly<PropsWithChildren>) {\n  // Create a new query client for each individual test run in order to avoid pollution\n  // of the query cache from one test to the next.\n  const queryClient = useMemo(\n    () =>\n      new QueryClient({\n        defaultOptions: {\n          queries: {\n            retry: false,\n          },\n          mutations: {\n            retry: false,\n          },\n        },\n      }),\n    [],\n  );\n  return (\n    <NotificationQueryClientContext.Provider value={queryClient}>\n      {props.children}\n    </NotificationQueryClientContext.Provider>\n  );\n}\n\nconst customRender = (ui) => render(ui, { wrapper: Wrapper });\n\ndescribe.each([\n  ['resourceNotification', 'resource', ResourceNotificationMock],\n  ['eventNotification', 'event', EventNotificationMock],\n] as const)('NotificationConfig - %s', (name, type, MockClass) => {\n  const notificationMock = new MockClass();\n  beforeEach(() => {\n    notificationMock.reset();\n    notificationMock.list('empty-notifications');\n    notificationMock.create('working');\n    notificationMock.destroy('working');\n  });\n\n  it('sets className and style on the icon button', async () => {\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton\n        className=\"test\"\n        style={{ backgroundColor: 'khaki' }}\n        type={type}\n        config={notificationMock.config}\n      />,\n    );\n\n    const iconButton = await screen.findByRole('button');\n    expect(iconButton).toHaveClass('test');\n    expect(iconButton).toHaveStyle('background-color: rgb(240, 230, 140)');\n  });\n\n  it('provides a ref to the icon button', async () => {\n    const ref = createRef<HTMLButtonElement>();\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton ref={ref} type={type} config={notificationMock.config} />,\n    );\n\n    const iconButton = await screen.findByRole('button');\n    expect(iconButton).toEqual(ref.current);\n  });\n\n  it('should not override the data-dt-component attribute', async () => {\n    const componentName = 'NotifyComponent';\n    /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n    customRender(<NotifyButton data-dt-component={componentName} />);\n    const iconButton = await screen.findByRole('button');\n    expect(iconButton).toHaveAttribute('data-dt-component', 'NotifyButton');\n  });\n\n  it('should add data-dt-* attributes to the button', async () => {\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton\n        data-dt-content=\"tracking\"\n        data-dt-name=\"MyNotifyButton\"\n        data-dt-children-name=\"NotifyChildren\"\n        type={type}\n        config={notificationMock.config}\n      />,\n    );\n\n    const iconButton = await screen.findByRole('button');\n    expect(iconButton).toHaveAttribute('data-dt-content', 'tracking');\n    expect(iconButton).toHaveAttribute('data-dt-name', 'MyNotifyButton');\n    expect(iconButton).toHaveAttribute(\n      'data-dt-children-name',\n      'NotifyChildren',\n    );\n  });\n\n  it('sets aria-label for the icon button', async () => {\n    const label = 'My label';\n\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton\n        aria-label={label}\n        type={type}\n        config={notificationMock.config}\n      />,\n    );\n\n    const iconButton = await screen.findByRole('button', { name: label });\n    expect(iconButton).toBeInTheDocument();\n  });\n\n  it('should add data-dt-* attributes to NotifyButton.Content in the overlay', async () => {\n    const user = userEvent.setup();\n\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton type={type} config={notificationMock.config}>\n        <NotifyButton.Content\n          data-dt-name=\"MyContent\"\n          data-dt-features=\"Feature1\"\n          data-dt-properties=\"key=value\"\n        >\n          Custom content\n        </NotifyButton.Content>\n      </NotifyButton>,\n    );\n\n    const iconButton = await screen.findByRole('button');\n    await user.click(iconButton);\n\n    const content = document.querySelector('[data-dt-name=\"MyContent\"]');\n    expect(content).not.toBeNull();\n    expect(content).toHaveAttribute('data-dt-features', 'Feature1');\n    expect(content).toHaveAttribute('data-dt-properties', 'key=value');\n  });\n\n  it('sets data-dtrum on the icon button element', async () => {\n    customRender(\n      <>\n        {/* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */}\n        <NotifyButton\n          data-dtrum-mask\n          data-dtrum-allow\n          type={type}\n          config={notificationMock.config}\n          aria-label=\"dtrum\"\n        />\n        {/* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */}\n        <NotifyButton\n          type={type}\n          config={notificationMock.config}\n          aria-label=\"no dtrum\"\n        />\n      </>,\n    );\n\n    const dtrum = await screen.findByRole('button', { name: 'dtrum' });\n    expect(dtrum).toHaveAttribute('data-dtrum-allow', 'true');\n    expect(dtrum).toHaveAttribute('data-dtrum-mask', 'true');\n\n    const noDtrum = await screen.findByRole('button', {\n      name: 'no dtrum',\n    });\n    expect(noDtrum).not.toHaveAttribute('data-dtrum-allow', 'true');\n    expect(noDtrum).not.toHaveAttribute('data-dtrum-mask', 'true');\n  });\n\n  it('opens an overlay when clicking the icon button', async () => {\n    notificationMock.list('has-notification');\n\n    const user = userEvent.setup();\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton type={type} config={notificationMock.config} />,\n    );\n\n    const iconButton = await screen.findByRole('button');\n    expect(iconButton).toBeInTheDocument();\n    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();\n\n    await user.click(iconButton);\n    const overlay = screen.getByRole('dialog');\n\n    expect(overlay).toHaveTextContent('Notifications are turned on');\n    expect(overlay).toHaveTextContent(\n      \"You'll be notified about updates via email.\",\n    );\n    expect(overlay).toHaveTextContent('Turn off notifications');\n  });\n\n  it('customRenders customRenders a button label when showLabel is true', async () => {\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton type={type} config={notificationMock.config} showLabel />,\n    );\n    const button = await screen.findByRole('button');\n    expect(button).toHaveTextContent('Notifications');\n  });\n\n  it('customRenders NotifyButton.Content within the overlay and discards children without slot', async () => {\n    const user = userEvent.setup();\n\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton type={type} config={notificationMock.config}>\n        <NotifyButton.Content>Test</NotifyButton.Content>\n        should not customRender\n      </NotifyButton>,\n    );\n    const iconButton = await screen.findByRole('button');\n    await user.click(iconButton);\n    expect(screen.getByText('Test')).toBeInTheDocument();\n    expect(\n      screen.queryByText('should not customRender'),\n    ).not.toBeInTheDocument();\n  });\n\n  it('provides access to NotifyButton.Content props', async () => {\n    notificationMock.list('has-notification');\n    const user = userEvent.setup();\n\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton type={type} config={notificationMock.config}>\n        <NotifyButton.Content>\n          {({ disabled, headingText, infoText }) => (\n            <div data-testid=\"custom-customRender\">\n              <Flex flexDirection=\"column\">\n                <Text\n                  data-testid=\"custom-heading\"\n                  style={disabled ? { color: 'red' } : { color: 'green' }}\n                >\n                  TEST: {headingText}\n                </Text>\n                <Text>TEST: {infoText}</Text>\n              </Flex>\n            </div>\n          )}\n        </NotifyButton.Content>\n      </NotifyButton>,\n    );\n    const iconButton = await screen.findByRole('button');\n    await user.click(iconButton);\n\n    const customHeading = screen.getByText('TEST: Notifications are turned on');\n    expect(customHeading).toHaveStyle('color: rgb(0, 128, 0)');\n    const customText = screen.getByText(\n      \"TEST: You'll be notified about updates via email.\",\n    );\n    expect(customText).toBeInTheDocument();\n  });\n\n  it('can turn off notifications', async () => {\n    notificationMock.list('has-notification');\n    const user = userEvent.setup();\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton type={type} config={notificationMock.config} />,\n    );\n\n    const iconButton = await screen.findByRole('button');\n    await user.click(iconButton);\n    const offButton = screen.getByRole('button', {\n      name: 'Turn off notifications',\n    });\n    await user.click(offButton);\n\n    expect(notificationMock.hasCalled('destroy')).toBe(true);\n  });\n\n  it('can turn on notifications', async () => {\n    const user = userEvent.setup();\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton type={type} config={notificationMock.config} />,\n    );\n\n    const iconButton = await screen.findByRole('button');\n    await user.click(iconButton);\n    const onButton = screen.getByRole('button', {\n      name: 'Turn on notifications',\n    });\n    await user.click(onButton);\n\n    expect(notificationMock.hasCalled('create')).toBe(true);\n  });\n\n  it(\"shows a toast and closes the overlay when user doesn't have permissions to create the notification\", async () => {\n    notificationMock.create('no-write-permission');\n\n    const user = userEvent.setup();\n\n    customRender(\n      <>\n        {/* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */}\n        <NotifyButton type={type} config={notificationMock.config} />\n        <ToastContainer />\n      </>,\n    );\n\n    const iconButton = await screen.findByRole('button');\n    await user.click(iconButton);\n    const overlay = screen.getByRole('dialog');\n    expect(overlay).toHaveTextContent('Notifications are turned off');\n\n    const onButton = screen.getByRole('button', {\n      name: 'Turn on notifications',\n    });\n\n    await user.click(onButton);\n    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();\n\n    const toast = screen.getByRole('alert');\n    expect(toast).toHaveTextContent('No permission to turn on notifications');\n    expect(toast).toHaveTextContent(\n      'Copy and share missing permissions with your admin.',\n    );\n    expect(\n      within(toast).getByRole('button', { name: 'Copy missing permissions' }),\n    ).toBeInTheDocument();\n  });\n\n  it(\"shows a toast and closes the overlay when user doesn't have permissions to delete the notification\", async () => {\n    notificationMock.list('has-notification');\n    notificationMock.destroy('no-write-permission');\n\n    const user = userEvent.setup();\n\n    customRender(\n      <>\n        {/* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work  */}\n        <NotifyButton type={type} config={notificationMock.config} />\n        <ToastContainer />\n      </>,\n    );\n\n    const iconButton = await screen.findByRole('button');\n    await user.click(iconButton);\n    const overlay = screen.getByRole('dialog');\n    expect(overlay).toHaveTextContent('Notifications are turned on');\n\n    let onButton;\n    // Wait for the query to settle to the correct state before continuing.\n    await waitFor(() => {\n      onButton = screen.getByRole('button', {\n        name: 'Turn off notifications',\n      });\n    });\n\n    await user.click(onButton);\n    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();\n\n    const toast = screen.getByRole('alert');\n    expect(toast).toHaveTextContent('No permission to turn off notifications');\n    expect(toast).toHaveTextContent(\n      'Copy and share missing permissions with your admin.',\n    );\n    expect(\n      within(toast).getByRole('button', { name: 'Copy missing permissions' }),\n    ).toBeInTheDocument();\n  });\n\n  it('shows a toast and closes the overlay on generic errors', async () => {\n    const user = userEvent.setup();\n\n    notificationMock.create('server-error');\n\n    customRender(\n      <>\n        {/* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */}\n        <NotifyButton type={type} config={notificationMock.config} />\n        <ToastContainer />\n      </>,\n    );\n\n    const iconButton = await screen.findByRole('button');\n    await user.click(iconButton);\n    await user.click(\n      screen.getByRole('button', { name: 'Turn on notifications' }),\n    );\n    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();\n    expect(screen.getByRole('alert')).toHaveTextContent(\n      'ErrorSomething went wrong. Please try again later.',\n    );\n  });\n\n  it(\"disables the on-button and shows info, if user doesn't have read permissions\", async () => {\n    notificationMock.list('no-read-permission');\n\n    const user = userEvent.setup();\n    customRender(\n      /* @ts-expect-error Due to the describe each, the type narrowing on the NotificationSettings does not work */\n      <NotifyButton type={type} config={notificationMock.config} />,\n    );\n\n    const iconButton = await screen.findByRole('button');\n    await user.click(iconButton);\n    const onButton = screen.getByRole('button', {\n      name: 'Turn on notifications',\n    });\n    expect(onButton).toBeDisabled();\n    const infoButton = screen.getByRole('button', {\n      name: 'Open additional information.',\n    });\n    await user.click(infoButton);\n    expect(\n      screen.getByRole('dialog', {\n        name: 'No permission to turn on notifications Copy and share missing permissions with your admin: notification : notifications : read',\n      }),\n    ).toBeInTheDocument();\n  });\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/buttons/notify-button/NotifyButton.sty.js

@@ -1,6 +1,6 @@
 import "./NotifyButton.css";
-var overlay = "_1j9pkom0-3-13-3";
-var toast = "_1j9pkom1-3-13-3";
+var overlay = "_1j9pkom0-3-14-1";
+var toast = "_1j9pkom1-3-14-1";
 export {
   overlay,
   toast

package/esm/buttons/notify-button/NotifyButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/notify-button/NotifyButton.css.ts"],
-  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-13-3';\nexport var toast = '_1j9pkom1-3-13-3';"],
+  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-14-1';\nexport var toast = '_1j9pkom1-3-14-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,QAAQ;",
   "names": []
 }

package/esm/buttons/notify-button/components/Content.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/buttons/notify-button/components/Content.tsx"],
-  "sourcesContent": ["import { forwardRef, type ReactNode } from 'react';\n\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { DOMProps } from '../../../core/types/dom.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport { mergeProps } from '../../../core/utils/merge-props.js';\nimport { Content as NotificationSettingsContent } from '../../../notifications/notification-settings/components/Content.js';\n\n//#region Typings\n/** @public */\nexport interface NotifyButtonContentProps\n  extends DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  children?:\n    | (({\n        disabled,\n        headingText,\n        infoText,\n        hasReadPermission,\n        hasWritePermission,\n      }: {\n        disabled: boolean;\n        headingText: string;\n        infoText: string;\n        hasReadPermission: boolean;\n        hasWritePermission: boolean;\n      }) => ReactNode)\n    | ReactNode;\n}\n//#endregion Typings\n\n/**\n * The content of the NotifyButton overlay.\n * @public\n */\nexport const Content = forwardRef<HTMLDivElement, NotifyButtonContentProps>(\n  (props, ref) => {\n    const { children, ...remainingProps } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    return (\n      <NotificationSettingsContent\n        ref={ref}\n        {...mergeProps(restProps, behavioralTrackingProps)}\n      >\n        {children}\n      </NotificationSettingsContent>\n    );\n  },\n);\n\n(Content as typeof Content & { displayName: string }).displayName =\n  'NotifyButton.Content';\n"],
-  "mappings": "AAmDM;AAnDN,SAAS,kBAAkC;AAE3C,SAAS,kCAAkC;AAO3C,SAAS,kBAAkB;AAC3B,SAAS,WAAW,mCAAmC;AAiChD,MAAM,UAAU;AAAA,EACrB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,UAAU,GAAG,eAAe,IAAI;AAExC,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,WAAW,WAAW,uBAAuB;AAAA,QAEhD;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,QAAqD,cACpD;",
+  "sourcesContent": ["import { forwardRef, type ReactNode } from 'react';\n\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { DOMProps } from '../../../core/types/dom.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport { mergeProps } from '../../../core/utils/merge-props.js';\nimport { Content as NotificationSettingsContent } from '../../../notifications/notification-settings/components/Content.js';\n\n//#region Typings\n/** @public */\nexport interface NotifyButtonContentProps\n  extends\n    DOMProps,\n    AriaLabelingProps,\n    StylingProps,\n    MaskingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  children?:\n    | (({\n        disabled,\n        headingText,\n        infoText,\n        hasReadPermission,\n        hasWritePermission,\n      }: {\n        disabled: boolean;\n        headingText: string;\n        infoText: string;\n        hasReadPermission: boolean;\n        hasWritePermission: boolean;\n      }) => ReactNode)\n    | ReactNode;\n}\n//#endregion Typings\n\n/**\n * The content of the NotifyButton overlay.\n * @public\n */\nexport const Content = forwardRef<HTMLDivElement, NotifyButtonContentProps>(\n  (props, ref) => {\n    const { children, ...remainingProps } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    return (\n      <NotificationSettingsContent\n        ref={ref}\n        {...mergeProps(restProps, behavioralTrackingProps)}\n      >\n        {children}\n      </NotificationSettingsContent>\n    );\n  },\n);\n\n(Content as typeof Content & { displayName: string }).displayName =\n  'NotifyButton.Content';\n"],
+  "mappings": "AAoDM;AApDN,SAAS,kBAAkC;AAE3C,SAAS,kCAAkC;AAO3C,SAAS,kBAAkB;AAC3B,SAAS,WAAW,mCAAmC;AAkChD,MAAM,UAAU;AAAA,EACrB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,UAAU,GAAG,eAAe,IAAI;AAExC,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG,WAAW,WAAW,uBAAuB;AAAA,QAEhD;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,QAAqD,cACpD;",
   "names": []
 }

package/esm/buttons/notify-button/components/Content.spec.js

@@ -0,0 +1,88 @@
+import { jsx } from "react/jsx-runtime";
+import { createRef } from "react";
+import { describe, expect, it } from "vitest";
+import { render } from "@dynatrace/strato-components-testing/vitest";
+import { Content } from "./Content.js";
+describe("NotifyButton.Content", () => {
+  it("forwards the ref", () => {
+    const ref = createRef();
+    const { container } = render(/* @__PURE__ */ jsx(Content, { ref }));
+    expect(container.firstChild).toBe(ref.current);
+  });
+  it("forwards DOMProps", () => {
+    const ref = createRef();
+    render(/* @__PURE__ */ jsx(Content, { ref, id: "testid" }));
+    expect(ref.current).toHaveAttribute("id", "testid");
+  });
+  it("forwards AriaLabelingProps aria-label", () => {
+    const ref = createRef();
+    render(/* @__PURE__ */ jsx(Content, { ref, "aria-label": "test-aria-label" }));
+    expect(ref.current).toHaveAttribute("aria-label", "test-aria-label");
+  });
+  it("forwards AriaLabelingProps aria-labelledby", () => {
+    const ref = createRef();
+    render(/* @__PURE__ */ jsx(Content, { ref, "aria-labelledby": "test-aria-labelledby" }));
+    expect(ref.current).toHaveAttribute(
+      "aria-labelledby",
+      "test-aria-labelledby"
+    );
+  });
+  it("forwards AriaLabelingProps aria-describedby", () => {
+    const ref = createRef();
+    render(/* @__PURE__ */ jsx(Content, { ref, "aria-describedby": "test-aria-describedby" }));
+    expect(ref.current).toHaveAttribute(
+      "aria-describedby",
+      "test-aria-describedby"
+    );
+  });
+  it("forwards AriaLabelingProps aria-details", () => {
+    const ref = createRef();
+    render(/* @__PURE__ */ jsx(Content, { ref, "aria-details": "test-aria-details" }));
+    expect(ref.current).toHaveAttribute("aria-details", "test-aria-details");
+  });
+  it("forwards StylingProps className", () => {
+    const ref = createRef();
+    render(/* @__PURE__ */ jsx(Content, { ref, className: "test-classname" }));
+    expect(ref.current).toHaveClass("test-classname");
+  });
+  it("forwards StylingProps style", () => {
+    const ref = createRef();
+    render(/* @__PURE__ */ jsx(Content, { ref, style: { background: "red" } }));
+    expect(ref.current).toHaveStyle("background: red");
+  });
+  it("forwards MaskingProps data-dtrum-mask", () => {
+    const ref = createRef();
+    render(/* @__PURE__ */ jsx(Content, { ref, "data-dtrum-mask": true }));
+    expect(ref.current).toHaveAttribute("data-dtrum-mask");
+  });
+  it("forwards MaskingProps data-dtrum-allow", () => {
+    const ref = createRef();
+    render(/* @__PURE__ */ jsx(Content, { ref, "data-dtrum-allow": true }));
+    expect(ref.current).toHaveAttribute("data-dtrum-allow");
+  });
+  it("forwards DataTestId", () => {
+    const ref = createRef();
+    render(/* @__PURE__ */ jsx(Content, { ref, "data-testid": "test-id" }));
+    expect(ref.current).toHaveAttribute("data-testid", "test-id");
+  });
+  describe("behavior tracking attributes", () => {
+    it("should add data-dt-* attributes to NotifyButton.Content", () => {
+      const ref = createRef();
+      render(
+        /* @__PURE__ */ jsx(
+          Content,
+          {
+            ref,
+            "data-dt-name": "MyContent",
+            "data-dt-features": "Feature1",
+            "data-dt-properties": "key=value"
+          }
+        )
+      );
+      expect(ref.current).toHaveAttribute("data-dt-name", "MyContent");
+      expect(ref.current).toHaveAttribute("data-dt-features", "Feature1");
+      expect(ref.current).toHaveAttribute("data-dt-properties", "key=value");
+    });
+  });
+});
+//# sourceMappingURL=Content.spec.js.map

package/esm/buttons/notify-button/components/Content.spec.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/buttons/notify-button/components/Content.spec.tsx"],
+  "sourcesContent": ["import { createRef } from 'react';\nimport { describe, expect, it } from 'vitest';\n\nimport { render } from '@dynatrace/strato-components-testing/vitest';\n\nimport { Content } from './Content.js';\n\ndescribe('NotifyButton.Content', () => {\n  it('forwards the ref', () => {\n    const ref = createRef<HTMLDivElement>();\n    const { container } = render(<Content ref={ref} />);\n\n    expect(container.firstChild).toBe(ref.current);\n  });\n\n  it('forwards DOMProps', () => {\n    const ref = createRef<HTMLDivElement>();\n    render(<Content ref={ref} id=\"testid\" />);\n\n    expect(ref.current).toHaveAttribute('id', 'testid');\n  });\n\n  it('forwards AriaLabelingProps aria-label', () => {\n    const ref = createRef<HTMLDivElement>();\n    render(<Content ref={ref} aria-label=\"test-aria-label\" />);\n    expect(ref.current).toHaveAttribute('aria-label', 'test-aria-label');\n  });\n\n  it('forwards AriaLabelingProps aria-labelledby', () => {\n    const ref = createRef<HTMLDivElement>();\n    render(<Content ref={ref} aria-labelledby=\"test-aria-labelledby\" />);\n    expect(ref.current).toHaveAttribute(\n      'aria-labelledby',\n      'test-aria-labelledby',\n    );\n  });\n\n  it('forwards AriaLabelingProps aria-describedby', () => {\n    const ref = createRef<HTMLDivElement>();\n    render(<Content ref={ref} aria-describedby=\"test-aria-describedby\" />);\n    expect(ref.current).toHaveAttribute(\n      'aria-describedby',\n      'test-aria-describedby',\n    );\n  });\n\n  it('forwards AriaLabelingProps aria-details', () => {\n    const ref = createRef<HTMLDivElement>();\n    render(<Content ref={ref} aria-details=\"test-aria-details\" />);\n    expect(ref.current).toHaveAttribute('aria-details', 'test-aria-details');\n  });\n\n  it('forwards StylingProps className', () => {\n    const ref = createRef<HTMLDivElement>();\n    render(<Content ref={ref} className=\"test-classname\" />);\n    expect(ref.current).toHaveClass('test-classname');\n  });\n\n  it('forwards StylingProps style', () => {\n    const ref = createRef<HTMLDivElement>();\n    render(<Content ref={ref} style={{ background: 'red' }} />);\n    expect(ref.current).toHaveStyle('background: red');\n  });\n\n  it('forwards MaskingProps data-dtrum-mask', () => {\n    const ref = createRef<HTMLDivElement>();\n    render(<Content ref={ref} data-dtrum-mask />);\n    expect(ref.current).toHaveAttribute('data-dtrum-mask');\n  });\n\n  it('forwards MaskingProps data-dtrum-allow', () => {\n    const ref = createRef<HTMLDivElement>();\n    render(<Content ref={ref} data-dtrum-allow />);\n    expect(ref.current).toHaveAttribute('data-dtrum-allow');\n  });\n\n  it('forwards DataTestId', () => {\n    const ref = createRef<HTMLDivElement>();\n    render(<Content ref={ref} data-testid=\"test-id\" />);\n    expect(ref.current).toHaveAttribute('data-testid', 'test-id');\n  });\n\n  describe('behavior tracking attributes', () => {\n    it('should add data-dt-* attributes to NotifyButton.Content', () => {\n      const ref = createRef<HTMLDivElement>();\n      render(\n        <Content\n          ref={ref}\n          data-dt-name=\"MyContent\"\n          data-dt-features=\"Feature1\"\n          data-dt-properties=\"key=value\"\n        />,\n      );\n\n      expect(ref.current).toHaveAttribute('data-dt-name', 'MyContent');\n      expect(ref.current).toHaveAttribute('data-dt-features', 'Feature1');\n      expect(ref.current).toHaveAttribute('data-dt-properties', 'key=value');\n    });\n  });\n});\n"],
+  "mappings": "AAUiC;AAVjC,SAAS,iBAAiB;AAC1B,SAAS,UAAU,QAAQ,UAAU;AAErC,SAAS,cAAc;AAEvB,SAAS,eAAe;AAExB,SAAS,wBAAwB,MAAM;AACrC,KAAG,oBAAoB,MAAM;AAC3B,UAAM,MAAM,UAA0B;AACtC,UAAM,EAAE,UAAU,IAAI,OAAO,oBAAC,WAAQ,KAAU,CAAE;AAElD,WAAO,UAAU,UAAU,EAAE,KAAK,IAAI,OAAO;AAAA,EAC/C,CAAC;AAED,KAAG,qBAAqB,MAAM;AAC5B,UAAM,MAAM,UAA0B;AACtC,WAAO,oBAAC,WAAQ,KAAU,IAAG,UAAS,CAAE;AAExC,WAAO,IAAI,OAAO,EAAE,gBAAgB,MAAM,QAAQ;AAAA,EACpD,CAAC;AAED,KAAG,yCAAyC,MAAM;AAChD,UAAM,MAAM,UAA0B;AACtC,WAAO,oBAAC,WAAQ,KAAU,cAAW,mBAAkB,CAAE;AACzD,WAAO,IAAI,OAAO,EAAE,gBAAgB,cAAc,iBAAiB;AAAA,EACrE,CAAC;AAED,KAAG,8CAA8C,MAAM;AACrD,UAAM,MAAM,UAA0B;AACtC,WAAO,oBAAC,WAAQ,KAAU,mBAAgB,wBAAuB,CAAE;AACnE,WAAO,IAAI,OAAO,EAAE;AAAA,MAClB;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,KAAG,+CAA+C,MAAM;AACtD,UAAM,MAAM,UAA0B;AACtC,WAAO,oBAAC,WAAQ,KAAU,oBAAiB,yBAAwB,CAAE;AACrE,WAAO,IAAI,OAAO,EAAE;AAAA,MAClB;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,KAAG,2CAA2C,MAAM;AAClD,UAAM,MAAM,UAA0B;AACtC,WAAO,oBAAC,WAAQ,KAAU,gBAAa,qBAAoB,CAAE;AAC7D,WAAO,IAAI,OAAO,EAAE,gBAAgB,gBAAgB,mBAAmB;AAAA,EACzE,CAAC;AAED,KAAG,mCAAmC,MAAM;AAC1C,UAAM,MAAM,UAA0B;AACtC,WAAO,oBAAC,WAAQ,KAAU,WAAU,kBAAiB,CAAE;AACvD,WAAO,IAAI,OAAO,EAAE,YAAY,gBAAgB;AAAA,EAClD,CAAC;AAED,KAAG,+BAA+B,MAAM;AACtC,UAAM,MAAM,UAA0B;AACtC,WAAO,oBAAC,WAAQ,KAAU,OAAO,EAAE,YAAY,MAAM,GAAG,CAAE;AAC1D,WAAO,IAAI,OAAO,EAAE,YAAY,iBAAiB;AAAA,EACnD,CAAC;AAED,KAAG,yCAAyC,MAAM;AAChD,UAAM,MAAM,UAA0B;AACtC,WAAO,oBAAC,WAAQ,KAAU,mBAAe,MAAC,CAAE;AAC5C,WAAO,IAAI,OAAO,EAAE,gBAAgB,iBAAiB;AAAA,EACvD,CAAC;AAED,KAAG,0CAA0C,MAAM;AACjD,UAAM,MAAM,UAA0B;AACtC,WAAO,oBAAC,WAAQ,KAAU,oBAAgB,MAAC,CAAE;AAC7C,WAAO,IAAI,OAAO,EAAE,gBAAgB,kBAAkB;AAAA,EACxD,CAAC;AAED,KAAG,uBAAuB,MAAM;AAC9B,UAAM,MAAM,UAA0B;AACtC,WAAO,oBAAC,WAAQ,KAAU,eAAY,WAAU,CAAE;AAClD,WAAO,IAAI,OAAO,EAAE,gBAAgB,eAAe,SAAS;AAAA,EAC9D,CAAC;AAED,WAAS,gCAAgC,MAAM;AAC7C,OAAG,2DAA2D,MAAM;AAClE,YAAM,MAAM,UAA0B;AACtC;AAAA,QACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,gBAAa;AAAA,YACb,oBAAiB;AAAA,YACjB,sBAAmB;AAAA;AAAA,QACrB;AAAA,MACF;AAEA,aAAO,IAAI,OAAO,EAAE,gBAAgB,gBAAgB,WAAW;AAC/D,aAAO,IAAI,OAAO,EAAE,gBAAgB,oBAAoB,UAAU;AAClE,aAAO,IAAI,OAAO,EAAE,gBAAgB,sBAAsB,WAAW;AAAA,IACvE,CAAC;AAAA,EACH,CAAC;AACH,CAAC;",
+  "names": []
+}

package/esm/buttons/run-query-button/RunQueryButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/run-query-button/RunQueryButton.tsx"],
-  "sourcesContent": ["import { forwardRef, type MouseEventHandler, type ReactElement } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { CriticalIcon, PlayIcon } from '@dynatrace/strato-icons';\n\nimport { ProgressCircle } from '../../content/progress/ProgressCircle.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Button } from '../button/Button.js';\n\nconst COMPONENT_NAME = 'RunQueryButton';\n\n//#region Typings\n/**\n * All options available for the RunQueryButton's state.\n * @public\n */\nexport const queryStateOptions = [\n  'idle',\n  'loading',\n  'success',\n  'error',\n] as const;\n\n/**\n * 1. idle: The query is yet to be run.\n * 2. loading: The query is currently running.\n * 3. success: The query can be rerun again (Query was successful and no errors have occurred).\n * 4. error: The query has returned an error, user can retry.\n * @public\n */\nexport type QueryStateType = (typeof queryStateOptions)[number];\n\n/**\n * @public\n */\nexport interface RunQueryButtonProps\n  extends AriaLabelingProps,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** When the run query button is disabled it cannot be interacted with.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The current button state.\n   * @defaultValue idle\n   */\n  queryState?: QueryStateType;\n\n  /** Callback triggered when the RunQueryButton is interacted with. */\n  onClick?: MouseEventHandler;\n\n  /**\n   * Whether the run query button is cancelable, i.e., if the loading\n   * state can be interrupted.\n   * @defaultValue true\n   */\n  cancelable?: boolean;\n}\n//#endregion\n\n/**\n * @param queryState -\n * @returns the correct variant based on the state of the RunQueryButton\n */\nfunction getVariant(\n  queryState: QueryStateType,\n): ['default', 'emphasized', 'accent'][number] {\n  switch (queryState) {\n    case 'idle':\n      return 'accent';\n    case 'loading':\n    case 'success':\n    case 'error':\n      return 'emphasized';\n  }\n}\n\n/**\n * @param queryState -\n * @returns the correct variant based on the state of the RunQueryButton\n */\nfunction getColor(\n  queryState: QueryStateType,\n): ['primary', 'neutral', 'success', 'warning', 'critical'][number] {\n  switch (queryState) {\n    case 'idle':\n      return 'primary';\n    case 'loading':\n    case 'success':\n      return 'neutral';\n    case 'error':\n      return 'critical';\n  }\n}\n\n/**\n * Component version of the correct prefix icon to be used in the\n * RunQueryButton based on its state.\n */\nfunction PrefixIcon({\n  type,\n}: Readonly<{ type: QueryStateType }>): ReactElement | null {\n  switch (type) {\n    case 'idle':\n    case 'success':\n      return <PlayIcon />;\n    case 'loading':\n      return <ProgressCircle size=\"small\" aria-hidden />;\n    case 'error':\n      return <CriticalIcon />;\n  }\n}\n\ntype RunQueryButtonMessageProps = {\n  type: QueryStateType;\n  cancelable: boolean;\n};\n\n/**\n * Component for the button label based on the query state.\n */\nfunction ButtonMessage(\n  props: Readonly<RunQueryButtonMessageProps>,\n): ReactElement | null {\n  const { type, cancelable } = props;\n\n  switch (type) {\n    case 'idle':\n      return (\n        <FormattedMessage\n          description=\"Label for button used to run a query\"\n          defaultMessage=\"Run query\"\n          id=\"CwGi8xbTtV+fdsu5\"\n        />\n      );\n    case 'success':\n      return (\n        <FormattedMessage\n          description=\"Label for button used to rerun a query after it was successful\"\n          defaultMessage=\"Run query\"\n          id=\"J9M12SSZNn2dKokI\"\n        />\n      );\n    case 'loading':\n      return cancelable ? (\n        <FormattedMessage\n          description=\"Call to action for cancelable query button\"\n          defaultMessage=\"Cancel query\"\n          id=\"Za5bQfBDnyyur0mw\"\n        />\n      ) : (\n        <FormattedMessage\n          description=\"Label for button indicating that a query is loading\"\n          defaultMessage=\"Running\"\n          id=\"hi3IodOo0ygpihhY\"\n        />\n      );\n    case 'error':\n      return (\n        <FormattedMessage\n          description=\"Label for button indicating that an error has occurred while running the query. Click to retry.\"\n          defaultMessage=\"Error (click to retry)\"\n          id=\"gg76gjIy5leuPbMT\"\n        />\n      );\n  }\n}\n\n/**\n * This button component is used for running queries. It\n * supports four query states: idle, loading, success, and error.\n * @public\n */\nexport const RunQueryButton = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  RunQueryButtonProps\n>((props, ref) => {\n  const {\n    queryState = 'idle',\n    disabled = false,\n    onClick,\n    cancelable = true,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RunQueryButtonProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const allowsClickHandler =\n    queryState !== 'loading' || (queryState === 'loading' && cancelable);\n\n  return (\n    <Button\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      onClick={allowsClickHandler ? onClick : undefined}\n      color={getColor(queryState)}\n      variant={getVariant(queryState)}\n      ref={ref}\n      disabled={disabled}\n      aria-busy={queryState === 'loading'}\n      aria-disabled={queryState === 'loading' && !cancelable}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <Button.Prefix>\n        <PrefixIcon type={queryState} />\n      </Button.Prefix>\n      <span role=\"status\">\n        <ButtonMessage type={queryState} cancelable={cancelable} />\n      </span>\n    </Button>\n  );\n});\n\n(\n  RunQueryButton as typeof RunQueryButton & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type MouseEventHandler, type ReactElement } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { CriticalIcon, PlayIcon } from '@dynatrace/strato-icons';\n\nimport { ProgressCircle } from '../../content/progress/ProgressCircle.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { Button } from '../button/Button.js';\n\nconst COMPONENT_NAME = 'RunQueryButton';\n\n//#region Typings\n/**\n * All options available for the RunQueryButton's state.\n * @public\n */\nexport const queryStateOptions = [\n  'idle',\n  'loading',\n  'success',\n  'error',\n] as const;\n\n/**\n * 1. idle: The query is yet to be run.\n * 2. loading: The query is currently running.\n * 3. success: The query can be rerun again (Query was successful and no errors have occurred).\n * 4. error: The query has returned an error, user can retry.\n * @public\n */\nexport type QueryStateType = (typeof queryStateOptions)[number];\n\n/**\n * @public\n */\nexport interface RunQueryButtonProps\n  extends\n    AriaLabelingProps,\n    DOMProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** When the run query button is disabled it cannot be interacted with.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The current button state.\n   * @defaultValue idle\n   */\n  queryState?: QueryStateType;\n\n  /** Callback triggered when the RunQueryButton is interacted with. */\n  onClick?: MouseEventHandler;\n\n  /**\n   * Whether the run query button is cancelable, i.e., if the loading\n   * state can be interrupted.\n   * @defaultValue true\n   */\n  cancelable?: boolean;\n}\n//#endregion\n\n/**\n * @param queryState -\n * @returns the correct variant based on the state of the RunQueryButton\n */\nfunction getVariant(\n  queryState: QueryStateType,\n): ['default', 'emphasized', 'accent'][number] {\n  switch (queryState) {\n    case 'idle':\n      return 'accent';\n    case 'loading':\n    case 'success':\n    case 'error':\n      return 'emphasized';\n  }\n}\n\n/**\n * @param queryState -\n * @returns the correct variant based on the state of the RunQueryButton\n */\nfunction getColor(\n  queryState: QueryStateType,\n): ['primary', 'neutral', 'success', 'warning', 'critical'][number] {\n  switch (queryState) {\n    case 'idle':\n      return 'primary';\n    case 'loading':\n    case 'success':\n      return 'neutral';\n    case 'error':\n      return 'critical';\n  }\n}\n\n/**\n * Component version of the correct prefix icon to be used in the\n * RunQueryButton based on its state.\n */\nfunction PrefixIcon({\n  type,\n}: Readonly<{ type: QueryStateType }>): ReactElement | null {\n  switch (type) {\n    case 'idle':\n    case 'success':\n      return <PlayIcon />;\n    case 'loading':\n      return <ProgressCircle size=\"small\" aria-hidden />;\n    case 'error':\n      return <CriticalIcon />;\n  }\n}\n\ntype RunQueryButtonMessageProps = {\n  type: QueryStateType;\n  cancelable: boolean;\n};\n\n/**\n * Component for the button label based on the query state.\n */\nfunction ButtonMessage(\n  props: Readonly<RunQueryButtonMessageProps>,\n): ReactElement | null {\n  const { type, cancelable } = props;\n\n  switch (type) {\n    case 'idle':\n      return (\n        <FormattedMessage\n          description=\"Label for button used to run a query\"\n          defaultMessage=\"Run query\"\n          id=\"CwGi8xbTtV+fdsu5\"\n        />\n      );\n    case 'success':\n      return (\n        <FormattedMessage\n          description=\"Label for button used to rerun a query after it was successful\"\n          defaultMessage=\"Run query\"\n          id=\"J9M12SSZNn2dKokI\"\n        />\n      );\n    case 'loading':\n      return cancelable ? (\n        <FormattedMessage\n          description=\"Call to action for cancelable query button\"\n          defaultMessage=\"Cancel query\"\n          id=\"Za5bQfBDnyyur0mw\"\n        />\n      ) : (\n        <FormattedMessage\n          description=\"Label for button indicating that a query is loading\"\n          defaultMessage=\"Running\"\n          id=\"hi3IodOo0ygpihhY\"\n        />\n      );\n    case 'error':\n      return (\n        <FormattedMessage\n          description=\"Label for button indicating that an error has occurred while running the query. Click to retry.\"\n          defaultMessage=\"Error (click to retry)\"\n          id=\"gg76gjIy5leuPbMT\"\n        />\n      );\n  }\n}\n\n/**\n * This button component is used for running queries. It\n * supports four query states: idle, loading, success, and error.\n * @public\n */\nexport const RunQueryButton = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  RunQueryButtonProps\n>((props, ref) => {\n  const {\n    queryState = 'idle',\n    disabled = false,\n    onClick,\n    cancelable = true,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RunQueryButtonProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const allowsClickHandler =\n    queryState !== 'loading' || (queryState === 'loading' && cancelable);\n\n  return (\n    <Button\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      onClick={allowsClickHandler ? onClick : undefined}\n      color={getColor(queryState)}\n      variant={getVariant(queryState)}\n      ref={ref}\n      disabled={disabled}\n      aria-busy={queryState === 'loading'}\n      aria-disabled={queryState === 'loading' && !cancelable}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <Button.Prefix>\n        <PrefixIcon type={queryState} />\n      </Button.Prefix>\n      <span role=\"status\">\n        <ButtonMessage type={queryState} cancelable={cancelable} />\n      </span>\n    </Button>\n  );\n});\n\n(\n  RunQueryButton as typeof RunQueryButton & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }