@dynatrace/strato-components 3.11.1 → 3.11.3

package/esm/navigation/menu/MobileMenu.css

@@ -1,4 +1,4 @@
-@keyframes _1y10jf5-3-11-1 {
+@keyframes _1y10jf5-3-11-3 {
   from {
     transform: translateX(100%);
   }
@@ -6,7 +6,7 @@
     transform: translateX(0);
   }
 }
-@keyframes _1y10jf6-3-11-1 {
+@keyframes _1y10jf6-3-11-3 {
   from {
     transform: translateX(-100%);
   }
@@ -14,7 +14,7 @@
     transform: translateX(0);
   }
 }
-._1y10jf0-3-11-1 {
+._1y10jf0-3-11-3 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
@@ -26,12 +26,12 @@
   width: 240px;
   max-width: 100dvw;
 }
-._1y10jf1-3-11-1 {
+._1y10jf1-3-11-3 {
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   flex-shrink: 0;
   padding: var(--dt-spacings-size-4, 4px);
 }
-._1y10jf2-3-11-1 {
+._1y10jf2-3-11-3 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-8, 8px);
@@ -47,13 +47,13 @@
   text-align: left;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1y10jf2-3-11-1:hover {
+._1y10jf2-3-11-3:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1y10jf2-3-11-1:active {
+._1y10jf2-3-11-3:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1y10jf3-3-11-1 {
+._1y10jf3-3-11-3 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-8, 8px);
@@ -61,7 +61,7 @@
   flex: 1;
   min-width: 0;
 }
-._1y10jf4-3-11-1 {
+._1y10jf4-3-11-3 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -69,14 +69,14 @@
   flex: 1;
   min-width: 0;
 }
-._1y10jf7-3-11-1 {
+._1y10jf7-3-11-3 {
   flex: 1;
   overflow-y: auto;
   padding: var(--dt-spacings-size-4, 4px);
 }
-._1y10jf8-3-11-1 {
-  animation: _1y10jf5-3-11-1 200ms ease-out;
+._1y10jf8-3-11-3 {
+  animation: _1y10jf5-3-11-3 200ms ease-out;
 }
-._1y10jf9-3-11-1 {
-  animation: _1y10jf6-3-11-1 200ms ease-out;
+._1y10jf9-3-11-3 {
+  animation: _1y10jf6-3-11-3 200ms ease-out;
 }

package/esm/navigation/menu/MobileMenu.sty.js

@@ -1,12 +1,12 @@
 import "./MobileMenu.css";
-var backButton = "_1y10jf2-3-11-1";
-var body = "_1y10jf7-3-11-1";
-var bodyAnimatedBack = "_1y10jf9-3-11-1";
-var bodyAnimatedForward = "_1y10jf8-3-11-1";
-var header = "_1y10jf1-3-11-1";
-var headerTitleText = "_1y10jf4-3-11-1";
-var headerTitleWrapper = "_1y10jf3-3-11-1";
-var panel = "_1y10jf0-3-11-1";
+var backButton = "_1y10jf2-3-11-3";
+var body = "_1y10jf7-3-11-3";
+var bodyAnimatedBack = "_1y10jf9-3-11-3";
+var bodyAnimatedForward = "_1y10jf8-3-11-3";
+var header = "_1y10jf1-3-11-3";
+var headerTitleText = "_1y10jf4-3-11-3";
+var headerTitleWrapper = "_1y10jf3-3-11-3";
+var panel = "_1y10jf0-3-11-3";
 export {
   backButton,
   body,

package/esm/navigation/menu/MobileMenu.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/MobileMenu.css.ts"],
-  "sourcesContent": ["import './MobileMenu.css';\nexport var backButton = '_1y10jf2-3-11-1';\nexport var body = '_1y10jf7-3-11-1';\nexport var bodyAnimatedBack = '_1y10jf9-3-11-1';\nexport var bodyAnimatedForward = '_1y10jf8-3-11-1';\nexport var header = '_1y10jf1-3-11-1';\nexport var headerTitleText = '_1y10jf4-3-11-1';\nexport var headerTitleWrapper = '_1y10jf3-3-11-1';\nexport var panel = '_1y10jf0-3-11-1';"],
+  "sourcesContent": ["import './MobileMenu.css';\nexport var backButton = '_1y10jf2-3-11-3';\nexport var body = '_1y10jf7-3-11-3';\nexport var bodyAnimatedBack = '_1y10jf9-3-11-3';\nexport var bodyAnimatedForward = '_1y10jf8-3-11-3';\nexport var header = '_1y10jf1-3-11-3';\nexport var headerTitleText = '_1y10jf4-3-11-3';\nexport var headerTitleWrapper = '_1y10jf3-3-11-3';\nexport var panel = '_1y10jf0-3-11-3';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,OAAO;AACX,IAAI,mBAAmB;AACvB,IAAI,sBAAsB;AAC1B,IAAI,SAAS;AACb,IAAI,kBAAkB;AACtB,IAAI,qBAAqB;AACzB,IAAI,QAAQ;",
   "names": []
 }

package/esm/navigation/menu/MobileSub.js

@@ -5,20 +5,17 @@ import {
   useContext,
   useMemo
 } from "react";
-import { isElement } from "react-is";
 import { MobileMenuNavigationContext } from "./contexts/MobileMenuNavigationContext.js";
 import { MobileSubTrigger } from "./MobileSubTrigger.js";
 import { SubContent } from "./SubContent.js";
 import { SubTrigger } from "./SubTrigger.js";
+import { isSlot } from "../../core/utils/is-slot.js";
 function getMobileSubSlots(children) {
   const slots = { trigger: null, contentChildren: null };
   Children.forEach(children, (child) => {
-    if (!isElement(child)) {
-      return;
-    }
-    if (child.type === SubTrigger) {
+    if (isSlot(child, SubTrigger)) {
       slots.trigger = child;
-    } else if (child.type === SubContent) {
+    } else if (isSlot(child, SubContent)) {
       slots.contentChildren = child.props.children;
     }
   });

package/esm/navigation/menu/MobileSub.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/MobileSub.tsx"],
-  "sourcesContent": ["import {\n  Children,\n  useCallback,\n  useContext,\n  useMemo,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { MobileMenuNavigationContext } from './contexts/MobileMenuNavigationContext.js';\nimport { MobileSubTrigger } from './MobileSubTrigger.js';\nimport { SubContent } from './SubContent.js';\nimport { type MenuSubTriggerProps, SubTrigger } from './SubTrigger.js';\nimport { type MenuSubProps } from './types.js';\n\ntype MobileSubSlots = {\n  trigger: ReactElement<MenuSubTriggerProps> | null;\n  contentChildren: ReactNode;\n};\n\nfunction getMobileSubSlots(children: ReactNode): MobileSubSlots {\n  const slots: MobileSubSlots = { trigger: null, contentChildren: null };\n\n  Children.forEach(children, (child) => {\n    if (!isElement(child)) {\n      return;\n    }\n    if (child.type === SubTrigger) {\n      slots.trigger = child as ReactElement<MenuSubTriggerProps>;\n    } else if (child.type === SubContent) {\n      slots.contentChildren = (\n        child as ReactElement<{ children?: ReactNode }>\n      ).props.children;\n    }\n  });\n\n  return slots;\n}\n\n/**\n * Mobile-only Sub that drills into nested content instead of opening a popup.\n * @internal\n */\nexport const MobileSub = (props: MenuSubProps) => {\n  const { children } = props;\n  const { push } = useContext(MobileMenuNavigationContext);\n  const slots = useMemo(() => getMobileSubSlots(children), [children]);\n\n  const triggerProps: Partial<MenuSubTriggerProps> = slots.trigger?.props ?? {};\n\n  const handleDrillDown = useCallback(() => {\n    push({\n      title: triggerProps.children,\n      content: slots.contentChildren,\n    });\n  }, [push, triggerProps.children, slots.contentChildren]);\n\n  return (\n    <MobileSubTrigger\n      onDrillDown={handleDrillDown}\n      disabled={triggerProps.disabled}\n      aria-label={triggerProps['aria-label']}\n      aria-labelledby={triggerProps['aria-labelledby']}\n      aria-describedby={triggerProps['aria-describedby']}\n      aria-details={triggerProps['aria-details']}\n    >\n      {triggerProps.children}\n    </MobileSubTrigger>\n  );\n};\n\n(MobileSub as typeof MobileSub & { displayName: string }).displayName =\n  'Menu.Sub';\n"],
-  "mappings": "AA2DI;AA3DJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,iBAAiB;AAE1B,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAmC,kBAAkB;AAQrD,SAAS,kBAAkB,UAAqC;AAC9D,QAAM,QAAwB,EAAE,SAAS,MAAM,iBAAiB,KAAK;AAErE,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,CAAC,UAAU,KAAK,GAAG;AACrB;AAAA,IACF;AACA,QAAI,MAAM,SAAS,YAAY;AAC7B,YAAM,UAAU;AAAA,IAClB,WAAW,MAAM,SAAS,YAAY;AACpC,YAAM,kBACJ,MACA,MAAM;AAAA,IACV;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAMO,MAAM,YAAY,CAAC,UAAwB;AAChD,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,KAAK,IAAI,WAAW,2BAA2B;AACvD,QAAM,QAAQ,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAEnE,QAAM,eAA6C,MAAM,SAAS,SAAS,CAAC;AAE5E,QAAM,kBAAkB,YAAY,MAAM;AACxC,SAAK;AAAA,MACH,OAAO,aAAa;AAAA,MACpB,SAAS,MAAM;AAAA,IACjB,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,aAAa,UAAU,MAAM,eAAe,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,UAAU,aAAa;AAAA,MACvB,cAAY,aAAa,YAAY;AAAA,MACrC,mBAAiB,aAAa,iBAAiB;AAAA,MAC/C,oBAAkB,aAAa,kBAAkB;AAAA,MACjD,gBAAc,aAAa,cAAc;AAAA,MAExC,uBAAa;AAAA;AAAA,EAChB;AAEJ;AAEC,UAAyD,cACxD;",
+  "sourcesContent": ["import {\n  Children,\n  useCallback,\n  useContext,\n  useMemo,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { MobileMenuNavigationContext } from './contexts/MobileMenuNavigationContext.js';\nimport { MobileSubTrigger } from './MobileSubTrigger.js';\nimport { SubContent } from './SubContent.js';\nimport { type MenuSubTriggerProps, SubTrigger } from './SubTrigger.js';\nimport { type MenuSubProps } from './types.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\n\ntype MobileSubSlots = {\n  trigger: ReactElement<MenuSubTriggerProps> | null;\n  contentChildren: ReactNode;\n};\n\nfunction getMobileSubSlots(children: ReactNode): MobileSubSlots {\n  const slots: MobileSubSlots = { trigger: null, contentChildren: null };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, SubTrigger)) {\n      slots.trigger = child;\n    } else if (isSlot(child, SubContent)) {\n      slots.contentChildren = (\n        child as ReactElement<{ children?: ReactNode }>\n      ).props.children;\n    }\n  });\n\n  return slots;\n}\n\n/**\n * Mobile-only Sub that drills into nested content instead of opening a popup.\n * @internal\n */\nexport const MobileSub = (props: MenuSubProps) => {\n  const { children } = props;\n  const { push } = useContext(MobileMenuNavigationContext);\n  const slots = useMemo(() => getMobileSubSlots(children), [children]);\n\n  const triggerProps: Partial<MenuSubTriggerProps> = slots.trigger?.props ?? {};\n\n  const handleDrillDown = useCallback(() => {\n    push({\n      title: triggerProps.children,\n      content: slots.contentChildren,\n    });\n  }, [push, triggerProps.children, slots.contentChildren]);\n\n  return (\n    <MobileSubTrigger\n      onDrillDown={handleDrillDown}\n      disabled={triggerProps.disabled}\n      aria-label={triggerProps['aria-label']}\n      aria-labelledby={triggerProps['aria-labelledby']}\n      aria-describedby={triggerProps['aria-describedby']}\n      aria-details={triggerProps['aria-details']}\n    >\n      {triggerProps.children}\n    </MobileSubTrigger>\n  );\n};\n\n(MobileSub as typeof MobileSub & { displayName: string }).displayName =\n  'Menu.Sub';\n"],
+  "mappings": "AAwDI;AAxDJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAmC,kBAAkB;AAErD,SAAS,cAAc;AAOvB,SAAS,kBAAkB,UAAqC;AAC9D,QAAM,QAAwB,EAAE,SAAS,MAAM,iBAAiB,KAAK;AAErE,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,UAAU,GAAG;AAC7B,YAAM,UAAU;AAAA,IAClB,WAAW,OAAO,OAAO,UAAU,GAAG;AACpC,YAAM,kBACJ,MACA,MAAM;AAAA,IACV;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAMO,MAAM,YAAY,CAAC,UAAwB;AAChD,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,KAAK,IAAI,WAAW,2BAA2B;AACvD,QAAM,QAAQ,QAAQ,MAAM,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAEnE,QAAM,eAA6C,MAAM,SAAS,SAAS,CAAC;AAE5E,QAAM,kBAAkB,YAAY,MAAM;AACxC,SAAK;AAAA,MACH,OAAO,aAAa;AAAA,MACpB,SAAS,MAAM;AAAA,IACjB,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,aAAa,UAAU,MAAM,eAAe,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,UAAU,aAAa;AAAA,MACvB,cAAY,aAAa,YAAY;AAAA,MACrC,mBAAiB,aAAa,iBAAiB;AAAA,MAC/C,oBAAkB,aAAa,kBAAkB;AAAA,MACjD,gBAAc,aAAa,cAAc;AAAA,MAExC,uBAAa;AAAA;AAAA,EAChB;AAEJ;AAEC,UAAyD,cACxD;",
   "names": []
 }

package/esm/navigation/menu/Sub.js

@@ -7,7 +7,6 @@ import {
   isValidElement,
   cloneElement
 } from "react";
-import { isElement } from "react-is";
 import { MenuSubContext } from "./contexts/MenuSubContext.js";
 import { MobileMenuModeContext } from "./contexts/MobileMenuModeContext.js";
 import { useMenuAutoClose } from "./hooks/useMenuAutoClose.js";
@@ -15,6 +14,7 @@ import { MobileSub } from "./MobileSub.js";
 import { SubContent } from "./SubContent.js";
 import { SubTrigger } from "./SubTrigger.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
+import { isSlot } from "../../core/utils/is-slot.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 function registerTabHandlers(children, handleTabKeyPressed) {
   return Children.map(children, (child) => {
@@ -34,17 +34,10 @@ function getSubSlots(children) {
     freeform: []
   };
   Children.forEach(children, (child) => {
-    if (isElement(child)) {
-      switch (child.type) {
-        case SubTrigger:
-          slots.trigger = child;
-          break;
-        case SubContent:
-          slots.content.push(child);
-          break;
-        default:
-          slots.freeform.push(child);
-      }
+    if (isSlot(child, SubTrigger)) {
+      slots.trigger = child;
+    } else if (isSlot(child, SubContent)) {
+      slots.content.push(child);
     } else {
       slots.freeform.push(child);
     }

package/esm/navigation/menu/Sub.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Sub.tsx"],
-  "sourcesContent": ["import { Sub as RadixSub } from '@radix-ui/react-dropdown-menu';\nimport {\n  useMemo,\n  useContext,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { MenuSubContext } from './contexts/MenuSubContext.js';\nimport { MobileMenuModeContext } from './contexts/MobileMenuModeContext.js';\nimport { useMenuAutoClose } from './hooks/useMenuAutoClose.js';\nimport { MobileSub } from './MobileSub.js';\nimport { SubContent, type MenuSubContentProps } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { type MenuSubProps } from './types.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\nexport type { MenuSubProps };\n\ntype SubSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over all top-level SubContent nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuSubContentProps>(child) &&\n      child.type === SubContent\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getSubSlots(children: ReactNode) {\n  const slots: SubSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case SubTrigger:\n          slots.trigger = child;\n          break;\n        case SubContent:\n          slots.content.push(child);\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * @public\n */\nexport const Sub = (props: MenuSubProps) => {\n  const isMobile = useContext(MobileMenuModeContext);\n\n  const {\n    defaultOpen: defaultValue,\n    open: value,\n    onOpenChange: onChange,\n    children,\n    ...remainingProps\n  } = props;\n  const [open, updateOpen] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const slots = useMemo(\n    () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),\n    [children, updateOpen],\n  );\n\n  useMenuAutoClose(open, updateOpen);\n\n  const subContextValue = useMemo(\n    () => ({\n      isOpen: open ?? false,\n      isDefaultOpen: defaultValue ?? false,\n      setIsOpen: updateOpen,\n    }),\n    [open, defaultValue, updateOpen],\n  );\n\n  if (isMobile) {\n    return <MobileSub {...props} />;\n  }\n\n  return (\n    <MenuSubContext.Provider value={subContextValue}>\n      <RadixSub\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        {...remainingProps}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixSub>\n    </MenuSubContext.Provider>\n  );\n};\n\n(Sub as typeof Sub & { displayName: string }).displayName = 'Menu.Sub';\n"],
-  "mappings": "AAgHW,cAKL,YALK;AAhHX,SAAS,OAAO,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,kBAA4C;AACrD,SAAS,kBAAkB;AAE3B,SAAS,4BAA4B;AACrC,SAAS,cAAc,mBAAmB;AAW1C,SAAS,oBACP,UACA,qBACW;AACX,SAAO,SAAS,IAAI,UAAU,CAAC,UAAqB;AAClD,WAAO,eAAoC,KAAK,KAC9C,MAAM,SAAS,aACb;AAAA,MACE;AAAA,MACA,YAAY,MAAM,OAAO;AAAA,QACvB,kBAAkB;AAAA,MACpB,CAAC;AAAA,MACD,MAAM,MAAM;AAAA,IACd,IACA;AAAA,EACN,CAAC;AACH;AAGA,SAAS,YAAY,UAAqB;AACxC,QAAM,QAAkB;AAAA,IACtB,SAAS;AAAA,IACT,SAAS,CAAC;AAAA,IACV,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AACH,gBAAM,UAAU;AAChB;AAAA,QACF,KAAK;AACH,gBAAM,QAAQ,KAAK,KAAK;AACxB;AAAA,QACF;AACE,gBAAM,SAAS,KAAK,KAAK;AAAA,MAC7B;AAAA,IACF,OAAO;AACL,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAKO,MAAM,MAAM,CAAC,UAAwB;AAC1C,QAAM,WAAW,WAAW,qBAAqB;AAEjD,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,MAAM,UAAU,IAAI,qBAAqB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,oBAAoB,UAAU,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,IACxE,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,mBAAiB,MAAM,UAAU;AAEjC,QAAM,kBAAkB;AAAA,IACtB,OAAO;AAAA,MACL,QAAQ,QAAQ;AAAA,MAChB,eAAe,gBAAgB;AAAA,MAC/B,WAAW;AAAA,IACb;AAAA,IACA,CAAC,MAAM,cAAc,UAAU;AAAA,EACjC;AAEA,MAAI,UAAU;AACZ,WAAO,oBAAC,aAAW,GAAG,OAAO;AAAA,EAC/B;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,iBAC9B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,MAC1C,GAAG;AAAA,MAEH;AAAA,cAAM,YAAY,QAAQ,MAAM;AAAA,QAChC,QAAQ,MAAM;AAAA,QACd,MAAM;AAAA;AAAA;AAAA,EACT,GACF;AAEJ;AAEC,IAA6C,cAAc;",
+  "sourcesContent": ["import { Sub as RadixSub } from '@radix-ui/react-dropdown-menu';\nimport {\n  useMemo,\n  useContext,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\n\nimport { MenuSubContext } from './contexts/MenuSubContext.js';\nimport { MobileMenuModeContext } from './contexts/MobileMenuModeContext.js';\nimport { useMenuAutoClose } from './hooks/useMenuAutoClose.js';\nimport { MobileSub } from './MobileSub.js';\nimport { SubContent, type MenuSubContentProps } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { type MenuSubProps } from './types.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\nexport type { MenuSubProps };\n\ntype SubSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over all top-level SubContent nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuSubContentProps>(child) &&\n      child.type === SubContent\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getSubSlots(children: ReactNode) {\n  const slots: SubSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, SubTrigger)) {\n      slots.trigger = child;\n    } else if (isSlot(child, SubContent)) {\n      slots.content.push(child);\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * @public\n */\nexport const Sub = (props: MenuSubProps) => {\n  const isMobile = useContext(MobileMenuModeContext);\n\n  const {\n    defaultOpen: defaultValue,\n    open: value,\n    onOpenChange: onChange,\n    children,\n    ...remainingProps\n  } = props;\n  const [open, updateOpen] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const slots = useMemo(\n    () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),\n    [children, updateOpen],\n  );\n\n  useMenuAutoClose(open, updateOpen);\n\n  const subContextValue = useMemo(\n    () => ({\n      isOpen: open ?? false,\n      isDefaultOpen: defaultValue ?? false,\n      setIsOpen: updateOpen,\n    }),\n    [open, defaultValue, updateOpen],\n  );\n\n  if (isMobile) {\n    return <MobileSub {...props} />;\n  }\n\n  return (\n    <MenuSubContext.Provider value={subContextValue}>\n      <RadixSub\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        {...remainingProps}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixSub>\n    </MenuSubContext.Provider>\n  );\n};\n\n(Sub as typeof Sub & { displayName: string }).displayName = 'Menu.Sub';\n"],
+  "mappings": "AAyGW,cAKL,YALK;AAzGX,SAAS,OAAO,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,kBAA4C;AACrD,SAAS,kBAAkB;AAE3B,SAAS,4BAA4B;AACrC,SAAS,cAAc;AACvB,SAAS,cAAc,mBAAmB;AAW1C,SAAS,oBACP,UACA,qBACW;AACX,SAAO,SAAS,IAAI,UAAU,CAAC,UAAqB;AAClD,WAAO,eAAoC,KAAK,KAC9C,MAAM,SAAS,aACb;AAAA,MACE;AAAA,MACA,YAAY,MAAM,OAAO;AAAA,QACvB,kBAAkB;AAAA,MACpB,CAAC;AAAA,MACD,MAAM,MAAM;AAAA,IACd,IACA;AAAA,EACN,CAAC;AACH;AAGA,SAAS,YAAY,UAAqB;AACxC,QAAM,QAAkB;AAAA,IACtB,SAAS;AAAA,IACT,SAAS,CAAC;AAAA,IACV,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,UAAU,GAAG;AAC7B,YAAM,UAAU;AAAA,IAClB,WAAW,OAAO,OAAO,UAAU,GAAG;AACpC,YAAM,QAAQ,KAAK,KAAK;AAAA,IAC1B,OAAO;AACL,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAKO,MAAM,MAAM,CAAC,UAAwB;AAC1C,QAAM,WAAW,WAAW,qBAAqB;AAEjD,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,MAAM,UAAU,IAAI,qBAAqB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,oBAAoB,UAAU,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,IACxE,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,mBAAiB,MAAM,UAAU;AAEjC,QAAM,kBAAkB;AAAA,IACtB,OAAO;AAAA,MACL,QAAQ,QAAQ;AAAA,MAChB,eAAe,gBAAgB;AAAA,MAC/B,WAAW;AAAA,IACb;AAAA,IACA,CAAC,MAAM,cAAc,UAAU;AAAA,EACjC;AAEA,MAAI,UAAU;AACZ,WAAO,oBAAC,aAAW,GAAG,OAAO;AAAA,EAC/B;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,iBAC9B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,MAC1C,GAAG;AAAA,MAEH;AAAA,cAAM,YAAY,QAAQ,MAAM;AAAA,QAChC,QAAQ,MAAM;AAAA,QACd,MAAM;AAAA;AAAA;AAAA,EACT,GACF;AAEJ;AAEC,IAA6C,cAAc;",
   "names": []
 }

package/esm/navigation/menu/Trigger.js

@@ -5,13 +5,13 @@ import {
   useEffect,
   useState
 } from "react";
-import { isElement } from "react-is";
 import { COMPONENT_NAME } from "./constants.js";
 import { useMenuContext } from "./hooks/useMenuContext.js";
 import { useIsInViewport } from "../../core/hooks/useIsInViewport.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
+import { isSlot } from "../../core/utils/is-slot.js";
 function isTrigger(node) {
-  return node !== void 0 && node !== null && isElement(node) && node.type === Trigger;
+  return isSlot(node, Trigger);
 }
 const Trigger = /* @__PURE__ */ forwardRef(
   ({

package/esm/navigation/menu/Trigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Trigger.tsx"],
-  "sourcesContent": ["import { Trigger as RadixTrigger } from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { COMPONENT_NAME } from './constants.js';\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport { useIsInViewport } from '../../core/hooks/useIsInViewport.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * @public\n */\nexport interface MenuTriggerProps extends WithChildren, AriaLabelingProps {}\n\n/**\n * Allows to check if a ReactNode is a MenuTrigger element.\n * @internal\n * */\nexport function isTrigger(\n  node: ReactNode,\n): node is ReactElement<MenuTriggerProps> {\n  return (\n    node !== undefined &&\n    node !== null &&\n    isElement(node) &&\n    node.type === Trigger\n  );\n}\n\n/**\n * The button that toggles the dropdown menu.\n * By default, the Content will position itself against the trigger.\n * @public\n */\nexport const Trigger = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  MenuTriggerProps\n>(\n  (\n    {\n      children,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    /** If the menu trigger is not visible in the viewport, close the menu to avoid issues with overlay drawing loop */\n    const [containerRef, isVisible] = useIsInViewport<HTMLButtonElement>();\n    const rootRef = useMergeRefs([forwardedRef, containerRef]);\n\n    const { isOpen, setIsOpen, isDefaultOpen } = useMenuContext();\n    // Flag to indicate if the menu was forcibly closed once already or not.\n    // This would allow the menu to be closed only once if defaultOpen was true and\n    // the Menu trigger wasn't visible to avoid page crashes due to infinite calls to window.render.\n    // And to also avoid closing the menu repeatedly due to issues with virtualization.\n    const [isForciblyClosed, setIsForciblyClosed] = useState(false);\n\n    useEffect(() => {\n      if (!isVisible && isDefaultOpen && isOpen && !isForciblyClosed) {\n        setIsOpen(false);\n        setIsForciblyClosed(true);\n      }\n    }, [isVisible, isOpen, setIsOpen, isForciblyClosed, isDefaultOpen]);\n\n    return (\n      <RadixTrigger\n        {...remainingProps}\n        ref={rootRef}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        data-testid=\"menu-trigger\"\n        asChild\n        data-dt-component={dataDtComponent}\n      >\n        {children}\n      </RadixTrigger>\n    );\n  },\n);\n\n(Trigger as typeof Trigger & { displayName: string }).displayName =\n  'Menu.Trigger';\n"],
-  "mappings": "AA8EM;AA9EN,SAAS,WAAW,oBAAoB;AACxC;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAatB,SAAS,UACd,MACwC;AACxC,SACE,SAAS,UACT,SAAS,QACT,UAAU,IAAI,KACd,KAAK,SAAS;AAElB;AAOO,MAAM,UAA0B;AAAA,EAIrC,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA;AAAA,IAEhB,qBAAqB,kBAAkB;AAAA,IACvC,GAAG;AAAA,EACL,GACA,iBACG;AAEH,UAAM,CAAC,cAAc,SAAS,IAAI,gBAAmC;AACrE,UAAM,UAAU,aAAa,CAAC,cAAc,YAAY,CAAC;AAEzD,UAAM,EAAE,QAAQ,WAAW,cAAc,IAAI,eAAe;AAK5D,UAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAE9D,cAAU,MAAM;AACd,UAAI,CAAC,aAAa,iBAAiB,UAAU,CAAC,kBAAkB;AAC9D,kBAAU,KAAK;AACf,4BAAoB,IAAI;AAAA,MAC1B;AAAA,IACF,GAAG,CAAC,WAAW,QAAQ,WAAW,kBAAkB,aAAa,CAAC;AAElE,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QACd,eAAY;AAAA,QACZ,SAAO;AAAA,QACP,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,QAAqD,cACpD;",
+  "sourcesContent": ["import { Trigger as RadixTrigger } from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { COMPONENT_NAME } from './constants.js';\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport { useIsInViewport } from '../../core/hooks/useIsInViewport.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\n\n/**\n * @public\n */\nexport interface MenuTriggerProps extends WithChildren, AriaLabelingProps {}\n\n/**\n * Allows to check if a ReactNode is a MenuTrigger element.\n * @internal\n * */\nexport function isTrigger(\n  node: ReactNode,\n): node is ReactElement<MenuTriggerProps> {\n  return isSlot(node, Trigger);\n}\n\n/**\n * The button that toggles the dropdown menu.\n * By default, the Content will position itself against the trigger.\n * @public\n */\nexport const Trigger = /* @__PURE__ */ forwardRef<\n  HTMLButtonElement,\n  MenuTriggerProps\n>(\n  (\n    {\n      children,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n      'data-dt-component': dataDtComponent = COMPONENT_NAME,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    /** If the menu trigger is not visible in the viewport, close the menu to avoid issues with overlay drawing loop */\n    const [containerRef, isVisible] = useIsInViewport<HTMLButtonElement>();\n    const rootRef = useMergeRefs([forwardedRef, containerRef]);\n\n    const { isOpen, setIsOpen, isDefaultOpen } = useMenuContext();\n    // Flag to indicate if the menu was forcibly closed once already or not.\n    // This would allow the menu to be closed only once if defaultOpen was true and\n    // the Menu trigger wasn't visible to avoid page crashes due to infinite calls to window.render.\n    // And to also avoid closing the menu repeatedly due to issues with virtualization.\n    const [isForciblyClosed, setIsForciblyClosed] = useState(false);\n\n    useEffect(() => {\n      if (!isVisible && isDefaultOpen && isOpen && !isForciblyClosed) {\n        setIsOpen(false);\n        setIsForciblyClosed(true);\n      }\n    }, [isVisible, isOpen, setIsOpen, isForciblyClosed, isDefaultOpen]);\n\n    return (\n      <RadixTrigger\n        {...remainingProps}\n        ref={rootRef}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        data-testid=\"menu-trigger\"\n        asChild\n        data-dt-component={dataDtComponent}\n      >\n        {children}\n      </RadixTrigger>\n    );\n  },\n);\n\n(Trigger as typeof Trigger & { displayName: string }).displayName =\n  'Menu.Trigger';\n"],
+  "mappings": "AAyEM;AAzEN,SAAS,WAAW,oBAAoB;AACxC;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AAWhB,SAAS,UACd,MACwC;AACxC,SAAO,OAAO,MAAM,OAAO;AAC7B;AAOO,MAAM,UAA0B;AAAA,EAIrC,CACE;AAAA,IACE;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA;AAAA,IAEhB,qBAAqB,kBAAkB;AAAA,IACvC,GAAG;AAAA,EACL,GACA,iBACG;AAEH,UAAM,CAAC,cAAc,SAAS,IAAI,gBAAmC;AACrE,UAAM,UAAU,aAAa,CAAC,cAAc,YAAY,CAAC;AAEzD,UAAM,EAAE,QAAQ,WAAW,cAAc,IAAI,eAAe;AAK5D,UAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAE9D,cAAU,MAAM;AACd,UAAI,CAAC,aAAa,iBAAiB,UAAU,CAAC,kBAAkB;AAC9D,kBAAU,KAAK;AACf,4BAAoB,IAAI;AAAA,MAC1B;AAAA,IACF,GAAG,CAAC,WAAW,QAAQ,WAAW,kBAAkB,aAAa,CAAC;AAElE,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QACd,eAAY;AAAA,QACZ,SAAO;AAAA,QACP,qBAAmB;AAAA,QAElB;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,QAAqD,cACpD;",
   "names": []
 }

package/esm/navigation/menu/item-slots.js

@@ -1,8 +1,8 @@
 import { Children } from "react";
-import { isElement } from "react-is";
 import { ItemTooltip } from "./ItemTooltip.js";
 import { Prefix } from "./Prefix.js";
 import { Suffix } from "./Suffix.js";
+import { isSlot } from "../../core/utils/is-slot.js";
 function getItemSlots(children) {
   const slots = {
     tooltip: null,
@@ -11,20 +11,12 @@ function getItemSlots(children) {
     freeform: []
   };
   Children.forEach(children, (child) => {
-    if (isElement(child)) {
-      switch (child.type) {
-        case ItemTooltip:
-          slots.tooltip = child;
-          break;
-        case Prefix:
-          slots.prefix = child;
-          break;
-        case Suffix:
-          slots.suffix = child;
-          break;
-        default:
-          slots.freeform.push(child);
-      }
+    if (isSlot(child, ItemTooltip)) {
+      slots.tooltip = child;
+    } else if (isSlot(child, Prefix)) {
+      slots.prefix = child;
+    } else if (isSlot(child, Suffix)) {
+      slots.suffix = child;
     } else {
       slots.freeform.push(child);
     }
@@ -37,19 +29,9 @@ function getSubTriggerSlots(children) {
     freeform: []
   };
   Children.forEach(children, (child) => {
-    if (isElement(child)) {
-      switch (child.type) {
-        case ItemTooltip:
-          break;
-        case Prefix:
-          slots.prefix = child;
-          break;
-        case Suffix:
-          break;
-        default:
-          slots.freeform.push(child);
-      }
-    } else {
+    if (isSlot(child, Prefix)) {
+      slots.prefix = child;
+    } else if (!isSlot(child, ItemTooltip) && !isSlot(child, Suffix)) {
       slots.freeform.push(child);
     }
   });

package/esm/navigation/menu/item-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/item-slots.ts"],
-  "sourcesContent": ["import { Children, type ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport { ItemTooltip } from './ItemTooltip.js';\nimport { Prefix } from './Prefix.js';\nimport { Suffix } from './Suffix.js';\n\n/**\n * Defines slots into which children of this item should be rendered. There\n * are special slots for the tooltip, prefix, and suffix. Everything else will be\n * rendered into the freeform slot.\n */\ntype ItemSlots = {\n  tooltip: ReactNode | null;\n  prefix: ReactNode | null;\n  suffix: ReactNode | null;\n  freeform: ReactNode[];\n};\n\n/**\n * Defines slots for SubTrigger, which supports prefix (but not suffix or tooltip).\n */\ntype SubTriggerSlots = {\n  prefix: ReactNode | null;\n  freeform: ReactNode[];\n};\n\n/**\n * Iterates over child nodes to extract specific component slots for Menu.Item and Menu.Link.\n */\nexport function getItemSlots(children: ReactNode) {\n  const slots: ItemSlots = {\n    tooltip: null,\n    prefix: null,\n    suffix: null,\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case ItemTooltip:\n          slots.tooltip = child;\n          break;\n        case Prefix:\n          // Use the Prefix component directly\n          slots.prefix = child;\n          break;\n        case Suffix:\n          // Use the Suffix component directly\n          slots.suffix = child;\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * Iterates over child nodes to extract specific component slots for Menu.SubTrigger.\n */\nexport function getSubTriggerSlots(children: ReactNode) {\n  const slots: SubTriggerSlots = {\n    prefix: null,\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case ItemTooltip:\n          // Ignore the ItemTooltip component\n          break;\n        case Prefix:\n          // Use the Prefix component directly\n          slots.prefix = child;\n          break;\n        case Suffix:\n          // Ignore the Suffix component\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * Iterates over child nodes to extract specific component slots for Menu.Intent.\n * Intent has the same slot requirements as SubTrigger (prefix only, no suffix or tooltip).\n */\nexport const getIntentSlots = getSubTriggerSlots;\n"],
-  "mappings": "AAAA,SAAS,gBAAgC;AACzC,SAAS,iBAAiB;AAE1B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,cAAc;AAyBhB,SAAS,aAAa,UAAqB;AAChD,QAAM,QAAmB;AAAA,IACvB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AACH,gBAAM,UAAU;AAChB;AAAA,QACF,KAAK;AAEH,gBAAM,SAAS;AACf;AAAA,QACF,KAAK;AAEH,gBAAM,SAAS;AACf;AAAA,QACF;AACE,gBAAM,SAAS,KAAK,KAAK;AAAA,MAC7B;AAAA,IACF,OAAO;AACL,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAKO,SAAS,mBAAmB,UAAqB;AACtD,QAAM,QAAyB;AAAA,IAC7B,QAAQ;AAAA,IACR,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AAEH;AAAA,QACF,KAAK;AAEH,gBAAM,SAAS;AACf;AAAA,QACF,KAAK;AAEH;AAAA,QACF;AACE,gBAAM,SAAS,KAAK,KAAK;AAAA,MAC7B;AAAA,IACF,OAAO;AACL,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAMO,MAAM,iBAAiB;",
+  "sourcesContent": ["import { Children, type ReactNode } from 'react';\n\nimport { ItemTooltip } from './ItemTooltip.js';\nimport { Prefix } from './Prefix.js';\nimport { Suffix } from './Suffix.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\n\n/**\n * Defines slots into which children of this item should be rendered. There\n * are special slots for the tooltip, prefix, and suffix. Everything else will be\n * rendered into the freeform slot.\n */\ntype ItemSlots = {\n  tooltip: ReactNode | null;\n  prefix: ReactNode | null;\n  suffix: ReactNode | null;\n  freeform: ReactNode[];\n};\n\n/**\n * Defines slots for SubTrigger, which supports prefix (but not suffix or tooltip).\n */\ntype SubTriggerSlots = {\n  prefix: ReactNode | null;\n  freeform: ReactNode[];\n};\n\n/**\n * Iterates over child nodes to extract specific component slots for Menu.Item and Menu.Link.\n */\nexport function getItemSlots(children: ReactNode) {\n  const slots: ItemSlots = {\n    tooltip: null,\n    prefix: null,\n    suffix: null,\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, ItemTooltip)) {\n      slots.tooltip = child;\n    } else if (isSlot(child, Prefix)) {\n      slots.prefix = child;\n    } else if (isSlot(child, Suffix)) {\n      slots.suffix = child;\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * Iterates over child nodes to extract specific component slots for Menu.SubTrigger.\n */\nexport function getSubTriggerSlots(children: ReactNode) {\n  const slots: SubTriggerSlots = {\n    prefix: null,\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, Prefix)) {\n      slots.prefix = child;\n    } else if (!isSlot(child, ItemTooltip) && !isSlot(child, Suffix)) {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * Iterates over child nodes to extract specific component slots for Menu.Intent.\n * Intent has the same slot requirements as SubTrigger (prefix only, no suffix or tooltip).\n */\nexport const getIntentSlots = getSubTriggerSlots;\n"],
+  "mappings": "AAAA,SAAS,gBAAgC;AAEzC,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,cAAc;AAyBhB,SAAS,aAAa,UAAqB;AAChD,QAAM,QAAmB;AAAA,IACvB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,WAAW,GAAG;AAC9B,YAAM,UAAU;AAAA,IAClB,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,YAAM,SAAS;AAAA,IACjB,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,YAAM,SAAS;AAAA,IACjB,OAAO;AACL,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAKO,SAAS,mBAAmB,UAAqB;AACtD,QAAM,QAAyB;AAAA,IAC7B,QAAQ;AAAA,IACR,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,MAAM,GAAG;AACzB,YAAM,SAAS;AAAA,IACjB,WAAW,CAAC,OAAO,OAAO,WAAW,KAAK,CAAC,OAAO,OAAO,MAAM,GAAG;AAChE,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAMO,MAAM,iBAAiB;",
   "names": []
 }

package/esm/navigation/tabs/RenderTab.css

@@ -1,4 +1,4 @@
-._39c1kf0-3-11-1 {
+._39c1kf0-3-11-3 {
   border-radius: var(--dt-borders-radius-field-default, 6px);
   background-color: inherit;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
@@ -11,7 +11,7 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   scroll-margin: var(--dt-spacings-size-64, 64px);
 }
-._39c1kf0-3-11-1::after {
+._39c1kf0-3-11-3::after {
   content: " ";
   border-bottom-width: var(--dt-borders-width-emphasized, 2px);
   border-bottom-style: var(--dt-borders-style-default, solid);
@@ -23,46 +23,46 @@
   padding-top: var(--dt-spacings-size-4, 4px);
   z-index: 1;
 }
-._39c1kf1-3-11-1 {
+._39c1kf1-3-11-3 {
   pointer-events: none;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._39c1kf2-3-11-1 {
+._39c1kf2-3-11-3 {
   cursor: pointer;
 }
-._39c1kf2-3-11-1:hover {
+._39c1kf2-3-11-3:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._39c1kf2-3-11-1:active {
+._39c1kf2-3-11-3:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._39c1kf5-3-11-1 {
+._39c1kf5-3-11-3 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._39c1kf5-3-11-1:hover {
+._39c1kf5-3-11-3:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._39c1kf5-3-11-1:active {
+._39c1kf5-3-11-3:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._39c1kf5-3-11-1::after {
+._39c1kf5-3-11-3::after {
   border-bottom-color: var(--dt-colors-icon-primary-default, #464cce);
 }
-._39c1kf6-3-11-1 {
+._39c1kf6-3-11-3 {
   display: flex;
   flex: 1;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
 }
-._39c1kf7-3-11-1 {
+._39c1kf7-3-11-3 {
   cursor: not-allowed;
 }
-._39c1kf0-3-11-1 .text-content {
+._39c1kf0-3-11-3 .text-content {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   white-space: nowrap;
   overflow: hidden;
@@ -71,6 +71,6 @@
   justify-content: center;
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._39c1kf0-3-11-1 svg + .text-content {
+._39c1kf0-3-11-3 svg + .text-content {
   padding-left: var(--dt-spacings-size-8, 8px);
 }

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

@@ -1,8 +1,8 @@
 import "./RenderTab.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var disabledTabWrapperCSS = "_39c1kf7-3-11-1";
-var tabButtonCSS = _7a468({ defaultClassName: "_39c1kf0-3-11-1", variantClassNames: { disabled: { true: "_39c1kf1-3-11-1", false: "_39c1kf2-3-11-1" }, selected: { true: "_39c1kf3-3-11-1", false: "_39c1kf4-3-11-1" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-11-1"]] });
-var tabContentWrapperCSS = "_39c1kf6-3-11-1";
+var disabledTabWrapperCSS = "_39c1kf7-3-11-3";
+var tabButtonCSS = _7a468({ defaultClassName: "_39c1kf0-3-11-3", variantClassNames: { disabled: { true: "_39c1kf1-3-11-3", false: "_39c1kf2-3-11-3" }, selected: { true: "_39c1kf3-3-11-3", false: "_39c1kf4-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ selected: true, disabled: false }, "_39c1kf5-3-11-3"]] });
+var tabContentWrapperCSS = "_39c1kf6-3-11-3";
 export {
   disabledTabWrapperCSS,
   tabButtonCSS,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/RenderTab.css.ts"],
-  "sourcesContent": ["import './RenderTab.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledTabWrapperCSS = '_39c1kf7-3-11-1';\nexport var tabButtonCSS = _7a468({defaultClassName:'_39c1kf0-3-11-1',variantClassNames:{disabled:{true:'_39c1kf1-3-11-1',false:'_39c1kf2-3-11-1'},selected:{true:'_39c1kf3-3-11-1',false:'_39c1kf4-3-11-1'}},defaultVariants:{},compoundVariants:[[{selected:true,disabled:false},'_39c1kf5-3-11-1']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-11-1';"],
+  "sourcesContent": ["import './RenderTab.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledTabWrapperCSS = '_39c1kf7-3-11-3';\nexport var tabButtonCSS = _7a468({defaultClassName:'_39c1kf0-3-11-3',variantClassNames:{disabled:{true:'_39c1kf1-3-11-3',false:'_39c1kf2-3-11-3'},selected:{true:'_39c1kf3-3-11-3',false:'_39c1kf4-3-11-3'}},defaultVariants:{},compoundVariants:[[{selected:true,disabled:false},'_39c1kf5-3-11-3']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-11-3';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB;AAC5B,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,CAAC,EAAC,CAAC;AAC/R,IAAI,uBAAuB;",
   "names": []
 }

package/esm/navigation/tabs/TabPanel.css

@@ -1,12 +1,12 @@
-._b4irt10-3-11-1 {
+._b4irt10-3-11-3 {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   padding-top: var(--dt-spacings-size-16, 16px);
 }
-._b4irt11-3-11-1 {
+._b4irt11-3-11-3 {
   overflow: hidden;
 }
-._b4irt12-3-11-1 {
+._b4irt12-3-11-3 {
   overflow-y: auto;
 }

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

@@ -1,6 +1,6 @@
 import "./TabPanel.css";
-var tabPanelCSS = "_b4irt10-3-11-1";
-var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-11-1", "scroll-y": "_b4irt12-3-11-1" };
+var tabPanelCSS = "_b4irt10-3-11-3";
+var tabPanelOverflowBehaviorCSS = { hidden: "_b4irt11-3-11-3", "scroll-y": "_b4irt12-3-11-3" };
 export {
   tabPanelCSS,
   tabPanelOverflowBehaviorCSS

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/TabPanel.css.ts"],
-  "sourcesContent": ["import './TabPanel.css';\nexport var tabPanelCSS = '_b4irt10-3-11-1';\nexport var tabPanelOverflowBehaviorCSS = {hidden:'_b4irt11-3-11-1','scroll-y':'_b4irt12-3-11-1'};"],
+  "sourcesContent": ["import './TabPanel.css';\nexport var tabPanelCSS = '_b4irt10-3-11-3';\nexport var tabPanelOverflowBehaviorCSS = {hidden:'_b4irt11-3-11-3','scroll-y':'_b4irt12-3-11-3'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,cAAc;AAClB,IAAI,8BAA8B,EAAC,QAAO,mBAAkB,YAAW,kBAAiB;",
   "names": []
 }

package/esm/navigation/tabs/Tabs.css

@@ -1,9 +1,9 @@
-._1tfbrxp0-3-11-1 {
+._1tfbrxp0-3-11-3 {
   display: flex;
   flex-direction: column;
   max-width: 100%;
 }
-._1tfbrxp1-3-11-1 {
+._1tfbrxp1-3-11-3 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
@@ -14,29 +14,29 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._1tfbrxp1-3-11-1::-webkit-scrollbar {
+._1tfbrxp1-3-11-3::-webkit-scrollbar {
   display: none;
 }
-._1tfbrxp2-3-11-1 {
+._1tfbrxp2-3-11-3 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp3-3-11-1 {
+._1tfbrxp3-3-11-3 {
   -webkit-mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, #fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp4-3-11-1 {
+._1tfbrxp4-3-11-3 {
   -webkit-mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   mask: linear-gradient(to right, transparent var(--dt-spacings-size-32, 32px), #fff var(--dt-spacings-size-56, 56px),#fff calc(100% - var(--dt-spacings-size-56, 56px)), transparent calc(100% - var(--dt-spacings-size-32, 32px)));
   -webkit-mask-repeat: no-repeat;
 }
-._1tfbrxp5-3-11-1 {
+._1tfbrxp5-3-11-3 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._1tfbrxp5-3-11-1:after {
+._1tfbrxp5-3-11-3:after {
   content: '';
   display: block;
   position: absolute;
@@ -47,7 +47,7 @@
   left: 0;
   right: 0;
 }
-._1tfbrxp6-3-11-1 {
+._1tfbrxp6-3-11-3 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);

package/esm/navigation/tabs/Tabs.js

@@ -4,6 +4,7 @@ import {
   Children,
   cloneElement,
   forwardRef,
+  isValidElement,
   useCallback,
   useLayoutEffect,
   useMemo,
@@ -11,7 +12,6 @@ import {
   useState
 } from "react";
 import { useIntl } from "react-intl";
-import { isElement } from "react-is";
 import { ChevronLeftIcon, ChevronRightIcon } from "@dynatrace/strato-icons";
 import { RenderTab } from "./RenderTab.js";
 import { Tab } from "./Tab.js";
@@ -60,7 +60,7 @@ const Tabs = /* @__PURE__ */ forwardRef(
           return cloneElement(child, {
             key: `${tabsUniqueId}-tab-${i}`
           });
-        } else if (isElement(child) && isDev()) {
+        } else if (isValidElement(child) && isDev()) {
           console.warn("Only Tab is a valid child of the Tabs component.");
         }
       }) || [];