@dynatrace/strato-components 3.3.3 → 3.5.0

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  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\n    // When the selected tab is outside the visible area of the tablist (which\n    // scrolls horizontally when tabs overflow), scroll it into view. Also account\n    // for the arrow overlay buttons so the tab is not obscured behind them.\n    //\n    // Note: We intentionally avoid using `scrollIntoView()` here \u2014 it\n    // can cause unwanted vertical page scrolling.\n    useLayoutEffect(() => {\n      const tabList = ref.current;\n      if (!tabList) {\n        return;\n      }\n      const selectedTab = tabList.querySelector<HTMLElement>(\n        '[aria-selected=\"true\"]',\n      );\n      if (!selectedTab) {\n        return;\n      }\n\n      // Get current positions of the tablist container and selected tab\n      const tabListRect = tabList.getBoundingClientRect();\n      const tabRect = selectedTab.getBoundingClientRect();\n\n      // Calculate offsets for arrow buttons that overlay the edges\n      const leftArrow = tabList.previousElementSibling as HTMLElement | null;\n      const rightArrow = tabList.nextElementSibling as HTMLElement | null;\n      const leftOffset = leftArrow?.offsetWidth ?? 0;\n      const rightOffset = rightArrow?.offsetWidth ?? 0;\n\n      // Show part of adjacent tab to hint at more content\n      const ADJACENT_TAB_PEEK_WIDTH_PX = 24;\n\n      const isHiddenLeft = tabRect.left < tabListRect.left + leftOffset;\n      const isHiddenRight = tabRect.right > tabListRect.right - rightOffset;\n\n      if (isHiddenLeft) {\n        // Scroll left to reveal the hidden tab at the desired position\n        const targetLeftPosition =\n          tabListRect.left + leftOffset + ADJACENT_TAB_PEEK_WIDTH_PX;\n        const scrollAmount = targetLeftPosition - tabRect.left;\n        tabList.scrollLeft -= scrollAmount;\n      } else if (isHiddenRight) {\n        // Scroll right to reveal the hidden tab at the desired position\n        const targetRightPosition =\n          tabListRect.right - rightOffset - ADJACENT_TAB_PEEK_WIDTH_PX;\n        const scrollAmount = tabRect.right - targetRightPosition;\n        tabList.scrollLeft += scrollAmount;\n      }\n    }, [selectedIndex]);\n\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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",
+  "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 { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.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 type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.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\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\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 [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\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\n    // When the selected tab is outside the visible area of the tablist (which\n    // scrolls horizontally when tabs overflow), scroll it into view. Also account\n    // for the arrow overlay buttons so the tab is not obscured behind them.\n    //\n    // Note: We intentionally avoid using `scrollIntoView()` here \u2014 it\n    // can cause unwanted vertical page scrolling.\n    useLayoutEffect(() => {\n      const tabList = ref.current;\n      if (!tabList) {\n        return;\n      }\n      const selectedTab = tabList.querySelector<HTMLElement>(\n        '[aria-selected=\"true\"]',\n      );\n      if (!selectedTab) {\n        return;\n      }\n\n      // Get current positions of the tablist container and selected tab\n      const tabListRect = tabList.getBoundingClientRect();\n      const tabRect = selectedTab.getBoundingClientRect();\n\n      // Calculate offsets for arrow buttons that overlay the edges\n      const leftArrow = tabList.previousElementSibling as HTMLElement | null;\n      const rightArrow = tabList.nextElementSibling as HTMLElement | null;\n      const leftOffset = leftArrow?.offsetWidth ?? 0;\n      const rightOffset = rightArrow?.offsetWidth ?? 0;\n\n      // Show part of adjacent tab to hint at more content\n      const ADJACENT_TAB_PEEK_WIDTH_PX = 24;\n\n      const isHiddenLeft = tabRect.left < tabListRect.left + leftOffset;\n      const isHiddenRight = tabRect.right > tabListRect.right - rightOffset;\n\n      if (isHiddenLeft) {\n        // Scroll left to reveal the hidden tab at the desired position\n        const targetLeftPosition =\n          tabListRect.left + leftOffset + ADJACENT_TAB_PEEK_WIDTH_PX;\n        const scrollAmount = targetLeftPosition - tabRect.left;\n        tabList.scrollLeft -= scrollAmount;\n      } else if (isHiddenRight) {\n        // Scroll right to reveal the hidden tab at the desired position\n        const targetRightPosition =\n          tabListRect.right - rightOffset - ADJACENT_TAB_PEEK_WIDTH_PX;\n        const scrollAmount = tabRect.right - targetRightPosition;\n        tabList.scrollLeft += scrollAmount;\n      }\n    }, [selectedIndex]);\n\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        {...restProps}\n        {...behavioralTrackingProps}\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-3-3";
-var tabsArrowWrapperCSS = "_1tfbrxp5-3-3-3";
-var tabsCSS = "_1tfbrxp0-3-3-3";
-var tabsWrapperCSS = "_1tfbrxp1-3-3-3";
-var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-3-3", right: "_1tfbrxp3-3-3-3", both: "_1tfbrxp4-3-3-3" };
+var tabsArrowButtonCSS = "_1tfbrxp6-3-5-0";
+var tabsArrowWrapperCSS = "_1tfbrxp5-3-5-0";
+var tabsCSS = "_1tfbrxp0-3-5-0";
+var tabsWrapperCSS = "_1tfbrxp1-3-5-0";
+var tabsWrapperOverflowCSS = { left: "_1tfbrxp2-3-5-0", right: "_1tfbrxp3-3-5-0", both: "_1tfbrxp4-3-5-0" };
 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-3-3';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-3-3';\nexport var tabsCSS = '_1tfbrxp0-3-3-3';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-3-3';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-3-3',right:'_1tfbrxp3-3-3-3',both:'_1tfbrxp4-3-3-3'};"],
+  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-5-0';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-5-0';\nexport var tabsCSS = '_1tfbrxp0-3-5-0';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-5-0';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-5-0',right:'_1tfbrxp3-3-5-0',both:'_1tfbrxp4-3-5-0'};"],
   "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/notification-settings/NotificationSettings.css

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

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

@@ -1,5 +1,5 @@
 import "./NotificationSettings.css";
-var overlayText = "_1cohdty0-3-3-3";
+var overlayText = "_1cohdty0-3-5-0";
 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-3-3';"],
+  "sourcesContent": ["import './NotificationSettings.css';\nexport var overlayText = '_1cohdty0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;",
   "names": []
 }

package/esm/notifications/toast/Toast.css

@@ -1,8 +1,8 @@
-._yjszxq0-3-3-3 {
+._yjszxq0-3-5-0 {
   display: flex;
   overflow: hidden;
 }
-._yjszxq1-3-3-3 {
+._yjszxq1-3-5-0 {
   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-3-3 {
+._yjszxq2-3-5-0 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-._yjszxq3-3-3-3 {
+._yjszxq3-3-5-0 {
   max-width: 100%;
 }
-._yjszxq3-3-3-3._yjszxq3-3-3-3 {
+._yjszxq3-3-5-0._yjszxq3-3-5-0 {
   overflow-wrap: anywhere;
 }

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

@@ -1,8 +1,8 @@
 import "./Toast.css";
-var toastCSS = "_yjszxq0-3-3-3";
-var toastFlexContainerCSS = "_yjszxq2-3-3-3";
-var toastIconCSS = "_yjszxq1-3-3-3";
-var toastTextCSS = "_yjszxq3-3-3-3";
+var toastCSS = "_yjszxq0-3-5-0";
+var toastFlexContainerCSS = "_yjszxq2-3-5-0";
+var toastIconCSS = "_yjszxq1-3-5-0";
+var toastTextCSS = "_yjszxq3-3-5-0";
 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-3-3';\nexport var toastFlexContainerCSS = '_yjszxq2-3-3-3';\nexport var toastIconCSS = '_yjszxq1-3-3-3';\nexport var toastTextCSS = '_yjszxq3-3-3-3';"],
+  "sourcesContent": ["import './Toast.css';\nexport var toastCSS = '_yjszxq0-3-5-0';\nexport var toastFlexContainerCSS = '_yjszxq2-3-5-0';\nexport var toastIconCSS = '_yjszxq1-3-5-0';\nexport var toastTextCSS = '_yjszxq3-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,wBAAwB;AAC5B,IAAI,eAAe;AACnB,IAAI,eAAe;",
   "names": []
 }

package/esm/notifications/toast/ToastContainer.css

@@ -1,4 +1,4 @@
-@keyframes _rxr5810-3-3-3 {
+@keyframes _rxr5810-3-5-0 {
   0% {
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
@@ -6,7 +6,7 @@
     transform: translateY(0);
   }
 }
-@keyframes _rxr5811-3-3-3 {
+@keyframes _rxr5811-3-5-0 {
   0% {
     transform: translateY(0);
   }
@@ -14,7 +14,7 @@
     transform: translateY(calc(100% + var(--dt-spacings-size-16, 16px)));
   }
 }
-@keyframes _rxr5812-3-3-3 {
+@keyframes _rxr5812-3-5-0 {
   0% {
     transform: scaleX(1);
   }
@@ -22,40 +22,39 @@
     transform: scaleX(0);
   }
 }
-._rxr5813-3-3-3 {
+._rxr5813-3-5-0 {
   overflow-y: auto;
   max-height: min(40vh, 400px);
   box-sizing: border-box;
 }
-.Toastify__toast-container {
+._rxr5813-3-5-0 .Toastify__toast-container {
   z-index: 9999;
   position: fixed;
   max-width: 400px;
-  width: calc(100% - 32px);
+  width: calc(100% - var(--dt-spacings-size-32, 32px));
   box-sizing: border-box;
 }
-.Toastify__toast-container--bottom-left {
+._rxr5813-3-5-0 .Toastify__toast-container--bottom-left {
   bottom: var(--dt-spacings-size-16, 16px);
   left: var(--dt-spacings-size-16, 16px);
   right: auto;
 }
-.Toastify__toast-container--bottom-left {
-  bottom: var(--dt-spacings-size-16, 16px);
-  left: var(--dt-spacings-size-16, 16px);
-  right: auto;
-}
-.Toastify__toast-container--bottom-right {
+._rxr5813-3-5-0 .Toastify__toast-container--bottom-right {
   bottom: var(--dt-spacings-size-16, 16px);
   left: auto;
   right: var(--dt-spacings-size-16, 16px);
 }
-.Toastify__toast-container--bottom-center {
+._rxr5813-3-5-0 .Toastify__toast-container--bottom-center {
   bottom: var(--dt-spacings-size-16, 16px);
   left: 50%;
   transform: translateX(-50%);
 }
-.Toastify__toast {
-  all: unset;
+._rxr5813-3-5-0 .Toastify__toast {
+  margin: 0;
+  align-items: start;
+  border: none;
+  font: inherit;
+  width: 100%;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   padding: 0;
   position: relative;
@@ -73,24 +72,24 @@
   margin-top: var(--dt-spacings-size-8, 8px);
   max-width: 100%;
 }
-.Toastify__toast-body {
+._rxr5813-3-5-0 .Toastify__toast-body {
   margin: auto 0;
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   overflow: hidden;
 }
-.Toastify__toast-body > div {
+._rxr5813-3-5-0 .Toastify__toast-body > div {
   flex: 1 1 auto;
   overflow: hidden;
 }
-.Toastify__toast-icon {
+._rxr5813-3-5-0 .Toastify__toast-icon {
   margin-inline-end: 10px;
   width: 20px;
   flex-shrink: 0;
   display: flex;
 }
-.Toastify__progress-bar {
+._rxr5813-3-5-0 .Toastify__progress-bar {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -99,17 +98,17 @@
   z-index: var(--toastify-z-index);
   opacity: 0;
 }
-.Toastify__progress-bar--animated {
-  animation: _rxr5812-3-3-3 1 forwards;
+._rxr5813-3-5-0 .Toastify__progress-bar--animated {
+  animation: _rxr5812-3-5-0 1 forwards;
 }
 .strato__toast__enter {
-  animation-name: _rxr5810-3-3-3;
+  animation-name: _rxr5810-3-5-0;
   animation-duration: var(--dt-animations-slide-in-duration-fast, 200ms);
   animation-timing-function: var(--dt-animations-slide-in-easing, cubic-bezier(0, 0, 0.2, 1));
   animation-fill-mode: both;
 }
 .strato__toast__exit {
-  animation-name: _rxr5811-3-3-3;
+  animation-name: _rxr5811-3-5-0;
   animation-duration: var(--dt-animations-slide-out-duration-fast, 150ms);
   animation-timing-function: var(--dt-animations-slide-out-easing, cubic-bezier(0.8, 0, 0.5, 1));
   animation-fill-mode: both;

package/esm/notifications/toast/ToastContainer.js

@@ -15,7 +15,7 @@ import {
 } from "react-toastify";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import { XmarkIcon } from "@dynatrace/strato-icons";
-import { toastsCSS } from "./ToastContainer.sty.js";
+import * as styles from "./ToastContainer.sty.js";
 import { Button } from "../../buttons/button/Button.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
@@ -106,15 +106,33 @@ const ToastContainer = forwardRef(
     }, [activeId]);
     useEffect(() => {
       const id = containerId.current;
+      let pendingObserver = null;
       const unsubscribeOnChange = toast.onChange((payload) => {
         if (payload.status === "removed") {
-          window.requestAnimationFrame(() => {
-            handleFocusOnKeydown();
+          const container = containerRef.current;
+          if (!container) {
+            return;
+          }
+          pendingObserver?.disconnect();
+          pendingObserver = new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+              if (mutation.removedNodes.length > 0) {
+                pendingObserver?.disconnect();
+                pendingObserver = null;
+                handleFocusOnKeydown();
+                return;
+              }
+            }
+          });
+          pendingObserver.observe(container, {
+            childList: true,
+            subtree: true
           });
         }
       });
       return function cleanup() {
         unsubscribeOnChange();
+        pendingObserver?.disconnect();
         if (toastContainerStore.getState().currentContainerId === id) {
           toastContainerStore.setState({ currentContainerId: null });
         }
@@ -128,7 +146,7 @@ const ToastContainer = forwardRef(
         "div",
         {
           ref: rootRef,
-          className: clsx(consumerClassName, toastsCSS),
+          className: clsx(consumerClassName, styles.root),
           style: consumerStyle,
           "data-toast-container": true,
           "data-testid": dataTestId,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/ToastContainer.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\nimport {\n  ToastContainer as ReactToastifyContainer,\n  cssTransition,\n  toast,\n} from 'react-toastify';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { toastsCSS } from './ToastContainer.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { createStore } from '../../core/store/store.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.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 { Flex } from '../../layouts/flex/Flex.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\n\nconst COMPONENT_NAME = 'ToastContainer';\n\ntype ToastContainerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  AriaLabelingProps;\n\nlet unique = 0;\n\nconst toastContainerStore = createStore<{ currentContainerId: number | null }>({\n  currentContainerId: null,\n});\n\n/**\n * Use Toast to show users live, time-sensitive messages about system status changes. Toast variants for four different kinds of messages are provided.\n * @public\n */\nexport const ToastContainer = forwardRef<HTMLDivElement, ToastContainerProps>(\n  (props, forwardedRef) => {\n    const {\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    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n    const { 'aria-label': ariaLabel, ...remainingAriaLabelingProps } =\n      ariaLabelingProps;\n\n    const [handleFocusOnKeydown, closedOnKeydown] = useKeyboardFocusHandling(\n      closeButtonRef,\n      containerRef,\n    );\n\n    const rootRef = useMergeRefs([forwardedRef, containerRef]);\n\n    const CloseButton = ({\n      closeToast,\n    }: {\n      closeToast: (event: ReactMouseEvent<HTMLElement>) => void;\n    }) => {\n      const intl = useIntl();\n\n      const closeButtonLabel = intl.formatMessage({\n        defaultMessage: 'Close notification',\n        id: '7IzOa/lx4Dc/qLGo',\n        description: 'Aria-label for the close notification button.',\n      });\n\n      // Handle the escape key\n      const closeToastOnEsc = (event: ReactKeyboardEvent) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          closedOnKeydown.current = true;\n          // Limited typing on the end of the react-toastify library\n          // requires a `React.MouseEvent` here, but they never actually\n          // use anything very specific to the MouseEvent.\n          closeToast(event as unknown as ReactMouseEvent<HTMLElement>);\n        }\n      };\n\n      /** Only when the toast is closed by the keyboard we need to handle the focus */\n      const detectCloseOnKeyDown = useCallback(() => {\n        closedOnKeydown.current = true;\n      }, []);\n\n      return (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          paddingTop={6}\n          paddingRight={6}\n          onKeyDown={closeToastOnEsc}\n        >\n          <Button\n            onKeyDown={detectCloseOnKeyDown}\n            onClick={closeToast}\n            aria-label={closeButtonLabel}\n            ref={closeButtonRef}\n            variant=\"default\"\n            onPointerDown={(e: ReactMouseEvent) => e.stopPropagation()}\n            data-dt-name=\"CloseX\"\n          >\n            <Button.Prefix>\n              <XmarkIcon />\n            </Button.Prefix>\n          </Button>\n        </Flex>\n      );\n    };\n\n    const containerId = useRef(++unique);\n\n    const activeId = useSyncExternalStoreWithSelector(\n      toastContainerStore.subscribe,\n      () => toastContainerStore.getState(),\n      null,\n      (state) => state.currentContainerId,\n    );\n\n    useEffect(() => {\n      const id = containerId.current;\n      if (toastContainerStore.getState().currentContainerId === null) {\n        toastContainerStore.setState({ currentContainerId: id });\n      }\n    }, [activeId]);\n\n    useEffect(() => {\n      const id = containerId.current;\n      const unsubscribeOnChange = toast.onChange((payload) => {\n        if (payload.status === 'removed') {\n          // Need to wait for one tick here, otherwise the now removed toast is still\n          // in the DOM and can be focused.\n          window.requestAnimationFrame(() => {\n            handleFocusOnKeydown();\n          });\n        }\n      });\n\n      return function cleanup() {\n        unsubscribeOnChange();\n\n        if (toastContainerStore.getState().currentContainerId === id) {\n          toastContainerStore.setState({ currentContainerId: null });\n        }\n      };\n      // excluded handleFocusOnKeydown dependency, because this effect needs to be executed once for toast.onChange\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    if (activeId !== containerId.current) {\n      return null;\n    }\n\n    return createPortal(\n      <div\n        ref={rootRef}\n        className={clsx(consumerClassName, toastsCSS)}\n        style={consumerStyle}\n        // This data attribute is necessary to ensure the correct stacking order with the Microguide and FeatureHighlight.\n        data-toast-container\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...remainingAriaLabelingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <ReactToastifyContainer\n          hideProgressBar={true}\n          draggable={false}\n          closeButton={CloseButton}\n          limit={5}\n          pauseOnHover={true}\n          closeOnClick={false}\n          newestOnTop={false}\n          // Have the default if not provided (\"Notifications Alt+T\") or custom.\n          {...(ariaLabel && { 'aria-label': ariaLabel })}\n          transition={cssTransition({\n            collapseDuration: 200,\n            enter: 'strato__toast__enter',\n            exit: 'strato__toast__exit',\n          })}\n        />\n      </div>,\n      document.body,\n    );\n  },\n);\n\n(\n  ToastContainer as typeof ToastContainer & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\nimport {\n  ToastContainer as ReactToastifyContainer,\n  cssTransition,\n  toast,\n} from 'react-toastify';\nimport { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './ToastContainer.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { createStore } from '../../core/store/store.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.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 { Flex } from '../../layouts/flex/Flex.js';\nimport { useKeyboardFocusHandling } from '../../overlays/hooks/useKeyboardFocusHandling.js';\n\nconst COMPONENT_NAME = 'ToastContainer';\n\ntype ToastContainerProps = PropsWithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  AriaLabelingProps;\n\nlet unique = 0;\n\nconst toastContainerStore = createStore<{ currentContainerId: number | null }>({\n  currentContainerId: null,\n});\n\n/**\n * Use Toast to show users live, time-sensitive messages about system status changes. Toast variants for four different kinds of messages are provided.\n * @public\n */\nexport const ToastContainer = forwardRef<HTMLDivElement, ToastContainerProps>(\n  (props, forwardedRef) => {\n    const {\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    const closeButtonRef = useRef<HTMLButtonElement>(null);\n    const containerRef = useRef<HTMLDivElement | null>(null);\n\n    const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n    const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n    const { 'aria-label': ariaLabel, ...remainingAriaLabelingProps } =\n      ariaLabelingProps;\n\n    const [handleFocusOnKeydown, closedOnKeydown] = useKeyboardFocusHandling(\n      closeButtonRef,\n      containerRef,\n    );\n\n    const rootRef = useMergeRefs([forwardedRef, containerRef]);\n\n    const CloseButton = ({\n      closeToast,\n    }: {\n      closeToast: (event: ReactMouseEvent<HTMLElement>) => void;\n    }) => {\n      const intl = useIntl();\n\n      const closeButtonLabel = intl.formatMessage({\n        defaultMessage: 'Close notification',\n        id: '7IzOa/lx4Dc/qLGo',\n        description: 'Aria-label for the close notification button.',\n      });\n\n      // Handle the escape key\n      const closeToastOnEsc = (event: ReactKeyboardEvent) => {\n        if (event.key === 'Escape') {\n          event.preventDefault();\n          closedOnKeydown.current = true;\n          // Limited typing on the end of the react-toastify library\n          // requires a `React.MouseEvent` here, but they never actually\n          // use anything very specific to the MouseEvent.\n          closeToast(event as unknown as ReactMouseEvent<HTMLElement>);\n        }\n      };\n\n      /** Only when the toast is closed by the keyboard we need to handle the focus */\n      const detectCloseOnKeyDown = useCallback(() => {\n        closedOnKeydown.current = true;\n      }, []);\n\n      return (\n        <Flex\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          paddingTop={6}\n          paddingRight={6}\n          onKeyDown={closeToastOnEsc}\n        >\n          <Button\n            onKeyDown={detectCloseOnKeyDown}\n            onClick={closeToast}\n            aria-label={closeButtonLabel}\n            ref={closeButtonRef}\n            variant=\"default\"\n            onPointerDown={(e: ReactMouseEvent) => e.stopPropagation()}\n            data-dt-name=\"CloseX\"\n          >\n            <Button.Prefix>\n              <XmarkIcon />\n            </Button.Prefix>\n          </Button>\n        </Flex>\n      );\n    };\n\n    const containerId = useRef(++unique);\n\n    const activeId = useSyncExternalStoreWithSelector(\n      toastContainerStore.subscribe,\n      () => toastContainerStore.getState(),\n      null,\n      (state) => state.currentContainerId,\n    );\n\n    useEffect(() => {\n      const id = containerId.current;\n      if (toastContainerStore.getState().currentContainerId === null) {\n        toastContainerStore.setState({ currentContainerId: id });\n      }\n    }, [activeId]);\n\n    useEffect(() => {\n      const id = containerId.current;\n      let pendingObserver: MutationObserver | null = null;\n\n      const unsubscribeOnChange = toast.onChange((payload) => {\n        if (payload.status === 'removed') {\n          const container = containerRef.current;\n          if (!container) {\n            return;\n          }\n\n          // in react-toastify v11.1.0+, toast.onChange with status: 'removed' fires synchronously before the exit animation,\n          // as opposed to firing after the exit animation as it was before. Therefore, a mutation observer is needed\n          // to wait for the toast element to actually be removed from DOM before handling focus.\n          pendingObserver?.disconnect();\n\n          pendingObserver = new MutationObserver((mutations) => {\n            for (const mutation of mutations) {\n              if (mutation.removedNodes.length > 0) {\n                pendingObserver?.disconnect();\n                pendingObserver = null;\n                handleFocusOnKeydown();\n                return;\n              }\n            }\n          });\n\n          pendingObserver.observe(container, {\n            childList: true,\n            subtree: true,\n          });\n        }\n      });\n\n      return function cleanup() {\n        unsubscribeOnChange();\n        pendingObserver?.disconnect();\n\n        if (toastContainerStore.getState().currentContainerId === id) {\n          toastContainerStore.setState({ currentContainerId: null });\n        }\n      };\n      // excluded handleFocusOnKeydown dependency, because this effect needs to be executed once for toast.onChange\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    if (activeId !== containerId.current) {\n      return null;\n    }\n\n    return createPortal(\n      <div\n        ref={rootRef}\n        className={clsx(consumerClassName, styles.root)}\n        style={consumerStyle}\n        // This data attribute is necessary to ensure the correct stacking order with the Microguide and FeatureHighlight.\n        data-toast-container\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        {...remainingAriaLabelingProps}\n        {...forwardProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <ReactToastifyContainer\n          hideProgressBar={true}\n          draggable={false}\n          closeButton={CloseButton}\n          limit={5}\n          pauseOnHover={true}\n          closeOnClick={false}\n          newestOnTop={false}\n          // Have the default if not provided (\"Notifications Alt+T\") or custom.\n          {...(ariaLabel && { 'aria-label': ariaLabel })}\n          transition={cssTransition({\n            collapseDuration: 200,\n            enter: 'strato__toast__enter',\n            exit: 'strato__toast__exit',\n          })}\n        />\n      </div>,\n      document.body,\n    );\n  },\n);\n\n(\n  ToastContainer as typeof ToastContainer & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "./ToastContainer.css";
-var toastsCSS = "_rxr5813-3-3-3";
+var root = "_rxr5813-3-5-0";
 export {
-  toastsCSS
+  root
 };
 //# sourceMappingURL=ToastContainer.sty.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/notifications/toast/ToastContainer.css.ts"],
-  "sourcesContent": ["import './ToastContainer.css';\nexport var toastsCSS = '_rxr5813-3-3-3';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
+  "sourcesContent": ["import './ToastContainer.css';\nexport var root = '_rxr5813-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/overlays/drawer/Drawer.css

@@ -1,4 +1,4 @@
-._14971970-3-3-3 {
+._14971970-3-5-0 {
   pointer-events: initial;
   position: absolute;
   height: 100vh;
@@ -7,40 +7,40 @@
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._14971971-3-3-3 {
+._14971971-3-5-0 {
   left: 0;
   right: auto;
   border-radius: 0 var(--dt-borders-radius-surface-default, 12px) var(--dt-borders-radius-surface-default, 12px) 0;
 }
-._14971972-3-3-3 {
+._14971972-3-5-0 {
   left: auto;
   right: 0;
   border-radius: var(--dt-borders-radius-surface-default, 12px) 0 0 var(--dt-borders-radius-surface-default, 12px);
 }
-._14971973-3-3-3 {
+._14971973-3-5-0 {
   width: 25%;
   min-width: min(calc(100% - 64px), 320px);
 }
-._14971974-3-3-3 {
+._14971974-3-5-0 {
   width: 50%;
   min-width: min(calc(100% - 56px), 640px);
 }
-._14971975-3-3-3 {
+._14971975-3-5-0 {
   width: 75%;
   min-width: min(calc(100% - 48px), 960px);
 }
-._14971976-3-3-3 {
+._14971976-3-5-0 {
   width: 100%;
   border-radius: 0;
 }
-._14971977-3-3-3 {
+._14971977-3-5-0 {
   position: relative;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   z-index: var(--dt-elevations-default, 1);
 }
-._14971978-3-3-3 {
+._14971978-3-5-0 {
   width: 100%;
   height: 100%;
 }

package/esm/overlays/drawer/Drawer.sty.js

@@ -1,9 +1,9 @@
 import "./Drawer.css";
-var DrawerBackdropCSS = "_14971977-3-3-3";
-var DrawerCSS = "_14971970-3-3-3";
-var DrawerContentCSS = "_14971978-3-3-3";
-var DrawerPlacementCSS = { left: "_14971971-3-3-3", right: "_14971972-3-3-3" };
-var DrawerWidthStyles = { narrow: "_14971973-3-3-3", medium: "_14971974-3-3-3", wide: "_14971975-3-3-3", full: "_14971976-3-3-3" };
+var DrawerBackdropCSS = "_14971977-3-5-0";
+var DrawerCSS = "_14971970-3-5-0";
+var DrawerContentCSS = "_14971978-3-5-0";
+var DrawerPlacementCSS = { left: "_14971971-3-5-0", right: "_14971972-3-5-0" };
+var DrawerWidthStyles = { narrow: "_14971973-3-5-0", medium: "_14971974-3-5-0", wide: "_14971975-3-5-0", full: "_14971976-3-5-0" };
 export {
   DrawerBackdropCSS,
   DrawerCSS,

package/esm/overlays/drawer/Drawer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/overlays/drawer/Drawer.css.ts"],
-  "sourcesContent": ["import './Drawer.css';\nexport var DrawerBackdropCSS = '_14971977-3-3-3';\nexport var DrawerCSS = '_14971970-3-3-3';\nexport var DrawerContentCSS = '_14971978-3-3-3';\nexport var DrawerPlacementCSS = {left:'_14971971-3-3-3',right:'_14971972-3-3-3'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-3-3',medium:'_14971974-3-3-3',wide:'_14971975-3-3-3',full:'_14971976-3-3-3'};"],
+  "sourcesContent": ["import './Drawer.css';\nexport var DrawerBackdropCSS = '_14971977-3-5-0';\nexport var DrawerCSS = '_14971970-3-5-0';\nexport var DrawerContentCSS = '_14971978-3-5-0';\nexport var DrawerPlacementCSS = {left:'_14971971-3-5-0',right:'_14971972-3-5-0'};\nexport var DrawerWidthStyles = {narrow:'_14971973-3-5-0',medium:'_14971974-3-5-0',wide:'_14971975-3-5-0',full:'_14971976-3-5-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,YAAY;AAChB,IAAI,mBAAmB;AACvB,IAAI,qBAAqB,EAAC,MAAK,mBAAkB,OAAM,kBAAiB;AACxE,IAAI,oBAAoB,EAAC,QAAO,mBAAkB,QAAO,mBAAkB,MAAK,mBAAkB,MAAK,kBAAiB;",
   "names": []
 }

package/esm/overlays/hooks/usePress.js

@@ -194,6 +194,9 @@ function usePress(props) {
     const pressProps2 = {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       onKeyDown(e) {
+        if (e.metaKey || e.ctrlKey || e.altKey) {
+          return;
+        }
         const currentTarget = e.currentTarget;
         if (isValidKeyboardEvent(e.nativeEvent, currentTarget) && isValidKeyboardEvent(e, currentTarget) && currentTarget.contains(e.target)) {
           if (shouldPreventDefaultKeyboard(e.target, e.key)) {