@mantine/core 9.5.0 → 9.5.1-alpha.1

package/cjs/components/FloatingWindow/FloatingWindow.cjs

@@ -24,7 +24,7 @@ function clampDimension(value, min, max) {
 }
 const FloatingWindow = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("FloatingWindow", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, mod, enabled, constrainToViewport, constrainOffset, dragHandleSelector, excludeDragHandleSelector, axis, initialPosition, onPositionChange, onDragStart, onDragEnd, setPositionRef, withinPortal, portalProps, zIndex, dimensions, ref, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, mod, enabled, constrainToViewport, constrainOffset, dragHandleSelector, excludeDragHandleSelector, axis, initialPosition, onPositionChange, onDragStart, onDragEnd, setPositionRef, withinPortal, portalProps, zIndex, dimensions, onSizeChange, onResizeStart, onResizeEnd, ref, ...others } = props;
 	const rootRef = (0, react.useRef)(null);
 	const getStyles = require_use_styles.useStyles({
 		name: "FloatingWindow",
@@ -58,7 +58,10 @@ const FloatingWindow = require_factory.factory((_props) => {
 			rootRef,
 			dimensions,
 			constrainToViewport,
-			constrainOffset
+			constrainOffset,
+			onSizeChange,
+			onResizeStart,
+			onResizeEnd
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OptionalPortal.OptionalPortal, {
 			withinPortal,

package/cjs/components/FloatingWindow/FloatingWindow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingWindow.cjs","names":["getDefaultZIndex","factory","useProps","useStyles","FloatingWindowProvider","OptionalPortal","Paper","classes","FloatingWindowResizeHandle"],"sources":["../../../src/components/FloatingWindow/FloatingWindow.tsx"],"sourcesContent":["import { useImperativeHandle, useRef } from 'react';\nimport {\n  SetFloatingWindowPosition,\n  useFloatingWindow,\n  UseFloatingWindowOptions,\n  useMergedRef,\n} from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { OptionalPortal, PortalProps } from '../Portal';\nimport { FloatingWindowDimensions, FloatingWindowProvider } from './FloatingWindow.context';\nimport { FloatingWindowResizeHandle } from './FloatingWindowResizeHandle';\nimport classes from './FloatingWindow.module.css';\n\nexport type FloatingWindowStylesNames = 'root';\n\nexport interface FloatingWindowProps\n  extends\n    UseFloatingWindowOptions,\n    PaperBaseProps,\n    BoxProps,\n    StylesApiProps<FloatingWindowFactory>,\n    ElementProps<'div', keyof UseFloatingWindowOptions> {\n  /** Assigns ref to set position programmatically */\n  setPositionRef?: React.RefObject<SetFloatingWindowPosition | null>;\n\n  /** Determines whether the window should be rendered inside `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props passed down to `Portal` component */\n  portalProps?: Omit<PortalProps, 'children'>;\n\n  /** `z-index` of the root element @default 400 */\n  zIndex?: React.CSSProperties['zIndex'];\n\n  /** Dimensions configuration for resizable floating window */\n  dimensions?: FloatingWindowDimensions;\n}\n\nexport type FloatingWindowFactory = Factory<{\n  props: FloatingWindowProps;\n  ref: HTMLDivElement;\n  stylesNames: FloatingWindowStylesNames;\n  staticComponents: {\n    ResizeHandle: typeof FloatingWindowResizeHandle;\n  };\n}>;\n\nconst defaultProps = {\n  constrainToViewport: true,\n  zIndex: getDefaultZIndex('overlay'),\n} satisfies Partial<FloatingWindowProps>;\n\nfunction clampDimension(value: number, min?: number, max?: number): number {\n  let v = value;\n  if (min != null) {\n    v = Math.max(v, min);\n  }\n  if (max != null) {\n    v = Math.min(v, max);\n  }\n  return v;\n}\n\nexport const FloatingWindow = factory<FloatingWindowFactory>((_props) => {\n  const props = useProps('FloatingWindow', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    mod,\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n    setPositionRef,\n    withinPortal,\n    portalProps,\n    zIndex,\n    dimensions,\n    ref,\n    ...others\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const getStyles = useStyles<FloatingWindowFactory>({\n    name: 'FloatingWindow',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n  });\n\n  const floatingWindow = useFloatingWindow({\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n  });\n\n  useImperativeHandle(setPositionRef, () => floatingWindow.setPosition, [\n    floatingWindow.setPosition,\n  ]);\n\n  const cssVars: Record<string, string | undefined> = {\n    '--floating-window-z-index': zIndex.toString(),\n  };\n\n  if (dimensions?.initialWidth != null) {\n    cssVars['--floating-window-width'] =\n      `${clampDimension(dimensions.initialWidth, dimensions.minWidth, dimensions.maxWidth)}px`;\n  }\n\n  if (dimensions?.initialHeight != null) {\n    cssVars['--floating-window-height'] =\n      `${clampDimension(dimensions.initialHeight, dimensions.minHeight, dimensions.maxHeight)}px`;\n  }\n\n  return (\n    <FloatingWindowProvider\n      value={{\n        rootRef,\n        dimensions,\n        constrainToViewport,\n        constrainOffset,\n      }}\n    >\n      <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n        <Paper\n          ref={useMergedRef(ref, floatingWindow.ref, rootRef)}\n          mod={[{ dragging: floatingWindow.isDragging }, mod]}\n          {...getStyles('root')}\n          {...others}\n          __vars={cssVars}\n        />\n      </OptionalPortal>\n    </FloatingWindowProvider>\n  );\n});\n\nFloatingWindow.displayName = '@mantine/core/FloatingWindow';\nFloatingWindow.classes = classes;\nFloatingWindow.ResizeHandle = FloatingWindowResizeHandle;\n"],"mappings":";;;;;;;;;;;;;;AAyDA,MAAM,eAAe;CACnB,qBAAqB;CACrB,QAAQA,4BAAAA,iBAAiB,SAAS;AACpC;AAEA,SAAS,eAAe,OAAe,KAAc,KAAsB;CACzE,IAAI,IAAI;CACR,IAAI,OAAO,MACT,IAAI,KAAK,IAAI,GAAG,GAAG;CAErB,IAAI,OAAO,MACT,IAAI,KAAK,IAAI,GAAG,GAAG;CAErB,OAAO;AACT;AAEA,MAAa,iBAAiBC,gBAAAA,SAAgC,WAAW;CACvE,MAAM,QAAQC,kBAAAA,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,SACA,qBACA,iBACA,oBACA,2BACA,MACA,iBACA,kBACA,aACA,WACA,gBACA,cACA,aACA,QACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,WAAA,GAAA,MAAA,OAAA,CAAiC,IAAI;CAE3C,MAAM,YAAYC,mBAAAA,UAAiC;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAA,GAAA,eAAA,kBAAA,CAAmC;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,CAAA,GAAA,MAAA,oBAAA,CAAoB,sBAAsB,eAAe,aAAa,CACpE,eAAe,WACjB,CAAC;CAED,MAAM,UAA8C,EAClD,6BAA6B,OAAO,SAAS,EAC/C;CAEA,IAAI,YAAY,gBAAgB,MAC9B,QAAQ,6BACN,GAAG,eAAe,WAAW,cAAc,WAAW,UAAU,WAAW,QAAQ,EAAE;CAGzF,IAAI,YAAY,iBAAiB,MAC/B,QAAQ,8BACN,GAAG,eAAe,WAAW,eAAe,WAAW,WAAW,WAAW,SAAS,EAAE;CAG5F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD;GAA8B;GAAc,GAAI;aAC9C,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IACE,MAAA,GAAA,eAAA,aAAA,CAAkB,KAAK,eAAe,KAAK,OAAO;IAClD,KAAK,CAAC,EAAE,UAAU,eAAe,WAAW,GAAG,GAAG;IAClD,GAAI,UAAU,MAAM;IACpB,GAAI;IACJ,QAAQ;GACT,CAAA;EACa,CAAA;CACM,CAAA;AAE5B,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUC,8BAAAA;AACzB,eAAe,eAAeC,mCAAAA"}
+{"version":3,"file":"FloatingWindow.cjs","names":["getDefaultZIndex","factory","useProps","useStyles","FloatingWindowProvider","OptionalPortal","Paper","classes","FloatingWindowResizeHandle"],"sources":["../../../src/components/FloatingWindow/FloatingWindow.tsx"],"sourcesContent":["import { useImperativeHandle, useRef } from 'react';\nimport {\n  SetFloatingWindowPosition,\n  useFloatingWindow,\n  UseFloatingWindowOptions,\n  useMergedRef,\n} from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { OptionalPortal, PortalProps } from '../Portal';\nimport {\n  FloatingWindowDimensions,\n  FloatingWindowProvider,\n  FloatingWindowSize,\n} from './FloatingWindow.context';\nimport { FloatingWindowResizeHandle } from './FloatingWindowResizeHandle';\nimport classes from './FloatingWindow.module.css';\n\nexport type FloatingWindowStylesNames = 'root';\n\nexport interface FloatingWindowProps\n  extends\n    UseFloatingWindowOptions,\n    PaperBaseProps,\n    BoxProps,\n    StylesApiProps<FloatingWindowFactory>,\n    ElementProps<'div', keyof UseFloatingWindowOptions> {\n  /** Assigns ref to set position programmatically */\n  setPositionRef?: React.RefObject<SetFloatingWindowPosition | null>;\n\n  /** Determines whether the window should be rendered inside `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props passed down to `Portal` component */\n  portalProps?: Omit<PortalProps, 'children'>;\n\n  /** `z-index` of the root element @default 400 */\n  zIndex?: React.CSSProperties['zIndex'];\n\n  /** Dimensions configuration for resizable floating window */\n  dimensions?: FloatingWindowDimensions;\n\n  /** Called when the window is resized with `FloatingWindow.ResizeHandle` */\n  onSizeChange?: (size: FloatingWindowSize) => void;\n\n  /** Called when the resize with `FloatingWindow.ResizeHandle` starts. Not called for keyboard resize. */\n  onResizeStart?: () => void;\n\n  /** Called when the resize with `FloatingWindow.ResizeHandle` stops. Not called for keyboard resize. */\n  onResizeEnd?: () => void;\n}\n\nexport type FloatingWindowFactory = Factory<{\n  props: FloatingWindowProps;\n  ref: HTMLDivElement;\n  stylesNames: FloatingWindowStylesNames;\n  staticComponents: {\n    ResizeHandle: typeof FloatingWindowResizeHandle;\n  };\n}>;\n\nconst defaultProps = {\n  constrainToViewport: true,\n  zIndex: getDefaultZIndex('overlay'),\n} satisfies Partial<FloatingWindowProps>;\n\nfunction clampDimension(value: number, min?: number, max?: number): number {\n  let v = value;\n  if (min != null) {\n    v = Math.max(v, min);\n  }\n  if (max != null) {\n    v = Math.min(v, max);\n  }\n  return v;\n}\n\nexport const FloatingWindow = factory<FloatingWindowFactory>((_props) => {\n  const props = useProps('FloatingWindow', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    mod,\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n    setPositionRef,\n    withinPortal,\n    portalProps,\n    zIndex,\n    dimensions,\n    onSizeChange,\n    onResizeStart,\n    onResizeEnd,\n    ref,\n    ...others\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const getStyles = useStyles<FloatingWindowFactory>({\n    name: 'FloatingWindow',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n  });\n\n  const floatingWindow = useFloatingWindow({\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n  });\n\n  useImperativeHandle(setPositionRef, () => floatingWindow.setPosition, [\n    floatingWindow.setPosition,\n  ]);\n\n  const cssVars: Record<string, string | undefined> = {\n    '--floating-window-z-index': zIndex.toString(),\n  };\n\n  if (dimensions?.initialWidth != null) {\n    cssVars['--floating-window-width'] =\n      `${clampDimension(dimensions.initialWidth, dimensions.minWidth, dimensions.maxWidth)}px`;\n  }\n\n  if (dimensions?.initialHeight != null) {\n    cssVars['--floating-window-height'] =\n      `${clampDimension(dimensions.initialHeight, dimensions.minHeight, dimensions.maxHeight)}px`;\n  }\n\n  return (\n    <FloatingWindowProvider\n      value={{\n        rootRef,\n        dimensions,\n        constrainToViewport,\n        constrainOffset,\n        onSizeChange,\n        onResizeStart,\n        onResizeEnd,\n      }}\n    >\n      <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n        <Paper\n          ref={useMergedRef(ref, floatingWindow.ref, rootRef)}\n          mod={[{ dragging: floatingWindow.isDragging }, mod]}\n          {...getStyles('root')}\n          {...others}\n          __vars={cssVars}\n        />\n      </OptionalPortal>\n    </FloatingWindowProvider>\n  );\n});\n\nFloatingWindow.displayName = '@mantine/core/FloatingWindow';\nFloatingWindow.classes = classes;\nFloatingWindow.ResizeHandle = FloatingWindowResizeHandle;\n"],"mappings":";;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,qBAAqB;CACrB,QAAQA,4BAAAA,iBAAiB,SAAS;AACpC;AAEA,SAAS,eAAe,OAAe,KAAc,KAAsB;CACzE,IAAI,IAAI;CACR,IAAI,OAAO,MACT,IAAI,KAAK,IAAI,GAAG,GAAG;CAErB,IAAI,OAAO,MACT,IAAI,KAAK,IAAI,GAAG,GAAG;CAErB,OAAO;AACT;AAEA,MAAa,iBAAiBC,gBAAAA,SAAgC,WAAW;CACvE,MAAM,QAAQC,kBAAAA,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,SACA,qBACA,iBACA,oBACA,2BACA,MACA,iBACA,kBACA,aACA,WACA,gBACA,cACA,aACA,QACA,YACA,cACA,eACA,aACA,KACA,GAAG,WACD;CAEJ,MAAM,WAAA,GAAA,MAAA,OAAA,CAAiC,IAAI;CAE3C,MAAM,YAAYC,mBAAAA,UAAiC;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAA,GAAA,eAAA,kBAAA,CAAmC;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,CAAA,GAAA,MAAA,oBAAA,CAAoB,sBAAsB,eAAe,aAAa,CACpE,eAAe,WACjB,CAAC;CAED,MAAM,UAA8C,EAClD,6BAA6B,OAAO,SAAS,EAC/C;CAEA,IAAI,YAAY,gBAAgB,MAC9B,QAAQ,6BACN,GAAG,eAAe,WAAW,cAAc,WAAW,UAAU,WAAW,QAAQ,EAAE;CAGzF,IAAI,YAAY,iBAAiB,MAC/B,QAAQ,8BACN,GAAG,eAAe,WAAW,eAAe,WAAW,WAAW,WAAW,SAAS,EAAE;CAG5F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,+BAAAA,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD;GAA8B;GAAc,GAAI;aAC9C,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IACE,MAAA,GAAA,eAAA,aAAA,CAAkB,KAAK,eAAe,KAAK,OAAO;IAClD,KAAK,CAAC,EAAE,UAAU,eAAe,WAAW,GAAG,GAAG;IAClD,GAAI,UAAU,MAAM;IACpB,GAAI;IACJ,QAAQ;GACT,CAAA;EACa,CAAA;CACM,CAAA;AAE5B,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUC,8BAAAA;AACzB,eAAe,eAAeC,mCAAAA"}

package/cjs/components/FloatingWindow/FloatingWindow.context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingWindow.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/FloatingWindow/FloatingWindow.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface FloatingWindowDimensions {\n  /** Initial width of the floating window in px */\n  initialWidth?: number;\n\n  /** Minimum width of the floating window in px */\n  minWidth?: number;\n\n  /** Maximum width of the floating window in px */\n  maxWidth?: number;\n\n  /** Initial height of the floating window in px */\n  initialHeight?: number;\n\n  /** Minimum height of the floating window in px */\n  minHeight?: number;\n\n  /** Maximum height of the floating window in px */\n  maxHeight?: number;\n}\n\nexport interface FloatingWindowContextValue {\n  rootRef: React.RefObject<HTMLDivElement | null>;\n  dimensions: FloatingWindowDimensions | undefined;\n  constrainToViewport: boolean | undefined;\n  constrainOffset: number | undefined;\n}\n\nexport const [FloatingWindowProvider, useFloatingWindowContext] =\n  createSafeContext<FloatingWindowContextValue>(\n    'FloatingWindow.ResizeHandle must be used within FloatingWindow'\n  );\n"],"mappings":";;AA6BA,MAAa,CAAC,wBAAwB,kGACpCA,CAAAA,CAAAA,kBACE,gEACF"}
+{"version":3,"file":"FloatingWindow.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/FloatingWindow/FloatingWindow.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface FloatingWindowDimensions {\n  /** Initial width of the floating window in px */\n  initialWidth?: number;\n\n  /** Minimum width of the floating window in px */\n  minWidth?: number;\n\n  /** Maximum width of the floating window in px */\n  maxWidth?: number;\n\n  /** Initial height of the floating window in px */\n  initialHeight?: number;\n\n  /** Minimum height of the floating window in px */\n  minHeight?: number;\n\n  /** Maximum height of the floating window in px */\n  maxHeight?: number;\n}\n\nexport interface FloatingWindowSize {\n  /** Width of the floating window in px */\n  width: number;\n\n  /** Height of the floating window in px */\n  height: number;\n}\n\nexport interface FloatingWindowContextValue {\n  rootRef: React.RefObject<HTMLDivElement | null>;\n  dimensions: FloatingWindowDimensions | undefined;\n  constrainToViewport: boolean | undefined;\n  constrainOffset: number | undefined;\n  onResizeStart: (() => void) | undefined;\n  onResizeEnd: (() => void) | undefined;\n  onSizeChange: ((size: FloatingWindowSize) => void) | undefined;\n}\n\nexport const [FloatingWindowProvider, useFloatingWindowContext] =\n  createSafeContext<FloatingWindowContextValue>(\n    'FloatingWindow.ResizeHandle must be used within FloatingWindow'\n  );\n"],"mappings":";;AAwCA,MAAa,CAAC,wBAAwB,kGACpCA,CAAAA,CAAAA,kBACE,gEACF"}

package/cjs/components/FloatingWindow/FloatingWindowResizeHandle.cjs

@@ -16,30 +16,24 @@ function clampDimension(value, min, max, viewportMax) {
 	if (viewportMax != null) v = Math.min(v, viewportMax);
 	return v;
 }
-function getViewportLimits(root, constrainToViewport, constrainOffset) {
+function getViewportLimits(rect, constrainToViewport, constrainOffset) {
 	if (!constrainToViewport) return {
 		maxWidth: void 0,
 		maxHeight: void 0
 	};
-	const rect = root.getBoundingClientRect();
 	const offset = constrainOffset ?? 0;
 	return {
 		maxWidth: window.innerWidth - rect.left - offset,
 		maxHeight: window.innerHeight - rect.top - offset
 	};
 }
-function constrainWidth(root, width, dimensions, constrainToViewport, constrainOffset) {
-	const { maxWidth: vpMax } = getViewportLimits(root, constrainToViewport, constrainOffset);
-	return clampDimension(width, dimensions?.minWidth, dimensions?.maxWidth, vpMax);
-}
-function constrainHeight(root, height, dimensions, constrainToViewport, constrainOffset) {
-	const { maxHeight: vpMax } = getViewportLimits(root, constrainToViewport, constrainOffset);
-	return clampDimension(height, dimensions?.minHeight, dimensions?.maxHeight, vpMax);
-}
 const FloatingWindowResizeHandle = require_factory.factory((_props) => {
 	const { children, ref, style, ...others } = require_use_props.useProps("FloatingWindowResizeHandle", defaultProps, _props);
 	const ctx = require_FloatingWindow_context.useFloatingWindowContext();
 	const handleRef = (0, react.useRef)(null);
+	const ctxRef = (0, react.useRef)(ctx);
+	ctxRef.current = ctx;
+	const valueNowRef = (0, react.useRef)(null);
 	const hasWidth = ctx.dimensions?.initialWidth != null || ctx.dimensions?.minWidth != null || ctx.dimensions?.maxWidth != null;
 	const hasHeight = ctx.dimensions?.initialHeight != null || ctx.dimensions?.minHeight != null || ctx.dimensions?.maxHeight != null;
 	(0, react.useEffect)(() => {
@@ -53,23 +47,35 @@ const FloatingWindowResizeHandle = require_factory.factory((_props) => {
 		let startWidth = 0;
 		let startHeight = 0;
 		const applySize = (width, height) => {
-			const root = ctx.rootRef.current;
+			if (width === null && height === null) return;
+			const { dimensions, constrainToViewport, constrainOffset, onSizeChange } = ctxRef.current;
+			const root = ctxRef.current.rootRef.current;
 			if (!root) return;
+			const viewportLimits = getViewportLimits(root.getBoundingClientRect(), constrainToViewport, constrainOffset);
 			if (width !== null) {
-				const w = constrainWidth(root, width, ctx.dimensions, ctx.constrainToViewport, ctx.constrainOffset);
-				root.style.width = `${w}px`;
-				handle.setAttribute("aria-valuenow", String(Math.round(w)));
+				const nextWidth = clampDimension(width, dimensions?.minWidth, dimensions?.maxWidth, viewportLimits.maxWidth);
+				root.style.width = `${nextWidth}px`;
 			}
 			if (height !== null) {
-				const h = constrainHeight(root, height, ctx.dimensions, ctx.constrainToViewport, ctx.constrainOffset);
-				root.style.height = `${h}px`;
+				const nextHeight = clampDimension(height, dimensions?.minHeight, dimensions?.maxHeight, viewportLimits.maxHeight);
+				root.style.height = `${nextHeight}px`;
+			}
+			const resizedRect = root.getBoundingClientRect();
+			if (width !== null) {
+				valueNowRef.current = resizedRect.width;
+				handle.setAttribute("aria-valuenow", String(Math.round(resizedRect.width)));
 			}
+			onSizeChange?.({
+				width: resizedRect.width,
+				height: resizedRect.height
+			});
 		};
 		const onStart = (e) => {
 			if ("button" in e && e.button !== 0) return;
 			e.stopPropagation();
 			e.preventDefault();
-			const root = ctx.rootRef.current;
+			if (!hasWidth && !hasHeight) return;
+			const root = ctxRef.current.rootRef.current;
 			if (!root) return;
 			const point = "touches" in e ? e.touches[0] : e;
 			startX = point.clientX;
@@ -80,6 +86,7 @@ const FloatingWindowResizeHandle = require_factory.factory((_props) => {
 			isResizing = true;
 			document.body.style.userSelect = "none";
 			document.body.style.webkitUserSelect = "none";
+			ctxRef.current.onResizeStart?.();
 			document.addEventListener("mousemove", onMove, { signal });
 			document.addEventListener("mouseup", onEnd, { signal });
 			document.addEventListener("touchmove", onMove, {
@@ -87,6 +94,7 @@ const FloatingWindowResizeHandle = require_factory.factory((_props) => {
 				passive: false
 			});
 			document.addEventListener("touchend", onEnd, { signal });
+			document.addEventListener("touchcancel", onEnd, { signal });
 		};
 		const onMove = (e) => {
 			if (!isResizing) return;
@@ -101,9 +109,11 @@ const FloatingWindowResizeHandle = require_factory.factory((_props) => {
 			isResizing = false;
 			document.body.style.userSelect = "";
 			document.body.style.webkitUserSelect = "";
+			ctxRef.current.onResizeEnd?.();
 		};
 		const onKeyDown = (e) => {
-			const root = ctx.rootRef.current;
+			const { dimensions } = ctxRef.current;
+			const root = ctxRef.current.rootRef.current;
 			if (!root) return;
 			const rect = root.getBoundingClientRect();
 			let newWidth = null;
@@ -113,11 +123,11 @@ const FloatingWindowResizeHandle = require_factory.factory((_props) => {
 			else if (e.key === "ArrowDown" && hasHeight) newHeight = rect.height + KEYBOARD_STEP;
 			else if (e.key === "ArrowUp" && hasHeight) newHeight = rect.height - KEYBOARD_STEP;
 			else if (e.key === "Home") {
-				if (hasWidth) newWidth = ctx.dimensions?.minWidth ?? rect.width;
-				if (hasHeight) newHeight = ctx.dimensions?.minHeight ?? rect.height;
+				if (hasWidth) newWidth = dimensions?.minWidth ?? rect.width;
+				if (hasHeight) newHeight = dimensions?.minHeight ?? rect.height;
 			} else if (e.key === "End") {
-				if (hasWidth) newWidth = ctx.dimensions?.maxWidth ?? rect.width;
-				if (hasHeight) newHeight = ctx.dimensions?.maxHeight ?? rect.height;
+				if (hasWidth) newWidth = dimensions?.maxWidth ?? rect.width;
+				if (hasHeight) newHeight = dimensions?.maxHeight ?? rect.height;
 			}
 			if (newWidth !== null || newHeight !== null) {
 				e.preventDefault();
@@ -131,21 +141,36 @@ const FloatingWindowResizeHandle = require_factory.factory((_props) => {
 		});
 		handle.addEventListener("keydown", onKeyDown, { signal });
 		return () => {
+			onEnd();
 			controller.abort();
 		};
+	}, [hasWidth, hasHeight]);
+	(0, react.useEffect)(() => {
+		const handle = handleRef.current;
+		if (!handle) return;
+		if (!hasWidth) {
+			valueNowRef.current = null;
+			handle.removeAttribute("aria-valuenow");
+			return;
+		}
+		if (valueNowRef.current !== null) return;
+		const initialWidth = ctx.dimensions?.initialWidth;
+		if (initialWidth == null) {
+			handle.removeAttribute("aria-valuenow");
+			return;
+		}
+		const width = clampDimension(initialWidth, ctx.dimensions?.minWidth, ctx.dimensions?.maxWidth, void 0);
+		handle.setAttribute("aria-valuenow", String(Math.round(width)));
 	}, [
-		ctx.rootRef,
-		ctx.dimensions,
-		ctx.constrainToViewport,
-		ctx.constrainOffset,
 		hasWidth,
-		hasHeight
+		ctx.dimensions?.initialWidth,
+		ctx.dimensions?.minWidth,
+		ctx.dimensions?.maxWidth
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		ref: (0, _mantine_hooks.useMergedRef)(ref, handleRef),
 		role: "separator",
 		"aria-label": "Resize window",
-		"aria-valuenow": ctx.dimensions?.initialWidth,
 		"aria-valuemin": ctx.dimensions?.minWidth,
 		"aria-valuemax": ctx.dimensions?.maxWidth,
 		tabIndex: 0,

package/cjs/components/FloatingWindow/FloatingWindowResizeHandle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingWindowResizeHandle.cjs","names":["factory","useProps","useFloatingWindowContext","Box"],"sources":["../../../src/components/FloatingWindow/FloatingWindowResizeHandle.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { useEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { Box, BoxProps, ElementProps, factory, Factory, useProps } from '../../core';\nimport { FloatingWindowDimensions, useFloatingWindowContext } from './FloatingWindow.context';\n\nexport interface FloatingWindowResizeHandleProps extends BoxProps, ElementProps<'div', 'role'> {}\n\nexport type FloatingWindowResizeHandleFactory = Factory<{\n  props: FloatingWindowResizeHandleProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {} satisfies Partial<FloatingWindowResizeHandleProps>;\n\nconst KEYBOARD_STEP = 10;\n\nfunction clampDimension(\n  value: number,\n  min: number | undefined,\n  max: number | undefined,\n  viewportMax: number | undefined\n) {\n  let v = value;\n  if (min != null) {\n    v = Math.max(v, min);\n  }\n  if (max != null) {\n    v = Math.min(v, max);\n  }\n  if (viewportMax != null) {\n    v = Math.min(v, viewportMax);\n  }\n  return v;\n}\n\nfunction getViewportLimits(\n  root: HTMLElement,\n  constrainToViewport: boolean | undefined,\n  constrainOffset: number | undefined\n) {\n  if (!constrainToViewport) {\n    return { maxWidth: undefined, maxHeight: undefined };\n  }\n  const rect = root.getBoundingClientRect();\n  const offset = constrainOffset ?? 0;\n  return {\n    maxWidth: window.innerWidth - rect.left - offset,\n    maxHeight: window.innerHeight - rect.top - offset,\n  };\n}\n\nfunction constrainWidth(\n  root: HTMLElement,\n  width: number,\n  dimensions: FloatingWindowDimensions | undefined,\n  constrainToViewport: boolean | undefined,\n  constrainOffset: number | undefined\n) {\n  const { maxWidth: vpMax } = getViewportLimits(root, constrainToViewport, constrainOffset);\n  return clampDimension(width, dimensions?.minWidth, dimensions?.maxWidth, vpMax);\n}\n\nfunction constrainHeight(\n  root: HTMLElement,\n  height: number,\n  dimensions: FloatingWindowDimensions | undefined,\n  constrainToViewport: boolean | undefined,\n  constrainOffset: number | undefined\n) {\n  const { maxHeight: vpMax } = getViewportLimits(root, constrainToViewport, constrainOffset);\n  return clampDimension(height, dimensions?.minHeight, dimensions?.maxHeight, vpMax);\n}\n\nexport const FloatingWindowResizeHandle = factory<FloatingWindowResizeHandleFactory>((_props) => {\n  const props = useProps('FloatingWindowResizeHandle', defaultProps, _props);\n  const { children, ref, style, ...others } = props;\n  const ctx = useFloatingWindowContext();\n  const handleRef = useRef<HTMLDivElement>(null);\n\n  const hasWidth =\n    ctx.dimensions?.initialWidth != null ||\n    ctx.dimensions?.minWidth != null ||\n    ctx.dimensions?.maxWidth != null;\n  const hasHeight =\n    ctx.dimensions?.initialHeight != null ||\n    ctx.dimensions?.minHeight != null ||\n    ctx.dimensions?.maxHeight != null;\n\n  useEffect(() => {\n    const handle = handleRef.current;\n    if (!handle) {\n      return;\n    }\n\n    const controller = new AbortController();\n    const { signal } = controller;\n    let isResizing = false;\n    let startX = 0;\n    let startY = 0;\n    let startWidth = 0;\n    let startHeight = 0;\n\n    const applySize = (width: number | null, height: number | null) => {\n      const root = ctx.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      if (width !== null) {\n        const w = constrainWidth(\n          root,\n          width,\n          ctx.dimensions,\n          ctx.constrainToViewport,\n          ctx.constrainOffset\n        );\n        root.style.width = `${w}px`;\n        handle.setAttribute('aria-valuenow', String(Math.round(w)));\n      }\n\n      if (height !== null) {\n        const h = constrainHeight(\n          root,\n          height,\n          ctx.dimensions,\n          ctx.constrainToViewport,\n          ctx.constrainOffset\n        );\n        root.style.height = `${h}px`;\n      }\n    };\n\n    const onStart = (e: MouseEvent | TouchEvent) => {\n      if ('button' in e && e.button !== 0) {\n        return;\n      }\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      const root = ctx.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const point = 'touches' in e ? e.touches[0] : e;\n      startX = point.clientX;\n      startY = point.clientY;\n      const rect = root.getBoundingClientRect();\n      startWidth = rect.width;\n      startHeight = rect.height;\n      isResizing = true;\n\n      document.body.style.userSelect = 'none';\n      document.body.style.webkitUserSelect = 'none';\n\n      document.addEventListener('mousemove', onMove, { signal });\n      document.addEventListener('mouseup', onEnd, { signal });\n      document.addEventListener('touchmove', onMove, { signal, passive: false });\n      document.addEventListener('touchend', onEnd, { signal });\n    };\n\n    const onMove = (e: MouseEvent | TouchEvent) => {\n      if (!isResizing) {\n        return;\n      }\n\n      e.preventDefault();\n      const point = 'touches' in e ? e.touches[0] : e;\n      const deltaX = point.clientX - startX;\n      const deltaY = point.clientY - startY;\n      applySize(hasWidth ? startWidth + deltaX : null, hasHeight ? startHeight + deltaY : null);\n    };\n\n    const onEnd = () => {\n      if (!isResizing) {\n        return;\n      }\n\n      isResizing = false;\n      document.body.style.userSelect = '';\n      document.body.style.webkitUserSelect = '';\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      const root = ctx.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const rect = root.getBoundingClientRect();\n      let newWidth: number | null = null;\n      let newHeight: number | null = null;\n\n      if (e.key === 'ArrowRight' && hasWidth) {\n        newWidth = rect.width + KEYBOARD_STEP;\n      } else if (e.key === 'ArrowLeft' && hasWidth) {\n        newWidth = rect.width - KEYBOARD_STEP;\n      } else if (e.key === 'ArrowDown' && hasHeight) {\n        newHeight = rect.height + KEYBOARD_STEP;\n      } else if (e.key === 'ArrowUp' && hasHeight) {\n        newHeight = rect.height - KEYBOARD_STEP;\n      } else if (e.key === 'Home') {\n        if (hasWidth) {\n          newWidth = ctx.dimensions?.minWidth ?? rect.width;\n        }\n        if (hasHeight) {\n          newHeight = ctx.dimensions?.minHeight ?? rect.height;\n        }\n      } else if (e.key === 'End') {\n        if (hasWidth) {\n          newWidth = ctx.dimensions?.maxWidth ?? rect.width;\n        }\n        if (hasHeight) {\n          newHeight = ctx.dimensions?.maxHeight ?? rect.height;\n        }\n      }\n\n      if (newWidth !== null || newHeight !== null) {\n        e.preventDefault();\n        applySize(newWidth, newHeight);\n      }\n    };\n\n    handle.addEventListener('mousedown', onStart, { signal });\n    handle.addEventListener('touchstart', onStart, { signal, passive: false });\n    handle.addEventListener('keydown', onKeyDown, { signal });\n\n    return () => {\n      controller.abort();\n    };\n  }, [\n    ctx.rootRef,\n    ctx.dimensions,\n    ctx.constrainToViewport,\n    ctx.constrainOffset,\n    hasWidth,\n    hasHeight,\n  ]);\n\n  return (\n    <Box\n      ref={useMergedRef(ref, handleRef)}\n      role=\"separator\"\n      aria-label=\"Resize window\"\n      aria-valuenow={ctx.dimensions?.initialWidth}\n      aria-valuemin={ctx.dimensions?.minWidth}\n      aria-valuemax={ctx.dimensions?.maxWidth}\n      tabIndex={0}\n      {...others}\n      style={[{ touchAction: 'none' }, style]}\n    >\n      {children}\n    </Box>\n  );\n});\n\nFloatingWindowResizeHandle.displayName = '@mantine/core/FloatingWindowResizeHandle';\n"],"mappings":"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"}
+{"version":3,"file":"FloatingWindowResizeHandle.cjs","names":["factory","useProps","useFloatingWindowContext","Box"],"sources":["../../../src/components/FloatingWindow/FloatingWindowResizeHandle.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { useEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { Box, BoxProps, ElementProps, factory, Factory, useProps } from '../../core';\nimport { useFloatingWindowContext } from './FloatingWindow.context';\n\nexport interface FloatingWindowResizeHandleProps extends BoxProps, ElementProps<'div', 'role'> {}\n\nexport type FloatingWindowResizeHandleFactory = Factory<{\n  props: FloatingWindowResizeHandleProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {} satisfies Partial<FloatingWindowResizeHandleProps>;\n\nconst KEYBOARD_STEP = 10;\n\nfunction clampDimension(\n  value: number,\n  min: number | undefined,\n  max: number | undefined,\n  viewportMax: number | undefined\n) {\n  let v = value;\n  if (min != null) {\n    v = Math.max(v, min);\n  }\n  if (max != null) {\n    v = Math.min(v, max);\n  }\n  if (viewportMax != null) {\n    v = Math.min(v, viewportMax);\n  }\n  return v;\n}\n\nfunction getViewportLimits(\n  rect: DOMRect,\n  constrainToViewport: boolean | undefined,\n  constrainOffset: number | undefined\n) {\n  if (!constrainToViewport) {\n    return { maxWidth: undefined, maxHeight: undefined };\n  }\n  const offset = constrainOffset ?? 0;\n  return {\n    maxWidth: window.innerWidth - rect.left - offset,\n    maxHeight: window.innerHeight - rect.top - offset,\n  };\n}\n\nexport const FloatingWindowResizeHandle = factory<FloatingWindowResizeHandleFactory>((_props) => {\n  const props = useProps('FloatingWindowResizeHandle', defaultProps, _props);\n  const { children, ref, style, ...others } = props;\n  const ctx = useFloatingWindowContext();\n  const handleRef = useRef<HTMLDivElement>(null);\n  const ctxRef = useRef(ctx);\n  ctxRef.current = ctx;\n  const valueNowRef = useRef<number | null>(null);\n\n  const hasWidth =\n    ctx.dimensions?.initialWidth != null ||\n    ctx.dimensions?.minWidth != null ||\n    ctx.dimensions?.maxWidth != null;\n  const hasHeight =\n    ctx.dimensions?.initialHeight != null ||\n    ctx.dimensions?.minHeight != null ||\n    ctx.dimensions?.maxHeight != null;\n\n  useEffect(() => {\n    const handle = handleRef.current;\n    if (!handle) {\n      return;\n    }\n\n    const controller = new AbortController();\n    const { signal } = controller;\n    let isResizing = false;\n    let startX = 0;\n    let startY = 0;\n    let startWidth = 0;\n    let startHeight = 0;\n\n    const applySize = (width: number | null, height: number | null) => {\n      if (width === null && height === null) {\n        return;\n      }\n\n      const { dimensions, constrainToViewport, constrainOffset, onSizeChange } = ctxRef.current;\n      const root = ctxRef.current.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const rect = root.getBoundingClientRect();\n      const viewportLimits = getViewportLimits(rect, constrainToViewport, constrainOffset);\n\n      if (width !== null) {\n        const nextWidth = clampDimension(\n          width,\n          dimensions?.minWidth,\n          dimensions?.maxWidth,\n          viewportLimits.maxWidth\n        );\n        root.style.width = `${nextWidth}px`;\n      }\n\n      if (height !== null) {\n        const nextHeight = clampDimension(\n          height,\n          dimensions?.minHeight,\n          dimensions?.maxHeight,\n          viewportLimits.maxHeight\n        );\n        root.style.height = `${nextHeight}px`;\n      }\n\n      const resizedRect = root.getBoundingClientRect();\n\n      if (width !== null) {\n        valueNowRef.current = resizedRect.width;\n        handle.setAttribute('aria-valuenow', String(Math.round(resizedRect.width)));\n      }\n\n      onSizeChange?.({ width: resizedRect.width, height: resizedRect.height });\n    };\n\n    const onStart = (e: MouseEvent | TouchEvent) => {\n      if ('button' in e && e.button !== 0) {\n        return;\n      }\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      if (!hasWidth && !hasHeight) {\n        return;\n      }\n\n      const root = ctxRef.current.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const point = 'touches' in e ? e.touches[0] : e;\n      startX = point.clientX;\n      startY = point.clientY;\n      const rect = root.getBoundingClientRect();\n      startWidth = rect.width;\n      startHeight = rect.height;\n      isResizing = true;\n\n      document.body.style.userSelect = 'none';\n      document.body.style.webkitUserSelect = 'none';\n\n      ctxRef.current.onResizeStart?.();\n\n      document.addEventListener('mousemove', onMove, { signal });\n      document.addEventListener('mouseup', onEnd, { signal });\n      document.addEventListener('touchmove', onMove, { signal, passive: false });\n      document.addEventListener('touchend', onEnd, { signal });\n      document.addEventListener('touchcancel', onEnd, { signal });\n    };\n\n    const onMove = (e: MouseEvent | TouchEvent) => {\n      if (!isResizing) {\n        return;\n      }\n\n      e.preventDefault();\n      const point = 'touches' in e ? e.touches[0] : e;\n      const deltaX = point.clientX - startX;\n      const deltaY = point.clientY - startY;\n      applySize(hasWidth ? startWidth + deltaX : null, hasHeight ? startHeight + deltaY : null);\n    };\n\n    const onEnd = () => {\n      if (!isResizing) {\n        return;\n      }\n\n      isResizing = false;\n      document.body.style.userSelect = '';\n      document.body.style.webkitUserSelect = '';\n      ctxRef.current.onResizeEnd?.();\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      const { dimensions } = ctxRef.current;\n      const root = ctxRef.current.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const rect = root.getBoundingClientRect();\n      let newWidth: number | null = null;\n      let newHeight: number | null = null;\n\n      if (e.key === 'ArrowRight' && hasWidth) {\n        newWidth = rect.width + KEYBOARD_STEP;\n      } else if (e.key === 'ArrowLeft' && hasWidth) {\n        newWidth = rect.width - KEYBOARD_STEP;\n      } else if (e.key === 'ArrowDown' && hasHeight) {\n        newHeight = rect.height + KEYBOARD_STEP;\n      } else if (e.key === 'ArrowUp' && hasHeight) {\n        newHeight = rect.height - KEYBOARD_STEP;\n      } else if (e.key === 'Home') {\n        if (hasWidth) {\n          newWidth = dimensions?.minWidth ?? rect.width;\n        }\n        if (hasHeight) {\n          newHeight = dimensions?.minHeight ?? rect.height;\n        }\n      } else if (e.key === 'End') {\n        if (hasWidth) {\n          newWidth = dimensions?.maxWidth ?? rect.width;\n        }\n        if (hasHeight) {\n          newHeight = dimensions?.maxHeight ?? rect.height;\n        }\n      }\n\n      if (newWidth !== null || newHeight !== null) {\n        e.preventDefault();\n        applySize(newWidth, newHeight);\n      }\n    };\n\n    handle.addEventListener('mousedown', onStart, { signal });\n    handle.addEventListener('touchstart', onStart, { signal, passive: false });\n    handle.addEventListener('keydown', onKeyDown, { signal });\n\n    return () => {\n      onEnd();\n      controller.abort();\n    };\n  }, [hasWidth, hasHeight]);\n\n  useEffect(() => {\n    const handle = handleRef.current;\n    if (!handle) {\n      return;\n    }\n\n    if (!hasWidth) {\n      valueNowRef.current = null;\n      handle.removeAttribute('aria-valuenow');\n      return;\n    }\n\n    if (valueNowRef.current !== null) {\n      return;\n    }\n\n    const initialWidth = ctx.dimensions?.initialWidth;\n\n    if (initialWidth == null) {\n      handle.removeAttribute('aria-valuenow');\n      return;\n    }\n\n    const width = clampDimension(\n      initialWidth,\n      ctx.dimensions?.minWidth,\n      ctx.dimensions?.maxWidth,\n      undefined\n    );\n\n    handle.setAttribute('aria-valuenow', String(Math.round(width)));\n  }, [hasWidth, ctx.dimensions?.initialWidth, ctx.dimensions?.minWidth, ctx.dimensions?.maxWidth]);\n\n  return (\n    <Box\n      ref={useMergedRef(ref, handleRef)}\n      role=\"separator\"\n      aria-label=\"Resize window\"\n      aria-valuemin={ctx.dimensions?.minWidth}\n      aria-valuemax={ctx.dimensions?.maxWidth}\n      tabIndex={0}\n      {...others}\n      style={[{ touchAction: 'none' }, style]}\n    >\n      {children}\n    </Box>\n  );\n});\n\nFloatingWindowResizeHandle.displayName = '@mantine/core/FloatingWindowResizeHandle';\n"],"mappings":"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"}

package/cjs/components/Input/InputLabel/InputLabel.cjs

@@ -34,13 +34,15 @@ const InputLabel = require_factory.factory((_props) => {
 	});
 	const ctx = (0, react.use)(require_InputWrapper_context.InputWrapperContext);
 	const getStyles = ctx?.getStyles || _getStyles;
+	const rootElement = others.component || labelElement;
+	const supportsHtmlFor = typeof rootElement !== "string" || rootElement === "label";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
 		...getStyles("label", ctx?.getStyles ? {
 			className,
 			style
 		} : void 0),
 		component: labelElement,
-		htmlFor: labelElement === "label" ? htmlFor : void 0,
+		htmlFor: supportsHtmlFor ? htmlFor : void 0,
 		mod: [{ required }, mod],
 		onMouseDown: (event) => {
 			onMouseDown?.(event);

package/cjs/components/Input/InputLabel/InputLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.cjs","names":["createVarsResolver","getFontSize","factory","useProps","useStyles","InputWrapperContext","Box","classes"],"sources":["../../../../src/components/Input/InputLabel/InputLabel.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputLabelStylesNames = 'label' | 'required';\nexport type InputLabelCssVariables = {\n  label: '--input-asterisk-color' | '--input-label-size';\n};\n\nexport interface InputLabelProps\n  extends BoxProps, StylesApiProps<InputLabelFactory>, ElementProps<'label'> {\n  __staticSelector?: string;\n\n  /** If set, the required asterisk is displayed next to the label */\n  required?: boolean;\n\n  /** Controls label `font-size` @default 'sm' */\n  size?: MantineFontSize;\n\n  /** Root element of the label @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputLabelFactory = Factory<{\n  props: InputLabelProps;\n  ref: HTMLLabelElement;\n  stylesNames: InputLabelStylesNames;\n  vars: InputLabelCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n} satisfies Partial<InputLabelProps>;\n\nconst varsResolver = createVarsResolver<InputLabelFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n}));\n\nexport const InputLabel = factory<InputLabelFactory>((_props) => {\n  const props = useProps('InputLabel', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    labelElement,\n    required,\n    htmlFor,\n    onMouseDown,\n    children,\n    __staticSelector,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<InputLabelFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'label',\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(InputWrapperContext);\n  const getStyles = ctx?.getStyles || _getStyles;\n\n  return (\n    <Box\n      {...getStyles('label', ctx?.getStyles ? { className, style } : undefined)}\n      component={labelElement as 'label'}\n      htmlFor={labelElement === 'label' ? htmlFor : undefined}\n      mod={[{ required }, mod]}\n      onMouseDown={(event) => {\n        onMouseDown?.(event);\n        if (!event.defaultPrevented && event.detail > 1) {\n          event.preventDefault();\n        }\n      }}\n      {...others}\n    >\n      {children}\n      {required && (\n        <span {...getStyles('required')} aria-hidden>\n          {' *'}\n        </span>\n      )}\n    </Box>\n  );\n});\n\nInputLabel.classes = classes;\nInputLabel.varsResolver = varsResolver;\nInputLabel.displayName = '@mantine/core/InputLabel';\n"],"mappings":";;;;;;;;;;;;AA2CA,MAAM,eAAe,EACnB,cAAc,QAChB;AAEA,MAAM,eAAeA,6BAAAA,oBAAuC,GAAG,EAAE,YAAY,EAC3E,OAAO;CACL,sBAAsBC,iBAAAA,YAAY,IAAI;CACtC,0BAA0B,KAAA;AAC5B,EACF,EAAE;AAEF,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,UACA,SACA,aACA,UACA,kBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAaC,mBAAAA,UAA6B;EAC9C,MAAM,CAAC,gBAAgB,gBAAgB;EACvC;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,OAAA,GAAA,MAAA,IAAA,CAAUC,6BAAAA,mBAAmB;CACnC,MAAM,YAAY,KAAK,aAAa;CAEpC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,GAAI,UAAU,SAAS,KAAK,YAAY;GAAE;GAAW;EAAM,IAAI,KAAA,CAAS;EACxE,WAAW;EACX,SAAS,iBAAiB,UAAU,UAAU,KAAA;EAC9C,KAAK,CAAC,EAAE,SAAS,GAAG,GAAG;EACvB,cAAc,UAAU;GACtB,cAAc,KAAK;GACnB,IAAI,CAAC,MAAM,oBAAoB,MAAM,SAAS,GAC5C,MAAM,eAAe;EAEzB;EACA,GAAI;YAXN,CAaG,UACA,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,GAAI,UAAU,UAAU;GAAG,eAAA;aAC9B;EACG,CAAA,CAEL;;AAET,CAAC;AAED,WAAW,UAAUC,qBAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}
+{"version":3,"file":"InputLabel.cjs","names":["createVarsResolver","getFontSize","factory","useProps","useStyles","InputWrapperContext","Box","classes"],"sources":["../../../../src/components/Input/InputLabel/InputLabel.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputLabelStylesNames = 'label' | 'required';\nexport type InputLabelCssVariables = {\n  label: '--input-asterisk-color' | '--input-label-size';\n};\n\nexport interface InputLabelProps\n  extends BoxProps, StylesApiProps<InputLabelFactory>, ElementProps<'label'> {\n  __staticSelector?: string;\n\n  /** If set, the required asterisk is displayed next to the label */\n  required?: boolean;\n\n  /** Controls label `font-size` @default 'sm' */\n  size?: MantineFontSize;\n\n  /** Root element of the label @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputLabelFactory = Factory<{\n  props: InputLabelProps;\n  ref: HTMLLabelElement;\n  stylesNames: InputLabelStylesNames;\n  vars: InputLabelCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n} satisfies Partial<InputLabelProps>;\n\nconst varsResolver = createVarsResolver<InputLabelFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n}));\n\nexport const InputLabel = factory<InputLabelFactory>((_props) => {\n  const props = useProps('InputLabel', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    labelElement,\n    required,\n    htmlFor,\n    onMouseDown,\n    children,\n    __staticSelector,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<InputLabelFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'label',\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(InputWrapperContext);\n  const getStyles = ctx?.getStyles || _getStyles;\n  const rootElement = (others as { component?: React.ElementType }).component || labelElement;\n  const supportsHtmlFor = typeof rootElement !== 'string' || rootElement === 'label';\n\n  return (\n    <Box\n      {...getStyles('label', ctx?.getStyles ? { className, style } : undefined)}\n      component={labelElement as 'label'}\n      htmlFor={supportsHtmlFor ? htmlFor : undefined}\n      mod={[{ required }, mod]}\n      onMouseDown={(event) => {\n        onMouseDown?.(event);\n        if (!event.defaultPrevented && event.detail > 1) {\n          event.preventDefault();\n        }\n      }}\n      {...others}\n    >\n      {children}\n      {required && (\n        <span {...getStyles('required')} aria-hidden>\n          {' *'}\n        </span>\n      )}\n    </Box>\n  );\n});\n\nInputLabel.classes = classes;\nInputLabel.varsResolver = varsResolver;\nInputLabel.displayName = '@mantine/core/InputLabel';\n"],"mappings":";;;;;;;;;;;;AA2CA,MAAM,eAAe,EACnB,cAAc,QAChB;AAEA,MAAM,eAAeA,6BAAAA,oBAAuC,GAAG,EAAE,YAAY,EAC3E,OAAO;CACL,sBAAsBC,iBAAAA,YAAY,IAAI;CACtC,0BAA0B,KAAA;AAC5B,EACF,EAAE;AAEF,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,UACA,SACA,aACA,UACA,kBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAaC,mBAAAA,UAA6B;EAC9C,MAAM,CAAC,gBAAgB,gBAAgB;EACvC;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,OAAA,GAAA,MAAA,IAAA,CAAUC,6BAAAA,mBAAmB;CACnC,MAAM,YAAY,KAAK,aAAa;CACpC,MAAM,cAAe,OAA6C,aAAa;CAC/E,MAAM,kBAAkB,OAAO,gBAAgB,YAAY,gBAAgB;CAE3E,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;EACE,GAAI,UAAU,SAAS,KAAK,YAAY;GAAE;GAAW;EAAM,IAAI,KAAA,CAAS;EACxE,WAAW;EACX,SAAS,kBAAkB,UAAU,KAAA;EACrC,KAAK,CAAC,EAAE,SAAS,GAAG,GAAG;EACvB,cAAc,UAAU;GACtB,cAAc,KAAK;GACnB,IAAI,CAAC,MAAM,oBAAoB,MAAM,SAAS,GAC5C,MAAM,eAAe;EAEzB;EACA,GAAI;YAXN,CAaG,UACA,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,GAAI,UAAU,UAAU;GAAG,eAAA;aAC9B;EACG,CAAA,CAEL;;AAET,CAAC;AAED,WAAW,UAAUC,qBAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/cjs/components/Input/InputWrapper/InputWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.cjs","names":["createVarsResolver","getFontSize","rem","factory","useProps","useStyles","InputLabel","InputDescription","Fragment","InputError","InputSuccess","InputWrapperContext","getInputOffsets","Box","classes"],"sources":["../../../../src/components/Input/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport {\n  InputDescription,\n  InputDescriptionCssVariables,\n  InputDescriptionProps,\n  InputDescriptionStylesNames,\n} from '../InputDescription/InputDescription';\nimport {\n  InputError,\n  InputErrorCssVariables,\n  InputErrorProps,\n  InputErrorStylesNames,\n} from '../InputError/InputError';\nimport {\n  InputLabel,\n  InputLabelCssVariables,\n  InputLabelProps,\n  InputLabelStylesNames,\n} from '../InputLabel/InputLabel';\nimport {\n  InputSuccess,\n  InputSuccessCssVariables,\n  InputSuccessProps,\n  InputSuccessStylesNames,\n} from '../InputSuccess/InputSuccess';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport { getInputOffsets } from './get-input-offsets/get-input-offsets';\nimport classes from '../Input.module.css';\n\nexport type InputWrapperCssVariables = InputLabelCssVariables &\n  InputErrorCssVariables &\n  InputSuccessCssVariables &\n  InputDescriptionCssVariables;\n\nexport type InputWrapperStylesNames =\n  | 'root'\n  | InputLabelStylesNames\n  | InputDescriptionStylesNames\n  | InputErrorStylesNames\n  | InputSuccessStylesNames;\n\nexport interface __InputWrapperProps {\n  /** Contents of `Input.Label` component. If not set, label is not displayed. */\n  label?: React.ReactNode;\n\n  /** Contents of `Input.Description` component. If not set, description is not displayed. */\n  description?: React.ReactNode;\n\n  /** Contents of `Input.Error` component. If not set, error is not displayed. */\n  error?: React.ReactNode;\n\n  /** Contents of `Input.Success` component. If not set, success is not displayed. */\n  success?: React.ReactNode;\n\n  /** Adds required attribute to the input and a red asterisk on the right side of label @default false */\n  required?: boolean;\n\n  /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default false */\n  withAsterisk?: boolean;\n\n  /** Props passed down to the `Input.Label` component */\n  labelProps?: InputLabelProps & DataAttributes;\n\n  /** Props passed down to the `Input.Description` component */\n  descriptionProps?: InputDescriptionProps & DataAttributes;\n\n  /** Props passed down to the `Input.Error` component */\n  errorProps?: InputErrorProps & DataAttributes;\n\n  /** Props passed down to the `Input.Success` component */\n  successProps?: InputSuccessProps & DataAttributes;\n\n  /** Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. @default React.Fragment */\n  inputContainer?: (children: React.ReactNode) => React.ReactNode;\n\n  /** Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. @default ['label', 'description', 'input', 'error'] */\n  inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];\n}\n\nexport interface InputWrapperProps\n  extends __InputWrapperProps, BoxProps, StylesApiProps<InputWrapperFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces Input.Wrapper props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Static id used as base to generate `aria-` attributes, by default generates random id */\n  id?: string;\n\n  /** Controls size of `Input.Label`, `Input.Description` and `Input.Error` components */\n  size?: MantineFontSize;\n\n  /** Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputWrapperFactory = Factory<{\n  props: InputWrapperProps;\n  ref: HTMLDivElement;\n  stylesNames: InputWrapperStylesNames;\n  vars: InputWrapperCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n  inputContainer: (children) => children,\n  inputWrapperOrder: ['label', 'description', 'input', 'error'],\n} satisfies Partial<InputWrapperProps>;\n\nconst varsResolver = createVarsResolver<InputWrapperFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n\n  error: {\n    '--input-error-size': size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  success: {\n    '--input-success-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  description: {\n    '--input-description-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputWrapper = factory<InputWrapperFactory>((_props) => {\n  const props = useProps('InputWrapper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    variant,\n    __staticSelector,\n    inputContainer,\n    inputWrapperOrder,\n    label,\n    error,\n    success,\n    description,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    successProps,\n    labelElement,\n    children,\n    withAsterisk,\n    id,\n    required,\n    __stylesApiProps,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<InputWrapperFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const sharedProps = {\n    size,\n    variant,\n    __staticSelector,\n  };\n\n  const idBase = useId(id);\n  const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n  const errorId = errorProps?.id || `${idBase}-error`;\n  const successId = successProps?.id || `${idBase}-success`;\n  const descriptionId = descriptionProps?.id || `${idBase}-description`;\n  const inputId = idBase;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasSuccess = !!success && typeof success !== 'boolean' && !error;\n  const hasDescription = !!description;\n  const errorRendered = hasError && inputWrapperOrder.includes('error');\n  const successRendered = hasSuccess && inputWrapperOrder.includes('error');\n  const descriptionRendered = hasDescription && inputWrapperOrder.includes('description');\n  const _describedBy = `${errorRendered ? errorId : ''} ${successRendered ? successId : ''} ${descriptionRendered ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n  const labelId = labelProps?.id || `${idBase}-label`;\n\n  const _label = label && (\n    <InputLabel\n      key=\"label\"\n      labelElement={labelElement}\n      id={labelId}\n      htmlFor={inputId}\n      required={isRequired}\n      {...sharedProps}\n      {...labelProps}\n    >\n      {label}\n    </InputLabel>\n  );\n\n  const _description = hasDescription && (\n    <InputDescription\n      key=\"description\"\n      {...descriptionProps}\n      {...sharedProps}\n      size={descriptionProps?.size || sharedProps.size}\n      id={descriptionProps?.id || descriptionId}\n    >\n      {description}\n    </InputDescription>\n  );\n\n  const _input = <Fragment key=\"input\">{inputContainer(children)}</Fragment>;\n\n  const _error = hasError && (\n    <InputError\n      {...errorProps}\n      {...sharedProps}\n      size={errorProps?.size || sharedProps.size}\n      key=\"error\"\n      id={errorProps?.id || errorId}\n    >\n      {error}\n    </InputError>\n  );\n\n  const _success = hasSuccess && (\n    <InputSuccess\n      {...successProps}\n      {...sharedProps}\n      size={successProps?.size || sharedProps.size}\n      key=\"success\"\n      id={successProps?.id || successId}\n    >\n      {success}\n    </InputSuccess>\n  );\n\n  const content = inputWrapperOrder.map((part) => {\n    switch (part) {\n      case 'label':\n        return _label;\n      case 'input':\n        return _input;\n      case 'description':\n        return _description;\n      case 'error':\n        return _error || _success;\n      default:\n        return null;\n    }\n  });\n\n  return (\n    <InputWrapperContext\n      value={{\n        getStyles,\n        describedBy,\n        inputId,\n        labelId,\n        ...getInputOffsets(inputWrapperOrder, { hasDescription, hasError: hasError || hasSuccess }),\n      }}\n    >\n      <Box\n        variant={variant}\n        size={size}\n        mod={[{ error: !!error, success: !!success && !error }, mod]}\n        id={labelElement === 'label' ? undefined : id}\n        {...getStyles('root')}\n        {...others}\n      >\n        {content}\n      </Box>\n    </InputWrapperContext>\n  );\n});\n\nInputWrapper.classes = classes;\nInputWrapper.varsResolver = varsResolver;\nInputWrapper.displayName = '@mantine/core/InputWrapper';\n"],"mappings":"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"}
+{"version":3,"file":"InputWrapper.cjs","names":["createVarsResolver","getFontSize","rem","factory","useProps","useStyles","InputLabel","InputDescription","Fragment","InputError","InputSuccess","InputWrapperContext","getInputOffsets","Box","classes"],"sources":["../../../../src/components/Input/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  PlaceholderPolymorphicProps,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport {\n  InputDescription,\n  InputDescriptionCssVariables,\n  InputDescriptionProps,\n  InputDescriptionStylesNames,\n} from '../InputDescription/InputDescription';\nimport {\n  InputError,\n  InputErrorCssVariables,\n  InputErrorProps,\n  InputErrorStylesNames,\n} from '../InputError/InputError';\nimport {\n  InputLabel,\n  InputLabelCssVariables,\n  InputLabelProps,\n  InputLabelStylesNames,\n} from '../InputLabel/InputLabel';\nimport {\n  InputSuccess,\n  InputSuccessCssVariables,\n  InputSuccessProps,\n  InputSuccessStylesNames,\n} from '../InputSuccess/InputSuccess';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport { getInputOffsets } from './get-input-offsets/get-input-offsets';\nimport classes from '../Input.module.css';\n\nexport type InputWrapperCssVariables = InputLabelCssVariables &\n  InputErrorCssVariables &\n  InputSuccessCssVariables &\n  InputDescriptionCssVariables;\n\nexport type InputWrapperStylesNames =\n  | 'root'\n  | InputLabelStylesNames\n  | InputDescriptionStylesNames\n  | InputErrorStylesNames\n  | InputSuccessStylesNames;\n\nexport interface __InputWrapperProps {\n  /** Contents of `Input.Label` component. If not set, label is not displayed. */\n  label?: React.ReactNode;\n\n  /** Contents of `Input.Description` component. If not set, description is not displayed. */\n  description?: React.ReactNode;\n\n  /** Contents of `Input.Error` component. If not set, error is not displayed. */\n  error?: React.ReactNode;\n\n  /** Contents of `Input.Success` component. If not set, success is not displayed. */\n  success?: React.ReactNode;\n\n  /** Adds required attribute to the input and a red asterisk on the right side of label @default false */\n  required?: boolean;\n\n  /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default false */\n  withAsterisk?: boolean;\n\n  /** Props passed down to the `Input.Label` component */\n  labelProps?: InputLabelProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Description` component */\n  descriptionProps?: InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Error` component */\n  errorProps?: InputErrorProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Success` component */\n  successProps?: InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. @default React.Fragment */\n  inputContainer?: (children: React.ReactNode) => React.ReactNode;\n\n  /** Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. @default ['label', 'description', 'input', 'error'] */\n  inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];\n}\n\nexport interface InputWrapperProps\n  extends __InputWrapperProps, BoxProps, StylesApiProps<InputWrapperFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces Input.Wrapper props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Static id used as base to generate `aria-` attributes, by default generates random id */\n  id?: string;\n\n  /** Controls size of `Input.Label`, `Input.Description` and `Input.Error` components */\n  size?: MantineFontSize;\n\n  /** Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputWrapperFactory = Factory<{\n  props: InputWrapperProps;\n  ref: HTMLDivElement;\n  stylesNames: InputWrapperStylesNames;\n  vars: InputWrapperCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n  inputContainer: (children) => children,\n  inputWrapperOrder: ['label', 'description', 'input', 'error'],\n} satisfies Partial<InputWrapperProps>;\n\nconst varsResolver = createVarsResolver<InputWrapperFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n\n  error: {\n    '--input-error-size': size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  success: {\n    '--input-success-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  description: {\n    '--input-description-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputWrapper = factory<InputWrapperFactory>((_props) => {\n  const props = useProps('InputWrapper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    variant,\n    __staticSelector,\n    inputContainer,\n    inputWrapperOrder,\n    label,\n    error,\n    success,\n    description,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    successProps,\n    labelElement,\n    children,\n    withAsterisk,\n    id,\n    required,\n    __stylesApiProps,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<InputWrapperFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const sharedProps = {\n    size,\n    variant,\n    __staticSelector,\n  };\n\n  const idBase = useId(id);\n  const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n  const errorId = errorProps?.id || `${idBase}-error`;\n  const successId = successProps?.id || `${idBase}-success`;\n  const descriptionId = descriptionProps?.id || `${idBase}-description`;\n  const inputId = idBase;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasSuccess = !!success && typeof success !== 'boolean' && !error;\n  const hasDescription = !!description;\n  const errorRendered = hasError && inputWrapperOrder.includes('error');\n  const successRendered = hasSuccess && inputWrapperOrder.includes('error');\n  const descriptionRendered = hasDescription && inputWrapperOrder.includes('description');\n  const _describedBy = `${errorRendered ? errorId : ''} ${successRendered ? successId : ''} ${descriptionRendered ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n  const labelId = labelProps?.id || `${idBase}-label`;\n\n  const _label = label && (\n    <InputLabel\n      key=\"label\"\n      labelElement={labelElement}\n      id={labelId}\n      htmlFor={inputId}\n      required={isRequired}\n      {...sharedProps}\n      {...labelProps}\n    >\n      {label}\n    </InputLabel>\n  );\n\n  const _description = hasDescription && (\n    <InputDescription\n      key=\"description\"\n      {...descriptionProps}\n      {...sharedProps}\n      size={descriptionProps?.size || sharedProps.size}\n      id={descriptionProps?.id || descriptionId}\n    >\n      {description}\n    </InputDescription>\n  );\n\n  const _input = <Fragment key=\"input\">{inputContainer(children)}</Fragment>;\n\n  const _error = hasError && (\n    <InputError\n      {...errorProps}\n      {...sharedProps}\n      size={errorProps?.size || sharedProps.size}\n      key=\"error\"\n      id={errorProps?.id || errorId}\n    >\n      {error}\n    </InputError>\n  );\n\n  const _success = hasSuccess && (\n    <InputSuccess\n      {...successProps}\n      {...sharedProps}\n      size={successProps?.size || sharedProps.size}\n      key=\"success\"\n      id={successProps?.id || successId}\n    >\n      {success}\n    </InputSuccess>\n  );\n\n  const content = inputWrapperOrder.map((part) => {\n    switch (part) {\n      case 'label':\n        return _label;\n      case 'input':\n        return _input;\n      case 'description':\n        return _description;\n      case 'error':\n        return _error || _success;\n      default:\n        return null;\n    }\n  });\n\n  return (\n    <InputWrapperContext\n      value={{\n        getStyles,\n        describedBy,\n        inputId,\n        labelId,\n        ...getInputOffsets(inputWrapperOrder, { hasDescription, hasError: hasError || hasSuccess }),\n      }}\n    >\n      <Box\n        variant={variant}\n        size={size}\n        mod={[{ error: !!error, success: !!success && !error }, mod]}\n        id={labelElement === 'label' ? undefined : id}\n        {...getStyles('root')}\n        {...others}\n      >\n        {content}\n      </Box>\n    </InputWrapperContext>\n  );\n});\n\nInputWrapper.classes = classes;\nInputWrapper.varsResolver = varsResolver;\nInputWrapper.displayName = '@mantine/core/InputWrapper';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwHA,MAAM,eAAe;CACnB,cAAc;CACd,iBAAiB,aAAa;CAC9B,mBAAmB;EAAC;EAAS;EAAe;EAAS;CAAO;AAC9D;AAEA,MAAM,eAAeA,6BAAAA,oBAAyC,GAAG,EAAE,YAAY;CAC7E,OAAO;EACL,sBAAsBC,iBAAAA,YAAY,IAAI;EACtC,0BAA0B,KAAA;CAC5B;CAEA,OAAO,EACL,sBAAsB,SAAS,KAAA,IAAY,KAAA,IAAY,QAAQA,iBAAAA,YAAY,IAAI,EAAE,KAAKC,YAAAA,IAAI,CAAC,EAAE,GAC/F;CAEA,SAAS,EACP,wBACE,SAAS,KAAA,IAAY,KAAA,IAAY,QAAQD,iBAAAA,YAAY,IAAI,EAAE,KAAKC,YAAAA,IAAI,CAAC,EAAE,GAC3E;CAEA,aAAa,EACX,4BACE,SAAS,KAAA,IAAY,KAAA,IAAY,QAAQD,iBAAAA,YAAY,IAAI,EAAE,KAAKC,YAAAA,IAAI,CAAC,EAAE,GAC3E;AACF,EAAE;AAEF,MAAa,eAAeC,gBAAAA,SAA8B,WAAW;CACnE,MAAM,QAAQC,kBAAAA,SAAS,gBAAgB,cAAc,MAAM;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,SACA,kBACA,gBACA,mBACA,OACA,OACA,SACA,aACA,YACA,kBACA,YACA,cACA,cACA,UACA,cACA,IACA,UACA,kBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA+B;EAC/C,MAAM,CAAC,gBAAgB,gBAAgB;EACvC,OAAO,oBAAoB;EAC3B,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,cAAc;EAClB;EACA;EACA;CACF;CAEA,MAAM,UAAA,GAAA,eAAA,MAAA,CAAe,EAAE;CACvB,MAAM,aAAa,OAAO,iBAAiB,YAAY,eAAe;CACtE,MAAM,UAAU,YAAY,MAAM,GAAG,OAAO;CAC5C,MAAM,YAAY,cAAc,MAAM,GAAG,OAAO;CAChD,MAAM,gBAAgB,kBAAkB,MAAM,GAAG,OAAO;CACxD,MAAM,UAAU;CAChB,MAAM,WAAW,CAAC,CAAC,SAAS,OAAO,UAAU;CAC7C,MAAM,aAAa,CAAC,CAAC,WAAW,OAAO,YAAY,aAAa,CAAC;CACjE,MAAM,iBAAiB,CAAC,CAAC;CACzB,MAAM,gBAAgB,YAAY,kBAAkB,SAAS,OAAO;CACpE,MAAM,kBAAkB,cAAc,kBAAkB,SAAS,OAAO;CACxE,MAAM,sBAAsB,kBAAkB,kBAAkB,SAAS,aAAa;CACtF,MAAM,eAAe,GAAG,gBAAgB,UAAU,GAAG,GAAG,kBAAkB,YAAY,GAAG,GAAG,sBAAsB,gBAAgB;CAClI,MAAM,cAAc,aAAa,KAAK,CAAC,CAAC,SAAS,IAAI,aAAa,KAAK,IAAI,KAAA;CAC3E,MAAM,UAAU,YAAY,MAAM,GAAG,OAAO;CAE5C,MAAM,SAAS,SACb,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;EAEgB;EACd,IAAI;EACJ,SAAS;EACT,UAAU;EACV,GAAI;EACJ,GAAI;YAEH;CACS,GATN,OASM;CAGd,MAAM,eAAe,kBACnB,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;EAEE,GAAI;EACJ,GAAI;EACJ,MAAM,kBAAkB,QAAQ,YAAY;EAC5C,IAAI,kBAAkB,MAAM;YAE3B;CACe,GAPZ,aAOY;CAGpB,MAAM,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,MAAAA,UAAD,EAAA,UAAuB,eAAe,QAAQ,EAAY,GAA5C,OAA4C;CAEzE,MAAM,SAAS,YACb,iBAAA,GAAA,MAAA,cAAA,CAACC,mBAAAA,YAAD;EACE,GAAI;EACJ,GAAI;EACJ,MAAM,YAAY,QAAQ,YAAY;EACtC,KAAI;EACJ,IAAI,YAAY,MAAM;CAGZ,GADT,KACS;CAGd,MAAM,WAAW,cACf,iBAAA,GAAA,MAAA,cAAA,CAACC,qBAAAA,cAAD;EACE,GAAI;EACJ,GAAI;EACJ,MAAM,cAAc,QAAQ,YAAY;EACxC,KAAI;EACJ,IAAI,cAAc,MAAM;CAGZ,GADX,OACW;CAGhB,MAAM,UAAU,kBAAkB,KAAK,SAAS;EAC9C,QAAQ,MAAR;GACE,KAAK,SACH,OAAO;GACT,KAAK,SACH,OAAO;GACT,KAAK,eACH,OAAO;GACT,KAAK,SACH,OAAO,UAAU;GACnB,SACE,OAAO;EACX;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,qBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA,GAAGC,0BAAAA,gBAAgB,mBAAmB;IAAE;IAAgB,UAAU,YAAY;GAAW,CAAC;EAC5F;YAEA,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GACW;GACH;GACN,KAAK,CAAC;IAAE,OAAO,CAAC,CAAC;IAAO,SAAS,CAAC,CAAC,WAAW,CAAC;GAAM,GAAG,GAAG;GAC3D,IAAI,iBAAiB,UAAU,KAAA,IAAY;GAC3C,GAAI,UAAU,MAAM;GACpB,GAAI;aAEH;EACE,CAAA;CACc,CAAA;AAEzB,CAAC;AAED,aAAa,UAAUC,qBAAAA;AACvB,aAAa,eAAe;AAC5B,aAAa,cAAc"}

package/esm/components/FloatingWindow/FloatingWindow.context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingWindow.context.mjs","names":[],"sources":["../../../src/components/FloatingWindow/FloatingWindow.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface FloatingWindowDimensions {\n  /** Initial width of the floating window in px */\n  initialWidth?: number;\n\n  /** Minimum width of the floating window in px */\n  minWidth?: number;\n\n  /** Maximum width of the floating window in px */\n  maxWidth?: number;\n\n  /** Initial height of the floating window in px */\n  initialHeight?: number;\n\n  /** Minimum height of the floating window in px */\n  minHeight?: number;\n\n  /** Maximum height of the floating window in px */\n  maxHeight?: number;\n}\n\nexport interface FloatingWindowContextValue {\n  rootRef: React.RefObject<HTMLDivElement | null>;\n  dimensions: FloatingWindowDimensions | undefined;\n  constrainToViewport: boolean | undefined;\n  constrainOffset: number | undefined;\n}\n\nexport const [FloatingWindowProvider, useFloatingWindowContext] =\n  createSafeContext<FloatingWindowContextValue>(\n    'FloatingWindow.ResizeHandle must be used within FloatingWindow'\n  );\n"],"mappings":";;;AA6BA,MAAa,CAAC,wBAAwB,4BACpC,kBACE,gEACF"}
+{"version":3,"file":"FloatingWindow.context.mjs","names":[],"sources":["../../../src/components/FloatingWindow/FloatingWindow.context.ts"],"sourcesContent":["import { createSafeContext } from '../../core';\n\nexport interface FloatingWindowDimensions {\n  /** Initial width of the floating window in px */\n  initialWidth?: number;\n\n  /** Minimum width of the floating window in px */\n  minWidth?: number;\n\n  /** Maximum width of the floating window in px */\n  maxWidth?: number;\n\n  /** Initial height of the floating window in px */\n  initialHeight?: number;\n\n  /** Minimum height of the floating window in px */\n  minHeight?: number;\n\n  /** Maximum height of the floating window in px */\n  maxHeight?: number;\n}\n\nexport interface FloatingWindowSize {\n  /** Width of the floating window in px */\n  width: number;\n\n  /** Height of the floating window in px */\n  height: number;\n}\n\nexport interface FloatingWindowContextValue {\n  rootRef: React.RefObject<HTMLDivElement | null>;\n  dimensions: FloatingWindowDimensions | undefined;\n  constrainToViewport: boolean | undefined;\n  constrainOffset: number | undefined;\n  onResizeStart: (() => void) | undefined;\n  onResizeEnd: (() => void) | undefined;\n  onSizeChange: ((size: FloatingWindowSize) => void) | undefined;\n}\n\nexport const [FloatingWindowProvider, useFloatingWindowContext] =\n  createSafeContext<FloatingWindowContextValue>(\n    'FloatingWindow.ResizeHandle must be used within FloatingWindow'\n  );\n"],"mappings":";;;AAwCA,MAAa,CAAC,wBAAwB,4BACpC,kBACE,gEACF"}

package/esm/components/FloatingWindow/FloatingWindow.mjs

@@ -24,7 +24,7 @@ function clampDimension(value, min, max) {
 }
 const FloatingWindow = factory((_props) => {
 	const props = useProps("FloatingWindow", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, mod, enabled, constrainToViewport, constrainOffset, dragHandleSelector, excludeDragHandleSelector, axis, initialPosition, onPositionChange, onDragStart, onDragEnd, setPositionRef, withinPortal, portalProps, zIndex, dimensions, ref, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, mod, enabled, constrainToViewport, constrainOffset, dragHandleSelector, excludeDragHandleSelector, axis, initialPosition, onPositionChange, onDragStart, onDragEnd, setPositionRef, withinPortal, portalProps, zIndex, dimensions, onSizeChange, onResizeStart, onResizeEnd, ref, ...others } = props;
 	const rootRef = useRef(null);
 	const getStyles = useStyles({
 		name: "FloatingWindow",
@@ -58,7 +58,10 @@ const FloatingWindow = factory((_props) => {
 			rootRef,
 			dimensions,
 			constrainToViewport,
-			constrainOffset
+			constrainOffset,
+			onSizeChange,
+			onResizeStart,
+			onResizeEnd
 		},
 		children: /* @__PURE__ */ jsx(OptionalPortal, {
 			withinPortal,

package/esm/components/FloatingWindow/FloatingWindow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingWindow.mjs","names":["classes"],"sources":["../../../src/components/FloatingWindow/FloatingWindow.tsx"],"sourcesContent":["import { useImperativeHandle, useRef } from 'react';\nimport {\n  SetFloatingWindowPosition,\n  useFloatingWindow,\n  UseFloatingWindowOptions,\n  useMergedRef,\n} from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { OptionalPortal, PortalProps } from '../Portal';\nimport { FloatingWindowDimensions, FloatingWindowProvider } from './FloatingWindow.context';\nimport { FloatingWindowResizeHandle } from './FloatingWindowResizeHandle';\nimport classes from './FloatingWindow.module.css';\n\nexport type FloatingWindowStylesNames = 'root';\n\nexport interface FloatingWindowProps\n  extends\n    UseFloatingWindowOptions,\n    PaperBaseProps,\n    BoxProps,\n    StylesApiProps<FloatingWindowFactory>,\n    ElementProps<'div', keyof UseFloatingWindowOptions> {\n  /** Assigns ref to set position programmatically */\n  setPositionRef?: React.RefObject<SetFloatingWindowPosition | null>;\n\n  /** Determines whether the window should be rendered inside `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props passed down to `Portal` component */\n  portalProps?: Omit<PortalProps, 'children'>;\n\n  /** `z-index` of the root element @default 400 */\n  zIndex?: React.CSSProperties['zIndex'];\n\n  /** Dimensions configuration for resizable floating window */\n  dimensions?: FloatingWindowDimensions;\n}\n\nexport type FloatingWindowFactory = Factory<{\n  props: FloatingWindowProps;\n  ref: HTMLDivElement;\n  stylesNames: FloatingWindowStylesNames;\n  staticComponents: {\n    ResizeHandle: typeof FloatingWindowResizeHandle;\n  };\n}>;\n\nconst defaultProps = {\n  constrainToViewport: true,\n  zIndex: getDefaultZIndex('overlay'),\n} satisfies Partial<FloatingWindowProps>;\n\nfunction clampDimension(value: number, min?: number, max?: number): number {\n  let v = value;\n  if (min != null) {\n    v = Math.max(v, min);\n  }\n  if (max != null) {\n    v = Math.min(v, max);\n  }\n  return v;\n}\n\nexport const FloatingWindow = factory<FloatingWindowFactory>((_props) => {\n  const props = useProps('FloatingWindow', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    mod,\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n    setPositionRef,\n    withinPortal,\n    portalProps,\n    zIndex,\n    dimensions,\n    ref,\n    ...others\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const getStyles = useStyles<FloatingWindowFactory>({\n    name: 'FloatingWindow',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n  });\n\n  const floatingWindow = useFloatingWindow({\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n  });\n\n  useImperativeHandle(setPositionRef, () => floatingWindow.setPosition, [\n    floatingWindow.setPosition,\n  ]);\n\n  const cssVars: Record<string, string | undefined> = {\n    '--floating-window-z-index': zIndex.toString(),\n  };\n\n  if (dimensions?.initialWidth != null) {\n    cssVars['--floating-window-width'] =\n      `${clampDimension(dimensions.initialWidth, dimensions.minWidth, dimensions.maxWidth)}px`;\n  }\n\n  if (dimensions?.initialHeight != null) {\n    cssVars['--floating-window-height'] =\n      `${clampDimension(dimensions.initialHeight, dimensions.minHeight, dimensions.maxHeight)}px`;\n  }\n\n  return (\n    <FloatingWindowProvider\n      value={{\n        rootRef,\n        dimensions,\n        constrainToViewport,\n        constrainOffset,\n      }}\n    >\n      <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n        <Paper\n          ref={useMergedRef(ref, floatingWindow.ref, rootRef)}\n          mod={[{ dragging: floatingWindow.isDragging }, mod]}\n          {...getStyles('root')}\n          {...others}\n          __vars={cssVars}\n        />\n      </OptionalPortal>\n    </FloatingWindowProvider>\n  );\n});\n\nFloatingWindow.displayName = '@mantine/core/FloatingWindow';\nFloatingWindow.classes = classes;\nFloatingWindow.ResizeHandle = FloatingWindowResizeHandle;\n"],"mappings":";;;;;;;;;;;;;;AAyDA,MAAM,eAAe;CACnB,qBAAqB;CACrB,QAAQ,iBAAiB,SAAS;AACpC;AAEA,SAAS,eAAe,OAAe,KAAc,KAAsB;CACzE,IAAI,IAAI;CACR,IAAI,OAAO,MACT,IAAI,KAAK,IAAI,GAAG,GAAG;CAErB,IAAI,OAAO,MACT,IAAI,KAAK,IAAI,GAAG,GAAG;CAErB,OAAO;AACT;AAEA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,SACA,qBACA,iBACA,oBACA,2BACA,MACA,iBACA,kBACA,aACA,WACA,gBACA,cACA,aACA,QACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,kBAAkB;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,oBAAoB,sBAAsB,eAAe,aAAa,CACpE,eAAe,WACjB,CAAC;CAED,MAAM,UAA8C,EAClD,6BAA6B,OAAO,SAAS,EAC/C;CAEA,IAAI,YAAY,gBAAgB,MAC9B,QAAQ,6BACN,GAAG,eAAe,WAAW,cAAc,WAAW,UAAU,WAAW,QAAQ,EAAE;CAGzF,IAAI,YAAY,iBAAiB,MAC/B,QAAQ,8BACN,GAAG,eAAe,WAAW,eAAe,WAAW,WAAW,WAAW,SAAS,EAAE;CAG5F,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;EACF;YAEA,oBAAC,gBAAD;GAA8B;GAAc,GAAI;aAC9C,oBAAC,OAAD;IACE,KAAK,aAAa,KAAK,eAAe,KAAK,OAAO;IAClD,KAAK,CAAC,EAAE,UAAU,eAAe,WAAW,GAAG,GAAG;IAClD,GAAI,UAAU,MAAM;IACpB,GAAI;IACJ,QAAQ;GACT,CAAA;EACa,CAAA;CACM,CAAA;AAE5B,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUA;AACzB,eAAe,eAAe"}
+{"version":3,"file":"FloatingWindow.mjs","names":["classes"],"sources":["../../../src/components/FloatingWindow/FloatingWindow.tsx"],"sourcesContent":["import { useImperativeHandle, useRef } from 'react';\nimport {\n  SetFloatingWindowPosition,\n  useFloatingWindow,\n  UseFloatingWindowOptions,\n  useMergedRef,\n} from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { OptionalPortal, PortalProps } from '../Portal';\nimport {\n  FloatingWindowDimensions,\n  FloatingWindowProvider,\n  FloatingWindowSize,\n} from './FloatingWindow.context';\nimport { FloatingWindowResizeHandle } from './FloatingWindowResizeHandle';\nimport classes from './FloatingWindow.module.css';\n\nexport type FloatingWindowStylesNames = 'root';\n\nexport interface FloatingWindowProps\n  extends\n    UseFloatingWindowOptions,\n    PaperBaseProps,\n    BoxProps,\n    StylesApiProps<FloatingWindowFactory>,\n    ElementProps<'div', keyof UseFloatingWindowOptions> {\n  /** Assigns ref to set position programmatically */\n  setPositionRef?: React.RefObject<SetFloatingWindowPosition | null>;\n\n  /** Determines whether the window should be rendered inside `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props passed down to `Portal` component */\n  portalProps?: Omit<PortalProps, 'children'>;\n\n  /** `z-index` of the root element @default 400 */\n  zIndex?: React.CSSProperties['zIndex'];\n\n  /** Dimensions configuration for resizable floating window */\n  dimensions?: FloatingWindowDimensions;\n\n  /** Called when the window is resized with `FloatingWindow.ResizeHandle` */\n  onSizeChange?: (size: FloatingWindowSize) => void;\n\n  /** Called when the resize with `FloatingWindow.ResizeHandle` starts. Not called for keyboard resize. */\n  onResizeStart?: () => void;\n\n  /** Called when the resize with `FloatingWindow.ResizeHandle` stops. Not called for keyboard resize. */\n  onResizeEnd?: () => void;\n}\n\nexport type FloatingWindowFactory = Factory<{\n  props: FloatingWindowProps;\n  ref: HTMLDivElement;\n  stylesNames: FloatingWindowStylesNames;\n  staticComponents: {\n    ResizeHandle: typeof FloatingWindowResizeHandle;\n  };\n}>;\n\nconst defaultProps = {\n  constrainToViewport: true,\n  zIndex: getDefaultZIndex('overlay'),\n} satisfies Partial<FloatingWindowProps>;\n\nfunction clampDimension(value: number, min?: number, max?: number): number {\n  let v = value;\n  if (min != null) {\n    v = Math.max(v, min);\n  }\n  if (max != null) {\n    v = Math.min(v, max);\n  }\n  return v;\n}\n\nexport const FloatingWindow = factory<FloatingWindowFactory>((_props) => {\n  const props = useProps('FloatingWindow', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    mod,\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n    setPositionRef,\n    withinPortal,\n    portalProps,\n    zIndex,\n    dimensions,\n    onSizeChange,\n    onResizeStart,\n    onResizeEnd,\n    ref,\n    ...others\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const getStyles = useStyles<FloatingWindowFactory>({\n    name: 'FloatingWindow',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n  });\n\n  const floatingWindow = useFloatingWindow({\n    enabled,\n    constrainToViewport,\n    constrainOffset,\n    dragHandleSelector,\n    excludeDragHandleSelector,\n    axis,\n    initialPosition,\n    onPositionChange,\n    onDragStart,\n    onDragEnd,\n  });\n\n  useImperativeHandle(setPositionRef, () => floatingWindow.setPosition, [\n    floatingWindow.setPosition,\n  ]);\n\n  const cssVars: Record<string, string | undefined> = {\n    '--floating-window-z-index': zIndex.toString(),\n  };\n\n  if (dimensions?.initialWidth != null) {\n    cssVars['--floating-window-width'] =\n      `${clampDimension(dimensions.initialWidth, dimensions.minWidth, dimensions.maxWidth)}px`;\n  }\n\n  if (dimensions?.initialHeight != null) {\n    cssVars['--floating-window-height'] =\n      `${clampDimension(dimensions.initialHeight, dimensions.minHeight, dimensions.maxHeight)}px`;\n  }\n\n  return (\n    <FloatingWindowProvider\n      value={{\n        rootRef,\n        dimensions,\n        constrainToViewport,\n        constrainOffset,\n        onSizeChange,\n        onResizeStart,\n        onResizeEnd,\n      }}\n    >\n      <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n        <Paper\n          ref={useMergedRef(ref, floatingWindow.ref, rootRef)}\n          mod={[{ dragging: floatingWindow.isDragging }, mod]}\n          {...getStyles('root')}\n          {...others}\n          __vars={cssVars}\n        />\n      </OptionalPortal>\n    </FloatingWindowProvider>\n  );\n});\n\nFloatingWindow.displayName = '@mantine/core/FloatingWindow';\nFloatingWindow.classes = classes;\nFloatingWindow.ResizeHandle = FloatingWindowResizeHandle;\n"],"mappings":";;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,qBAAqB;CACrB,QAAQ,iBAAiB,SAAS;AACpC;AAEA,SAAS,eAAe,OAAe,KAAc,KAAsB;CACzE,IAAI,IAAI;CACR,IAAI,OAAO,MACT,IAAI,KAAK,IAAI,GAAG,GAAG;CAErB,IAAI,OAAO,MACT,IAAI,KAAK,IAAI,GAAG,GAAG;CAErB,OAAO;AACT;AAEA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,SACA,qBACA,iBACA,oBACA,2BACA,MACA,iBACA,kBACA,aACA,WACA,gBACA,cACA,aACA,QACA,YACA,cACA,eACA,aACA,KACA,GAAG,WACD;CAEJ,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,kBAAkB;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,oBAAoB,sBAAsB,eAAe,aAAa,CACpE,eAAe,WACjB,CAAC;CAED,MAAM,UAA8C,EAClD,6BAA6B,OAAO,SAAS,EAC/C;CAEA,IAAI,YAAY,gBAAgB,MAC9B,QAAQ,6BACN,GAAG,eAAe,WAAW,cAAc,WAAW,UAAU,WAAW,QAAQ,EAAE;CAGzF,IAAI,YAAY,iBAAiB,MAC/B,QAAQ,8BACN,GAAG,eAAe,WAAW,eAAe,WAAW,WAAW,WAAW,SAAS,EAAE;CAG5F,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,gBAAD;GAA8B;GAAc,GAAI;aAC9C,oBAAC,OAAD;IACE,KAAK,aAAa,KAAK,eAAe,KAAK,OAAO;IAClD,KAAK,CAAC,EAAE,UAAU,eAAe,WAAW,GAAG,GAAG;IAClD,GAAI,UAAU,MAAM;IACpB,GAAI;IACJ,QAAQ;GACT,CAAA;EACa,CAAA;CACM,CAAA;AAE5B,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUA;AACzB,eAAe,eAAe"}

package/esm/components/FloatingWindow/FloatingWindowResizeHandle.mjs

@@ -16,30 +16,24 @@ function clampDimension(value, min, max, viewportMax) {
 	if (viewportMax != null) v = Math.min(v, viewportMax);
 	return v;
 }
-function getViewportLimits(root, constrainToViewport, constrainOffset) {
+function getViewportLimits(rect, constrainToViewport, constrainOffset) {
 	if (!constrainToViewport) return {
 		maxWidth: void 0,
 		maxHeight: void 0
 	};
-	const rect = root.getBoundingClientRect();
 	const offset = constrainOffset ?? 0;
 	return {
 		maxWidth: window.innerWidth - rect.left - offset,
 		maxHeight: window.innerHeight - rect.top - offset
 	};
 }
-function constrainWidth(root, width, dimensions, constrainToViewport, constrainOffset) {
-	const { maxWidth: vpMax } = getViewportLimits(root, constrainToViewport, constrainOffset);
-	return clampDimension(width, dimensions?.minWidth, dimensions?.maxWidth, vpMax);
-}
-function constrainHeight(root, height, dimensions, constrainToViewport, constrainOffset) {
-	const { maxHeight: vpMax } = getViewportLimits(root, constrainToViewport, constrainOffset);
-	return clampDimension(height, dimensions?.minHeight, dimensions?.maxHeight, vpMax);
-}
 const FloatingWindowResizeHandle = factory((_props) => {
 	const { children, ref, style, ...others } = useProps("FloatingWindowResizeHandle", defaultProps, _props);
 	const ctx = useFloatingWindowContext();
 	const handleRef = useRef(null);
+	const ctxRef = useRef(ctx);
+	ctxRef.current = ctx;
+	const valueNowRef = useRef(null);
 	const hasWidth = ctx.dimensions?.initialWidth != null || ctx.dimensions?.minWidth != null || ctx.dimensions?.maxWidth != null;
 	const hasHeight = ctx.dimensions?.initialHeight != null || ctx.dimensions?.minHeight != null || ctx.dimensions?.maxHeight != null;
 	useEffect(() => {
@@ -53,23 +47,35 @@ const FloatingWindowResizeHandle = factory((_props) => {
 		let startWidth = 0;
 		let startHeight = 0;
 		const applySize = (width, height) => {
-			const root = ctx.rootRef.current;
+			if (width === null && height === null) return;
+			const { dimensions, constrainToViewport, constrainOffset, onSizeChange } = ctxRef.current;
+			const root = ctxRef.current.rootRef.current;
 			if (!root) return;
+			const viewportLimits = getViewportLimits(root.getBoundingClientRect(), constrainToViewport, constrainOffset);
 			if (width !== null) {
-				const w = constrainWidth(root, width, ctx.dimensions, ctx.constrainToViewport, ctx.constrainOffset);
-				root.style.width = `${w}px`;
-				handle.setAttribute("aria-valuenow", String(Math.round(w)));
+				const nextWidth = clampDimension(width, dimensions?.minWidth, dimensions?.maxWidth, viewportLimits.maxWidth);
+				root.style.width = `${nextWidth}px`;
 			}
 			if (height !== null) {
-				const h = constrainHeight(root, height, ctx.dimensions, ctx.constrainToViewport, ctx.constrainOffset);
-				root.style.height = `${h}px`;
+				const nextHeight = clampDimension(height, dimensions?.minHeight, dimensions?.maxHeight, viewportLimits.maxHeight);
+				root.style.height = `${nextHeight}px`;
+			}
+			const resizedRect = root.getBoundingClientRect();
+			if (width !== null) {
+				valueNowRef.current = resizedRect.width;
+				handle.setAttribute("aria-valuenow", String(Math.round(resizedRect.width)));
 			}
+			onSizeChange?.({
+				width: resizedRect.width,
+				height: resizedRect.height
+			});
 		};
 		const onStart = (e) => {
 			if ("button" in e && e.button !== 0) return;
 			e.stopPropagation();
 			e.preventDefault();
-			const root = ctx.rootRef.current;
+			if (!hasWidth && !hasHeight) return;
+			const root = ctxRef.current.rootRef.current;
 			if (!root) return;
 			const point = "touches" in e ? e.touches[0] : e;
 			startX = point.clientX;
@@ -80,6 +86,7 @@ const FloatingWindowResizeHandle = factory((_props) => {
 			isResizing = true;
 			document.body.style.userSelect = "none";
 			document.body.style.webkitUserSelect = "none";
+			ctxRef.current.onResizeStart?.();
 			document.addEventListener("mousemove", onMove, { signal });
 			document.addEventListener("mouseup", onEnd, { signal });
 			document.addEventListener("touchmove", onMove, {
@@ -87,6 +94,7 @@ const FloatingWindowResizeHandle = factory((_props) => {
 				passive: false
 			});
 			document.addEventListener("touchend", onEnd, { signal });
+			document.addEventListener("touchcancel", onEnd, { signal });
 		};
 		const onMove = (e) => {
 			if (!isResizing) return;
@@ -101,9 +109,11 @@ const FloatingWindowResizeHandle = factory((_props) => {
 			isResizing = false;
 			document.body.style.userSelect = "";
 			document.body.style.webkitUserSelect = "";
+			ctxRef.current.onResizeEnd?.();
 		};
 		const onKeyDown = (e) => {
-			const root = ctx.rootRef.current;
+			const { dimensions } = ctxRef.current;
+			const root = ctxRef.current.rootRef.current;
 			if (!root) return;
 			const rect = root.getBoundingClientRect();
 			let newWidth = null;
@@ -113,11 +123,11 @@ const FloatingWindowResizeHandle = factory((_props) => {
 			else if (e.key === "ArrowDown" && hasHeight) newHeight = rect.height + KEYBOARD_STEP;
 			else if (e.key === "ArrowUp" && hasHeight) newHeight = rect.height - KEYBOARD_STEP;
 			else if (e.key === "Home") {
-				if (hasWidth) newWidth = ctx.dimensions?.minWidth ?? rect.width;
-				if (hasHeight) newHeight = ctx.dimensions?.minHeight ?? rect.height;
+				if (hasWidth) newWidth = dimensions?.minWidth ?? rect.width;
+				if (hasHeight) newHeight = dimensions?.minHeight ?? rect.height;
 			} else if (e.key === "End") {
-				if (hasWidth) newWidth = ctx.dimensions?.maxWidth ?? rect.width;
-				if (hasHeight) newHeight = ctx.dimensions?.maxHeight ?? rect.height;
+				if (hasWidth) newWidth = dimensions?.maxWidth ?? rect.width;
+				if (hasHeight) newHeight = dimensions?.maxHeight ?? rect.height;
 			}
 			if (newWidth !== null || newHeight !== null) {
 				e.preventDefault();
@@ -131,21 +141,36 @@ const FloatingWindowResizeHandle = factory((_props) => {
 		});
 		handle.addEventListener("keydown", onKeyDown, { signal });
 		return () => {
+			onEnd();
 			controller.abort();
 		};
+	}, [hasWidth, hasHeight]);
+	useEffect(() => {
+		const handle = handleRef.current;
+		if (!handle) return;
+		if (!hasWidth) {
+			valueNowRef.current = null;
+			handle.removeAttribute("aria-valuenow");
+			return;
+		}
+		if (valueNowRef.current !== null) return;
+		const initialWidth = ctx.dimensions?.initialWidth;
+		if (initialWidth == null) {
+			handle.removeAttribute("aria-valuenow");
+			return;
+		}
+		const width = clampDimension(initialWidth, ctx.dimensions?.minWidth, ctx.dimensions?.maxWidth, void 0);
+		handle.setAttribute("aria-valuenow", String(Math.round(width)));
 	}, [
-		ctx.rootRef,
-		ctx.dimensions,
-		ctx.constrainToViewport,
-		ctx.constrainOffset,
 		hasWidth,
-		hasHeight
+		ctx.dimensions?.initialWidth,
+		ctx.dimensions?.minWidth,
+		ctx.dimensions?.maxWidth
 	]);
 	return /* @__PURE__ */ jsx(Box, {
 		ref: useMergedRef(ref, handleRef),
 		role: "separator",
 		"aria-label": "Resize window",
-		"aria-valuenow": ctx.dimensions?.initialWidth,
 		"aria-valuemin": ctx.dimensions?.minWidth,
 		"aria-valuemax": ctx.dimensions?.maxWidth,
 		tabIndex: 0,

package/esm/components/FloatingWindow/FloatingWindowResizeHandle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingWindowResizeHandle.mjs","names":[],"sources":["../../../src/components/FloatingWindow/FloatingWindowResizeHandle.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { useEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { Box, BoxProps, ElementProps, factory, Factory, useProps } from '../../core';\nimport { FloatingWindowDimensions, useFloatingWindowContext } from './FloatingWindow.context';\n\nexport interface FloatingWindowResizeHandleProps extends BoxProps, ElementProps<'div', 'role'> {}\n\nexport type FloatingWindowResizeHandleFactory = Factory<{\n  props: FloatingWindowResizeHandleProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {} satisfies Partial<FloatingWindowResizeHandleProps>;\n\nconst KEYBOARD_STEP = 10;\n\nfunction clampDimension(\n  value: number,\n  min: number | undefined,\n  max: number | undefined,\n  viewportMax: number | undefined\n) {\n  let v = value;\n  if (min != null) {\n    v = Math.max(v, min);\n  }\n  if (max != null) {\n    v = Math.min(v, max);\n  }\n  if (viewportMax != null) {\n    v = Math.min(v, viewportMax);\n  }\n  return v;\n}\n\nfunction getViewportLimits(\n  root: HTMLElement,\n  constrainToViewport: boolean | undefined,\n  constrainOffset: number | undefined\n) {\n  if (!constrainToViewport) {\n    return { maxWidth: undefined, maxHeight: undefined };\n  }\n  const rect = root.getBoundingClientRect();\n  const offset = constrainOffset ?? 0;\n  return {\n    maxWidth: window.innerWidth - rect.left - offset,\n    maxHeight: window.innerHeight - rect.top - offset,\n  };\n}\n\nfunction constrainWidth(\n  root: HTMLElement,\n  width: number,\n  dimensions: FloatingWindowDimensions | undefined,\n  constrainToViewport: boolean | undefined,\n  constrainOffset: number | undefined\n) {\n  const { maxWidth: vpMax } = getViewportLimits(root, constrainToViewport, constrainOffset);\n  return clampDimension(width, dimensions?.minWidth, dimensions?.maxWidth, vpMax);\n}\n\nfunction constrainHeight(\n  root: HTMLElement,\n  height: number,\n  dimensions: FloatingWindowDimensions | undefined,\n  constrainToViewport: boolean | undefined,\n  constrainOffset: number | undefined\n) {\n  const { maxHeight: vpMax } = getViewportLimits(root, constrainToViewport, constrainOffset);\n  return clampDimension(height, dimensions?.minHeight, dimensions?.maxHeight, vpMax);\n}\n\nexport const FloatingWindowResizeHandle = factory<FloatingWindowResizeHandleFactory>((_props) => {\n  const props = useProps('FloatingWindowResizeHandle', defaultProps, _props);\n  const { children, ref, style, ...others } = props;\n  const ctx = useFloatingWindowContext();\n  const handleRef = useRef<HTMLDivElement>(null);\n\n  const hasWidth =\n    ctx.dimensions?.initialWidth != null ||\n    ctx.dimensions?.minWidth != null ||\n    ctx.dimensions?.maxWidth != null;\n  const hasHeight =\n    ctx.dimensions?.initialHeight != null ||\n    ctx.dimensions?.minHeight != null ||\n    ctx.dimensions?.maxHeight != null;\n\n  useEffect(() => {\n    const handle = handleRef.current;\n    if (!handle) {\n      return;\n    }\n\n    const controller = new AbortController();\n    const { signal } = controller;\n    let isResizing = false;\n    let startX = 0;\n    let startY = 0;\n    let startWidth = 0;\n    let startHeight = 0;\n\n    const applySize = (width: number | null, height: number | null) => {\n      const root = ctx.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      if (width !== null) {\n        const w = constrainWidth(\n          root,\n          width,\n          ctx.dimensions,\n          ctx.constrainToViewport,\n          ctx.constrainOffset\n        );\n        root.style.width = `${w}px`;\n        handle.setAttribute('aria-valuenow', String(Math.round(w)));\n      }\n\n      if (height !== null) {\n        const h = constrainHeight(\n          root,\n          height,\n          ctx.dimensions,\n          ctx.constrainToViewport,\n          ctx.constrainOffset\n        );\n        root.style.height = `${h}px`;\n      }\n    };\n\n    const onStart = (e: MouseEvent | TouchEvent) => {\n      if ('button' in e && e.button !== 0) {\n        return;\n      }\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      const root = ctx.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const point = 'touches' in e ? e.touches[0] : e;\n      startX = point.clientX;\n      startY = point.clientY;\n      const rect = root.getBoundingClientRect();\n      startWidth = rect.width;\n      startHeight = rect.height;\n      isResizing = true;\n\n      document.body.style.userSelect = 'none';\n      document.body.style.webkitUserSelect = 'none';\n\n      document.addEventListener('mousemove', onMove, { signal });\n      document.addEventListener('mouseup', onEnd, { signal });\n      document.addEventListener('touchmove', onMove, { signal, passive: false });\n      document.addEventListener('touchend', onEnd, { signal });\n    };\n\n    const onMove = (e: MouseEvent | TouchEvent) => {\n      if (!isResizing) {\n        return;\n      }\n\n      e.preventDefault();\n      const point = 'touches' in e ? e.touches[0] : e;\n      const deltaX = point.clientX - startX;\n      const deltaY = point.clientY - startY;\n      applySize(hasWidth ? startWidth + deltaX : null, hasHeight ? startHeight + deltaY : null);\n    };\n\n    const onEnd = () => {\n      if (!isResizing) {\n        return;\n      }\n\n      isResizing = false;\n      document.body.style.userSelect = '';\n      document.body.style.webkitUserSelect = '';\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      const root = ctx.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const rect = root.getBoundingClientRect();\n      let newWidth: number | null = null;\n      let newHeight: number | null = null;\n\n      if (e.key === 'ArrowRight' && hasWidth) {\n        newWidth = rect.width + KEYBOARD_STEP;\n      } else if (e.key === 'ArrowLeft' && hasWidth) {\n        newWidth = rect.width - KEYBOARD_STEP;\n      } else if (e.key === 'ArrowDown' && hasHeight) {\n        newHeight = rect.height + KEYBOARD_STEP;\n      } else if (e.key === 'ArrowUp' && hasHeight) {\n        newHeight = rect.height - KEYBOARD_STEP;\n      } else if (e.key === 'Home') {\n        if (hasWidth) {\n          newWidth = ctx.dimensions?.minWidth ?? rect.width;\n        }\n        if (hasHeight) {\n          newHeight = ctx.dimensions?.minHeight ?? rect.height;\n        }\n      } else if (e.key === 'End') {\n        if (hasWidth) {\n          newWidth = ctx.dimensions?.maxWidth ?? rect.width;\n        }\n        if (hasHeight) {\n          newHeight = ctx.dimensions?.maxHeight ?? rect.height;\n        }\n      }\n\n      if (newWidth !== null || newHeight !== null) {\n        e.preventDefault();\n        applySize(newWidth, newHeight);\n      }\n    };\n\n    handle.addEventListener('mousedown', onStart, { signal });\n    handle.addEventListener('touchstart', onStart, { signal, passive: false });\n    handle.addEventListener('keydown', onKeyDown, { signal });\n\n    return () => {\n      controller.abort();\n    };\n  }, [\n    ctx.rootRef,\n    ctx.dimensions,\n    ctx.constrainToViewport,\n    ctx.constrainOffset,\n    hasWidth,\n    hasHeight,\n  ]);\n\n  return (\n    <Box\n      ref={useMergedRef(ref, handleRef)}\n      role=\"separator\"\n      aria-label=\"Resize window\"\n      aria-valuenow={ctx.dimensions?.initialWidth}\n      aria-valuemin={ctx.dimensions?.minWidth}\n      aria-valuemax={ctx.dimensions?.maxWidth}\n      tabIndex={0}\n      {...others}\n      style={[{ touchAction: 'none' }, style]}\n    >\n      {children}\n    </Box>\n  );\n});\n\nFloatingWindowResizeHandle.displayName = '@mantine/core/FloatingWindowResizeHandle';\n"],"mappings":"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"}
+{"version":3,"file":"FloatingWindowResizeHandle.mjs","names":[],"sources":["../../../src/components/FloatingWindow/FloatingWindowResizeHandle.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-deprecated */\nimport { useEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { Box, BoxProps, ElementProps, factory, Factory, useProps } from '../../core';\nimport { useFloatingWindowContext } from './FloatingWindow.context';\n\nexport interface FloatingWindowResizeHandleProps extends BoxProps, ElementProps<'div', 'role'> {}\n\nexport type FloatingWindowResizeHandleFactory = Factory<{\n  props: FloatingWindowResizeHandleProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {} satisfies Partial<FloatingWindowResizeHandleProps>;\n\nconst KEYBOARD_STEP = 10;\n\nfunction clampDimension(\n  value: number,\n  min: number | undefined,\n  max: number | undefined,\n  viewportMax: number | undefined\n) {\n  let v = value;\n  if (min != null) {\n    v = Math.max(v, min);\n  }\n  if (max != null) {\n    v = Math.min(v, max);\n  }\n  if (viewportMax != null) {\n    v = Math.min(v, viewportMax);\n  }\n  return v;\n}\n\nfunction getViewportLimits(\n  rect: DOMRect,\n  constrainToViewport: boolean | undefined,\n  constrainOffset: number | undefined\n) {\n  if (!constrainToViewport) {\n    return { maxWidth: undefined, maxHeight: undefined };\n  }\n  const offset = constrainOffset ?? 0;\n  return {\n    maxWidth: window.innerWidth - rect.left - offset,\n    maxHeight: window.innerHeight - rect.top - offset,\n  };\n}\n\nexport const FloatingWindowResizeHandle = factory<FloatingWindowResizeHandleFactory>((_props) => {\n  const props = useProps('FloatingWindowResizeHandle', defaultProps, _props);\n  const { children, ref, style, ...others } = props;\n  const ctx = useFloatingWindowContext();\n  const handleRef = useRef<HTMLDivElement>(null);\n  const ctxRef = useRef(ctx);\n  ctxRef.current = ctx;\n  const valueNowRef = useRef<number | null>(null);\n\n  const hasWidth =\n    ctx.dimensions?.initialWidth != null ||\n    ctx.dimensions?.minWidth != null ||\n    ctx.dimensions?.maxWidth != null;\n  const hasHeight =\n    ctx.dimensions?.initialHeight != null ||\n    ctx.dimensions?.minHeight != null ||\n    ctx.dimensions?.maxHeight != null;\n\n  useEffect(() => {\n    const handle = handleRef.current;\n    if (!handle) {\n      return;\n    }\n\n    const controller = new AbortController();\n    const { signal } = controller;\n    let isResizing = false;\n    let startX = 0;\n    let startY = 0;\n    let startWidth = 0;\n    let startHeight = 0;\n\n    const applySize = (width: number | null, height: number | null) => {\n      if (width === null && height === null) {\n        return;\n      }\n\n      const { dimensions, constrainToViewport, constrainOffset, onSizeChange } = ctxRef.current;\n      const root = ctxRef.current.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const rect = root.getBoundingClientRect();\n      const viewportLimits = getViewportLimits(rect, constrainToViewport, constrainOffset);\n\n      if (width !== null) {\n        const nextWidth = clampDimension(\n          width,\n          dimensions?.minWidth,\n          dimensions?.maxWidth,\n          viewportLimits.maxWidth\n        );\n        root.style.width = `${nextWidth}px`;\n      }\n\n      if (height !== null) {\n        const nextHeight = clampDimension(\n          height,\n          dimensions?.minHeight,\n          dimensions?.maxHeight,\n          viewportLimits.maxHeight\n        );\n        root.style.height = `${nextHeight}px`;\n      }\n\n      const resizedRect = root.getBoundingClientRect();\n\n      if (width !== null) {\n        valueNowRef.current = resizedRect.width;\n        handle.setAttribute('aria-valuenow', String(Math.round(resizedRect.width)));\n      }\n\n      onSizeChange?.({ width: resizedRect.width, height: resizedRect.height });\n    };\n\n    const onStart = (e: MouseEvent | TouchEvent) => {\n      if ('button' in e && e.button !== 0) {\n        return;\n      }\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      if (!hasWidth && !hasHeight) {\n        return;\n      }\n\n      const root = ctxRef.current.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const point = 'touches' in e ? e.touches[0] : e;\n      startX = point.clientX;\n      startY = point.clientY;\n      const rect = root.getBoundingClientRect();\n      startWidth = rect.width;\n      startHeight = rect.height;\n      isResizing = true;\n\n      document.body.style.userSelect = 'none';\n      document.body.style.webkitUserSelect = 'none';\n\n      ctxRef.current.onResizeStart?.();\n\n      document.addEventListener('mousemove', onMove, { signal });\n      document.addEventListener('mouseup', onEnd, { signal });\n      document.addEventListener('touchmove', onMove, { signal, passive: false });\n      document.addEventListener('touchend', onEnd, { signal });\n      document.addEventListener('touchcancel', onEnd, { signal });\n    };\n\n    const onMove = (e: MouseEvent | TouchEvent) => {\n      if (!isResizing) {\n        return;\n      }\n\n      e.preventDefault();\n      const point = 'touches' in e ? e.touches[0] : e;\n      const deltaX = point.clientX - startX;\n      const deltaY = point.clientY - startY;\n      applySize(hasWidth ? startWidth + deltaX : null, hasHeight ? startHeight + deltaY : null);\n    };\n\n    const onEnd = () => {\n      if (!isResizing) {\n        return;\n      }\n\n      isResizing = false;\n      document.body.style.userSelect = '';\n      document.body.style.webkitUserSelect = '';\n      ctxRef.current.onResizeEnd?.();\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      const { dimensions } = ctxRef.current;\n      const root = ctxRef.current.rootRef.current;\n      if (!root) {\n        return;\n      }\n\n      const rect = root.getBoundingClientRect();\n      let newWidth: number | null = null;\n      let newHeight: number | null = null;\n\n      if (e.key === 'ArrowRight' && hasWidth) {\n        newWidth = rect.width + KEYBOARD_STEP;\n      } else if (e.key === 'ArrowLeft' && hasWidth) {\n        newWidth = rect.width - KEYBOARD_STEP;\n      } else if (e.key === 'ArrowDown' && hasHeight) {\n        newHeight = rect.height + KEYBOARD_STEP;\n      } else if (e.key === 'ArrowUp' && hasHeight) {\n        newHeight = rect.height - KEYBOARD_STEP;\n      } else if (e.key === 'Home') {\n        if (hasWidth) {\n          newWidth = dimensions?.minWidth ?? rect.width;\n        }\n        if (hasHeight) {\n          newHeight = dimensions?.minHeight ?? rect.height;\n        }\n      } else if (e.key === 'End') {\n        if (hasWidth) {\n          newWidth = dimensions?.maxWidth ?? rect.width;\n        }\n        if (hasHeight) {\n          newHeight = dimensions?.maxHeight ?? rect.height;\n        }\n      }\n\n      if (newWidth !== null || newHeight !== null) {\n        e.preventDefault();\n        applySize(newWidth, newHeight);\n      }\n    };\n\n    handle.addEventListener('mousedown', onStart, { signal });\n    handle.addEventListener('touchstart', onStart, { signal, passive: false });\n    handle.addEventListener('keydown', onKeyDown, { signal });\n\n    return () => {\n      onEnd();\n      controller.abort();\n    };\n  }, [hasWidth, hasHeight]);\n\n  useEffect(() => {\n    const handle = handleRef.current;\n    if (!handle) {\n      return;\n    }\n\n    if (!hasWidth) {\n      valueNowRef.current = null;\n      handle.removeAttribute('aria-valuenow');\n      return;\n    }\n\n    if (valueNowRef.current !== null) {\n      return;\n    }\n\n    const initialWidth = ctx.dimensions?.initialWidth;\n\n    if (initialWidth == null) {\n      handle.removeAttribute('aria-valuenow');\n      return;\n    }\n\n    const width = clampDimension(\n      initialWidth,\n      ctx.dimensions?.minWidth,\n      ctx.dimensions?.maxWidth,\n      undefined\n    );\n\n    handle.setAttribute('aria-valuenow', String(Math.round(width)));\n  }, [hasWidth, ctx.dimensions?.initialWidth, ctx.dimensions?.minWidth, ctx.dimensions?.maxWidth]);\n\n  return (\n    <Box\n      ref={useMergedRef(ref, handleRef)}\n      role=\"separator\"\n      aria-label=\"Resize window\"\n      aria-valuemin={ctx.dimensions?.minWidth}\n      aria-valuemax={ctx.dimensions?.maxWidth}\n      tabIndex={0}\n      {...others}\n      style={[{ touchAction: 'none' }, style]}\n    >\n      {children}\n    </Box>\n  );\n});\n\nFloatingWindowResizeHandle.displayName = '@mantine/core/FloatingWindowResizeHandle';\n"],"mappings":"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"}

package/esm/components/Input/InputLabel/InputLabel.mjs

@@ -34,13 +34,15 @@ const InputLabel = factory((_props) => {
 	});
 	const ctx = use(InputWrapperContext);
 	const getStyles = ctx?.getStyles || _getStyles;
+	const rootElement = others.component || labelElement;
+	const supportsHtmlFor = typeof rootElement !== "string" || rootElement === "label";
 	return /* @__PURE__ */ jsxs(Box, {
 		...getStyles("label", ctx?.getStyles ? {
 			className,
 			style
 		} : void 0),
 		component: labelElement,
-		htmlFor: labelElement === "label" ? htmlFor : void 0,
+		htmlFor: supportsHtmlFor ? htmlFor : void 0,
 		mod: [{ required }, mod],
 		onMouseDown: (event) => {
 			onMouseDown?.(event);

package/esm/components/Input/InputLabel/InputLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.mjs","names":["classes"],"sources":["../../../../src/components/Input/InputLabel/InputLabel.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputLabelStylesNames = 'label' | 'required';\nexport type InputLabelCssVariables = {\n  label: '--input-asterisk-color' | '--input-label-size';\n};\n\nexport interface InputLabelProps\n  extends BoxProps, StylesApiProps<InputLabelFactory>, ElementProps<'label'> {\n  __staticSelector?: string;\n\n  /** If set, the required asterisk is displayed next to the label */\n  required?: boolean;\n\n  /** Controls label `font-size` @default 'sm' */\n  size?: MantineFontSize;\n\n  /** Root element of the label @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputLabelFactory = Factory<{\n  props: InputLabelProps;\n  ref: HTMLLabelElement;\n  stylesNames: InputLabelStylesNames;\n  vars: InputLabelCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n} satisfies Partial<InputLabelProps>;\n\nconst varsResolver = createVarsResolver<InputLabelFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n}));\n\nexport const InputLabel = factory<InputLabelFactory>((_props) => {\n  const props = useProps('InputLabel', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    labelElement,\n    required,\n    htmlFor,\n    onMouseDown,\n    children,\n    __staticSelector,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<InputLabelFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'label',\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(InputWrapperContext);\n  const getStyles = ctx?.getStyles || _getStyles;\n\n  return (\n    <Box\n      {...getStyles('label', ctx?.getStyles ? { className, style } : undefined)}\n      component={labelElement as 'label'}\n      htmlFor={labelElement === 'label' ? htmlFor : undefined}\n      mod={[{ required }, mod]}\n      onMouseDown={(event) => {\n        onMouseDown?.(event);\n        if (!event.defaultPrevented && event.detail > 1) {\n          event.preventDefault();\n        }\n      }}\n      {...others}\n    >\n      {children}\n      {required && (\n        <span {...getStyles('required')} aria-hidden>\n          {' *'}\n        </span>\n      )}\n    </Box>\n  );\n});\n\nInputLabel.classes = classes;\nInputLabel.varsResolver = varsResolver;\nInputLabel.displayName = '@mantine/core/InputLabel';\n"],"mappings":";;;;;;;;;;;;AA2CA,MAAM,eAAe,EACnB,cAAc,QAChB;AAEA,MAAM,eAAe,oBAAuC,GAAG,EAAE,YAAY,EAC3E,OAAO;CACL,sBAAsB,YAAY,IAAI;CACtC,0BAA0B,KAAA;AAC5B,EACF,EAAE;AAEF,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,UACA,SACA,aACA,UACA,kBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAa,UAA6B;EAC9C,MAAM,CAAC,gBAAgB,gBAAgB;EACvC;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,YAAY,KAAK,aAAa;CAEpC,OACE,qBAAC,KAAD;EACE,GAAI,UAAU,SAAS,KAAK,YAAY;GAAE;GAAW;EAAM,IAAI,KAAA,CAAS;EACxE,WAAW;EACX,SAAS,iBAAiB,UAAU,UAAU,KAAA;EAC9C,KAAK,CAAC,EAAE,SAAS,GAAG,GAAG;EACvB,cAAc,UAAU;GACtB,cAAc,KAAK;GACnB,IAAI,CAAC,MAAM,oBAAoB,MAAM,SAAS,GAC5C,MAAM,eAAe;EAEzB;EACA,GAAI;YAXN,CAaG,UACA,YACC,oBAAC,QAAD;GAAM,GAAI,UAAU,UAAU;GAAG,eAAA;aAC9B;EACG,CAAA,CAEL;;AAET,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}
+{"version":3,"file":"InputLabel.mjs","names":["classes"],"sources":["../../../../src/components/Input/InputLabel/InputLabel.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport classes from '../Input.module.css';\n\nexport type InputLabelStylesNames = 'label' | 'required';\nexport type InputLabelCssVariables = {\n  label: '--input-asterisk-color' | '--input-label-size';\n};\n\nexport interface InputLabelProps\n  extends BoxProps, StylesApiProps<InputLabelFactory>, ElementProps<'label'> {\n  __staticSelector?: string;\n\n  /** If set, the required asterisk is displayed next to the label */\n  required?: boolean;\n\n  /** Controls label `font-size` @default 'sm' */\n  size?: MantineFontSize;\n\n  /** Root element of the label @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputLabelFactory = Factory<{\n  props: InputLabelProps;\n  ref: HTMLLabelElement;\n  stylesNames: InputLabelStylesNames;\n  vars: InputLabelCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n} satisfies Partial<InputLabelProps>;\n\nconst varsResolver = createVarsResolver<InputLabelFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n}));\n\nexport const InputLabel = factory<InputLabelFactory>((_props) => {\n  const props = useProps('InputLabel', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    labelElement,\n    required,\n    htmlFor,\n    onMouseDown,\n    children,\n    __staticSelector,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const _getStyles = useStyles<InputLabelFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'label',\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(InputWrapperContext);\n  const getStyles = ctx?.getStyles || _getStyles;\n  const rootElement = (others as { component?: React.ElementType }).component || labelElement;\n  const supportsHtmlFor = typeof rootElement !== 'string' || rootElement === 'label';\n\n  return (\n    <Box\n      {...getStyles('label', ctx?.getStyles ? { className, style } : undefined)}\n      component={labelElement as 'label'}\n      htmlFor={supportsHtmlFor ? htmlFor : undefined}\n      mod={[{ required }, mod]}\n      onMouseDown={(event) => {\n        onMouseDown?.(event);\n        if (!event.defaultPrevented && event.detail > 1) {\n          event.preventDefault();\n        }\n      }}\n      {...others}\n    >\n      {children}\n      {required && (\n        <span {...getStyles('required')} aria-hidden>\n          {' *'}\n        </span>\n      )}\n    </Box>\n  );\n});\n\nInputLabel.classes = classes;\nInputLabel.varsResolver = varsResolver;\nInputLabel.displayName = '@mantine/core/InputLabel';\n"],"mappings":";;;;;;;;;;;;AA2CA,MAAM,eAAe,EACnB,cAAc,QAChB;AAEA,MAAM,eAAe,oBAAuC,GAAG,EAAE,YAAY,EAC3E,OAAO;CACL,sBAAsB,YAAY,IAAI;CACtC,0BAA0B,KAAA;AAC5B,EACF,EAAE;AAEF,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,UACA,SACA,aACA,UACA,kBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAa,UAA6B;EAC9C,MAAM,CAAC,gBAAgB,gBAAgB;EACvC;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,YAAY,KAAK,aAAa;CACpC,MAAM,cAAe,OAA6C,aAAa;CAC/E,MAAM,kBAAkB,OAAO,gBAAgB,YAAY,gBAAgB;CAE3E,OACE,qBAAC,KAAD;EACE,GAAI,UAAU,SAAS,KAAK,YAAY;GAAE;GAAW;EAAM,IAAI,KAAA,CAAS;EACxE,WAAW;EACX,SAAS,kBAAkB,UAAU,KAAA;EACrC,KAAK,CAAC,EAAE,SAAS,GAAG,GAAG;EACvB,cAAc,UAAU;GACtB,cAAc,KAAK;GACnB,IAAI,CAAC,MAAM,oBAAoB,MAAM,SAAS,GAC5C,MAAM,eAAe;EAEzB;EACA,GAAI;YAXN,CAaG,UACA,YACC,oBAAC,QAAD;GAAM,GAAI,UAAU,UAAU;GAAG,eAAA;aAC9B;EACG,CAAA,CAEL;;AAET,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/esm/components/Input/InputWrapper/InputWrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.mjs","names":["useId","classes"],"sources":["../../../../src/components/Input/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport {\n  InputDescription,\n  InputDescriptionCssVariables,\n  InputDescriptionProps,\n  InputDescriptionStylesNames,\n} from '../InputDescription/InputDescription';\nimport {\n  InputError,\n  InputErrorCssVariables,\n  InputErrorProps,\n  InputErrorStylesNames,\n} from '../InputError/InputError';\nimport {\n  InputLabel,\n  InputLabelCssVariables,\n  InputLabelProps,\n  InputLabelStylesNames,\n} from '../InputLabel/InputLabel';\nimport {\n  InputSuccess,\n  InputSuccessCssVariables,\n  InputSuccessProps,\n  InputSuccessStylesNames,\n} from '../InputSuccess/InputSuccess';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport { getInputOffsets } from './get-input-offsets/get-input-offsets';\nimport classes from '../Input.module.css';\n\nexport type InputWrapperCssVariables = InputLabelCssVariables &\n  InputErrorCssVariables &\n  InputSuccessCssVariables &\n  InputDescriptionCssVariables;\n\nexport type InputWrapperStylesNames =\n  | 'root'\n  | InputLabelStylesNames\n  | InputDescriptionStylesNames\n  | InputErrorStylesNames\n  | InputSuccessStylesNames;\n\nexport interface __InputWrapperProps {\n  /** Contents of `Input.Label` component. If not set, label is not displayed. */\n  label?: React.ReactNode;\n\n  /** Contents of `Input.Description` component. If not set, description is not displayed. */\n  description?: React.ReactNode;\n\n  /** Contents of `Input.Error` component. If not set, error is not displayed. */\n  error?: React.ReactNode;\n\n  /** Contents of `Input.Success` component. If not set, success is not displayed. */\n  success?: React.ReactNode;\n\n  /** Adds required attribute to the input and a red asterisk on the right side of label @default false */\n  required?: boolean;\n\n  /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default false */\n  withAsterisk?: boolean;\n\n  /** Props passed down to the `Input.Label` component */\n  labelProps?: InputLabelProps & DataAttributes;\n\n  /** Props passed down to the `Input.Description` component */\n  descriptionProps?: InputDescriptionProps & DataAttributes;\n\n  /** Props passed down to the `Input.Error` component */\n  errorProps?: InputErrorProps & DataAttributes;\n\n  /** Props passed down to the `Input.Success` component */\n  successProps?: InputSuccessProps & DataAttributes;\n\n  /** Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. @default React.Fragment */\n  inputContainer?: (children: React.ReactNode) => React.ReactNode;\n\n  /** Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. @default ['label', 'description', 'input', 'error'] */\n  inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];\n}\n\nexport interface InputWrapperProps\n  extends __InputWrapperProps, BoxProps, StylesApiProps<InputWrapperFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces Input.Wrapper props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Static id used as base to generate `aria-` attributes, by default generates random id */\n  id?: string;\n\n  /** Controls size of `Input.Label`, `Input.Description` and `Input.Error` components */\n  size?: MantineFontSize;\n\n  /** Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputWrapperFactory = Factory<{\n  props: InputWrapperProps;\n  ref: HTMLDivElement;\n  stylesNames: InputWrapperStylesNames;\n  vars: InputWrapperCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n  inputContainer: (children) => children,\n  inputWrapperOrder: ['label', 'description', 'input', 'error'],\n} satisfies Partial<InputWrapperProps>;\n\nconst varsResolver = createVarsResolver<InputWrapperFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n\n  error: {\n    '--input-error-size': size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  success: {\n    '--input-success-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  description: {\n    '--input-description-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputWrapper = factory<InputWrapperFactory>((_props) => {\n  const props = useProps('InputWrapper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    variant,\n    __staticSelector,\n    inputContainer,\n    inputWrapperOrder,\n    label,\n    error,\n    success,\n    description,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    successProps,\n    labelElement,\n    children,\n    withAsterisk,\n    id,\n    required,\n    __stylesApiProps,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<InputWrapperFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const sharedProps = {\n    size,\n    variant,\n    __staticSelector,\n  };\n\n  const idBase = useId(id);\n  const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n  const errorId = errorProps?.id || `${idBase}-error`;\n  const successId = successProps?.id || `${idBase}-success`;\n  const descriptionId = descriptionProps?.id || `${idBase}-description`;\n  const inputId = idBase;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasSuccess = !!success && typeof success !== 'boolean' && !error;\n  const hasDescription = !!description;\n  const errorRendered = hasError && inputWrapperOrder.includes('error');\n  const successRendered = hasSuccess && inputWrapperOrder.includes('error');\n  const descriptionRendered = hasDescription && inputWrapperOrder.includes('description');\n  const _describedBy = `${errorRendered ? errorId : ''} ${successRendered ? successId : ''} ${descriptionRendered ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n  const labelId = labelProps?.id || `${idBase}-label`;\n\n  const _label = label && (\n    <InputLabel\n      key=\"label\"\n      labelElement={labelElement}\n      id={labelId}\n      htmlFor={inputId}\n      required={isRequired}\n      {...sharedProps}\n      {...labelProps}\n    >\n      {label}\n    </InputLabel>\n  );\n\n  const _description = hasDescription && (\n    <InputDescription\n      key=\"description\"\n      {...descriptionProps}\n      {...sharedProps}\n      size={descriptionProps?.size || sharedProps.size}\n      id={descriptionProps?.id || descriptionId}\n    >\n      {description}\n    </InputDescription>\n  );\n\n  const _input = <Fragment key=\"input\">{inputContainer(children)}</Fragment>;\n\n  const _error = hasError && (\n    <InputError\n      {...errorProps}\n      {...sharedProps}\n      size={errorProps?.size || sharedProps.size}\n      key=\"error\"\n      id={errorProps?.id || errorId}\n    >\n      {error}\n    </InputError>\n  );\n\n  const _success = hasSuccess && (\n    <InputSuccess\n      {...successProps}\n      {...sharedProps}\n      size={successProps?.size || sharedProps.size}\n      key=\"success\"\n      id={successProps?.id || successId}\n    >\n      {success}\n    </InputSuccess>\n  );\n\n  const content = inputWrapperOrder.map((part) => {\n    switch (part) {\n      case 'label':\n        return _label;\n      case 'input':\n        return _input;\n      case 'description':\n        return _description;\n      case 'error':\n        return _error || _success;\n      default:\n        return null;\n    }\n  });\n\n  return (\n    <InputWrapperContext\n      value={{\n        getStyles,\n        describedBy,\n        inputId,\n        labelId,\n        ...getInputOffsets(inputWrapperOrder, { hasDescription, hasError: hasError || hasSuccess }),\n      }}\n    >\n      <Box\n        variant={variant}\n        size={size}\n        mod={[{ error: !!error, success: !!success && !error }, mod]}\n        id={labelElement === 'label' ? undefined : id}\n        {...getStyles('root')}\n        {...others}\n      >\n        {content}\n      </Box>\n    </InputWrapperContext>\n  );\n});\n\nInputWrapper.classes = classes;\nInputWrapper.varsResolver = varsResolver;\nInputWrapper.displayName = '@mantine/core/InputWrapper';\n"],"mappings":"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"}
+{"version":3,"file":"InputWrapper.mjs","names":["useId","classes"],"sources":["../../../../src/components/Input/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineFontSize,\n  PlaceholderPolymorphicProps,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport {\n  InputDescription,\n  InputDescriptionCssVariables,\n  InputDescriptionProps,\n  InputDescriptionStylesNames,\n} from '../InputDescription/InputDescription';\nimport {\n  InputError,\n  InputErrorCssVariables,\n  InputErrorProps,\n  InputErrorStylesNames,\n} from '../InputError/InputError';\nimport {\n  InputLabel,\n  InputLabelCssVariables,\n  InputLabelProps,\n  InputLabelStylesNames,\n} from '../InputLabel/InputLabel';\nimport {\n  InputSuccess,\n  InputSuccessCssVariables,\n  InputSuccessProps,\n  InputSuccessStylesNames,\n} from '../InputSuccess/InputSuccess';\nimport { InputWrapperContext } from '../InputWrapper.context';\nimport { getInputOffsets } from './get-input-offsets/get-input-offsets';\nimport classes from '../Input.module.css';\n\nexport type InputWrapperCssVariables = InputLabelCssVariables &\n  InputErrorCssVariables &\n  InputSuccessCssVariables &\n  InputDescriptionCssVariables;\n\nexport type InputWrapperStylesNames =\n  | 'root'\n  | InputLabelStylesNames\n  | InputDescriptionStylesNames\n  | InputErrorStylesNames\n  | InputSuccessStylesNames;\n\nexport interface __InputWrapperProps {\n  /** Contents of `Input.Label` component. If not set, label is not displayed. */\n  label?: React.ReactNode;\n\n  /** Contents of `Input.Description` component. If not set, description is not displayed. */\n  description?: React.ReactNode;\n\n  /** Contents of `Input.Error` component. If not set, error is not displayed. */\n  error?: React.ReactNode;\n\n  /** Contents of `Input.Success` component. If not set, success is not displayed. */\n  success?: React.ReactNode;\n\n  /** Adds required attribute to the input and a red asterisk on the right side of label @default false */\n  required?: boolean;\n\n  /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default false */\n  withAsterisk?: boolean;\n\n  /** Props passed down to the `Input.Label` component */\n  labelProps?: InputLabelProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Description` component */\n  descriptionProps?: InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Error` component */\n  errorProps?: InputErrorProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Props passed down to the `Input.Success` component */\n  successProps?: InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps;\n\n  /** Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. @default React.Fragment */\n  inputContainer?: (children: React.ReactNode) => React.ReactNode;\n\n  /** Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. @default ['label', 'description', 'input', 'error'] */\n  inputWrapperOrder?: ('label' | 'input' | 'description' | 'error')[];\n}\n\nexport interface InputWrapperProps\n  extends __InputWrapperProps, BoxProps, StylesApiProps<InputWrapperFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Props passed to Styles API context, replaces Input.Wrapper props */\n  __stylesApiProps?: Record<string, any>;\n\n  /** Static id used as base to generate `aria-` attributes, by default generates random id */\n  id?: string;\n\n  /** Controls size of `Input.Label`, `Input.Description` and `Input.Error` components */\n  size?: MantineFontSize;\n\n  /** Root element for the label. Use `'div'` when wrapper contains multiple input elements and you need to handle `htmlFor` manually. @default 'label' */\n  labelElement?: 'label' | 'div';\n}\n\nexport type InputWrapperFactory = Factory<{\n  props: InputWrapperProps;\n  ref: HTMLDivElement;\n  stylesNames: InputWrapperStylesNames;\n  vars: InputWrapperCssVariables;\n}>;\n\nconst defaultProps = {\n  labelElement: 'label',\n  inputContainer: (children) => children,\n  inputWrapperOrder: ['label', 'description', 'input', 'error'],\n} satisfies Partial<InputWrapperProps>;\n\nconst varsResolver = createVarsResolver<InputWrapperFactory>((_, { size }) => ({\n  label: {\n    '--input-label-size': getFontSize(size),\n    '--input-asterisk-color': undefined,\n  },\n\n  error: {\n    '--input-error-size': size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  success: {\n    '--input-success-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n\n  description: {\n    '--input-description-size':\n      size === undefined ? undefined : `calc(${getFontSize(size)} - ${rem(2)})`,\n  },\n}));\n\nexport const InputWrapper = factory<InputWrapperFactory>((_props) => {\n  const props = useProps('InputWrapper', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    variant,\n    __staticSelector,\n    inputContainer,\n    inputWrapperOrder,\n    label,\n    error,\n    success,\n    description,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    successProps,\n    labelElement,\n    children,\n    withAsterisk,\n    id,\n    required,\n    __stylesApiProps,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<InputWrapperFactory>({\n    name: ['InputWrapper', __staticSelector],\n    props: __stylesApiProps || props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const sharedProps = {\n    size,\n    variant,\n    __staticSelector,\n  };\n\n  const idBase = useId(id);\n  const isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;\n  const errorId = errorProps?.id || `${idBase}-error`;\n  const successId = successProps?.id || `${idBase}-success`;\n  const descriptionId = descriptionProps?.id || `${idBase}-description`;\n  const inputId = idBase;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasSuccess = !!success && typeof success !== 'boolean' && !error;\n  const hasDescription = !!description;\n  const errorRendered = hasError && inputWrapperOrder.includes('error');\n  const successRendered = hasSuccess && inputWrapperOrder.includes('error');\n  const descriptionRendered = hasDescription && inputWrapperOrder.includes('description');\n  const _describedBy = `${errorRendered ? errorId : ''} ${successRendered ? successId : ''} ${descriptionRendered ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n  const labelId = labelProps?.id || `${idBase}-label`;\n\n  const _label = label && (\n    <InputLabel\n      key=\"label\"\n      labelElement={labelElement}\n      id={labelId}\n      htmlFor={inputId}\n      required={isRequired}\n      {...sharedProps}\n      {...labelProps}\n    >\n      {label}\n    </InputLabel>\n  );\n\n  const _description = hasDescription && (\n    <InputDescription\n      key=\"description\"\n      {...descriptionProps}\n      {...sharedProps}\n      size={descriptionProps?.size || sharedProps.size}\n      id={descriptionProps?.id || descriptionId}\n    >\n      {description}\n    </InputDescription>\n  );\n\n  const _input = <Fragment key=\"input\">{inputContainer(children)}</Fragment>;\n\n  const _error = hasError && (\n    <InputError\n      {...errorProps}\n      {...sharedProps}\n      size={errorProps?.size || sharedProps.size}\n      key=\"error\"\n      id={errorProps?.id || errorId}\n    >\n      {error}\n    </InputError>\n  );\n\n  const _success = hasSuccess && (\n    <InputSuccess\n      {...successProps}\n      {...sharedProps}\n      size={successProps?.size || sharedProps.size}\n      key=\"success\"\n      id={successProps?.id || successId}\n    >\n      {success}\n    </InputSuccess>\n  );\n\n  const content = inputWrapperOrder.map((part) => {\n    switch (part) {\n      case 'label':\n        return _label;\n      case 'input':\n        return _input;\n      case 'description':\n        return _description;\n      case 'error':\n        return _error || _success;\n      default:\n        return null;\n    }\n  });\n\n  return (\n    <InputWrapperContext\n      value={{\n        getStyles,\n        describedBy,\n        inputId,\n        labelId,\n        ...getInputOffsets(inputWrapperOrder, { hasDescription, hasError: hasError || hasSuccess }),\n      }}\n    >\n      <Box\n        variant={variant}\n        size={size}\n        mod={[{ error: !!error, success: !!success && !error }, mod]}\n        id={labelElement === 'label' ? undefined : id}\n        {...getStyles('root')}\n        {...others}\n      >\n        {content}\n      </Box>\n    </InputWrapperContext>\n  );\n});\n\nInputWrapper.classes = classes;\nInputWrapper.varsResolver = varsResolver;\nInputWrapper.displayName = '@mantine/core/InputWrapper';\n"],"mappings":"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"}

package/lib/components/FloatingWindow/FloatingWindow.context.d.ts

@@ -12,10 +12,19 @@ export interface FloatingWindowDimensions {
     /** Maximum height of the floating window in px */
     maxHeight?: number;
 }
+export interface FloatingWindowSize {
+    /** Width of the floating window in px */
+    width: number;
+    /** Height of the floating window in px */
+    height: number;
+}
 export interface FloatingWindowContextValue {
     rootRef: React.RefObject<HTMLDivElement | null>;
     dimensions: FloatingWindowDimensions | undefined;
     constrainToViewport: boolean | undefined;
     constrainOffset: number | undefined;
+    onResizeStart: (() => void) | undefined;
+    onResizeEnd: (() => void) | undefined;
+    onSizeChange: ((size: FloatingWindowSize) => void) | undefined;
 }
 export declare const FloatingWindowProvider: import("react").Context<FloatingWindowContextValue | null>, useFloatingWindowContext: () => FloatingWindowContextValue;

package/lib/components/FloatingWindow/FloatingWindow.d.ts

@@ -2,7 +2,7 @@ import { SetFloatingWindowPosition, UseFloatingWindowOptions } from '@mantine/ho
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
 import { PaperBaseProps } from '../Paper';
 import { PortalProps } from '../Portal';
-import { FloatingWindowDimensions } from './FloatingWindow.context';
+import { FloatingWindowDimensions, FloatingWindowSize } from './FloatingWindow.context';
 import { FloatingWindowResizeHandle } from './FloatingWindowResizeHandle';
 export type FloatingWindowStylesNames = 'root';
 export interface FloatingWindowProps extends UseFloatingWindowOptions, PaperBaseProps, BoxProps, StylesApiProps<FloatingWindowFactory>, ElementProps<'div', keyof UseFloatingWindowOptions> {
@@ -16,6 +16,12 @@ export interface FloatingWindowProps extends UseFloatingWindowOptions, PaperBase
     zIndex?: React.CSSProperties['zIndex'];
     /** Dimensions configuration for resizable floating window */
     dimensions?: FloatingWindowDimensions;
+    /** Called when the window is resized with `FloatingWindow.ResizeHandle` */
+    onSizeChange?: (size: FloatingWindowSize) => void;
+    /** Called when the resize with `FloatingWindow.ResizeHandle` starts. Not called for keyboard resize. */
+    onResizeStart?: () => void;
+    /** Called when the resize with `FloatingWindow.ResizeHandle` stops. Not called for keyboard resize. */
+    onResizeEnd?: () => void;
 }
 export type FloatingWindowFactory = Factory<{
     props: FloatingWindowProps;

package/lib/components/FloatingWindow/index.d.ts

@@ -1,5 +1,5 @@
 import type { FloatingWindowFactory, FloatingWindowProps, FloatingWindowStylesNames } from './FloatingWindow';
 export { FloatingWindow } from './FloatingWindow';
 export type { FloatingWindowProps, FloatingWindowStylesNames, FloatingWindowFactory };
-export type { FloatingWindowDimensions } from './FloatingWindow.context';
+export type { FloatingWindowDimensions, FloatingWindowSize } from './FloatingWindow.context';
 export type { FloatingWindowResizeHandleProps, FloatingWindowResizeHandleFactory, } from './FloatingWindowResizeHandle';

package/lib/components/Input/InputWrapper/InputWrapper.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps, DataAttributes, ElementProps, Factory, MantineFontSize, StylesApiProps } from '../../../core';
+import { BoxProps, DataAttributes, ElementProps, Factory, MantineFontSize, PlaceholderPolymorphicProps, StylesApiProps } from '../../../core';
 import { InputDescriptionCssVariables, InputDescriptionProps, InputDescriptionStylesNames } from '../InputDescription/InputDescription';
 import { InputErrorCssVariables, InputErrorProps, InputErrorStylesNames } from '../InputError/InputError';
 import { InputLabelCssVariables, InputLabelProps, InputLabelStylesNames } from '../InputLabel/InputLabel';
@@ -19,13 +19,13 @@ export interface __InputWrapperProps {
     /** If set, the required asterisk is displayed next to the label. Overrides `required` prop. Does not add required attribute to the input. @default false */
     withAsterisk?: boolean;
     /** Props passed down to the `Input.Label` component */
-    labelProps?: InputLabelProps & DataAttributes;
+    labelProps?: InputLabelProps & DataAttributes & PlaceholderPolymorphicProps;
     /** Props passed down to the `Input.Description` component */
-    descriptionProps?: InputDescriptionProps & DataAttributes;
+    descriptionProps?: InputDescriptionProps & DataAttributes & PlaceholderPolymorphicProps;
     /** Props passed down to the `Input.Error` component */
-    errorProps?: InputErrorProps & DataAttributes;
+    errorProps?: InputErrorProps & DataAttributes & PlaceholderPolymorphicProps;
     /** Props passed down to the `Input.Success` component */
-    successProps?: InputSuccessProps & DataAttributes;
+    successProps?: InputSuccessProps & DataAttributes & PlaceholderPolymorphicProps;
     /** Render function to wrap the input element. Useful for adding tooltips, popovers, or other wrappers around the input. @default React.Fragment */
     inputContainer?: (children: React.ReactNode) => React.ReactNode;
     /** Controls order and visibility of wrapper elements. Only elements included in this array will be rendered. @default ['label', 'description', 'input', 'error'] */

package/lib/components/Input/use-input-props.d.ts

@@ -303,10 +303,10 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         classNames: Partial<Record<string, string | undefined>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string | undefined>>) | undefined;
         __staticSelector: string | undefined;
         __stylesApiProps: Record<string, any> | BaseProps;
-        errorProps: (import(".").InputErrorProps & import("../..").DataAttributes) | undefined;
-        successProps: (import(".").InputSuccessProps & import("../..").DataAttributes) | undefined;
-        labelProps: (import(".").InputLabelProps & import("../..").DataAttributes) | undefined;
-        descriptionProps: (import(".").InputDescriptionProps & import("../..").DataAttributes) | undefined;
+        errorProps: (import(".").InputErrorProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps) | undefined;
+        successProps: (import(".").InputSuccessProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps) | undefined;
+        labelProps: (import(".").InputLabelProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps) | undefined;
+        descriptionProps: (import(".").InputDescriptionProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps) | undefined;
         unstyled: boolean | undefined;
         styles: Partial<Record<string, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../..").CSSProperties>>) | undefined;
         size: (string & {}) | import("../..").MantineSize | undefined;

package/lib/components/MaskInput/use-mask-input-props.d.ts

@@ -74,10 +74,10 @@ export declare function useMaskInputProps(props: MaskInputProps & {
         success?: React.ReactNode;
         required?: boolean;
         withAsterisk?: boolean;
-        labelProps?: import("..").InputLabelProps & import("../..").DataAttributes;
-        descriptionProps?: import("..").InputDescriptionProps & import("../..").DataAttributes;
-        errorProps?: import("..").InputErrorProps & import("../..").DataAttributes;
-        successProps?: import("..").InputSuccessProps & import("../..").DataAttributes;
+        labelProps?: import("..").InputLabelProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps;
+        descriptionProps?: import("..").InputDescriptionProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps;
+        errorProps?: import("..").InputErrorProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps;
+        successProps?: import("..").InputSuccessProps & import("../..").DataAttributes & import("../..").PlaceholderPolymorphicProps;
         inputContainer?: (children: React.ReactNode) => React.ReactNode;
         inputWrapperOrder?: ("label" | "input" | "description" | "error")[];
         leftSection?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.5.0",
+  "version": "9.5.1-alpha.1",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.5.0",
+    "@mantine/hooks": "9.5.1-alpha.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },