npm - @mantine/core - Versions diffs - 9.6.0 → 9.6.1 - Mend

@mantine/core 9.6.0 → 9.6.1

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 (56) hide show

package/cjs/components/Textarea/Autosize.cjs CHANGED Viewed

@@ -106,6 +106,7 @@ function TextareaAutosize({ maxRows, minRows, onChange, ref: userRef, ...props }
 			node.style.setProperty("height", `${height}px`, "important");
 		}
 	};
+	const handleResize = (0, react.useEffectEvent)(resizeTextarea);
 	const handleChange = (event) => {
 		if (!isControlled) resizeTextarea();
 		onChange?.(event);
@@ -120,14 +121,19 @@ function TextareaAutosize({ maxRows, minRows, onChange, ref: userRef, ...props }
 		const node = libRef.current;
 		if (!node || typeof ResizeObserver === "undefined") return;
 		widthRef.current = node.offsetWidth;
+		let frame = 0;
 		const observer = new ResizeObserver(() => {
 			if (libRef.current && libRef.current.offsetWidth !== widthRef.current) {
 				widthRef.current = libRef.current.offsetWidth;
-				resizeTextarea();
+				cancelAnimationFrame(frame);
+				frame = requestAnimationFrame(handleResize);
 			}
 		});
 		observer.observe(node);
-		return () => observer.disconnect();
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
 	}, []);
 	(0, react.useEffect)(() => {
 		const handleFontsLoaded = () => resizeTextarea();

package/cjs/components/Textarea/Autosize.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Autosize.cjs","names":["useRef","useMergedRef"],"sources":["../../../src/components/Textarea/Autosize.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\n\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {\n ref?: React.Ref<HTMLTextAreaElement>;\n maxRows?: number;\n minRows?: number;\n style?: Omit<NonNullable<TextareaProps['style']>, 'maxHeight' \| 'minHeight'> & {\n height?: number;\n };\n}\n\nconst SIZING_STYLE_KEYS = [\n 'borderBottomWidth',\n 'borderLeftWidth',\n 'borderRightWidth',\n 'borderTopWidth',\n 'boxSizing',\n 'fontFamily',\n 'fontSize',\n 'fontStyle',\n 'fontWeight',\n 'letterSpacing',\n 'lineHeight',\n 'paddingBottom',\n 'paddingLeft',\n 'paddingRight',\n 'paddingTop',\n 'tabSize',\n 'textIndent',\n 'textRendering',\n 'textTransform',\n 'width',\n 'wordBreak',\n 'wordSpacing',\n 'scrollbarGutter',\n] as const;\n\ntype SizingStyleKey = (typeof SIZING_STYLE_KEYS)[number];\n\ninterface SizingData {\n sizingStyle: Pick<CSSStyleDeclaration, Extract<SizingStyleKey, keyof CSSStyleDeclaration>>;\n paddingSize: number;\n borderSize: number;\n}\n\nconst HIDDEN_TEXTAREA_STYLE: Record<string, string> = {\n 'min-height': '0',\n 'max-height': 'none',\n height: '0',\n visibility: 'hidden',\n overflow: 'hidden',\n position: 'absolute',\n 'z-index': '-1000',\n top: '0',\n right: '0',\n display: 'block',\n};\n\nfunction forceHiddenStyles(node: HTMLElement) {\n Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {\n node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');\n });\n}\n\nfunction getSizingData(node: HTMLElement): SizingData \| null {\n const style = window.getComputedStyle(node);\n\n if (style === null) {\n return null;\n }\n\n const sizingStyle = {} as SizingData['sizingStyle'];\n for (const key of SIZING_STYLE_KEYS) {\n (sizingStyle as any)[key] = style[key as keyof CSSStyleDeclaration];\n }\n\n if ((sizingStyle as any).boxSizing === '') {\n return null;\n }\n\n const paddingSize = parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!);\n\n const borderSize =\n parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!);\n\n return { sizingStyle, paddingSize, borderSize };\n}\n\nlet hiddenTextarea: HTMLTextAreaElement \| null = null;\n\nfunction calculateNodeHeight(\n sizingData: SizingData,\n value: string,\n minRows = 1,\n maxRows = Infinity\n): [number, number] {\n if (!hiddenTextarea) {\n hiddenTextarea = document.createElement('textarea');\n hiddenTextarea.setAttribute('tabindex', '-1');\n hiddenTextarea.setAttribute('aria-hidden', 'true');\n hiddenTextarea.setAttribute('aria-label', 'autosize measurement');\n forceHiddenStyles(hiddenTextarea);\n }\n\n if (hiddenTextarea.parentNode === null) {\n document.body.appendChild(hiddenTextarea);\n }\n\n const { paddingSize, borderSize, sizingStyle } = sizingData;\n const { boxSizing } = sizingStyle;\n\n Object.keys(sizingStyle).forEach((key) => {\n (hiddenTextarea!.style as any)[key] = (sizingStyle as any)[key];\n });\n\n forceHiddenStyles(hiddenTextarea);\n\n hiddenTextarea.value = value;\n let height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904\n hiddenTextarea.value = value;\n height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n hiddenTextarea.value = 'x';\n const rowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n let minHeight = rowHeight * minRows;\n if (boxSizing === 'border-box') {\n minHeight = minHeight + paddingSize + borderSize;\n }\n height = Math.max(minHeight, height);\n\n let maxHeight = rowHeight * maxRows;\n if (boxSizing === 'border-box') {\n maxHeight = maxHeight + paddingSize + borderSize;\n }\n height = Math.min(maxHeight, height);\n\n return [height, rowHeight];\n}\n\nexport function TextareaAutosize({\n maxRows,\n minRows,\n onChange,\n ref: userRef,\n ...props\n}: TextareaAutosizeProps) {\n const isControlled = props.value !== undefined;\n const libRef = useRef<HTMLTextAreaElement \| null>(null);\n const ref = useMergedRef(libRef, userRef);\n const heightRef = useRef(0);\n const widthRef = useRef(0);\n\n const resizeTextarea = () => {\n const node = libRef.current;\n\n if (!node) {\n return;\n }\n\n const nodeSizingData = getSizingData(node);\n\n if (!nodeSizingData) {\n return;\n }\n\n const [height] = calculateNodeHeight(\n nodeSizingData,\n node.value \|\| node.placeholder \|\| 'x',\n minRows,\n maxRows\n );\n\n if (heightRef.current !== height) {\n heightRef.current = height;\n node.style.setProperty('height', `${height}px`, 'important');\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) {\n resizeTextarea();\n }\n onChange?.(event);\n };\n\n useLayoutEffect(resizeTextarea);\n\n useEffect(() => {\n const handleResize = () => resizeTextarea();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n useEffect(() => {\n const node = libRef.current;\n\n if (!node \|\| typeof ResizeObserver === 'undefined') {\n return undefined;\n }\n\n widthRef.current = node.offsetWidth;\n\n const observer = new ResizeObserver(() => {\n if (libRef.current && libRef.current.offsetWidth !== widthRef.current) {\n widthRef.current = libRef.current.offsetWidth;\n resizeTextarea();\n }\n });\n\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n const handleFontsLoaded = () => resizeTextarea();\n document.fonts.addEventListener('loadingdone', handleFontsLoaded);\n return () => document.fonts.removeEventListener('loadingdone', handleFontsLoaded);\n }, []);\n\n useEffect(() => {\n const handleReset = (event: Event) => {\n if (libRef.current?.form === event.target && !isControlled) {\n const currentValue = libRef.current!.value;\n requestAnimationFrame(() => {\n if (libRef.current && currentValue !== libRef.current.value) {\n resizeTextarea();\n }\n });\n }\n };\n document.body.addEventListener('reset', handleReset);\n return () => document.body.removeEventListener('reset', handleReset);\n }, [isControlled]);\n\n return <textarea rows={minRows} {...props} onChange={handleChange} ref={ref} />;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Autosize.cjs","names":["useRef","useMergedRef","useEffectEvent"],"sources":["../../../src/components/Textarea/Autosize.tsx"],"sourcesContent":["import React, { useEffect, useEffectEvent, useLayoutEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\n\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {\n ref?: React.Ref<HTMLTextAreaElement>;\n maxRows?: number;\n minRows?: number;\n style?: Omit<NonNullable<TextareaProps['style']>, 'maxHeight' \| 'minHeight'> & {\n height?: number;\n };\n}\n\nconst SIZING_STYLE_KEYS = [\n 'borderBottomWidth',\n 'borderLeftWidth',\n 'borderRightWidth',\n 'borderTopWidth',\n 'boxSizing',\n 'fontFamily',\n 'fontSize',\n 'fontStyle',\n 'fontWeight',\n 'letterSpacing',\n 'lineHeight',\n 'paddingBottom',\n 'paddingLeft',\n 'paddingRight',\n 'paddingTop',\n 'tabSize',\n 'textIndent',\n 'textRendering',\n 'textTransform',\n 'width',\n 'wordBreak',\n 'wordSpacing',\n 'scrollbarGutter',\n] as const;\n\ntype SizingStyleKey = (typeof SIZING_STYLE_KEYS)[number];\n\ninterface SizingData {\n sizingStyle: Pick<CSSStyleDeclaration, Extract<SizingStyleKey, keyof CSSStyleDeclaration>>;\n paddingSize: number;\n borderSize: number;\n}\n\nconst HIDDEN_TEXTAREA_STYLE: Record<string, string> = {\n 'min-height': '0',\n 'max-height': 'none',\n height: '0',\n visibility: 'hidden',\n overflow: 'hidden',\n position: 'absolute',\n 'z-index': '-1000',\n top: '0',\n right: '0',\n display: 'block',\n};\n\nfunction forceHiddenStyles(node: HTMLElement) {\n Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {\n node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');\n });\n}\n\nfunction getSizingData(node: HTMLElement): SizingData \| null {\n const style = window.getComputedStyle(node);\n\n if (style === null) {\n return null;\n }\n\n const sizingStyle = {} as SizingData['sizingStyle'];\n for (const key of SIZING_STYLE_KEYS) {\n (sizingStyle as any)[key] = style[key as keyof CSSStyleDeclaration];\n }\n\n if ((sizingStyle as any).boxSizing === '') {\n return null;\n }\n\n const paddingSize = parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!);\n\n const borderSize =\n parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!);\n\n return { sizingStyle, paddingSize, borderSize };\n}\n\nlet hiddenTextarea: HTMLTextAreaElement \| null = null;\n\nfunction calculateNodeHeight(\n sizingData: SizingData,\n value: string,\n minRows = 1,\n maxRows = Infinity\n): [number, number] {\n if (!hiddenTextarea) {\n hiddenTextarea = document.createElement('textarea');\n hiddenTextarea.setAttribute('tabindex', '-1');\n hiddenTextarea.setAttribute('aria-hidden', 'true');\n hiddenTextarea.setAttribute('aria-label', 'autosize measurement');\n forceHiddenStyles(hiddenTextarea);\n }\n\n if (hiddenTextarea.parentNode === null) {\n document.body.appendChild(hiddenTextarea);\n }\n\n const { paddingSize, borderSize, sizingStyle } = sizingData;\n const { boxSizing } = sizingStyle;\n\n Object.keys(sizingStyle).forEach((key) => {\n (hiddenTextarea!.style as any)[key] = (sizingStyle as any)[key];\n });\n\n forceHiddenStyles(hiddenTextarea);\n\n hiddenTextarea.value = value;\n let height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904\n hiddenTextarea.value = value;\n height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n hiddenTextarea.value = 'x';\n const rowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n let minHeight = rowHeight * minRows;\n if (boxSizing === 'border-box') {\n minHeight = minHeight + paddingSize + borderSize;\n }\n height = Math.max(minHeight, height);\n\n let maxHeight = rowHeight * maxRows;\n if (boxSizing === 'border-box') {\n maxHeight = maxHeight + paddingSize + borderSize;\n }\n height = Math.min(maxHeight, height);\n\n return [height, rowHeight];\n}\n\nexport function TextareaAutosize({\n maxRows,\n minRows,\n onChange,\n ref: userRef,\n ...props\n}: TextareaAutosizeProps) {\n const isControlled = props.value !== undefined;\n const libRef = useRef<HTMLTextAreaElement \| null>(null);\n const ref = useMergedRef(libRef, userRef);\n const heightRef = useRef(0);\n const widthRef = useRef(0);\n\n const resizeTextarea = () => {\n const node = libRef.current;\n\n if (!node) {\n return;\n }\n\n const nodeSizingData = getSizingData(node);\n\n if (!nodeSizingData) {\n return;\n }\n\n const [height] = calculateNodeHeight(\n nodeSizingData,\n node.value \|\| node.placeholder \|\| 'x',\n minRows,\n maxRows\n );\n\n if (heightRef.current !== height) {\n heightRef.current = height;\n node.style.setProperty('height', `${height}px`, 'important');\n }\n };\n\n const handleResize = useEffectEvent(resizeTextarea);\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) {\n resizeTextarea();\n }\n onChange?.(event);\n };\n\n useLayoutEffect(resizeTextarea);\n\n useEffect(() => {\n const handleResize = () => resizeTextarea();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n useEffect(() => {\n const node = libRef.current;\n\n if (!node \|\| typeof ResizeObserver === 'undefined') {\n return undefined;\n }\n\n widthRef.current = node.offsetWidth;\n\n let frame = 0;\n\n const observer = new ResizeObserver(() => {\n if (libRef.current && libRef.current.offsetWidth !== widthRef.current) {\n widthRef.current = libRef.current.offsetWidth;\n cancelAnimationFrame(frame);\n frame = requestAnimationFrame(handleResize);\n }\n });\n\n observer.observe(node);\n return () => {\n cancelAnimationFrame(frame);\n observer.disconnect();\n };\n }, []);\n\n useEffect(() => {\n const handleFontsLoaded = () => resizeTextarea();\n document.fonts.addEventListener('loadingdone', handleFontsLoaded);\n return () => document.fonts.removeEventListener('loadingdone', handleFontsLoaded);\n }, []);\n\n useEffect(() => {\n const handleReset = (event: Event) => {\n if (libRef.current?.form === event.target && !isControlled) {\n const currentValue = libRef.current!.value;\n requestAnimationFrame(() => {\n if (libRef.current && currentValue !== libRef.current.value) {\n resizeTextarea();\n }\n });\n }\n };\n document.body.addEventListener('reset', handleReset);\n return () => document.body.removeEventListener('reset', handleReset);\n }, [isControlled]);\n\n return <textarea rows={minRows} {...props} onChange={handleChange} ref={ref} />;\n}\n"],"mappings":"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"}

package/esm/components/Accordion/Accordion.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.module.mjs","names":[],"sources":["../../../src/components/Accordion/Accordion.module.css"],"sourcesContent":[".root {\n --accordion-radius: var(--mantine-radius-default);\n}\n\n.panel {\n overflow-wrap: break-word;\n}\n\n.content {\n padding: var(--mantine-spacing-md);\n padding-top: calc(var(--mantine-spacing-xs) / 2);\n}\n\n.itemTitle {\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n.control {\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n padding-inline: var(--mantine-spacing-md);\n opacity: 1;\n cursor: pointer;\n background-color: transparent;\n color: var(--mantine-color-bright);\n\n &:where([data-chevron-position='left']) {\n flex-direction: row;\n padding-inline-start: 0;\n }\n\n &:where(:disabled, [data-disabled]) {\n opacity: 0.4;\n cursor: not-allowed;\n }\n}\n\n.control--default,\n.control--contained {\n &:where(:not(:disabled, [data-disabled])) {\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n }\n }\n }\n}\n\n.label {\n color: inherit;\n font-weight: var(--mantine-font-weight-regular);\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n padding-top: var(--mantine-spacing-sm);\n padding-bottom: var(--mantine-spacing-sm);\n}\n\n.chevron {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: transform var(--accordion-transition-duration, 200ms) ease;\n width: var(--accordion-chevron-size, rem(15px));\n min-width: var(--accordion-chevron-size, rem(15px));\n transform: rotate(0deg);\n\n &:where([data-rotate]) {\n transform: rotate(180deg);\n }\n\n &:where([data-position='left']) {\n margin-inline-end: var(--mantine-spacing-md);\n margin-inline-start: var(--mantine-spacing-md);\n }\n}\n\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline-end: var(--mantine-spacing-sm);\n\n &:where([data-chevron-position='left']) {\n margin-inline-end: 0;\n margin-inline-start: var(--mantine-spacing-lg);\n }\n}\n\n.item {\n @mixin where-light {\n --item-border-color: var(--mantine-color-gray-3);\n --item-filled-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n --item-border-color: var(--mantine-color-dark-4);\n --item-filled-color: var(--mantine-color-dark-6);\n }\n}\n\n.item--default {\n border-bottom: 1px solid var(--item-border-color);\n}\n\n.item--contained {\n border: 1px solid var(--item-border-color);\n transition: background-color 150ms ease;\n\n &:where([data-active]) {\n background-color: var(--item-filled-color);\n }\n\n &:first-of-type {\n border-start-start-radius: var(--accordion-radius);\n border-start-end-radius: var(--accordion-radius);\n\n & > [data-accordion-control] {\n border-start-start-radius: var(--accordion-radius);\n border-start-end-radius: var(--accordion-radius);\n }\n }\n\n &:last-of-type {\n border-end-start-radius: var(--accordion-radius);\n border-end-end-radius: var(--accordion-radius);\n\n & > [data-accordion-control] {\n border-end-start-radius: var(--accordion-radius);\n border-end-end-radius: var(--accordion-radius);\n }\n }\n\n & + & {\n border-top: 0;\n }\n}\n\n.item--filled {\n border-radius: var(--accordion-radius);\n\n &:where([data-active]) {\n background-color: var(--item-filled-color);\n }\n}\n\n.item--separated {\n background-color: var(--item-filled-color);\n border-radius: var(--accordion-radius);\n border: 1px solid transparent;\n transition: background-color 150ms ease;\n\n &[data-active] {\n border-color: var(--item-border-color);\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n }\n }\n\n & + & {\n margin-top: var(--mantine-spacing-md);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Accordion.module.mjs","names":[],"sources":["../../../src/components/Accordion/Accordion.module.css"],"sourcesContent":[".root {\n --accordion-radius: var(--mantine-radius-default);\n}\n\n.panel {\n overflow-wrap: break-word;\n}\n\n.content {\n padding: var(--mantine-spacing-md);\n padding-top: calc(var(--mantine-spacing-xs) / 2);\n}\n\n.itemTitle {\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n.control {\n width: 100%;\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n padding-inline: var(--mantine-spacing-md);\n opacity: 1;\n cursor: pointer;\n background-color: transparent;\n color: var(--mantine-color-bright);\n\n &:where([data-chevron-position='left']) {\n flex-direction: row;\n padding-inline-start: 0;\n }\n\n &:where(:disabled, [data-disabled]) {\n opacity: 0.4;\n cursor: not-allowed;\n }\n}\n\n.control--default,\n.control--contained {\n &:where(:not(:disabled, [data-disabled])) {\n @mixin hover {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-6);\n }\n }\n }\n}\n\n.label {\n color: inherit;\n font-weight: var(--mantine-font-weight-regular);\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n padding-top: var(--mantine-spacing-sm);\n padding-bottom: var(--mantine-spacing-sm);\n}\n\n.chevron {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n transition: transform var(--accordion-transition-duration, 200ms) ease;\n width: var(--accordion-chevron-size, rem(15px));\n min-width: var(--accordion-chevron-size, rem(15px));\n transform: rotate(0deg);\n\n &:where([data-rotate]) {\n transform: rotate(180deg);\n }\n\n &:where([data-position='left']) {\n margin-inline-end: var(--mantine-spacing-md);\n margin-inline-start: var(--mantine-spacing-md);\n }\n}\n\n.icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline-end: var(--mantine-spacing-sm);\n\n &:where([data-chevron-position='left']) {\n margin-inline-end: 0;\n margin-inline-start: var(--mantine-spacing-lg);\n }\n}\n\n.item {\n @mixin where-light {\n --item-border-color: var(--mantine-color-gray-3);\n --item-filled-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n --item-border-color: var(--mantine-color-dark-4);\n --item-filled-color: var(--mantine-color-dark-6);\n }\n}\n\n.item--default {\n border-bottom: 1px solid var(--item-border-color);\n}\n\n.item--contained {\n border: 1px solid var(--item-border-color);\n transition: background-color 150ms ease;\n\n &:where([data-active]) {\n background-color: var(--item-filled-color);\n }\n\n &:first-of-type {\n border-start-start-radius: var(--accordion-radius);\n border-start-end-radius: var(--accordion-radius);\n\n & > [data-accordion-control],\n & > .itemTitle > [data-accordion-control] {\n border-start-start-radius: var(--accordion-radius);\n border-start-end-radius: var(--accordion-radius);\n }\n }\n\n &:last-of-type {\n border-end-start-radius: var(--accordion-radius);\n border-end-end-radius: var(--accordion-radius);\n\n & > [data-accordion-control],\n & > .itemTitle > [data-accordion-control] {\n border-end-start-radius: var(--accordion-radius);\n border-end-end-radius: var(--accordion-radius);\n }\n }\n\n & + & {\n border-top: 0;\n }\n}\n\n.item--filled {\n border-radius: var(--accordion-radius);\n\n &:where([data-active]) {\n background-color: var(--item-filled-color);\n }\n}\n\n.item--separated {\n background-color: var(--item-filled-color);\n border-radius: var(--accordion-radius);\n border: 1px solid transparent;\n transition: background-color 150ms ease;\n\n &[data-active] {\n border-color: var(--item-border-color);\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n }\n }\n\n & + & {\n margin-top: var(--mantine-spacing-md);\n }\n}\n"],"mappings":""}

package/esm/components/Drawer/Drawer.mjs CHANGED Viewed

@@ -33,7 +33,8 @@ const Drawer = factory((_props) => {
 	const stackProps = ctx && stackId ? {
 		closeOnEscape: ctx.currentId === stackId,
 		trapFocus: ctx.currentId === stackId,
-		zIndex: ctx.getZIndex(stackId)
+		zIndex: ctx.getZIndex(stackId),
+		__handledEscapeEvents: ctx.handledEscapeEvents
 	} : {};
 	const overlayVisible = withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;
 	useEffect(() => {

package/esm/components/Drawer/Drawer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.mjs","names":["classes"],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { use, useEffect } from 'react';\nimport { factory, Factory, getDefaultZIndex, useProps } from '../../core';\nimport { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';\nimport { DrawerBody } from './DrawerBody';\nimport { DrawerCloseButton } from './DrawerCloseButton';\nimport { DrawerContent } from './DrawerContent';\nimport { DrawerHeader } from './DrawerHeader';\nimport { DrawerOverlay } from './DrawerOverlay';\nimport {\n DrawerRoot,\n DrawerRootCssVariables,\n DrawerRootProps,\n DrawerRootStylesNames,\n} from './DrawerRoot';\nimport { DrawerStack, DrawerStackContext } from './DrawerStack';\nimport { DrawerTitle } from './DrawerTitle';\nimport classes from './Drawer.module.css';\n\nexport type DrawerStylesNames = DrawerRootStylesNames;\nexport type DrawerCssVariables = DrawerRootCssVariables;\n\nexport interface DrawerProps extends DrawerRootProps {\n /** Drawer title /\n title?: React.ReactNode;\n\n /* If set, the overlay is displayed @default true /\n withOverlay?: boolean;\n\n /* Props passed down to the `Overlay` component, can be used to configure opacity, `background-color`, styles and other properties /\n overlayProps?: ModalBaseOverlayProps;\n\n /* Drawer content /\n children?: React.ReactNode;\n\n /* If set, the close button is displayed @default true /\n withCloseButton?: boolean;\n\n /* Props passed down to the close button /\n closeButtonProps?: ModalBaseCloseButtonProps;\n\n /* Id of the drawer in the `Drawer.Stack` */\n stackId?: string;\n}\n\nexport type DrawerFactory = Factory<{\n props: DrawerProps;\n ref: HTMLDivElement;\n stylesNames: DrawerStylesNames;\n vars: DrawerCssVariables;\n staticComponents: {\n Root: typeof DrawerRoot;\n Overlay: typeof DrawerOverlay;\n Content: typeof DrawerContent;\n Body: typeof DrawerBody;\n Header: typeof DrawerHeader;\n Title: typeof DrawerTitle;\n CloseButton: typeof DrawerCloseButton;\n Stack: typeof DrawerStack;\n };\n}>;\n\nconst defaultProps = {\n closeOnClickOutside: true,\n withinPortal: true,\n lockScroll: true,\n trapFocus: true,\n returnFocus: true,\n closeOnEscape: true,\n keepMounted: false,\n zIndex: getDefaultZIndex('modal'),\n withOverlay: true,\n withCloseButton: true,\n} satisfies Partial<DrawerProps>;\n\nexport const Drawer = factory<DrawerFactory>((_props) => {\n const {\n title,\n withOverlay,\n overlayProps,\n withCloseButton,\n closeButtonProps,\n children,\n opened,\n stackId,\n zIndex,\n ...others\n } = useProps('Drawer', defaultProps, _props);\n\n const ctx = use(DrawerStackContext);\n const hasHeader = !!title \|\| withCloseButton;\n const stackProps =\n ctx && stackId\n ? {\n closeOnEscape: ctx.currentId === stackId,\n trapFocus: ctx.currentId === stackId,\n zIndex: ctx.getZIndex(stackId),\n }\n : {};\n\n const overlayVisible =\n withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;\n\n useEffect(() => {\n if (ctx && stackId) {\n opened\n ? ctx.addModal(stackId, zIndex \|\| getDefaultZIndex('modal'))\n : ctx.removeModal(stackId);\n }\n }, [opened, stackId, zIndex]);\n\n return (\n <DrawerRoot\n opened={opened}\n zIndex={ctx && stackId ? ctx.getZIndex(stackId) : zIndex}\n {...others}\n {...stackProps}\n >\n {withOverlay && (\n <DrawerOverlay\n visible={overlayVisible}\n transitionProps={ctx && stackId ? { duration: 0 } : undefined}\n {...overlayProps}\n />\n )}\n <DrawerContent __hidden={ctx && stackId && opened ? stackId !== ctx.currentId : false}>\n {hasHeader && (\n <DrawerHeader>\n {title && <DrawerTitle>{title}</DrawerTitle>}\n {withCloseButton && <DrawerCloseButton {...closeButtonProps} />}\n </DrawerHeader>\n )}\n\n <DrawerBody>{children}</DrawerBody>\n </DrawerContent>\n </DrawerRoot>\n );\n});\n\nDrawer.classes = classes;\nDrawer.displayName = '@mantine/core/Drawer';\nDrawer.Root = DrawerRoot;\nDrawer.Overlay = DrawerOverlay;\nDrawer.Content = DrawerContent;\nDrawer.Body = DrawerBody;\nDrawer.Header = DrawerHeader;\nDrawer.Title = DrawerTitle;\nDrawer.CloseButton = DrawerCloseButton;\nDrawer.Stack = DrawerStack;\n"],"mappings":";;;;;;;;;;;;;;;;AA6DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQ,iBAAiB,OAAO;CAChC,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,EACJ,OACA,aACA,cACA,iBACA,kBACA,UACA,QACA,SACA,QACA,GAAG,WACD,SAAS,UAAU,cAAc,MAAM;CAE3C,MAAM,MAAM,IAAI,kBAAkB;CAClC,MAAM,YAAY,CAAC,CAAC,SAAS;CAC7B,MAAM,aACJ,OAAO,UACH;EACE,eAAe,IAAI,cAAc;EACjC,WAAW,IAAI,cAAc;EAC7B,QAAQ,IAAI,UAAU,OAAO;~~CAC/B~~,IACA,CAAC;CAEP,MAAM,iBACJ,gBAAgB,QAAQ,QAAQ,WAAW,MAAM,IAAI,cAAc,UAAU;CAE/E,gBAAgB;EACd,IAAI,OAAO,SACT,SACI,IAAI,SAAS,SAAS,UAAU,iBAAiB,OAAO,CAAC,IACzD,IAAI,YAAY,OAAO;CAE/B,GAAG;EAAC;EAAQ;EAAS;CAAM,CAAC;CAE5B,OACE,qBAAC,YAAD;EACU;EACR,QAAQ,OAAO,UAAU,IAAI,UAAU,OAAO,IAAI;EAClD,GAAI;EACJ,GAAI;EAJN,UAAA,CAMG,eACC,oBAAC,eAAD;GACE,SAAS;GACT,iBAAiB,OAAO,UAAU,EAAE,UAAU,EAAE,IAAI,KAAA;GACpD,GAAI;EACL,CAAA,GAEH,qBAAC,eAAD;GAAe,UAAU,OAAO,WAAW,SAAS,YAAY,IAAI,YAAY;GAAhF,UAAA,CACG,aACC,qBAAC,cAAD,EAAA,UAAA,CACG,SAAS,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAC1C,mBAAmB,oBAAC,mBAAD,EAAmB,GAAI,iBAAmB,CAAA,CAClD,EAAA,CAAA,GAGhB,oBAAC,YAAD,EAAa,SAAqB,CAAA,CACrB;EACL,CAAA,CAAA;;AAEhB,CAAC;AAED,OAAO,UAAUA;AACjB,OAAO,cAAc;AACrB,OAAO,OAAO;AACd,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,OAAO;AACd,OAAO,SAAS;AAChB,OAAO,QAAQ;AACf,OAAO,cAAc;AACrB,OAAO,QAAQ"}
1	+ {"version":3,"file":"Drawer.mjs","names":["classes"],"sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { use, useEffect } from 'react';\nimport { factory, Factory, getDefaultZIndex, useProps } from '../../core';\nimport { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';\nimport { DrawerBody } from './DrawerBody';\nimport { DrawerCloseButton } from './DrawerCloseButton';\nimport { DrawerContent } from './DrawerContent';\nimport { DrawerHeader } from './DrawerHeader';\nimport { DrawerOverlay } from './DrawerOverlay';\nimport {\n DrawerRoot,\n DrawerRootCssVariables,\n DrawerRootProps,\n DrawerRootStylesNames,\n} from './DrawerRoot';\nimport { DrawerStack, DrawerStackContext } from './DrawerStack';\nimport { DrawerTitle } from './DrawerTitle';\nimport classes from './Drawer.module.css';\n\nexport type DrawerStylesNames = DrawerRootStylesNames;\nexport type DrawerCssVariables = DrawerRootCssVariables;\n\nexport interface DrawerProps extends DrawerRootProps {\n /** Drawer title /\n title?: React.ReactNode;\n\n /* If set, the overlay is displayed @default true /\n withOverlay?: boolean;\n\n /* Props passed down to the `Overlay` component, can be used to configure opacity, `background-color`, styles and other properties /\n overlayProps?: ModalBaseOverlayProps;\n\n /* Drawer content /\n children?: React.ReactNode;\n\n /* If set, the close button is displayed @default true /\n withCloseButton?: boolean;\n\n /* Props passed down to the close button /\n closeButtonProps?: ModalBaseCloseButtonProps;\n\n /* Id of the drawer in the `Drawer.Stack` */\n stackId?: string;\n}\n\nexport type DrawerFactory = Factory<{\n props: DrawerProps;\n ref: HTMLDivElement;\n stylesNames: DrawerStylesNames;\n vars: DrawerCssVariables;\n staticComponents: {\n Root: typeof DrawerRoot;\n Overlay: typeof DrawerOverlay;\n Content: typeof DrawerContent;\n Body: typeof DrawerBody;\n Header: typeof DrawerHeader;\n Title: typeof DrawerTitle;\n CloseButton: typeof DrawerCloseButton;\n Stack: typeof DrawerStack;\n };\n}>;\n\nconst defaultProps = {\n closeOnClickOutside: true,\n withinPortal: true,\n lockScroll: true,\n trapFocus: true,\n returnFocus: true,\n closeOnEscape: true,\n keepMounted: false,\n zIndex: getDefaultZIndex('modal'),\n withOverlay: true,\n withCloseButton: true,\n} satisfies Partial<DrawerProps>;\n\nexport const Drawer = factory<DrawerFactory>((_props) => {\n const {\n title,\n withOverlay,\n overlayProps,\n withCloseButton,\n closeButtonProps,\n children,\n opened,\n stackId,\n zIndex,\n ...others\n } = useProps('Drawer', defaultProps, _props);\n\n const ctx = use(DrawerStackContext);\n const hasHeader = !!title \|\| withCloseButton;\n const stackProps =\n ctx && stackId\n ? {\n closeOnEscape: ctx.currentId === stackId,\n trapFocus: ctx.currentId === stackId,\n zIndex: ctx.getZIndex(stackId),\n __handledEscapeEvents: ctx.handledEscapeEvents,\n }\n : {};\n\n const overlayVisible =\n withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;\n\n useEffect(() => {\n if (ctx && stackId) {\n opened\n ? ctx.addModal(stackId, zIndex \|\| getDefaultZIndex('modal'))\n : ctx.removeModal(stackId);\n }\n }, [opened, stackId, zIndex]);\n\n return (\n <DrawerRoot\n opened={opened}\n zIndex={ctx && stackId ? ctx.getZIndex(stackId) : zIndex}\n {...others}\n {...stackProps}\n >\n {withOverlay && (\n <DrawerOverlay\n visible={overlayVisible}\n transitionProps={ctx && stackId ? { duration: 0 } : undefined}\n {...overlayProps}\n />\n )}\n <DrawerContent __hidden={ctx && stackId && opened ? stackId !== ctx.currentId : false}>\n {hasHeader && (\n <DrawerHeader>\n {title && <DrawerTitle>{title}</DrawerTitle>}\n {withCloseButton && <DrawerCloseButton {...closeButtonProps} />}\n </DrawerHeader>\n )}\n\n <DrawerBody>{children}</DrawerBody>\n </DrawerContent>\n </DrawerRoot>\n );\n});\n\nDrawer.classes = classes;\nDrawer.displayName = '@mantine/core/Drawer';\nDrawer.Root = DrawerRoot;\nDrawer.Overlay = DrawerOverlay;\nDrawer.Content = DrawerContent;\nDrawer.Body = DrawerBody;\nDrawer.Header = DrawerHeader;\nDrawer.Title = DrawerTitle;\nDrawer.CloseButton = DrawerCloseButton;\nDrawer.Stack = DrawerStack;\n"],"mappings":";;;;;;;;;;;;;;;;AA6DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQ,iBAAiB,OAAO;CAChC,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,EACJ,OACA,aACA,cACA,iBACA,kBACA,UACA,QACA,SACA,QACA,GAAG,WACD,SAAS,UAAU,cAAc,MAAM;CAE3C,MAAM,MAAM,IAAI,kBAAkB;CAClC,MAAM,YAAY,CAAC,CAAC,SAAS;CAC7B,MAAM,aACJ,OAAO,UACH;EACE,eAAe,IAAI,cAAc;EACjC,WAAW,IAAI,cAAc;EAC7B,QAAQ,IAAI,UAAU,OAAO;EAC7B,uBAAuB,IAAI;CAC7B,IACA,CAAC;CAEP,MAAM,iBACJ,gBAAgB,QAAQ,QAAQ,WAAW,MAAM,IAAI,cAAc,UAAU;CAE/E,gBAAgB;EACd,IAAI,OAAO,SACT,SACI,IAAI,SAAS,SAAS,UAAU,iBAAiB,OAAO,CAAC,IACzD,IAAI,YAAY,OAAO;CAE/B,GAAG;EAAC;EAAQ;EAAS;CAAM,CAAC;CAE5B,OACE,qBAAC,YAAD;EACU;EACR,QAAQ,OAAO,UAAU,IAAI,UAAU,OAAO,IAAI;EAClD,GAAI;EACJ,GAAI;EAJN,UAAA,CAMG,eACC,oBAAC,eAAD;GACE,SAAS;GACT,iBAAiB,OAAO,UAAU,EAAE,UAAU,EAAE,IAAI,KAAA;GACpD,GAAI;EACL,CAAA,GAEH,qBAAC,eAAD;GAAe,UAAU,OAAO,WAAW,SAAS,YAAY,IAAI,YAAY;GAAhF,UAAA,CACG,aACC,qBAAC,cAAD,EAAA,UAAA,CACG,SAAS,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAC1C,mBAAmB,oBAAC,mBAAD,EAAmB,GAAI,iBAAmB,CAAA,CAClD,EAAA,CAAA,GAGhB,oBAAC,YAAD,EAAa,SAAqB,CAAA,CACrB;EACL,CAAA,CAAA;;AAEhB,CAAC;AAED,OAAO,UAAUA;AACjB,OAAO,cAAc;AACrB,OAAO,OAAO;AACd,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,OAAO;AACd,OAAO,SAAS;AAChB,OAAO,QAAQ;AACf,OAAO,cAAc;AACrB,OAAO,QAAQ"}

package/esm/components/Drawer/DrawerStack.mjs CHANGED Viewed

@@ -7,6 +7,7 @@ const DrawerStackContext = createContext(null);
 function DrawerStack({ children }) {
 	const [stack, setStack] = useState([]);
 	const [maxZIndex, setMaxZIndex] = useState(getDefaultZIndex("modal"));
+	const [handledEscapeEvents] = useState(() => /* @__PURE__ */ new WeakSet());
 	return /* @__PURE__ */ jsx(DrawerStackContext, {
 		value: {
 			stack,
@@ -17,7 +18,8 @@ function DrawerStack({ children }) {
 			removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),
 			getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,
 			currentId: stack[stack.length - 1],
-			maxZIndex
+			maxZIndex,
+			handledEscapeEvents
 		},
 		children
 	});

package/esm/components/Drawer/DrawerStack.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DrawerStack.mjs","names":[],"sources":["../../../src/components/Drawer/DrawerStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface DrawerStackContext {\n stack: string[];\n addModal: (id: string, zIndex: number \| string) => void;\n removeModal: (id: string) => void;\n getZIndex: (id: string) => string;\n currentId: string;\n maxZIndex: string \| number;\n}\n\nexport const DrawerStackContext = createContext<DrawerStackContext \| null>(null);\n\nexport interface DrawerStackProps {\n children: React.ReactNode;\n}\n\nexport function DrawerStack({ children }: DrawerStackProps) {\n const [stack, setStack] = useState<string[]>([]);\n const [maxZIndex, setMaxZIndex] = useState<number \| string>(getDefaultZIndex('modal'));\n\n return (\n <DrawerStackContext\n value={{\n stack,\n addModal: (id, zIndex) => {\n setStack((current) => [...new Set([...current, id])]);\n setMaxZIndex((current) =>\n typeof zIndex === 'number' && typeof current === 'number'\n ? Math.max(current, zIndex)\n : current\n );\n },\n removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n currentId: stack[stack.length - 1],\n maxZIndex,\n }}\n >\n {children}\n </DrawerStackContext>\n );\n}\n\nDrawerStack.displayName = '@mantine/core/DrawerStack';\n"],"mappings":";;;;;~~AAYA~~,MAAa,qBAAqB,cAAyC,IAAI;AAM/E,SAAgB,YAAY,EAAE,YAA8B;CAC1D,MAAM,CAAC,OAAO,YAAY,SAAmB,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA0B,iBAAiB,OAAO,CAAC;~~CAErF~~,OACE,oBAAC,oBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;EACF;EAEC;CACiB,CAAA;AAExB;AAEA,YAAY,cAAc"}
1	+ {"version":3,"file":"DrawerStack.mjs","names":[],"sources":["../../../src/components/Drawer/DrawerStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface DrawerStackContext {\n stack: string[];\n addModal: (id: string, zIndex: number \| string) => void;\n removeModal: (id: string) => void;\n getZIndex: (id: string) => string;\n currentId: string;\n maxZIndex: string \| number;\n handledEscapeEvents: WeakSet<KeyboardEvent>;\n}\n\nexport const DrawerStackContext = createContext<DrawerStackContext \| null>(null);\n\nexport interface DrawerStackProps {\n children: React.ReactNode;\n}\n\nexport function DrawerStack({ children }: DrawerStackProps) {\n const [stack, setStack] = useState<string[]>([]);\n const [maxZIndex, setMaxZIndex] = useState<number \| string>(getDefaultZIndex('modal'));\n const [handledEscapeEvents] = useState(() => new WeakSet<KeyboardEvent>());\n\n return (\n <DrawerStackContext\n value={{\n stack,\n addModal: (id, zIndex) => {\n setStack((current) => [...new Set([...current, id])]);\n setMaxZIndex((current) =>\n typeof zIndex === 'number' && typeof current === 'number'\n ? Math.max(current, zIndex)\n : current\n );\n },\n removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n currentId: stack[stack.length - 1],\n maxZIndex,\n handledEscapeEvents,\n }}\n >\n {children}\n </DrawerStackContext>\n );\n}\n\nDrawerStack.displayName = '@mantine/core/DrawerStack';\n"],"mappings":";;;;;AAaA,MAAa,qBAAqB,cAAyC,IAAI;AAM/E,SAAgB,YAAY,EAAE,YAA8B;CAC1D,MAAM,CAAC,OAAO,YAAY,SAAmB,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA0B,iBAAiB,OAAO,CAAC;CACrF,MAAM,CAAC,uBAAuB,+BAAe,IAAI,QAAuB,CAAC;CAEzE,OACE,oBAAC,oBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;GACA;EACF;EAEC;CACiB,CAAA;AAExB;AAEA,YAAY,cAAc"}

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

@@ -93,11 +93,11 @@ function MenuSub(_props) {
 		children: /* @__PURE__ */ jsx(Popover, {
 			opened,
 			onChange: (nextOpened) => nextOpened ? handleOpen() : handleClose(),
-			withinPortal: false,
 			withArrow: false,
 			id,
 			position,
 			...others,
+			withinPortal: false,
 			children
 		})
 	});

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

	@@ -1 +1 @@
1	- {"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,CAAC,EAC/B,iBAAoC,uCAAuC,CAAC,CAAC,EAAE,EAC/E,MAAM;CACZ,GAAG,EAAE;CAEP,MAAM,wBACJ,OAAO,iBAAiB;EACtB,SAAS,eAAe,GAAG,GAAG,QAAQ,CAAC,EAAE,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;EAEA,UAAA,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"}
1	+ {"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\n/** `Menu.Sub` dropdown is always rendered inside the parent dropdown: hover tracking and outside\n * clicks detection rely on it being a DOM descendant of the menu it belongs to. /\nexport interface MenuSubProps extends Omit<__PopoverProps, 'withinPortal' \| 'portalProps'> {\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 withArrow={false}\n id={id}\n position={position}\n {...others}\n withinPortal={false}\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":";;;;;;;;;;;;;;;AAyDA,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,CAAC,EAC/B,iBAAoC,uCAAuC,CAAC,CAAC,EAAE,EAC/E,MAAM;CACZ,GAAG,EAAE;CAEP,MAAM,wBACJ,OAAO,iBAAiB;EACtB,SAAS,eAAe,GAAG,GAAG,QAAQ,CAAC,EAAE,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;EAEA,UAAA,oBAAC,SAAD;GACU;GACR,WAAW,eAAgB,aAAa,WAAW,IAAI,YAAY;GACnE,WAAW;GACP;GACM;GACV,GAAI;GACJ,cAAc;GAEb;EACM,CAAA;CACK,CAAA;AAEpB;AAEA,QAAQ,UAAU,UAA2C;AAC7D,QAAQ,cAAc;AACtB,QAAQ,SAAS;AACjB,QAAQ,WAAW;AACnB,QAAQ,OAAO"}

package/esm/components/Modal/Modal.mjs CHANGED Viewed

@@ -37,7 +37,8 @@ const Modal = factory((_props) => {
 	const stackProps = ctx && stackId ? {
 		closeOnEscape: ctx.currentId === stackId,
 		trapFocus: ctx.currentId === stackId,
-		zIndex: ctx.getZIndex(stackId)
+		zIndex: ctx.getZIndex(stackId),
+		__handledEscapeEvents: ctx.handledEscapeEvents
 	} : {};
 	const overlayVisible = withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;
 	useEffect(() => {

package/esm/components/Modal/Modal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.mjs","names":["classes"],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { use, useEffect } from 'react';\nimport { factory, Factory, getDefaultZIndex, useProps } from '../../core';\nimport { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';\nimport { ModalBody, type ModalBodyProps } from './ModalBody';\nimport { ModalCloseButton, type ModalCloseButtonProps } from './ModalCloseButton';\nimport { ModalContent, type ModalContentProps } from './ModalContent';\nimport { ModalHeader, type ModalHeaderProps } from './ModalHeader';\nimport { ModalOverlay, type ModalOverlayProps } from './ModalOverlay';\nimport {\n ModalRoot,\n ModalRootCssVariables,\n ModalRootProps,\n ModalRootStylesNames,\n} from './ModalRoot';\nimport { ModalStack, ModalStackContext, type ModalStackProps } from './ModalStack';\nimport { ModalTitle, type ModalTitleProps } from './ModalTitle';\nimport classes from './Modal.module.css';\nexport type ModalStylesNames = ModalRootStylesNames;\nexport type ModalCssVariables = ModalRootCssVariables;\n\nexport interface ModalProps extends ModalRootProps {\n __staticSelector?: string;\n\n /** Modal title /\n title?: React.ReactNode;\n\n /* If set, the overlay is rendered @default true /\n withOverlay?: boolean;\n\n /* Props passed down to the `Overlay` component, use to configure opacity, `background-color`, styles and other properties /\n overlayProps?: ModalBaseOverlayProps;\n\n /* Modal content /\n children?: React.ReactNode;\n\n /* If set, the close button is rendered @default true /\n withCloseButton?: boolean;\n\n /* Props passed down to the close button /\n closeButtonProps?: ModalBaseCloseButtonProps;\n\n /* Id of the modal in the `Modal.Stack` */\n stackId?: string;\n}\n\nexport type ModalFactory = Factory<{\n props: ModalProps;\n ref: HTMLDivElement;\n stylesNames: ModalStylesNames;\n vars: ModalCssVariables;\n staticComponents: {\n Root: typeof ModalRoot;\n Overlay: typeof ModalOverlay;\n Content: typeof ModalContent;\n Body: typeof ModalBody;\n Header: typeof ModalHeader;\n Title: typeof ModalTitle;\n CloseButton: typeof ModalCloseButton;\n Stack: typeof ModalStack;\n };\n}>;\n\nconst defaultProps = {\n closeOnClickOutside: true,\n withinPortal: true,\n lockScroll: true,\n trapFocus: true,\n returnFocus: true,\n closeOnEscape: true,\n keepMounted: false,\n zIndex: getDefaultZIndex('modal'),\n transitionProps: { duration: 200, transition: 'fade-down' },\n withOverlay: true,\n withCloseButton: true,\n} satisfies Partial<ModalProps>;\n\nexport const Modal = factory<ModalFactory>((_props) => {\n const {\n title,\n withOverlay,\n overlayProps,\n withCloseButton,\n closeButtonProps,\n children,\n radius,\n opened,\n stackId,\n zIndex,\n ...others\n } = useProps('Modal', defaultProps, _props);\n const ctx = use(ModalStackContext);\n const hasHeader = !!title \|\| withCloseButton;\n const stackProps =\n ctx && stackId\n ? {\n closeOnEscape: ctx.currentId === stackId,\n trapFocus: ctx.currentId === stackId,\n zIndex: ctx.getZIndex(stackId),\n }\n : {};\n\n const overlayVisible =\n withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;\n\n useEffect(() => {\n if (ctx && stackId) {\n opened\n ? ctx.addModal(stackId, zIndex \|\| getDefaultZIndex('modal'))\n : ctx.removeModal(stackId);\n }\n }, [opened, stackId, zIndex]);\n\n return (\n <ModalRoot\n radius={radius}\n opened={opened}\n zIndex={ctx && stackId ? ctx.getZIndex(stackId) : zIndex}\n {...others}\n {...stackProps}\n >\n {withOverlay && (\n <ModalOverlay\n visible={overlayVisible}\n transitionProps={ctx && stackId ? { duration: 0 } : undefined}\n {...overlayProps}\n />\n )}\n <ModalContent\n radius={radius}\n __hidden={ctx && stackId && opened ? stackId !== ctx.currentId : false}\n >\n {hasHeader && (\n <ModalHeader>\n {title && <ModalTitle>{title}</ModalTitle>}\n {withCloseButton && <ModalCloseButton {...closeButtonProps} />}\n </ModalHeader>\n )}\n\n <ModalBody>{children}</ModalBody>\n </ModalContent>\n </ModalRoot>\n );\n});\n\nModal.classes = classes;\nModal.displayName = '@mantine/core/Modal';\nModal.Root = ModalRoot;\nModal.Overlay = ModalOverlay;\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Header = ModalHeader;\nModal.Title = ModalTitle;\nModal.CloseButton = ModalCloseButton;\nModal.Stack = ModalStack;\n\nexport namespace Modal {\n export type Props = ModalProps;\n export type StylesNames = ModalStylesNames;\n export type CssVariables = ModalCssVariables;\n export type Factory = ModalFactory;\n\n export namespace Root {\n export type Props = ModalRootProps;\n }\n\n export namespace Body {\n export type Props = ModalBodyProps;\n }\n\n export namespace CloseButton {\n export type Props = ModalCloseButtonProps;\n }\n\n export namespace Content {\n export type Props = ModalContentProps;\n }\n\n export namespace Header {\n export type Props = ModalHeaderProps;\n }\n\n export namespace Overlay {\n export type Props = ModalOverlayProps;\n }\n\n export namespace Title {\n export type Props = ModalTitleProps;\n }\n\n export namespace Stack {\n export type Props = ModalStackProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA8DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQ,iBAAiB,OAAO;CAChC,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAY;CAC1D,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,EACJ,OACA,aACA,cACA,iBACA,kBACA,UACA,QACA,QACA,SACA,QACA,GAAG,WACD,SAAS,SAAS,cAAc,MAAM;CAC1C,MAAM,MAAM,IAAI,iBAAiB;CACjC,MAAM,YAAY,CAAC,CAAC,SAAS;CAC7B,MAAM,aACJ,OAAO,UACH;EACE,eAAe,IAAI,cAAc;EACjC,WAAW,IAAI,cAAc;EAC7B,QAAQ,IAAI,UAAU,OAAO;~~CAC/B~~,IACA,CAAC;CAEP,MAAM,iBACJ,gBAAgB,QAAQ,QAAQ,WAAW,MAAM,IAAI,cAAc,UAAU;CAE/E,gBAAgB;EACd,IAAI,OAAO,SACT,SACI,IAAI,SAAS,SAAS,UAAU,iBAAiB,OAAO,CAAC,IACzD,IAAI,YAAY,OAAO;CAE/B,GAAG;EAAC;EAAQ;EAAS;CAAM,CAAC;CAE5B,OACE,qBAAC,WAAD;EACU;EACA;EACR,QAAQ,OAAO,UAAU,IAAI,UAAU,OAAO,IAAI;EAClD,GAAI;EACJ,GAAI;EALN,UAAA,CAOG,eACC,oBAAC,cAAD;GACE,SAAS;GACT,iBAAiB,OAAO,UAAU,EAAE,UAAU,EAAE,IAAI,KAAA;GACpD,GAAI;EACL,CAAA,GAEH,qBAAC,cAAD;GACU;GACR,UAAU,OAAO,WAAW,SAAS,YAAY,IAAI,YAAY;GAFnE,UAAA,CAIG,aACC,qBAAC,aAAD,EAAA,UAAA,CACG,SAAS,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA,GACxC,mBAAmB,oBAAC,kBAAD,EAAkB,GAAI,iBAAmB,CAAA,CAClD,EAAA,CAAA,GAGf,oBAAC,WAAD,EAAY,SAAoB,CAAA,CACpB;EACL,CAAA,CAAA;;AAEf,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,cAAc;AACpB,MAAM,OAAO;AACb,MAAM,UAAU;AAChB,MAAM,UAAU;AAChB,MAAM,OAAO;AACb,MAAM,SAAS;AACf,MAAM,QAAQ;AACd,MAAM,cAAc;AACpB,MAAM,QAAQ"}
1	+ {"version":3,"file":"Modal.mjs","names":["classes"],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { use, useEffect } from 'react';\nimport { factory, Factory, getDefaultZIndex, useProps } from '../../core';\nimport { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';\nimport { ModalBody, type ModalBodyProps } from './ModalBody';\nimport { ModalCloseButton, type ModalCloseButtonProps } from './ModalCloseButton';\nimport { ModalContent, type ModalContentProps } from './ModalContent';\nimport { ModalHeader, type ModalHeaderProps } from './ModalHeader';\nimport { ModalOverlay, type ModalOverlayProps } from './ModalOverlay';\nimport {\n ModalRoot,\n ModalRootCssVariables,\n ModalRootProps,\n ModalRootStylesNames,\n} from './ModalRoot';\nimport { ModalStack, ModalStackContext, type ModalStackProps } from './ModalStack';\nimport { ModalTitle, type ModalTitleProps } from './ModalTitle';\nimport classes from './Modal.module.css';\nexport type ModalStylesNames = ModalRootStylesNames;\nexport type ModalCssVariables = ModalRootCssVariables;\n\nexport interface ModalProps extends ModalRootProps {\n __staticSelector?: string;\n\n /** Modal title /\n title?: React.ReactNode;\n\n /* If set, the overlay is rendered @default true /\n withOverlay?: boolean;\n\n /* Props passed down to the `Overlay` component, use to configure opacity, `background-color`, styles and other properties /\n overlayProps?: ModalBaseOverlayProps;\n\n /* Modal content /\n children?: React.ReactNode;\n\n /* If set, the close button is rendered @default true /\n withCloseButton?: boolean;\n\n /* Props passed down to the close button /\n closeButtonProps?: ModalBaseCloseButtonProps;\n\n /* Id of the modal in the `Modal.Stack` */\n stackId?: string;\n}\n\nexport type ModalFactory = Factory<{\n props: ModalProps;\n ref: HTMLDivElement;\n stylesNames: ModalStylesNames;\n vars: ModalCssVariables;\n staticComponents: {\n Root: typeof ModalRoot;\n Overlay: typeof ModalOverlay;\n Content: typeof ModalContent;\n Body: typeof ModalBody;\n Header: typeof ModalHeader;\n Title: typeof ModalTitle;\n CloseButton: typeof ModalCloseButton;\n Stack: typeof ModalStack;\n };\n}>;\n\nconst defaultProps = {\n closeOnClickOutside: true,\n withinPortal: true,\n lockScroll: true,\n trapFocus: true,\n returnFocus: true,\n closeOnEscape: true,\n keepMounted: false,\n zIndex: getDefaultZIndex('modal'),\n transitionProps: { duration: 200, transition: 'fade-down' },\n withOverlay: true,\n withCloseButton: true,\n} satisfies Partial<ModalProps>;\n\nexport const Modal = factory<ModalFactory>((_props) => {\n const {\n title,\n withOverlay,\n overlayProps,\n withCloseButton,\n closeButtonProps,\n children,\n radius,\n opened,\n stackId,\n zIndex,\n ...others\n } = useProps('Modal', defaultProps, _props);\n const ctx = use(ModalStackContext);\n const hasHeader = !!title \|\| withCloseButton;\n const stackProps =\n ctx && stackId\n ? {\n closeOnEscape: ctx.currentId === stackId,\n trapFocus: ctx.currentId === stackId,\n zIndex: ctx.getZIndex(stackId),\n __handledEscapeEvents: ctx.handledEscapeEvents,\n }\n : {};\n\n const overlayVisible =\n withOverlay === false ? false : stackId && ctx ? ctx.currentId === stackId : opened;\n\n useEffect(() => {\n if (ctx && stackId) {\n opened\n ? ctx.addModal(stackId, zIndex \|\| getDefaultZIndex('modal'))\n : ctx.removeModal(stackId);\n }\n }, [opened, stackId, zIndex]);\n\n return (\n <ModalRoot\n radius={radius}\n opened={opened}\n zIndex={ctx && stackId ? ctx.getZIndex(stackId) : zIndex}\n {...others}\n {...stackProps}\n >\n {withOverlay && (\n <ModalOverlay\n visible={overlayVisible}\n transitionProps={ctx && stackId ? { duration: 0 } : undefined}\n {...overlayProps}\n />\n )}\n <ModalContent\n radius={radius}\n __hidden={ctx && stackId && opened ? stackId !== ctx.currentId : false}\n >\n {hasHeader && (\n <ModalHeader>\n {title && <ModalTitle>{title}</ModalTitle>}\n {withCloseButton && <ModalCloseButton {...closeButtonProps} />}\n </ModalHeader>\n )}\n\n <ModalBody>{children}</ModalBody>\n </ModalContent>\n </ModalRoot>\n );\n});\n\nModal.classes = classes;\nModal.displayName = '@mantine/core/Modal';\nModal.Root = ModalRoot;\nModal.Overlay = ModalOverlay;\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Header = ModalHeader;\nModal.Title = ModalTitle;\nModal.CloseButton = ModalCloseButton;\nModal.Stack = ModalStack;\n\nexport namespace Modal {\n export type Props = ModalProps;\n export type StylesNames = ModalStylesNames;\n export type CssVariables = ModalCssVariables;\n export type Factory = ModalFactory;\n\n export namespace Root {\n export type Props = ModalRootProps;\n }\n\n export namespace Body {\n export type Props = ModalBodyProps;\n }\n\n export namespace CloseButton {\n export type Props = ModalCloseButtonProps;\n }\n\n export namespace Content {\n export type Props = ModalContentProps;\n }\n\n export namespace Header {\n export type Props = ModalHeaderProps;\n }\n\n export namespace Overlay {\n export type Props = ModalOverlayProps;\n }\n\n export namespace Title {\n export type Props = ModalTitleProps;\n }\n\n export namespace Stack {\n export type Props = ModalStackProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA8DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,cAAc;CACd,YAAY;CACZ,WAAW;CACX,aAAa;CACb,eAAe;CACf,aAAa;CACb,QAAQ,iBAAiB,OAAO;CAChC,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAY;CAC1D,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,EACJ,OACA,aACA,cACA,iBACA,kBACA,UACA,QACA,QACA,SACA,QACA,GAAG,WACD,SAAS,SAAS,cAAc,MAAM;CAC1C,MAAM,MAAM,IAAI,iBAAiB;CACjC,MAAM,YAAY,CAAC,CAAC,SAAS;CAC7B,MAAM,aACJ,OAAO,UACH;EACE,eAAe,IAAI,cAAc;EACjC,WAAW,IAAI,cAAc;EAC7B,QAAQ,IAAI,UAAU,OAAO;EAC7B,uBAAuB,IAAI;CAC7B,IACA,CAAC;CAEP,MAAM,iBACJ,gBAAgB,QAAQ,QAAQ,WAAW,MAAM,IAAI,cAAc,UAAU;CAE/E,gBAAgB;EACd,IAAI,OAAO,SACT,SACI,IAAI,SAAS,SAAS,UAAU,iBAAiB,OAAO,CAAC,IACzD,IAAI,YAAY,OAAO;CAE/B,GAAG;EAAC;EAAQ;EAAS;CAAM,CAAC;CAE5B,OACE,qBAAC,WAAD;EACU;EACA;EACR,QAAQ,OAAO,UAAU,IAAI,UAAU,OAAO,IAAI;EAClD,GAAI;EACJ,GAAI;EALN,UAAA,CAOG,eACC,oBAAC,cAAD;GACE,SAAS;GACT,iBAAiB,OAAO,UAAU,EAAE,UAAU,EAAE,IAAI,KAAA;GACpD,GAAI;EACL,CAAA,GAEH,qBAAC,cAAD;GACU;GACR,UAAU,OAAO,WAAW,SAAS,YAAY,IAAI,YAAY;GAFnE,UAAA,CAIG,aACC,qBAAC,aAAD,EAAA,UAAA,CACG,SAAS,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA,GACxC,mBAAmB,oBAAC,kBAAD,EAAkB,GAAI,iBAAmB,CAAA,CAClD,EAAA,CAAA,GAGf,oBAAC,WAAD,EAAY,SAAoB,CAAA,CACpB;EACL,CAAA,CAAA;;AAEf,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,cAAc;AACpB,MAAM,OAAO;AACb,MAAM,UAAU;AAChB,MAAM,UAAU;AAChB,MAAM,OAAO;AACb,MAAM,SAAS;AACf,MAAM,QAAQ;AACd,MAAM,cAAc;AACpB,MAAM,QAAQ"}

package/esm/components/Modal/ModalStack.mjs CHANGED Viewed

@@ -7,6 +7,7 @@ const ModalStackContext = createContext(null);
 function ModalStack({ children }) {
 	const [stack, setStack] = useState([]);
 	const [maxZIndex, setMaxZIndex] = useState(getDefaultZIndex("modal"));
+	const [handledEscapeEvents] = useState(() => /* @__PURE__ */ new WeakSet());
 	return /* @__PURE__ */ jsx(ModalStackContext, {
 		value: {
 			stack,
@@ -17,7 +18,8 @@ function ModalStack({ children }) {
 			removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),
 			getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,
 			currentId: stack[stack.length - 1],
-			maxZIndex
+			maxZIndex,
+			handledEscapeEvents
 		},
 		children
 	});

package/esm/components/Modal/ModalStack.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalStack.mjs","names":[],"sources":["../../../src/components/Modal/ModalStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface ModalStackContext {\n stack: string[];\n addModal: (id: string, zIndex: number \| string) => void;\n removeModal: (id: string) => void;\n getZIndex: (id: string) => string;\n currentId: string;\n maxZIndex: string \| number;\n}\n\nexport const ModalStackContext = createContext<ModalStackContext \| null>(null);\n\nexport interface ModalStackProps {\n children: React.ReactNode;\n}\n\nexport function ModalStack({ children }: ModalStackProps) {\n const [stack, setStack] = useState<string[]>([]);\n const [maxZIndex, setMaxZIndex] = useState<number \| string>(getDefaultZIndex('modal'));\n\n return (\n <ModalStackContext\n value={{\n stack,\n addModal: (id, zIndex) => {\n setStack((current) => [...new Set([...current, id])]);\n setMaxZIndex((current) =>\n typeof zIndex === 'number' && typeof current === 'number'\n ? Math.max(current, zIndex)\n : current\n );\n },\n removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n currentId: stack[stack.length - 1],\n maxZIndex,\n }}\n >\n {children}\n </ModalStackContext>\n );\n}\n\nModalStack.displayName = '@mantine/core/ModalStack';\n"],"mappings":";;;;;~~AAYA~~,MAAa,oBAAoB,cAAwC,IAAI;AAM7E,SAAgB,WAAW,EAAE,YAA6B;CACxD,MAAM,CAAC,OAAO,YAAY,SAAmB,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA0B,iBAAiB,OAAO,CAAC;~~CAErF~~,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;EACF;EAEC;CACgB,CAAA;AAEvB;AAEA,WAAW,cAAc"}
1	+ {"version":3,"file":"ModalStack.mjs","names":[],"sources":["../../../src/components/Modal/ModalStack.tsx"],"sourcesContent":["import { createContext, useState } from 'react';\nimport { getDefaultZIndex } from '../../core';\n\ninterface ModalStackContext {\n stack: string[];\n addModal: (id: string, zIndex: number \| string) => void;\n removeModal: (id: string) => void;\n getZIndex: (id: string) => string;\n currentId: string;\n maxZIndex: string \| number;\n handledEscapeEvents: WeakSet<KeyboardEvent>;\n}\n\nexport const ModalStackContext = createContext<ModalStackContext \| null>(null);\n\nexport interface ModalStackProps {\n children: React.ReactNode;\n}\n\nexport function ModalStack({ children }: ModalStackProps) {\n const [stack, setStack] = useState<string[]>([]);\n const [maxZIndex, setMaxZIndex] = useState<number \| string>(getDefaultZIndex('modal'));\n const [handledEscapeEvents] = useState(() => new WeakSet<KeyboardEvent>());\n\n return (\n <ModalStackContext\n value={{\n stack,\n addModal: (id, zIndex) => {\n setStack((current) => [...new Set([...current, id])]);\n setMaxZIndex((current) =>\n typeof zIndex === 'number' && typeof current === 'number'\n ? Math.max(current, zIndex)\n : current\n );\n },\n removeModal: (id) => setStack((current) => current.filter((currentId) => currentId !== id)),\n getZIndex: (id) => `calc(${maxZIndex} + ${stack.indexOf(id)} + 1)`,\n currentId: stack[stack.length - 1],\n maxZIndex,\n handledEscapeEvents,\n }}\n >\n {children}\n </ModalStackContext>\n );\n}\n\nModalStack.displayName = '@mantine/core/ModalStack';\n"],"mappings":";;;;;AAaA,MAAa,oBAAoB,cAAwC,IAAI;AAM7E,SAAgB,WAAW,EAAE,YAA6B;CACxD,MAAM,CAAC,OAAO,YAAY,SAAmB,CAAC,CAAC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA0B,iBAAiB,OAAO,CAAC;CACrF,MAAM,CAAC,uBAAuB,+BAAe,IAAI,QAAuB,CAAC;CAEzE,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA,WAAW,IAAI,WAAW;IACxB,UAAU,YAAY,CAAC,mBAAG,IAAI,IAAI,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IACpD,cAAc,YACZ,OAAO,WAAW,YAAY,OAAO,YAAY,WAC7C,KAAK,IAAI,SAAS,MAAM,IACxB,OACN;GACF;GACA,cAAc,OAAO,UAAU,YAAY,QAAQ,QAAQ,cAAc,cAAc,EAAE,CAAC;GAC1F,YAAY,OAAO,QAAQ,UAAU,KAAK,MAAM,QAAQ,EAAE,EAAE;GAC5D,WAAW,MAAM,MAAM,SAAS;GAChC;GACA;EACF;EAEC;CACgB,CAAA;AAEvB;AAEA,WAAW,cAAc"}

package/esm/components/ModalBase/ModalBase.mjs CHANGED Viewed

@@ -8,7 +8,7 @@ import { useModal } from "./use-modal.mjs";
 import { RemoveScroll } from "react-remove-scroll";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/ModalBase/ModalBase.tsx
-function ModalBase({ keepMounted, keepMountedMode = "activity", opened, onClose, id, transitionProps, onExitTransitionEnd, onEnterTransitionEnd, trapFocus, closeOnEscape, returnFocus, closeOnClickOutside, withinPortal, portalProps, lockScroll, children, zIndex, shadow, padding, __vars, unstyled, removeScrollProps, ...others }) {
+function ModalBase({ keepMounted, keepMountedMode = "activity", opened, onClose, id, transitionProps, onExitTransitionEnd, onEnterTransitionEnd, trapFocus, closeOnEscape, returnFocus, closeOnClickOutside, withinPortal, portalProps, lockScroll, children, zIndex, shadow, padding, __vars, unstyled, removeScrollProps, __handledEscapeEvents, ...others }) {
 	const { _id, titleMounted, bodyMounted, shouldLockScroll, setTitleMounted, setBodyMounted } = useModal({
 		id,
 		transitionProps,
@@ -16,7 +16,8 @@ function ModalBase({ keepMounted, keepMountedMode = "activity", opened, onClose,
 		trapFocus,
 		closeOnEscape,
 		onClose,
-		returnFocus
+		returnFocus,
+		handledEscapeEvents: __handledEscapeEvents
 	});
 	const { key: removeScrollKey, ...otherRemoveScrollProps } = removeScrollProps || {};
 	return /* @__PURE__ */ jsx(OptionalPortal, {

package/esm/components/ModalBase/ModalBase.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModalBase.mjs","names":[],"sources":["../../../src/components/ModalBase/ModalBase.tsx"],"sourcesContent":["import { RemoveScroll } from 'react-remove-scroll';\nimport {\n Box,\n BoxProps,\n ElementProps,\n getDefaultZIndex,\n getShadow,\n getSpacing,\n MantineShadow,\n MantineSize,\n MantineSpacing,\n} from '../../core';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport { ModalBaseProvider } from './ModalBase.context';\nimport { useModal } from './use-modal';\n\ntype RemoveScrollProps = Omit<React.ComponentProps<typeof RemoveScroll>, 'children'>;\n\nexport interface ModalBaseProps extends BoxProps, ElementProps<'div', 'title'> {\n unstyled?: boolean;\n\n /** If set modal/drawer is not unmounted from the DOM when hidden. `display: none` styles are applied instead. @default false /\n keepMounted?: boolean;\n\n /* Controls how the modal/drawer is hidden when `keepMounted` is set:\n * `'activity'` - hidden with React 19 `Activity` component,\n * `'display-none'` - hidden with `display: none` styles\n * @default 'activity'\n /\n keepMountedMode?: 'activity' \| 'display-none';\n\n /* Controls opened state /\n opened: boolean;\n\n /* Called when modal/drawer is closed /\n onClose: () => void;\n\n /* Id used to connect modal/drawer with body and title /\n id?: string;\n\n /* If set, scroll is locked when `opened={true}` @default true /\n lockScroll?: boolean;\n\n /* If set, focus is trapped within the modal/drawer @default true /\n trapFocus?: boolean;\n\n /* If set, the component is rendered inside `Portal` @default true /\n withinPortal?: boolean;\n\n /* Props passed down to the Portal component when `withinPortal` is set /\n portalProps?: BasePortalProps;\n\n /* Modal/drawer content /\n children?: React.ReactNode;\n\n /* If set, the modal/drawer is closed when user clicks on the overlay @default true /\n closeOnClickOutside?: boolean;\n\n /* Props added to the `Transition` component that used to animate overlay and body, use to configure duration and animation type, `{ duration: 200, transition: 'fade-down' }` by default /\n transitionProps?: TransitionOverride;\n\n /* Called when exit transition ends /\n onExitTransitionEnd?: () => void;\n\n /* Called when enter transition ends /\n onEnterTransitionEnd?: () => void;\n\n /* If set, `onClose` is called when user presses the escape key @default true /\n closeOnEscape?: boolean;\n\n /* If set, focus is returned to the last active element when `onClose` is called @default true /\n returnFocus?: boolean;\n\n /* `z-index` CSS property of the root element @default 200 /\n zIndex?: string \| number;\n\n /* Key of `theme.shadows` or any valid CSS box-shadow value @default 'xl' /\n shadow?: MantineShadow;\n\n /* Key of `theme.spacing` or any valid CSS value to set content, header and footer padding @default 'md' /\n padding?: MantineSpacing;\n\n /* Controls width of the content area @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* Props passed down to react-remove-scroll, can be used to customize scroll lock behavior */\n removeScrollProps?: RemoveScrollProps;\n}\n\nexport function ModalBase({\n keepMounted,\n keepMountedMode = 'activity',\n opened,\n onClose,\n id,\n transitionProps,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n trapFocus,\n closeOnEscape,\n returnFocus,\n closeOnClickOutside,\n withinPortal,\n portalProps,\n lockScroll,\n children,\n zIndex,\n shadow,\n padding,\n __vars,\n unstyled,\n removeScrollProps,\n ...others\n}: ModalBaseProps) {\n const { _id, titleMounted, bodyMounted, shouldLockScroll, setTitleMounted, setBodyMounted } =\n useModal({ id, transitionProps, opened, trapFocus, closeOnEscape, onClose, returnFocus });\n\n const { key: removeScrollKey, ...otherRemoveScrollProps } = removeScrollProps \|\| {};\n\n return (\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <ModalBaseProvider\n value={{\n opened,\n onClose,\n closeOnClickOutside,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n transitionProps: { ...transitionProps, keepMounted, keepMountedMode },\n getTitleId: () => `${_id}-title`,\n getBodyId: () => `${_id}-body`,\n titleMounted,\n bodyMounted,\n setTitleMounted,\n setBodyMounted,\n trapFocus,\n closeOnEscape,\n zIndex,\n unstyled,\n }}\n >\n <RemoveScroll\n enabled={shouldLockScroll && lockScroll}\n key={removeScrollKey}\n {...otherRemoveScrollProps}\n >\n <Box\n {...others}\n id={_id}\n __vars={{\n ...__vars,\n '--mb-z-index': (zIndex \|\| getDefaultZIndex('modal')).toString(),\n '--mb-shadow': getShadow(shadow),\n '--mb-padding': getSpacing(padding),\n }}\n >\n {children}\n </Box>\n </RemoveScroll>\n </ModalBaseProvider>\n </OptionalPortal>\n );\n}\n\nModalBase.displayName = '@mantine/core/ModalBase';\n"],"mappings":";;;;;;;;;;~~AA0FA~~,SAAgB,UAAU,EACxB,aACA,kBAAkB,YAClB,QACA,SACA,IACA,iBACA,qBACA,sBACA,WACA,eACA,aACA,qBACA,cACA,aACA,YACA,UACA,QACA,QACA,SACA,QACA,UACA,mBACA,GAAG,UACc;CACjB,MAAM,EAAE,KAAK,cAAc,aAAa,kBAAkB,iBAAiB,mBACzE,SAAS;~~EAAE~~;~~EAAI~~;~~EAAiB~~;~~EAAQ~~;~~EAAW~~;~~EAAe~~;~~EAAS~~;~~CAAY~~,CAAC;~~CAE1F~~,MAAM,EAAE,KAAK,iBAAiB,GAAG,2BAA2B,qBAAqB,CAAC;CAElF,OACE,oBAAC,gBAAD;EAAgB,GAAI;EAA2B;EAC7C,UAAA,oBAAC,mBAAD;GACE,OAAO;IACL;IACA;IACA;IACA;IACA;IACA,iBAAiB;KAAE,GAAG;KAAiB;KAAa;IAAgB;IACpE,kBAAkB,GAAG,IAAI;IACzB,iBAAiB,GAAG,IAAI;IACxB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GAEA,UAAA,oBAAC,cAAD;IACE,SAAS,oBAAoB;IAE7B,GAAI;IAEJ,UAAA,oBAAC,KAAD;KACE,GAAI;KACJ,IAAI;KACJ,QAAQ;MACN,GAAG;MACH,iBAAiB,UAAU,iBAAiB,OAAO,EAAA,CAAG,SAAS;MAC/D,eAAe,UAAU,MAAM;MAC/B,gBAAgB,WAAW,OAAO;KACpC;KAEC;IACE,CAAA;GACO,GAfP,eAeO;EACG,CAAA;CACL,CAAA;AAEpB;AAEA,UAAU,cAAc"}
1	+ {"version":3,"file":"ModalBase.mjs","names":[],"sources":["../../../src/components/ModalBase/ModalBase.tsx"],"sourcesContent":["import { RemoveScroll } from 'react-remove-scroll';\nimport {\n Box,\n BoxProps,\n ElementProps,\n getDefaultZIndex,\n getShadow,\n getSpacing,\n MantineShadow,\n MantineSize,\n MantineSpacing,\n} from '../../core';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport { ModalBaseProvider } from './ModalBase.context';\nimport { useModal } from './use-modal';\n\ntype RemoveScrollProps = Omit<React.ComponentProps<typeof RemoveScroll>, 'children'>;\n\nexport interface ModalBaseProps extends BoxProps, ElementProps<'div', 'title'> {\n unstyled?: boolean;\n __handledEscapeEvents?: WeakSet<KeyboardEvent>;\n\n /** If set modal/drawer is not unmounted from the DOM when hidden. `display: none` styles are applied instead. @default false /\n keepMounted?: boolean;\n\n /* Controls how the modal/drawer is hidden when `keepMounted` is set:\n * `'activity'` - hidden with React 19 `Activity` component,\n * `'display-none'` - hidden with `display: none` styles\n * @default 'activity'\n /\n keepMountedMode?: 'activity' \| 'display-none';\n\n /* Controls opened state /\n opened: boolean;\n\n /* Called when modal/drawer is closed /\n onClose: () => void;\n\n /* Id used to connect modal/drawer with body and title /\n id?: string;\n\n /* If set, scroll is locked when `opened={true}` @default true /\n lockScroll?: boolean;\n\n /* If set, focus is trapped within the modal/drawer @default true /\n trapFocus?: boolean;\n\n /* If set, the component is rendered inside `Portal` @default true /\n withinPortal?: boolean;\n\n /* Props passed down to the Portal component when `withinPortal` is set /\n portalProps?: BasePortalProps;\n\n /* Modal/drawer content /\n children?: React.ReactNode;\n\n /* If set, the modal/drawer is closed when user clicks on the overlay @default true /\n closeOnClickOutside?: boolean;\n\n /* Props added to the `Transition` component that used to animate overlay and body, use to configure duration and animation type, `{ duration: 200, transition: 'fade-down' }` by default /\n transitionProps?: TransitionOverride;\n\n /* Called when exit transition ends /\n onExitTransitionEnd?: () => void;\n\n /* Called when enter transition ends /\n onEnterTransitionEnd?: () => void;\n\n /* If set, `onClose` is called when user presses the escape key @default true /\n closeOnEscape?: boolean;\n\n /* If set, focus is returned to the last active element when `onClose` is called @default true /\n returnFocus?: boolean;\n\n /* `z-index` CSS property of the root element @default 200 /\n zIndex?: string \| number;\n\n /* Key of `theme.shadows` or any valid CSS box-shadow value @default 'xl' /\n shadow?: MantineShadow;\n\n /* Key of `theme.spacing` or any valid CSS value to set content, header and footer padding @default 'md' /\n padding?: MantineSpacing;\n\n /* Controls width of the content area @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* Props passed down to react-remove-scroll, can be used to customize scroll lock behavior */\n removeScrollProps?: RemoveScrollProps;\n}\n\nexport function ModalBase({\n keepMounted,\n keepMountedMode = 'activity',\n opened,\n onClose,\n id,\n transitionProps,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n trapFocus,\n closeOnEscape,\n returnFocus,\n closeOnClickOutside,\n withinPortal,\n portalProps,\n lockScroll,\n children,\n zIndex,\n shadow,\n padding,\n __vars,\n unstyled,\n removeScrollProps,\n __handledEscapeEvents,\n ...others\n}: ModalBaseProps) {\n const { _id, titleMounted, bodyMounted, shouldLockScroll, setTitleMounted, setBodyMounted } =\n useModal({\n id,\n transitionProps,\n opened,\n trapFocus,\n closeOnEscape,\n onClose,\n returnFocus,\n handledEscapeEvents: __handledEscapeEvents,\n });\n\n const { key: removeScrollKey, ...otherRemoveScrollProps } = removeScrollProps \|\| {};\n\n return (\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <ModalBaseProvider\n value={{\n opened,\n onClose,\n closeOnClickOutside,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n transitionProps: { ...transitionProps, keepMounted, keepMountedMode },\n getTitleId: () => `${_id}-title`,\n getBodyId: () => `${_id}-body`,\n titleMounted,\n bodyMounted,\n setTitleMounted,\n setBodyMounted,\n trapFocus,\n closeOnEscape,\n zIndex,\n unstyled,\n }}\n >\n <RemoveScroll\n enabled={shouldLockScroll && lockScroll}\n key={removeScrollKey}\n {...otherRemoveScrollProps}\n >\n <Box\n {...others}\n id={_id}\n __vars={{\n ...__vars,\n '--mb-z-index': (zIndex \|\| getDefaultZIndex('modal')).toString(),\n '--mb-shadow': getShadow(shadow),\n '--mb-padding': getSpacing(padding),\n }}\n >\n {children}\n </Box>\n </RemoveScroll>\n </ModalBaseProvider>\n </OptionalPortal>\n );\n}\n\nModalBase.displayName = '@mantine/core/ModalBase';\n"],"mappings":";;;;;;;;;;AA2FA,SAAgB,UAAU,EACxB,aACA,kBAAkB,YAClB,QACA,SACA,IACA,iBACA,qBACA,sBACA,WACA,eACA,aACA,qBACA,cACA,aACA,YACA,UACA,QACA,QACA,SACA,QACA,UACA,mBACA,uBACA,GAAG,UACc;CACjB,MAAM,EAAE,KAAK,cAAc,aAAa,kBAAkB,iBAAiB,mBACzE,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA,qBAAqB;CACvB,CAAC;CAEH,MAAM,EAAE,KAAK,iBAAiB,GAAG,2BAA2B,qBAAqB,CAAC;CAElF,OACE,oBAAC,gBAAD;EAAgB,GAAI;EAA2B;EAC7C,UAAA,oBAAC,mBAAD;GACE,OAAO;IACL;IACA;IACA;IACA;IACA;IACA,iBAAiB;KAAE,GAAG;KAAiB;KAAa;IAAgB;IACpE,kBAAkB,GAAG,IAAI;IACzB,iBAAiB,GAAG,IAAI;IACxB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GAEA,UAAA,oBAAC,cAAD;IACE,SAAS,oBAAoB;IAE7B,GAAI;IAEJ,UAAA,oBAAC,KAAD;KACE,GAAI;KACJ,IAAI;KACJ,QAAQ;MACN,GAAG;MACH,iBAAiB,UAAU,iBAAiB,OAAO,EAAA,CAAG,SAAS;MAC/D,eAAe,UAAU,MAAM;MAC/B,gBAAgB,WAAW,OAAO;KACpC;KAEC;IACE,CAAA;GACO,GAfP,eAeO;EACG,CAAA;CACL,CAAA;AAEpB;AAEA,UAAU,cAAc"}

package/esm/components/ModalBase/use-modal.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import { useLockScroll } from "./use-lock-scroll.mjs";
 import { useState } from "react";
 import { useFocusReturn, useId as useId$1, useWindowEvent } from "@mantine/hooks";
 //#region packages/@mantine/core/src/components/ModalBase/use-modal.ts
-function useModal({ id, transitionProps, opened, trapFocus, closeOnEscape, onClose, returnFocus }) {
+function useModal({ id, transitionProps, opened, trapFocus, closeOnEscape, onClose, returnFocus, handledEscapeEvents }) {
 	const _id = useId$1(id);
 	const [titleMounted, setTitleMounted] = useState(false);
 	const [bodyMounted, setBodyMounted] = useState(false);
@@ -13,7 +13,12 @@ function useModal({ id, transitionProps, opened, trapFocus, closeOnEscape, onClo
 		transitionDuration
 	});
 	useWindowEvent("keydown", (event) => {
-		if (event.key === "Escape" && closeOnEscape && !event.isComposing && opened) event.target?.getAttribute("data-mantine-stop-propagation") !== "true" && onClose();
+		if (event.key === "Escape" && closeOnEscape && !event.isComposing && opened && !handledEscapeEvents?.has(event)) {
+			if (event.target?.getAttribute("data-mantine-stop-propagation") !== "true") {
+				handledEscapeEvents?.add(event);
+				onClose();
+			}
+		}
 	}, { capture: true });
 	useFocusReturn({
 		opened,

package/esm/components/ModalBase/use-modal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-modal.mjs","names":["useId"],"sources":["../../../src/components/ModalBase/use-modal.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useFocusReturn, useId, useWindowEvent } from '@mantine/hooks';\nimport { TransitionOverride } from '../Transition';\nimport { useLockScroll } from './use-lock-scroll';\n\ninterface UseModalInput {\n opened: boolean;\n onClose: () => void;\n id: string \| undefined;\n transitionProps: TransitionOverride \| undefined;\n trapFocus: boolean \| undefined;\n closeOnEscape: boolean \| undefined;\n returnFocus: boolean \| undefined;\n}\n\nexport function useModal({\n id,\n transitionProps,\n opened,\n trapFocus,\n closeOnEscape,\n onClose,\n returnFocus,\n}: UseModalInput) {\n const _id = useId(id);\n const [titleMounted, setTitleMounted] = useState(false);\n const [bodyMounted, setBodyMounted] = useState(false);\n\n const transitionDuration =\n typeof transitionProps?.duration === 'number' ? transitionProps?.duration : 200;\n\n const shouldLockScroll = useLockScroll({ opened, transitionDuration });\n\n useWindowEvent(\n 'keydown',\n (event) => {\n if (event.key === 'Escape' && closeOnEscape && !event.isComposing && ~~opened~~) {\n const shouldTrigger =\n (event.target as HTMLElement)?.getAttribute('data-mantine-stop-propagation') !== 'true';\n shouldTrigger && onClose();\n }\n },\n { capture: true }\n );\n\n useFocusReturn({ opened, shouldReturnFocus: trapFocus && returnFocus });\n\n return {\n _id,\n titleMounted,\n bodyMounted,\n shouldLockScroll,\n setTitleMounted,\n setBodyMounted,\n };\n}\n"],"mappings":";;;;;~~AAeA~~,SAAgB,SAAS,EACvB,IACA,iBACA,QACA,WACA,eACA,SACA,~~eACgB~~;CAChB,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,qBACJ,OAAO,iBAAiB,aAAa,WAAW,iBAAiB,WAAW;CAE9E,MAAM,mBAAmB,cAAc;EAAE;EAAQ;CAAmB,CAAC;CAErE,eACE,YACC,UAAU;EACT,~~IAAI~~,MAAM,QAAQ,~~YAAY~~,~~iBAAiB~~,CAAC,MAAM,~~eAAe~~,~~QAGnE~~,~~MADS~~,QAAwB,aAAa,+BAA+B,MAAM,~~UAClE~~,QAAQ;~~CAE7B~~,GACA,EAAE,SAAS,KAAK,CAClB;CAEA,eAAe;EAAE;EAAQ,mBAAmB,aAAa;CAAY,CAAC;CAEtE,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}
1	+ {"version":3,"file":"use-modal.mjs","names":["useId"],"sources":["../../../src/components/ModalBase/use-modal.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useFocusReturn, useId, useWindowEvent } from '@mantine/hooks';\nimport { TransitionOverride } from '../Transition';\nimport { useLockScroll } from './use-lock-scroll';\n\ninterface UseModalInput {\n opened: boolean;\n onClose: () => void;\n id: string \| undefined;\n transitionProps: TransitionOverride \| undefined;\n trapFocus: boolean \| undefined;\n closeOnEscape: boolean \| undefined;\n returnFocus: boolean \| undefined;\n handledEscapeEvents?: WeakSet<KeyboardEvent>;\n}\n\nexport function useModal({\n id,\n transitionProps,\n opened,\n trapFocus,\n closeOnEscape,\n onClose,\n returnFocus,\n handledEscapeEvents,\n}: UseModalInput) {\n const _id = useId(id);\n const [titleMounted, setTitleMounted] = useState(false);\n const [bodyMounted, setBodyMounted] = useState(false);\n\n const transitionDuration =\n typeof transitionProps?.duration === 'number' ? transitionProps?.duration : 200;\n\n const shouldLockScroll = useLockScroll({ opened, transitionDuration });\n\n useWindowEvent(\n 'keydown',\n (event) => {\n if (\n event.key === 'Escape' &&\n closeOnEscape &&\n !event.isComposing &&\n opened &&\n !handledEscapeEvents?.has(event)\n ) {\n const shouldTrigger =\n (event.target as HTMLElement)?.getAttribute('data-mantine-stop-propagation') !== 'true';\n if (shouldTrigger) {\n handledEscapeEvents?.add(event);\n onClose();\n }\n }\n },\n { capture: true }\n );\n\n useFocusReturn({ opened, shouldReturnFocus: trapFocus && returnFocus });\n\n return {\n _id,\n titleMounted,\n bodyMounted,\n shouldLockScroll,\n setTitleMounted,\n setBodyMounted,\n };\n}\n"],"mappings":";;;;;AAgBA,SAAgB,SAAS,EACvB,IACA,iBACA,QACA,WACA,eACA,SACA,aACA,uBACgB;CAChB,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,qBACJ,OAAO,iBAAiB,aAAa,WAAW,iBAAiB,WAAW;CAE9E,MAAM,mBAAmB,cAAc;EAAE;EAAQ;CAAmB,CAAC;CAErE,eACE,YACC,UAAU;EACT,IACE,MAAM,QAAQ,YACd,iBACA,CAAC,MAAM,eACP,UACA,CAAC,qBAAqB,IAAI,KAAK,GAG5B;OAAA,MAAM,QAAwB,aAAa,+BAA+B,MAAM,QAChE;IACjB,qBAAqB,IAAI,KAAK;IAC9B,QAAQ;GACV;;CAEJ,GACA,EAAE,SAAS,KAAK,CAClB;CAEA,eAAe;EAAE;EAAQ,mBAAmB,aAAa;CAAY,CAAC;CAEtE,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/esm/components/OverflowList/use-dimensions.mjs CHANGED Viewed

@@ -1,28 +1,28 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
-import { flushSync } from "react-dom";
 //#region packages/@mantine/core/src/components/OverflowList/use-dimensions.tsx
 function useDimensions(elementRef) {
 	const resizeObserverRef = useRef(null);
 	const [dimensions, setDimensions] = useState(null);
 	useEffect(() => {
 		if (!elementRef.current) return;
+		let frame = 0;
 		resizeObserverRef.current = new ResizeObserver((entries) => {
 			if (entries[0]) {
 				const entry = entries[0];
-				const updateDimensions = () => {
-					setDimensions({
-						width: entry.borderBoxSize[0]?.inlineSize ?? entry.target.clientWidth,
-						height: entry.borderBoxSize[0]?.blockSize ?? entry.target.clientHeight,
-						contentWidth: entry.contentRect.width,
-						contentHeight: entry.contentRect.height
-					});
+				const nextDimensions = {
+					width: entry.borderBoxSize[0]?.inlineSize ?? entry.target.clientWidth,
+					height: entry.borderBoxSize[0]?.blockSize ?? entry.target.clientHeight,
+					contentWidth: entry.contentRect.width,
+					contentHeight: entry.contentRect.height
 				};
-				flushSync(updateDimensions);
+				cancelAnimationFrame(frame);
+				frame = requestAnimationFrame(() => setDimensions(nextDimensions));
 			}
 		});
 		resizeObserverRef.current.observe(elementRef.current);
 		return () => {
+			cancelAnimationFrame(frame);
 			if (resizeObserverRef.current) {
 				resizeObserverRef.current.disconnect();
 				resizeObserverRef.current = null;

package/esm/components/OverflowList/use-dimensions.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-dimensions.mjs","names":[],"sources":["../../../src/components/OverflowList/use-dimensions.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\~~nimport { flushSync } from 'react-dom';\~~n\ninterface ResizeObserverDimensions {\n width: number;\n height: number;\n contentWidth: number;\n contentHeight: number;\n}\nexport function useDimensions<T extends HTMLElement \| null>(\n elementRef: React.RefObject<T>\n): ResizeObserverDimensions \| null {\n const resizeObserverRef = useRef<ResizeObserver \| null>(null);\n const [dimensions, setDimensions] = useState<ResizeObserverDimensions \| null>(null);\n\n useEffect(() => {\n if (!elementRef.current) {\n return;\n }\n\n resizeObserverRef.current = new ResizeObserver((entries) => {\n if (entries[0]) {\n const entry = entries[0];\n const ~~updateDimensions~~ = ~~() =>~~ {\n ~~setDimensions({\n~~ width: entry.borderBoxSize[0]?.inlineSize ?? entry.target.clientWidth,\n height: entry.borderBoxSize[0]?.blockSize ?? entry.target.clientHeight,\n contentWidth: entry.contentRect.width,\n contentHeight: entry.contentRect.height,\n ~~});\n~~ };\n\n ~~flushSync~~(~~updateDimensions~~);\n }\n });\n\n resizeObserverRef.current.observe(elementRef.current);\n\n return () => {\n if (resizeObserverRef.current) {\n resizeObserverRef.current.disconnect();\n resizeObserverRef.current = null;\n }\n };\n }, [elementRef.current]);\n\n return dimensions;\n}\n"],"mappings":"~~;;;;AASA~~,SAAgB,cACd,YACiC;CACjC,MAAM,oBAAoB,OAA8B,IAAI;CAC5D,MAAM,CAAC,YAAY,iBAAiB,SAA0C,IAAI;CAElF,gBAAgB;EACd,IAAI,CAAC,WAAW,SACd;~~EAGF~~,kBAAkB,UAAU,IAAI,gBAAgB,YAAY;GAC1D,IAAI,QAAQ,IAAI;IACd,MAAM,QAAQ,QAAQ;IACtB,MAAM,~~yBAAyB~~;~~KAC7B~~,~~cAAc;MACZ,~~OAAO,MAAM,cAAc,EAAE,EAAE,cAAc,MAAM,OAAO;~~MAC1D~~,QAAQ,MAAM,cAAc,EAAE,EAAE,aAAa,MAAM,OAAO;~~MAC1D~~,cAAc,MAAM,YAAY;~~MAChC~~,eAAe,MAAM,YAAY;~~KACnC,CAAC~~;~~IACH;~~IAEA,~~UAAU~~,~~gBAAgB~~;~~GAC5B~~;EACF,CAAC;EAED,kBAAkB,QAAQ,QAAQ,WAAW,OAAO;EAEpD,aAAa;GACX,IAAI,kBAAkB,SAAS;IAC7B,kBAAkB,QAAQ,WAAW;IACrC,kBAAkB,UAAU;GAC9B;EACF;CACF,GAAG,CAAC,WAAW,OAAO,CAAC;CAEvB,OAAO;AACT"}
1	+ {"version":3,"file":"use-dimensions.mjs","names":[],"sources":["../../../src/components/OverflowList/use-dimensions.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\ninterface ResizeObserverDimensions {\n width: number;\n height: number;\n contentWidth: number;\n contentHeight: number;\n}\nexport function useDimensions<T extends HTMLElement \| null>(\n elementRef: React.RefObject<T>\n): ResizeObserverDimensions \| null {\n const resizeObserverRef = useRef<ResizeObserver \| null>(null);\n const [dimensions, setDimensions] = useState<ResizeObserverDimensions \| null>(null);\n\n useEffect(() => {\n if (!elementRef.current) {\n return;\n }\n\n // The observer watches the same element that the measuring cycle resizes.\n // Updating dimensions synchronously inside the callback resizes an element\n // whose notification is being delivered, which browsers report as\n // \"ResizeObserver loop completed with undelivered notifications\"\n // (a window `error` event). Defer the update to the next frame instead.\n let frame = 0;\n\n resizeObserverRef.current = new ResizeObserver((entries) => {\n if (entries[0]) {\n const entry = entries[0];\n const nextDimensions = {\n width: entry.borderBoxSize[0]?.inlineSize ?? entry.target.clientWidth,\n height: entry.borderBoxSize[0]?.blockSize ?? entry.target.clientHeight,\n contentWidth: entry.contentRect.width,\n contentHeight: entry.contentRect.height,\n };\n\n cancelAnimationFrame(frame);\n frame = requestAnimationFrame(() => setDimensions(nextDimensions));\n }\n });\n\n resizeObserverRef.current.observe(elementRef.current);\n\n return () => {\n cancelAnimationFrame(frame);\n if (resizeObserverRef.current) {\n resizeObserverRef.current.disconnect();\n resizeObserverRef.current = null;\n }\n };\n }, [elementRef.current]);\n\n return dimensions;\n}\n"],"mappings":";;;AAQA,SAAgB,cACd,YACiC;CACjC,MAAM,oBAAoB,OAA8B,IAAI;CAC5D,MAAM,CAAC,YAAY,iBAAiB,SAA0C,IAAI;CAElF,gBAAgB;EACd,IAAI,CAAC,WAAW,SACd;EAQF,IAAI,QAAQ;EAEZ,kBAAkB,UAAU,IAAI,gBAAgB,YAAY;GAC1D,IAAI,QAAQ,IAAI;IACd,MAAM,QAAQ,QAAQ;IACtB,MAAM,iBAAiB;KACrB,OAAO,MAAM,cAAc,EAAE,EAAE,cAAc,MAAM,OAAO;KAC1D,QAAQ,MAAM,cAAc,EAAE,EAAE,aAAa,MAAM,OAAO;KAC1D,cAAc,MAAM,YAAY;KAChC,eAAe,MAAM,YAAY;IACnC;IAEA,qBAAqB,KAAK;IAC1B,QAAQ,4BAA4B,cAAc,cAAc,CAAC;GACnE;EACF,CAAC;EAED,kBAAkB,QAAQ,QAAQ,WAAW,OAAO;EAEpD,aAAa;GACX,qBAAqB,KAAK;GAC1B,IAAI,kBAAkB,SAAS;IAC7B,kBAAkB,QAAQ,WAAW;IACrC,kBAAkB,UAAU;GAC9B;EACF;CACF,GAAG,CAAC,WAAW,OAAO,CAAC;CAEvB,OAAO;AACT"}

package/esm/components/Popover/use-popover.mjs CHANGED Viewed

@@ -70,6 +70,7 @@ function usePopover(options) {
 		onChange: options.onChange
 	});
 	const previouslyOpened = useRef(_opened);
+	const measuredAfterShowRef = useRef(false);
 	const [lockedPlacement, setLockedPlacement] = useState(null);
 	const lockEnabled = options.preventPositionChangeWhenVisible !== false;
 	const wasOpenedRef = useRef(_opened);
@@ -77,6 +78,12 @@ function usePopover(options) {
 		wasOpenedRef.current = _opened;
 		if (_opened && lockedPlacement !== null) setLockedPlacement(null);
 	}
+	const previousPositionRef = useRef(options.position);
+	if (options.position !== previousPositionRef.current) {
+		previousPositionRef.current = options.position;
+		measuredAfterShowRef.current = false;
+		if (lockedPlacement !== null) setLockedPlacement(null);
+	}
 	const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);
 	const onClose = () => {
 		if (_opened && !options.disabled) setOpened(false);
@@ -103,7 +110,6 @@ function usePopover(options) {
 		floating.elements.reference,
 		floating.elements.floating
 	]);
-	const measuredAfterShowRef = useRef(false);
 	useIsomorphicEffect(() => {
 		if (!_opened) {
 			measuredAfterShowRef.current = false;

package/esm/components/Popover/use-popover.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-popover.mjs","names":[],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n hide,\n inline,\n limitShift,\n Middleware,\n offset,\n shift,\n size,\n useFloating,\n UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n offset: number \| FloatingAxesOffsets;\n position: FloatingPosition;\n onPositionChange?: (position: FloatingPosition) => void;\n opened: boolean \| undefined;\n defaultOpened: boolean \| undefined;\n onChange?: (opened: boolean) => void;\n onClose?: () => void;\n onDismiss?: () => void;\n onOpen?: () => void;\n width: PopoverWidth;\n middlewares: PopoverMiddlewares \| undefined;\n arrowRef: React.RefObject<HTMLDivElement \| null>;\n arrowOffset: number;\n strategy?: FloatingStrategy;\n disabled: boolean \| undefined;\n preventPositionChangeWhenVisible: boolean \| undefined;\n keepMounted: boolean \| undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares \| undefined): PopoverMiddlewares {\n if (middlewares === undefined) {\n return { shift: true, flip: true };\n }\n\n const result = { ...middlewares };\n if (middlewares.shift === undefined) {\n result.shift = true;\n }\n\n if (middlewares.flip === undefined) {\n result.flip = true;\n }\n\n return result;\n}\n\nfunction getPopoverMiddlewares(\n options: UsePopoverOptions,\n getFloating: () => UseFloatingReturn<Element>,\n disableFlip: boolean,\n lockEnabled: boolean\n) {\n const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n if (middlewaresOptions.flip && !disableFlip) {\n const userFlip = typeof middlewaresOptions.flip === 'boolean' ? {} : middlewaresOptions.flip;\n const flipOptions = lockEnabled\n ? { fallbackStrategy: 'initialPlacement' as const, ...userFlip }\n : userFlip;\n middlewares.push(flip(flipOptions));\n }\n\n if (middlewaresOptions.shift) {\n const shiftOptions =\n typeof middlewaresOptions.shift === 'boolean' ? {} : middlewaresOptions.shift;\n middlewares.push(\n shift((state) => {\n const isVerticalPlacement =\n state.placement.startsWith('top') \|\| state.placement.startsWith('bottom');\n return {\n limiter: limitShift(),\n padding: 5,\n ...(options.width === 'target' && isVerticalPlacement ? { mainAxis: false } : null),\n ...shiftOptions,\n };\n })\n );\n }\n\n if (middlewaresOptions.inline) {\n middlewares.push(\n typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n );\n }\n\n middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n if (middlewaresOptions.size \|\| options.width === 'target') {\n middlewares.push(\n size({\n ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n apply({ rects, availableWidth, availableHeight, ...rest }) {\n const floating = getFloating();\n const styles = floating.refs.floating.current?.style ?? {};\n\n if (middlewaresOptions.size) {\n // If custom apply function is given use that else set defaults\n if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n } else {\n Object.assign(styles, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n }\n\n if (options.width === 'target') {\n Object.assign(styles, {\n width: `${rects.reference.width}px`,\n });\n }\n },\n })\n );\n }\n\n return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n const [_opened, setOpened] = useUncontrolled({\n value: options.opened,\n defaultValue: options.defaultOpened,\n finalValue: false,\n onChange: options.onChange,\n });\n\n const previouslyOpened = useRef(_opened);\n\n const [lockedPlacement, setLockedPlacement] = useState<FloatingPosition \| null>(null);\n const lockEnabled = options.preventPositionChangeWhenVisible !== false;\n\n const wasOpenedRef = useRef(_opened);\n if (_opened !== wasOpenedRef.current) {\n wasOpenedRef.current = _opened;\n if (_opened && lockedPlacement !== null) {\n setLockedPlacement(null);\n }\n }\n\n const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);\n\n const onClose = () => {\n if (_opened && !options.disabled) {\n setOpened(false);\n }\n };\n\n const onToggle = () => {\n if (!options.disabled) {\n setOpened(!_opened);\n }\n };\n\n const floating: UseFloatingReturn<Element> = useFloating({\n open: _opened,\n strategy: options.strategy,\n placement: lockEnabled ? (lockedPlacement ?? options.position) : options.position,\n middleware: getPopoverMiddlewares(\n options,\n () => floating,\n lockEnabled && lockedPlacement !== null,\n lockEnabled\n ),\n whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n });\n\n useEffect(() => {\n if (!options.keepMounted) {\n return undefined;\n }\n\n const referenceElement = floating.refs.reference.current;\n const floatingElement = floating.refs.floating.current;\n\n if (_opened && referenceElement && floatingElement) {\n return autoUpdate(referenceElement, floatingElement, floating.update);\n }\n\n return undefined;\n }, [\n options.keepMounted,\n _opened,\n floating.update,\n floating.elements.reference,\n floating.elements.floating,\n ]);\n\n const measuredAfterShowRef = useRef(false);\n\n useIsomorphicEffect(() => {\n if (!_opened) {\n measuredAfterShowRef.current = false;\n return;\n }\n\n if (!lockEnabled \|\| lockedPlacement !== null) {\n return;\n }\n\n const flEl = floating.refs.floating.current as HTMLElement \| null;\n if (!flEl \|\| flEl.offsetHeight === 0 \|\| flEl.offsetWidth === 0) {\n return;\n }\n\n if (!measuredAfterShowRef.current) {\n measuredAfterShowRef.current = true;\n floating.update();\n return;\n }\n\n if (floating.isPositioned) {\n setLockedPlacement(floating.placement);\n }\n }, [\n lockEnabled,\n _opened,\n floating.isPositioned,\n floating.placement,\n lockedPlacement,\n floating.update,\n ]);\n\n const previousPlacementRef = useRef(floating.placement);\n useIsomorphicEffect(() => {\n if (previousPlacementRef.current !== floating.placement) {\n previousPlacementRef.current = floating.placement;\n options.onPositionChange?.(floating.placement);\n }\n }, [floating.placement]);\n\n useDidUpdate(() => {\n if (_opened !== previouslyOpened.current) {\n if (!_opened) {\n options.onClose?.();\n } else {\n options.onOpen?.();\n }\n }\n\n previouslyOpened.current = _opened;\n }, [_opened, options.onClose, options.onOpen]);\n\n return {\n floating,\n controlled: typeof options.opened === 'boolean',\n opened: _opened,\n onClose,\n onToggle,\n resetLockedPlacement,\n };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-popover.mjs","names":[],"sources":["../../../src/components/Popover/use-popover.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n hide,\n inline,\n limitShift,\n Middleware,\n offset,\n shift,\n size,\n useFloating,\n UseFloatingReturn,\n} from '@floating-ui/react';\nimport { useDidUpdate, useIsomorphicEffect, useUncontrolled } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\n\ninterface UsePopoverOptions {\n offset: number \| FloatingAxesOffsets;\n position: FloatingPosition;\n onPositionChange?: (position: FloatingPosition) => void;\n opened: boolean \| undefined;\n defaultOpened: boolean \| undefined;\n onChange?: (opened: boolean) => void;\n onClose?: () => void;\n onDismiss?: () => void;\n onOpen?: () => void;\n width: PopoverWidth;\n middlewares: PopoverMiddlewares \| undefined;\n arrowRef: React.RefObject<HTMLDivElement \| null>;\n arrowOffset: number;\n strategy?: FloatingStrategy;\n disabled: boolean \| undefined;\n preventPositionChangeWhenVisible: boolean \| undefined;\n keepMounted: boolean \| undefined;\n}\n\nfunction getDefaultMiddlewares(middlewares: PopoverMiddlewares \| undefined): PopoverMiddlewares {\n if (middlewares === undefined) {\n return { shift: true, flip: true };\n }\n\n const result = { ...middlewares };\n if (middlewares.shift === undefined) {\n result.shift = true;\n }\n\n if (middlewares.flip === undefined) {\n result.flip = true;\n }\n\n return result;\n}\n\nfunction getPopoverMiddlewares(\n options: UsePopoverOptions,\n getFloating: () => UseFloatingReturn<Element>,\n disableFlip: boolean,\n lockEnabled: boolean\n) {\n const middlewaresOptions = getDefaultMiddlewares(options.middlewares);\n const middlewares: Middleware[] = [offset(options.offset), hide()];\n\n if (middlewaresOptions.flip && !disableFlip) {\n const userFlip = typeof middlewaresOptions.flip === 'boolean' ? {} : middlewaresOptions.flip;\n const flipOptions = lockEnabled\n ? { fallbackStrategy: 'initialPlacement' as const, ...userFlip }\n : userFlip;\n middlewares.push(flip(flipOptions));\n }\n\n if (middlewaresOptions.shift) {\n const shiftOptions =\n typeof middlewaresOptions.shift === 'boolean' ? {} : middlewaresOptions.shift;\n middlewares.push(\n shift((state) => {\n const isVerticalPlacement =\n state.placement.startsWith('top') \|\| state.placement.startsWith('bottom');\n return {\n limiter: limitShift(),\n padding: 5,\n ...(options.width === 'target' && isVerticalPlacement ? { mainAxis: false } : null),\n ...shiftOptions,\n };\n })\n );\n }\n\n if (middlewaresOptions.inline) {\n middlewares.push(\n typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n );\n }\n\n middlewares.push(arrow({ element: options.arrowRef, padding: options.arrowOffset }));\n\n if (middlewaresOptions.size \|\| options.width === 'target') {\n middlewares.push(\n size({\n ...(typeof middlewaresOptions.size === 'boolean' ? {} : middlewaresOptions.size),\n apply({ rects, availableWidth, availableHeight, ...rest }) {\n const floating = getFloating();\n const styles = floating.refs.floating.current?.style ?? {};\n\n if (middlewaresOptions.size) {\n // If custom apply function is given use that else set defaults\n if (typeof middlewaresOptions.size === 'object' && !!middlewaresOptions.size.apply) {\n middlewaresOptions.size.apply({ rects, availableWidth, availableHeight, ...rest });\n } else {\n Object.assign(styles, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n }\n\n if (options.width === 'target') {\n Object.assign(styles, {\n width: `${rects.reference.width}px`,\n });\n }\n },\n })\n );\n }\n\n return middlewares;\n}\n\nexport function usePopover(options: UsePopoverOptions) {\n const [_opened, setOpened] = useUncontrolled({\n value: options.opened,\n defaultValue: options.defaultOpened,\n finalValue: false,\n onChange: options.onChange,\n });\n\n const previouslyOpened = useRef(_opened);\n\n const measuredAfterShowRef = useRef(false);\n const [lockedPlacement, setLockedPlacement] = useState<FloatingPosition \| null>(null);\n const lockEnabled = options.preventPositionChangeWhenVisible !== false;\n\n const wasOpenedRef = useRef(_opened);\n if (_opened !== wasOpenedRef.current) {\n wasOpenedRef.current = _opened;\n if (_opened && lockedPlacement !== null) {\n setLockedPlacement(null);\n }\n }\n\n const previousPositionRef = useRef(options.position);\n if (options.position !== previousPositionRef.current) {\n previousPositionRef.current = options.position;\n measuredAfterShowRef.current = false;\n if (lockedPlacement !== null) {\n setLockedPlacement(null);\n }\n }\n\n const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);\n\n const onClose = () => {\n if (_opened && !options.disabled) {\n setOpened(false);\n }\n };\n\n const onToggle = () => {\n if (!options.disabled) {\n setOpened(!_opened);\n }\n };\n\n const floating: UseFloatingReturn<Element> = useFloating({\n open: _opened,\n strategy: options.strategy,\n placement: lockEnabled ? (lockedPlacement ?? options.position) : options.position,\n middleware: getPopoverMiddlewares(\n options,\n () => floating,\n lockEnabled && lockedPlacement !== null,\n lockEnabled\n ),\n whileElementsMounted: !options.keepMounted ? autoUpdate : undefined,\n });\n\n useEffect(() => {\n if (!options.keepMounted) {\n return undefined;\n }\n\n const referenceElement = floating.refs.reference.current;\n const floatingElement = floating.refs.floating.current;\n\n if (_opened && referenceElement && floatingElement) {\n return autoUpdate(referenceElement, floatingElement, floating.update);\n }\n\n return undefined;\n }, [\n options.keepMounted,\n _opened,\n floating.update,\n floating.elements.reference,\n floating.elements.floating,\n ]);\n\n useIsomorphicEffect(() => {\n if (!_opened) {\n measuredAfterShowRef.current = false;\n return;\n }\n\n if (!lockEnabled \|\| lockedPlacement !== null) {\n return;\n }\n\n const flEl = floating.refs.floating.current as HTMLElement \| null;\n if (!flEl \|\| flEl.offsetHeight === 0 \|\| flEl.offsetWidth === 0) {\n return;\n }\n\n if (!measuredAfterShowRef.current) {\n measuredAfterShowRef.current = true;\n floating.update();\n return;\n }\n\n if (floating.isPositioned) {\n setLockedPlacement(floating.placement);\n }\n }, [\n lockEnabled,\n _opened,\n floating.isPositioned,\n floating.placement,\n lockedPlacement,\n floating.update,\n ]);\n\n const previousPlacementRef = useRef(floating.placement);\n useIsomorphicEffect(() => {\n if (previousPlacementRef.current !== floating.placement) {\n previousPlacementRef.current = floating.placement;\n options.onPositionChange?.(floating.placement);\n }\n }, [floating.placement]);\n\n useDidUpdate(() => {\n if (_opened !== previouslyOpened.current) {\n if (!_opened) {\n options.onClose?.();\n } else {\n options.onOpen?.();\n }\n }\n\n previouslyOpened.current = _opened;\n }, [_opened, options.onClose, options.onOpen]);\n\n return {\n floating,\n controlled: typeof options.opened === 'boolean',\n opened: _opened,\n onClose,\n onToggle,\n resetLockedPlacement,\n };\n}\n"],"mappings":"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"}

package/esm/components/SegmentedControl/SegmentedControl.mjs CHANGED Viewed

@@ -51,8 +51,9 @@ const SegmentedControl = genericFactory((_props) => {
 	const [parent, setParent] = useState(null);
 	const [refs, setRefs] = useState({});
 	const setElementRef = (element, val) => {
+		if (element === null || refs[val] === element) return;
 		refs[val] = element;
-		setRefs(refs);
+		setRefs({ ...refs });
 	};
 	const [_value, handleValueChange] = useUncontrolled({
 		value,
@@ -61,6 +62,7 @@ const SegmentedControl = genericFactory((_props) => {
 		onChange
 	});
 	const uuid = useId$1(name);
+	const dataValues = _data.map((item) => `${item.value}`);
 	const controls = _data.map((item) => /* @__PURE__ */ createElement(Box, {
 		...getStyles("control"),
 		mod: {
@@ -103,6 +105,15 @@ const SegmentedControl = genericFactory((_props) => {
 	useShallowEffect(() => {
 		setKey(randomId());
 	}, [data.length]);
+	useShallowEffect(() => {
+		setRefs((current) => {
+			const next = {};
+			dataValues.forEach((value) => {
+				if (value in current) next[value] = current[value];
+			});
+			return Object.keys(next).length === Object.keys(current).length ? current : next;
+		});
+	}, [dataValues]);
 	if (data.length === 0) return null;
 	return /* @__PURE__ */ jsxs(Box, {
 		...getStyles("root"),