@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/navigation/tabs/Tabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/Tabs.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type Key,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from '@dynatrace/strato-icons';\n\nimport { RenderTab } from './RenderTab.js';\nimport { Tab, type TabProps } from './Tab.js';\nimport { TabPanel } from './TabPanel.js';\nimport {\n  tabsArrowButtonCSS,\n  tabsArrowWrapperCSS,\n  tabsCSS,\n  tabsWrapperCSS,\n  tabsWrapperOverflowCSS,\n} from './Tabs.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useRovingFocus } from '../../core/hooks/useRovingFocus.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\n// #region Types\n/**\n * @public\n */\nexport interface TabsBaseProps extends StylingProps, DataTestId, MaskingProps {\n  /**\n   * Whether the whole tab group is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */\n  id?: string;\n  /** The collection of tabs to display. */\n  children: ReactNode;\n  /** The overflow behavior of the tab panel. */\n  panelOverflow?: 'hidden' | 'scroll-y';\n}\n\n/**\n * @public\n */\nexport type TabsProps = TabsBaseProps &\n  (TabsControlledProps | TabsUncontrolledProps);\n\n/**\n * @public\n */\nexport interface TabsUncontrolledProps {\n  /** The index of the selected tab. */\n  selectedIndex?: never;\n  /** The default index of the selected tab. */\n  defaultIndex?: number;\n  /** Handler that is called when the selected tab changes. */\n  onChange?: never;\n}\n\n/**\n * @public\n */\nexport interface TabsControlledProps {\n  /** The index of the selected tab. */\n  selectedIndex: number;\n  /** Handler that is called when the selected tab changes. */\n  onChange: (selectedIndex: number) => void;\n  /** The default index of the selected tab. */\n  defaultIndex?: never;\n}\n// #endregion\n\n/**\n * Tabs organize related content by grouping similar information into views or\n * tab panels that are displayed one at a time.\n * @public\n */\nexport const Tabs = /* @__PURE__ */ forwardRef<HTMLDivElement, TabsProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: disabledTabsProp = false,\n      selectedIndex: selectedIndexProp,\n      defaultIndex: defaultIndexProp,\n      onChange: onChangeProp,\n      children,\n      panelOverflow = 'hidden',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const intl = useIntl();\n\n    const generatedId = useId();\n    const tabsUniqueId = props.id ?? generatedId;\n    const tabsListId = useId();\n\n    const childrenArray: ReactElement<TabProps>[] = useMemo(() => {\n      return (\n        Children.map(children, (child, i) => {\n          if (isSlot(child, Tab)) {\n            return cloneElement(child, {\n              key: `${tabsUniqueId}-tab-${i}`,\n            });\n          } else if (isElement(child) && isDev()) {\n            // eslint-disable-next-line no-console\n            console.warn('Only Tab is a valid child of the Tabs component.');\n          }\n        }) || []\n      );\n    }, [children, tabsUniqueId]);\n\n    // Get disabled keys from the children.\n    // We handle the disabled keys on our own and not through the react-aria tablist.\n    const tabsInfo = useMemo(() => {\n      return childrenArray.reduce<{\n        disabled: Set<Key>;\n        keepMounted: Set<Key>;\n        consumerIds: Record<string, string>;\n      }>(\n        (aggr, item) => {\n          if (item.props.id && item.key) {\n            aggr.consumerIds[item.key] = item.props.id;\n          }\n          if (item.props.disabled && item.key !== null) {\n            aggr.disabled.add(item.key);\n          }\n          if (item.props.keepMounted && item.key !== null) {\n            aggr.keepMounted.add(item.key);\n          }\n          return aggr;\n        },\n        {\n          disabled: new Set(),\n          keepMounted: new Set(),\n          consumerIds: {},\n        },\n      );\n    }, [childrenArray]);\n\n    const [selectedIndex, setSelectedIndex] = useControllableState({\n      defaultValue: defaultIndexProp ?? 0,\n      value: selectedIndexProp,\n      onChange: onChangeProp,\n    });\n\n    const ref = useRef<HTMLDivElement>(null);\n    const { containerRef } = useRovingFocus<HTMLDivElement>({\n      direction: 'both',\n      focusableChildrenSelector: '[type=\"button\"],[role=\"tab\"]',\n      initialIndex: selectedIndex,\n    });\n\n    const rootRef = useMergeRefs([ref, containerRef]);\n\n    // handle overflow and show/hide arrows\n    const [isOverflowingLeft, setIsOverflowingLeft] = useState(false);\n    const [isOverflowingRight, setIsOverflowingRight] = useState(false);\n\n    const slideTabsLeft = (): void => {\n      ref.current?.scrollBy({\n        left: -ref.current.offsetWidth / 2,\n        behavior: 'smooth',\n      });\n    };\n\n    const slideTabsRight = (): void => {\n      ref.current?.scrollBy({\n        left: ref.current.offsetWidth / 2,\n        behavior: 'smooth',\n      });\n    };\n\n    const updateOverflow = useCallback(() => {\n      if (ref.current) {\n        const tabsWidth = ref.current.offsetWidth;\n        const tabsScrollWidth = ref.current.scrollWidth;\n        const scrollDiff = tabsScrollWidth - tabsWidth;\n        const tabsScrollLeft = Math.ceil(ref.current.scrollLeft);\n        setIsOverflowingRight(\n          tabsScrollWidth > tabsWidth && tabsScrollLeft < scrollDiff,\n        );\n        setIsOverflowingLeft(\n          tabsScrollWidth > tabsWidth && tabsScrollLeft !== 0,\n        );\n      }\n    }, []);\n\n    const { width: containerWidth, height: containerHeight } =\n      useResizeObserver<HTMLDivElement>({\n        ref: ref.current,\n      });\n\n    useLayoutEffect(() => {\n      updateOverflow();\n    }, [containerWidth, containerHeight, updateOverflow]);\n\n    // Get the children relevant to the selected tab\n    const getSelectedTabContent = (\n      key: Key | null,\n      childrenArray: ReactElement<TabProps>[],\n    ): ReactNode | null => {\n      const tab = childrenArray.find((child) => child.key === key);\n      if (tab?.props?.children) {\n        return tab.props.children;\n      }\n      return null;\n    };\n\n    const getTabPanelId = (\n      key: Key | null,\n      options?: { isSelected?: boolean; keepMounted?: boolean },\n    ): string | undefined => {\n      if (!options || options.keepMounted) {\n        return key !== null ? `${key}-tabPanel` : undefined;\n      }\n\n      return key !== null && options.isSelected ? `${key}-tabPanel` : undefined;\n    };\n    // Memoize the tab panel for the selected tab to prevent unnecessary re-renders caused by the Tabs component re-rendering\n    const MemoizedSelectedTabPanel = useMemo(\n      () =>\n        childrenArray.map((child, index) => {\n          const isSelected = index === selectedIndex;\n          const childKey = child.key;\n\n          if (\n            childKey !== null &&\n            (tabsInfo.keepMounted.has(childKey) || isSelected)\n          ) {\n            return (\n              <TabPanel\n                key={childKey}\n                style={{\n                  display: !isSelected ? 'none' : '',\n                }}\n                id={getTabPanelId(childKey)}\n                disabled={disabledTabsProp || tabsInfo.disabled.has(childKey)}\n                panelOverflow={panelOverflow}\n                aria-labelledby={tabsInfo.consumerIds[childKey] || childKey}\n              >\n                {getSelectedTabContent(childKey, childrenArray)}\n              </TabPanel>\n            );\n          }\n          return null;\n        }),\n      [childrenArray, disabledTabsProp, panelOverflow, selectedIndex, tabsInfo],\n    );\n\n    const handleKeyDown = useCallback(\n      (event: ReactKeyboardEvent) => {\n        const selectNextTab = () => {\n          setSelectedIndex((curr) =>\n            curr + 1 > childrenArray.length - 1 ? 0 : curr + 1,\n          );\n        };\n\n        const selectPrevTab = () => {\n          setSelectedIndex((curr) =>\n            curr - 1 < 0 ? childrenArray.length - 1 : curr - 1,\n          );\n        };\n\n        if (['ArrowRight', 'ArrowDown'].includes(event.code)) {\n          selectNextTab();\n        }\n\n        if (['ArrowLeft', 'ArrowUp'].includes(event.code)) {\n          selectPrevTab();\n        }\n      },\n      [setSelectedIndex, childrenArray.length],\n    );\n\n    // Memoize the Tab list to prevent unnecessary re-renders to the Tab list caused by the Tabs component re-rendering\n    const MemoizedTabsList = useMemo(() => {\n      return childrenArray.map((item, index) => (\n        <RenderTab\n          key={item.key}\n          tabItem={item}\n          isSelected={\n            selectedIndex === index && !item.props.disabled && !disabledTabsProp\n          }\n          isDisabled={item.props.disabled || disabledTabsProp}\n          onActivate={() => {\n            setSelectedIndex(index);\n          }}\n          onKeyDown={handleKeyDown}\n          ariaControls={getTabPanelId(item.key, {\n            keepMounted: item.props.keepMounted,\n            isSelected:\n              selectedIndex === index &&\n              !item.props.disabled &&\n              !disabledTabsProp,\n          })}\n        />\n      ));\n    }, [\n      childrenArray,\n      selectedIndex,\n      disabledTabsProp,\n      setSelectedIndex,\n      handleKeyDown,\n    ]);\n\n    return (\n      <div\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(tabsCSS, consumerClassName)}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        <div className={tabsArrowWrapperCSS}>\n          {isOverflowingLeft && (\n            <Button\n              className={tabsArrowButtonCSS}\n              style={{ left: 0 }}\n              variant=\"default\"\n              onClick={slideTabsLeft}\n              aria-label={intl.formatMessage({\n                defaultMessage: 'scroll tabs left',\n                id: 'Cv2AP7VKybeuopCP',\n                description: 'Aria label to scroll the tabs to the left',\n              })}\n              aria-controls={tabsListId}\n            >\n              <Button.Prefix>\n                <ChevronLeftIcon />\n              </Button.Prefix>\n            </Button>\n          )}\n          <div\n            className={clsx(tabsWrapperCSS, {\n              [tabsWrapperOverflowCSS.left]:\n                isOverflowingLeft && !isOverflowingRight,\n              [tabsWrapperOverflowCSS.right]:\n                !isOverflowingLeft && isOverflowingRight,\n              [tabsWrapperOverflowCSS.both]:\n                isOverflowingLeft && isOverflowingRight,\n            })}\n            role=\"tablist\"\n            aria-orientation=\"horizontal\"\n            id={tabsListId}\n            ref={rootRef}\n            tabIndex={-1}\n            onScroll={updateOverflow}\n          >\n            {MemoizedTabsList}\n          </div>\n          {isOverflowingRight && (\n            <Button\n              className={tabsArrowButtonCSS}\n              style={{ right: 0 }}\n              onClick={slideTabsRight}\n              aria-label={intl.formatMessage({\n                defaultMessage: 'scroll tabs right',\n                id: '2YBMATuaXx9/4zBP',\n                description: 'Aria label to scroll the tabs to the right',\n              })}\n              aria-controls={tabsListId}\n            >\n              <Button.Suffix>\n                <ChevronRightIcon />\n              </Button.Suffix>\n            </Button>\n          )}\n        </div>\n        {MemoizedSelectedTabPanel}\n      </div>\n    );\n  },\n);\n(Tabs as typeof Tabs & { displayName: string }).displayName = 'Tabs';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  type Key,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { ChevronLeftIcon, ChevronRightIcon } from '@dynatrace/strato-icons';\n\nimport { RenderTab } from './RenderTab.js';\nimport { Tab, type TabProps } from './Tab.js';\nimport { TabPanel } from './TabPanel.js';\nimport {\n  tabsArrowButtonCSS,\n  tabsArrowWrapperCSS,\n  tabsCSS,\n  tabsWrapperCSS,\n  tabsWrapperOverflowCSS,\n} from './Tabs.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useRovingFocus } from '../../core/hooks/useRovingFocus.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\n\nconst COMPONENT_NAME = 'Tab';\n\n// #region Types\n/**\n * @public\n */\nexport interface TabsBaseProps extends StylingProps, DataTestId, MaskingProps {\n  /**\n   * Whether the whole tab group is disabled.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */\n  id?: string;\n  /** The collection of tabs to display. */\n  children: ReactNode;\n  /** The overflow behavior of the tab panel. */\n  panelOverflow?: 'hidden' | 'scroll-y';\n}\n\n/**\n * @public\n */\nexport type TabsProps = TabsBaseProps &\n  (TabsControlledProps | TabsUncontrolledProps);\n\n/**\n * @public\n */\nexport interface TabsUncontrolledProps {\n  /** The index of the selected tab. */\n  selectedIndex?: never;\n  /** The default index of the selected tab. */\n  defaultIndex?: number;\n  /** Handler that is called when the selected tab changes. */\n  onChange?: never;\n}\n\n/**\n * @public\n */\nexport interface TabsControlledProps {\n  /** The index of the selected tab. */\n  selectedIndex: number;\n  /** Handler that is called when the selected tab changes. */\n  onChange: (selectedIndex: number) => void;\n  /** The default index of the selected tab. */\n  defaultIndex?: never;\n}\n// #endregion\n\n/**\n * Tabs organize related content by grouping similar information into views or\n * tab panels that are displayed one at a time.\n * @public\n */\nexport const Tabs = /* @__PURE__ */ forwardRef<HTMLDivElement, TabsProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: disabledTabsProp = false,\n      selectedIndex: selectedIndexProp,\n      defaultIndex: defaultIndexProp,\n      onChange: onChangeProp,\n      children,\n      panelOverflow = 'hidden',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const intl = useIntl();\n\n    const generatedId = useId();\n    const tabsUniqueId = props.id ?? generatedId;\n    const tabsListId = useId();\n\n    const childrenArray: ReactElement<TabProps>[] = useMemo(() => {\n      return (\n        Children.map(children, (child, i) => {\n          if (isSlot(child, Tab)) {\n            return cloneElement(child, {\n              key: `${tabsUniqueId}-tab-${i}`,\n            });\n          } else if (isElement(child) && isDev()) {\n            // eslint-disable-next-line no-console\n            console.warn('Only Tab is a valid child of the Tabs component.');\n          }\n        }) || []\n      );\n    }, [children, tabsUniqueId]);\n\n    // Get disabled keys from the children.\n    // We handle the disabled keys on our own and not through the react-aria tablist.\n    const tabsInfo = useMemo(() => {\n      return childrenArray.reduce<{\n        disabled: Set<Key>;\n        keepMounted: Set<Key>;\n        consumerIds: Record<string, string>;\n      }>(\n        (aggr, item) => {\n          if (item.props.id && item.key) {\n            aggr.consumerIds[item.key] = item.props.id;\n          }\n          if (item.props.disabled && item.key !== null) {\n            aggr.disabled.add(item.key);\n          }\n          if (item.props.keepMounted && item.key !== null) {\n            aggr.keepMounted.add(item.key);\n          }\n          return aggr;\n        },\n        {\n          disabled: new Set(),\n          keepMounted: new Set(),\n          consumerIds: {},\n        },\n      );\n    }, [childrenArray]);\n\n    const [selectedIndex, setSelectedIndex] = useControllableState({\n      defaultValue: defaultIndexProp ?? 0,\n      value: selectedIndexProp,\n      onChange: onChangeProp,\n    });\n\n    const ref = useRef<HTMLDivElement>(null);\n    const { containerRef } = useRovingFocus<HTMLDivElement>({\n      direction: 'both',\n      focusableChildrenSelector: '[type=\"button\"],[role=\"tab\"]',\n      initialIndex: selectedIndex,\n    });\n\n    const rootRef = useMergeRefs([ref, containerRef]);\n\n    // handle overflow and show/hide arrows\n    const [isOverflowingLeft, setIsOverflowingLeft] = useState(false);\n    const [isOverflowingRight, setIsOverflowingRight] = useState(false);\n\n    const slideTabsLeft = (): void => {\n      ref.current?.scrollBy({\n        left: -ref.current.offsetWidth / 2,\n        behavior: 'smooth',\n      });\n    };\n\n    const slideTabsRight = (): void => {\n      ref.current?.scrollBy({\n        left: ref.current.offsetWidth / 2,\n        behavior: 'smooth',\n      });\n    };\n\n    const updateOverflow = useCallback(() => {\n      if (ref.current) {\n        const tabsWidth = ref.current.offsetWidth;\n        const tabsScrollWidth = ref.current.scrollWidth;\n        const scrollDiff = tabsScrollWidth - tabsWidth;\n        const tabsScrollLeft = Math.ceil(ref.current.scrollLeft);\n        setIsOverflowingRight(\n          tabsScrollWidth > tabsWidth && tabsScrollLeft < scrollDiff,\n        );\n        setIsOverflowingLeft(\n          tabsScrollWidth > tabsWidth && tabsScrollLeft !== 0,\n        );\n      }\n    }, []);\n\n    const { width: containerWidth, height: containerHeight } =\n      useResizeObserver<HTMLDivElement>({\n        ref: ref.current,\n      });\n\n    useLayoutEffect(() => {\n      updateOverflow();\n    }, [containerWidth, containerHeight, updateOverflow]);\n\n    // Get the children relevant to the selected tab\n    const getSelectedTabContent = (\n      key: Key | null,\n      childrenArray: ReactElement<TabProps>[],\n    ): ReactNode | null => {\n      const tab = childrenArray.find((child) => child.key === key);\n      if (tab?.props?.children) {\n        return tab.props.children;\n      }\n      return null;\n    };\n\n    const getTabPanelId = (\n      key: Key | null,\n      options?: { isSelected?: boolean; keepMounted?: boolean },\n    ): string | undefined => {\n      if (!options || options.keepMounted) {\n        return key !== null ? `${key}-tabPanel` : undefined;\n      }\n\n      return key !== null && options.isSelected ? `${key}-tabPanel` : undefined;\n    };\n    // Memoize the tab panel for the selected tab to prevent unnecessary re-renders caused by the Tabs component re-rendering\n    const MemoizedSelectedTabPanel = useMemo(\n      () =>\n        childrenArray.map((child, index) => {\n          const isSelected = index === selectedIndex;\n          const childKey = child.key;\n\n          if (\n            childKey !== null &&\n            (tabsInfo.keepMounted.has(childKey) || isSelected)\n          ) {\n            return (\n              <TabPanel\n                key={childKey}\n                style={{\n                  display: !isSelected ? 'none' : '',\n                }}\n                id={getTabPanelId(childKey)}\n                disabled={disabledTabsProp || tabsInfo.disabled.has(childKey)}\n                panelOverflow={panelOverflow}\n                aria-labelledby={tabsInfo.consumerIds[childKey] || childKey}\n              >\n                {getSelectedTabContent(childKey, childrenArray)}\n              </TabPanel>\n            );\n          }\n          return null;\n        }),\n      [childrenArray, disabledTabsProp, panelOverflow, selectedIndex, tabsInfo],\n    );\n\n    const handleKeyDown = useCallback(\n      (event: ReactKeyboardEvent) => {\n        const selectNextTab = () => {\n          setSelectedIndex((curr) =>\n            curr + 1 > childrenArray.length - 1 ? 0 : curr + 1,\n          );\n        };\n\n        const selectPrevTab = () => {\n          setSelectedIndex((curr) =>\n            curr - 1 < 0 ? childrenArray.length - 1 : curr - 1,\n          );\n        };\n\n        if (['ArrowRight', 'ArrowDown'].includes(event.code)) {\n          selectNextTab();\n        }\n\n        if (['ArrowLeft', 'ArrowUp'].includes(event.code)) {\n          selectPrevTab();\n        }\n      },\n      [setSelectedIndex, childrenArray.length],\n    );\n\n    // Memoize the Tab list to prevent unnecessary re-renders to the Tab list caused by the Tabs component re-rendering\n    const MemoizedTabsList = useMemo(() => {\n      return childrenArray.map((item, index) => (\n        <RenderTab\n          key={item.key}\n          tabItem={item}\n          isSelected={\n            selectedIndex === index && !item.props.disabled && !disabledTabsProp\n          }\n          isDisabled={item.props.disabled || disabledTabsProp}\n          onActivate={() => {\n            setSelectedIndex(index);\n          }}\n          onKeyDown={handleKeyDown}\n          ariaControls={getTabPanelId(item.key, {\n            keepMounted: item.props.keepMounted,\n            isSelected:\n              selectedIndex === index &&\n              !item.props.disabled &&\n              !disabledTabsProp,\n          })}\n        />\n      ));\n    }, [\n      childrenArray,\n      selectedIndex,\n      disabledTabsProp,\n      setSelectedIndex,\n      handleKeyDown,\n    ]);\n\n    return (\n      <div\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={forwardedRef}\n        className={clsx(tabsCSS, consumerClassName)}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <div className={tabsArrowWrapperCSS}>\n          {isOverflowingLeft && (\n            <Button\n              className={tabsArrowButtonCSS}\n              style={{ left: 0 }}\n              variant=\"default\"\n              onClick={slideTabsLeft}\n              aria-label={intl.formatMessage({\n                defaultMessage: 'scroll tabs left',\n                id: 'Cv2AP7VKybeuopCP',\n                description: 'Aria label to scroll the tabs to the left',\n              })}\n              aria-controls={tabsListId}\n            >\n              <Button.Prefix>\n                <ChevronLeftIcon />\n              </Button.Prefix>\n            </Button>\n          )}\n          <div\n            className={clsx(tabsWrapperCSS, {\n              [tabsWrapperOverflowCSS.left]:\n                isOverflowingLeft && !isOverflowingRight,\n              [tabsWrapperOverflowCSS.right]:\n                !isOverflowingLeft && isOverflowingRight,\n              [tabsWrapperOverflowCSS.both]:\n                isOverflowingLeft && isOverflowingRight,\n            })}\n            role=\"tablist\"\n            aria-orientation=\"horizontal\"\n            id={tabsListId}\n            ref={rootRef}\n            tabIndex={-1}\n            onScroll={updateOverflow}\n          >\n            {MemoizedTabsList}\n          </div>\n          {isOverflowingRight && (\n            <Button\n              className={tabsArrowButtonCSS}\n              style={{ right: 0 }}\n              onClick={slideTabsRight}\n              aria-label={intl.formatMessage({\n                defaultMessage: 'scroll tabs right',\n                id: '2YBMATuaXx9/4zBP',\n                description: 'Aria label to scroll the tabs to the right',\n              })}\n              aria-controls={tabsListId}\n            >\n              <Button.Suffix>\n                <ChevronRightIcon />\n              </Button.Suffix>\n            </Button>\n          )}\n        </div>\n        {MemoizedSelectedTabPanel}\n      </div>\n    );\n  },\n);\n(Tabs as typeof Tabs & { displayName: string }).displayName = 'Tabs';\n"],
+  "mappings": "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",
   "names": ["childrenArray"]
 }

package/esm/navigation/tabs/Tabs.sty.js

@@ -1,9 +1,9 @@
 import "./Tabs.css";
-var tabsArrowButtonCSS = "_1tfbrxp6-3-0-1";
-var tabsArrowWrapperCSS = "_1tfbrxp5-3-0-1";
-var tabsCSS = "_1tfbrxp0-3-0-1";
-var tabsWrapperCSS = "_1tfbrxp1-3-0-1";
-var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-0-1", right: "_1tfbrxp3-3-0-1", both: "_1tfbrxp4-3-0-1" };
+var tabsArrowButtonCSS = "_1tfbrxp6-3-1-1";
+var tabsArrowWrapperCSS = "_1tfbrxp5-3-1-1";
+var tabsCSS = "_1tfbrxp0-3-1-1";
+var tabsWrapperCSS = "_1tfbrxp1-3-1-1";
+var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-1-1", right: "_1tfbrxp3-3-1-1", both: "_1tfbrxp4-3-1-1" };
 export {
   tabsArrowButtonCSS,
   tabsArrowWrapperCSS,

package/esm/navigation/tabs/Tabs.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/Tabs.css.ts"],
-  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-0-1';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-0-1';\nexport var tabsCSS = '_1tfbrxp0-3-0-1';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-0-1';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-0-1',right:'_1tfbrxp3-3-0-1',both:'_1tfbrxp4-3-0-1'};"],
+  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-1-1';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-1-1';\nexport var tabsCSS = '_1tfbrxp0-3-1-1';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-1-1';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-1-1',right:'_1tfbrxp3-3-1-1',both:'_1tfbrxp4-3-1-1'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;AACzB,IAAI,sBAAsB;AAC1B,IAAI,UAAU;AACd,IAAI,iBAAiB;AACrB,IAAI,yBAAyB,EAAC,MAAK,mBAAkB,OAAM,mBAAkB,MAAK,kBAAiB;",
   "names": []
 }

package/esm/notifications/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/notifications/index.ts"],
-  "sourcesContent": ["export { dismissAllToasts, dismissToast, showToast } from './toast/Toast.js';\nexport type { ToastOptions } from './toast/Toast.js';\nexport { ToastContainer } from './toast/ToastContainer.js';\n\nexport { NotificationSettings } from './notification-settings/NotificationSettings.js';\nexport type {\n  NotificationSettingsEventNotification,\n  NotificationSettingsResourceNotification,\n  NotificationSettingsConfig,\n  NotificationSettingsProps,\n} from './notification-settings/NotificationSettings.js';\nexport { useNotificationSettingsMenuItem } from './notification-settings/hooks/useNotificationSettingsMenuItem.js';\nexport type { UseNotificationSettingsMenuItemProps } from './notification-settings/hooks/useNotificationSettingsMenuItem.js';\n"],
+  "sourcesContent": ["export { dismissAllToasts, dismissToast, showToast } from './toast/Toast.js';\nexport type { ToastOptions } from './toast/Toast.js';\nexport { ToastContainer } from './toast/ToastContainer.js';\n\nexport { NotificationSettings } from './notification-settings/NotificationSettings.js';\nexport type {\n  NotificationSettingsEventNotification,\n  NotificationSettingsResourceNotification,\n  NotificationSettingsConfig,\n  NotificationSettingsProps,\n} from './notification-settings/notification-settings-types.js';\nexport { useNotificationSettingsMenuItem } from './notification-settings/hooks/useNotificationSettingsMenuItem.js';\nexport type { UseNotificationSettingsMenuItemProps } from './notification-settings/hooks/useNotificationSettingsMenuItem.js';\n"],
   "mappings": "AAAA,SAAS,kBAAkB,cAAc,iBAAiB;AAE1D,SAAS,sBAAsB;AAE/B,SAAS,4BAA4B;AAOrC,SAAS,uCAAuC;",
   "names": []
 }

package/esm/notifications/notification-settings/NotificationSettings.css

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

package/esm/notifications/notification-settings/NotificationSettings.js

@@ -11,6 +11,9 @@ import {
   ResourceNotificationClient
 } from "./components/ResourceNotificationClient.js";
 import { NotificationToggleButton } from "./components/ToggleButton.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 const COMPONENT_NAME = "NotificationSettings";
 function NotificationProvider(props) {
@@ -30,15 +33,14 @@ const NotificationSettings = forwardRef((props, ref) => {
     type,
     style: consumerStyle,
     className: consumerClassName,
+    "data-testid": dataTestId,
     "data-dtrum-mask": dtRumMask,
     "data-dtrum-allow": dtRumAllow,
-    "data-testid": dataTestId,
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
-    "aria-details": ariaDetails,
     ...remainingProps
   } = props;
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  const ariaLabelingProps = useAriaLabelingProps(restProps);
+  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);
   return /* @__PURE__ */ jsx(NotificationProvider, { type, config, children: /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -46,16 +48,14 @@ const NotificationSettings = forwardRef((props, ref) => {
       ref,
       flexDirection: "column",
       gap: 12,
-      style: consumerStyle,
       className: consumerClassName,
+      style: consumerStyle,
+      "data-testid": dataTestId,
       "data-dtrum-mask": dtRumMask,
       "data-dtrum-allow": dtRumAllow,
-      "data-testid": dataTestId,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      "aria-details": ariaDetails,
-      ...remainingProps,
+      ...ariaLabelingProps,
+      ...behavioralTrackingProps,
+      ...forwardProps,
       "data-dt-component": COMPONENT_NAME,
       children: [
         /* @__PURE__ */ jsx(Content, { children: props.children }),

package/esm/notifications/notification-settings/NotificationSettings.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/notification-settings/NotificationSettings.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, type ReactNode } from 'react';\n\nimport type {\n  EventNotificationRequest,\n  ResourceNotificationRequest,\n} from '@dynatrace-sdk/client-notification-v2';\n\nimport { Content } from './components/Content.js';\nimport {\n  EventNotificationClient,\n  isEventNotificationConfig,\n} from './components/EventNotificationClient.js';\nimport { NotificationPermissionInfo } from './components/PermissionInfo.js';\nimport {\n  isResourceNotificationConfig,\n  ResourceNotificationClient,\n} from './components/ResourceNotificationClient.js';\nimport { NotificationToggleButton } from './components/ToggleButton.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-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 { Flex } from '../../layouts/flex/Flex.js';\n\n\nconst COMPONENT_NAME = 'NotificationSettings';\n\n/** @public */\nexport interface NotificationSettingsResourceNotification {\n  /**\n   * Defines the type of the notifcation that should be subscribed to.\n   */\n  type: 'resource';\n  /**\n   * Configuration for a resource notification. Uses the `@dynatrace-sdk/client-notification-v2`.\n   */\n  config: ResourceNotificationRequest;\n}\n\n/** @public */\nexport interface NotificationSettingsEventNotification {\n  /**\n   * Defines the type of the notifcation that should be subscribed to.\n   */\n  type: 'event';\n  /**\n   * Configuration for a event notification. Uses the `@dynatrace-sdk/client-notification-v2`.\n   */\n  config: EventNotificationRequest;\n}\n\n/** @public */\nexport type NotificationSettingsConfig =\n  | NotificationSettingsEventNotification\n  | NotificationSettingsResourceNotification;\n\n/**\n * @public\n */\nexport type NotificationSettingsProps = StylingProps &\n  DataTestId &\n  MaskingProps &\n  DOMProps &\n  AriaLabelingProps &\n  NotificationSettingsConfig & {\n    /**\n     * Either a ReactNode or a render function that gets passed certain values\n     * from the currently configured notification */\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\n/**\n * Switch function to determine which notification client should be used.\n * @internal\n */\nexport function NotificationProvider(\n  props: PropsWithChildren<Pick<NotificationSettingsProps, 'type' | 'config'>>,\n) {\n  if (isResourceNotificationConfig(props.type, props.config)) {\n    return (\n      <ResourceNotificationClient config={props.config}>\n        {props.children}\n      </ResourceNotificationClient>\n    );\n  }\n\n  if (isEventNotificationConfig(props.type, props.config)) {\n    return (\n      <EventNotificationClient config={props.config}>\n        {props.children}\n      </EventNotificationClient>\n    );\n  }\n\n  return props.children;\n}\n\n/**\n * NotificationSettings component\n * @public\n */\nexport const NotificationSettings = forwardRef<\n  HTMLDivElement,\n  NotificationSettingsProps\n>((props, ref) => {\n  const {\n    config,\n    children,\n    id,\n    type,\n    style: consumerStyle,\n    className: consumerClassName,\n    'data-dtrum-mask': dtRumMask,\n    'data-dtrum-allow': dtRumAllow,\n    'data-testid': dataTestId,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    ...remainingProps\n  } = props;\n\n  return (\n    <NotificationProvider type={type} config={config}>\n      <Flex\n        id={id}\n        ref={ref}\n        flexDirection=\"column\"\n        gap={12}\n        style={consumerStyle}\n        className={consumerClassName}\n        data-dtrum-mask={dtRumMask}\n        data-dtrum-allow={dtRumAllow}\n        data-testid={dataTestId}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <Content>{props.children}</Content>\n        <Flex alignItems=\"center\">\n          <NotificationToggleButton />\n          <NotificationPermissionInfo />\n        </Flex>\n      </Flex>\n    </NotificationProvider>\n  );\n});\n\n(\n  NotificationSettings as typeof NotificationSettings & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "AA+FM,cA8DE,YA9DF;AA/FN,SAAS,kBAA0D;AAOnE,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAMzC,SAAS,YAAY;AAGrB,MAAM,iBAAiB;AAgEhB,SAAS,qBACd,OACA;AACA,MAAI,6BAA6B,MAAM,MAAM,MAAM,MAAM,GAAG;AAC1D,WACE,oBAAC,8BAA2B,QAAQ,MAAM,QACvC,gBAAM,UACT;AAAA,EAEJ;AAEA,MAAI,0BAA0B,MAAM,MAAM,MAAM,MAAM,GAAG;AACvD,WACE,oBAAC,2BAAwB,QAAQ,MAAM,QACpC,gBAAM,UACT;AAAA,EAEJ;AAEA,SAAO,MAAM;AACf;AAMO,MAAM,uBAAuB,WAGlC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,IAAI;AAEJ,SACE,oBAAC,wBAAqB,MAAY,QAChC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAc;AAAA,MACd,KAAK;AAAA,MACL,OAAO;AAAA,MACP,WAAW;AAAA,MACX,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,gBAAc;AAAA,MACb,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB;AAAA,4BAAC,WAAS,gBAAM,UAAS;AAAA,QACzB,qBAAC,QAAK,YAAW,UACf;AAAA,8BAAC,4BAAyB;AAAA,UAC1B,oBAAC,8BAA2B;AAAA,WAC9B;AAAA;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAGC,qBACA,cAAc;",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren } from 'react';\n\nimport { Content } from './components/Content.js';\nimport {\n  EventNotificationClient,\n  isEventNotificationConfig,\n} from './components/EventNotificationClient.js';\nimport { NotificationPermissionInfo } from './components/PermissionInfo.js';\nimport {\n  isResourceNotificationConfig,\n  ResourceNotificationClient,\n} from './components/ResourceNotificationClient.js';\nimport { NotificationToggleButton } from './components/ToggleButton.js';\nimport type { NotificationSettingsProps } from './notification-settings-types.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\nconst COMPONENT_NAME = 'NotificationSettings';\n\n/**\n * Switch function to determine which notification client should be used.\n * @internal\n */\nexport function NotificationProvider(\n  props: PropsWithChildren<Pick<NotificationSettingsProps, 'type' | 'config'>>,\n) {\n  if (isResourceNotificationConfig(props.type, props.config)) {\n    return (\n      <ResourceNotificationClient config={props.config}>\n        {props.children}\n      </ResourceNotificationClient>\n    );\n  }\n\n  if (isEventNotificationConfig(props.type, props.config)) {\n    return (\n      <EventNotificationClient config={props.config}>\n        {props.children}\n      </EventNotificationClient>\n    );\n  }\n\n  return props.children;\n}\n\n/**\n * NotificationSettings component\n * @public\n */\nexport const NotificationSettings = forwardRef<\n  HTMLDivElement,\n  NotificationSettingsProps\n>((props, ref) => {\n  const {\n    config,\n    children,\n    id,\n    type,\n    style: consumerStyle,\n    className: consumerClassName,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dtRumMask,\n    'data-dtrum-allow': dtRumAllow,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n  return (\n    <NotificationProvider type={type} config={config}>\n      <Flex\n        id={id}\n        ref={ref}\n        flexDirection=\"column\"\n        gap={12}\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        data-dtrum-mask={dtRumMask}\n        data-dtrum-allow={dtRumAllow}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <Content>{props.children}</Content>\n        <Flex alignItems=\"center\">\n          <NotificationToggleButton />\n          <NotificationPermissionInfo />\n        </Flex>\n      </Flex>\n    </NotificationProvider>\n  );\n});\n\n(\n  NotificationSettings as typeof NotificationSettings & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "AA8BM,cA6DE,YA7DF;AA9BN,SAAS,kBAA0C;AAEnD,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAEzC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AACpC,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAMhB,SAAS,qBACd,OACA;AACA,MAAI,6BAA6B,MAAM,MAAM,MAAM,MAAM,GAAG;AAC1D,WACE,oBAAC,8BAA2B,QAAQ,MAAM,QACvC,gBAAM,UACT;AAAA,EAEJ;AAEA,MAAI,0BAA0B,MAAM,MAAM,MAAM,MAAM,GAAG;AACvD,WACE,oBAAC,2BAAwB,QAAQ,MAAM,QACpC,gBAAM,UACT;AAAA,EAEJ;AAEA,SAAO,MAAM;AACf;AAMO,MAAM,uBAAuB,WAGlC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,SAAS;AACxD,QAAM,eAAe,oBAAoB,WAAW,iBAAiB;AAErE,SACE,oBAAC,wBAAqB,MAAY,QAChC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,eAAc;AAAA,MACd,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MACjB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB;AAAA,4BAAC,WAAS,gBAAM,UAAS;AAAA,QACzB,qBAAC,QAAK,YAAW,UACf;AAAA,8BAAC,4BAAyB;AAAA,UAC1B,oBAAC,8BAA2B;AAAA,WAC9B;AAAA;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;AAGC,qBACA,cAAc;",
   "names": []
 }

package/esm/notifications/notification-settings/NotificationSettings.sty.js

@@ -1,5 +1,5 @@
 import "./NotificationSettings.css";
-var overlayText = "_1cohdty0-3-0-1";
+var overlayText = "_1cohdty0-3-1-1";
 export {
   overlayText
 };

package/esm/notifications/notification-settings/NotificationSettings.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/notification-settings/NotificationSettings.css.ts"],
-  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-0-1';"],
+  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/notifications/notification-settings/components/Content.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useMemo } from "react";
 import { isElement } from "react-is";
 import { NotifyButtonContext } from "../../../buttons/notify-button/contexts/NotifyButtonContext.js";
-import { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from "../../../core/utils/can-receive-default-text-format.js";
+import { canReceiveDefaultTextFormat } from "../../../core/utils/can-receive-default-text-format.js";
 import { Flex } from "../../../layouts/flex/Flex.js";
 import { Text } from "../../../typography/text/Text.js";
 import { NotificationSettingsContext } from "../contexts/NotificationSettingsContext.js";
@@ -42,7 +42,7 @@ const Content = forwardRef((props, ref) => {
       /* @__PURE__ */ jsx(Text, { textStyle: "small", className: styles.overlayText, children: infoText })
     ] });
   }
-  if (_canReceiveDefaultTextFormat(childrenContent)) {
+  if (canReceiveDefaultTextFormat(childrenContent)) {
     return /* @__PURE__ */ jsx(
       Text,
       {

package/esm/notifications/notification-settings/components/Content.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/notifications/notification-settings/components/Content.tsx"],
-  "sourcesContent": ["import { forwardRef, useContext, useMemo } from 'react';\nimport { isElement } from 'react-is';\n\nimport { NotifyButtonContext } from '../../../buttons/notify-button/contexts/NotifyButtonContext.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../core/utils/can-receive-default-text-format.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { NotificationSettingsContext } from '../contexts/NotificationSettingsContext.js';\nimport { useNotificationMessages } from '../hooks/useNotificationMessages.js';\nimport * as styles from '../NotificationSettings.sty.js';\nimport type { NotificationSettingsProps } from '../NotificationSettings.js';\n\n/**\n *\n * @internal\n */\nexport const Content = forwardRef<\n  HTMLDivElement,\n  Readonly<{\n    children?: NotificationSettingsProps['children'];\n  }>\n>((props, ref) => {\n  const { children, ...remainingProps } = props;\n  const { overlayAriaLabelledBy } = useContext(NotifyButtonContext);\n\n  const { enabled, hasReadPermission, hasWritePermission } = useContext(\n    NotificationSettingsContext,\n  );\n\n  const { headingText, infoText } = useNotificationMessages({\n    notificationEnabled: enabled,\n  });\n\n  // Determine if a render function or a component is passed.\n  const childrenContent = useMemo(() => {\n    if (typeof children === 'function') {\n      return children({\n        disabled: !enabled,\n        headingText,\n        infoText,\n        hasReadPermission,\n        hasWritePermission,\n      });\n    }\n    return children;\n  }, [\n    children,\n    enabled,\n    hasReadPermission,\n    hasWritePermission,\n    headingText,\n    infoText,\n  ]);\n\n  // If no children are provided, we can default our own values.\n  if (children === undefined) {\n    return (\n      <Flex ref={ref} flexDirection=\"column\" gap={0} {...remainingProps}>\n        <Text id={overlayAriaLabelledBy} textStyle=\"base-emphasized\">\n          {headingText}\n        </Text>\n\n        <Text textStyle=\"small\" className={styles.overlayText}>\n          {infoText}\n        </Text>\n      </Flex>\n    );\n  }\n\n  if (_canReceiveDefaultTextFormat(childrenContent)) {\n    return (\n      <Text\n        id={overlayAriaLabelledBy}\n        ref={ref}\n        as=\"div\"\n        textStyle=\"base\"\n        {...remainingProps}\n      >\n        {childrenContent}\n      </Text>\n    );\n  }\n\n  if (isElement(childrenContent)) {\n    return childrenContent;\n  }\n\n  return (\n    <div ref={ref} {...remainingProps}>\n      {childrenContent}\n    </div>\n  );\n});\n"],
-  "mappings": "AAyDM,SACE,KADF;AAzDN,SAAS,YAAY,YAAY,eAAe;AAChD,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B;AACpC,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AACxC,YAAY,YAAY;AAOjB,MAAM,UAAU,WAKrB,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,UAAU,GAAG,eAAe,IAAI;AACxC,QAAM,EAAE,sBAAsB,IAAI,WAAW,mBAAmB;AAEhE,QAAM,EAAE,SAAS,mBAAmB,mBAAmB,IAAI;AAAA,IACzD;AAAA,EACF;AAEA,QAAM,EAAE,aAAa,SAAS,IAAI,wBAAwB;AAAA,IACxD,qBAAqB;AAAA,EACvB,CAAC;AAGD,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,SAAS;AAAA,QACd,UAAU,CAAC;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,MAAI,aAAa,QAAW;AAC1B,WACE,qBAAC,QAAK,KAAU,eAAc,UAAS,KAAK,GAAI,GAAG,gBACjD;AAAA,0BAAC,QAAK,IAAI,uBAAuB,WAAU,mBACxC,uBACH;AAAA,MAEA,oBAAC,QAAK,WAAU,SAAQ,WAAW,OAAO,aACvC,oBACH;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,6BAA6B,eAAe,GAAG;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ;AAAA,QACA,IAAG;AAAA,QACH,WAAU;AAAA,QACT,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,MAAI,UAAU,eAAe,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,KAAW,GAAG,gBAChB,2BACH;AAEJ,CAAC;",
+  "sourcesContent": ["import { forwardRef, useContext, useMemo } from 'react';\nimport { isElement } from 'react-is';\n\nimport { NotifyButtonContext } from '../../../buttons/notify-button/contexts/NotifyButtonContext.js';\nimport { canReceiveDefaultTextFormat } from '../../../core/utils/can-receive-default-text-format.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { NotificationSettingsContext } from '../contexts/NotificationSettingsContext.js';\nimport { useNotificationMessages } from '../hooks/useNotificationMessages.js';\nimport type { NotificationSettingsProps } from '../notification-settings-types.js';\nimport * as styles from '../NotificationSettings.sty.js';\n\n/**\n *\n * @internal\n */\nexport const Content = forwardRef<\n  HTMLDivElement,\n  Readonly<{\n    children?: NotificationSettingsProps['children'];\n  }>\n>((props, ref) => {\n  const { children, ...remainingProps } = props;\n  const { overlayAriaLabelledBy } = useContext(NotifyButtonContext);\n\n  const { enabled, hasReadPermission, hasWritePermission } = useContext(\n    NotificationSettingsContext,\n  );\n\n  const { headingText, infoText } = useNotificationMessages({\n    notificationEnabled: enabled,\n  });\n\n  // Determine if a render function or a component is passed.\n  const childrenContent = useMemo(() => {\n    if (typeof children === 'function') {\n      return children({\n        disabled: !enabled,\n        headingText,\n        infoText,\n        hasReadPermission,\n        hasWritePermission,\n      });\n    }\n    return children;\n  }, [\n    children,\n    enabled,\n    hasReadPermission,\n    hasWritePermission,\n    headingText,\n    infoText,\n  ]);\n\n  // If no children are provided, we can default our own values.\n  if (children === undefined) {\n    return (\n      <Flex ref={ref} flexDirection=\"column\" gap={0} {...remainingProps}>\n        <Text id={overlayAriaLabelledBy} textStyle=\"base-emphasized\">\n          {headingText}\n        </Text>\n\n        <Text textStyle=\"small\" className={styles.overlayText}>\n          {infoText}\n        </Text>\n      </Flex>\n    );\n  }\n\n  if (canReceiveDefaultTextFormat(childrenContent)) {\n    return (\n      <Text\n        id={overlayAriaLabelledBy}\n        ref={ref}\n        as=\"div\"\n        textStyle=\"base\"\n        {...remainingProps}\n      >\n        {childrenContent}\n      </Text>\n    );\n  }\n\n  if (isElement(childrenContent)) {\n    return childrenContent;\n  }\n\n  return (\n    <div ref={ref} {...remainingProps}>\n      {childrenContent}\n    </div>\n  );\n});\n"],
+  "mappings": "AAyDM,SACE,KADF;AAzDN,SAAS,YAAY,YAAY,eAAe;AAChD,SAAS,iBAAiB;AAE1B,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AAExC,YAAY,YAAY;AAMjB,MAAM,UAAU,WAKrB,CAAC,OAAO,QAAQ;AAChB,QAAM,EAAE,UAAU,GAAG,eAAe,IAAI;AACxC,QAAM,EAAE,sBAAsB,IAAI,WAAW,mBAAmB;AAEhE,QAAM,EAAE,SAAS,mBAAmB,mBAAmB,IAAI;AAAA,IACzD;AAAA,EACF;AAEA,QAAM,EAAE,aAAa,SAAS,IAAI,wBAAwB;AAAA,IACxD,qBAAqB;AAAA,EACvB,CAAC;AAGD,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,SAAS;AAAA,QACd,UAAU,CAAC;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,MAAI,aAAa,QAAW;AAC1B,WACE,qBAAC,QAAK,KAAU,eAAc,UAAS,KAAK,GAAI,GAAG,gBACjD;AAAA,0BAAC,QAAK,IAAI,uBAAuB,WAAU,mBACxC,uBACH;AAAA,MAEA,oBAAC,QAAK,WAAU,SAAQ,WAAW,OAAO,aACvC,oBACH;AAAA,OACF;AAAA,EAEJ;AAEA,MAAI,4BAA4B,eAAe,GAAG;AAChD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ;AAAA,QACA,IAAG;AAAA,QACH,WAAU;AAAA,QACT,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,MAAI,UAAU,eAAe,GAAG;AAC9B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,KAAW,GAAG,gBAChB,2BACH;AAEJ,CAAC;",
   "names": []
 }

package/esm/notifications/notification-settings/components/EventNotificationClient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/notifications/notification-settings/components/EventNotificationClient.tsx"],
-  "sourcesContent": ["import { useMemo, type PropsWithChildren } from 'react';\n\nimport {\n  NotificationSettingsContext,\n  type NotificationSettingsContextType,\n} from '../contexts/NotificationSettingsContext.js';\nimport { useEventNotificationClient } from '../hooks/useEventNotificationClient.js';\nimport type {\n  NotificationSettingsConfig,\n  NotificationSettingsEventNotification,\n} from '../NotificationSettings.js';\n\n/** @internal */\nexport function EventNotificationClient(\n  props: PropsWithChildren<\n    Pick<NotificationSettingsEventNotification, 'config'>\n  >,\n) {\n  const {\n    toggleNotifications,\n    loading,\n    hasNotFoundError,\n    hasReadPermission,\n    hasWritePermission,\n    enabled,\n  } = useEventNotificationClient(props.config);\n\n  const contextValue = useMemo<NotificationSettingsContextType>(\n    () => ({\n      enabled,\n      hasNotFoundError,\n      hasReadPermission,\n      hasWritePermission,\n      loading,\n      toggleNotifications,\n    }),\n    [\n      enabled,\n      hasNotFoundError,\n      hasReadPermission,\n      hasWritePermission,\n      loading,\n      toggleNotifications,\n    ],\n  );\n\n  return (\n    <NotificationSettingsContext.Provider value={contextValue}>\n      {props.children}\n    </NotificationSettingsContext.Provider>\n  );\n}\n\n/**\n * @internal\n */\nexport function isEventNotificationConfig(\n  type: NotificationSettingsConfig['type'],\n  config: NotificationSettingsConfig['config'],\n): config is NotificationSettingsEventNotification['config'] {\n  return type === 'event';\n}\n"],
+  "sourcesContent": ["import { useMemo, type PropsWithChildren } from 'react';\n\nimport {\n  NotificationSettingsContext,\n  type NotificationSettingsContextType,\n} from '../contexts/NotificationSettingsContext.js';\nimport { useEventNotificationClient } from '../hooks/useEventNotificationClient.js';\nimport type {\n  NotificationSettingsConfig,\n  NotificationSettingsEventNotification,\n} from '../notification-settings-types.ts';\n\n/** @internal */\nexport function EventNotificationClient(\n  props: PropsWithChildren<\n    Pick<NotificationSettingsEventNotification, 'config'>\n  >,\n) {\n  const {\n    toggleNotifications,\n    loading,\n    hasNotFoundError,\n    hasReadPermission,\n    hasWritePermission,\n    enabled,\n  } = useEventNotificationClient(props.config);\n\n  const contextValue = useMemo<NotificationSettingsContextType>(\n    () => ({\n      enabled,\n      hasNotFoundError,\n      hasReadPermission,\n      hasWritePermission,\n      loading,\n      toggleNotifications,\n    }),\n    [\n      enabled,\n      hasNotFoundError,\n      hasReadPermission,\n      hasWritePermission,\n      loading,\n      toggleNotifications,\n    ],\n  );\n\n  return (\n    <NotificationSettingsContext.Provider value={contextValue}>\n      {props.children}\n    </NotificationSettingsContext.Provider>\n  );\n}\n\n/**\n * @internal\n */\nexport function isEventNotificationConfig(\n  type: NotificationSettingsConfig['type'],\n  config: NotificationSettingsConfig['config'],\n): config is NotificationSettingsEventNotification['config'] {\n  return type === 'event';\n}\n"],
   "mappings": "AA+CI;AA/CJ,SAAS,eAAuC;AAEhD;AAAA,EACE;AAAA,OAEK;AACP,SAAS,kCAAkC;AAOpC,SAAS,wBACd,OAGA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,2BAA2B,MAAM,MAAM;AAE3C,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,4BAA4B,UAA5B,EAAqC,OAAO,cAC1C,gBAAM,UACT;AAEJ;AAKO,SAAS,0BACd,MACA,QAC2D;AAC3D,SAAO,SAAS;AAClB;",
   "names": []
 }

package/esm/notifications/notification-settings/components/ResourceNotificationClient.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/notifications/notification-settings/components/ResourceNotificationClient.tsx"],
-  "sourcesContent": ["import { useMemo, type PropsWithChildren } from 'react';\n\nimport {\n  NotificationSettingsContext,\n  type NotificationSettingsContextType,\n} from '../contexts/NotificationSettingsContext.js';\nimport { useResourceNotificationClient } from '../hooks/useResourceNotificationClient.js';\nimport type {\n  NotificationSettingsConfig,\n  NotificationSettingsResourceNotification,\n} from '../NotificationSettings.js';\n\n/** @internal */\nexport function ResourceNotificationClient(\n  props: PropsWithChildren<\n    Pick<NotificationSettingsResourceNotification, 'config'>\n  >,\n) {\n  const {\n    toggleNotifications,\n    loading,\n    hasNotFoundError,\n    hasReadPermission,\n    hasWritePermission,\n    enabled,\n  } = useResourceNotificationClient(props.config);\n\n  const contextValue = useMemo<NotificationSettingsContextType>(\n    () => ({\n      enabled,\n      hasNotFoundError,\n      hasReadPermission,\n      hasWritePermission,\n      loading,\n      toggleNotifications,\n    }),\n    [\n      enabled,\n      hasNotFoundError,\n      hasReadPermission,\n      hasWritePermission,\n      loading,\n      toggleNotifications,\n    ],\n  );\n\n  return (\n    <NotificationSettingsContext.Provider value={contextValue}>\n      {props.children}\n    </NotificationSettingsContext.Provider>\n  );\n}\n\n/**\n * @internal\n */\nexport function isResourceNotificationConfig(\n  type: NotificationSettingsConfig['type'],\n  config: NotificationSettingsConfig['config'],\n): config is NotificationSettingsResourceNotification['config'] {\n  return type === 'resource';\n}\n"],
+  "sourcesContent": ["import { useMemo, type PropsWithChildren } from 'react';\n\nimport {\n  NotificationSettingsContext,\n  type NotificationSettingsContextType,\n} from '../contexts/NotificationSettingsContext.js';\nimport { useResourceNotificationClient } from '../hooks/useResourceNotificationClient.js';\nimport type {\n  NotificationSettingsConfig,\n  NotificationSettingsResourceNotification,\n} from '../notification-settings-types.js';\n\n/** @internal */\nexport function ResourceNotificationClient(\n  props: PropsWithChildren<\n    Pick<NotificationSettingsResourceNotification, 'config'>\n  >,\n) {\n  const {\n    toggleNotifications,\n    loading,\n    hasNotFoundError,\n    hasReadPermission,\n    hasWritePermission,\n    enabled,\n  } = useResourceNotificationClient(props.config);\n\n  const contextValue = useMemo<NotificationSettingsContextType>(\n    () => ({\n      enabled,\n      hasNotFoundError,\n      hasReadPermission,\n      hasWritePermission,\n      loading,\n      toggleNotifications,\n    }),\n    [\n      enabled,\n      hasNotFoundError,\n      hasReadPermission,\n      hasWritePermission,\n      loading,\n      toggleNotifications,\n    ],\n  );\n\n  return (\n    <NotificationSettingsContext.Provider value={contextValue}>\n      {props.children}\n    </NotificationSettingsContext.Provider>\n  );\n}\n\n/**\n * @internal\n */\nexport function isResourceNotificationConfig(\n  type: NotificationSettingsConfig['type'],\n  config: NotificationSettingsConfig['config'],\n): config is NotificationSettingsResourceNotification['config'] {\n  return type === 'resource';\n}\n"],
   "mappings": "AA+CI;AA/CJ,SAAS,eAAuC;AAEhD;AAAA,EACE;AAAA,OAEK;AACP,SAAS,qCAAqC;AAOvC,SAAS,2BACd,OAGA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,8BAA8B,MAAM,MAAM;AAE9C,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,4BAA4B,UAA5B,EAAqC,OAAO,cAC1C,gBAAM,UACT;AAEJ;AAKO,SAAS,6BACd,MACA,QAC8D;AAC9D,SAAO,SAAS;AAClB;",
   "names": []
 }

package/esm/notifications/notification-settings/hooks/useNotificationSettingsMenuItem.js

@@ -7,9 +7,7 @@ import { Modal } from "../../../overlays/modal/Modal.js";
 import { isEventNotificationConfig } from "../components/EventNotificationClient.js";
 import { isResourceNotificationConfig } from "../components/ResourceNotificationClient.js";
 import { notificationMessages } from "../messages.js";
-import {
-  NotificationSettings
-} from "../NotificationSettings.js";
+import { NotificationSettings } from "../NotificationSettings.js";
 function useNotificationSettingsMenuItem(props) {
   const { type, config, content } = props;
   const [modalOpen, setModalOpen] = useState(false);

package/esm/notifications/notification-settings/hooks/useNotificationSettingsMenuItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/notifications/notification-settings/hooks/useNotificationSettingsMenuItem.tsx"],
-  "sourcesContent": ["import { useMemo, useState, type JSX, type ReactNode } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { NotificationIcon } from '@dynatrace/strato-icons';\n\nimport { Menu } from '../../../navigation/menu/Menu.js';\nimport { Modal } from '../../../overlays/modal/Modal.js';\nimport { isEventNotificationConfig } from '../components/EventNotificationClient.js';\nimport { isResourceNotificationConfig } from '../components/ResourceNotificationClient.js';\nimport { notificationMessages } from '../messages.js';\nimport {\n  NotificationSettings,\n  type NotificationSettingsProps,\n} from '../NotificationSettings.js';\n\n/**\n * Props for the {@link useNotificationSettingsMenuItem} hook\n * @public\n */\nexport type UseNotificationSettingsMenuItemProps = Pick<\n  NotificationSettingsProps,\n  'type' | 'config'\n> & {\n  /** Either a ReactNode or a render function that gets passed certain values from the currenlty configured notification */\n  content?:\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\n/**\n * Helper hook to use a NotificationSetting within a Menu.\n * @public */\nexport function useNotificationSettingsMenuItem(\n  props: UseNotificationSettingsMenuItemProps,\n): [() => JSX.Element, () => JSX.Element] {\n  const { type, config, content } = props;\n\n  const [modalOpen, setModalOpen] = useState(false);\n\n  const NotificationMenuItem = useMemo<() => JSX.Element>(() => {\n    return () => (\n      <Menu.Item onSelect={() => setModalOpen(true)}>\n        <Menu.Prefix>\n          <NotificationIcon />\n        </Menu.Prefix>\n        <FormattedMessage {...notificationMessages.menuItemLabel} />\n      </Menu.Item>\n    );\n  }, []);\n\n  const NotificationSettingsModal = useMemo<() => JSX.Element>(() => {\n    let notificationSettings: ReactNode = null;\n\n    if (isResourceNotificationConfig(type, config)) {\n      notificationSettings = (\n        <NotificationSettings type=\"resource\" config={config}>\n          {content}\n        </NotificationSettings>\n      );\n    } else if (isEventNotificationConfig(type, config)) {\n      notificationSettings = (\n        <NotificationSettings type=\"event\" config={config}>\n          {content}\n        </NotificationSettings>\n      );\n    }\n\n    return () => (\n      <Modal\n        show={modalOpen}\n        size=\"small\"\n        onDismiss={() => setModalOpen(false)}\n        title={\n          <FormattedMessage\n            {...notificationMessages.notificationSettingsModalTitle}\n          />\n        }\n      >\n        {notificationSettings}\n      </Modal>\n    );\n  }, [config, content, modalOpen, type]);\n\n  return [NotificationMenuItem, NotificationSettingsModal] as const;\n}\n"],
-  "mappings": "AAqDM,SAEI,KAFJ;AArDN,SAAS,SAAS,gBAA0C;AAC5D,SAAS,wBAAwB;AAEjC,SAAS,wBAAwB;AAEjC,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,iCAAiC;AAC1C,SAAS,oCAAoC;AAC7C,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,OAEK;AA+BA,SAAS,gCACd,OACwC;AACxC,QAAM,EAAE,MAAM,QAAQ,QAAQ,IAAI;AAElC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,uBAAuB,QAA2B,MAAM;AAC5D,WAAO,MACL,qBAAC,KAAK,MAAL,EAAU,UAAU,MAAM,aAAa,IAAI,GAC1C;AAAA,0BAAC,KAAK,QAAL,EACC,8BAAC,oBAAiB,GACpB;AAAA,MACA,oBAAC,oBAAkB,GAAG,qBAAqB,eAAe;AAAA,OAC5D;AAAA,EAEJ,GAAG,CAAC,CAAC;AAEL,QAAM,4BAA4B,QAA2B,MAAM;AACjE,QAAI,uBAAkC;AAEtC,QAAI,6BAA6B,MAAM,MAAM,GAAG;AAC9C,6BACE,oBAAC,wBAAqB,MAAK,YAAW,QACnC,mBACH;AAAA,IAEJ,WAAW,0BAA0B,MAAM,MAAM,GAAG;AAClD,6BACE,oBAAC,wBAAqB,MAAK,SAAQ,QAChC,mBACH;AAAA,IAEJ;AAEA,WAAO,MACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAK;AAAA,QACL,WAAW,MAAM,aAAa,KAAK;AAAA,QACnC,OACE;AAAA,UAAC;AAAA;AAAA,YACE,GAAG,qBAAqB;AAAA;AAAA,QAC3B;AAAA,QAGD;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG,CAAC,QAAQ,SAAS,WAAW,IAAI,CAAC;AAErC,SAAO,CAAC,sBAAsB,yBAAyB;AACzD;",
+  "sourcesContent": ["import { useMemo, useState, type JSX, type ReactNode } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { NotificationIcon } from '@dynatrace/strato-icons';\n\nimport { Menu } from '../../../navigation/menu/Menu.js';\nimport { Modal } from '../../../overlays/modal/Modal.js';\nimport { isEventNotificationConfig } from '../components/EventNotificationClient.js';\nimport { isResourceNotificationConfig } from '../components/ResourceNotificationClient.js';\nimport { notificationMessages } from '../messages.js';\nimport { type NotificationSettingsProps } from '../notification-settings-types.js';\nimport { NotificationSettings } from '../NotificationSettings.js';\n\n/**\n * Props for the {@link useNotificationSettingsMenuItem} hook\n * @public\n */\nexport type UseNotificationSettingsMenuItemProps = Pick<\n  NotificationSettingsProps,\n  'type' | 'config'\n> & {\n  /** Either a ReactNode or a render function that gets passed certain values from the currenlty configured notification */\n  content?:\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\n/**\n * Helper hook to use a NotificationSetting within a Menu.\n * @public */\nexport function useNotificationSettingsMenuItem(\n  props: UseNotificationSettingsMenuItemProps,\n): [() => JSX.Element, () => JSX.Element] {\n  const { type, config, content } = props;\n\n  const [modalOpen, setModalOpen] = useState(false);\n\n  const NotificationMenuItem = useMemo<() => JSX.Element>(() => {\n    return () => (\n      <Menu.Item onSelect={() => setModalOpen(true)}>\n        <Menu.Prefix>\n          <NotificationIcon />\n        </Menu.Prefix>\n        <FormattedMessage {...notificationMessages.menuItemLabel} />\n      </Menu.Item>\n    );\n  }, []);\n\n  const NotificationSettingsModal = useMemo<() => JSX.Element>(() => {\n    let notificationSettings: ReactNode = null;\n\n    if (isResourceNotificationConfig(type, config)) {\n      notificationSettings = (\n        <NotificationSettings type=\"resource\" config={config}>\n          {content}\n        </NotificationSettings>\n      );\n    } else if (isEventNotificationConfig(type, config)) {\n      notificationSettings = (\n        <NotificationSettings type=\"event\" config={config}>\n          {content}\n        </NotificationSettings>\n      );\n    }\n\n    return () => (\n      <Modal\n        show={modalOpen}\n        size=\"small\"\n        onDismiss={() => setModalOpen(false)}\n        title={\n          <FormattedMessage\n            {...notificationMessages.notificationSettingsModalTitle}\n          />\n        }\n      >\n        {notificationSettings}\n      </Modal>\n    );\n  }, [config, content, modalOpen, type]);\n\n  return [NotificationMenuItem, NotificationSettingsModal] as const;\n}\n"],
+  "mappings": "AAmDM,SAEI,KAFJ;AAnDN,SAAS,SAAS,gBAA0C;AAC5D,SAAS,wBAAwB;AAEjC,SAAS,wBAAwB;AAEjC,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,iCAAiC;AAC1C,SAAS,oCAAoC;AAC7C,SAAS,4BAA4B;AAErC,SAAS,4BAA4B;AA+B9B,SAAS,gCACd,OACwC;AACxC,QAAM,EAAE,MAAM,QAAQ,QAAQ,IAAI;AAElC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,uBAAuB,QAA2B,MAAM;AAC5D,WAAO,MACL,qBAAC,KAAK,MAAL,EAAU,UAAU,MAAM,aAAa,IAAI,GAC1C;AAAA,0BAAC,KAAK,QAAL,EACC,8BAAC,oBAAiB,GACpB;AAAA,MACA,oBAAC,oBAAkB,GAAG,qBAAqB,eAAe;AAAA,OAC5D;AAAA,EAEJ,GAAG,CAAC,CAAC;AAEL,QAAM,4BAA4B,QAA2B,MAAM;AACjE,QAAI,uBAAkC;AAEtC,QAAI,6BAA6B,MAAM,MAAM,GAAG;AAC9C,6BACE,oBAAC,wBAAqB,MAAK,YAAW,QACnC,mBACH;AAAA,IAEJ,WAAW,0BAA0B,MAAM,MAAM,GAAG;AAClD,6BACE,oBAAC,wBAAqB,MAAK,SAAQ,QAChC,mBACH;AAAA,IAEJ;AAEA,WAAO,MACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,MAAK;AAAA,QACL,WAAW,MAAM,aAAa,KAAK;AAAA,QACnC,OACE;AAAA,UAAC;AAAA;AAAA,YACE,GAAG,qBAAqB;AAAA;AAAA,QAC3B;AAAA,QAGD;AAAA;AAAA,IACH;AAAA,EAEJ,GAAG,CAAC,QAAQ,SAAS,WAAW,IAAI,CAAC;AAErC,SAAO,CAAC,sBAAsB,yBAAyB;AACzD;",
   "names": []
 }

package/esm/notifications/notification-settings/notification-settings-types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=notification-settings-types.js.map

package/esm/notifications/notification-settings/notification-settings-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/esm/notifications/toast/Toast.css

@@ -1,8 +1,8 @@
-._yjszxq0-3-0-1 {
+._yjszxq0-3-1-1 {
   display: flex;
   overflow: hidden;
 }
-._yjszxq1-3-0-1 {
+._yjszxq1-3-1-1 {
   display: flex;
   border: 0;
   border-radius: 0;
@@ -11,14 +11,14 @@
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._yjszxq2-3-0-1 {
+._yjszxq2-3-1-1 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._yjszxq3-3-0-1 {
+._yjszxq3-3-1-1 {
   max-width: 100%;
 }
-._yjszxq3-3-0-1._yjszxq3-3-0-1 {
+._yjszxq3-3-1-1._yjszxq3-3-1-1 {
   overflow-wrap: anywhere;
 }

package/esm/notifications/toast/Toast.js

@@ -17,6 +17,8 @@ import {
   toastTextCSS
 } from "./Toast.sty.js";
 import { OverlayStackingContext } from "../../core/contexts/OverlayStacking.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { Container } from "../../layouts/container/Container.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { textStyle as textStyleCSS } from "../../styles/textStyle.sty.js";
@@ -31,8 +33,13 @@ const Toast = (props) => {
     closeToast,
     className: consumerClassName,
     style: consumerStyle,
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow,
+    ...remainingProps
   } = props;
+  const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  const ariaLabelingProps = useAriaLabelingProps(restProps);
   const Icon = useMemo(() => {
     switch (type) {
       case "warning":
@@ -54,10 +61,14 @@ const Toast = (props) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      "data-testid": dataTestId,
+      onKeyDown: closeToastOnEsc,
       className: clsx(consumerClassName, toastCSS),
       style: consumerStyle,
-      onKeyDown: closeToastOnEsc,
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      ...ariaLabelingProps,
+      ...behavioralTrackingProps,
       children: /* @__PURE__ */ jsxs(OverlayStackingContext.Provider, { value: 100, children: [
         /* @__PURE__ */ jsx(
           Container,
@@ -102,10 +113,17 @@ function showToast({
   title,
   message,
   position = "bottom-left",
+  actions,
   className: consumerClassName,
   style: consumerStyle,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-details": ariaDetails,
   "data-testid": dataTestId,
-  actions
+  "data-dtrum-mask": dataDtrumMask,
+  "data-dtrum-allow": dataDtrumAllow,
+  ...remainingProps
 }) {
   const defaultRole = type === "critical" ? "alert" : "status";
   const defaultAutoClose = type === "warning" || type === "critical" ? false : 8e3;
@@ -120,7 +138,14 @@ function showToast({
         closeToast: () => void 0,
         className: consumerClassName,
         style: consumerStyle,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-details": ariaDetails,
         "data-testid": dataTestId,
+        "data-dtrum-mask": dataDtrumMask,
+        "data-dtrum-allow": dataDtrumAllow,
+        ...remainingProps,
         "data-dt-component": COMPONENT_NAME,
         children: actions
       }

package/esm/notifications/toast/Toast.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/Toast.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useMemo,\n  type JSX,\n  type KeyboardEvent,\n  type PropsWithChildren,\n} from 'react';\nimport { toast } from 'react-toastify';\n\nimport {\n  CriticalIcon,\n  InformationIcon,\n  SuccessIcon,\n  WarningIcon,\n} from '@dynatrace/strato-icons';\n\nimport {\n  toastCSS,\n  toastFlexContainerCSS,\n  toastIconCSS,\n  toastTextCSS,\n} from './Toast.sty.js';\nimport { OverlayStackingContext } from '../../core/contexts/OverlayStacking.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { Container } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { Text } from '../../typography/text/Text.js';\n\n\nconst COMPONENT_NAME = 'Toast';\n\ntype ToastProps = PropsWithChildren<{\n  type: 'info' | 'warning' | 'critical' | 'success';\n  title: string;\n  message?: string | JSX.Element;\n  closeToast: () => void;\n}> &\n  StylingProps &\n  DataTestId;\n\nconst Toast = (props: ToastProps) => {\n  const {\n    children,\n    type,\n    title,\n    message,\n    closeToast,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  } = props;\n\n  const Icon = useMemo(() => {\n    switch (type) {\n      case 'warning':\n        return <WarningIcon />;\n      case 'success':\n        return <SuccessIcon />;\n      case 'critical':\n        return <CriticalIcon />;\n      case 'info':\n        return <InformationIcon />;\n    }\n  }, [type]);\n\n  // Handle the escape key\n  const closeToastOnEsc = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      closeToast();\n    }\n  };\n\n  return (\n    <div\n      data-testid={dataTestId}\n      className={clsx(consumerClassName, toastCSS)}\n      style={consumerStyle}\n      onKeyDown={closeToastOnEsc}\n    >\n      {/*\n      Our internal `OverlayStackingProvider` has some built in logic to only always\n      increment by one layer. For actually creating the correct zIndex offset for the\n      \"always on top\" toast, we need to add a couple more layers to it.\n      */}\n      <OverlayStackingContext.Provider value={100}>\n        <Container\n          variant=\"accent\"\n          color={type === 'info' ? 'primary' : type}\n          className={toastIconCSS}\n        >\n          {Icon}\n        </Container>\n        <Flex\n          className={clsx(\n            toastFlexContainerCSS,\n            textStyleCSS({ textStyle: 'base' }),\n          )}\n          paddingLeft={16}\n          paddingTop={12}\n          paddingBottom={12}\n          paddingRight={8}\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          flexGrow={1}\n          gap={6}\n        >\n          {title && (\n            <Text className={toastTextCSS} textStyle=\"base-emphasized\" as=\"p\">\n              {title}\n            </Text>\n          )}\n          {message && (\n            <Text className={toastTextCSS} textStyle=\"base\" as=\"p\">\n              {message}\n            </Text>\n          )}\n          {children}\n        </Flex>\n      </OverlayStackingContext.Provider>\n    </div>\n  );\n};\n\n// #region Typings\n/**\n * Options that can be given to the showToast function.\n * @public\n */\nexport interface ToastOptions extends StylingProps, DataTestId {\n  /** A unique id for the toast. Using this toast id consumer can control\n   *  the behavior of individual toast notifications.  Toast messages with same\n   *  id will only be shown once.\n   */\n  id?: string | number;\n\n  /** Title displayed in the toast notification. */\n  title: string;\n  /**\n   * Type of the notification. Also indicates the color and icon.\n   * @defaultValue 'info'\n   * */\n  type?: 'info' | 'warning' | 'critical' | 'success';\n  /** Message displayed in the toast notification. */\n  message?: string | JSX.Element;\n  /**\n   * The Toast notification will automatically close after a certain period of\n   * time given in milliseconds. If 'infinite' is provided, the user must close the toast.\n   * @defaultValue info and success: 8000, critical and warning: 'infinite'\n   * */\n  lifespan?: number | 'infinite';\n  /**\n   * Optional actions passed to the toast element, appended on the bottom left.\n   * Should only be used to either add a Button or a Link.\n   */\n  actions?: JSX.Element;\n  /**\n   * Live region roles\n   * @defaultValue info, success and warning: 'status', critical: 'alert'\n   */\n  role?: 'alert' | 'log' | 'status';\n  /**\n   * Position of toast\n   * @defaultValue 'bottom-left'\n   */\n  position?: 'bottom-right' | 'bottom-center' | 'bottom-left';\n}\n// #endregion Typings\n\n/**\n * Function to open a toast configuration.\n *\n * @returns the respective toast id\n * @public\n */\nexport function showToast({\n  id,\n  type = 'info',\n  role,\n  lifespan,\n  title,\n  message,\n  position = 'bottom-left',\n  className: consumerClassName,\n  style: consumerStyle,\n  'data-testid': dataTestId,\n  actions,\n}: ToastOptions): number | string {\n  // default role according to type\n  const defaultRole = type === 'critical' ? 'alert' : 'status';\n  // default lifespan according to type\n  const defaultAutoClose =\n    type === 'warning' || type === 'critical' ? false : 8000;\n  const autoClose = lifespan === 'infinite' ? false : lifespan;\n\n  return toast(\n    <Toast\n      type={type}\n      title={title}\n      message={message}\n      closeToast={() => undefined}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {actions}\n    </Toast>,\n    {\n      toastId: id,\n      autoClose: autoClose ?? defaultAutoClose,\n      role: role ?? defaultRole,\n      position,\n    },\n  );\n}\n\n/**\n * Function to close a single toast.\n *\n * @param id - id of the toast that should be dismissed\n * @public\n */\nexport function dismissToast(id: string | number): void {\n  toast.dismiss(id);\n}\n\n/**\n * Function to close all open toasts at once.\n * @public\n */\nexport function dismissAllToasts(): void {\n  toast.dismiss();\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useMemo,\n  type JSX,\n  type KeyboardEvent,\n  type PropsWithChildren,\n} from 'react';\nimport { toast } from 'react-toastify';\n\nimport {\n  CriticalIcon,\n  InformationIcon,\n  SuccessIcon,\n  WarningIcon,\n} from '@dynatrace/strato-icons';\n\nimport {\n  toastCSS,\n  toastFlexContainerCSS,\n  toastIconCSS,\n  toastTextCSS,\n} from './Toast.sty.js';\nimport { OverlayStackingContext } from '../../core/contexts/OverlayStacking.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\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 { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { Container } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { Text } from '../../typography/text/Text.js';\n\nconst COMPONENT_NAME = 'Toast';\n\ntype ToastProps = PropsWithChildren<{\n  type: 'info' | 'warning' | 'critical' | 'success';\n  title: string;\n  message?: string | JSX.Element;\n  closeToast: () => void;\n}> &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  AriaLabelingProps &\n  BehaviorTrackingProps;\n\nconst Toast = (props: ToastProps) => {\n  const {\n    children,\n    type,\n    title,\n    message,\n    closeToast,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n\n  const Icon = useMemo(() => {\n    switch (type) {\n      case 'warning':\n        return <WarningIcon />;\n      case 'success':\n        return <SuccessIcon />;\n      case 'critical':\n        return <CriticalIcon />;\n      case 'info':\n        return <InformationIcon />;\n    }\n  }, [type]);\n\n  // Handle the escape key\n  const closeToastOnEsc = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      closeToast();\n    }\n  };\n\n  return (\n    <div\n      onKeyDown={closeToastOnEsc}\n      className={clsx(consumerClassName, toastCSS)}\n      style={consumerStyle}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...ariaLabelingProps}\n      {...behavioralTrackingProps}\n    >\n      {/*\n      Our internal `OverlayStackingProvider` has some built in logic to only always\n      increment by one layer. For actually creating the correct zIndex offset for the\n      \"always on top\" toast, we need to add a couple more layers to it.\n      */}\n      <OverlayStackingContext.Provider value={100}>\n        <Container\n          variant=\"accent\"\n          color={type === 'info' ? 'primary' : type}\n          className={toastIconCSS}\n        >\n          {Icon}\n        </Container>\n        <Flex\n          className={clsx(\n            toastFlexContainerCSS,\n            textStyleCSS({ textStyle: 'base' }),\n          )}\n          paddingLeft={16}\n          paddingTop={12}\n          paddingBottom={12}\n          paddingRight={8}\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          flexGrow={1}\n          gap={6}\n        >\n          {title && (\n            <Text className={toastTextCSS} textStyle=\"base-emphasized\" as=\"p\">\n              {title}\n            </Text>\n          )}\n          {message && (\n            <Text className={toastTextCSS} textStyle=\"base\" as=\"p\">\n              {message}\n            </Text>\n          )}\n          {children}\n        </Flex>\n      </OverlayStackingContext.Provider>\n    </div>\n  );\n};\n\n// #region Typings\n/**\n * Options that can be given to the showToast function.\n * @public\n */\nexport interface ToastOptions\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /** A unique id for the toast. Using this toast id consumer can control\n   *  the behavior of individual toast notifications.  Toast messages with same\n   *  id will only be shown once.\n   */\n  id?: string | number;\n\n  /** Title displayed in the toast notification. */\n  title: string;\n  /**\n   * Type of the notification. Also indicates the color and icon.\n   * @defaultValue 'info'\n   * */\n  type?: 'info' | 'warning' | 'critical' | 'success';\n  /** Message displayed in the toast notification. */\n  message?: string | JSX.Element;\n  /**\n   * The Toast notification will automatically close after a certain period of\n   * time given in milliseconds. If 'infinite' is provided, the user must close the toast.\n   * @defaultValue info and success: 8000, critical and warning: 'infinite'\n   * */\n  lifespan?: number | 'infinite';\n  /**\n   * Optional actions passed to the toast element, appended on the bottom left.\n   * Should only be used to either add a Button or a Link.\n   */\n  actions?: JSX.Element;\n  /**\n   * Live region roles\n   * @defaultValue info, success and warning: 'status', critical: 'alert'\n   */\n  role?: 'alert' | 'log' | 'status';\n  /**\n   * Position of toast\n   * @defaultValue 'bottom-left'\n   */\n  position?: 'bottom-right' | 'bottom-center' | 'bottom-left';\n}\n// #endregion Typings\n\n/**\n * Function to open a toast configuration.\n *\n * @returns the respective toast id\n * @public\n */\nexport function showToast({\n  id,\n  type = 'info',\n  role,\n  lifespan,\n  title,\n  message,\n  position = 'bottom-left',\n  actions,\n  className: consumerClassName,\n  style: consumerStyle,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-details': ariaDetails,\n  'data-testid': dataTestId,\n  'data-dtrum-mask': dataDtrumMask,\n  'data-dtrum-allow': dataDtrumAllow,\n  ...remainingProps\n}: ToastOptions): number | string {\n  // default role according to type\n  const defaultRole = type === 'critical' ? 'alert' : 'status';\n  // default lifespan according to type\n  const defaultAutoClose =\n    type === 'warning' || type === 'critical' ? false : 8000;\n  const autoClose = lifespan === 'infinite' ? false : lifespan;\n\n  return toast(\n    <Toast\n      type={type}\n      title={title}\n      message={message}\n      closeToast={() => undefined}\n      className={consumerClassName}\n      style={consumerStyle}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      aria-details={ariaDetails}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      {...remainingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {actions}\n    </Toast>,\n    {\n      toastId: id,\n      autoClose: autoClose ?? defaultAutoClose,\n      role: role ?? defaultRole,\n      position,\n    },\n  );\n}\n\n/**\n * Function to close a single toast.\n *\n * @param id - id of the toast that should be dismissed\n * @public\n */\nexport function dismissToast(id: string | number): void {\n  toast.dismiss(id);\n}\n\n/**\n * Function to close all open toasts at once.\n * @public\n */\nexport function dismissAllToasts(): void {\n  toast.dismiss();\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/notifications/toast/Toast.sty.js

@@ -1,8 +1,8 @@
 import "./Toast.css";
-var toastCSS = "_yjszxq0-3-0-1";
-var toastFlexContainerCSS = "_yjszxq2-3-0-1";
-var toastIconCSS = "_yjszxq1-3-0-1";
-var toastTextCSS = "_yjszxq3-3-0-1";
+var toastCSS = "_yjszxq0-3-1-1";
+var toastFlexContainerCSS = "_yjszxq2-3-1-1";
+var toastIconCSS = "_yjszxq1-3-1-1";
+var toastTextCSS = "_yjszxq3-3-1-1";
 export {
   toastCSS,
   toastFlexContainerCSS,

package/esm/notifications/toast/Toast.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/Toast.css.ts"],
-  "sourcesContent": ["import './Toast.css';\nexport var toastCSS = '_yjszxq0-3-0-1';\nexport var toastFlexContainerCSS = '_yjszxq2-3-0-1';\nexport var toastIconCSS = '_yjszxq1-3-0-1';\nexport var toastTextCSS = '_yjszxq3-3-0-1';"],
+  "sourcesContent": ["import './Toast.css';\nexport var toastCSS = '_yjszxq0-3-1-1';\nexport var toastFlexContainerCSS = '_yjszxq2-3-1-1';\nexport var toastIconCSS = '_yjszxq1-3-1-1';\nexport var toastTextCSS = '_yjszxq3-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,wBAAwB;AAC5B,IAAI,eAAe;AACnB,IAAI,eAAe;",
   "names": []
 }