npm - @dynatrace/strato-components - Versions diffs - 3.5.2 → 3.6.0 - Mend

@dynatrace/strato-components 3.5.2 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2331) hide show

package/esm/navigation/menu/Menu.js CHANGED Viewed

@@ -4,8 +4,6 @@ import {
   Children,
   cloneElement,
   isValidElement,
-  useCallback,
-  useEffect,
   useMemo
 } from "react";
 import { isElement } from "react-is";
@@ -13,6 +11,7 @@ import { COMPONENT_NAME } from "./constants.js";
 import { Content } from "./Content.js";
 import { MenuContext } from "./contexts/MenuContext.js";
 import { Group } from "./Group.js";
+import { useMenuAutoClose } from "./hooks/useMenuAutoClose.js";
 import { Intent } from "./Intent.js";
 import { Item } from "./Item.js";
 import { ItemTooltip } from "./ItemTooltip.js";
@@ -25,7 +24,6 @@ import { SubTrigger } from "./SubTrigger.js";
 import { Suffix } from "./Suffix.js";
 import { Trigger } from "./Trigger.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
-import { isBrowser } from "../../core/utils/isBrowser.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 function getMenuSlots(children) {
   const slots = {
@@ -87,18 +85,7 @@ const MenuRoot = (props) => {
     ),
     [children, updateOpen, dataDtComponent]
   );
-  const onWindowBlur = useCallback(() => {
-    updateOpen(false);
-  }, [updateOpen]);
-  useEffect(() => {
-    if (!isBrowser) {
-      return;
-    }
-    window.addEventListener("blur", onWindowBlur);
-    return () => {
-      window.removeEventListener("blur", onWindowBlur);
-    };
-  }, [onWindowBlur]);
+  useMenuAutoClose(open, updateOpen);
   const menuContextValue = useMemo(
     () => ({
       isOpen: open,

package/esm/navigation/menu/Menu.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Menu.tsx"],
-  "sourcesContent": ["import { Root as RadixRoot } from '@radix-ui/react-dropdown-menu';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { COMPONENT_NAME } from './constants.js';\nimport { Content, type MenuContentProps } from './Content.js';\nimport { MenuContext } from './contexts/MenuContext.js';\nimport { Group } from './Group.js';\nimport { Intent } from './Intent.js';\nimport { Item } from './Item.js';\nimport { ItemTooltip } from './ItemTooltip.js';\nimport { Label } from './Label.js';\nimport { Link } from './Link.js';\nimport { Prefix } from './Prefix.js';\nimport { Sub } from './Sub.js';\nimport { SubContent } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { Suffix } from './Suffix.js';\nimport { Trigger } from './Trigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isBrowser } from '../../core/utils/isBrowser.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n// TODO Remove logic for handling tab key as soon as the related bug in the radix-ui\n// library has been fixed and we've upgraded to a newer version that contains the fix\n// (see https://github.com/radix-ui/primitives/issues/1565 and https://github.com/radix-ui/primitives/pull/1576)\n\n/**\n * @public\n */\nexport interface MenuProps extends WithChildren, DataTestId, MaskingProps {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * The modality of the dialog.\n   * When set to true, interaction with outside elements will be disabled and\n   * only dialog content will be visible to screen readers.\n   * @defaultValue true\n   */\n  modal?: boolean;\n}\n\ntype MenuSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getMenuSlots(children: ReactNode) {\n  const slots: MenuSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Trigger:\n          slots.trigger = child;\n          break;\n        case Content:\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/** Iterates over all top-level Content nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n  dataDtComponent: string,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuContentProps>(child) && child.type === Content\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n            'data-dt-component': dataDtComponent,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/**\n * @internal\n */\nconst MenuRoot = (props: MenuProps) => {\n  const {\n    open: value,\n    onOpenChange: onChange,\n    modal = true,\n    defaultOpen = false,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\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  } = props;\n\n  const [open, updateOpen] = useControllableState({\n    defaultValue: defaultOpen,\n    value,\n    onChange,\n  });\n\n  const slots = useMemo(\n    () =>\n      getMenuSlots(\n        registerTabHandlers(children, () => updateOpen(false), dataDtComponent),\n      ),\n    [children, updateOpen, dataDtComponent],\n  );\n\n  // Closes the Menu on window blur to fix inherent issue with Radix UI keeping submenus open.\n  // https://github.com/radix-ui/primitives/issues/1441\n  const onWindowBlur = useCallback(() => {\n    updateOpen(false);\n  }, [updateOpen]);\n\n  useEffect(() => {\n    if (!isBrowser) {\n      return;\n    }\n    window.addEventListener('blur', onWindowBlur);\n    return () => {\n      window.removeEventListener('blur', onWindowBlur);\n    };\n  }, [onWindowBlur]);\n\n  const menuContextValue = useMemo(\n    () => ({\n      isOpen: open,\n      isDefaultOpen: defaultOpen,\n      setIsOpen: updateOpen,\n    }),\n    [defaultOpen, open, updateOpen],\n  );\n\n  return (\n    <MenuContext.Provider value={menuContextValue}>\n      <RadixRoot\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        modal={modal}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixRoot>\n    </MenuContext.Provider>\n  );\n};\n\n(MenuRoot as typeof MenuRoot & { displayName: string }).displayName = 'Menu';\n\n/**\n * The `Menu` component displays the list of action items that are revealed when\n * the user clicks on the trigger element.\n * @public\n */\nexport const Menu = Object.assign(MenuRoot, {\n  Trigger,\n  Content,\n  Item,\n  ItemTooltip,\n  Label,\n  Link,\n  Group,\n  Prefix,\n  Suffix,\n  Sub,\n  SubTrigger,\n  SubContent,\n  Intent,\n});\n"],
-  "mappings": "AAkLI,cACE,YADF;AAlLJ,SAAS,QAAQ,iBAAiB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAC/B,SAAS,eAAsC;AAC/C,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,WAAW;AACpB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,4BAA4B;AAIrC,SAAS,iBAAiB;AAC1B,SAAS,cAAc,mBAAmB;AA0C1C,SAAS,aAAa,UAAqB;AACzC,QAAM,QAAmB;AAAA,IACvB,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;AAGA,SAAS,oBACP,UACA,qBACA,iBACW;AACX,SAAO,SAAS,IAAI,UAAU,CAAC,UAAqB;AAClD,WAAO,eAAiC,KAAK,KAAK,MAAM,SAAS,UAC7D;AAAA,MACE;AAAA,MACA,YAAY,MAAM,OAAO;AAAA,QACvB,kBAAkB;AAAA,QAClB,qBAAqB;AAAA,MACvB,CAAC;AAAA,MACD,MAAM,MAAM;AAAA,IACd,IACA;AAAA,EACN,CAAC;AACH;AAKA,MAAM,WAAW,CAAC,UAAqB;AACrC,QAAM;AAAA,IACJ,MAAM;AAAA,IACN,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA;AAAA,IAEpB,qBAAqB,kBAAkB;AAAA,EACzC,IAAI;AAEJ,QAAM,CAAC,MAAM,UAAU,IAAI,qBAAqB;AAAA,IAC9C,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,MACE;AAAA,MACE,oBAAoB,UAAU,MAAM,WAAW,KAAK,GAAG,eAAe;AAAA,IACxE;AAAA,IACF,CAAC,UAAU,YAAY,eAAe;AAAA,EACxC;AAIA,QAAM,eAAe,YAAY,MAAM;AACrC,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AACA,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,WAAW;AAAA,IACb;AAAA,IACA,CAAC,aAAa,MAAM,UAAU;AAAA,EAChC;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,kBAC3B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,MAC3C;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAEjB;AAAA,cAAM,YAAY,QAAQ,MAAM;AAAA,QAChC,QAAQ,MAAM;AAAA,QACd,MAAM;AAAA;AAAA;AAAA,EACT,GACF;AAEJ;AAEC,SAAuD,cAAc;AAO/D,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import { Root as RadixRoot } from '@radix-ui/react-dropdown-menu';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { COMPONENT_NAME } from './constants.js';\nimport { Content, type MenuContentProps } from './Content.js';\nimport { MenuContext } from './contexts/MenuContext.js';\nimport { Group } from './Group.js';\nimport { useMenuAutoClose } from './hooks/useMenuAutoClose.js';\nimport { Intent } from './Intent.js';\nimport { Item } from './Item.js';\nimport { ItemTooltip } from './ItemTooltip.js';\nimport { Label } from './Label.js';\nimport { Link } from './Link.js';\nimport { Prefix } from './Prefix.js';\nimport { Sub } from './Sub.js';\nimport { SubContent } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { Suffix } from './Suffix.js';\nimport { Trigger } from './Trigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n// TODO Remove logic for handling tab key as soon as the related bug in the radix-ui\n// library has been fixed and we've upgraded to a newer version that contains the fix\n// (see https://github.com/radix-ui/primitives/issues/1565 and https://github.com/radix-ui/primitives/pull/1576)\n\n/**\n * @public\n */\nexport interface MenuProps extends WithChildren, DataTestId, MaskingProps {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * The modality of the dialog.\n   * When set to true, interaction with outside elements will be disabled and\n   * only dialog content will be visible to screen readers.\n   * @defaultValue true\n   */\n  modal?: boolean;\n}\n\ntype MenuSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getMenuSlots(children: ReactNode) {\n  const slots: MenuSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Trigger:\n          slots.trigger = child;\n          break;\n        case Content:\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/** Iterates over all top-level Content nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n  dataDtComponent: string,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuContentProps>(child) && child.type === Content\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n            'data-dt-component': dataDtComponent,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/**\n * @internal\n */\nconst MenuRoot = (props: MenuProps) => {\n  const {\n    open: value,\n    onOpenChange: onChange,\n    modal = true,\n    defaultOpen = false,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\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  } = props;\n\n  const [open, updateOpen] = useControllableState({\n    defaultValue: defaultOpen,\n    value,\n    onChange,\n  });\n\n  const slots = useMemo(\n    () =>\n      getMenuSlots(\n        registerTabHandlers(children, () => updateOpen(false), dataDtComponent),\n      ),\n    [children, updateOpen, dataDtComponent],\n  );\n\n  useMenuAutoClose(open, updateOpen);\n\n  const menuContextValue = useMemo(\n    () => ({\n      isOpen: open,\n      isDefaultOpen: defaultOpen,\n      setIsOpen: updateOpen,\n    }),\n    [defaultOpen, open, updateOpen],\n  );\n\n  return (\n    <MenuContext.Provider value={menuContextValue}>\n      <RadixRoot\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        modal={modal}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixRoot>\n    </MenuContext.Provider>\n  );\n};\n\n(MenuRoot as typeof MenuRoot & { displayName: string }).displayName = 'Menu';\n\n/**\n * The `Menu` component displays the list of action items that are revealed when\n * the user clicks on the trigger element.\n * @public\n */\nexport const Menu = Object.assign(MenuRoot, {\n  Trigger,\n  Content,\n  Item,\n  ItemTooltip,\n  Label,\n  Link,\n  Group,\n  Prefix,\n  Suffix,\n  Sub,\n  SubTrigger,\n  SubContent,\n  Intent,\n});\n"],
+  "mappings": "AAkKI,cACE,YADF;AAlKJ,SAAS,QAAQ,iBAAiB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAC/B,SAAS,eAAsC;AAC/C,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,SAAS,WAAW;AACpB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,4BAA4B;AAIrC,SAAS,cAAc,mBAAmB;AA0C1C,SAAS,aAAa,UAAqB;AACzC,QAAM,QAAmB;AAAA,IACvB,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;AAGA,SAAS,oBACP,UACA,qBACA,iBACW;AACX,SAAO,SAAS,IAAI,UAAU,CAAC,UAAqB;AAClD,WAAO,eAAiC,KAAK,KAAK,MAAM,SAAS,UAC7D;AAAA,MACE;AAAA,MACA,YAAY,MAAM,OAAO;AAAA,QACvB,kBAAkB;AAAA,QAClB,qBAAqB;AAAA,MACvB,CAAC;AAAA,MACD,MAAM,MAAM;AAAA,IACd,IACA;AAAA,EACN,CAAC;AACH;AAKA,MAAM,WAAW,CAAC,UAAqB;AACrC,QAAM;AAAA,IACJ,MAAM;AAAA,IACN,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,cAAc;AAAA,IACd;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA;AAAA,IAEpB,qBAAqB,kBAAkB;AAAA,EACzC,IAAI;AAEJ,QAAM,CAAC,MAAM,UAAU,IAAI,qBAAqB;AAAA,IAC9C,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,MACE;AAAA,MACE,oBAAoB,UAAU,MAAM,WAAW,KAAK,GAAG,eAAe;AAAA,IACxE;AAAA,IACF,CAAC,UAAU,YAAY,eAAe;AAAA,EACxC;AAEA,mBAAiB,MAAM,UAAU;AAEjC,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,WAAW;AAAA,IACb;AAAA,IACA,CAAC,aAAa,MAAM,UAAU;AAAA,EAChC;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,kBAC3B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,MAC3C;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAEjB;AAAA,cAAM,YAAY,QAAQ,MAAM;AAAA,QAChC,QAAQ,MAAM;AAAA,QACd,MAAM;AAAA;AAAA;AAAA,EACT,GACF;AAEJ;AAEC,SAAuD,cAAc;AAO/D,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/navigation/menu/Menu.sty.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import "./Menu.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var content = "_1m01arl3-3-5-2";
-var group = "_1m01arl4-3-5-2";
-var item = _7a468({ defaultClassName: "_1m01arl5-3-5-2", variantClassNames: { disabled: { true: "_1m01arl6-3-5-2", false: "_1m01arl7-3-5-2" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
-var itemChildren = "_1m01arl8-3-5-2";
-var label = "_1m01arl2-3-5-2";
-var subChildren = "_1m01arl9-3-5-2";
-var tooltip = "_1m01arl0-3-5-2";
-var tooltipWrapper = "_1m01arl1-3-5-2";
+var content = "_1m01arl3-3-6-0";
+var group = "_1m01arl4-3-6-0";
+var item = _7a468({ defaultClassName: "_1m01arl5-3-6-0", variantClassNames: { disabled: { true: "_1m01arl6-3-6-0", false: "_1m01arl7-3-6-0" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+var itemChildren = "_1m01arl8-3-6-0";
+var label = "_1m01arl2-3-6-0";
+var subChildren = "_1m01arl9-3-6-0";
+var tooltip = "_1m01arl0-3-6-0";
+var tooltipWrapper = "_1m01arl1-3-6-0";
 export {
   content,
   group,

package/esm/navigation/menu/Menu.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Menu.css.ts"],
-  "sourcesContent": ["import './Menu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = '_1m01arl3-3-5-2';\nexport var group = '_1m01arl4-3-5-2';\nexport var item = _7a468({defaultClassName:'_1m01arl5-3-5-2',variantClassNames:{disabled:{true:'_1m01arl6-3-5-2',false:'_1m01arl7-3-5-2'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl8-3-5-2';\nexport var label = '_1m01arl2-3-5-2';\nexport var subChildren = '_1m01arl9-3-5-2';\nexport var tooltip = '_1m01arl0-3-5-2';\nexport var tooltipWrapper = '_1m01arl1-3-5-2';"],
+  "sourcesContent": ["import './Menu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = '_1m01arl3-3-6-0';\nexport var group = '_1m01arl4-3-6-0';\nexport var item = _7a468({defaultClassName:'_1m01arl5-3-6-0',variantClassNames:{disabled:{true:'_1m01arl6-3-6-0',false:'_1m01arl7-3-6-0'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl8-3-6-0';\nexport var label = '_1m01arl2-3-6-0';\nexport var subChildren = '_1m01arl9-3-6-0';\nexport var tooltip = '_1m01arl0-3-6-0';\nexport var tooltipWrapper = '_1m01arl1-3-6-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzL,IAAI,eAAe;AACnB,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
   "names": []
 }

package/esm/navigation/menu/Sub.js CHANGED Viewed

@@ -1,8 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Sub as RadixSub } from "@radix-ui/react-dropdown-menu";
 import {
-  useCallback,
-  useEffect,
   useMemo,
   Children,
   isValidElement,
@@ -10,10 +8,10 @@ import {
 } from "react";
 import { isElement } from "react-is";
 import { MenuSubContext } from "./contexts/MenuSubContext.js";
+import { useMenuAutoClose } from "./hooks/useMenuAutoClose.js";
 import { SubContent } from "./SubContent.js";
 import { SubTrigger } from "./SubTrigger.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
-import { isBrowser } from "../../core/utils/isBrowser.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 function registerTabHandlers(children, handleTabKeyPressed) {
   return Children.map(children, (child) => {
@@ -67,18 +65,7 @@ const Sub = (props) => {
     () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),
     [children, updateOpen]
   );
-  const onWindowBlur = useCallback(() => {
-    updateOpen(false);
-  }, [updateOpen]);
-  useEffect(() => {
-    if (!isBrowser) {
-      return;
-    }
-    window.addEventListener("blur", onWindowBlur);
-    return () => {
-      window.removeEventListener("blur", onWindowBlur);
-    };
-  }, [onWindowBlur]);
+  useMenuAutoClose(open, updateOpen);
   return /* @__PURE__ */ jsx(
     MenuSubContext.Provider,
     {

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

@@ -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  useCallback,\n  useEffect,\n  useMemo,\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 { SubContent, type MenuSubContentProps } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isBrowser } from '../../core/utils/isBrowser.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n/**\n * @public\n */\nexport interface MenuSubProps extends WithChildren {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\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 {\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  const slots = useMemo(\n    () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),\n    [children, updateOpen],\n  );\n\n  // Closes the Menu on window blur to fix inherent issue with Radix UI keeping submenus open.\n  // https://github.com/radix-ui/primitives/issues/1441\n  const onWindowBlur = useCallback(() => {\n    updateOpen(false);\n  }, [updateOpen]);\n\n  useEffect(() => {\n    if (!isBrowser) {\n      return;\n    }\n    window.addEventListener('blur', onWindowBlur);\n    return () => {\n      window.removeEventListener('blur', onWindowBlur);\n    };\n  }, [onWindowBlur]);\n\n  return (\n    <MenuSubContext.Provider\n      value={{\n        isOpen: open ?? false,\n        isDefaultOpen: defaultValue ?? false,\n        setIsOpen: updateOpen,\n      }}\n    >\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": "AAoII,cAOE,YAPF;AApIJ,SAAS,OAAO,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAC/B,SAAS,kBAA4C;AACrD,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AAErC,SAAS,iBAAiB;AAC1B,SAAS,cAAc,mBAAmB;AA8B1C,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;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;AACD,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,oBAAoB,UAAU,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,IACxE,CAAC,UAAU,UAAU;AAAA,EACvB;AAIA,QAAM,eAAe,YAAY,MAAM;AACrC,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AACA,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,QAAQ;AAAA,QAChB,eAAe,gBAAgB;AAAA,QAC/B,WAAW;AAAA,MACb;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,UAC1C,GAAG;AAAA,UAEH;AAAA,kBAAM,YAAY,QAAQ,MAAM;AAAA,YAChC,QAAQ,MAAM;AAAA,YACd,MAAM;AAAA;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEC,IAA6C,cAAc;",
+  "sourcesContent": ["import { Sub as RadixSub } from '@radix-ui/react-dropdown-menu';\nimport {\n  useMemo,\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 { useMenuAutoClose } from './hooks/useMenuAutoClose.js';\nimport { SubContent, type MenuSubContentProps } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n/**\n * @public\n */\nexport interface MenuSubProps extends WithChildren {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\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 {\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  const slots = useMemo(\n    () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),\n    [children, updateOpen],\n  );\n\n  useMenuAutoClose(open, updateOpen);\n\n  return (\n    <MenuSubContext.Provider\n      value={{\n        isOpen: open ?? false,\n        isDefaultOpen: defaultValue ?? false,\n        setIsOpen: updateOpen,\n      }}\n    >\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": "AAoHI,cAOE,YAPF;AApHJ,SAAS,OAAO,gBAAgB;AAChC;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,kBAA4C;AACrD,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AAErC,SAAS,cAAc,mBAAmB;AA8B1C,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;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;AACD,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,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,QAAQ;AAAA,QAChB,eAAe,gBAAgB;AAAA,QAC/B,WAAW;AAAA,MACb;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,UAC1C,GAAG;AAAA,UAEH;AAAA,kBAAM,YAAY,QAAQ,MAAM;AAAA,YAChC,QAAQ,MAAM;AAAA,YACd,MAAM;AAAA;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEC,IAA6C,cAAc;",
   "names": []
 }

package/esm/navigation/menu/hooks/useMenuAutoClose.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { isBrowser } from "../../../core/utils/isBrowser.js";
+import {
+  getOverlayStackSize,
+  subscribeToOverlayStack
+} from "../../../overlays/hooks/useOverlay.js";
+function useMenuAutoClose(open, setOpen) {
+  useEffect(() => {
+    if (!isBrowser) {
+      return void 0;
+    }
+    const onWindowBlur = () => setOpen(false);
+    window.addEventListener("blur", onWindowBlur);
+    return () => {
+      window.removeEventListener("blur", onWindowBlur);
+    };
+  }, [setOpen]);
+  useEffect(() => {
+    if (!open) {
+      return void 0;
+    }
+    const stackSizeAtOpen = getOverlayStackSize();
+    return subscribeToOverlayStack(() => {
+      if (getOverlayStackSize() > stackSizeAtOpen) {
+        setOpen(false);
+      }
+    });
+  }, [open, setOpen]);
+}
+export {
+  useMenuAutoClose
+};
+//# sourceMappingURL=useMenuAutoClose.js.map

package/esm/navigation/menu/hooks/useMenuAutoClose.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/navigation/menu/hooks/useMenuAutoClose.tsx"],
+  "sourcesContent": ["import { useEffect } from 'react';\n\nimport { isBrowser } from '../../../core/utils/isBrowser.js';\nimport {\n  getOverlayStackSize,\n  subscribeToOverlayStack,\n} from '../../../overlays/hooks/useOverlay.js';\n\n/**\n * Auto-close behavior shared between `Menu` and `Menu.Sub`:\n *\n * - Closes on window blur, working around a Radix bug where submenus stay\n *   open when the browser window loses focus\n *   (https://github.com/radix-ui/primitives/issues/1441).\n * - Closes when any `useOverlay`-managed overlay (Modal, Sheet, Drawer, ...)\n *   is pushed onto the stack while the menu is open, so the user only has\n *   to dismiss the topmost layer.\n *\n * Menus themselves don't register with `visibleOverlays` (Radix has its own\n * dismiss layer); the hook just observes stack growth above the size\n * captured at open-time.\n * @internal\n */\nexport function useMenuAutoClose(\n  open: boolean | undefined,\n  setOpen: (open: boolean) => void,\n): void {\n  useEffect(() => {\n    if (!isBrowser) {\n      return undefined;\n    }\n    const onWindowBlur = () => setOpen(false);\n    window.addEventListener('blur', onWindowBlur);\n    return () => {\n      window.removeEventListener('blur', onWindowBlur);\n    };\n  }, [setOpen]);\n\n  useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n    const stackSizeAtOpen = getOverlayStackSize();\n    return subscribeToOverlayStack(() => {\n      if (getOverlayStackSize() > stackSizeAtOpen) {\n        setOpen(false);\n      }\n    });\n  }, [open, setOpen]);\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAiBA,SAAS,iBACd,MACA,SACM;AACN,YAAU,MAAM;AACd,QAAI,CAAC,WAAW;AACd,aAAO;AAAA,IACT;AACA,UAAM,eAAe,MAAM,QAAQ,KAAK;AACxC,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AACA,UAAM,kBAAkB,oBAAoB;AAC5C,WAAO,wBAAwB,MAAM;AACnC,UAAI,oBAAoB,IAAI,iBAAiB;AAC3C,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,OAAO,CAAC;AACpB;",
+  "names": []
+}

package/esm/navigation/tabs/RenderTab.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._39c1kf0-3-5-2 {
+._39c1kf0-3-6-0 {
   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-5-2::after {
+._39c1kf0-3-6-0::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-5-2 {
+._39c1kf1-3-6-0 {
   pointer-events: none;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._39c1kf2-3-5-2 {
+._39c1kf2-3-6-0 {
   cursor: pointer;
 }
-._39c1kf2-3-5-2:hover {
+._39c1kf2-3-6-0:hover {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._39c1kf2-3-5-2:active {
+._39c1kf2-3-6-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._39c1kf5-3-5-2 {
+._39c1kf5-3-6-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._39c1kf5-3-5-2:hover {
+._39c1kf5-3-6-0:hover {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._39c1kf5-3-5-2:active {
+._39c1kf5-3-6-0:active {
   color: var(--dt-colors-text-primary-default, #464cce);
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._39c1kf5-3-5-2::after {
+._39c1kf5-3-6-0::after {
   border-bottom-color: var(--dt-colors-icon-primary-default, #464cce);
 }
-._39c1kf6-3-5-2 {
+._39c1kf6-3-6-0 {
   display: flex;
   flex: 1;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: center;
 }
-._39c1kf7-3-5-2 {
+._39c1kf7-3-6-0 {
   cursor: not-allowed;
 }
-._39c1kf0-3-5-2 .text-content {
+._39c1kf0-3-6-0 .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-5-2 svg + .text-content {
+._39c1kf0-3-6-0 svg + .text-content {
   padding-left: var(--dt-spacings-size-8, 8px);
 }

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

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

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

@@ -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-5-2';\nexport var tabButtonCSS = _7a468({defaultClassName:'_39c1kf0-3-5-2',variantClassNames:{disabled:{true:'_39c1kf1-3-5-2',false:'_39c1kf2-3-5-2'},selected:{true:'_39c1kf3-3-5-2',false:'_39c1kf4-3-5-2'}},defaultVariants:{},compoundVariants:[[{selected:true,disabled:false},'_39c1kf5-3-5-2']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-5-2';"],
+  "sourcesContent": ["import './RenderTab.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledTabWrapperCSS = '_39c1kf7-3-6-0';\nexport var tabButtonCSS = _7a468({defaultClassName:'_39c1kf0-3-6-0',variantClassNames:{disabled:{true:'_39c1kf1-3-6-0',false:'_39c1kf2-3-6-0'},selected:{true:'_39c1kf3-3-6-0',false:'_39c1kf4-3-6-0'}},defaultVariants:{},compoundVariants:[[{selected:true,disabled:false},'_39c1kf5-3-6-0']]});\nexport var tabContentWrapperCSS = '_39c1kf6-3-6-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,wBAAwB;AAC5B,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACzR,IAAI,uBAAuB;",
   "names": []
 }

package/esm/navigation/tabs/TabPanel.css CHANGED Viewed

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

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

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

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

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

package/esm/navigation/tabs/Tabs.css CHANGED Viewed

@@ -1,9 +1,9 @@
-._1tfbrxp0-3-5-2 {
+._1tfbrxp0-3-6-0 {
   display: flex;
   flex-direction: column;
   max-width: 100%;
 }
-._1tfbrxp1-3-5-2 {
+._1tfbrxp1-3-6-0 {
   display: flex;
   align-items: center;
   gap: var(--dt-spacings-size-4, 4px);
@@ -14,29 +14,29 @@
   scrollbar-width: none;
   scroll-behavior: smooth;
 }
-._1tfbrxp1-3-5-2::-webkit-scrollbar {
+._1tfbrxp1-3-6-0::-webkit-scrollbar {
   display: none;
 }
-._1tfbrxp2-3-5-2 {
+._1tfbrxp2-3-6-0 {
   -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-5-2 {
+._1tfbrxp3-3-6-0 {
   -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-5-2 {
+._1tfbrxp4-3-6-0 {
   -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-5-2 {
+._1tfbrxp5-3-6-0 {
   position: relative;
   z-index: var(--dt-elevations-default, 1);
 }
-._1tfbrxp5-3-5-2:after {
+._1tfbrxp5-3-6-0:after {
   content: '';
   display: block;
   position: absolute;
@@ -47,7 +47,7 @@
   left: 0;
   right: 0;
 }
-._1tfbrxp6-3-5-2 {
+._1tfbrxp6-3-6-0 {
   position: absolute;
   top: 0;
   z-index: var(--dt-elevations-overlay, 20);

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/tabs/Tabs.css.ts"],
-  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-5-2';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-5-2';\nexport var tabsCSS = '_1tfbrxp0-3-5-2';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-5-2';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-5-2',right:'_1tfbrxp3-3-5-2',both:'_1tfbrxp4-3-5-2'};"],
+  "sourcesContent": ["import './Tabs.css';\nexport var tabsArrowButtonCSS = '_1tfbrxp6-3-6-0';\nexport var tabsArrowWrapperCSS = '_1tfbrxp5-3-6-0';\nexport var tabsCSS = '_1tfbrxp0-3-6-0';\nexport var tabsWrapperCSS = '_1tfbrxp1-3-6-0';\nexport var tabsWrapperOverflowCSS = {left:'_1tfbrxp2-3-6-0',right:'_1tfbrxp3-3-6-0',both:'_1tfbrxp4-3-6-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 CHANGED Viewed

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

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

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

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

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

package/esm/notifications/toast/Toast.css CHANGED Viewed

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

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

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

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

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