@mantine/core 9.2.2 → 9.3.1

package/esm/components/Menu/MenuSearch/MenuSearch.mjs

@@ -0,0 +1,115 @@
+"use client";
+import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Input } from "../../Input/Input.mjs";
+import { useMenuContext } from "../Menu.context.mjs";
+import Menu_module_default from "../Menu.module.mjs";
+import { useEffect, useRef } from "react";
+import { useMergedRef } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Menu/MenuSearch/MenuSearch.tsx
+const ITEM_SELECTOR = "[data-menu-item]:not([data-disabled])";
+const ACTIVE_SELECTOR = "[data-menu-active]";
+function getDropdown(node) {
+	return node?.closest("[data-menu-dropdown]");
+}
+function getItems(dropdown) {
+	if (!dropdown) return [];
+	return Array.from(dropdown.querySelectorAll(ITEM_SELECTOR)).filter((item) => item.closest("[data-menu-dropdown]") === dropdown);
+}
+function clearActive(dropdown) {
+	if (!dropdown) return;
+	dropdown.querySelectorAll(ACTIVE_SELECTOR).forEach((node) => {
+		if (node.closest("[data-menu-dropdown]") === dropdown) node.removeAttribute("data-menu-active");
+	});
+}
+function setActive(item, dropdown) {
+	clearActive(dropdown);
+	if (item) {
+		item.setAttribute("data-menu-active", "true");
+		item.scrollIntoView({ block: "nearest" });
+	}
+}
+function getActiveIndex(items) {
+	return items.findIndex((item) => item.hasAttribute("data-menu-active"));
+}
+const defaultProps = { clearSearchOnClose: true };
+const MenuSearch = factory((props) => {
+	const { classNames, styles, onKeyDown, onChange, size, clearSearchOnClose, ref, ...others } = useProps("MenuSearch", defaultProps, props);
+	const ctx = useMenuContext();
+	const inputRef = useRef(null);
+	const mergedRef = useMergedRef(ref, inputRef);
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	useEffect(() => {
+		return ctx.registerSearch();
+	}, [ctx.registerSearch]);
+	useEffect(() => {
+		if (clearSearchOnClose) ctx.searchExitClearRef.current = () => {
+			onChangeRef.current?.({ currentTarget: { value: "" } });
+		};
+		else ctx.searchExitClearRef.current = null;
+	}, [clearSearchOnClose, ctx.searchExitClearRef]);
+	useEffect(() => {
+		if (!ctx.opened) clearActive(getDropdown(inputRef.current));
+	}, [ctx.opened]);
+	const handleChange = createEventHandler(onChange, (event) => {
+		clearActive(getDropdown(event.currentTarget));
+	});
+	const handleKeyDown = createEventHandler(onKeyDown, (event) => {
+		if (event.defaultPrevented) return;
+		const dropdown = getDropdown(event.currentTarget);
+		const items = getItems(dropdown);
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (items.length === 0) return;
+			const current = getActiveIndex(items);
+			setActive(items[current >= items.length - 1 ? ctx.loop ? 0 : current : current + 1] ?? null, dropdown);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			if (items.length === 0) return;
+			const current = getActiveIndex(items);
+			setActive(items[current <= 0 ? current === -1 ? items.length - 1 : ctx.loop ? items.length - 1 : 0 : current - 1] ?? null, dropdown);
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			if (items.length > 0) setActive(items[0], dropdown);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			if (items.length > 0) setActive(items[items.length - 1], dropdown);
+		} else if (event.key === "Enter") {
+			if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
+			const target = items[getActiveIndex(items)];
+			if (target) {
+				event.preventDefault();
+				if (target.hasAttribute("data-sub-menu-item")) {
+					target.focus();
+					target.dispatchEvent(new KeyboardEvent("keydown", {
+						key: "ArrowRight",
+						bubbles: true
+					}));
+				} else target.click();
+			}
+		}
+	});
+	const _styles = ctx.getStyles("search");
+	return /* @__PURE__ */ jsx(Input, {
+		"data-autofocus": true,
+		"data-mantine-stop-propagation": true,
+		type: "search",
+		size,
+		...others,
+		ref: mergedRef,
+		classNames: [{ input: _styles.className }, classNames],
+		styles: [{ input: _styles.style }, styles],
+		onKeyDown: handleKeyDown,
+		onChange: handleChange,
+		__staticSelector: "Menu"
+	});
+});
+MenuSearch.classes = Menu_module_default;
+MenuSearch.displayName = "@mantine/core/MenuSearch";
+//#endregion
+export { MenuSearch };
+
+//# sourceMappingURL=MenuSearch.mjs.map

package/esm/components/Menu/MenuSearch/MenuSearch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSearch.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuSearch/MenuSearch.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { createEventHandler, ElementProps, factory, Factory, useProps } from '../../../core';\nimport { Input, InputProps } from '../../Input/Input';\nimport { useMenuContext } from '../Menu.context';\nimport classes from '../Menu.module.css';\n\nconst ITEM_SELECTOR = '[data-menu-item]:not([data-disabled])';\nconst ACTIVE_SELECTOR = '[data-menu-active]';\n\nfunction getDropdown(node: HTMLElement | null): HTMLElement | null {\n  return node?.closest('[data-menu-dropdown]') as HTMLElement | null;\n}\n\nfunction getItems(dropdown: HTMLElement | null): HTMLElement[] {\n  if (!dropdown) {\n    return [];\n  }\n  return Array.from(dropdown.querySelectorAll<HTMLElement>(ITEM_SELECTOR)).filter(\n    (item) => item.closest('[data-menu-dropdown]') === dropdown\n  );\n}\n\nfunction clearActive(dropdown: HTMLElement | null) {\n  if (!dropdown) {\n    return;\n  }\n  dropdown.querySelectorAll<HTMLElement>(ACTIVE_SELECTOR).forEach((node) => {\n    if (node.closest('[data-menu-dropdown]') === dropdown) {\n      node.removeAttribute('data-menu-active');\n    }\n  });\n}\n\nfunction setActive(item: HTMLElement | null, dropdown: HTMLElement | null) {\n  clearActive(dropdown);\n  if (item) {\n    item.setAttribute('data-menu-active', 'true');\n    item.scrollIntoView({ block: 'nearest' });\n  }\n}\n\nfunction getActiveIndex(items: HTMLElement[]): number {\n  return items.findIndex((item) => item.hasAttribute('data-menu-active'));\n}\n\nexport type MenuSearchStylesNames = 'search';\n\nexport interface MenuSearchProps extends InputProps, ElementProps<'input', 'size'> {\n  /** If set, clears the search value after the menu close transition completes. Requires a controlled `value`/`onChange` pair. @default true */\n  clearSearchOnClose?: boolean;\n}\n\nexport type MenuSearchFactory = Factory<{\n  props: MenuSearchProps;\n  ref: HTMLInputElement;\n  stylesNames: MenuSearchStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  clearSearchOnClose: true,\n} satisfies Partial<MenuSearchProps>;\n\nexport const MenuSearch = factory<MenuSearchFactory>((props) => {\n  const { classNames, styles, onKeyDown, onChange, size, clearSearchOnClose, ref, ...others } =\n    useProps('MenuSearch', defaultProps, props);\n\n  const ctx = useMenuContext();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const mergedRef = useMergedRef(ref, inputRef);\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  useEffect(() => {\n    const unregister = ctx.registerSearch();\n    return unregister;\n  }, [ctx.registerSearch]);\n\n  useEffect(() => {\n    if (clearSearchOnClose) {\n      ctx.searchExitClearRef.current = () => {\n        onChangeRef.current?.({\n          currentTarget: { value: '' },\n        } as unknown as React.ChangeEvent<HTMLInputElement>);\n      };\n    } else {\n      ctx.searchExitClearRef.current = null;\n    }\n  }, [clearSearchOnClose, ctx.searchExitClearRef]);\n\n  useEffect(() => {\n    if (!ctx.opened) {\n      const dropdown = getDropdown(inputRef.current);\n      clearActive(dropdown);\n    }\n  }, [ctx.opened]);\n\n  const handleChange = createEventHandler<any>(\n    onChange,\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      const dropdown = getDropdown(event.currentTarget);\n      clearActive(dropdown);\n    }\n  );\n\n  const handleKeyDown = createEventHandler<any>(\n    onKeyDown,\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      const dropdown = getDropdown(event.currentTarget);\n      const items = getItems(dropdown);\n\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        if (items.length === 0) {\n          return;\n        }\n        const current = getActiveIndex(items);\n        const next = current >= items.length - 1 ? (ctx.loop ? 0 : current) : current + 1;\n        setActive(items[next] ?? null, dropdown);\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        if (items.length === 0) {\n          return;\n        }\n        const current = getActiveIndex(items);\n        const next =\n          current <= 0\n            ? current === -1\n              ? items.length - 1\n              : ctx.loop\n                ? items.length - 1\n                : 0\n            : current - 1;\n        setActive(items[next] ?? null, dropdown);\n      } else if (event.key === 'Home') {\n        event.preventDefault();\n        if (items.length > 0) {\n          setActive(items[0]!, dropdown);\n        }\n      } else if (event.key === 'End') {\n        event.preventDefault();\n        if (items.length > 0) {\n          setActive(items[items.length - 1]!, dropdown);\n        }\n      } else if (event.key === 'Enter') {\n        if (event.nativeEvent.isComposing || (event.nativeEvent as KeyboardEvent).keyCode === 229) {\n          return;\n        }\n        const activeIndex = getActiveIndex(items);\n        const target = items[activeIndex];\n        if (target) {\n          event.preventDefault();\n          if (target.hasAttribute('data-sub-menu-item')) {\n            target.focus();\n            target.dispatchEvent(\n              new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true })\n            );\n          } else {\n            target.click();\n          }\n        }\n      }\n    }\n  );\n\n  const _styles = ctx.getStyles('search');\n\n  return (\n    <Input\n      data-autofocus\n      data-mantine-stop-propagation\n      type=\"search\"\n      size={size}\n      {...others}\n      ref={mergedRef}\n      classNames={[{ input: _styles.className }, classNames] as any}\n      styles={[{ input: _styles.style }, styles] as any}\n      onKeyDown={handleKeyDown}\n      onChange={handleChange}\n      __staticSelector=\"Menu\"\n    />\n  );\n});\n\nMenuSearch.classes = classes;\nMenuSearch.displayName = '@mantine/core/MenuSearch';\n"],"mappings":"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"}

package/esm/components/Menu/MenuSelectableItem/MenuSelectableItem.mjs

@@ -0,0 +1,114 @@
+"use client";
+import { createScopedKeydownHandler } from "../../../core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.mjs";
+import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
+import { parseThemeColor } from "../../../core/MantineProvider/color-functions/parse-theme-color/parse-theme-color.mjs";
+import { useMantineTheme } from "../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs";
+import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
+import { UnstyledButton } from "../../UnstyledButton/UnstyledButton.mjs";
+import { useMenuContext } from "../Menu.context.mjs";
+import { SubMenuContext } from "../MenuSub/MenuSub.context.mjs";
+import { use, useRef } from "react";
+import { useMergedRef } from "@mantine/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Menu/MenuSelectableItem/MenuSelectableItem.tsx
+function MenuSelectableItem({ role, checked, indicator, onSelect, color, closeMenuOnClick, rightSection, children, disabled, dataDisabled, className, style, styles, classNames, buttonRef, others }) {
+	const ctx = useMenuContext();
+	const subCtx = use(SubMenuContext);
+	const theme = useMantineTheme();
+	const { dir } = useDirection();
+	const itemRef = useRef(null);
+	const handleClick = createEventHandler(others.onClick, () => {
+		if (dataDisabled) return;
+		onSelect();
+		if (closeMenuOnClick) ctx.closeDropdownImmediately();
+	});
+	const handleMouseMove = createEventHandler(others.onMouseMove, () => {
+		if (!ctx.hasSearch) return;
+		const dropdown = itemRef.current?.closest("[data-menu-dropdown]");
+		if (!dropdown) return;
+		dropdown.querySelectorAll("[data-menu-active]").forEach((node) => {
+			if (node !== itemRef.current && node.closest("[data-menu-dropdown]") === dropdown) node.removeAttribute("data-menu-active");
+		});
+	});
+	const handleKeydown = createEventHandler(others.onKeyDown, (event) => {
+		if (event.key === "ArrowLeft" && subCtx) {
+			subCtx.close();
+			subCtx.focusParentItem();
+		}
+	});
+	const colors = color ? theme.variantColorResolver({
+		color,
+		theme,
+		variant: "light"
+	}) : void 0;
+	const parsedThemeColor = color ? parseThemeColor({
+		color,
+		theme
+	}) : null;
+	const renderIndicator = ctx.alignItemsLabels !== "none" || checked;
+	return /* @__PURE__ */ jsxs(UnstyledButton, {
+		onMouseDown: (event) => event.preventDefault(),
+		...others,
+		unstyled: ctx.unstyled,
+		tabIndex: ctx.menuItemTabIndex,
+		...ctx.getStyles("item", {
+			className,
+			style,
+			styles,
+			classNames
+		}),
+		ref: useMergedRef(itemRef, buttonRef),
+		role,
+		"aria-checked": checked,
+		disabled,
+		"data-menu-item": true,
+		"data-checked": checked || void 0,
+		"data-disabled": disabled || dataDisabled || void 0,
+		"data-mantine-stop-propagation": true,
+		onClick: handleClick,
+		onMouseMove: handleMouseMove,
+		onKeyDown: createScopedKeydownHandler({
+			siblingSelector: "[data-menu-item]:not([data-disabled])",
+			parentSelector: "[data-menu-dropdown]",
+			activateOnFocus: false,
+			loop: ctx.loop,
+			dir,
+			orientation: "vertical",
+			onKeyDown: handleKeydown
+		}),
+		__vars: {
+			"--menu-item-color": parsedThemeColor?.isThemeColor && parsedThemeColor?.shade === void 0 ? `var(--mantine-color-${parsedThemeColor.color}-6)` : colors?.color,
+			"--menu-item-hover": colors?.hover
+		},
+		children: [
+			renderIndicator && /* @__PURE__ */ jsx("div", {
+				...ctx.getStyles("itemIndicator", {
+					styles,
+					classNames
+				}),
+				"data-checked": checked || void 0,
+				children: checked ? indicator : null
+			}),
+			children && /* @__PURE__ */ jsx("div", {
+				...ctx.getStyles("itemLabel", {
+					styles,
+					classNames
+				}),
+				"data-menu-item-label": true,
+				children
+			}),
+			rightSection && /* @__PURE__ */ jsx("div", {
+				...ctx.getStyles("itemSection", {
+					styles,
+					classNames
+				}),
+				"data-position": "right",
+				children: rightSection
+			})
+		]
+	});
+}
+//#endregion
+export { MenuSelectableItem };
+
+//# sourceMappingURL=MenuSelectableItem.mjs.map

package/esm/components/Menu/MenuSelectableItem/MenuSelectableItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSelectableItem.mjs","names":[],"sources":["../../../../src/components/Menu/MenuSelectableItem/MenuSelectableItem.tsx"],"sourcesContent":["import { use, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  createEventHandler,\n  createScopedKeydownHandler,\n  MantineColor,\n  parseThemeColor,\n  useDirection,\n  useMantineTheme,\n} from '../../../core';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useMenuContext } from '../Menu.context';\nimport { SubMenuContext } from '../MenuSub/MenuSub.context';\n\nexport interface MenuSelectableItemProps {\n  role: 'menuitemcheckbox' | 'menuitemradio';\n  checked: boolean;\n  indicator: React.ReactNode;\n  onSelect: () => void;\n  color: MantineColor | undefined;\n  closeMenuOnClick: boolean | undefined;\n  rightSection: React.ReactNode;\n  children: React.ReactNode;\n  disabled: boolean | undefined;\n  dataDisabled: boolean | undefined;\n  className: string | undefined;\n  style: any;\n  styles: any;\n  classNames: any;\n  buttonRef: React.Ref<HTMLButtonElement> | undefined;\n  others: Record<string, any>;\n}\n\nexport function MenuSelectableItem({\n  role,\n  checked,\n  indicator,\n  onSelect,\n  color,\n  closeMenuOnClick,\n  rightSection,\n  children,\n  disabled,\n  dataDisabled,\n  className,\n  style,\n  styles,\n  classNames,\n  buttonRef,\n  others,\n}: MenuSelectableItemProps) {\n  const ctx = useMenuContext();\n  const subCtx = use(SubMenuContext);\n  const theme = useMantineTheme();\n  const { dir } = useDirection();\n  const itemRef = useRef<HTMLButtonElement>(null);\n\n  const handleClick = createEventHandler<any>(others.onClick, () => {\n    if (dataDisabled) {\n      return;\n    }\n    onSelect();\n    if (closeMenuOnClick) {\n      ctx.closeDropdownImmediately();\n    }\n  });\n\n  const handleMouseMove = createEventHandler<any>(others.onMouseMove, () => {\n    if (!ctx.hasSearch) {\n      return;\n    }\n    const dropdown = itemRef.current?.closest('[data-menu-dropdown]');\n    if (!dropdown) {\n      return;\n    }\n    dropdown.querySelectorAll<HTMLElement>('[data-menu-active]').forEach((node) => {\n      if (node !== itemRef.current && node.closest('[data-menu-dropdown]') === dropdown) {\n        node.removeAttribute('data-menu-active');\n      }\n    });\n  });\n\n  const handleKeydown = createEventHandler<any>(others.onKeyDown, (event) => {\n    if (event.key === 'ArrowLeft' && subCtx) {\n      subCtx.close();\n      subCtx.focusParentItem();\n    }\n  });\n\n  const colors = color ? theme.variantColorResolver({ color, theme, variant: 'light' }) : undefined;\n  const parsedThemeColor = color ? parseThemeColor({ color, theme }) : null;\n  const renderIndicator = ctx.alignItemsLabels !== 'none' || checked;\n\n  return (\n    <UnstyledButton\n      onMouseDown={(event) => event.preventDefault()}\n      {...others}\n      unstyled={ctx.unstyled}\n      tabIndex={ctx.menuItemTabIndex}\n      {...ctx.getStyles('item', { className, style, styles, classNames })}\n      ref={useMergedRef(itemRef, buttonRef)}\n      role={role}\n      aria-checked={checked}\n      disabled={disabled}\n      data-menu-item\n      data-checked={checked || undefined}\n      data-disabled={disabled || dataDisabled || undefined}\n      data-mantine-stop-propagation\n      onClick={handleClick}\n      onMouseMove={handleMouseMove}\n      onKeyDown={createScopedKeydownHandler({\n        siblingSelector: '[data-menu-item]:not([data-disabled])',\n        parentSelector: '[data-menu-dropdown]',\n        activateOnFocus: false,\n        loop: ctx.loop,\n        dir,\n        orientation: 'vertical',\n        onKeyDown: handleKeydown,\n      })}\n      __vars={{\n        '--menu-item-color':\n          parsedThemeColor?.isThemeColor && parsedThemeColor?.shade === undefined\n            ? `var(--mantine-color-${parsedThemeColor.color}-6)`\n            : colors?.color,\n        '--menu-item-hover': colors?.hover,\n      }}\n    >\n      {renderIndicator && (\n        <div\n          {...ctx.getStyles('itemIndicator', { styles, classNames })}\n          data-checked={checked || undefined}\n        >\n          {checked ? indicator : null}\n        </div>\n      )}\n      {children && (\n        <div {...ctx.getStyles('itemLabel', { styles, classNames })} data-menu-item-label>\n          {children}\n        </div>\n      )}\n      {rightSection && (\n        <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"right\">\n          {rightSection}\n        </div>\n      )}\n    </UnstyledButton>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAiCA,SAAgB,mBAAmB,EACjC,MACA,SACA,WACA,UACA,OACA,kBACA,cACA,UACA,UACA,cACA,WACA,OACA,QACA,YACA,WACA,UAC0B;CAC1B,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,IAAI,cAAc;CACjC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,UAAU,OAA0B,IAAI;CAE9C,MAAM,cAAc,mBAAwB,OAAO,eAAe;EAChE,IAAI,cACF;EAEF,SAAS;EACT,IAAI,kBACF,IAAI,yBAAyB;CAEjC,CAAC;CAED,MAAM,kBAAkB,mBAAwB,OAAO,mBAAmB;EACxE,IAAI,CAAC,IAAI,WACP;EAEF,MAAM,WAAW,QAAQ,SAAS,QAAQ,sBAAsB;EAChE,IAAI,CAAC,UACH;EAEF,SAAS,iBAA8B,oBAAoB,EAAE,SAAS,SAAS;GAC7E,IAAI,SAAS,QAAQ,WAAW,KAAK,QAAQ,sBAAsB,MAAM,UACvE,KAAK,gBAAgB,kBAAkB;EAE3C,CAAC;CACH,CAAC;CAED,MAAM,gBAAgB,mBAAwB,OAAO,YAAY,UAAU;EACzE,IAAI,MAAM,QAAQ,eAAe,QAAQ;GACvC,OAAO,MAAM;GACb,OAAO,gBAAgB;EACzB;CACF,CAAC;CAED,MAAM,SAAS,QAAQ,MAAM,qBAAqB;EAAE;EAAO;EAAO,SAAS;CAAQ,CAAC,IAAI,KAAA;CACxF,MAAM,mBAAmB,QAAQ,gBAAgB;EAAE;EAAO;CAAM,CAAC,IAAI;CACrE,MAAM,kBAAkB,IAAI,qBAAqB,UAAU;CAE3D,OACE,qBAAC,gBAAD;EACE,cAAc,UAAU,MAAM,eAAe;EAC7C,GAAI;EACJ,UAAU,IAAI;EACd,UAAU,IAAI;EACd,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO;GAAQ;EAAW,CAAC;EAClE,KAAK,aAAa,SAAS,SAAS;EAC9B;EACN,gBAAc;EACJ;EACV,kBAAA;EACA,gBAAc,WAAW,KAAA;EACzB,iBAAe,YAAY,gBAAgB,KAAA;EAC3C,iCAAA;EACA,SAAS;EACT,aAAa;EACb,WAAW,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB;GACjB,MAAM,IAAI;GACV;GACA,aAAa;GACb,WAAW;EACb,CAAC;EACD,QAAQ;GACN,qBACE,kBAAkB,gBAAgB,kBAAkB,UAAU,KAAA,IAC1D,uBAAuB,iBAAiB,MAAM,OAC9C,QAAQ;GACd,qBAAqB,QAAQ;EAC/B;YA/BF;GAiCG,mBACC,oBAAC,OAAD;IACE,GAAI,IAAI,UAAU,iBAAiB;KAAE;KAAQ;IAAW,CAAC;IACzD,gBAAc,WAAW,KAAA;cAExB,UAAU,YAAY;GACpB,CAAA;GAEN,YACC,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa;KAAE;KAAQ;IAAW,CAAC;IAAG,wBAAA;IAC1D;GACE,CAAA;GAEN,gBACC,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe;KAAE;KAAQ;IAAW,CAAC;IAAG,iBAAc;cAC1E;GACE,CAAA;EAEO;;AAEpB"}

package/esm/components/Menu/MenuSub/MenuSub.mjs

@@ -8,8 +8,8 @@ import { SubMenuContext } from "./MenuSub.context.mjs";
 import { MenuSubDropdown } from "../MenuSubDropdown/MenuSubDropdown.mjs";
 import { MenuSubItem } from "../MenuSubItem/MenuSubItem.mjs";
 import { MenuSubTarget } from "../MenuSubTarget/MenuSubTarget.mjs";
-import { use, useCallback, useRef } from "react";
-import { useDisclosure, useId as useId$1 } from "@mantine/hooks";
+import { use, useCallback, useEffect, useRef } from "react";
+import { useId as useId$1, useUncontrolled } from "@mantine/hooks";
 import { jsx } from "react/jsx-runtime";
 import { safePolygon, useFloating, useHover, useInteractions } from "@floating-ui/react";
 //#region packages/@mantine/core/src/components/Menu/MenuSub/MenuSub.tsx
@@ -22,15 +22,18 @@ const defaultProps = {
 	middlewares: { shift: { crossAxis: true } }
 };
 function MenuSub(_props) {
-	const { children, closeDelay, openDelay, position, safeAreaPolygon, ...others } = useProps("MenuSub", defaultProps, _props);
+	const { children, closeDelay, openDelay, position, safeAreaPolygon, opened: openedProp, onChange, ...others } = useProps("MenuSub", defaultProps, _props);
 	const id = useId$1();
-	const [opened, { open, close }] = useDisclosure(false);
+	const [opened, setOpened] = useUncontrolled({
+		value: openedProp,
+		finalValue: false,
+		onChange
+	});
 	const parentSubCtx = use(SubMenuContext);
 	const menuCtx = useMenuContext();
 	const { dir } = useDirection();
 	const resolvedPosition = getFloatingPosition(dir, position);
 	const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;
-	const unregisterRef = useRef(null);
 	const activeChildCloseRef = useRef(null);
 	const registerOpenSub = useCallback((closeFn) => {
 		const prev = activeChildCloseRef.current;
@@ -40,19 +43,18 @@ function MenuSub(_props) {
 			if (activeChildCloseRef.current === closeFn) activeChildCloseRef.current = null;
 		};
 	}, []);
-	const handleOpen = useCallback(() => {
-		unregisterRef.current = levelRegister(close);
-		open();
+	const setOpenedRef = useRef(setOpened);
+	setOpenedRef.current = setOpened;
+	const handleOpen = useCallback(() => setOpenedRef.current(true), []);
+	const handleClose = useCallback(() => setOpenedRef.current(false), []);
+	useEffect(() => {
+		if (!opened) return;
+		return levelRegister(handleClose);
 	}, [
-		close,
+		opened,
 		levelRegister,
-		open
+		handleClose
 	]);
-	const handleClose = useCallback(() => {
-		unregisterRef.current?.();
-		unregisterRef.current = null;
-		close();
-	}, [close]);
 	const { context, refs } = useFloating({
 		placement: resolvedPosition,
 		open: opened,
@@ -90,6 +92,7 @@ function MenuSub(_props) {
 		},
 		children: /* @__PURE__ */ jsx(Popover, {
 			opened,
+			onChange: (nextOpened) => nextOpened ? handleOpen() : handleClose(),
 			withinPortal: false,
 			withArrow: false,
 			id,

package/esm/components/Menu/MenuSub/MenuSub.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSub.mjs","names":["useId"],"sources":["../../../../src/components/Menu/MenuSub/MenuSub.tsx"],"sourcesContent":["import { use, useCallback, useRef } from 'react';\nimport {\n  safePolygon,\n  useFloating,\n  useHover,\n  useInteractions,\n  type SafePolygonOptions,\n} from '@floating-ui/react';\nimport { useDisclosure, useId } from '@mantine/hooks';\nimport { ExtendComponent, Factory, useDirection, useProps } from '../../../core';\nimport {\n  FloatingAxesOffsets,\n  FloatingPosition,\n  getFloatingPosition,\n} from '../../../utils/Floating';\nimport { __PopoverProps, Popover } from '../../Popover';\nimport { TransitionOverride } from '../../Transition';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuSubDropdown } from '../MenuSubDropdown/MenuSubDropdown';\nimport { MenuSubItem } from '../MenuSubItem/MenuSubItem';\nimport { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';\nimport { SubMenuContext } from './MenuSub.context';\n\nexport type MenuSubFactory = Factory<{\n  props: MenuSubProps;\n}>;\n\nexport interface MenuSubProps extends __PopoverProps {\n  children: React.ReactNode;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Open delay in ms, applicable when hover trigger is used */\n  openDelay?: number;\n\n  /** Close delay in ms, applicable when hover trigger is used */\n  closeDelay?: number;\n\n  /** Dropdown position relative to the target element @default 'right-start' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 0 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type @default { duration: 0 } */\n  transitionProps?: TransitionOverride;\n\n  /** Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior. @default true */\n  safeAreaPolygon?: boolean | SafePolygonOptions;\n}\n\nconst defaultProps = {\n  offset: 0,\n  position: 'right-start',\n  safeAreaPolygon: true,\n  transitionProps: { duration: 0 },\n  openDelay: 0,\n  middlewares: {\n    shift: {\n      // Enable crossAxis shift to keep submenu dropdown within viewport bounds when positioned horizontally\n      crossAxis: true,\n    },\n  },\n} satisfies Partial<MenuSubProps>;\n\nexport function MenuSub(_props: MenuSubProps) {\n  const { children, closeDelay, openDelay, position, safeAreaPolygon, ...others } = useProps(\n    'MenuSub',\n    defaultProps,\n    _props\n  );\n  const id = useId();\n  const [opened, { open, close }] = useDisclosure(false);\n  const parentSubCtx = use(SubMenuContext);\n  const menuCtx = useMenuContext();\n  const { dir } = useDirection();\n  const resolvedPosition = getFloatingPosition(dir, position);\n\n  const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;\n  const unregisterRef = useRef<(() => void) | null>(null);\n\n  const activeChildCloseRef = useRef<(() => void) | null>(null);\n  const registerOpenSub = useCallback((closeFn: () => void) => {\n    const prev = activeChildCloseRef.current;\n    if (prev && prev !== closeFn) {\n      prev();\n    }\n    activeChildCloseRef.current = closeFn;\n    return () => {\n      if (activeChildCloseRef.current === closeFn) {\n        activeChildCloseRef.current = null;\n      }\n    };\n  }, []);\n\n  const handleOpen = useCallback(() => {\n    unregisterRef.current = levelRegister(close);\n    open();\n  }, [close, levelRegister, open]);\n\n  const handleClose = useCallback(() => {\n    unregisterRef.current?.();\n    unregisterRef.current = null;\n    close();\n  }, [close]);\n\n  const { context, refs } = useFloating({\n    placement: resolvedPosition,\n    open: opened,\n    onOpenChange: (nextOpen) => {\n      if (nextOpen) {\n        handleOpen();\n      } else {\n        handleClose();\n      }\n    },\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      handleClose: safeAreaPolygon\n        ? safePolygon(typeof safeAreaPolygon === 'object' ? safeAreaPolygon : undefined)\n        : undefined,\n      delay: { open: openDelay, close: closeDelay },\n    }),\n  ]);\n\n  const focusFirstItem = () =>\n    window.setTimeout(() => {\n      document\n        .getElementById(`${id}-dropdown`)\n        ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not([data-disabled])')[0]\n        ?.focus();\n    }, 16);\n\n  const focusParentItem = () =>\n    window.setTimeout(() => {\n      document.getElementById(`${id}-target`)?.focus();\n    }, 16);\n\n  return (\n    <SubMenuContext\n      value={{\n        opened,\n        close: handleClose,\n        open: handleOpen,\n        focusFirstItem,\n        focusParentItem,\n        parentContext: parentSubCtx,\n        setReference: refs.setReference,\n        setFloating: refs.setFloating,\n        getReferenceProps,\n        getFloatingProps,\n        registerOpenSub,\n      }}\n    >\n      <Popover\n        opened={opened}\n        withinPortal={false}\n        withArrow={false}\n        id={id}\n        position={position}\n        {...others}\n      >\n        {children}\n      </Popover>\n    </SubMenuContext>\n  );\n}\n\nMenuSub.extend = (input: ExtendComponent<MenuSubFactory>) => input;\nMenuSub.displayName = '@mantine/core/MenuSub';\nMenuSub.Target = MenuSubTarget;\nMenuSub.Dropdown = MenuSubDropdown;\nMenuSub.Item = MenuSubItem;\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAM,eAAe;CACnB,QAAQ;CACR,UAAU;CACV,iBAAiB;CACjB,iBAAiB,EAAE,UAAU,EAAE;CAC/B,WAAW;CACX,aAAa,EACX,OAAO,EAEL,WAAW,KACb,EACF;AACF;AAEA,SAAgB,QAAQ,QAAsB;CAC5C,MAAM,EAAE,UAAU,YAAY,WAAW,UAAU,iBAAiB,GAAG,WAAW,SAChF,WACA,cACA,MACF;CACA,MAAM,KAAKA,QAAM;CACjB,MAAM,CAAC,QAAQ,EAAE,MAAM,WAAW,cAAc,KAAK;CACrD,MAAM,eAAe,IAAI,cAAc;CACvC,MAAM,UAAU,eAAe;CAC/B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,mBAAmB,oBAAoB,KAAK,QAAQ;CAE1D,MAAM,gBAAgB,cAAc,mBAAmB,QAAQ;CAC/D,MAAM,gBAAgB,OAA4B,IAAI;CAEtD,MAAM,sBAAsB,OAA4B,IAAI;CAC5D,MAAM,kBAAkB,aAAa,YAAwB;EAC3D,MAAM,OAAO,oBAAoB;EACjC,IAAI,QAAQ,SAAS,SACnB,KAAK;EAEP,oBAAoB,UAAU;EAC9B,aAAa;GACX,IAAI,oBAAoB,YAAY,SAClC,oBAAoB,UAAU;EAElC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,kBAAkB;EACnC,cAAc,UAAU,cAAc,KAAK;EAC3C,KAAK;CACP,GAAG;EAAC;EAAO;EAAe;CAAI,CAAC;CAE/B,MAAM,cAAc,kBAAkB;EACpC,cAAc,UAAU;EACxB,cAAc,UAAU;EACxB,MAAM;CACR,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,EAAE,SAAS,SAAS,YAAY;EACpC,WAAW;EACX,MAAM;EACN,eAAe,aAAa;GAC1B,IAAI,UACF,WAAW;QAEX,YAAY;EAEhB;CACF,CAAC;CAED,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB,CAC9D,SAAS,SAAS;EAChB,aAAa,kBACT,YAAY,OAAO,oBAAoB,WAAW,kBAAkB,KAAA,CAAS,IAC7E,KAAA;EACJ,OAAO;GAAE,MAAM;GAAW,OAAO;EAAW;CAC9C,CAAC,CACH,CAAC;CAED,MAAM,uBACJ,OAAO,iBAAiB;EACtB,SACG,eAAe,GAAG,GAAG,UAAU,GAC9B,iBAAoC,uCAAuC,EAAE,IAC7E,MAAM;CACZ,GAAG,EAAE;CAEP,MAAM,wBACJ,OAAO,iBAAiB;EACtB,SAAS,eAAe,GAAG,GAAG,QAAQ,GAAG,MAAM;CACjD,GAAG,EAAE;CAEP,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,OAAO;GACP,MAAM;GACN;GACA;GACA,eAAe;GACf,cAAc,KAAK;GACnB,aAAa,KAAK;GAClB;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACU;GACR,cAAc;GACd,WAAW;GACP;GACM;GACV,GAAI;GAEH;EACM,CAAA;CACK,CAAA;AAEpB;AAEA,QAAQ,UAAU,UAA2C;AAC7D,QAAQ,cAAc;AACtB,QAAQ,SAAS;AACjB,QAAQ,WAAW;AACnB,QAAQ,OAAO"}
+{"version":3,"file":"MenuSub.mjs","names":["useId"],"sources":["../../../../src/components/Menu/MenuSub/MenuSub.tsx"],"sourcesContent":["import { use, useCallback, useEffect, useRef } from 'react';\nimport {\n  safePolygon,\n  useFloating,\n  useHover,\n  useInteractions,\n  type SafePolygonOptions,\n} from '@floating-ui/react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport { ExtendComponent, Factory, useDirection, useProps } from '../../../core';\nimport {\n  FloatingAxesOffsets,\n  FloatingPosition,\n  getFloatingPosition,\n} from '../../../utils/Floating';\nimport { __PopoverProps, Popover } from '../../Popover';\nimport { TransitionOverride } from '../../Transition';\nimport { useMenuContext } from '../Menu.context';\nimport { MenuSubDropdown } from '../MenuSubDropdown/MenuSubDropdown';\nimport { MenuSubItem } from '../MenuSubItem/MenuSubItem';\nimport { MenuSubTarget } from '../MenuSubTarget/MenuSubTarget';\nimport { SubMenuContext } from './MenuSub.context';\n\nexport type MenuSubFactory = Factory<{\n  props: MenuSubProps;\n}>;\n\nexport interface MenuSubProps extends __PopoverProps {\n  children: React.ReactNode;\n\n  /** Controlled opened state */\n  opened?: boolean;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Open delay in ms, applicable when hover trigger is used */\n  openDelay?: number;\n\n  /** Close delay in ms, applicable when hover trigger is used */\n  closeDelay?: number;\n\n  /** Dropdown position relative to the target element @default 'right-start' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 0 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type @default { duration: 0 } */\n  transitionProps?: TransitionOverride;\n\n  /** Determines whether submenu stays open while the cursor moves toward its dropdown. Pass an object to configure safe polygon behavior. @default true */\n  safeAreaPolygon?: boolean | SafePolygonOptions;\n}\n\nconst defaultProps = {\n  offset: 0,\n  position: 'right-start',\n  safeAreaPolygon: true,\n  transitionProps: { duration: 0 },\n  openDelay: 0,\n  middlewares: {\n    shift: {\n      // Enable crossAxis shift to keep submenu dropdown within viewport bounds when positioned horizontally\n      crossAxis: true,\n    },\n  },\n} satisfies Partial<MenuSubProps>;\n\nexport function MenuSub(_props: MenuSubProps) {\n  const {\n    children,\n    closeDelay,\n    openDelay,\n    position,\n    safeAreaPolygon,\n    opened: openedProp,\n    onChange,\n    ...others\n  } = useProps('MenuSub', defaultProps, _props);\n  const id = useId();\n  const [opened, setOpened] = useUncontrolled({\n    value: openedProp,\n    finalValue: false,\n    onChange,\n  });\n  const parentSubCtx = use(SubMenuContext);\n  const menuCtx = useMenuContext();\n  const { dir } = useDirection();\n  const resolvedPosition = getFloatingPosition(dir, position);\n\n  const levelRegister = parentSubCtx?.registerOpenSub ?? menuCtx.registerOpenSub;\n\n  const activeChildCloseRef = useRef<(() => void) | null>(null);\n  const registerOpenSub = useCallback((closeFn: () => void) => {\n    const prev = activeChildCloseRef.current;\n    if (prev && prev !== closeFn) {\n      prev();\n    }\n    activeChildCloseRef.current = closeFn;\n    return () => {\n      if (activeChildCloseRef.current === closeFn) {\n        activeChildCloseRef.current = null;\n      }\n    };\n  }, []);\n\n  const setOpenedRef = useRef(setOpened);\n  setOpenedRef.current = setOpened;\n\n  const handleOpen = useCallback(() => setOpenedRef.current(true), []);\n  const handleClose = useCallback(() => setOpenedRef.current(false), []);\n\n  useEffect(() => {\n    if (!opened) {\n      return undefined;\n    }\n\n    return levelRegister(handleClose);\n  }, [opened, levelRegister, handleClose]);\n\n  const { context, refs } = useFloating({\n    placement: resolvedPosition,\n    open: opened,\n    onOpenChange: (nextOpen) => {\n      if (nextOpen) {\n        handleOpen();\n      } else {\n        handleClose();\n      }\n    },\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      handleClose: safeAreaPolygon\n        ? safePolygon(typeof safeAreaPolygon === 'object' ? safeAreaPolygon : undefined)\n        : undefined,\n      delay: { open: openDelay, close: closeDelay },\n    }),\n  ]);\n\n  const focusFirstItem = () =>\n    window.setTimeout(() => {\n      document\n        .getElementById(`${id}-dropdown`)\n        ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not([data-disabled])')[0]\n        ?.focus();\n    }, 16);\n\n  const focusParentItem = () =>\n    window.setTimeout(() => {\n      document.getElementById(`${id}-target`)?.focus();\n    }, 16);\n\n  return (\n    <SubMenuContext\n      value={{\n        opened,\n        close: handleClose,\n        open: handleOpen,\n        focusFirstItem,\n        focusParentItem,\n        parentContext: parentSubCtx,\n        setReference: refs.setReference,\n        setFloating: refs.setFloating,\n        getReferenceProps,\n        getFloatingProps,\n        registerOpenSub,\n      }}\n    >\n      <Popover\n        opened={opened}\n        onChange={(nextOpened) => (nextOpened ? handleOpen() : handleClose())}\n        withinPortal={false}\n        withArrow={false}\n        id={id}\n        position={position}\n        {...others}\n      >\n        {children}\n      </Popover>\n    </SubMenuContext>\n  );\n}\n\nMenuSub.extend = (input: ExtendComponent<MenuSubFactory>) => input;\nMenuSub.displayName = '@mantine/core/MenuSub';\nMenuSub.Target = MenuSubTarget;\nMenuSub.Dropdown = MenuSubDropdown;\nMenuSub.Item = MenuSubItem;\n"],"mappings":";;;;;;;;;;;;;;;AAuDA,MAAM,eAAe;CACnB,QAAQ;CACR,UAAU;CACV,iBAAiB;CACjB,iBAAiB,EAAE,UAAU,EAAE;CAC/B,WAAW;CACX,aAAa,EACX,OAAO,EAEL,WAAW,KACb,EACF;AACF;AAEA,SAAgB,QAAQ,QAAsB;CAC5C,MAAM,EACJ,UACA,YACA,WACA,UACA,iBACA,QAAQ,YACR,UACA,GAAG,WACD,SAAS,WAAW,cAAc,MAAM;CAC5C,MAAM,KAAKA,QAAM;CACjB,MAAM,CAAC,QAAQ,aAAa,gBAAgB;EAC1C,OAAO;EACP,YAAY;EACZ;CACF,CAAC;CACD,MAAM,eAAe,IAAI,cAAc;CACvC,MAAM,UAAU,eAAe;CAC/B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,mBAAmB,oBAAoB,KAAK,QAAQ;CAE1D,MAAM,gBAAgB,cAAc,mBAAmB,QAAQ;CAE/D,MAAM,sBAAsB,OAA4B,IAAI;CAC5D,MAAM,kBAAkB,aAAa,YAAwB;EAC3D,MAAM,OAAO,oBAAoB;EACjC,IAAI,QAAQ,SAAS,SACnB,KAAK;EAEP,oBAAoB,UAAU;EAC9B,aAAa;GACX,IAAI,oBAAoB,YAAY,SAClC,oBAAoB,UAAU;EAElC;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,OAAO,SAAS;CACrC,aAAa,UAAU;CAEvB,MAAM,aAAa,kBAAkB,aAAa,QAAQ,IAAI,GAAG,CAAC,CAAC;CACnE,MAAM,cAAc,kBAAkB,aAAa,QAAQ,KAAK,GAAG,CAAC,CAAC;CAErE,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,OAAO,cAAc,WAAW;CAClC,GAAG;EAAC;EAAQ;EAAe;CAAW,CAAC;CAEvC,MAAM,EAAE,SAAS,SAAS,YAAY;EACpC,WAAW;EACX,MAAM;EACN,eAAe,aAAa;GAC1B,IAAI,UACF,WAAW;QAEX,YAAY;EAEhB;CACF,CAAC;CAED,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB,CAC9D,SAAS,SAAS;EAChB,aAAa,kBACT,YAAY,OAAO,oBAAoB,WAAW,kBAAkB,KAAA,CAAS,IAC7E,KAAA;EACJ,OAAO;GAAE,MAAM;GAAW,OAAO;EAAW;CAC9C,CAAC,CACH,CAAC;CAED,MAAM,uBACJ,OAAO,iBAAiB;EACtB,SACG,eAAe,GAAG,GAAG,UAAU,GAC9B,iBAAoC,uCAAuC,EAAE,IAC7E,MAAM;CACZ,GAAG,EAAE;CAEP,MAAM,wBACJ,OAAO,iBAAiB;EACtB,SAAS,eAAe,GAAG,GAAG,QAAQ,GAAG,MAAM;CACjD,GAAG,EAAE;CAEP,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,OAAO;GACP,MAAM;GACN;GACA;GACA,eAAe;GACf,cAAc,KAAK;GACnB,aAAa,KAAK;GAClB;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACU;GACR,WAAW,eAAgB,aAAa,WAAW,IAAI,YAAY;GACnE,cAAc;GACd,WAAW;GACP;GACM;GACV,GAAI;GAEH;EACM,CAAA;CACK,CAAA;AAEpB;AAEA,QAAQ,UAAU,UAA2C;AAC7D,QAAQ,cAAc;AACtB,QAAQ,SAAS;AACjB,QAAQ,WAAW;AACnB,QAAQ,OAAO"}

package/esm/components/Menu/MenuSubDropdown/MenuSubDropdown.mjs

@@ -1,10 +1,12 @@
 "use client";
+import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
 import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
 import { factory } from "../../../core/factory/factory.mjs";
 import { Popover } from "../../Popover/Popover.mjs";
 import { useMenuContext } from "../Menu.context.mjs";
-import Menu_module_default from "../Menu.module.mjs";
 import { SubMenuContext } from "../MenuSub/MenuSub.context.mjs";
+import Menu_module_default from "../Menu.module.mjs";
+import { useMenuTypeAhead } from "../use-menu-type-ahead.mjs";
 import { use, useRef } from "react";
 import { useMergedRef } from "@mantine/hooks";
 import { jsx } from "react/jsx-runtime";
@@ -14,6 +16,15 @@ const MenuSubDropdown = factory((props) => {
 	const wrapperRef = useRef(null);
 	const ctx = useMenuContext();
 	const subCtx = use(SubMenuContext);
+	const typeAhead = useMenuTypeAhead({
+		enabled: !ctx.hasSearch,
+		opened: subCtx?.opened ?? false,
+		getDropdown: () => wrapperRef.current
+	});
+	const handleKeyDown = createEventHandler(onKeyDown, (event) => {
+		typeAhead(event);
+		if (!event.ctrlKey && !event.metaKey && !event.altKey && event.key.length === 1 && event.key !== " ") event.stopPropagation();
+	});
 	const floatingProps = subCtx?.getFloatingProps({
 		onMouseEnter,
 		onMouseLeave,
@@ -35,6 +46,7 @@ const MenuSubDropdown = factory((props) => {
 		}),
 		tabIndex: -1,
 		"data-menu-dropdown": true,
+		onKeyDown: handleKeyDown,
 		children
 	});
 });

package/esm/components/Menu/MenuSubDropdown/MenuSubDropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSubDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuSubDropdown/MenuSubDropdown.tsx"],"sourcesContent":["import { use, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useMenuContext } from '../Menu.context';\nimport { SubMenuContext } from '../MenuSub/MenuSub.context';\nimport classes from '../Menu.module.css';\n\nexport type MenuSubDropdownStylesNames = 'dropdown';\n\nexport interface MenuSubDropdownProps\n  extends BoxProps, CompoundStylesApiProps<MenuSubDropdownFactory>, ElementProps<'div'> {}\n\nexport type MenuSubDropdownFactory = Factory<{\n  props: MenuSubDropdownProps;\n  ref: HTMLDivElement;\n  stylesNames: MenuSubDropdownStylesNames;\n  compound: true;\n}>;\n\nexport const MenuSubDropdown = factory<MenuSubDropdownFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    onMouseEnter,\n    onMouseLeave,\n    onPointerEnter,\n    onPointerLeave,\n    onKeyDown,\n    children,\n    ref,\n    ...others\n  } = useProps('MenuSubDropdown', null, props);\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ctx = useMenuContext();\n  const subCtx = use(SubMenuContext);\n\n  const floatingProps = subCtx?.getFloatingProps({\n    onMouseEnter,\n    onMouseLeave,\n    onPointerEnter,\n    onPointerLeave,\n  });\n\n  return (\n    <Popover.Dropdown\n      {...others}\n      {...floatingProps}\n      role=\"menu\"\n      aria-orientation=\"vertical\"\n      ref={useMergedRef(ref, wrapperRef, subCtx?.setFloating)}\n      {...ctx.getStyles('dropdown', {\n        className,\n        style,\n        styles,\n        classNames,\n        withStaticClass: false,\n      })}\n      tabIndex={-1}\n      data-menu-dropdown\n    >\n      {children}\n    </Popover.Dropdown>\n  );\n});\n\nMenuSubDropdown.classes = classes;\nMenuSubDropdown.displayName = '@mantine/core/MenuSubDropdown';\n"],"mappings":";;;;;;;;;;;AA2BA,MAAa,kBAAkB,SAAiC,UAAU;CACxE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,cACA,cACA,gBACA,gBACA,WACA,UACA,KACA,GAAG,WACD,SAAS,mBAAmB,MAAM,KAAK;CAE3C,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,IAAI,cAAc;CAEjC,MAAM,gBAAgB,QAAQ,iBAAiB;EAC7C;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,QAAQ,UAAT;EACE,GAAI;EACJ,GAAI;EACJ,MAAK;EACL,oBAAiB;EACjB,KAAK,aAAa,KAAK,YAAY,QAAQ,WAAW;EACtD,GAAI,IAAI,UAAU,YAAY;GAC5B;GACA;GACA;GACA;GACA,iBAAiB;EACnB,CAAC;EACD,UAAU;EACV,sBAAA;EAEC;CACe,CAAA;AAEtB,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}
+{"version":3,"file":"MenuSubDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuSubDropdown/MenuSubDropdown.tsx"],"sourcesContent":["import { use, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  BoxProps,\n  CompoundStylesApiProps,\n  createEventHandler,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useMenuContext } from '../Menu.context';\nimport { SubMenuContext } from '../MenuSub/MenuSub.context';\nimport { useMenuTypeAhead } from '../use-menu-type-ahead';\nimport classes from '../Menu.module.css';\n\nexport type MenuSubDropdownStylesNames = 'dropdown';\n\nexport interface MenuSubDropdownProps\n  extends BoxProps, CompoundStylesApiProps<MenuSubDropdownFactory>, ElementProps<'div'> {}\n\nexport type MenuSubDropdownFactory = Factory<{\n  props: MenuSubDropdownProps;\n  ref: HTMLDivElement;\n  stylesNames: MenuSubDropdownStylesNames;\n  compound: true;\n}>;\n\nexport const MenuSubDropdown = factory<MenuSubDropdownFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    onMouseEnter,\n    onMouseLeave,\n    onPointerEnter,\n    onPointerLeave,\n    onKeyDown,\n    children,\n    ref,\n    ...others\n  } = useProps('MenuSubDropdown', null, props);\n\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const ctx = useMenuContext();\n  const subCtx = use(SubMenuContext);\n\n  const typeAhead = useMenuTypeAhead({\n    enabled: !ctx.hasSearch,\n    opened: subCtx?.opened ?? false,\n    getDropdown: () => wrapperRef.current,\n  });\n\n  const handleKeyDown = createEventHandler<any>(onKeyDown, (event) => {\n    typeAhead(event);\n    if (\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey &&\n      event.key.length === 1 &&\n      event.key !== ' '\n    ) {\n      event.stopPropagation();\n    }\n  });\n\n  const floatingProps = subCtx?.getFloatingProps({\n    onMouseEnter,\n    onMouseLeave,\n    onPointerEnter,\n    onPointerLeave,\n  });\n\n  return (\n    <Popover.Dropdown\n      {...others}\n      {...floatingProps}\n      role=\"menu\"\n      aria-orientation=\"vertical\"\n      ref={useMergedRef(ref, wrapperRef, subCtx?.setFloating)}\n      {...ctx.getStyles('dropdown', {\n        className,\n        style,\n        styles,\n        classNames,\n        withStaticClass: false,\n      })}\n      tabIndex={-1}\n      data-menu-dropdown\n      onKeyDown={handleKeyDown}\n    >\n      {children}\n    </Popover.Dropdown>\n  );\n});\n\nMenuSubDropdown.classes = classes;\nMenuSubDropdown.displayName = '@mantine/core/MenuSubDropdown';\n"],"mappings":";;;;;;;;;;;;;AA6BA,MAAa,kBAAkB,SAAiC,UAAU;CACxE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,cACA,cACA,gBACA,gBACA,WACA,UACA,KACA,GAAG,WACD,SAAS,mBAAmB,MAAM,KAAK;CAE3C,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,IAAI,cAAc;CAEjC,MAAM,YAAY,iBAAiB;EACjC,SAAS,CAAC,IAAI;EACd,QAAQ,QAAQ,UAAU;EAC1B,mBAAmB,WAAW;CAChC,CAAC;CAED,MAAM,gBAAgB,mBAAwB,YAAY,UAAU;EAClE,UAAU,KAAK;EACf,IACE,CAAC,MAAM,WACP,CAAC,MAAM,WACP,CAAC,MAAM,UACP,MAAM,IAAI,WAAW,KACrB,MAAM,QAAQ,KAEd,MAAM,gBAAgB;CAE1B,CAAC;CAED,MAAM,gBAAgB,QAAQ,iBAAiB;EAC7C;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,QAAQ,UAAT;EACE,GAAI;EACJ,GAAI;EACJ,MAAK;EACL,oBAAiB;EACjB,KAAK,aAAa,KAAK,YAAY,QAAQ,WAAW;EACtD,GAAI,IAAI,UAAU,YAAY;GAC5B;GACA;GACA;GACA;GACA,iBAAiB;EACnB,CAAC;EACD,UAAU;EACV,sBAAA;EACA,WAAW;EAEV;CACe,CAAA;AAEtB,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}

package/esm/components/Menu/MenuSubItem/MenuSubItem.mjs

@@ -9,8 +9,8 @@ import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.
 import { UnstyledButton } from "../../UnstyledButton/UnstyledButton.mjs";
 import { AccordionChevron } from "../../Accordion/AccordionChevron.mjs";
 import { useMenuContext } from "../Menu.context.mjs";
-import Menu_module_default from "../Menu.module.mjs";
 import { SubMenuContext } from "../MenuSub/MenuSub.context.mjs";
+import Menu_module_default from "../Menu.module.mjs";
 import { use, useRef } from "react";
 import { useMergedRef } from "@mantine/hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -45,6 +45,14 @@ const MenuSubItem = polymorphicFactory((props) => {
 	const handleClick = createEventHandler(_others.onClick, () => {
 		if (!dataDisabled && closeMenuOnClick) ctx.closeDropdownImmediately();
 	});
+	const handleMouseMove = createEventHandler(_others.onMouseMove, () => {
+		if (!ctx.hasSearch) return;
+		const dropdown = itemRef.current?.closest("[data-menu-dropdown]");
+		if (!dropdown) return;
+		dropdown.querySelectorAll("[data-menu-active]").forEach((node) => {
+			if (node !== itemRef.current && node.closest("[data-menu-dropdown]") === dropdown) node.removeAttribute("data-menu-active");
+		});
+	});
 	const referenceProps = subCtx?.getReferenceProps({
 		onMouseEnter: _others.onMouseEnter,
 		onMouseLeave: _others.onMouseLeave,
@@ -71,6 +79,7 @@ const MenuSubItem = polymorphicFactory((props) => {
 		"data-disabled": disabled || dataDisabled || void 0,
 		"data-mantine-stop-propagation": true,
 		onClick: handleClick,
+		onMouseMove: handleMouseMove,
 		onKeyDown: createScopedKeydownHandler({
 			siblingSelector: "[data-menu-item]:not([data-disabled])",
 			parentSelector: "[data-menu-dropdown]",
@@ -85,6 +94,13 @@ const MenuSubItem = polymorphicFactory((props) => {
 			"--menu-item-hover": colors?.hover
 		},
 		children: [
+			ctx.alignItemsLabels === "all" && /* @__PURE__ */ jsx("div", {
+				...ctx.getStyles("itemIndicator", {
+					styles,
+					classNames
+				}),
+				"data-placeholder": true
+			}),
 			leftSection && /* @__PURE__ */ jsx("div", {
 				...ctx.getStyles("itemSection", {
 					styles,
@@ -98,6 +114,7 @@ const MenuSubItem = polymorphicFactory((props) => {
 					styles,
 					classNames
 				}),
+				"data-menu-item-label": true,
 				children
 			}),
 			/* @__PURE__ */ jsx("div", {

package/esm/components/Menu/MenuSubItem/MenuSubItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSubItem.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuSubItem/MenuSubItem.tsx"],"sourcesContent":["import { use, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  BoxProps,\n  CompoundStylesApiProps,\n  createEventHandler,\n  createScopedKeydownHandler,\n  MantineColor,\n  parseThemeColor,\n  polymorphicFactory,\n  PolymorphicFactory,\n  useDirection,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { AccordionChevron } from '../../Accordion';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useMenuContext } from '../Menu.context';\nimport { SubMenuContext } from '../MenuSub/MenuSub.context';\nimport classes from '../Menu.module.css';\n\nexport type MenuSubItemStylesNames = 'item' | 'itemLabel' | 'itemSection';\n\nexport interface MenuSubItemProps extends BoxProps, CompoundStylesApiProps<MenuSubItemFactory> {\n  'data-disabled'?: boolean;\n\n  /** Item label */\n  children?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color */\n  color?: MantineColor;\n\n  /** Section displayed at the start of the label */\n  leftSection?: React.ReactNode;\n\n  /** Section displayed at the end of the label */\n  rightSection?: React.ReactNode;\n\n  /** Sets disabled attribute, applies disabled styles */\n  disabled?: boolean;\n\n  /** If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component. */\n  closeMenuOnClick?: boolean;\n}\n\nexport type MenuSubItemFactory = PolymorphicFactory<{\n  props: MenuSubItemProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: MenuSubItemStylesNames;\n  compound: true;\n}>;\n\nexport const MenuSubItem = polymorphicFactory<MenuSubItemFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    color,\n    leftSection,\n    rightSection,\n    children,\n    disabled,\n    'data-disabled': dataDisabled,\n    closeMenuOnClick,\n    ref,\n    ...others\n  } = useProps('MenuSubItem', null, props);\n\n  const ctx = useMenuContext();\n  const subCtx = use(SubMenuContext);\n  const theme = useMantineTheme();\n  const { dir } = useDirection();\n  const itemRef = useRef<HTMLButtonElement>(null);\n  const _others: any = others;\n\n  const colors = color ? theme.variantColorResolver({ color, theme, variant: 'light' }) : undefined;\n  const parsedThemeColor = color ? parseThemeColor({ color, theme }) : null;\n\n  const handleKeydown = createEventHandler<any>(_others.onKeyDown, (event) => {\n    if (event.key === 'ArrowRight') {\n      subCtx?.open();\n      subCtx?.focusFirstItem();\n    }\n\n    if (event.key === 'ArrowLeft' && subCtx?.parentContext) {\n      subCtx.parentContext.close();\n      subCtx.parentContext.focusParentItem();\n    }\n  });\n\n  const handleClick = createEventHandler(_others.onClick, () => {\n    if (!dataDisabled && closeMenuOnClick) {\n      ctx.closeDropdownImmediately();\n    }\n  });\n\n  const referenceProps = subCtx?.getReferenceProps({\n    onMouseEnter: _others.onMouseEnter,\n    onMouseLeave: _others.onMouseLeave,\n    onPointerEnter: _others.onPointerEnter,\n    onPointerLeave: _others.onPointerLeave,\n  });\n\n  return (\n    <UnstyledButton\n      onMouseDown={(event) => event.preventDefault()}\n      {...others}\n      {...referenceProps}\n      unstyled={ctx.unstyled}\n      tabIndex={ctx.menuItemTabIndex}\n      {...ctx.getStyles('item', { className, style, styles, classNames })}\n      ref={useMergedRef(itemRef, ref, subCtx?.setReference)}\n      role=\"menuitem\"\n      disabled={disabled}\n      data-menu-item\n      data-sub-menu-item\n      data-disabled={disabled || dataDisabled || undefined}\n      data-mantine-stop-propagation\n      onClick={handleClick}\n      onKeyDown={createScopedKeydownHandler({\n        siblingSelector: '[data-menu-item]:not([data-disabled])',\n        parentSelector: '[data-menu-dropdown]',\n        activateOnFocus: false,\n        loop: ctx.loop,\n        dir,\n        orientation: 'vertical',\n        onKeyDown: handleKeydown,\n      })}\n      __vars={{\n        '--menu-item-color':\n          parsedThemeColor?.isThemeColor && parsedThemeColor?.shade === undefined\n            ? `var(--mantine-color-${parsedThemeColor.color}-6)`\n            : colors?.color,\n        '--menu-item-hover': colors?.hover,\n      }}\n    >\n      {leftSection && (\n        <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"left\">\n          {leftSection}\n        </div>\n      )}\n\n      {children && <div {...ctx.getStyles('itemLabel', { styles, classNames })}>{children}</div>}\n\n      <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"right\">\n        {rightSection || <AccordionChevron {...ctx.getStyles('chevron')} size={14} />}\n      </div>\n    </UnstyledButton>\n  );\n});\n\nMenuSubItem.classes = classes;\nMenuSubItem.displayName = '@mantine/core/MenuSubItem';\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,MAAa,cAAc,oBAAwC,UAAU;CAC3E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,aACA,cACA,UACA,UACA,iBAAiB,cACjB,kBACA,KACA,GAAG,WACD,SAAS,eAAe,MAAM,KAAK;CAEvC,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,IAAI,cAAc;CACjC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,UAAU,OAA0B,IAAI;CAC9C,MAAM,UAAe;CAErB,MAAM,SAAS,QAAQ,MAAM,qBAAqB;EAAE;EAAO;EAAO,SAAS;CAAQ,CAAC,IAAI,KAAA;CACxF,MAAM,mBAAmB,QAAQ,gBAAgB;EAAE;EAAO;CAAM,CAAC,IAAI;CAErE,MAAM,gBAAgB,mBAAwB,QAAQ,YAAY,UAAU;EAC1E,IAAI,MAAM,QAAQ,cAAc;GAC9B,QAAQ,KAAK;GACb,QAAQ,eAAe;EACzB;EAEA,IAAI,MAAM,QAAQ,eAAe,QAAQ,eAAe;GACtD,OAAO,cAAc,MAAM;GAC3B,OAAO,cAAc,gBAAgB;EACvC;CACF,CAAC;CAED,MAAM,cAAc,mBAAmB,QAAQ,eAAe;EAC5D,IAAI,CAAC,gBAAgB,kBACnB,IAAI,yBAAyB;CAEjC,CAAC;CAED,MAAM,iBAAiB,QAAQ,kBAAkB;EAC/C,cAAc,QAAQ;EACtB,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;EACxB,gBAAgB,QAAQ;CAC1B,CAAC;CAED,OACE,qBAAC,gBAAD;EACE,cAAc,UAAU,MAAM,eAAe;EAC7C,GAAI;EACJ,GAAI;EACJ,UAAU,IAAI;EACd,UAAU,IAAI;EACd,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO;GAAQ;EAAW,CAAC;EAClE,KAAK,aAAa,SAAS,KAAK,QAAQ,YAAY;EACpD,MAAK;EACK;EACV,kBAAA;EACA,sBAAA;EACA,iBAAe,YAAY,gBAAgB,KAAA;EAC3C,iCAAA;EACA,SAAS;EACT,WAAW,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB;GACjB,MAAM,IAAI;GACV;GACA,aAAa;GACb,WAAW;EACb,CAAC;EACD,QAAQ;GACN,qBACE,kBAAkB,gBAAgB,kBAAkB,UAAU,KAAA,IAC1D,uBAAuB,iBAAiB,MAAM,OAC9C,QAAQ;GACd,qBAAqB,QAAQ;EAC/B;YA9BF;GAgCG,eACC,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe;KAAE;KAAQ;IAAW,CAAC;IAAG,iBAAc;cAC1E;GACE,CAAA;GAGN,YAAY,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa;KAAE;KAAQ;IAAW,CAAC;IAAI;GAAc,CAAA;GAEzF,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe;KAAE;KAAQ;IAAW,CAAC;IAAG,iBAAc;cAC1E,gBAAgB,oBAAC,kBAAD;KAAkB,GAAI,IAAI,UAAU,SAAS;KAAG,MAAM;IAAK,CAAA;GACzE,CAAA;EACS;;AAEpB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,cAAc"}
+{"version":3,"file":"MenuSubItem.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuSubItem/MenuSubItem.tsx"],"sourcesContent":["import { use, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  BoxProps,\n  CompoundStylesApiProps,\n  createEventHandler,\n  createScopedKeydownHandler,\n  MantineColor,\n  parseThemeColor,\n  polymorphicFactory,\n  PolymorphicFactory,\n  useDirection,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { AccordionChevron } from '../../Accordion';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useMenuContext } from '../Menu.context';\nimport { SubMenuContext } from '../MenuSub/MenuSub.context';\nimport classes from '../Menu.module.css';\n\nexport type MenuSubItemStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'itemIndicator';\n\nexport interface MenuSubItemProps extends BoxProps, CompoundStylesApiProps<MenuSubItemFactory> {\n  'data-disabled'?: boolean;\n\n  /** Item label */\n  children?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color */\n  color?: MantineColor;\n\n  /** Section displayed at the start of the label */\n  leftSection?: React.ReactNode;\n\n  /** Section displayed at the end of the label */\n  rightSection?: React.ReactNode;\n\n  /** Sets disabled attribute, applies disabled styles */\n  disabled?: boolean;\n\n  /** If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component. */\n  closeMenuOnClick?: boolean;\n}\n\nexport type MenuSubItemFactory = PolymorphicFactory<{\n  props: MenuSubItemProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: MenuSubItemStylesNames;\n  compound: true;\n}>;\n\nexport const MenuSubItem = polymorphicFactory<MenuSubItemFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    color,\n    leftSection,\n    rightSection,\n    children,\n    disabled,\n    'data-disabled': dataDisabled,\n    closeMenuOnClick,\n    ref,\n    ...others\n  } = useProps('MenuSubItem', null, props);\n\n  const ctx = useMenuContext();\n  const subCtx = use(SubMenuContext);\n  const theme = useMantineTheme();\n  const { dir } = useDirection();\n  const itemRef = useRef<HTMLButtonElement>(null);\n  const _others: any = others;\n\n  const colors = color ? theme.variantColorResolver({ color, theme, variant: 'light' }) : undefined;\n  const parsedThemeColor = color ? parseThemeColor({ color, theme }) : null;\n\n  const handleKeydown = createEventHandler<any>(_others.onKeyDown, (event) => {\n    if (event.key === 'ArrowRight') {\n      subCtx?.open();\n      subCtx?.focusFirstItem();\n    }\n\n    if (event.key === 'ArrowLeft' && subCtx?.parentContext) {\n      subCtx.parentContext.close();\n      subCtx.parentContext.focusParentItem();\n    }\n  });\n\n  const handleClick = createEventHandler(_others.onClick, () => {\n    if (!dataDisabled && closeMenuOnClick) {\n      ctx.closeDropdownImmediately();\n    }\n  });\n\n  const handleMouseMove = createEventHandler<any>(_others.onMouseMove, () => {\n    if (!ctx.hasSearch) {\n      return;\n    }\n    const dropdown = itemRef.current?.closest('[data-menu-dropdown]');\n    if (!dropdown) {\n      return;\n    }\n    dropdown.querySelectorAll<HTMLElement>('[data-menu-active]').forEach((node) => {\n      if (node !== itemRef.current && node.closest('[data-menu-dropdown]') === dropdown) {\n        node.removeAttribute('data-menu-active');\n      }\n    });\n  });\n\n  const referenceProps = subCtx?.getReferenceProps({\n    onMouseEnter: _others.onMouseEnter,\n    onMouseLeave: _others.onMouseLeave,\n    onPointerEnter: _others.onPointerEnter,\n    onPointerLeave: _others.onPointerLeave,\n  });\n\n  return (\n    <UnstyledButton\n      onMouseDown={(event) => event.preventDefault()}\n      {...others}\n      {...referenceProps}\n      unstyled={ctx.unstyled}\n      tabIndex={ctx.menuItemTabIndex}\n      {...ctx.getStyles('item', { className, style, styles, classNames })}\n      ref={useMergedRef(itemRef, ref, subCtx?.setReference)}\n      role=\"menuitem\"\n      disabled={disabled}\n      data-menu-item\n      data-sub-menu-item\n      data-disabled={disabled || dataDisabled || undefined}\n      data-mantine-stop-propagation\n      onClick={handleClick}\n      onMouseMove={handleMouseMove}\n      onKeyDown={createScopedKeydownHandler({\n        siblingSelector: '[data-menu-item]:not([data-disabled])',\n        parentSelector: '[data-menu-dropdown]',\n        activateOnFocus: false,\n        loop: ctx.loop,\n        dir,\n        orientation: 'vertical',\n        onKeyDown: handleKeydown,\n      })}\n      __vars={{\n        '--menu-item-color':\n          parsedThemeColor?.isThemeColor && parsedThemeColor?.shade === undefined\n            ? `var(--mantine-color-${parsedThemeColor.color}-6)`\n            : colors?.color,\n        '--menu-item-hover': colors?.hover,\n      }}\n    >\n      {ctx.alignItemsLabels === 'all' && (\n        <div {...ctx.getStyles('itemIndicator', { styles, classNames })} data-placeholder />\n      )}\n      {leftSection && (\n        <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"left\">\n          {leftSection}\n        </div>\n      )}\n\n      {children && (\n        <div {...ctx.getStyles('itemLabel', { styles, classNames })} data-menu-item-label>\n          {children}\n        </div>\n      )}\n\n      <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"right\">\n        {rightSection || <AccordionChevron {...ctx.getStyles('chevron')} size={14} />}\n      </div>\n    </UnstyledButton>\n  );\n});\n\nMenuSubItem.classes = classes;\nMenuSubItem.displayName = '@mantine/core/MenuSubItem';\n"],"mappings":"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"}

package/esm/components/Menu/use-menu-type-ahead.mjs

@@ -0,0 +1,72 @@
+"use client";
+import { useEffect, useRef } from "react";
+//#region packages/@mantine/core/src/components/Menu/use-menu-type-ahead.ts
+const RESET_DELAY = 500;
+function getItemText(item) {
+	return ((item.querySelector("[data-menu-item-label]") ?? item).textContent ?? "").trim().toLowerCase();
+}
+function isRepeatedChar(buffer) {
+	return buffer.length > 1 && buffer.split("").every((char) => char === buffer[0]);
+}
+function useMenuTypeAhead({ enabled, opened, getDropdown }) {
+	const stateRef = useRef({
+		buffer: "",
+		timeoutId: null
+	});
+	useEffect(() => {
+		if (opened && enabled) return;
+		const state = stateRef.current;
+		if (state.timeoutId !== null) {
+			window.clearTimeout(state.timeoutId);
+			state.timeoutId = null;
+		}
+		state.buffer = "";
+	}, [opened, enabled]);
+	useEffect(() => () => {
+		const { timeoutId } = stateRef.current;
+		if (timeoutId !== null) window.clearTimeout(timeoutId);
+	}, []);
+	return (event) => {
+		if (!enabled || event.defaultPrevented) return;
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		if (event.key.length !== 1 || event.key === " ") return;
+		const target = event.target;
+		if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable)) return;
+		const dropdown = getDropdown();
+		if (!dropdown) return;
+		const items = Array.from(dropdown.querySelectorAll("[data-menu-item]:not([data-disabled])")).filter((item) => item.closest("[data-menu-dropdown]") === dropdown);
+		if (items.length === 0) return;
+		const state = stateRef.current;
+		state.buffer = (state.buffer + event.key).toLowerCase();
+		if (state.timeoutId !== null) window.clearTimeout(state.timeoutId);
+		state.timeoutId = window.setTimeout(() => {
+			state.buffer = "";
+			state.timeoutId = null;
+		}, RESET_DELAY);
+		const activeElement = document.activeElement;
+		const currentIndex = activeElement ? items.indexOf(activeElement) : -1;
+		let match = null;
+		if (state.buffer.length === 1 || isRepeatedChar(state.buffer)) {
+			const char = state.buffer[0];
+			const startIndex = currentIndex + 1;
+			for (let i = 0; i < items.length; i += 1) {
+				const idx = (startIndex + i) % items.length;
+				if (getItemText(items[idx]).startsWith(char)) {
+					match = items[idx];
+					break;
+				}
+			}
+		} else for (let i = 0; i < items.length; i += 1) if (getItemText(items[i]).startsWith(state.buffer)) {
+			match = items[i];
+			break;
+		}
+		if (match) {
+			event.preventDefault();
+			match.focus();
+		}
+	};
+}
+//#endregion
+export { useMenuTypeAhead };
+
+//# sourceMappingURL=use-menu-type-ahead.mjs.map

package/esm/components/Menu/use-menu-type-ahead.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-menu-type-ahead.mjs","names":[],"sources":["../../../src/components/Menu/use-menu-type-ahead.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nconst RESET_DELAY = 500;\n\ninterface UseMenuTypeAheadOptions {\n  enabled: boolean;\n  opened: boolean;\n  getDropdown: () => HTMLElement | null;\n}\n\ninterface TypeAheadState {\n  buffer: string;\n  timeoutId: number | null;\n}\n\nfunction getItemText(item: HTMLElement): string {\n  const label = item.querySelector<HTMLElement>('[data-menu-item-label]');\n  return ((label ?? item).textContent ?? '').trim().toLowerCase();\n}\n\nfunction isRepeatedChar(buffer: string): boolean {\n  return buffer.length > 1 && buffer.split('').every((char) => char === buffer[0]);\n}\n\nexport function useMenuTypeAhead({ enabled, opened, getDropdown }: UseMenuTypeAheadOptions) {\n  const stateRef = useRef<TypeAheadState>({ buffer: '', timeoutId: null });\n\n  useEffect(() => {\n    if (opened && enabled) {\n      return;\n    }\n    const state = stateRef.current;\n    if (state.timeoutId !== null) {\n      window.clearTimeout(state.timeoutId);\n      state.timeoutId = null;\n    }\n    state.buffer = '';\n  }, [opened, enabled]);\n\n  useEffect(\n    () => () => {\n      const { timeoutId } = stateRef.current;\n      if (timeoutId !== null) {\n        window.clearTimeout(timeoutId);\n      }\n    },\n    []\n  );\n\n  return (event: React.KeyboardEvent<HTMLElement>) => {\n    if (!enabled || event.defaultPrevented) {\n      return;\n    }\n    if (event.ctrlKey || event.metaKey || event.altKey) {\n      return;\n    }\n    if (event.key.length !== 1 || event.key === ' ') {\n      return;\n    }\n\n    const target = event.target as HTMLElement | null;\n    if (\n      target &&\n      (target.tagName === 'INPUT' ||\n        target.tagName === 'TEXTAREA' ||\n        target.tagName === 'SELECT' ||\n        target.isContentEditable)\n    ) {\n      return;\n    }\n\n    const dropdown = getDropdown();\n    if (!dropdown) {\n      return;\n    }\n\n    const items = Array.from(\n      dropdown.querySelectorAll<HTMLElement>('[data-menu-item]:not([data-disabled])')\n    ).filter((item) => item.closest('[data-menu-dropdown]') === dropdown);\n\n    if (items.length === 0) {\n      return;\n    }\n\n    const state = stateRef.current;\n    state.buffer = (state.buffer + event.key).toLowerCase();\n\n    if (state.timeoutId !== null) {\n      window.clearTimeout(state.timeoutId);\n    }\n    state.timeoutId = window.setTimeout(() => {\n      state.buffer = '';\n      state.timeoutId = null;\n    }, RESET_DELAY);\n\n    const activeElement = document.activeElement as HTMLElement | null;\n    const currentIndex = activeElement ? items.indexOf(activeElement) : -1;\n\n    let match: HTMLElement | null = null;\n\n    if (state.buffer.length === 1 || isRepeatedChar(state.buffer)) {\n      const char = state.buffer[0]!;\n      const startIndex = currentIndex + 1;\n      for (let i = 0; i < items.length; i += 1) {\n        const idx = (startIndex + i) % items.length;\n        if (getItemText(items[idx]!).startsWith(char)) {\n          match = items[idx]!;\n          break;\n        }\n      }\n    } else {\n      for (let i = 0; i < items.length; i += 1) {\n        if (getItemText(items[i]!).startsWith(state.buffer)) {\n          match = items[i]!;\n          break;\n        }\n      }\n    }\n\n    if (match) {\n      event.preventDefault();\n      match.focus();\n    }\n  };\n}\n"],"mappings":";;;AAEA,MAAM,cAAc;AAapB,SAAS,YAAY,MAA2B;CAE9C,SADc,KAAK,cAA2B,wBACjC,KAAK,MAAM,eAAe,IAAI,KAAK,EAAE,YAAY;AAChE;AAEA,SAAS,eAAe,QAAyB;CAC/C,OAAO,OAAO,SAAS,KAAK,OAAO,MAAM,EAAE,EAAE,OAAO,SAAS,SAAS,OAAO,EAAE;AACjF;AAEA,SAAgB,iBAAiB,EAAE,SAAS,QAAQ,eAAwC;CAC1F,MAAM,WAAW,OAAuB;EAAE,QAAQ;EAAI,WAAW;CAAK,CAAC;CAEvE,gBAAgB;EACd,IAAI,UAAU,SACZ;EAEF,MAAM,QAAQ,SAAS;EACvB,IAAI,MAAM,cAAc,MAAM;GAC5B,OAAO,aAAa,MAAM,SAAS;GACnC,MAAM,YAAY;EACpB;EACA,MAAM,SAAS;CACjB,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,sBACc;EACV,MAAM,EAAE,cAAc,SAAS;EAC/B,IAAI,cAAc,MAChB,OAAO,aAAa,SAAS;CAEjC,GACA,CAAC,CACH;CAEA,QAAQ,UAA4C;EAClD,IAAI,CAAC,WAAW,MAAM,kBACpB;EAEF,IAAI,MAAM,WAAW,MAAM,WAAW,MAAM,QAC1C;EAEF,IAAI,MAAM,IAAI,WAAW,KAAK,MAAM,QAAQ,KAC1C;EAGF,MAAM,SAAS,MAAM;EACrB,IACE,WACC,OAAO,YAAY,WAClB,OAAO,YAAY,cACnB,OAAO,YAAY,YACnB,OAAO,oBAET;EAGF,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,UACH;EAGF,MAAM,QAAQ,MAAM,KAClB,SAAS,iBAA8B,uCAAuC,CAChF,EAAE,QAAQ,SAAS,KAAK,QAAQ,sBAAsB,MAAM,QAAQ;EAEpE,IAAI,MAAM,WAAW,GACnB;EAGF,MAAM,QAAQ,SAAS;EACvB,MAAM,UAAU,MAAM,SAAS,MAAM,KAAK,YAAY;EAEtD,IAAI,MAAM,cAAc,MACtB,OAAO,aAAa,MAAM,SAAS;EAErC,MAAM,YAAY,OAAO,iBAAiB;GACxC,MAAM,SAAS;GACf,MAAM,YAAY;EACpB,GAAG,WAAW;EAEd,MAAM,gBAAgB,SAAS;EAC/B,MAAM,eAAe,gBAAgB,MAAM,QAAQ,aAAa,IAAI;EAEpE,IAAI,QAA4B;EAEhC,IAAI,MAAM,OAAO,WAAW,KAAK,eAAe,MAAM,MAAM,GAAG;GAC7D,MAAM,OAAO,MAAM,OAAO;GAC1B,MAAM,aAAa,eAAe;GAClC,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,GAAG;IACxC,MAAM,OAAO,aAAa,KAAK,MAAM;IACrC,IAAI,YAAY,MAAM,IAAK,EAAE,WAAW,IAAI,GAAG;KAC7C,QAAQ,MAAM;KACd;IACF;GACF;EACF,OACE,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,GACrC,IAAI,YAAY,MAAM,EAAG,EAAE,WAAW,MAAM,MAAM,GAAG;GACnD,QAAQ,MAAM;GACd;EACF;EAIJ,IAAI,OAAO;GACT,MAAM,eAAe;GACrB,MAAM,MAAM;EACd;CACF;AACF"}

package/esm/components/MultiSelect/MultiSelect.mjs

@@ -40,7 +40,7 @@ const MultiSelect = genericFactory((_props) => {
 		"InputWrapper",
 		"MultiSelect"
 	], defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, onFocus, onBlur, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, maxValues, searchable, nothingFoundMessage, withCheckIcon, withAlignedLabels, checkIconPosition, hidePickedOptions, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, placeholder, hiddenInputValuesDivider, required, mod, renderOption, renderPill, onRemove, onClear, onMaxValues, scrollAreaProps, chevronColor, attributes, clearSearchOnChange, openOnFocus, loading, loadingPosition, withPillsReorder, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, floatingHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, onFocus, onBlur, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, maxValues, searchable, nothingFoundMessage, withCheckIcon, withAlignedLabels, checkIconPosition, hidePickedOptions, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, placeholder, hiddenInputValuesDivider, required, mod, renderOption, renderPill, onRemove, onClear, onMaxValues, scrollAreaProps, chevronColor, attributes, clearSearchOnChange, openOnFocus, loading, loadingPosition, withPillsReorder, ...others } = props;
 	const _id = useId$1(id);
 	const parsedData = getParsedComboboxData(data);
 	const optionsLockup = getOptionsLockup(parsedData);
@@ -163,6 +163,7 @@ const MultiSelect = genericFactory((_props) => {
 		readOnly,
 		__staticSelector: "MultiSelect",
 		attributes,
+		floatingHeight,
 		onOptionSubmit: (val) => {
 			onOptionSubmit?.(val);
 			if (clearSearchOnChange) handleSearchChange("");