@mantine/core 9.1.0 → 9.2.0

package/esm/components/TagsInput/TagsInput.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 { filterPickedTags } from "./filter-picked-tags.mjs";
@@ -27,8 +28,12 @@ const defaultProps = {
 	size: "sm"
 };
 const TagsInput = factory((_props) => {
-	const props = useProps("TagsInput", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, maxTags, allowDuplicates, onDuplicate, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, splitChars, onFocus, onBlur, onPaste, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, required, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, hiddenInputValuesDivider, mod, renderOption, renderPill, onRemove, onClear, onMaxTags, scrollAreaProps, acceptValueOnBlur, isDuplicate, openOnFocus, attributes, ref, loading, loadingPosition, ...others } = props;
+	const props = useProps([
+		"Input",
+		"InputWrapper",
+		"TagsInput"
+	], defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, maxTags, allowDuplicates, onDuplicate, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, splitChars, onFocus, onBlur, onPaste, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, required, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, hiddenInputValuesDivider, mod, renderOption, renderPill, onRemove, onClear, onMaxTags, scrollAreaProps, acceptValueOnBlur, isDuplicate, openOnFocus, attributes, ref, loading, loadingPosition, withPillsReorder, ...others } = props;
 	const _id = useId$1(id);
 	const parsedData = getParsedComboboxData(data);
 	const optionsLockup = getOptionsLockup(parsedData);
@@ -53,6 +58,11 @@ const TagsInput = factory((_props) => {
 		finalValue: [],
 		onChange
 	});
+	const { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({
+		value: _value,
+		onChange: setValue,
+		enabled: withPillsReorder && !disabled && !readOnly
+	});
 	const [_searchValue, setSearchValue] = useUncontrolled({
 		value: searchValue,
 		defaultValue: defaultSearchValue,
@@ -94,7 +104,7 @@ const TagsInput = factory((_props) => {
 	};
 	const handleInputKeydown = (event) => {
 		onKeyDown?.(event);
-		if (event.isPropagationStopped()) return;
+		if (event.defaultPrevented || event.isPropagationStopped()) return;
 		const inputValue = _searchValue.trim();
 		const { length } = inputValue;
 		if (splitChars.includes(event.key) && length > 0) {
@@ -119,6 +129,7 @@ const TagsInput = factory((_props) => {
 			onRemove?.(_value[_value.length - 1]);
 			setValue(_value.slice(0, _value.length - 1));
 		}
+		handleInputKeyDown(event);
 	};
 	const handlePaste = (event) => {
 		onPaste?.(event);
@@ -143,6 +154,7 @@ const TagsInput = factory((_props) => {
 			setValue(next_value);
 			onRemove?.(item);
 		};
+		const reorderProps = getPillProps(index);
 		if (renderPill) return /* @__PURE__ */ jsx(Fragment, { children: renderPill({
 			option: optionsLockup[item] || {
 				value: item,
@@ -151,7 +163,8 @@ const TagsInput = factory((_props) => {
 			},
 			value: item,
 			onRemove: onRemoveItem,
-			disabled: disabled || readOnly
+			disabled: disabled || readOnly,
+			reorderProps
 		}) }, `${item}-${index}`);
 		return /* @__PURE__ */ jsx(Pill, {
 			withRemoveButton: !readOnly,
@@ -160,6 +173,7 @@ const TagsInput = factory((_props) => {
 			disabled,
 			attributes,
 			...getStyles("pill"),
+			...reorderProps,
 			children: item
 		}, `${item}-${index}`);
 	});
@@ -245,6 +259,7 @@ const TagsInput = factory((_props) => {
 				disabled,
 				unstyled,
 				...getStyles("pillsList"),
+				...getListProps(),
 				children: [values, /* @__PURE__ */ jsx(Combobox.EventsTarget, {
 					autoComplete,
 					withExpandedAttribute: true,

package/esm/components/TagsInput/TagsInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.mjs","names":["useId"],"sources":["../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxGenericData,\n  ComboboxGenericItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxRenderPillInput,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedTags } from './filter-picked-tags';\nimport { getSplittedTags } from './get-splitted-tags';\n\nexport type TagsInputStylesNames =\n  | __InputStylesNames\n  | ComboboxLikeStylesNames\n  | 'pill'\n  | 'pillsList'\n  | 'inputField';\n\nexport interface TagsInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    Omit<ComboboxLikeProps, 'data'>,\n    StylesApiProps<TagsInputFactory>,\n    ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Data displayed in the dropdown. Values must be unique. */\n  data?: ComboboxGenericData;\n\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  /** Called when tag is removed */\n  onRemove?: (value: string) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Maximum number of tags @default Infinity */\n  maxTags?: number;\n\n  /** Called when user tries to add more tags than maxTags */\n  onMaxTags?: (value: string) => void;\n\n  /** If set, duplicate tags are allowed @default false */\n  allowDuplicates?: boolean;\n\n  /** Called when user tries to submit a duplicated tag */\n  onDuplicate?: (value: string) => void;\n\n  /** Characters that should trigger tags split, `[',']` by default */\n  splitChars?: string[];\n\n  /** If set, the clear button is displayed in the right section when the component has value @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?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;\n\n  /** A function to render content of the pill, replaces the default content of the pill */\n  renderPill?: (props: ComboboxRenderPillInput) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** If set, the value typed in by the user but not submitted is accepted when the input is blurred @default true */\n  acceptValueOnBlur?: boolean;\n\n  /** Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. */\n  isDuplicate?: (value: string, currentValues: string[]) => boolean;\n\n  /** If set, the dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type TagsInputFactory = Factory<{\n  props: TagsInputProps;\n  ref: HTMLInputElement;\n  stylesNames: TagsInputStylesNames;\n}>;\n\nconst defaultProps = {\n  maxTags: Infinity,\n  acceptValueOnBlur: true,\n  splitChars: [','],\n  hiddenInputValuesDivider: ',',\n  openOnFocus: true,\n  size: 'sm',\n} satisfies Partial<TagsInputProps>;\n\nexport const TagsInput = factory<TagsInputFactory>((_props) => {\n  const props = useProps('TagsInput', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    value,\n    defaultValue,\n    onChange,\n    onKeyDown,\n    maxTags,\n    allowDuplicates,\n    onDuplicate,\n    variant,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    readOnly,\n    disabled,\n    splitChars,\n    onFocus,\n    onBlur,\n    onPaste,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    rightSectionProps,\n    leftSection,\n    leftSectionWidth,\n    leftSectionPointerEvents,\n    leftSectionProps,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    required,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    wrapperProps,\n    description,\n    label,\n    error,\n    withErrorStyles,\n    name,\n    form,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    hiddenInputValuesDivider,\n    mod,\n    renderOption,\n    renderPill,\n    onRemove,\n    onClear,\n    onMaxTags,\n    scrollAreaProps,\n    acceptValueOnBlur,\n    isDuplicate,\n    openOnFocus,\n    attributes,\n    ref,\n    loading,\n    loadingPosition,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const _ref = useMergedRef(inputRef, ref);\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const {\n    styleProps,\n    rest: { type, autoComplete, ...rest },\n  } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<TagsInputFactory>({\n    name: 'TagsInput',\n    classes: {} as any,\n    props: props as any,\n    classNames,\n    styles,\n    unstyled,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TagsInputFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleValueSelect = (val: string) => {\n    const isDuplicated = isDuplicate\n      ? isDuplicate(val, _value)\n      : _value.some((tag) => tag.toLowerCase() === val.toLowerCase());\n\n    if (isDuplicated) {\n      onDuplicate?.(val);\n      if (!allowDuplicates) {\n        handleSearchChange('');\n        return;\n      }\n    }\n\n    if (_value.length >= maxTags) {\n      onMaxTags?.(val);\n      return;\n    }\n\n    onOptionSubmit?.(val);\n    handleSearchChange('');\n    if (val.length > 0) {\n      setValue([..._value, val]);\n    }\n  };\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.isPropagationStopped()) {\n      return;\n    }\n\n    const inputValue = _searchValue.trim();\n    const { length } = inputValue;\n\n    if (splitChars.includes(event.key) && length > 0) {\n      setValue(\n        getSplittedTags({\n          splitChars,\n          allowDuplicates,\n          maxTags,\n          value: _searchValue,\n          currentTags: _value,\n          isDuplicate,\n          onDuplicate,\n        })\n      );\n      handleSearchChange('');\n      event.preventDefault();\n    }\n\n    if (event.key === 'Enter' && length > 0 && !event.nativeEvent.isComposing) {\n      event.preventDefault();\n\n      const hasActiveSelection = !!document.querySelector<HTMLDivElement>(\n        `#${combobox.listId} [data-combobox-option][data-combobox-selected]`\n      );\n\n      if (hasActiveSelection) {\n        return;\n      }\n\n      handleValueSelect(inputValue);\n    }\n\n    if (\n      event.key === 'Backspace' &&\n      length === 0 &&\n      _value.length > 0 &&\n      !event.nativeEvent.isComposing &&\n      !readOnly\n    ) {\n      onRemove?.(_value[_value.length - 1]);\n      setValue(_value.slice(0, _value.length - 1));\n    }\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n    onPaste?.(event);\n    event.preventDefault();\n\n    if (event.clipboardData) {\n      const pastedText = event.clipboardData.getData('text/plain');\n      setValue(\n        getSplittedTags({\n          splitChars,\n          allowDuplicates,\n          maxTags,\n          value: `${_searchValue}${pastedText}`,\n          currentTags: _value,\n          isDuplicate,\n          onDuplicate,\n        })\n      );\n      handleSearchChange('');\n    }\n  };\n\n  const values = _value.map((item, index) => {\n    const onRemoveItem = () => {\n      const next_value = _value.slice();\n      next_value.splice(index, 1);\n      setValue(next_value);\n      onRemove?.(item);\n    };\n\n    if (renderPill) {\n      return (\n        <Fragment key={`${item}-${index}`}>\n          {renderPill({\n            option: optionsLockup[item] || { value: item, label: item, disabled: false },\n            value: item,\n            onRemove: onRemoveItem,\n            disabled: disabled || readOnly,\n          })}\n        </Fragment>\n      );\n    }\n\n    return (\n      <Pill\n        key={`${item}-${index}`}\n        withRemoveButton={!readOnly}\n        onRemove={onRemoveItem}\n        unstyled={unstyled}\n        disabled={disabled}\n        attributes={attributes}\n        {...getStyles('pill')}\n      >\n        {item}\n      </Pill>\n    );\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _value, _searchValue]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue([]);\n        handleSearchChange('');\n        inputRef.current?.focus();\n        combobox.openDropdown();\n        onClear?.();\n      }}\n    />\n  );\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        size={size}\n        readOnly={readOnly}\n        __staticSelector=\"TagsInput\"\n        attributes={attributes}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val);\n          handleSearchChange('');\n\n          if (_value.length >= maxTags) {\n            onMaxTags?.(val);\n          } else {\n            setValue([..._value, optionsLockup[val].value]);\n          }\n\n          combobox.resetSelectedOption();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.DropdownTarget>\n          <PillsInput\n            {...styleProps}\n            __staticSelector=\"TagsInput\"\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            size={size}\n            className={className}\n            style={style}\n            variant={variant}\n            disabled={disabled}\n            radius={radius}\n            rightSection={rightSection}\n            __clearSection={clearButton}\n            __clearable={clearable && _value.length > 0 && !disabled && !readOnly}\n            __clearSectionMode={clearSectionMode}\n            rightSectionWidth={rightSectionWidth}\n            rightSectionPointerEvents={rightSectionPointerEvents}\n            rightSectionProps={rightSectionProps}\n            leftSection={leftSection}\n            leftSectionWidth={leftSectionWidth}\n            leftSectionPointerEvents={leftSectionPointerEvents}\n            leftSectionProps={leftSectionProps}\n            loading={loading}\n            loadingPosition={loadingPosition}\n            inputContainer={inputContainer}\n            inputWrapperOrder={inputWrapperOrder}\n            withAsterisk={withAsterisk}\n            required={required}\n            labelProps={labelProps}\n            descriptionProps={descriptionProps}\n            errorProps={errorProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            withErrorStyles={withErrorStyles}\n            __stylesApiProps={{ ...props, multiline: true }}\n            id={_id}\n            mod={mod}\n            attributes={attributes}\n          >\n            <Pill.Group disabled={disabled} unstyled={unstyled} {...getStyles('pillsList')}>\n              {values}\n              <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n                <PillsInput.Field\n                  {...rest}\n                  ref={_ref}\n                  {...getStyles('inputField')}\n                  unstyled={unstyled}\n                  onKeyDown={handleInputKeydown}\n                  onFocus={(event) => {\n                    onFocus?.(event);\n                    openOnFocus && combobox.openDropdown();\n                  }}\n                  onBlur={(event) => {\n                    onBlur?.(event);\n                    acceptValueOnBlur && handleValueSelect(_searchValue);\n                    combobox.closeDropdown();\n                  }}\n                  onPaste={handlePaste}\n                  value={_searchValue}\n                  onChange={(event) => handleSearchChange(event.currentTarget.value)}\n                  required={required && _value.length === 0}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  id={_id}\n                />\n              </Combobox.EventsTarget>\n            </Pill.Group>\n          </PillsInput>\n        </Combobox.DropdownTarget>\n\n        <OptionsDropdown\n          data={filterPickedTags({ data: parsedData, value: _value })}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={_searchValue}\n          limit={limit}\n          hiddenWhenEmpty\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          unstyled={unstyled}\n          labelId={label ? `${_id}-label` : undefined}\n          aria-label={label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        form={form}\n        value={_value}\n        valuesDivider={hiddenInputValuesDivider}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nTagsInput.classes = { ...InputBase.classes, ...Combobox.classes };\nTagsInput.displayName = '@mantine/core/TagsInput';\n\nexport namespace TagsInput {\n  export type Props = TagsInputProps;\n  export type StylesNames = TagsInputStylesNames;\n  export type Factory = TagsInputFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"TagsInput.mjs","names":["useId"],"sources":["../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxGenericData,\n  ComboboxGenericItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxRenderPillInput,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n  usePillsReorder,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedTags } from './filter-picked-tags';\nimport { getSplittedTags } from './get-splitted-tags';\n\nexport type TagsInputStylesNames =\n  | __InputStylesNames\n  | ComboboxLikeStylesNames\n  | 'pill'\n  | 'pillsList'\n  | 'inputField';\n\nexport interface TagsInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    Omit<ComboboxLikeProps, 'data'>,\n    StylesApiProps<TagsInputFactory>,\n    ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Data displayed in the dropdown. Values must be unique. */\n  data?: ComboboxGenericData;\n\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  /** Called when tag is removed */\n  onRemove?: (value: string) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Maximum number of tags @default Infinity */\n  maxTags?: number;\n\n  /** Called when user tries to add more tags than maxTags */\n  onMaxTags?: (value: string) => void;\n\n  /** If set, duplicate tags are allowed @default false */\n  allowDuplicates?: boolean;\n\n  /** Called when user tries to submit a duplicated tag */\n  onDuplicate?: (value: string) => void;\n\n  /** Characters that should trigger tags split, `[',']` by default */\n  splitChars?: string[];\n\n  /** If set, the clear button is displayed in the right section when the component has value @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?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;\n\n  /** A function to render content of the pill, replaces the default content of the pill */\n  renderPill?: (props: ComboboxRenderPillInput) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** If set, the value typed in by the user but not submitted is accepted when the input is blurred @default true */\n  acceptValueOnBlur?: boolean;\n\n  /** Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. */\n  isDuplicate?: (value: string, currentValues: string[]) => boolean;\n\n  /** If set, the dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n\n  /** If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */\n  withPillsReorder?: boolean;\n}\n\nexport type TagsInputFactory = Factory<{\n  props: TagsInputProps;\n  ref: HTMLInputElement;\n  stylesNames: TagsInputStylesNames;\n}>;\n\nconst defaultProps = {\n  maxTags: Infinity,\n  acceptValueOnBlur: true,\n  splitChars: [','],\n  hiddenInputValuesDivider: ',',\n  openOnFocus: true,\n  size: 'sm',\n} satisfies Partial<TagsInputProps>;\n\nexport const TagsInput = factory<TagsInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'TagsInput'], defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    value,\n    defaultValue,\n    onChange,\n    onKeyDown,\n    maxTags,\n    allowDuplicates,\n    onDuplicate,\n    variant,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    readOnly,\n    disabled,\n    splitChars,\n    onFocus,\n    onBlur,\n    onPaste,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    rightSectionProps,\n    leftSection,\n    leftSectionWidth,\n    leftSectionPointerEvents,\n    leftSectionProps,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    required,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    wrapperProps,\n    description,\n    label,\n    error,\n    withErrorStyles,\n    name,\n    form,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    hiddenInputValuesDivider,\n    mod,\n    renderOption,\n    renderPill,\n    onRemove,\n    onClear,\n    onMaxTags,\n    scrollAreaProps,\n    acceptValueOnBlur,\n    isDuplicate,\n    openOnFocus,\n    attributes,\n    ref,\n    loading,\n    loadingPosition,\n    withPillsReorder,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const _ref = useMergedRef(inputRef, ref);\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const {\n    styleProps,\n    rest: { type, autoComplete, ...rest },\n  } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({\n    value: _value,\n    onChange: setValue,\n    enabled: withPillsReorder && !disabled && !readOnly,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<TagsInputFactory>({\n    name: 'TagsInput',\n    classes: {} as any,\n    props: props as any,\n    classNames,\n    styles,\n    unstyled,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TagsInputFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleValueSelect = (val: string) => {\n    const isDuplicated = isDuplicate\n      ? isDuplicate(val, _value)\n      : _value.some((tag) => tag.toLowerCase() === val.toLowerCase());\n\n    if (isDuplicated) {\n      onDuplicate?.(val);\n      if (!allowDuplicates) {\n        handleSearchChange('');\n        return;\n      }\n    }\n\n    if (_value.length >= maxTags) {\n      onMaxTags?.(val);\n      return;\n    }\n\n    onOptionSubmit?.(val);\n    handleSearchChange('');\n    if (val.length > 0) {\n      setValue([..._value, val]);\n    }\n  };\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || event.isPropagationStopped()) {\n      return;\n    }\n\n    const inputValue = _searchValue.trim();\n    const { length } = inputValue;\n\n    if (splitChars.includes(event.key) && length > 0) {\n      setValue(\n        getSplittedTags({\n          splitChars,\n          allowDuplicates,\n          maxTags,\n          value: _searchValue,\n          currentTags: _value,\n          isDuplicate,\n          onDuplicate,\n        })\n      );\n      handleSearchChange('');\n      event.preventDefault();\n    }\n\n    if (event.key === 'Enter' && length > 0 && !event.nativeEvent.isComposing) {\n      event.preventDefault();\n\n      const hasActiveSelection = !!document.querySelector<HTMLDivElement>(\n        `#${combobox.listId} [data-combobox-option][data-combobox-selected]`\n      );\n\n      if (hasActiveSelection) {\n        return;\n      }\n\n      handleValueSelect(inputValue);\n    }\n\n    if (\n      event.key === 'Backspace' &&\n      length === 0 &&\n      _value.length > 0 &&\n      !event.nativeEvent.isComposing &&\n      !readOnly\n    ) {\n      onRemove?.(_value[_value.length - 1]);\n      setValue(_value.slice(0, _value.length - 1));\n    }\n\n    handleInputKeyDown(event);\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n    onPaste?.(event);\n    event.preventDefault();\n\n    if (event.clipboardData) {\n      const pastedText = event.clipboardData.getData('text/plain');\n      setValue(\n        getSplittedTags({\n          splitChars,\n          allowDuplicates,\n          maxTags,\n          value: `${_searchValue}${pastedText}`,\n          currentTags: _value,\n          isDuplicate,\n          onDuplicate,\n        })\n      );\n      handleSearchChange('');\n    }\n  };\n\n  const values = _value.map((item, index) => {\n    const onRemoveItem = () => {\n      const next_value = _value.slice();\n      next_value.splice(index, 1);\n      setValue(next_value);\n      onRemove?.(item);\n    };\n\n    const reorderProps = getPillProps(index);\n\n    if (renderPill) {\n      return (\n        <Fragment key={`${item}-${index}`}>\n          {renderPill({\n            option: optionsLockup[item] || { value: item, label: item, disabled: false },\n            value: item,\n            onRemove: onRemoveItem,\n            disabled: disabled || readOnly,\n            reorderProps,\n          })}\n        </Fragment>\n      );\n    }\n\n    return (\n      <Pill\n        key={`${item}-${index}`}\n        withRemoveButton={!readOnly}\n        onRemove={onRemoveItem}\n        unstyled={unstyled}\n        disabled={disabled}\n        attributes={attributes}\n        {...getStyles('pill')}\n        {...reorderProps}\n      >\n        {item}\n      </Pill>\n    );\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _value, _searchValue]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue([]);\n        handleSearchChange('');\n        inputRef.current?.focus();\n        combobox.openDropdown();\n        onClear?.();\n      }}\n    />\n  );\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        size={size}\n        readOnly={readOnly}\n        __staticSelector=\"TagsInput\"\n        attributes={attributes}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val);\n          handleSearchChange('');\n\n          if (_value.length >= maxTags) {\n            onMaxTags?.(val);\n          } else {\n            setValue([..._value, optionsLockup[val].value]);\n          }\n\n          combobox.resetSelectedOption();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.DropdownTarget>\n          <PillsInput\n            {...styleProps}\n            __staticSelector=\"TagsInput\"\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            size={size}\n            className={className}\n            style={style}\n            variant={variant}\n            disabled={disabled}\n            radius={radius}\n            rightSection={rightSection}\n            __clearSection={clearButton}\n            __clearable={clearable && _value.length > 0 && !disabled && !readOnly}\n            __clearSectionMode={clearSectionMode}\n            rightSectionWidth={rightSectionWidth}\n            rightSectionPointerEvents={rightSectionPointerEvents}\n            rightSectionProps={rightSectionProps}\n            leftSection={leftSection}\n            leftSectionWidth={leftSectionWidth}\n            leftSectionPointerEvents={leftSectionPointerEvents}\n            leftSectionProps={leftSectionProps}\n            loading={loading}\n            loadingPosition={loadingPosition}\n            inputContainer={inputContainer}\n            inputWrapperOrder={inputWrapperOrder}\n            withAsterisk={withAsterisk}\n            required={required}\n            labelProps={labelProps}\n            descriptionProps={descriptionProps}\n            errorProps={errorProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            withErrorStyles={withErrorStyles}\n            __stylesApiProps={{ ...props, multiline: true }}\n            id={_id}\n            mod={mod}\n            attributes={attributes}\n          >\n            <Pill.Group\n              disabled={disabled}\n              unstyled={unstyled}\n              {...getStyles('pillsList')}\n              {...getListProps()}\n            >\n              {values}\n              <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n                <PillsInput.Field\n                  {...rest}\n                  ref={_ref}\n                  {...getStyles('inputField')}\n                  unstyled={unstyled}\n                  onKeyDown={handleInputKeydown}\n                  onFocus={(event) => {\n                    onFocus?.(event);\n                    openOnFocus && combobox.openDropdown();\n                  }}\n                  onBlur={(event) => {\n                    onBlur?.(event);\n                    acceptValueOnBlur && handleValueSelect(_searchValue);\n                    combobox.closeDropdown();\n                  }}\n                  onPaste={handlePaste}\n                  value={_searchValue}\n                  onChange={(event) => handleSearchChange(event.currentTarget.value)}\n                  required={required && _value.length === 0}\n                  disabled={disabled}\n                  readOnly={readOnly}\n                  id={_id}\n                />\n              </Combobox.EventsTarget>\n            </Pill.Group>\n          </PillsInput>\n        </Combobox.DropdownTarget>\n\n        <OptionsDropdown\n          data={filterPickedTags({ data: parsedData, value: _value })}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={_searchValue}\n          limit={limit}\n          hiddenWhenEmpty\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          unstyled={unstyled}\n          labelId={label ? `${_id}-label` : undefined}\n          aria-label={label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        form={form}\n        value={_value}\n        valuesDivider={hiddenInputValuesDivider}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nTagsInput.classes = { ...InputBase.classes, ...Combobox.classes };\nTagsInput.displayName = '@mantine/core/TagsInput';\n\nexport namespace TagsInput {\n  export type Props = TagsInputProps;\n  export type StylesNames = TagsInputStylesNames;\n  export type Factory = TagsInputFactory;\n}\n"],"mappings":"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"}

package/esm/components/TextInput/TextInput.mjs

@@ -7,7 +7,11 @@ import { jsx } from "react/jsx-runtime";
 const TextInput = factory((props) => {
 	return /* @__PURE__ */ jsx(InputBase, {
 		component: "input",
-		...useProps("TextInput", null, props),
+		...useProps([
+			"Input",
+			"InputWrapper",
+			"TextInput"
+		], null, props),
 		__staticSelector: "TextInput"
 	});
 });

package/esm/components/TextInput/TextInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.mjs","names":[],"sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\n\nexport interface TextInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<TextInputFactory>,\n    ElementProps<'input', 'size'> {}\n\nexport type TextInputFactory = Factory<{\n  props: TextInputProps;\n  variant: InputVariant;\n  ref: HTMLInputElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nexport const TextInput = factory<TextInputFactory>((props) => {\n  const _props = useProps('TextInput', null, props);\n  return <InputBase component=\"input\" {..._props} __staticSelector=\"TextInput\" />;\n});\n\nTextInput.classes = InputBase.classes;\nTextInput.displayName = '@mantine/core/TextInput';\n\nexport namespace TextInput {\n  export type Props = TextInputProps;\n  export type Factory = TextInputFactory;\n}\n"],"mappings":";;;;;;AAkBA,MAAa,YAAY,SAA2B,UAAU;AAE5D,QAAO,oBAAC,WAAD;EAAW,WAAU;EAAQ,GADrB,SAAS,aAAa,MAAM,MAAM;EACD,kBAAiB;EAAc,CAAA;EAC/E;AAEF,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}
+{"version":3,"file":"TextInput.mjs","names":[],"sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\n\nexport interface TextInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<TextInputFactory>,\n    ElementProps<'input', 'size'> {}\n\nexport type TextInputFactory = Factory<{\n  props: TextInputProps;\n  variant: InputVariant;\n  ref: HTMLInputElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nexport const TextInput = factory<TextInputFactory>((props) => {\n  const _props = useProps(['Input', 'InputWrapper', 'TextInput'], null, props);\n  return <InputBase component=\"input\" {..._props} __staticSelector=\"TextInput\" />;\n});\n\nTextInput.classes = InputBase.classes;\nTextInput.displayName = '@mantine/core/TextInput';\n\nexport namespace TextInput {\n  export type Props = TextInputProps;\n  export type Factory = TextInputFactory;\n}\n"],"mappings":";;;;;;AAkBA,MAAa,YAAY,SAA2B,UAAU;AAE5D,QAAO,oBAAC,WAAD;EAAW,WAAU;EAAQ,GADrB,SAAS;GAAC;GAAS;GAAgB;GAAY,EAAE,MAAM,MAAM;EAC5B,kBAAiB;EAAc,CAAA;EAC/E;AAEF,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}

package/esm/components/Textarea/Textarea.mjs

@@ -6,9 +6,12 @@ import { InputBase } from "../InputBase/InputBase.mjs";
 import { TextareaAutosize } from "./Autosize.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Textarea/Textarea.tsx
-const defaultProps = { size: "sm" };
 const Textarea = factory((props) => {
-	const { autosize, maxRows, minRows, __staticSelector, resize, ...others } = useProps("Textarea", defaultProps, props);
+	const { autosize, maxRows, minRows, __staticSelector, resize, ...others } = useProps([
+		"Input",
+		"InputWrapper",
+		"Textarea"
+	], null, props);
 	const shouldAutosize = autosize && getEnv() !== "test";
 	const autosizeProps = shouldAutosize ? {
 		maxRows,

package/esm/components/Textarea/Textarea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.mjs","names":[],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getEnv,\n  StylesApiProps,\n  useProps,\n} from '../../core';\nimport { __BaseInputProps, __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { TextareaAutosize } from './Autosize';\n\nexport interface TextareaProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<TextareaFactory>,\n    ElementProps<'textarea', 'size'> {\n  __staticSelector?: string;\n\n  /** If set, enables textarea height growing with its content @default false */\n  autosize?: boolean;\n\n  /** Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set */\n  maxRows?: number;\n\n  /** Minimum rows of autosize textarea, ignored if `autosize` prop is not set */\n  minRows?: number;\n\n  /** Controls `resize` CSS property @default 'none' */\n  resize?: React.CSSProperties['resize'];\n}\n\nexport type TextareaFactory = Factory<{\n  props: TextareaProps;\n  ref: HTMLTextAreaElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n} satisfies Partial<TextareaProps>;\n\nexport const Textarea = factory<TextareaFactory>((props) => {\n  const { autosize, maxRows, minRows, __staticSelector, resize, ...others } = useProps(\n    'Textarea',\n    defaultProps,\n    props\n  );\n\n  const shouldAutosize = autosize && getEnv() !== 'test';\n  const autosizeProps = shouldAutosize ? { maxRows, minRows } : {};\n\n  return (\n    <InputBase<any>\n      component={shouldAutosize ? TextareaAutosize : 'textarea'}\n      {...others}\n      __staticSelector={__staticSelector || 'Textarea'}\n      multiline\n      data-no-overflow={(autosize && maxRows === undefined) || undefined}\n      __vars={{ '--input-resize': resize }}\n      {...autosizeProps}\n    />\n  );\n});\n\nTextarea.classes = InputBase.classes;\nTextarea.displayName = '@mantine/core/Textarea';\n\nexport namespace Textarea {\n  export type Props = TextareaProps;\n  export type Factory = TextareaFactory;\n}\n"],"mappings":";;;;;;;;AAwCA,MAAM,eAAe,EACnB,MAAM,MACP;AAED,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EAAE,UAAU,SAAS,SAAS,kBAAkB,QAAQ,GAAG,WAAW,SAC1E,YACA,cACA,MACD;CAED,MAAM,iBAAiB,YAAY,QAAQ,KAAK;CAChD,MAAM,gBAAgB,iBAAiB;EAAE;EAAS;EAAS,GAAG,EAAE;AAEhE,QACE,oBAAC,WAAD;EACE,WAAW,iBAAiB,mBAAmB;EAC/C,GAAI;EACJ,kBAAkB,oBAAoB;EACtC,WAAA;EACA,oBAAmB,YAAY,YAAY,KAAA,KAAc,KAAA;EACzD,QAAQ,EAAE,kBAAkB,QAAQ;EACpC,GAAI;EACJ,CAAA;EAEJ;AAEF,SAAS,UAAU,UAAU;AAC7B,SAAS,cAAc"}
+{"version":3,"file":"Textarea.mjs","names":[],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  getEnv,\n  StylesApiProps,\n  useProps,\n} from '../../core';\nimport { __BaseInputProps, __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { TextareaAutosize } from './Autosize';\n\nexport interface TextareaProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<TextareaFactory>,\n    ElementProps<'textarea', 'size'> {\n  __staticSelector?: string;\n\n  /** If set, enables textarea height growing with its content @default false */\n  autosize?: boolean;\n\n  /** Maximum rows for autosize textarea to grow, ignored if `autosize` prop is not set */\n  maxRows?: number;\n\n  /** Minimum rows of autosize textarea, ignored if `autosize` prop is not set */\n  minRows?: number;\n\n  /** Controls `resize` CSS property @default 'none' */\n  resize?: React.CSSProperties['resize'];\n}\n\nexport type TextareaFactory = Factory<{\n  props: TextareaProps;\n  ref: HTMLTextAreaElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nexport const Textarea = factory<TextareaFactory>((props) => {\n  const { autosize, maxRows, minRows, __staticSelector, resize, ...others } = useProps(\n    ['Input', 'InputWrapper', 'Textarea'],\n    null,\n    props\n  );\n\n  const shouldAutosize = autosize && getEnv() !== 'test';\n  const autosizeProps = shouldAutosize ? { maxRows, minRows } : {};\n\n  return (\n    <InputBase<any>\n      component={shouldAutosize ? TextareaAutosize : 'textarea'}\n      {...others}\n      __staticSelector={__staticSelector || 'Textarea'}\n      multiline\n      data-no-overflow={(autosize && maxRows === undefined) || undefined}\n      __vars={{ '--input-resize': resize }}\n      {...autosizeProps}\n    />\n  );\n});\n\nTextarea.classes = InputBase.classes;\nTextarea.displayName = '@mantine/core/Textarea';\n\nexport namespace Textarea {\n  export type Props = TextareaProps;\n  export type Factory = TextareaFactory;\n}\n"],"mappings":";;;;;;;;AAwCA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EAAE,UAAU,SAAS,SAAS,kBAAkB,QAAQ,GAAG,WAAW,SAC1E;EAAC;EAAS;EAAgB;EAAW,EACrC,MACA,MACD;CAED,MAAM,iBAAiB,YAAY,QAAQ,KAAK;CAChD,MAAM,gBAAgB,iBAAiB;EAAE;EAAS;EAAS,GAAG,EAAE;AAEhE,QACE,oBAAC,WAAD;EACE,WAAW,iBAAiB,mBAAmB;EAC/C,GAAI;EACJ,kBAAkB,oBAAoB;EACtC,WAAA;EACA,oBAAmB,YAAY,YAAY,KAAA,KAAc,KAAA;EACzD,QAAQ,EAAE,kBAAkB,QAAQ;EACpC,GAAI;EACJ,CAAA;EAEJ;AAEF,SAAS,UAAU,UAAU;AAC7B,SAAS,cAAc"}

package/esm/components/Tree/FlatTreeNode.mjs

@@ -87,7 +87,8 @@ const FlatTreeNode = memo(function FlatTreeNode({ node, level, parent, hasChildr
 			hasChildren,
 			isLoading,
 			loadError,
-			elementProps
+			elementProps,
+			dragHandleProps: void 0
 		}) : /* @__PURE__ */ jsx("div", {
 			...elementProps,
 			children: node.label

package/esm/components/Tree/FlatTreeNode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FlatTreeNode.mjs","names":["classes"],"sources":["../../../src/components/Tree/FlatTreeNode.tsx"],"sourcesContent":["import { memo, useRef } from 'react';\nimport { findElementAncestor } from '../../core';\nimport type { RenderNode, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface FlatTreeNodeProps {\n  /** Node data from tree data */\n  node: TreeNodeData;\n\n  /** Nesting level of the node, starts at 1 */\n  level: number;\n\n  /** Value of the parent node, `null` for root nodes */\n  parent: string | null;\n\n  /** Whether the node has children */\n  hasChildren: boolean;\n\n  /** Whether the node is expanded */\n  expanded: boolean;\n\n  /** Tree controller instance, return value of `useTree` hook */\n  tree: TreeController;\n\n  /** If set, tree node with children is expanded on click @default true */\n  expandOnClick?: boolean;\n\n  /** If set, tree node is selected on click @default false */\n  selectOnClick?: boolean;\n\n  /** If set, tree node with children is expanded on space key press @default true */\n  expandOnSpace?: boolean;\n\n  /** If set, tree node is checked on space key press @default false */\n  checkOnSpace?: boolean;\n\n  /** A function to render tree node label */\n  renderNode?: RenderNode;\n\n  /** Style to apply to the root element, used for virtualizer positioning */\n  style?: React.CSSProperties;\n\n  /** Tab index for the node */\n  tabIndex?: number;\n}\n\nexport const FlatTreeNode = memo(function FlatTreeNode({\n  node,\n  level,\n  parent,\n  hasChildren,\n  expanded,\n  tree,\n  expandOnClick = true,\n  selectOnClick,\n  expandOnSpace = true,\n  checkOnSpace,\n  renderNode,\n  style,\n  tabIndex = -1,\n}: FlatTreeNodeProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const isLoading = tree.isNodeLoading(node.value);\n  const loadError = tree.getNodeLoadError(node.value);\n  const selected = tree.selectedState.includes(node.value);\n\n  const handleClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n\n    if (expandOnClick && hasChildren) {\n      tree.toggleExpanded(node.value);\n    }\n\n    if (selectOnClick) {\n      tree.select(node.value);\n    }\n\n    ref.current?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.nativeEvent.code === 'ArrowRight') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (expanded && hasChildren) {\n        const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n        const nodes = root\n          ? Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n              (treeNode) => treeNode.style.display !== 'none'\n            )\n          : [];\n        const index = nodes.indexOf(event.currentTarget as HTMLElement);\n        if (index !== -1) {\n          nodes[index + 1]?.focus();\n        }\n      } else if (hasChildren) {\n        tree.expand(node.value);\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowLeft') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (expanded && hasChildren) {\n        tree.collapse(node.value);\n      } else if (parent) {\n        const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n        const parentElement = root?.querySelector<HTMLElement>(\n          `[role=treeitem][data-value=\"${CSS.escape(parent)}\"]`\n        );\n        parentElement?.focus();\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowDown' || event.nativeEvent.code === 'ArrowUp') {\n      const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n      if (!root) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      const nodes = Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n        (treeNode) => treeNode.style.display !== 'none'\n      );\n      const index = nodes.indexOf(event.currentTarget as HTMLElement);\n\n      if (index === -1) {\n        return;\n      }\n\n      const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n      nodes[nextIndex]?.focus();\n    }\n\n    if (event.nativeEvent.code === 'Space') {\n      if (expandOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        tree.toggleExpanded(node.value);\n      }\n\n      if (checkOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        if (tree.isNodeChecked(node.value)) {\n          tree.uncheckNode(node.value);\n        } else {\n          tree.checkNode(node.value);\n        }\n      }\n    }\n  };\n\n  const elementProps = {\n    className: classes.label,\n    style: {} as React.CSSProperties,\n    onClick: handleClick,\n    'data-selected': selected || undefined,\n    'data-value': node.value,\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={classes.node}\n      style={{\n        ...({\n          '--label-offset': `calc(var(--level-offset, var(--mantine-spacing-lg)) * ${level - 1})`,\n        } as React.CSSProperties),\n        ...style,\n      }}\n      role=\"treeitem\"\n      aria-selected={selected}\n      aria-expanded={hasChildren ? expanded : undefined}\n      data-value={node.value}\n      data-selected={selected || undefined}\n      data-level={level}\n      tabIndex={tabIndex}\n      onKeyDown={handleKeyDown}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          tree,\n          expanded,\n          hasChildren,\n          isLoading,\n          loadError,\n          elementProps,\n        })\n      ) : (\n        <div {...elementProps}>{node.label}</div>\n      )}\n    </div>\n  );\n});\n\nFlatTreeNode.displayName = '@mantine/core/FlatTreeNode';\n"],"mappings":"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"}
+{"version":3,"file":"FlatTreeNode.mjs","names":["classes"],"sources":["../../../src/components/Tree/FlatTreeNode.tsx"],"sourcesContent":["import { memo, useRef } from 'react';\nimport { findElementAncestor } from '../../core';\nimport type { RenderNode, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface FlatTreeNodeProps {\n  /** Node data from tree data */\n  node: TreeNodeData;\n\n  /** Nesting level of the node, starts at 1 */\n  level: number;\n\n  /** Value of the parent node, `null` for root nodes */\n  parent: string | null;\n\n  /** Whether the node has children */\n  hasChildren: boolean;\n\n  /** Whether the node is expanded */\n  expanded: boolean;\n\n  /** Tree controller instance, return value of `useTree` hook */\n  tree: TreeController;\n\n  /** If set, tree node with children is expanded on click @default true */\n  expandOnClick?: boolean;\n\n  /** If set, tree node is selected on click @default false */\n  selectOnClick?: boolean;\n\n  /** If set, tree node with children is expanded on space key press @default true */\n  expandOnSpace?: boolean;\n\n  /** If set, tree node is checked on space key press @default false */\n  checkOnSpace?: boolean;\n\n  /** A function to render tree node label */\n  renderNode?: RenderNode;\n\n  /** Style to apply to the root element, used for virtualizer positioning */\n  style?: React.CSSProperties;\n\n  /** Tab index for the node */\n  tabIndex?: number;\n}\n\nexport const FlatTreeNode = memo(function FlatTreeNode({\n  node,\n  level,\n  parent,\n  hasChildren,\n  expanded,\n  tree,\n  expandOnClick = true,\n  selectOnClick,\n  expandOnSpace = true,\n  checkOnSpace,\n  renderNode,\n  style,\n  tabIndex = -1,\n}: FlatTreeNodeProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const isLoading = tree.isNodeLoading(node.value);\n  const loadError = tree.getNodeLoadError(node.value);\n  const selected = tree.selectedState.includes(node.value);\n\n  const handleClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n\n    if (expandOnClick && hasChildren) {\n      tree.toggleExpanded(node.value);\n    }\n\n    if (selectOnClick) {\n      tree.select(node.value);\n    }\n\n    ref.current?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.nativeEvent.code === 'ArrowRight') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (expanded && hasChildren) {\n        const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n        const nodes = root\n          ? Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n              (treeNode) => treeNode.style.display !== 'none'\n            )\n          : [];\n        const index = nodes.indexOf(event.currentTarget as HTMLElement);\n        if (index !== -1) {\n          nodes[index + 1]?.focus();\n        }\n      } else if (hasChildren) {\n        tree.expand(node.value);\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowLeft') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (expanded && hasChildren) {\n        tree.collapse(node.value);\n      } else if (parent) {\n        const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n        const parentElement = root?.querySelector<HTMLElement>(\n          `[role=treeitem][data-value=\"${CSS.escape(parent)}\"]`\n        );\n        parentElement?.focus();\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowDown' || event.nativeEvent.code === 'ArrowUp') {\n      const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n      if (!root) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      const nodes = Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n        (treeNode) => treeNode.style.display !== 'none'\n      );\n      const index = nodes.indexOf(event.currentTarget as HTMLElement);\n\n      if (index === -1) {\n        return;\n      }\n\n      const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n      nodes[nextIndex]?.focus();\n    }\n\n    if (event.nativeEvent.code === 'Space') {\n      if (expandOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        tree.toggleExpanded(node.value);\n      }\n\n      if (checkOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        if (tree.isNodeChecked(node.value)) {\n          tree.uncheckNode(node.value);\n        } else {\n          tree.checkNode(node.value);\n        }\n      }\n    }\n  };\n\n  const elementProps = {\n    className: classes.label,\n    style: {} as React.CSSProperties,\n    onClick: handleClick,\n    'data-selected': selected || undefined,\n    'data-value': node.value,\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={classes.node}\n      style={{\n        ...({\n          '--label-offset': `calc(var(--level-offset, var(--mantine-spacing-lg)) * ${level - 1})`,\n        } as React.CSSProperties),\n        ...style,\n      }}\n      role=\"treeitem\"\n      aria-selected={selected}\n      aria-expanded={hasChildren ? expanded : undefined}\n      data-value={node.value}\n      data-selected={selected || undefined}\n      data-level={level}\n      tabIndex={tabIndex}\n      onKeyDown={handleKeyDown}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          tree,\n          expanded,\n          hasChildren,\n          isLoading,\n          loadError,\n          elementProps,\n          dragHandleProps: undefined,\n        })\n      ) : (\n        <div {...elementProps}>{node.label}</div>\n      )}\n    </div>\n  );\n});\n\nFlatTreeNode.displayName = '@mantine/core/FlatTreeNode';\n"],"mappings":";;;;;;AA+CA,MAAa,eAAe,KAAK,SAAS,aAAa,EACrD,MACA,OACA,QACA,aACA,UACA,MACA,gBAAgB,MAChB,eACA,gBAAgB,MAChB,cACA,YACA,OACA,WAAW,MACS;CACpB,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,YAAY,KAAK,cAAc,KAAK,MAAM;CAChD,MAAM,YAAY,KAAK,iBAAiB,KAAK,MAAM;CACnD,MAAM,WAAW,KAAK,cAAc,SAAS,KAAK,MAAM;CAExD,MAAM,eAAe,UAA4B;AAC/C,QAAM,iBAAiB;AAEvB,MAAI,iBAAiB,YACnB,MAAK,eAAe,KAAK,MAAM;AAGjC,MAAI,cACF,MAAK,OAAO,KAAK,MAAM;AAGzB,MAAI,SAAS,OAAO;;CAGtB,MAAM,iBAAiB,UAA+B;AACpD,MAAI,MAAM,YAAY,SAAS,cAAc;AAC3C,SAAM,iBAAiB;AACvB,SAAM,gBAAgB;AAEtB,OAAI,YAAY,aAAa;IAC3B,MAAM,OAAO,oBAAoB,MAAM,eAA8B,mBAAmB;IACxF,MAAM,QAAQ,OACV,MAAM,KAAK,KAAK,iBAA8B,kBAAkB,CAAC,CAAC,QAC/D,aAAa,SAAS,MAAM,YAAY,OAC1C,GACD,EAAE;IACN,MAAM,QAAQ,MAAM,QAAQ,MAAM,cAA6B;AAC/D,QAAI,UAAU,GACZ,OAAM,QAAQ,IAAI,OAAO;cAElB,YACT,MAAK,OAAO,KAAK,MAAM;;AAI3B,MAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,SAAM,iBAAiB;AACvB,SAAM,gBAAgB;AAEtB,OAAI,YAAY,YACd,MAAK,SAAS,KAAK,MAAM;YAChB,OAKT,EAJa,oBAAoB,MAAM,eAA8B,mBAAmB,EAC5D,cAC1B,+BAA+B,IAAI,OAAO,OAAO,CAAC,IACnD,GACc,OAAO;;AAI1B,MAAI,MAAM,YAAY,SAAS,eAAe,MAAM,YAAY,SAAS,WAAW;GAClF,MAAM,OAAO,oBAAoB,MAAM,eAA8B,mBAAmB;AAExF,OAAI,CAAC,KACH;AAGF,SAAM,iBAAiB;AACvB,SAAM,gBAAgB;GACtB,MAAM,QAAQ,MAAM,KAAK,KAAK,iBAA8B,kBAAkB,CAAC,CAAC,QAC7E,aAAa,SAAS,MAAM,YAAY,OAC1C;GACD,MAAM,QAAQ,MAAM,QAAQ,MAAM,cAA6B;AAE/D,OAAI,UAAU,GACZ;AAIF,SADkB,MAAM,YAAY,SAAS,cAAc,QAAQ,IAAI,QAAQ,IAC7D,OAAO;;AAG3B,MAAI,MAAM,YAAY,SAAS,SAAS;AACtC,OAAI,eAAe;AACjB,UAAM,iBAAiB;AACvB,UAAM,gBAAgB;AACtB,SAAK,eAAe,KAAK,MAAM;;AAGjC,OAAI,cAAc;AAChB,UAAM,iBAAiB;AACvB,UAAM,gBAAgB;AACtB,QAAI,KAAK,cAAc,KAAK,MAAM,CAChC,MAAK,YAAY,KAAK,MAAM;QAE5B,MAAK,UAAU,KAAK,MAAM;;;;CAMlC,MAAM,eAAe;EACnB,WAAWA,oBAAQ;EACnB,OAAO,EAAE;EACT,SAAS;EACT,iBAAiB,YAAY,KAAA;EAC7B,cAAc,KAAK;EACpB;AAED,QACE,oBAAC,OAAD;EACO;EACL,WAAWA,oBAAQ;EACnB,OAAO;GAEH,kBAAkB,yDAAyD,QAAQ,EAAE;GAEvF,GAAG;GACJ;EACD,MAAK;EACL,iBAAe;EACf,iBAAe,cAAc,WAAW,KAAA;EACxC,cAAY,KAAK;EACjB,iBAAe,YAAY,KAAA;EAC3B,cAAY;EACF;EACV,WAAW;YAEV,OAAO,eAAe,aACrB,WAAW;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,iBAAiB,KAAA;GAClB,CAAC,GAEF,oBAAC,OAAD;GAAK,GAAI;aAAe,KAAK;GAAY,CAAA;EAEvC,CAAA;EAER;AAEF,aAAa,cAAc"}

package/esm/components/Tree/Tree.mjs

@@ -27,7 +27,7 @@ const defaultProps = {
 const varsResolver = createVarsResolver((_theme, { levelOffset }) => ({ root: { "--level-offset": getSpacing(levelOffset) } }));
 const Tree = factory((_props) => {
 	const props = useProps("Tree", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, expandOnClick, tree, renderNode, selectOnClick, clearSelectionOnOutsideClick, allowRangeSelection, expandOnSpace, levelOffset, checkOnSpace, keepMounted, onDragDrop, withLines, attributes, ref, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, expandOnClick, tree, renderNode, selectOnClick, clearSelectionOnOutsideClick, allowRangeSelection, expandOnSpace, levelOffset, checkOnSpace, keepMounted, onDragDrop, allowDrop, withDragHandle, withLines, attributes, ref, ...others } = props;
 	const defaultController = useTree();
 	const controller = tree || defaultController;
 	const dragStateRef = useRef({
@@ -66,6 +66,8 @@ const Tree = factory((_props) => {
 		checkOnSpace,
 		keepMounted,
 		onDragDrop,
+		allowDrop,
+		withDragHandle,
 		dragStateRef,
 		data
 	}, node.value));

package/esm/components/Tree/Tree.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.mjs","names":["classes"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useClickOutside, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport { TreeNode } from './TreeNode';\nimport { TreeController, useTree } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface TreeNodeData {\n  label: React.ReactNode;\n  value: string;\n  nodeProps?: Record<string, any>;\n  children?: TreeNodeData[];\n  hasChildren?: boolean;\n}\n\nexport interface RenderTreeNodePayload {\n  /** Node level in the tree */\n  level: number;\n\n  /** `true` if the node is expanded, applicable only for nodes with `children` */\n  expanded: boolean;\n\n  /** `true` if the node has non-empty `children` array or `hasChildren` is set to `true` in the data */\n  hasChildren: boolean;\n\n  /** `true` if the node is selected */\n  selected: boolean;\n\n  /** `true` if the node's children are currently being loaded */\n  isLoading: boolean;\n\n  /** Error from the last failed load attempt, or `null` */\n  loadError: Error | null;\n\n  /** Node data from the `data` prop of `Tree` */\n  node: TreeNodeData;\n\n  /** Tree controller instance, return value of `useTree` hook */\n  tree: TreeController;\n\n  /** Props to spread into the root node element */\n  elementProps: {\n    className: string;\n    style: React.CSSProperties;\n    onClick: (event: React.MouseEvent) => void;\n    'data-selected': boolean | undefined;\n    'data-value': string;\n    draggable?: boolean;\n    onDragStart?: (event: React.DragEvent) => void;\n    onDragOver?: (event: React.DragEvent) => void;\n    onDragLeave?: (event: React.DragEvent) => void;\n    onDrop?: (event: React.DragEvent) => void;\n    onDragEnd?: (event: React.DragEvent) => void;\n  };\n}\n\nexport type RenderNode = (payload: RenderTreeNodePayload) => React.ReactNode;\n\nexport type TreeStylesNames = 'root' | 'node' | 'subtree' | 'label';\nexport type TreeCssVariables = {\n  root: '--level-offset';\n};\n\nexport interface TreeDragState {\n  draggedValue: string | null;\n  currentDropTarget: HTMLElement | null;\n}\n\nexport interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, ElementProps<'ul'> {\n  /** Data used to render nodes */\n  data: TreeNodeData[];\n\n  /** Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value @default 'lg' */\n  levelOffset?: MantineSpacing;\n\n  /** If set, tree node with children is expanded on click @default true */\n  expandOnClick?: boolean;\n\n  /** If set, tree node with children is expanded on space key press @default true */\n  expandOnSpace?: boolean;\n\n  /** If set, tree node is checked on space key press @default false */\n  checkOnSpace?: boolean;\n\n  /** If set, tree node is selected on click @default false */\n  selectOnClick?: boolean;\n\n  /** Use-tree hook instance that can be used to manipulate component state */\n  tree?: TreeController;\n\n  /** A function to render tree node label */\n  renderNode?: RenderNode;\n\n  /** If set, selection is cleared when user clicks outside of the tree @default false */\n  clearSelectionOnOutsideClick?: boolean;\n\n  /** If set, tree nodes range can be selected with click when `Shift` key is pressed @default true */\n  allowRangeSelection?: boolean;\n\n  /** If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. @default false */\n  keepMounted?: boolean;\n\n  /** Called when a node is dropped on another node, enables drag-and-drop when provided */\n  onDragDrop?: (payload: TreeDragDropPayload) => void;\n\n  /** If set, connecting lines are rendered showing parent-child relationships @default false */\n  withLines?: boolean;\n}\n\nfunction getFlatValues(data: TreeNodeData[]): string[] {\n  return data.reduce<string[]>((acc, item) => {\n    acc.push(item.value);\n    if (item.children) {\n      acc.push(...getFlatValues(item.children));\n    }\n    return acc;\n  }, []);\n}\n\nexport type TreeFactory = Factory<{\n  props: TreeProps;\n  ref: HTMLUListElement;\n  stylesNames: TreeStylesNames;\n  vars: TreeCssVariables;\n}>;\n\nconst defaultProps = {\n  expandOnClick: true,\n  allowRangeSelection: true,\n  expandOnSpace: true,\n} satisfies Partial<TreeProps>;\n\nconst varsResolver = createVarsResolver<TreeFactory>((_theme, { levelOffset }) => ({\n  root: {\n    '--level-offset': getSpacing(levelOffset),\n  },\n}));\n\nexport const Tree = factory<TreeFactory>((_props) => {\n  const props = useProps('Tree', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    expandOnClick,\n    tree,\n    renderNode,\n    selectOnClick,\n    clearSelectionOnOutsideClick,\n    allowRangeSelection,\n    expandOnSpace,\n    levelOffset,\n    checkOnSpace,\n    keepMounted,\n    onDragDrop,\n    withLines,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const defaultController = useTree();\n  const controller = tree || defaultController;\n\n  const dragStateRef = useRef<TreeDragState>({ draggedValue: null, currentDropTarget: null });\n\n  const getStyles = useStyles<TreeFactory>({\n    name: 'Tree',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const clickOutsideRef = useClickOutside(\n    () => clearSelectionOnOutsideClick && controller.clearSelected()\n  );\n\n  const mergedRef = useMergedRef(ref, clickOutsideRef);\n\n  const flatValues = useMemo(() => getFlatValues(data), [data]);\n\n  useEffect(() => {\n    controller.initialize(data);\n  }, [data]);\n\n  const nodes = data.map((node, index) => (\n    <TreeNode\n      key={node.value}\n      node={node}\n      getStyles={getStyles}\n      rootIndex={index}\n      expandOnClick={expandOnClick}\n      selectOnClick={selectOnClick}\n      controller={controller}\n      renderNode={renderNode}\n      flatValues={flatValues}\n      allowRangeSelection={allowRangeSelection}\n      expandOnSpace={expandOnSpace}\n      checkOnSpace={checkOnSpace}\n      keepMounted={keepMounted}\n      onDragDrop={onDragDrop}\n      dragStateRef={dragStateRef}\n      data={data}\n    />\n  ));\n\n  return (\n    <Box\n      component=\"ul\"\n      ref={mergedRef}\n      {...getStyles('root')}\n      {...others}\n      role=\"tree\"\n      aria-multiselectable={controller.multiple}\n      data-tree-root\n      data-with-lines={withLines || undefined}\n    >\n      {nodes}\n    </Box>\n  );\n});\n\nTree.displayName = '@mantine/core/Tree';\nTree.classes = classes;\nTree.varsResolver = varsResolver;\n\nexport namespace Tree {\n  export type Props = TreeProps;\n  export type StylesNames = TreeStylesNames;\n  export type Factory = TreeFactory;\n  export type NodeData = TreeNodeData;\n  export type RenderNodePayload = RenderTreeNodePayload;\n}\n"],"mappings":";;;;;;;;;;;;;;AA0HA,SAAS,cAAc,MAAgC;AACrD,QAAO,KAAK,QAAkB,KAAK,SAAS;AAC1C,MAAI,KAAK,KAAK,MAAM;AACpB,MAAI,KAAK,SACP,KAAI,KAAK,GAAG,cAAc,KAAK,SAAS,CAAC;AAE3C,SAAO;IACN,EAAE,CAAC;;AAUR,MAAM,eAAe;CACnB,eAAe;CACf,qBAAqB;CACrB,eAAe;CAChB;AAED,MAAM,eAAe,oBAAiC,QAAQ,EAAE,mBAAmB,EACjF,MAAM,EACJ,kBAAkB,WAAW,YAAY,EAC1C,EACF,EAAE;AAEH,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,eACA,MACA,YACA,eACA,8BACA,qBACA,eACA,aACA,cACA,aACA,YACA,WACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,oBAAoB,SAAS;CACnC,MAAM,aAAa,QAAQ;CAE3B,MAAM,eAAe,OAAsB;EAAE,cAAc;EAAM,mBAAmB;EAAM,CAAC;CAE3F,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAMF,MAAM,YAAY,aAAa,KAJP,sBAChB,gCAAgC,WAAW,eAAe,CACjE,CAEmD;CAEpD,MAAM,aAAa,cAAc,cAAc,KAAK,EAAE,CAAC,KAAK,CAAC;AAE7D,iBAAgB;AACd,aAAW,WAAW,KAAK;IAC1B,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC5B,oBAAC,UAAD;EAEQ;EACK;EACX,WAAW;EACI;EACA;EACH;EACA;EACA;EACS;EACN;EACD;EACD;EACD;EACE;EACR;EACN,EAhBK,KAAK,MAgBV,CACF;AAEF,QACE,oBAAC,KAAD;EACE,WAAU;EACV,KAAK;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,MAAK;EACL,wBAAsB,WAAW;EACjC,kBAAA;EACA,mBAAiB,aAAa,KAAA;YAE7B;EACG,CAAA;EAER;AAEF,KAAK,cAAc;AACnB,KAAK,UAAUA;AACf,KAAK,eAAe"}
+{"version":3,"file":"Tree.mjs","names":["classes"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useClickOutside, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport { TreeNode } from './TreeNode';\nimport type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';\nimport { TreeController, useTree } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface TreeNodeData {\n  label: React.ReactNode;\n  value: string;\n  nodeProps?: Record<string, any>;\n  children?: TreeNodeData[];\n  hasChildren?: boolean;\n}\n\nexport interface RenderTreeNodePayload {\n  /** Node level in the tree */\n  level: number;\n\n  /** `true` if the node is expanded, applicable only for nodes with `children` */\n  expanded: boolean;\n\n  /** `true` if the node has non-empty `children` array or `hasChildren` is set to `true` in the data */\n  hasChildren: boolean;\n\n  /** `true` if the node is selected */\n  selected: boolean;\n\n  /** `true` if the node's children are currently being loaded */\n  isLoading: boolean;\n\n  /** Error from the last failed load attempt, or `null` */\n  loadError: Error | null;\n\n  /** Node data from the `data` prop of `Tree` */\n  node: TreeNodeData;\n\n  /** Tree controller instance, return value of `useTree` hook */\n  tree: TreeController;\n\n  /** Props to spread into the root node element */\n  elementProps: {\n    className: string;\n    style: React.CSSProperties;\n    onClick: (event: React.MouseEvent) => void;\n    'data-selected': boolean | undefined;\n    'data-value': string;\n    draggable?: boolean;\n    onDragStart?: (event: React.DragEvent) => void;\n    onDragOver?: (event: React.DragEvent) => void;\n    onDragLeave?: (event: React.DragEvent) => void;\n    onDrop?: (event: React.DragEvent) => void;\n    onDragEnd?: (event: React.DragEvent) => void;\n  };\n\n  /** Props to spread into the drag handle element when `withDragHandle` is set on `Tree`.\n   * `undefined` when `withDragHandle` is not enabled or drag-and-drop is disabled. */\n  dragHandleProps: TreeDragHandleProps | undefined;\n}\n\nexport type RenderNode = (payload: RenderTreeNodePayload) => React.ReactNode;\n\nexport type TreeStylesNames = 'root' | 'node' | 'subtree' | 'label';\nexport type TreeCssVariables = {\n  root: '--level-offset';\n};\n\nexport interface TreeDragState {\n  draggedValue: string | null;\n  currentDropTarget: HTMLElement | null;\n}\n\nexport interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, ElementProps<'ul'> {\n  /** Data used to render nodes */\n  data: TreeNodeData[];\n\n  /** Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value @default 'lg' */\n  levelOffset?: MantineSpacing;\n\n  /** If set, tree node with children is expanded on click @default true */\n  expandOnClick?: boolean;\n\n  /** If set, tree node with children is expanded on space key press @default true */\n  expandOnSpace?: boolean;\n\n  /** If set, tree node is checked on space key press @default false */\n  checkOnSpace?: boolean;\n\n  /** If set, tree node is selected on click @default false */\n  selectOnClick?: boolean;\n\n  /** Use-tree hook instance that can be used to manipulate component state */\n  tree?: TreeController;\n\n  /** A function to render tree node label */\n  renderNode?: RenderNode;\n\n  /** If set, selection is cleared when user clicks outside of the tree @default false */\n  clearSelectionOnOutsideClick?: boolean;\n\n  /** If set, tree nodes range can be selected with click when `Shift` key is pressed @default true */\n  allowRangeSelection?: boolean;\n\n  /** If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. @default false */\n  keepMounted?: boolean;\n\n  /** Called when a node is dropped on another node, enables drag-and-drop when provided */\n  onDragDrop?: (payload: TreeDragDropPayload) => void;\n\n  /** Called for each potential drop target to determine whether a drop is allowed.\n   * When it returns `false`, the drop indicator is hidden and the drop is rejected. */\n  allowDrop?: TreeAllowDrop;\n\n  /** If set, drag-and-drop must be initiated from an element that spreads `dragHandleProps`\n   * from the `renderNode` payload, rather than anywhere on the node. @default false */\n  withDragHandle?: boolean;\n\n  /** If set, connecting lines are rendered showing parent-child relationships @default false */\n  withLines?: boolean;\n}\n\nfunction getFlatValues(data: TreeNodeData[]): string[] {\n  return data.reduce<string[]>((acc, item) => {\n    acc.push(item.value);\n    if (item.children) {\n      acc.push(...getFlatValues(item.children));\n    }\n    return acc;\n  }, []);\n}\n\nexport type TreeFactory = Factory<{\n  props: TreeProps;\n  ref: HTMLUListElement;\n  stylesNames: TreeStylesNames;\n  vars: TreeCssVariables;\n}>;\n\nconst defaultProps = {\n  expandOnClick: true,\n  allowRangeSelection: true,\n  expandOnSpace: true,\n} satisfies Partial<TreeProps>;\n\nconst varsResolver = createVarsResolver<TreeFactory>((_theme, { levelOffset }) => ({\n  root: {\n    '--level-offset': getSpacing(levelOffset),\n  },\n}));\n\nexport const Tree = factory<TreeFactory>((_props) => {\n  const props = useProps('Tree', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    expandOnClick,\n    tree,\n    renderNode,\n    selectOnClick,\n    clearSelectionOnOutsideClick,\n    allowRangeSelection,\n    expandOnSpace,\n    levelOffset,\n    checkOnSpace,\n    keepMounted,\n    onDragDrop,\n    allowDrop,\n    withDragHandle,\n    withLines,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const defaultController = useTree();\n  const controller = tree || defaultController;\n\n  const dragStateRef = useRef<TreeDragState>({ draggedValue: null, currentDropTarget: null });\n\n  const getStyles = useStyles<TreeFactory>({\n    name: 'Tree',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const clickOutsideRef = useClickOutside(\n    () => clearSelectionOnOutsideClick && controller.clearSelected()\n  );\n\n  const mergedRef = useMergedRef(ref, clickOutsideRef);\n\n  const flatValues = useMemo(() => getFlatValues(data), [data]);\n\n  useEffect(() => {\n    controller.initialize(data);\n  }, [data]);\n\n  const nodes = data.map((node, index) => (\n    <TreeNode\n      key={node.value}\n      node={node}\n      getStyles={getStyles}\n      rootIndex={index}\n      expandOnClick={expandOnClick}\n      selectOnClick={selectOnClick}\n      controller={controller}\n      renderNode={renderNode}\n      flatValues={flatValues}\n      allowRangeSelection={allowRangeSelection}\n      expandOnSpace={expandOnSpace}\n      checkOnSpace={checkOnSpace}\n      keepMounted={keepMounted}\n      onDragDrop={onDragDrop}\n      allowDrop={allowDrop}\n      withDragHandle={withDragHandle}\n      dragStateRef={dragStateRef}\n      data={data}\n    />\n  ));\n\n  return (\n    <Box\n      component=\"ul\"\n      ref={mergedRef}\n      {...getStyles('root')}\n      {...others}\n      role=\"tree\"\n      aria-multiselectable={controller.multiple}\n      data-tree-root\n      data-with-lines={withLines || undefined}\n    >\n      {nodes}\n    </Box>\n  );\n});\n\nTree.displayName = '@mantine/core/Tree';\nTree.classes = classes;\nTree.varsResolver = varsResolver;\n\nexport namespace Tree {\n  export type Props = TreeProps;\n  export type StylesNames = TreeStylesNames;\n  export type Factory = TreeFactory;\n  export type NodeData = TreeNodeData;\n  export type RenderNodePayload = RenderTreeNodePayload;\n}\n"],"mappings":";;;;;;;;;;;;;;AAuIA,SAAS,cAAc,MAAgC;AACrD,QAAO,KAAK,QAAkB,KAAK,SAAS;AAC1C,MAAI,KAAK,KAAK,MAAM;AACpB,MAAI,KAAK,SACP,KAAI,KAAK,GAAG,cAAc,KAAK,SAAS,CAAC;AAE3C,SAAO;IACN,EAAE,CAAC;;AAUR,MAAM,eAAe;CACnB,eAAe;CACf,qBAAqB;CACrB,eAAe;CAChB;AAED,MAAM,eAAe,oBAAiC,QAAQ,EAAE,mBAAmB,EACjF,MAAM,EACJ,kBAAkB,WAAW,YAAY,EAC1C,EACF,EAAE;AAEH,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,eACA,MACA,YACA,eACA,8BACA,qBACA,eACA,aACA,cACA,aACA,YACA,WACA,gBACA,WACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,oBAAoB,SAAS;CACnC,MAAM,aAAa,QAAQ;CAE3B,MAAM,eAAe,OAAsB;EAAE,cAAc;EAAM,mBAAmB;EAAM,CAAC;CAE3F,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAMF,MAAM,YAAY,aAAa,KAJP,sBAChB,gCAAgC,WAAW,eAAe,CACjE,CAEmD;CAEpD,MAAM,aAAa,cAAc,cAAc,KAAK,EAAE,CAAC,KAAK,CAAC;AAE7D,iBAAgB;AACd,aAAW,WAAW,KAAK;IAC1B,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC5B,oBAAC,UAAD;EAEQ;EACK;EACX,WAAW;EACI;EACA;EACH;EACA;EACA;EACS;EACN;EACD;EACD;EACD;EACD;EACK;EACF;EACR;EACN,EAlBK,KAAK,MAkBV,CACF;AAEF,QACE,oBAAC,KAAD;EACE,WAAU;EACV,KAAK;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,MAAK;EACL,wBAAsB,WAAW;EACjC,kBAAA;EACA,mBAAiB,aAAa,KAAA;YAE7B;EACG,CAAA;EAER;AAEF,KAAK,cAAc;AACnB,KAAK,UAAUA;AACf,KAAK,eAAe"}

package/esm/components/Tree/TreeNode.mjs

@@ -14,7 +14,7 @@ function getValuesRange(anchor, value, flatValues) {
 	const end = Math.max(anchorIndex, valueIndex);
 	return flatValues.slice(start, end + 1);
 }
-function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level = 1, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, dragStateRef, data }) {
+function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level = 1, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, allowDrop, withDragHandle, dragStateRef, data }) {
 	const ref = useRef(null);
 	const hasLoadedChildren = Array.isArray(node.children);
 	const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;
@@ -38,15 +38,19 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 		checkOnSpace,
 		keepMounted,
 		onDragDrop,
+		allowDrop,
+		withDragHandle,
 		dragStateRef,
 		data
 	}, child.value));
-	const dragProps = useTreeNodeDragDrop({
+	const { elementProps: dragElementProps, dragHandleProps } = useTreeNodeDragDrop({
 		nodeValue: node.value,
 		hasChildren,
 		data,
 		onDragDrop,
-		dragStateRef
+		dragStateRef,
+		allowDrop,
+		withDragHandle
 	});
 	const handleKeyDown = (event) => {
 		if (event.nativeEvent.code === "ArrowRight") {
@@ -106,7 +110,7 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 		onClick: handleNodeClick,
 		"data-selected": selected || void 0,
 		"data-value": node.value,
-		...dragProps
+		...dragElementProps
 	};
 	const withLoadingIndicator = isExpanded && isLoading && nested.length === 0;
 	return /* @__PURE__ */ jsxs("li", {
@@ -129,7 +133,8 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 				hasChildren,
 				isLoading,
 				loadError,
-				elementProps
+				elementProps,
+				dragHandleProps
 			}) : /* @__PURE__ */ jsx("div", {
 				...elementProps,
 				children: node.label

package/esm/components/Tree/TreeNode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.mjs","names":[],"sources":["../../../src/components/Tree/TreeNode.tsx"],"sourcesContent":["import { Activity, useRef } from 'react';\nimport { Box, findElementAncestor, GetStylesApi } from '../../core';\nimport { Loader } from '../Loader';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport type { RenderNode, TreeDragState, TreeFactory, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport { useTreeNodeDragDrop } from './use-tree-node-drag-drop';\n\nfunction getValuesRange(anchor: string | null, value: string | undefined, flatValues: string[]) {\n  if (!anchor || !value) {\n    return [];\n  }\n\n  const anchorIndex = flatValues.indexOf(anchor);\n  const valueIndex = flatValues.indexOf(value);\n  const start = Math.min(anchorIndex, valueIndex);\n  const end = Math.max(anchorIndex, valueIndex);\n\n  return flatValues.slice(start, end + 1);\n}\n\ninterface TreeNodeProps {\n  node: TreeNodeData;\n  getStyles: GetStylesApi<TreeFactory>;\n  rootIndex: number | undefined;\n  controller: TreeController;\n  expandOnClick: boolean | undefined;\n  flatValues: string[];\n  isSubtree?: boolean;\n  level?: number;\n  renderNode: RenderNode | undefined;\n  selectOnClick: boolean | undefined;\n  allowRangeSelection: boolean | undefined;\n  expandOnSpace: boolean | undefined;\n  checkOnSpace: boolean | undefined;\n  keepMounted: boolean | undefined;\n  onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;\n  dragStateRef: React.RefObject<TreeDragState>;\n  data: TreeNodeData[];\n}\n\nexport function TreeNode({\n  node,\n  getStyles,\n  rootIndex,\n  controller,\n  expandOnClick,\n  selectOnClick,\n  isSubtree,\n  level = 1,\n  renderNode,\n  flatValues,\n  allowRangeSelection,\n  expandOnSpace,\n  checkOnSpace,\n  keepMounted,\n  onDragDrop,\n  dragStateRef,\n  data,\n}: TreeNodeProps) {\n  const ref = useRef<HTMLLIElement>(null);\n  const hasLoadedChildren = Array.isArray(node.children);\n  const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n  const hasChildren = hasLoadedChildren || hasAsyncChildren;\n  const isLoading = controller.isNodeLoading(node.value);\n  const loadError = controller.getNodeLoadError(node.value);\n  const isExpanded = controller.expandedState[node.value] || false;\n\n  const nested = (node.children || []).map((child) => (\n    <TreeNode\n      key={child.value}\n      node={child}\n      flatValues={flatValues}\n      getStyles={getStyles}\n      rootIndex={undefined}\n      level={level + 1}\n      controller={controller}\n      expandOnClick={expandOnClick}\n      isSubtree\n      renderNode={renderNode}\n      selectOnClick={selectOnClick}\n      allowRangeSelection={allowRangeSelection}\n      expandOnSpace={expandOnSpace}\n      checkOnSpace={checkOnSpace}\n      keepMounted={keepMounted}\n      onDragDrop={onDragDrop}\n      dragStateRef={dragStateRef}\n      data={data}\n    />\n  ));\n\n  const dragProps = useTreeNodeDragDrop({\n    nodeValue: node.value,\n    hasChildren,\n    data,\n    onDragDrop,\n    dragStateRef,\n  });\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.nativeEvent.code === 'ArrowRight') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (isExpanded) {\n        event.currentTarget.querySelector<HTMLLIElement>('[role=treeitem]')?.focus();\n      } else {\n        controller.expand(node.value);\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowLeft') {\n      event.stopPropagation();\n      event.preventDefault();\n      if (isExpanded && hasChildren) {\n        controller.collapse(node.value);\n      } else if (isSubtree) {\n        findElementAncestor(event.currentTarget as HTMLElement, '[role=treeitem]')?.focus();\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowDown' || event.nativeEvent.code === 'ArrowUp') {\n      const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n      if (!root) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      const nodes = Array.from(root.querySelectorAll<HTMLLIElement>('[role=treeitem]')).filter(\n        (treeNode) => treeNode.style.display !== 'none'\n      );\n      const index = nodes.indexOf(event.currentTarget as HTMLLIElement);\n\n      if (index === -1) {\n        return;\n      }\n\n      const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n      nodes[nextIndex]?.focus();\n\n      if (event.shiftKey) {\n        const selectNode = nodes[nextIndex];\n\n        if (selectNode) {\n          controller.setSelectedState(\n            getValuesRange(controller.anchorNode, selectNode.dataset.value, flatValues)\n          );\n        }\n      }\n    }\n\n    if (event.nativeEvent.code === 'Space') {\n      if (expandOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.toggleExpanded(node.value);\n      }\n\n      if (checkOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.isNodeChecked(node.value)\n          ? controller.uncheckNode(node.value)\n          : controller.checkNode(node.value);\n      }\n    }\n  };\n\n  const handleNodeClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n\n    if (allowRangeSelection && event.shiftKey && controller.anchorNode) {\n      controller.setSelectedState(getValuesRange(controller.anchorNode, node.value, flatValues));\n      ref.current?.focus();\n    } else {\n      if (expandOnClick) {\n        controller.toggleExpanded(node.value);\n      }\n\n      selectOnClick && controller.select(node.value);\n      ref.current?.focus();\n    }\n  };\n\n  const selected = controller.selectedState.includes(node.value);\n  const elementProps = {\n    ...getStyles('label'),\n    onClick: handleNodeClick,\n    'data-selected': selected || undefined,\n    'data-value': node.value,\n    ...dragProps,\n  };\n\n  const withLoadingIndicator = isExpanded && isLoading && nested.length === 0;\n\n  return (\n    <li\n      {...getStyles('node', {\n        style: { '--label-offset': `calc(var(--level-offset) * ${level - 1})` },\n      })}\n      role=\"treeitem\"\n      aria-selected={selected}\n      data-value={node.value}\n      data-selected={selected || undefined}\n      data-level={level}\n      tabIndex={rootIndex === 0 ? 0 : -1}\n      onKeyDown={handleKeyDown}\n      ref={ref}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          tree: controller,\n          expanded: isExpanded,\n          hasChildren,\n          isLoading,\n          loadError,\n          elementProps,\n        })\n      ) : (\n        <div {...elementProps}>{node.label}</div>\n      )}\n\n      {withLoadingIndicator && (\n        <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n          <li\n            {...getStyles('node', {\n              style: { '--label-offset': `calc(var(--level-offset) * ${level})` },\n            })}\n          >\n            <div {...getStyles('label')}>\n              <Loader size={16} />\n            </div>\n          </li>\n        </Box>\n      )}\n\n      {keepMounted && nested.length > 0 ? (\n        <Activity mode={isExpanded ? 'visible' : 'hidden'}>\n          <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n            {nested}\n          </Box>\n        </Activity>\n      ) : (\n        isExpanded &&\n        nested.length > 0 && (\n          <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n            {nested}\n          </Box>\n        )\n      )}\n    </li>\n  );\n}\n\nTreeNode.displayName = '@mantine/core/TreeNode';\n"],"mappings":"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"}
+{"version":3,"file":"TreeNode.mjs","names":[],"sources":["../../../src/components/Tree/TreeNode.tsx"],"sourcesContent":["import { Activity, useRef } from 'react';\nimport { Box, findElementAncestor, GetStylesApi } from '../../core';\nimport { Loader } from '../Loader';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport type { RenderNode, TreeDragState, TreeFactory, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport { TreeAllowDrop, useTreeNodeDragDrop } from './use-tree-node-drag-drop';\n\nfunction getValuesRange(anchor: string | null, value: string | undefined, flatValues: string[]) {\n  if (!anchor || !value) {\n    return [];\n  }\n\n  const anchorIndex = flatValues.indexOf(anchor);\n  const valueIndex = flatValues.indexOf(value);\n  const start = Math.min(anchorIndex, valueIndex);\n  const end = Math.max(anchorIndex, valueIndex);\n\n  return flatValues.slice(start, end + 1);\n}\n\ninterface TreeNodeProps {\n  node: TreeNodeData;\n  getStyles: GetStylesApi<TreeFactory>;\n  rootIndex: number | undefined;\n  controller: TreeController;\n  expandOnClick: boolean | undefined;\n  flatValues: string[];\n  isSubtree?: boolean;\n  level?: number;\n  renderNode: RenderNode | undefined;\n  selectOnClick: boolean | undefined;\n  allowRangeSelection: boolean | undefined;\n  expandOnSpace: boolean | undefined;\n  checkOnSpace: boolean | undefined;\n  keepMounted: boolean | undefined;\n  onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;\n  allowDrop: TreeAllowDrop | undefined;\n  withDragHandle: boolean | undefined;\n  dragStateRef: React.RefObject<TreeDragState>;\n  data: TreeNodeData[];\n}\n\nexport function TreeNode({\n  node,\n  getStyles,\n  rootIndex,\n  controller,\n  expandOnClick,\n  selectOnClick,\n  isSubtree,\n  level = 1,\n  renderNode,\n  flatValues,\n  allowRangeSelection,\n  expandOnSpace,\n  checkOnSpace,\n  keepMounted,\n  onDragDrop,\n  allowDrop,\n  withDragHandle,\n  dragStateRef,\n  data,\n}: TreeNodeProps) {\n  const ref = useRef<HTMLLIElement>(null);\n  const hasLoadedChildren = Array.isArray(node.children);\n  const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n  const hasChildren = hasLoadedChildren || hasAsyncChildren;\n  const isLoading = controller.isNodeLoading(node.value);\n  const loadError = controller.getNodeLoadError(node.value);\n  const isExpanded = controller.expandedState[node.value] || false;\n\n  const nested = (node.children || []).map((child) => (\n    <TreeNode\n      key={child.value}\n      node={child}\n      flatValues={flatValues}\n      getStyles={getStyles}\n      rootIndex={undefined}\n      level={level + 1}\n      controller={controller}\n      expandOnClick={expandOnClick}\n      isSubtree\n      renderNode={renderNode}\n      selectOnClick={selectOnClick}\n      allowRangeSelection={allowRangeSelection}\n      expandOnSpace={expandOnSpace}\n      checkOnSpace={checkOnSpace}\n      keepMounted={keepMounted}\n      onDragDrop={onDragDrop}\n      allowDrop={allowDrop}\n      withDragHandle={withDragHandle}\n      dragStateRef={dragStateRef}\n      data={data}\n    />\n  ));\n\n  const { elementProps: dragElementProps, dragHandleProps } = useTreeNodeDragDrop({\n    nodeValue: node.value,\n    hasChildren,\n    data,\n    onDragDrop,\n    dragStateRef,\n    allowDrop,\n    withDragHandle,\n  });\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.nativeEvent.code === 'ArrowRight') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (isExpanded) {\n        event.currentTarget.querySelector<HTMLLIElement>('[role=treeitem]')?.focus();\n      } else {\n        controller.expand(node.value);\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowLeft') {\n      event.stopPropagation();\n      event.preventDefault();\n      if (isExpanded && hasChildren) {\n        controller.collapse(node.value);\n      } else if (isSubtree) {\n        findElementAncestor(event.currentTarget as HTMLElement, '[role=treeitem]')?.focus();\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowDown' || event.nativeEvent.code === 'ArrowUp') {\n      const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n      if (!root) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      const nodes = Array.from(root.querySelectorAll<HTMLLIElement>('[role=treeitem]')).filter(\n        (treeNode) => treeNode.style.display !== 'none'\n      );\n      const index = nodes.indexOf(event.currentTarget as HTMLLIElement);\n\n      if (index === -1) {\n        return;\n      }\n\n      const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n      nodes[nextIndex]?.focus();\n\n      if (event.shiftKey) {\n        const selectNode = nodes[nextIndex];\n\n        if (selectNode) {\n          controller.setSelectedState(\n            getValuesRange(controller.anchorNode, selectNode.dataset.value, flatValues)\n          );\n        }\n      }\n    }\n\n    if (event.nativeEvent.code === 'Space') {\n      if (expandOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.toggleExpanded(node.value);\n      }\n\n      if (checkOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.isNodeChecked(node.value)\n          ? controller.uncheckNode(node.value)\n          : controller.checkNode(node.value);\n      }\n    }\n  };\n\n  const handleNodeClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n\n    if (allowRangeSelection && event.shiftKey && controller.anchorNode) {\n      controller.setSelectedState(getValuesRange(controller.anchorNode, node.value, flatValues));\n      ref.current?.focus();\n    } else {\n      if (expandOnClick) {\n        controller.toggleExpanded(node.value);\n      }\n\n      selectOnClick && controller.select(node.value);\n      ref.current?.focus();\n    }\n  };\n\n  const selected = controller.selectedState.includes(node.value);\n  const elementProps = {\n    ...getStyles('label'),\n    onClick: handleNodeClick,\n    'data-selected': selected || undefined,\n    'data-value': node.value,\n    ...dragElementProps,\n  };\n\n  const withLoadingIndicator = isExpanded && isLoading && nested.length === 0;\n\n  return (\n    <li\n      {...getStyles('node', {\n        style: { '--label-offset': `calc(var(--level-offset) * ${level - 1})` },\n      })}\n      role=\"treeitem\"\n      aria-selected={selected}\n      data-value={node.value}\n      data-selected={selected || undefined}\n      data-level={level}\n      tabIndex={rootIndex === 0 ? 0 : -1}\n      onKeyDown={handleKeyDown}\n      ref={ref}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          tree: controller,\n          expanded: isExpanded,\n          hasChildren,\n          isLoading,\n          loadError,\n          elementProps,\n          dragHandleProps,\n        })\n      ) : (\n        <div {...elementProps}>{node.label}</div>\n      )}\n\n      {withLoadingIndicator && (\n        <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n          <li\n            {...getStyles('node', {\n              style: { '--label-offset': `calc(var(--level-offset) * ${level})` },\n            })}\n          >\n            <div {...getStyles('label')}>\n              <Loader size={16} />\n            </div>\n          </li>\n        </Box>\n      )}\n\n      {keepMounted && nested.length > 0 ? (\n        <Activity mode={isExpanded ? 'visible' : 'hidden'}>\n          <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n            {nested}\n          </Box>\n        </Activity>\n      ) : (\n        isExpanded &&\n        nested.length > 0 && (\n          <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n            {nested}\n          </Box>\n        )\n      )}\n    </li>\n  );\n}\n\nTreeNode.displayName = '@mantine/core/TreeNode';\n"],"mappings":"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"}

package/esm/components/Tree/is-node-checked/is-node-checked.mjs

@@ -9,6 +9,6 @@ function isNodeChecked(value, data, checkedState) {
 }
 const memoizedIsNodeChecked = memoize(isNodeChecked);
 //#endregion
-export { memoizedIsNodeChecked };
+export { isNodeChecked, memoizedIsNodeChecked };
 
 //# sourceMappingURL=is-node-checked.mjs.map

package/esm/components/Tree/is-node-indeterminate/is-node-indeterminate.mjs

@@ -8,6 +8,6 @@ function isNodeIndeterminate(value, data, checkedState) {
 }
 const memoizedIsNodeIndeterminate = memoize(isNodeIndeterminate);
 //#endregion
-export { memoizedIsNodeIndeterminate };
+export { isNodeIndeterminate, memoizedIsNodeIndeterminate };
 
 //# sourceMappingURL=is-node-indeterminate.mjs.map

package/esm/components/Tree/use-tree-node-drag-drop.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { findTreeNode } from "./get-children-nodes-values/get-children-nodes-values.mjs";
+import { useEffect, useState } from "react";
 //#region packages/@mantine/core/src/components/Tree/use-tree-node-drag-drop.ts
 function isDescendantOf(data, ancestorValue, descendantValue) {
 	const ancestor = findTreeNode(ancestorValue, data);
@@ -25,10 +26,21 @@ function getDragDropPosition(event, element, hasChildren) {
 	if (y < height * .5) return "before";
 	return "after";
 }
-const EMPTY_DRAG_PROPS = {};
-function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef }) {
+const EMPTY_DRAG_PROPS = {
+	elementProps: {},
+	dragHandleProps: void 0
+};
+function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, allowDrop, withDragHandle }) {
+	const [isDragHandleActive, setIsDragHandleActive] = useState(false);
+	useEffect(() => {
+		if (!withDragHandle || !isDragHandleActive) return;
+		const handleWindowMouseUp = () => setIsDragHandleActive(false);
+		window.addEventListener("mouseup", handleWindowMouseUp);
+		return () => window.removeEventListener("mouseup", handleWindowMouseUp);
+	}, [withDragHandle, isDragHandleActive]);
 	if (!onDragDrop) return EMPTY_DRAG_PROPS;
 	const handleDragStart = (event) => {
+		if (withDragHandle && !isDragHandleActive) return;
 		event.stopPropagation();
 		event.dataTransfer.effectAllowed = "move";
 		event.dataTransfer.setData("text/plain", nodeValue);
@@ -42,11 +54,22 @@ function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragSta
 		const draggedValue = dragStateRef.current.draggedValue;
 		if (!draggedValue || draggedValue === nodeValue) return;
 		if (isDescendantOf(data, draggedValue, nodeValue)) return;
+		const target = event.currentTarget;
+		const position = getDragDropPosition(event, target, hasChildren);
+		if (allowDrop && !allowDrop({
+			draggedNode: draggedValue,
+			targetNode: nodeValue,
+			position
+		})) {
+			const prevTarget = dragStateRef.current.currentDropTarget;
+			if (prevTarget && prevTarget !== target) prevTarget.removeAttribute("data-drag-over");
+			target.removeAttribute("data-drag-over");
+			dragStateRef.current.currentDropTarget = null;
+			return;
+		}
 		event.preventDefault();
 		event.stopPropagation();
 		event.dataTransfer.dropEffect = "move";
-		const target = event.currentTarget;
-		const position = getDragDropPosition(event, target, hasChildren);
 		const prevTarget = dragStateRef.current.currentDropTarget;
 		if (prevTarget && prevTarget !== target) prevTarget.removeAttribute("data-drag-over");
 		target.setAttribute("data-drag-over", position);
@@ -66,11 +89,14 @@ function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragSta
 		const position = target.getAttribute("data-drag-over");
 		target.removeAttribute("data-drag-over");
 		const draggedValue = dragStateRef.current.draggedValue;
-		if (draggedValue && position && draggedValue !== nodeValue) onDragDrop({
-			draggedNode: draggedValue,
-			targetNode: nodeValue,
-			position
-		});
+		if (draggedValue && position && draggedValue !== nodeValue) {
+			const payload = {
+				draggedNode: draggedValue,
+				targetNode: nodeValue,
+				position
+			};
+			if (!allowDrop || allowDrop(payload)) onDragDrop(payload);
+		}
 		dragStateRef.current.draggedValue = null;
 		dragStateRef.current.currentDropTarget = null;
 	};
@@ -80,14 +106,18 @@ function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragSta
 		if (prevTarget) prevTarget.removeAttribute("data-drag-over");
 		dragStateRef.current.draggedValue = null;
 		dragStateRef.current.currentDropTarget = null;
+		if (withDragHandle) setIsDragHandleActive(false);
 	};
 	return {
-		draggable: true,
-		onDragStart: handleDragStart,
-		onDragOver: handleDragOver,
-		onDragLeave: handleDragLeave,
-		onDrop: handleDrop,
-		onDragEnd: handleDragEnd
+		elementProps: {
+			draggable: withDragHandle ? isDragHandleActive : true,
+			onDragStart: handleDragStart,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDrop: handleDrop,
+			onDragEnd: handleDragEnd
+		},
+		dragHandleProps: withDragHandle ? { onMouseDown: () => setIsDragHandleActive(true) } : void 0
 	};
 }
 //#endregion