@mantine/core 9.1.1 → 9.2.0

package/esm/components/ColorInput/ColorInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.mjs","names":["classes"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps('ColorInput', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n  export type Props = ColorInputProps;\n  export type StylesNames = ColorInputStylesNames;\n  export type CssVariables = ColorInputCssVariables;\n  export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorInput.mjs","names":["classes"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'ColorInput'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n  export type Props = ColorInputProps;\n  export type StylesNames = ColorInputStylesNames;\n  export type CssVariables = ColorInputCssVariables;\n  export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}

package/esm/components/Combobox/use-pills-reorder/move-pill.mjs

@@ -0,0 +1,17 @@
+"use client";
+//#region packages/@mantine/core/src/components/Combobox/use-pills-reorder/move-pill.ts
+function movePill(value, from, to, position) {
+	if (from === to) return value;
+	if (position === "before" && to === from + 1) return value;
+	if (position === "after" && to === from - 1) return value;
+	const result = value.slice();
+	const [item] = result.splice(from, 1);
+	let targetIndex = from < to ? to - 1 : to;
+	if (position === "after") targetIndex += 1;
+	result.splice(targetIndex, 0, item);
+	return result;
+}
+//#endregion
+export { movePill };
+
+//# sourceMappingURL=move-pill.mjs.map

package/esm/components/Combobox/use-pills-reorder/move-pill.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-pill.mjs","names":[],"sources":["../../../../src/components/Combobox/use-pills-reorder/move-pill.ts"],"sourcesContent":["export type PillReorderPosition = 'before' | 'after';\n\nexport function movePill<T>(\n  value: T[],\n  from: number,\n  to: number,\n  position: PillReorderPosition\n): T[] {\n  if (from === to) {\n    return value;\n  }\n\n  if (position === 'before' && to === from + 1) {\n    return value;\n  }\n\n  if (position === 'after' && to === from - 1) {\n    return value;\n  }\n\n  const result = value.slice();\n  const [item] = result.splice(from, 1);\n\n  let targetIndex = from < to ? to - 1 : to;\n  if (position === 'after') {\n    targetIndex += 1;\n  }\n\n  result.splice(targetIndex, 0, item);\n  return result;\n}\n"],"mappings":";;AAEA,SAAgB,SACd,OACA,MACA,IACA,UACK;AACL,KAAI,SAAS,GACX,QAAO;AAGT,KAAI,aAAa,YAAY,OAAO,OAAO,EACzC,QAAO;AAGT,KAAI,aAAa,WAAW,OAAO,OAAO,EACxC,QAAO;CAGT,MAAM,SAAS,MAAM,OAAO;CAC5B,MAAM,CAAC,QAAQ,OAAO,OAAO,MAAM,EAAE;CAErC,IAAI,cAAc,OAAO,KAAK,KAAK,IAAI;AACvC,KAAI,aAAa,QACf,gBAAe;AAGjB,QAAO,OAAO,aAAa,GAAG,KAAK;AACnC,QAAO"}

package/esm/components/Combobox/use-pills-reorder/use-pills-reorder.mjs

@@ -0,0 +1,169 @@
+"use client";
+import { movePill } from "./move-pill.mjs";
+import { useCallback, useEffect, useRef } from "react";
+//#region packages/@mantine/core/src/components/Combobox/use-pills-reorder/use-pills-reorder.ts
+const findSearchInput = (container) => {
+	const lastChild = container.lastElementChild;
+	if (!lastChild) return null;
+	if (lastChild instanceof HTMLInputElement) return lastChild;
+	return lastChild.querySelector("input");
+};
+const valuesMatch = (a, b) => {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i += 1) if (a[i] !== b[i]) return false;
+	return true;
+};
+function usePillsReorder({ value, onChange, enabled }) {
+	const dragStateRef = useRef({
+		draggedIndex: null,
+		currentDropTarget: null
+	});
+	const pendingFocusRef = useRef(null);
+	const containerRef = useRef(null);
+	const valueRef = useRef(value);
+	valueRef.current = value;
+	useEffect(() => {
+		const pending = pendingFocusRef.current;
+		if (!pending) return;
+		pendingFocusRef.current = null;
+		if (!valuesMatch(valueRef.current, pending.expectedValue)) return;
+		pending.container?.querySelector(`[data-mantine-pill-index="${pending.index}"]`)?.focus();
+	});
+	const setContainer = useCallback((node) => {
+		containerRef.current = node;
+	}, []);
+	const getListProps = () => {
+		if (!enabled) return {};
+		return { ref: setContainer };
+	};
+	const handleInputKeyDown = (event) => {
+		if (!enabled || event.key !== "ArrowLeft") return;
+		const input = event.currentTarget;
+		if (!(input.value.length === 0 || input.selectionStart === 0 && input.selectionEnd === 0)) return;
+		const container = containerRef.current;
+		if (!container) return;
+		const pills = container.querySelectorAll("[data-mantine-pill-index]");
+		if (pills.length === 0) return;
+		event.preventDefault();
+		pills[pills.length - 1].focus();
+	};
+	const getPillProps = (index) => {
+		if (!enabled) return;
+		return {
+			draggable: true,
+			tabIndex: -1,
+			"data-mantine-pill-index": index,
+			"aria-keyshortcuts": "Alt+ArrowLeft Alt+ArrowRight",
+			onMouseDown: (event) => {
+				if (event.button === 0) event.stopPropagation();
+			},
+			onDragStart: (event) => {
+				event.stopPropagation();
+				event.dataTransfer.effectAllowed = "move";
+				event.dataTransfer.setData("text/plain", String(index));
+				dragStateRef.current.draggedIndex = index;
+				const target = event.currentTarget;
+				const rect = target.getBoundingClientRect();
+				const ghost = target.cloneNode(true);
+				ghost.removeAttribute("data-dragging");
+				ghost.removeAttribute("data-drag-over");
+				ghost.style.position = "fixed";
+				ghost.style.top = "-9999px";
+				ghost.style.left = "-9999px";
+				ghost.style.width = `${rect.width}px`;
+				ghost.style.height = `${rect.height}px`;
+				ghost.style.pointerEvents = "none";
+				document.body.appendChild(ghost);
+				event.dataTransfer.setDragImage(ghost, event.clientX - rect.left, event.clientY - rect.top);
+				setTimeout(() => ghost.parentNode?.removeChild(ghost), 0);
+				requestAnimationFrame(() => {
+					target.setAttribute("data-dragging", "true");
+				});
+			},
+			onDragOver: (event) => {
+				const { draggedIndex } = dragStateRef.current;
+				if (draggedIndex === null || draggedIndex === index) return;
+				const target = event.currentTarget;
+				const rect = target.getBoundingClientRect();
+				const x = event.clientX - rect.left;
+				const position = (getComputedStyle(target).direction === "rtl" ? x > rect.width / 2 : x < rect.width / 2) ? "before" : "after";
+				event.preventDefault();
+				event.stopPropagation();
+				event.dataTransfer.dropEffect = "move";
+				const prevTarget = dragStateRef.current.currentDropTarget;
+				if (prevTarget && prevTarget !== target) prevTarget.removeAttribute("data-drag-over");
+				target.setAttribute("data-drag-over", position);
+				dragStateRef.current.currentDropTarget = target;
+			},
+			onDragLeave: (event) => {
+				const target = event.currentTarget;
+				const related = event.relatedTarget;
+				if (related && target.contains(related)) return;
+				target.removeAttribute("data-drag-over");
+				if (dragStateRef.current.currentDropTarget === target) dragStateRef.current.currentDropTarget = null;
+			},
+			onDrop: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				const target = event.currentTarget;
+				const position = target.getAttribute("data-drag-over");
+				target.removeAttribute("data-drag-over");
+				const { draggedIndex } = dragStateRef.current;
+				if (draggedIndex !== null && position && draggedIndex !== index) {
+					const nextValue = movePill(valueRef.current, draggedIndex, index, position);
+					if (nextValue !== valueRef.current) onChange(nextValue);
+				}
+				dragStateRef.current.draggedIndex = null;
+				dragStateRef.current.currentDropTarget = null;
+			},
+			onDragEnd: (event) => {
+				event.currentTarget.removeAttribute("data-dragging");
+				const prevTarget = dragStateRef.current.currentDropTarget;
+				if (prevTarget) prevTarget.removeAttribute("data-drag-over");
+				dragStateRef.current.draggedIndex = null;
+				dragStateRef.current.currentDropTarget = null;
+			},
+			onKeyDown: (event) => {
+				if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+				const target = event.currentTarget;
+				const movingForward = getComputedStyle(target).direction === "rtl" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
+				const targetIndex = movingForward ? index + 1 : index - 1;
+				if (event.altKey) {
+					if (targetIndex < 0 || targetIndex >= valueRef.current.length) return;
+					event.preventDefault();
+					event.stopPropagation();
+					const position = movingForward ? "after" : "before";
+					const nextValue = movePill(valueRef.current, index, targetIndex, position);
+					if (nextValue === valueRef.current) return;
+					pendingFocusRef.current = {
+						container: target.parentElement,
+						index: targetIndex,
+						expectedValue: nextValue
+					};
+					onChange(nextValue);
+					return;
+				}
+				if (targetIndex < 0) return;
+				const container = target.parentElement;
+				if (!container) return;
+				event.preventDefault();
+				event.stopPropagation();
+				if (targetIndex >= valueRef.current.length) {
+					findSearchInput(container)?.focus();
+					return;
+				}
+				container.querySelector(`[data-mantine-pill-index="${targetIndex}"]`)?.focus();
+			}
+		};
+	};
+	return {
+		getPillProps,
+		getListProps,
+		handleInputKeyDown
+	};
+}
+//#endregion
+export { usePillsReorder };
+
+//# sourceMappingURL=use-pills-reorder.mjs.map

package/esm/components/Combobox/use-pills-reorder/use-pills-reorder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pills-reorder.mjs","names":[],"sources":["../../../../src/components/Combobox/use-pills-reorder/use-pills-reorder.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { movePill, PillReorderPosition } from './move-pill';\n\nexport interface PillReorderProps {\n  draggable: boolean;\n  tabIndex: number;\n  'data-mantine-pill-index': number;\n  'aria-keyshortcuts': string;\n  onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;\n  onDragStart: (event: React.DragEvent<HTMLElement>) => void;\n  onDragOver: (event: React.DragEvent<HTMLElement>) => void;\n  onDragLeave: (event: React.DragEvent<HTMLElement>) => void;\n  onDrop: (event: React.DragEvent<HTMLElement>) => void;\n  onDragEnd: (event: React.DragEvent<HTMLElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport interface PillsReorderListProps {\n  ref?: (node: HTMLDivElement | null) => void;\n}\n\nexport interface UsePillsReorderInput<T> {\n  value: T[];\n  onChange: (value: T[]) => void;\n  enabled: boolean | undefined;\n}\n\ninterface PillDragState {\n  draggedIndex: number | null;\n  currentDropTarget: HTMLElement | null;\n}\n\ninterface PendingFocus<T> {\n  container: HTMLElement | null;\n  index: number;\n  expectedValue: T[];\n}\n\nconst findSearchInput = (container: HTMLElement): HTMLInputElement | null => {\n  const lastChild = container.lastElementChild;\n  if (!lastChild) {\n    return null;\n  }\n  if (lastChild instanceof HTMLInputElement) {\n    return lastChild;\n  }\n  return lastChild.querySelector<HTMLInputElement>('input');\n};\n\nconst valuesMatch = <T>(a: T[], b: T[]): boolean => {\n  if (a === b) {\n    return true;\n  }\n  if (a.length !== b.length) {\n    return false;\n  }\n  for (let i = 0; i < a.length; i += 1) {\n    if (a[i] !== b[i]) {\n      return false;\n    }\n  }\n  return true;\n};\n\nexport function usePillsReorder<T>({ value, onChange, enabled }: UsePillsReorderInput<T>) {\n  const dragStateRef = useRef<PillDragState>({ draggedIndex: null, currentDropTarget: null });\n  const pendingFocusRef = useRef<PendingFocus<T> | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  useEffect(() => {\n    const pending = pendingFocusRef.current;\n    if (!pending) {\n      return;\n    }\n    pendingFocusRef.current = null;\n    if (!valuesMatch(valueRef.current, pending.expectedValue)) {\n      return;\n    }\n    pending.container\n      ?.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${pending.index}\"]`)\n      ?.focus();\n  });\n\n  const setContainer = useCallback((node: HTMLDivElement | null) => {\n    containerRef.current = node;\n  }, []);\n\n  const getListProps = (): PillsReorderListProps => {\n    if (!enabled) {\n      return {};\n    }\n    return { ref: setContainer };\n  };\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!enabled || event.key !== 'ArrowLeft') {\n      return;\n    }\n\n    const input = event.currentTarget;\n    const caretAtStart =\n      input.value.length === 0 || (input.selectionStart === 0 && input.selectionEnd === 0);\n    if (!caretAtStart) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const pills = container.querySelectorAll<HTMLElement>('[data-mantine-pill-index]');\n    if (pills.length === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    pills[pills.length - 1].focus();\n  };\n\n  const getPillProps = (index: number): PillReorderProps | undefined => {\n    if (!enabled) {\n      return undefined;\n    }\n\n    return {\n      draggable: true,\n      tabIndex: -1,\n      'data-mantine-pill-index': index,\n      'aria-keyshortcuts': 'Alt+ArrowLeft Alt+ArrowRight',\n      onMouseDown: (event) => {\n        if (event.button === 0) {\n          event.stopPropagation();\n        }\n      },\n      onDragStart: (event) => {\n        event.stopPropagation();\n        event.dataTransfer.effectAllowed = 'move';\n        event.dataTransfer.setData('text/plain', String(index));\n        dragStateRef.current.draggedIndex = index;\n\n        const target = event.currentTarget;\n        const rect = target.getBoundingClientRect();\n        const ghost = target.cloneNode(true) as HTMLElement;\n        ghost.removeAttribute('data-dragging');\n        ghost.removeAttribute('data-drag-over');\n        ghost.style.position = 'fixed';\n        ghost.style.top = '-9999px';\n        ghost.style.left = '-9999px';\n        ghost.style.width = `${rect.width}px`;\n        ghost.style.height = `${rect.height}px`;\n        ghost.style.pointerEvents = 'none';\n        document.body.appendChild(ghost);\n        event.dataTransfer.setDragImage(ghost, event.clientX - rect.left, event.clientY - rect.top);\n\n        setTimeout(() => ghost.parentNode?.removeChild(ghost), 0);\n\n        requestAnimationFrame(() => {\n          target.setAttribute('data-dragging', 'true');\n        });\n      },\n      onDragOver: (event) => {\n        const { draggedIndex } = dragStateRef.current;\n        if (draggedIndex === null || draggedIndex === index) {\n          return;\n        }\n\n        const target = event.currentTarget;\n        const rect = target.getBoundingClientRect();\n        const x = event.clientX - rect.left;\n        const isRtl = getComputedStyle(target).direction === 'rtl';\n        const isStart = isRtl ? x > rect.width / 2 : x < rect.width / 2;\n        const position: PillReorderPosition = isStart ? 'before' : 'after';\n\n        event.preventDefault();\n        event.stopPropagation();\n        event.dataTransfer.dropEffect = 'move';\n\n        const prevTarget = dragStateRef.current.currentDropTarget;\n        if (prevTarget && prevTarget !== target) {\n          prevTarget.removeAttribute('data-drag-over');\n        }\n\n        target.setAttribute('data-drag-over', position);\n        dragStateRef.current.currentDropTarget = target;\n      },\n      onDragLeave: (event) => {\n        const target = event.currentTarget;\n        const related = event.relatedTarget as Node | null;\n        if (related && target.contains(related)) {\n          return;\n        }\n\n        target.removeAttribute('data-drag-over');\n        if (dragStateRef.current.currentDropTarget === target) {\n          dragStateRef.current.currentDropTarget = null;\n        }\n      },\n      onDrop: (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const target = event.currentTarget;\n        const position = target.getAttribute('data-drag-over') as PillReorderPosition | null;\n        target.removeAttribute('data-drag-over');\n\n        const { draggedIndex } = dragStateRef.current;\n        if (draggedIndex !== null && position && draggedIndex !== index) {\n          const nextValue = movePill(valueRef.current, draggedIndex, index, position);\n          if (nextValue !== valueRef.current) {\n            onChange(nextValue);\n          }\n        }\n\n        dragStateRef.current.draggedIndex = null;\n        dragStateRef.current.currentDropTarget = null;\n      },\n      onDragEnd: (event) => {\n        const target = event.currentTarget;\n        target.removeAttribute('data-dragging');\n\n        const prevTarget = dragStateRef.current.currentDropTarget;\n        if (prevTarget) {\n          prevTarget.removeAttribute('data-drag-over');\n        }\n\n        dragStateRef.current.draggedIndex = null;\n        dragStateRef.current.currentDropTarget = null;\n      },\n      onKeyDown: (event) => {\n        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n          return;\n        }\n\n        const target = event.currentTarget;\n        const isRtl = getComputedStyle(target).direction === 'rtl';\n        const movingForward = isRtl ? event.key === 'ArrowLeft' : event.key === 'ArrowRight';\n        const targetIndex = movingForward ? index + 1 : index - 1;\n\n        if (event.altKey) {\n          if (targetIndex < 0 || targetIndex >= valueRef.current.length) {\n            return;\n          }\n\n          event.preventDefault();\n          event.stopPropagation();\n\n          const position: PillReorderPosition = movingForward ? 'after' : 'before';\n          const nextValue = movePill(valueRef.current, index, targetIndex, position);\n          if (nextValue === valueRef.current) {\n            return;\n          }\n\n          pendingFocusRef.current = {\n            container: target.parentElement,\n            index: targetIndex,\n            expectedValue: nextValue,\n          };\n          onChange(nextValue);\n          return;\n        }\n\n        if (targetIndex < 0) {\n          return;\n        }\n\n        const container = target.parentElement;\n        if (!container) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (targetIndex >= valueRef.current.length) {\n          findSearchInput(container)?.focus();\n          return;\n        }\n\n        container.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${targetIndex}\"]`)?.focus();\n      },\n    };\n  };\n\n  return { getPillProps, getListProps, handleInputKeyDown };\n}\n"],"mappings":"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"}

package/esm/components/FileInput/FileInput.mjs

@@ -23,7 +23,11 @@ const defaultProps = {
 	size: "sm"
 };
 const FileInput = genericFactory((_props) => {
-	const props = useProps("FileInput", defaultProps, _props);
+	const props = useProps([
+		"Input",
+		"InputWrapper",
+		"FileInput"
+	], defaultProps, _props);
 	const { unstyled, vars, onChange, value, defaultValue, multiple, accept, name, form, valueComponent: ValueComponent, clearable, clearSectionMode, clearButtonProps, readOnly, capture, fileInputProps, rightSection, size, placeholder, component, resetRef: resetRefProp, classNames, styles, attributes, ...others } = props;
 	const resetRef = useRef(null);
 	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({

package/esm/components/FileInput/FileInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.mjs","names":[],"sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { CloseButton } from '../CloseButton';\nimport { FileButton } from '../FileButton';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  Input,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase/InputBase';\n\nexport interface FileInputProps<Multiple = false>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<FileInputFactory>,\n    ElementProps<'button', 'value' | 'defaultValue' | 'onChange' | 'placeholder'> {\n  component?: any;\n\n  /** Called when value changes */\n  onChange?: (payload: Multiple extends true ? File[] : File | null) => void;\n\n  /** Controlled component value */\n  value?: Multiple extends true ? File[] : File | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Multiple extends true ? File[] : File | null;\n\n  /** If set, user can pick more than one file @default false */\n  multiple?: Multiple;\n\n  /** File input accept attribute, for example, `\"image/png,image/jpeg\"` */\n  accept?: string;\n\n  /** Input name attribute */\n  name?: string;\n\n  /** Input form attribute */\n  form?: string;\n\n  /** Value renderer. By default, displays file name. */\n  valueComponent?: React.FC<{ value: null | File | File[] }>;\n\n  /** If set, the clear button is displayed in the right section @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: React.ComponentProps<'button'>;\n\n  /** If set, the input value cannot be changed  */\n  readOnly?: boolean;\n\n  /** Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. */\n  capture?: boolean | 'user' | 'environment';\n\n  /** Props passed down to the hidden `input[type=\"file\"]` */\n  fileInputProps?: React.ComponentProps<'input'>;\n\n  /** Input placeholder */\n  placeholder?: React.ReactNode;\n\n  /** Reference of the function that should be called when value changes to null or empty array */\n  resetRef?: React.Ref<() => void>;\n}\n\nexport type FileInputFactory = Factory<{\n  props: FileInputProps;\n  ref: HTMLButtonElement;\n  stylesNames: __InputStylesNames | 'placeholder';\n  variant: InputVariant;\n  signature: <Multiple extends boolean = false>(\n    props: FileInputProps<Multiple>\n  ) => React.JSX.Element;\n}>;\n\nconst DefaultValue: FileInputProps['valueComponent'] = ({ value }) => (\n  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n    {Array.isArray(value) ? value.map((file) => file.name).join(', ') : value?.name}\n  </div>\n);\n\nconst defaultProps = {\n  valueComponent: DefaultValue,\n  size: 'sm',\n} satisfies Partial<FileInputProps>;\n\nexport const FileInput = genericFactory<FileInputFactory>((_props) => {\n  const props = useProps('FileInput', defaultProps, _props);\n  const {\n    unstyled,\n    vars,\n    onChange,\n    value,\n    defaultValue,\n    multiple,\n    accept,\n    name,\n    form,\n    valueComponent: ValueComponent,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    readOnly,\n    capture,\n    fileInputProps,\n    rightSection,\n    size,\n    placeholder,\n    component,\n    resetRef: resetRefProp,\n    classNames,\n    styles,\n    attributes,\n    ...others\n  } = props;\n\n  const resetRef = useRef<() => void>(null);\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<FileInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [_value, setValue] = useUncontrolled<null | File | File[]>({\n    value,\n    defaultValue,\n    onChange: onChange as any,\n    finalValue: multiple ? [] : null,\n  });\n\n  const hasValue = Array.isArray(_value) ? _value.length !== 0 : _value !== null;\n\n  const clearButton = (\n    <CloseButton\n      {...clearButtonProps}\n      variant=\"subtle\"\n      onClick={() => setValue(multiple ? [] : null)}\n      size={size}\n      unstyled={unstyled}\n    />\n  );\n\n  const _clearable = clearable && hasValue && !readOnly;\n\n  useEffect(() => {\n    if ((Array.isArray(_value) && _value.length === 0) || _value === null) {\n      resetRef.current?.();\n    }\n  }, [_value]);\n\n  return (\n    <FileButton\n      onChange={setValue}\n      multiple={multiple}\n      accept={accept}\n      name={name}\n      form={form}\n      resetRef={useMergedRef(resetRef, resetRefProp)}\n      disabled={readOnly}\n      capture={capture}\n      inputProps={fileInputProps}\n    >\n      {(fileButtonProps) => (\n        <InputBase\n          component={component || 'button'}\n          rightSection={rightSection}\n          __clearSection={clearButton}\n          __clearable={_clearable}\n          __clearSectionMode={clearSectionMode}\n          {...fileButtonProps}\n          {...others}\n          __staticSelector=\"FileInput\"\n          multiline\n          type=\"button\"\n          pointer\n          __stylesApiProps={props}\n          unstyled={unstyled}\n          size={size}\n          classNames={classNames}\n          styles={styles}\n          attributes={attributes}\n        >\n          {!hasValue ? (\n            <Input.Placeholder\n              __staticSelector=\"FileInput\"\n              classNames={resolvedClassNames}\n              styles={resolvedStyles}\n              attributes={attributes}\n            >\n              {placeholder}\n            </Input.Placeholder>\n          ) : (\n            <ValueComponent value={_value} />\n          )}\n        </InputBase>\n      )}\n    </FileButton>\n  );\n});\n\nFileInput.classes = InputBase.classes;\nFileInput.displayName = '@mantine/core/FileInput';\n\nexport namespace FileInput {\n  export type Props<Multiple extends boolean = false> = FileInputProps<Multiple>;\n  export type Factory = FileInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAyFA,MAAM,gBAAkD,EAAE,YACxD,oBAAC,OAAD;CAAK,OAAO;EAAE,UAAU;EAAU,cAAc;EAAY,YAAY;EAAU;WAC/E,MAAM,QAAQ,MAAM,GAAG,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,KAAK,GAAG,OAAO;CACvE,CAAA;AAGR,MAAM,eAAe;CACnB,gBAAgB;CAChB,MAAM;CACP;AAED,MAAa,YAAY,gBAAkC,WAAW;CACpE,MAAM,QAAQ,SAAS,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,UACA,MACA,UACA,OACA,cACA,UACA,QACA,MACA,MACA,gBAAgB,gBAChB,WACA,kBACA,kBACA,UACA,SACA,gBACA,cACA,MACA,aACA,WACA,UAAU,cACV,YACA,QACA,YACA,GAAG,WACD;CAEJ,MAAM,WAAW,OAAmB,KAAK;CACzC,MAAM,EAAE,oBAAoB,mBAAmB,qBAAuC;EACpF;EACA;EACA;EACD,CAAC;CAEF,MAAM,CAAC,QAAQ,YAAY,gBAAsC;EAC/D;EACA;EACU;EACV,YAAY,WAAW,EAAE,GAAG;EAC7B,CAAC;CAEF,MAAM,WAAW,MAAM,QAAQ,OAAO,GAAG,OAAO,WAAW,IAAI,WAAW;CAE1E,MAAM,cACJ,oBAAC,aAAD;EACE,GAAI;EACJ,SAAQ;EACR,eAAe,SAAS,WAAW,EAAE,GAAG,KAAK;EACvC;EACI;EACV,CAAA;CAGJ,MAAM,aAAa,aAAa,YAAY,CAAC;AAE7C,iBAAgB;AACd,MAAK,MAAM,QAAQ,OAAO,IAAI,OAAO,WAAW,KAAM,WAAW,KAC/D,UAAS,WAAW;IAErB,CAAC,OAAO,CAAC;AAEZ,QACE,oBAAC,YAAD;EACE,UAAU;EACA;EACF;EACF;EACA;EACN,UAAU,aAAa,UAAU,aAAa;EAC9C,UAAU;EACD;EACT,YAAY;aAEV,oBACA,oBAAC,WAAD;GACE,WAAW,aAAa;GACV;GACd,gBAAgB;GAChB,aAAa;GACb,oBAAoB;GACpB,GAAI;GACJ,GAAI;GACJ,kBAAiB;GACjB,WAAA;GACA,MAAK;GACL,SAAA;GACA,kBAAkB;GACR;GACJ;GACM;GACJ;GACI;aAEX,CAAC,WACA,oBAAC,MAAM,aAAP;IACE,kBAAiB;IACjB,YAAY;IACZ,QAAQ;IACI;cAEX;IACiB,CAAA,GAEpB,oBAAC,gBAAD,EAAgB,OAAO,QAAU,CAAA;GAEzB,CAAA;EAEH,CAAA;EAEf;AAEF,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}
+{"version":3,"file":"FileInput.mjs","names":[],"sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { CloseButton } from '../CloseButton';\nimport { FileButton } from '../FileButton';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  Input,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase/InputBase';\n\nexport interface FileInputProps<Multiple = false>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<FileInputFactory>,\n    ElementProps<'button', 'value' | 'defaultValue' | 'onChange' | 'placeholder'> {\n  component?: any;\n\n  /** Called when value changes */\n  onChange?: (payload: Multiple extends true ? File[] : File | null) => void;\n\n  /** Controlled component value */\n  value?: Multiple extends true ? File[] : File | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Multiple extends true ? File[] : File | null;\n\n  /** If set, user can pick more than one file @default false */\n  multiple?: Multiple;\n\n  /** File input accept attribute, for example, `\"image/png,image/jpeg\"` */\n  accept?: string;\n\n  /** Input name attribute */\n  name?: string;\n\n  /** Input form attribute */\n  form?: string;\n\n  /** Value renderer. By default, displays file name. */\n  valueComponent?: React.FC<{ value: null | File | File[] }>;\n\n  /** If set, the clear button is displayed in the right section @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: React.ComponentProps<'button'>;\n\n  /** If set, the input value cannot be changed  */\n  readOnly?: boolean;\n\n  /** Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. */\n  capture?: boolean | 'user' | 'environment';\n\n  /** Props passed down to the hidden `input[type=\"file\"]` */\n  fileInputProps?: React.ComponentProps<'input'>;\n\n  /** Input placeholder */\n  placeholder?: React.ReactNode;\n\n  /** Reference of the function that should be called when value changes to null or empty array */\n  resetRef?: React.Ref<() => void>;\n}\n\nexport type FileInputFactory = Factory<{\n  props: FileInputProps;\n  ref: HTMLButtonElement;\n  stylesNames: __InputStylesNames | 'placeholder';\n  variant: InputVariant;\n  signature: <Multiple extends boolean = false>(\n    props: FileInputProps<Multiple>\n  ) => React.JSX.Element;\n}>;\n\nconst DefaultValue: FileInputProps['valueComponent'] = ({ value }) => (\n  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n    {Array.isArray(value) ? value.map((file) => file.name).join(', ') : value?.name}\n  </div>\n);\n\nconst defaultProps = {\n  valueComponent: DefaultValue,\n  size: 'sm',\n} satisfies Partial<FileInputProps>;\n\nexport const FileInput = genericFactory<FileInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'FileInput'], defaultProps, _props);\n  const {\n    unstyled,\n    vars,\n    onChange,\n    value,\n    defaultValue,\n    multiple,\n    accept,\n    name,\n    form,\n    valueComponent: ValueComponent,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    readOnly,\n    capture,\n    fileInputProps,\n    rightSection,\n    size,\n    placeholder,\n    component,\n    resetRef: resetRefProp,\n    classNames,\n    styles,\n    attributes,\n    ...others\n  } = props;\n\n  const resetRef = useRef<() => void>(null);\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<FileInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [_value, setValue] = useUncontrolled<null | File | File[]>({\n    value,\n    defaultValue,\n    onChange: onChange as any,\n    finalValue: multiple ? [] : null,\n  });\n\n  const hasValue = Array.isArray(_value) ? _value.length !== 0 : _value !== null;\n\n  const clearButton = (\n    <CloseButton\n      {...clearButtonProps}\n      variant=\"subtle\"\n      onClick={() => setValue(multiple ? [] : null)}\n      size={size}\n      unstyled={unstyled}\n    />\n  );\n\n  const _clearable = clearable && hasValue && !readOnly;\n\n  useEffect(() => {\n    if ((Array.isArray(_value) && _value.length === 0) || _value === null) {\n      resetRef.current?.();\n    }\n  }, [_value]);\n\n  return (\n    <FileButton\n      onChange={setValue}\n      multiple={multiple}\n      accept={accept}\n      name={name}\n      form={form}\n      resetRef={useMergedRef(resetRef, resetRefProp)}\n      disabled={readOnly}\n      capture={capture}\n      inputProps={fileInputProps}\n    >\n      {(fileButtonProps) => (\n        <InputBase\n          component={component || 'button'}\n          rightSection={rightSection}\n          __clearSection={clearButton}\n          __clearable={_clearable}\n          __clearSectionMode={clearSectionMode}\n          {...fileButtonProps}\n          {...others}\n          __staticSelector=\"FileInput\"\n          multiline\n          type=\"button\"\n          pointer\n          __stylesApiProps={props}\n          unstyled={unstyled}\n          size={size}\n          classNames={classNames}\n          styles={styles}\n          attributes={attributes}\n        >\n          {!hasValue ? (\n            <Input.Placeholder\n              __staticSelector=\"FileInput\"\n              classNames={resolvedClassNames}\n              styles={resolvedStyles}\n              attributes={attributes}\n            >\n              {placeholder}\n            </Input.Placeholder>\n          ) : (\n            <ValueComponent value={_value} />\n          )}\n        </InputBase>\n      )}\n    </FileButton>\n  );\n});\n\nFileInput.classes = InputBase.classes;\nFileInput.displayName = '@mantine/core/FileInput';\n\nexport namespace FileInput {\n  export type Props<Multiple extends boolean = false> = FileInputProps<Multiple>;\n  export type Factory = FileInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAyFA,MAAM,gBAAkD,EAAE,YACxD,oBAAC,OAAD;CAAK,OAAO;EAAE,UAAU;EAAU,cAAc;EAAY,YAAY;EAAU;WAC/E,MAAM,QAAQ,MAAM,GAAG,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,KAAK,GAAG,OAAO;CACvE,CAAA;AAGR,MAAM,eAAe;CACnB,gBAAgB;CAChB,MAAM;CACP;AAED,MAAa,YAAY,gBAAkC,WAAW;CACpE,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;EAAY,EAAE,cAAc,OAAO;CACpF,MAAM,EACJ,UACA,MACA,UACA,OACA,cACA,UACA,QACA,MACA,MACA,gBAAgB,gBAChB,WACA,kBACA,kBACA,UACA,SACA,gBACA,cACA,MACA,aACA,WACA,UAAU,cACV,YACA,QACA,YACA,GAAG,WACD;CAEJ,MAAM,WAAW,OAAmB,KAAK;CACzC,MAAM,EAAE,oBAAoB,mBAAmB,qBAAuC;EACpF;EACA;EACA;EACD,CAAC;CAEF,MAAM,CAAC,QAAQ,YAAY,gBAAsC;EAC/D;EACA;EACU;EACV,YAAY,WAAW,EAAE,GAAG;EAC7B,CAAC;CAEF,MAAM,WAAW,MAAM,QAAQ,OAAO,GAAG,OAAO,WAAW,IAAI,WAAW;CAE1E,MAAM,cACJ,oBAAC,aAAD;EACE,GAAI;EACJ,SAAQ;EACR,eAAe,SAAS,WAAW,EAAE,GAAG,KAAK;EACvC;EACI;EACV,CAAA;CAGJ,MAAM,aAAa,aAAa,YAAY,CAAC;AAE7C,iBAAgB;AACd,MAAK,MAAM,QAAQ,OAAO,IAAI,OAAO,WAAW,KAAM,WAAW,KAC/D,UAAS,WAAW;IAErB,CAAC,OAAO,CAAC;AAEZ,QACE,oBAAC,YAAD;EACE,UAAU;EACA;EACF;EACF;EACA;EACN,UAAU,aAAa,UAAU,aAAa;EAC9C,UAAU;EACD;EACT,YAAY;aAEV,oBACA,oBAAC,WAAD;GACE,WAAW,aAAa;GACV;GACd,gBAAgB;GAChB,aAAa;GACb,oBAAoB;GACpB,GAAI;GACJ,GAAI;GACJ,kBAAiB;GACjB,WAAA;GACA,MAAK;GACL,SAAA;GACA,kBAAkB;GACR;GACJ;GACM;GACJ;GACI;aAEX,CAAC,WACA,oBAAC,MAAM,aAAP;IACE,kBAAiB;IACjB,YAAY;IACZ,QAAQ;IACI;cAEX;IACiB,CAAA,GAEpB,oBAAC,gBAAD,EAAgB,OAAO,QAAU,CAAA;GAEzB,CAAA;EAEH,CAAA;EAEf;AAEF,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}

package/esm/components/Input/use-input-props.mjs

@@ -3,7 +3,11 @@ import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
 import { extractStyleProps } from "../../core/Box/style-props/extract-style-props/extract-style-props.mjs";
 //#region packages/@mantine/core/src/components/Input/use-input-props.ts
 function useInputProps(component, defaultProps, _props) {
-	const props = useProps(component, defaultProps, _props);
+	const props = useProps([
+		"Input",
+		"InputWrapper",
+		component
+	], defaultProps, _props);
 	const { label, description, error, required, classNames, styles, className, unstyled, __staticSelector, __stylesApiProps, errorProps, labelProps, descriptionProps, wrapperProps: _wrapperProps, id, size, style, inputContainer, inputWrapperOrder, withAsterisk, variant, vars, mod, attributes, ...others } = props;
 	const { styleProps, rest } = extractStyleProps(others);
 	const wrapperProps = {

package/esm/components/Input/use-input-props.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-input-props.mjs","names":[],"sources":["../../../src/components/Input/use-input-props.ts"],"sourcesContent":["import { BoxProps, extractStyleProps, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps } from './Input';\n\ninterface BaseProps\n  extends __BaseInputProps, BoxProps, StylesApiProps<{ props: any; stylesNames: string }> {\n  __staticSelector?: string;\n  __stylesApiProps?: Record<string, any>;\n  id?: string;\n}\n\nexport function useInputProps<T extends BaseProps, U extends Partial<T> | null>(\n  component: string,\n  defaultProps: U,\n  _props: T\n) {\n  const props = useProps<T, U>(component, defaultProps, _props);\n  const {\n    label,\n    description,\n    error,\n    required,\n    classNames,\n    styles,\n    className,\n    unstyled,\n    __staticSelector,\n    __stylesApiProps,\n    errorProps,\n    labelProps,\n    descriptionProps,\n    wrapperProps: _wrapperProps,\n    id,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    vars,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const { styleProps, rest } = extractStyleProps(others);\n\n  const wrapperProps = {\n    label,\n    description,\n    error,\n    required,\n    classNames,\n    className,\n    __staticSelector,\n    __stylesApiProps: __stylesApiProps || props,\n    errorProps,\n    labelProps,\n    descriptionProps,\n    unstyled,\n    styles,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    id,\n    mod,\n    attributes,\n    ..._wrapperProps,\n  };\n\n  return {\n    ...rest,\n    classNames,\n    styles,\n    unstyled,\n    wrapperProps: { ...wrapperProps, ...styleProps } as typeof wrapperProps & BoxProps,\n    inputProps: {\n      required,\n      classNames,\n      styles,\n      unstyled,\n      size,\n      __staticSelector,\n      __stylesApiProps: __stylesApiProps || props,\n      error,\n      variant,\n      id,\n      attributes,\n    },\n  };\n}\n"],"mappings":";;;;AAUA,SAAgB,cACd,WACA,cACA,QACA;CACA,MAAM,QAAQ,SAAe,WAAW,cAAc,OAAO;CAC7D,MAAM,EACJ,OACA,aACA,OACA,UACA,YACA,QACA,WACA,UACA,kBACA,kBACA,YACA,YACA,kBACA,cAAc,eACd,IACA,MACA,OACA,gBACA,mBACA,cACA,SACA,MACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CAEtD,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAAkB,oBAAoB;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ;AAED,QAAO;EACL,GAAG;EACH;EACA;EACA;EACA,cAAc;GAAE,GAAG;GAAc,GAAG;GAAY;EAChD,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA,kBAAkB,oBAAoB;GACtC;GACA;GACA;GACA;GACD;EACF"}
+{"version":3,"file":"use-input-props.mjs","names":[],"sources":["../../../src/components/Input/use-input-props.ts"],"sourcesContent":["import { BoxProps, extractStyleProps, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps } from './Input';\n\ninterface BaseProps\n  extends __BaseInputProps, BoxProps, StylesApiProps<{ props: any; stylesNames: string }> {\n  __staticSelector?: string;\n  __stylesApiProps?: Record<string, any>;\n  id?: string;\n}\n\nexport function useInputProps<T extends BaseProps, U extends Partial<T> | null>(\n  component: string,\n  defaultProps: U,\n  _props: T\n) {\n  const props = useProps<T, U>(['Input', 'InputWrapper', component], defaultProps, _props);\n  const {\n    label,\n    description,\n    error,\n    required,\n    classNames,\n    styles,\n    className,\n    unstyled,\n    __staticSelector,\n    __stylesApiProps,\n    errorProps,\n    labelProps,\n    descriptionProps,\n    wrapperProps: _wrapperProps,\n    id,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    vars,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const { styleProps, rest } = extractStyleProps(others);\n\n  const wrapperProps = {\n    label,\n    description,\n    error,\n    required,\n    classNames,\n    className,\n    __staticSelector,\n    __stylesApiProps: __stylesApiProps || props,\n    errorProps,\n    labelProps,\n    descriptionProps,\n    unstyled,\n    styles,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    id,\n    mod,\n    attributes,\n    ..._wrapperProps,\n  };\n\n  return {\n    ...rest,\n    classNames,\n    styles,\n    unstyled,\n    wrapperProps: { ...wrapperProps, ...styleProps } as typeof wrapperProps & BoxProps,\n    inputProps: {\n      required,\n      classNames,\n      styles,\n      unstyled,\n      size,\n      __staticSelector,\n      __stylesApiProps: __stylesApiProps || props,\n      error,\n      variant,\n      id,\n      attributes,\n    },\n  };\n}\n"],"mappings":";;;;AAUA,SAAgB,cACd,WACA,cACA,QACA;CACA,MAAM,QAAQ,SAAe;EAAC;EAAS;EAAgB;EAAU,EAAE,cAAc,OAAO;CACxF,MAAM,EACJ,OACA,aACA,OACA,UACA,YACA,QACA,WACA,UACA,kBACA,kBACA,YACA,YACA,kBACA,cAAc,eACd,IACA,MACA,OACA,gBACA,mBACA,cACA,SACA,MACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,EAAE,YAAY,SAAS,kBAAkB,OAAO;CAEtD,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAAkB,oBAAoB;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ;AAED,QAAO;EACL,GAAG;EACH;EACA;EACA;EACA,cAAc;GAAE,GAAG;GAAc,GAAG;GAAY;EAChD,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA,kBAAkB,oBAAoB;GACtC;GACA;GACA;GACA;GACD;EACF"}

package/esm/components/JsonInput/JsonInput.mjs

@@ -11,11 +11,14 @@ import { jsx } from "react/jsx-runtime";
 const defaultProps = {
 	serialize: JSON.stringify,
 	deserialize: JSON.parse,
-	size: "sm",
 	indentSpaces: 2
 };
 const JsonInput = factory((props) => {
-	const { value, defaultValue, onChange, formatOnBlur, validationError, serialize, deserialize, onFocus, onBlur, readOnly, error, indentSpaces, ...others } = useProps("JsonInput", defaultProps, props);
+	const { value, defaultValue, onChange, formatOnBlur, validationError, serialize, deserialize, onFocus, onBlur, readOnly, error, indentSpaces, ...others } = useProps([
+		"Input",
+		"InputWrapper",
+		"JsonInput"
+	], defaultProps, props);
 	const [_value, setValue] = useUncontrolled({
 		value,
 		defaultValue,

package/esm/components/JsonInput/JsonInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"JsonInput.mjs","names":[],"sources":["../../../src/components/JsonInput/JsonInput.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { factory, Factory, useProps } from '../../core';\nimport { __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Textarea, TextareaProps } from '../Textarea';\nimport { validateJson } from './validate-json/validate-json';\n\nexport interface JsonInputProps extends Omit<TextareaProps, 'onChange'> {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Determines whether the value should be formatted on blur @default false */\n  formatOnBlur?: boolean;\n\n  /** Error message shown when the input value is invalid JSON (checked on blur). If not provided, a generic error state is shown. Takes precedence over the `error` prop when validation fails. */\n  validationError?: React.ReactNode;\n\n  /** Function to serialize value into a string for formatting. Called with (value, null, 2) where 2 is the indentation level. @default JSON.stringify */\n  serialize?: typeof JSON.stringify;\n\n  /** Function to deserialize string value for formatting and validation. Must throw an error if the string is invalid JSON. @default JSON.parse */\n  deserialize?: typeof JSON.parse;\n\n  /** Number of spaces to use as white space for formatting. Passed as the third argument to `serialize` function. @default 2 */\n  indentSpaces?: number;\n}\n\nexport type JsonInputFactory = Factory<{\n  props: JsonInputProps;\n  ref: HTMLTextAreaElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {\n  serialize: JSON.stringify,\n  deserialize: JSON.parse,\n  size: 'sm',\n  indentSpaces: 2,\n} satisfies Partial<JsonInputProps>;\n\nexport const JsonInput = factory<JsonInputFactory>((props) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    formatOnBlur,\n    validationError,\n    serialize,\n    deserialize,\n    onFocus,\n    onBlur,\n    readOnly,\n    error,\n    indentSpaces,\n    ...others\n  } = useProps('JsonInput', defaultProps, props);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const [valid, setValid] = useState(validateJson(_value, deserialize));\n\n  const handleFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    onFocus?.(event);\n    setValid(true);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    onBlur?.(event);\n    const isValid = validateJson(event.currentTarget.value, deserialize);\n    formatOnBlur &&\n      !readOnly &&\n      isValid &&\n      event.currentTarget.value.trim() !== '' &&\n      setValue(serialize(deserialize(event.currentTarget.value), null, indentSpaces));\n    setValid(isValid);\n  };\n\n  return (\n    <Textarea\n      value={_value}\n      onChange={(event) => setValue(event.currentTarget.value)}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      readOnly={readOnly}\n      {...others}\n      autoComplete=\"off\"\n      __staticSelector=\"JsonInput\"\n      error={valid ? error : validationError || true}\n      data-monospace\n    />\n  );\n});\n\nJsonInput.classes = InputBase.classes;\nJsonInput.displayName = '@mantine/core/JsonInput';\n\nexport namespace JsonInput {\n  export type Props = JsonInputProps;\n  export type Factory = JsonInputFactory;\n}\n"],"mappings":";;;;;;;;;;AAwCA,MAAM,eAAe;CACnB,WAAW,KAAK;CAChB,aAAa,KAAK;CAClB,MAAM;CACN,cAAc;CACf;AAED,MAAa,YAAY,SAA2B,UAAU;CAC5D,MAAM,EACJ,OACA,cACA,UACA,cACA,iBACA,WACA,aACA,SACA,QACA,UACA,OACA,cACA,GAAG,WACD,SAAS,aAAa,cAAc,MAAM;CAE9C,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa,QAAQ,YAAY,CAAC;CAErE,MAAM,eAAe,UAAiD;AACpE,YAAU,MAAM;AAChB,WAAS,KAAK;;CAGhB,MAAM,cAAc,UAAiD;AACnE,WAAS,MAAM;EACf,MAAM,UAAU,aAAa,MAAM,cAAc,OAAO,YAAY;AACpE,kBACE,CAAC,YACD,WACA,MAAM,cAAc,MAAM,MAAM,KAAK,MACrC,SAAS,UAAU,YAAY,MAAM,cAAc,MAAM,EAAE,MAAM,aAAa,CAAC;AACjF,WAAS,QAAQ;;AAGnB,QACE,oBAAC,UAAD;EACE,OAAO;EACP,WAAW,UAAU,SAAS,MAAM,cAAc,MAAM;EACxD,SAAS;EACT,QAAQ;EACE;EACV,GAAI;EACJ,cAAa;EACb,kBAAiB;EACjB,OAAO,QAAQ,QAAQ,mBAAmB;EAC1C,kBAAA;EACA,CAAA;EAEJ;AAEF,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}
+{"version":3,"file":"JsonInput.mjs","names":[],"sources":["../../../src/components/JsonInput/JsonInput.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { factory, Factory, useProps } from '../../core';\nimport { __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Textarea, TextareaProps } from '../Textarea';\nimport { validateJson } from './validate-json/validate-json';\n\nexport interface JsonInputProps extends Omit<TextareaProps, 'onChange'> {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Determines whether the value should be formatted on blur @default false */\n  formatOnBlur?: boolean;\n\n  /** Error message shown when the input value is invalid JSON (checked on blur). If not provided, a generic error state is shown. Takes precedence over the `error` prop when validation fails. */\n  validationError?: React.ReactNode;\n\n  /** Function to serialize value into a string for formatting. Called with (value, null, 2) where 2 is the indentation level. @default JSON.stringify */\n  serialize?: typeof JSON.stringify;\n\n  /** Function to deserialize string value for formatting and validation. Must throw an error if the string is invalid JSON. @default JSON.parse */\n  deserialize?: typeof JSON.parse;\n\n  /** Number of spaces to use as white space for formatting. Passed as the third argument to `serialize` function. @default 2 */\n  indentSpaces?: number;\n}\n\nexport type JsonInputFactory = Factory<{\n  props: JsonInputProps;\n  ref: HTMLTextAreaElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {\n  serialize: JSON.stringify,\n  deserialize: JSON.parse,\n  indentSpaces: 2,\n} satisfies Partial<JsonInputProps>;\n\nexport const JsonInput = factory<JsonInputFactory>((props) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    formatOnBlur,\n    validationError,\n    serialize,\n    deserialize,\n    onFocus,\n    onBlur,\n    readOnly,\n    error,\n    indentSpaces,\n    ...others\n  } = useProps(['Input', 'InputWrapper', 'JsonInput'], defaultProps, props);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const [valid, setValid] = useState(validateJson(_value, deserialize));\n\n  const handleFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    onFocus?.(event);\n    setValid(true);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    onBlur?.(event);\n    const isValid = validateJson(event.currentTarget.value, deserialize);\n    formatOnBlur &&\n      !readOnly &&\n      isValid &&\n      event.currentTarget.value.trim() !== '' &&\n      setValue(serialize(deserialize(event.currentTarget.value), null, indentSpaces));\n    setValid(isValid);\n  };\n\n  return (\n    <Textarea\n      value={_value}\n      onChange={(event) => setValue(event.currentTarget.value)}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      readOnly={readOnly}\n      {...others}\n      autoComplete=\"off\"\n      __staticSelector=\"JsonInput\"\n      error={valid ? error : validationError || true}\n      data-monospace\n    />\n  );\n});\n\nJsonInput.classes = InputBase.classes;\nJsonInput.displayName = '@mantine/core/JsonInput';\n\nexport namespace JsonInput {\n  export type Props = JsonInputProps;\n  export type Factory = JsonInputFactory;\n}\n"],"mappings":";;;;;;;;;;AAwCA,MAAM,eAAe;CACnB,WAAW,KAAK;CAChB,aAAa,KAAK;CAClB,cAAc;CACf;AAED,MAAa,YAAY,SAA2B,UAAU;CAC5D,MAAM,EACJ,OACA,cACA,UACA,cACA,iBACA,WACA,aACA,SACA,QACA,UACA,OACA,cACA,GAAG,WACD,SAAS;EAAC;EAAS;EAAgB;EAAY,EAAE,cAAc,MAAM;CAEzE,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa,QAAQ,YAAY,CAAC;CAErE,MAAM,eAAe,UAAiD;AACpE,YAAU,MAAM;AAChB,WAAS,KAAK;;CAGhB,MAAM,cAAc,UAAiD;AACnE,WAAS,MAAM;EACf,MAAM,UAAU,aAAa,MAAM,cAAc,OAAO,YAAY;AACpE,kBACE,CAAC,YACD,WACA,MAAM,cAAc,MAAM,MAAM,KAAK,MACrC,SAAS,UAAU,YAAY,MAAM,cAAc,MAAM,EAAE,MAAM,aAAa,CAAC;AACjF,WAAS,QAAQ;;AAGnB,QACE,oBAAC,UAAD;EACE,OAAO;EACP,WAAW,UAAU,SAAS,MAAM,cAAc,MAAM;EACxD,SAAS;EACT,QAAQ;EACE;EACV,GAAI;EACJ,cAAa;EACb,kBAAiB;EACjB,OAAO,QAAQ,QAAQ,mBAAmB;EAC1C,kBAAA;EACA,CAAA;EAEJ;AAEF,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}

package/esm/components/MaskInput/MaskInput.mjs

@@ -7,7 +7,11 @@ import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/MaskInput/MaskInput.tsx
 const defaultProps = {};
 const MaskInput = factory((props) => {
-	const { maskRef, elementProps } = useMaskInputProps(useProps("MaskInput", defaultProps, props));
+	const { maskRef, elementProps } = useMaskInputProps(useProps([
+		"Input",
+		"InputWrapper",
+		"MaskInput"
+	], defaultProps, props));
 	return /* @__PURE__ */ jsx(InputBase, {
 		component: "input",
 		ref: maskRef,

package/esm/components/MaskInput/MaskInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MaskInput.mjs","names":[],"sources":["../../../src/components/MaskInput/MaskInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { useMaskInputProps } from './use-mask-input-props';\n\nexport interface MaskInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<MaskInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** Mask pattern string or array of string literals and RegExp objects */\n  mask: string | Array<string | RegExp>;\n\n  /** Override or extend the default token map */\n  tokens?: Record<string, RegExp>;\n\n  /** Called before masking on each keystroke, can return overrides for mask options */\n  modify?: (\n    value: string\n  ) => Partial<Pick<MaskInputProps, 'mask' | 'tokens' | 'slotChar' | 'separate'>> | undefined;\n\n  /** When true, raw and display values are decoupled */\n  separate?: boolean;\n\n  /** Character displayed in unfilled slots, `\"_\"` by default */\n  slotChar?: string | null;\n\n  /** Show mask pattern even when field is empty and unfocused */\n  alwaysShowMask?: boolean;\n\n  /** Show mask placeholder on focus, `true` by default */\n  showMaskOnFocus?: boolean;\n\n  /** Transform each character before validation and insertion */\n  transform?: (char: string) => string;\n\n  /** Clear value on blur when mask is incomplete, `false` by default */\n  autoClear?: boolean;\n\n  /** Called on every change with raw and masked values */\n  onChangeRaw?: (rawValue: string, maskedValue: string) => void;\n\n  /** Called when all required mask slots are filled */\n  onComplete?: (maskedValue: string, rawValue: string) => void;\n\n  /** Escape hatch for advanced cursor/value manipulation */\n  beforeMaskedStateChange?: (states: {\n    previousState: { value: string; selection: { start: number; end: number } | null };\n    currentState: { value: string; selection: { start: number; end: number } | null };\n    nextState: { value: string; selection: { start: number; end: number } | null };\n  }) => { value: string; selection: { start: number; end: number } | null };\n}\n\nexport type MaskInputFactory = Factory<{\n  props: MaskInputProps;\n  variant: InputVariant;\n  ref: HTMLInputElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {} satisfies Partial<MaskInputProps>;\n\nexport const MaskInput = factory<MaskInputFactory>((props) => {\n  const _props = useProps('MaskInput', defaultProps, props);\n  const { maskRef, elementProps } = useMaskInputProps(_props);\n\n  return (\n    <InputBase\n      component=\"input\"\n      ref={maskRef}\n      {...(elementProps as any)}\n      __staticSelector=\"MaskInput\"\n    />\n  );\n});\n\nMaskInput.classes = InputBase.classes;\nMaskInput.displayName = '@mantine/core/MaskInput';\n"],"mappings":";;;;;;;AA6DA,MAAM,eAAe,EAAE;AAEvB,MAAa,YAAY,SAA2B,UAAU;CAE5D,MAAM,EAAE,SAAS,iBAAiB,kBADnB,SAAS,aAAa,cAAc,MAAM,CACE;AAE3D,QACE,oBAAC,WAAD;EACE,WAAU;EACV,KAAK;EACL,GAAK;EACL,kBAAiB;EACjB,CAAA;EAEJ;AAEF,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}
+{"version":3,"file":"MaskInput.mjs","names":[],"sources":["../../../src/components/MaskInput/MaskInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { useMaskInputProps } from './use-mask-input-props';\n\nexport interface MaskInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<MaskInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** Mask pattern string or array of string literals and RegExp objects */\n  mask: string | Array<string | RegExp>;\n\n  /** Override or extend the default token map */\n  tokens?: Record<string, RegExp>;\n\n  /** Called before masking on each keystroke, can return overrides for mask options */\n  modify?: (\n    value: string\n  ) => Partial<Pick<MaskInputProps, 'mask' | 'tokens' | 'slotChar' | 'separate'>> | undefined;\n\n  /** When true, raw and display values are decoupled */\n  separate?: boolean;\n\n  /** Character displayed in unfilled slots, `\"_\"` by default */\n  slotChar?: string | null;\n\n  /** Show mask pattern even when field is empty and unfocused */\n  alwaysShowMask?: boolean;\n\n  /** Show mask placeholder on focus, `true` by default */\n  showMaskOnFocus?: boolean;\n\n  /** Transform each character before validation and insertion */\n  transform?: (char: string) => string;\n\n  /** Clear value on blur when mask is incomplete, `false` by default */\n  autoClear?: boolean;\n\n  /** Called on every change with raw and masked values */\n  onChangeRaw?: (rawValue: string, maskedValue: string) => void;\n\n  /** Called when all required mask slots are filled */\n  onComplete?: (maskedValue: string, rawValue: string) => void;\n\n  /** Escape hatch for advanced cursor/value manipulation */\n  beforeMaskedStateChange?: (states: {\n    previousState: { value: string; selection: { start: number; end: number } | null };\n    currentState: { value: string; selection: { start: number; end: number } | null };\n    nextState: { value: string; selection: { start: number; end: number } | null };\n  }) => { value: string; selection: { start: number; end: number } | null };\n\n  /** Assigns a function that clears the input value to the given ref */\n  resetRef?: React.RefObject<(() => void) | null>;\n}\n\nexport type MaskInputFactory = Factory<{\n  props: MaskInputProps;\n  variant: InputVariant;\n  ref: HTMLInputElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {} satisfies Partial<MaskInputProps>;\n\nexport const MaskInput = factory<MaskInputFactory>((props) => {\n  const _props = useProps(['Input', 'InputWrapper', 'MaskInput'], defaultProps, props);\n  const { maskRef, elementProps } = useMaskInputProps(_props);\n\n  return (\n    <InputBase\n      component=\"input\"\n      ref={maskRef}\n      {...(elementProps as any)}\n      __staticSelector=\"MaskInput\"\n    />\n  );\n});\n\nMaskInput.classes = InputBase.classes;\nMaskInput.displayName = '@mantine/core/MaskInput';\n"],"mappings":";;;;;;;AAgEA,MAAM,eAAe,EAAE;AAEvB,MAAa,YAAY,SAA2B,UAAU;CAE5D,MAAM,EAAE,SAAS,iBAAiB,kBADnB,SAAS;EAAC;EAAS;EAAgB;EAAY,EAAE,cAAc,MAAM,CACzB;AAE3D,QACE,oBAAC,WAAD;EACE,WAAU;EACV,KAAK;EACL,GAAK;EACL,kBAAiB;EACjB,CAAA;EAEJ;AAEF,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}

package/esm/components/MaskInput/use-mask-input-props.mjs

@@ -1,9 +1,9 @@
 "use client";
-import { useMask, useMergedRef } from "@mantine/hooks";
+import { assignRef, useMask, useMergedRef } from "@mantine/hooks";
 //#region packages/@mantine/core/src/components/MaskInput/use-mask-input-props.ts
 function useMaskInputProps(props) {
-	const { mask, tokens, modify, separate, slotChar, alwaysShowMask, showMaskOnFocus, transform, autoClear, onChangeRaw, onComplete, beforeMaskedStateChange, ref, ...elementProps } = props;
-	const { ref: maskCallbackRef } = useMask({
+	const { mask, tokens, modify, separate, slotChar, alwaysShowMask, showMaskOnFocus, transform, autoClear, onChangeRaw, onComplete, beforeMaskedStateChange, resetRef, ref, ...elementProps } = props;
+	const { ref: maskCallbackRef, reset } = useMask({
 		mask,
 		tokens,
 		modify,
@@ -17,6 +17,7 @@ function useMaskInputProps(props) {
 		onComplete,
 		beforeMaskedStateChange
 	});
+	assignRef(resetRef, reset);
 	return {
 		maskRef: useMergedRef(ref, maskCallbackRef),
 		elementProps

package/esm/components/MaskInput/use-mask-input-props.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-mask-input-props.mjs","names":[],"sources":["../../../src/components/MaskInput/use-mask-input-props.ts"],"sourcesContent":["import { useMask, useMergedRef } from '@mantine/hooks';\nimport type { MaskInputProps } from './MaskInput';\n\nexport function useMaskInputProps(props: MaskInputProps & { ref?: React.Ref<HTMLInputElement> }) {\n  const {\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n    ref,\n    ...elementProps\n  } = props;\n\n  const { ref: maskCallbackRef } = useMask({\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n  });\n\n  const maskRef = useMergedRef(ref, maskCallbackRef);\n\n  return { maskRef, elementProps };\n}\n"],"mappings":";;;AAGA,SAAgB,kBAAkB,OAA+D;CAC/F,MAAM,EACJ,MACA,QACA,QACA,UACA,UACA,gBACA,iBACA,WACA,WACA,aACA,YACA,yBACA,KACA,GAAG,iBACD;CAEJ,MAAM,EAAE,KAAK,oBAAoB,QAAQ;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAIF,QAAO;EAAE,SAFO,aAAa,KAAK,gBAAgB;EAEhC;EAAc"}
+{"version":3,"file":"use-mask-input-props.mjs","names":[],"sources":["../../../src/components/MaskInput/use-mask-input-props.ts"],"sourcesContent":["import { assignRef, useMask, useMergedRef } from '@mantine/hooks';\nimport type { MaskInputProps } from './MaskInput';\n\nexport function useMaskInputProps(props: MaskInputProps & { ref?: React.Ref<HTMLInputElement> }) {\n  const {\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n    resetRef,\n    ref,\n    ...elementProps\n  } = props;\n\n  const { ref: maskCallbackRef, reset } = useMask({\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n  });\n\n  assignRef(resetRef, reset);\n\n  const maskRef = useMergedRef(ref, maskCallbackRef);\n\n  return { maskRef, elementProps };\n}\n"],"mappings":";;;AAGA,SAAgB,kBAAkB,OAA+D;CAC/F,MAAM,EACJ,MACA,QACA,QACA,UACA,UACA,gBACA,iBACA,WACA,WACA,aACA,YACA,yBACA,UACA,KACA,GAAG,iBACD;CAEJ,MAAM,EAAE,KAAK,iBAAiB,UAAU,QAAQ;EAC9C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,WAAU,UAAU,MAAM;AAI1B,QAAO;EAAE,SAFO,aAAa,KAAK,gBAAgB;EAEhC;EAAc"}

package/esm/components/MultiSelect/MultiSelect.mjs

@@ -10,6 +10,7 @@ import { getOptionsLockup } from "../Combobox/get-options-lockup/get-options-loc
 import { useCombobox } from "../Combobox/use-combobox/use-combobox.mjs";
 import { Combobox } from "../Combobox/Combobox.mjs";
 import { OptionsDropdown } from "../Combobox/OptionsDropdown/OptionsDropdown.mjs";
+import { usePillsReorder } from "../Combobox/use-pills-reorder/use-pills-reorder.mjs";
 import { Pill } from "../Pill/Pill.mjs";
 import { PillsInput } from "../PillsInput/PillsInput.mjs";
 import { filterPickedValues } from "./filter-picked-values.mjs";
@@ -34,8 +35,12 @@ const defaultProps = {
 	size: "sm"
 };
 const MultiSelect = genericFactory((_props) => {
-	const props = useProps("MultiSelect", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, onFocus, onBlur, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, maxValues, searchable, nothingFoundMessage, withCheckIcon, withAlignedLabels, checkIconPosition, hidePickedOptions, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, placeholder, hiddenInputValuesDivider, required, mod, renderOption, renderPill, onRemove, onClear, onMaxValues, scrollAreaProps, chevronColor, attributes, clearSearchOnChange, openOnFocus, loading, loadingPosition, ...others } = props;
+	const props = useProps([
+		"Input",
+		"InputWrapper",
+		"MultiSelect"
+	], defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, onFocus, onBlur, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, maxValues, searchable, nothingFoundMessage, withCheckIcon, withAlignedLabels, checkIconPosition, hidePickedOptions, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, placeholder, hiddenInputValuesDivider, required, mod, renderOption, renderPill, onRemove, onClear, onMaxValues, scrollAreaProps, chevronColor, attributes, clearSearchOnChange, openOnFocus, loading, loadingPosition, withPillsReorder, ...others } = props;
 	const _id = useId$1(id);
 	const parsedData = getParsedComboboxData(data);
 	const optionsLockup = getOptionsLockup(parsedData);
@@ -59,6 +64,11 @@ const MultiSelect = genericFactory((_props) => {
 		finalValue: [],
 		onChange
 	});
+	const { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({
+		value: _value,
+		onChange: setValue,
+		enabled: withPillsReorder && !disabled && !readOnly
+	});
 	const [_searchValue, setSearchValue] = useUncontrolled({
 		value: searchValue,
 		defaultValue: defaultSearchValue,
@@ -85,6 +95,7 @@ const MultiSelect = genericFactory((_props) => {
 	});
 	const handleInputKeydown = (event) => {
 		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
 		if (event.key === " " && !searchable) {
 			event.preventDefault();
 			combobox.toggleDropdown();
@@ -93,9 +104,11 @@ const MultiSelect = genericFactory((_props) => {
 			onRemove?.(_value[_value.length - 1]);
 			setValue(_value.slice(0, _value.length - 1));
 		}
+		handleInputKeyDown(event);
 	};
 	const values = _value.map((item, index) => {
 		const optionData = optionsLockup[`${item}`] || retainedSelectedOptions.current[`${item}`];
+		const reorderProps = getPillProps(index);
 		if (renderPill) return /* @__PURE__ */ jsx(Fragment, { children: renderPill({
 			option: optionData,
 			value: item,
@@ -103,7 +116,8 @@ const MultiSelect = genericFactory((_props) => {
 				setValue(_value.filter((i) => item !== i));
 				onRemove?.(item);
 			},
-			disabled
+			disabled,
+			reorderProps
 		}) }, `${item}-${index}`);
 		return /* @__PURE__ */ jsx(Pill, {
 			withRemoveButton: !readOnly && !optionsLockup[`${item}`]?.disabled,
@@ -114,6 +128,7 @@ const MultiSelect = genericFactory((_props) => {
 			unstyled,
 			disabled,
 			...getStyles("pill"),
+			...reorderProps,
 			children: optionData?.label || item
 		}, `${item}-${index}`);
 	});
@@ -218,6 +233,7 @@ const MultiSelect = genericFactory((_props) => {
 				disabled,
 				unstyled,
 				...getStyles("pillsList", { style: pillsListStyle }),
+				...getListProps(),
 				children: [values, /* @__PURE__ */ jsx(Combobox.EventsTarget, {
 					autoComplete,
 					withExpandedAttribute: true,