@mantine/core 9.4.2 → 9.5.0

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  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    floatingHeight,\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    successProps,\n    wrapperProps,\n    description,\n    label,\n    error,\n    success,\n    withErrorStyles,\n    withSuccessStyles,\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        floatingHeight={floatingHeight}\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            successProps={successProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            success={success}\n            withErrorStyles={withErrorStyles}\n            withSuccessStyles={withSuccessStyles}\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":";;;;;;;;;;;;;;;;;;;;;AA6IA,MAAM,eAAe;CACnB,SAAS;CACT,mBAAmB;CACnB,YAAY,CAAC,GAAG;CAChB,0BAA0B;CAC1B,aAAa;CACb,MAAM;AACR;AAEA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAW,GAAG,cAAc,MAAM;CACnF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,WACA,SACA,iBACA,aACA,SACA,MACA,gBACA,uBACA,gBACA,iBACA,2BACA,iCACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,gBACA,aACA,oBACA,gBACA,UACA,UACA,YACA,SACA,QACA,SACA,QACA,cACA,mBACA,2BACA,mBACA,aACA,kBACA,0BACA,kBACA,gBACA,mBACA,cACA,UACA,YACA,kBACA,YACA,cACA,cACA,aACA,OACA,OACA,SACA,iBACA,mBACA,MACA,MACA,IACA,WACA,kBACA,kBACA,kBACA,0BACA,KACA,cACA,YACA,UACA,SACA,WACA,iBACA,mBACA,aACA,aACA,YACA,KACA,SACA,iBACA,kBACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,aAAa,sBAAsB,IAAI;CAC7C,MAAM,gBAAgB,iBAAiB,UAAU;CACjD,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,OAAO,aAAa,UAAU,GAAG;CAEvC,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAClB,SAAS,oBAAoB;EAC/B;CACF,CAAC;CAED,MAAM,EACJ,YACA,MAAM,EAAE,MAAM,cAAc,GAAG,WAC7B,kBAAkB,MAAM;CAE5B,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,EAAE,cAAc,cAAc,uBAAuB,gBAAgB;EACzE,OAAO;EACP,UAAU;EACV,SAAS,oBAA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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    floatingHeight,\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    successProps,\n    wrapperProps,\n    description,\n    label,\n    error,\n    success,\n    withErrorStyles,\n    withSuccessStyles,\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        floatingHeight={floatingHeight}\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            successProps={successProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            success={success}\n            withErrorStyles={withErrorStyles}\n            withSuccessStyles={withSuccessStyles}\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":";;;;;;;;;;;;;;;;;;;;;AA6IA,MAAM,eAAe;CACnB,SAAS;CACT,mBAAmB;CACnB,YAAY,CAAC,GAAG;CAChB,0BAA0B;CAC1B,aAAa;CACb,MAAM;AACR;AAEA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAW,GAAG,cAAc,MAAM;CACnF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,WACA,SACA,iBACA,aACA,SACA,MACA,gBACA,uBACA,gBACA,iBACA,2BACA,iCACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,gBACA,aACA,oBACA,gBACA,UACA,UACA,YACA,SACA,QACA,SACA,QACA,cACA,mBACA,2BACA,mBACA,aACA,kBACA,0BACA,kBACA,gBACA,mBACA,cACA,UACA,YACA,kBACA,YACA,cACA,cACA,aACA,OACA,OACA,SACA,iBACA,mBACA,MACA,MACA,IACA,WACA,kBACA,kBACA,kBACA,0BACA,KACA,cACA,YACA,UACA,SACA,WACA,iBACA,mBACA,aACA,aACA,YACA,KACA,SACA,iBACA,kBACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,aAAa,sBAAsB,IAAI;CAC7C,MAAM,gBAAgB,iBAAiB,UAAU;CACjD,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,OAAO,aAAa,UAAU,GAAG;CAEvC,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAClB,SAAS,oBAAoB;EAC/B;CACF,CAAC;CAED,MAAM,EACJ,YACA,MAAM,EAAE,MAAM,cAAc,GAAG,WAC7B,kBAAkB,MAAM;CAE5B,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,EAAE,cAAc,cAAc,uBAAuB,gBAAgB;EACzE,OAAO;EACP,UAAU;EACV,SAAS,oBAA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"}

package/esm/components/Timeline/Timeline.mjs

@@ -47,6 +47,7 @@ const Timeline = factory((_props) => {
 		varsResolver
 	});
 	const _children = Children.toArray(children);
+	const hasOpposite = _children.some((item) => item.props?.opposite != null);
 	const items = _children.map((item, index) => cloneElement(item, {
 		unstyled,
 		__align: align,
@@ -57,7 +58,10 @@ const Timeline = factory((_props) => {
 		value: { getStyles },
 		children: /* @__PURE__ */ jsx(Box, {
 			...getStyles("root"),
-			mod: [{ align }, mod],
+			mod: [{
+				align,
+				opposite: hasOpposite
+			}, mod],
 			...others,
 			children: items
 		})

package/esm/components/Timeline/Timeline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.mjs","names":["classes"],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TimelineProvider } from './Timeline.context';\nimport {\n  TimelineItem,\n  TimelineItemStylesNames,\n  type TimelineItemProps,\n  type TimelineItemFactory,\n} from './TimelineItem/TimelineItem';\nimport classes from './Timeline.module.css';\nexport type TimelineStylesNames = 'root' | TimelineItemStylesNames;\nexport type TimelineCssVariables = {\n  root: '--tl-line-width' | '--tl-bullet-size' | '--tl-color' | '--tl-icon-color' | '--tl-radius';\n};\n\nexport interface TimelineProps\n  extends BoxProps, StylesApiProps<TimelineFactory>, ElementProps<'div'> {\n  /** `Timeline.Item` components */\n  children?: React.ReactNode;\n\n  /** Index of the active element */\n  active?: number;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Size of the bullet @default 20 */\n  bulletSize?: number | string;\n\n  /** Position of content relative to the bullet @default 'left' */\n  align?: 'right' | 'left';\n\n  /** Control width of the line */\n  lineWidth?: number | string;\n\n  /** If set, the active items direction is reversed without reversing items order @default false */\n  reverseActive?: boolean;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type TimelineFactory = Factory<{\n  props: TimelineProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineStylesNames;\n  vars: TimelineCssVariables;\n  staticComponents: {\n    Item: typeof TimelineItem;\n  };\n}>;\n\nconst defaultProps = {\n  active: -1,\n  align: 'left',\n} satisfies Partial<TimelineProps>;\n\nconst varsResolver = createVarsResolver<TimelineFactory>(\n  (theme, { bulletSize, lineWidth, radius, color, autoContrast }) => ({\n    root: {\n      '--tl-bullet-size': rem(bulletSize),\n      '--tl-line-width': rem(lineWidth),\n      '--tl-radius': radius === undefined ? undefined : getRadius(radius),\n      '--tl-color': color ? getThemeColor(color, theme) : undefined,\n      '--tl-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n    },\n  })\n);\n\nexport const Timeline = factory<TimelineFactory>((_props) => {\n  const props = useProps('Timeline', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    active,\n    color,\n    radius,\n    bulletSize,\n    align,\n    lineWidth,\n    reverseActive,\n    mod,\n    autoContrast,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TimelineFactory>({\n    name: 'Timeline',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _children = Children.toArray(children);\n  const items = _children.map((item: any, index) =>\n    cloneElement(item, {\n      unstyled,\n      __align: align,\n      __active:\n        item.props?.active ||\n        (reverseActive ? active >= _children.length - index - 1 : active >= index),\n      __lineActive:\n        item.props?.lineActive ||\n        (reverseActive ? active >= _children.length - index - 1 : active - 1 >= index),\n    })\n  );\n\n  return (\n    <TimelineProvider value={{ getStyles }}>\n      <Box {...getStyles('root')} mod={[{ align }, mod]} {...others}>\n        {items}\n      </Box>\n    </TimelineProvider>\n  );\n});\n\nTimeline.classes = classes;\nTimeline.varsResolver = varsResolver;\nTimeline.displayName = '@mantine/core/Timeline';\nTimeline.Item = TimelineItem;\n\nexport namespace Timeline {\n  export type Props = TimelineProps;\n  export type StylesNames = TimelineStylesNames;\n  export type CssVariables = TimelineCssVariables;\n  export type Factory = TimelineFactory;\n\n  export namespace Item {\n    export type Props = TimelineItemProps;\n    export type StylesNames = TimelineItemStylesNames;\n    export type Factory = TimelineItemFactory;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAwEA,MAAM,eAAe;CACnB,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,YAAY,WAAW,QAAQ,OAAO,oBAAoB,EAClE,MAAM;CACJ,oBAAoB,IAAI,UAAU;CAClC,mBAAmB,IAAI,SAAS;CAChC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClE,cAAc,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;CACpD,mBAAmB,qBAAqB,cAAc,KAAK,IACvD,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,QACA,OACA,QACA,YACA,OACA,WACA,eACA,KACA,cACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,SAAS,QAAQ,QAAQ;CAC3C,MAAM,QAAQ,UAAU,KAAK,MAAW,UACtC,aAAa,MAAM;EACjB;EACA,SAAS;EACT,UACE,KAAK,OAAO,WACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,UAAU;EACtE,cACE,KAAK,OAAO,eACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,SAAS,KAAK;CAC5E,CAAC,CACH;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,UAAU;YACnC,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG;GAAG,GAAI;aACpD;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO"}
+{"version":3,"file":"Timeline.mjs","names":["classes"],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TimelineProvider } from './Timeline.context';\nimport {\n  TimelineItem,\n  TimelineItemStylesNames,\n  type TimelineItemProps,\n  type TimelineItemFactory,\n} from './TimelineItem/TimelineItem';\nimport classes from './Timeline.module.css';\nexport type TimelineStylesNames = 'root' | TimelineItemStylesNames;\nexport type TimelineCssVariables = {\n  root: '--tl-line-width' | '--tl-bullet-size' | '--tl-color' | '--tl-icon-color' | '--tl-radius';\n};\n\nexport interface TimelineProps\n  extends BoxProps, StylesApiProps<TimelineFactory>, ElementProps<'div'> {\n  /** `Timeline.Item` components */\n  children?: React.ReactNode;\n\n  /** Index of the active element */\n  active?: number;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Size of the bullet @default 20 */\n  bulletSize?: number | string;\n\n  /** Position of content relative to the bullet @default 'left' */\n  align?: 'right' | 'left';\n\n  /** Control width of the line */\n  lineWidth?: number | string;\n\n  /** If set, the active items direction is reversed without reversing items order @default false */\n  reverseActive?: boolean;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n}\n\nexport type TimelineFactory = Factory<{\n  props: TimelineProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineStylesNames;\n  vars: TimelineCssVariables;\n  staticComponents: {\n    Item: typeof TimelineItem;\n  };\n}>;\n\nconst defaultProps = {\n  active: -1,\n  align: 'left',\n} satisfies Partial<TimelineProps>;\n\nconst varsResolver = createVarsResolver<TimelineFactory>(\n  (theme, { bulletSize, lineWidth, radius, color, autoContrast }) => ({\n    root: {\n      '--tl-bullet-size': rem(bulletSize),\n      '--tl-line-width': rem(lineWidth),\n      '--tl-radius': radius === undefined ? undefined : getRadius(radius),\n      '--tl-color': color ? getThemeColor(color, theme) : undefined,\n      '--tl-icon-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n    },\n  })\n);\n\nexport const Timeline = factory<TimelineFactory>((_props) => {\n  const props = useProps('Timeline', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    active,\n    color,\n    radius,\n    bulletSize,\n    align,\n    lineWidth,\n    reverseActive,\n    mod,\n    autoContrast,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TimelineFactory>({\n    name: 'Timeline',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _children = Children.toArray(children);\n  const hasOpposite = _children.some((item: any) => item.props?.opposite != null);\n  const items = _children.map((item: any, index) =>\n    cloneElement(item, {\n      unstyled,\n      __align: align,\n      __active:\n        item.props?.active ||\n        (reverseActive ? active >= _children.length - index - 1 : active >= index),\n      __lineActive:\n        item.props?.lineActive ||\n        (reverseActive ? active >= _children.length - index - 1 : active - 1 >= index),\n    })\n  );\n\n  return (\n    <TimelineProvider value={{ getStyles }}>\n      <Box {...getStyles('root')} mod={[{ align, opposite: hasOpposite }, mod]} {...others}>\n        {items}\n      </Box>\n    </TimelineProvider>\n  );\n});\n\nTimeline.classes = classes;\nTimeline.varsResolver = varsResolver;\nTimeline.displayName = '@mantine/core/Timeline';\nTimeline.Item = TimelineItem;\n\nexport namespace Timeline {\n  export type Props = TimelineProps;\n  export type StylesNames = TimelineStylesNames;\n  export type CssVariables = TimelineCssVariables;\n  export type Factory = TimelineFactory;\n\n  export namespace Item {\n    export type Props = TimelineItemProps;\n    export type StylesNames = TimelineItemStylesNames;\n    export type Factory = TimelineItemFactory;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAwEA,MAAM,eAAe;CACnB,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,YAAY,WAAW,QAAQ,OAAO,oBAAoB,EAClE,MAAM;CACJ,oBAAoB,IAAI,UAAU;CAClC,mBAAmB,IAAI,SAAS;CAChC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClE,cAAc,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;CACpD,mBAAmB,qBAAqB,cAAc,KAAK,IACvD,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,QACA,OACA,QACA,YACA,OACA,WACA,eACA,KACA,cACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,SAAS,QAAQ,QAAQ;CAC3C,MAAM,cAAc,UAAU,MAAM,SAAc,KAAK,OAAO,YAAY,IAAI;CAC9E,MAAM,QAAQ,UAAU,KAAK,MAAW,UACtC,aAAa,MAAM;EACjB;EACA,SAAS;EACT,UACE,KAAK,OAAO,WACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,UAAU;EACtE,cACE,KAAK,OAAO,eACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,SAAS,KAAK;CAC5E,CAAC,CACH;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,UAAU;YACnC,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC;IAAE;IAAO,UAAU;GAAY,GAAG,GAAG;GAAG,GAAI;aAC3E;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO"}

package/esm/components/Timeline/Timeline.module.mjs

@@ -5,7 +5,8 @@ var Timeline_module_default = {
 	"itemTitle": "m_2ebe8099",
 	"item": "m_436178ff",
 	"itemBullet": "m_8affcee1",
-	"itemBody": "m_540e8f41"
+	"itemBody": "m_540e8f41",
+	"itemOpposite": "m_f3ba506"
 };
 //#endregion
 export { Timeline_module_default as default };

package/esm/components/Timeline/Timeline.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.module.mjs","names":[],"sources":["../../../src/components/Timeline/Timeline.module.css"],"sourcesContent":[".root {\n  --offset: calc(var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2);\n  --tl-bullet-size: 20px;\n  --tl-line-width: 4px;\n  --tl-radius: 1000px;\n  --tl-color: var(--mantine-primary-color-filled);\n\n  &:where([data-align='left']) {\n    padding-inline-start: var(--offset);\n  }\n\n  &:where([data-align='right']) {\n    padding-inline-end: var(--offset);\n  }\n}\n\n.itemTitle {\n  font-weight: var(--mantine-font-weight-medium);\n  line-height: 1;\n  margin-bottom: calc(var(--mantine-spacing-xs) / 2);\n}\n\n.item {\n  --item-border: var(--tl-line-width) var(--tli-border-style, solid) var(--item-border-color);\n\n  position: relative;\n  color: var(--mantine-color-text);\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    inset-inline-start: var(--timeline-line-start, 0);\n    inset-inline-end: var(--timeline-line-end, 0);\n    bottom: calc(var(--mantine-spacing-xl) * -1);\n    border-inline-start: var(--item-border);\n    display: var(--timeline-line-display, none);\n\n    .root[data-align='left'] & {\n      --timeline-line-start: calc(var(--tl-line-width) * -1);\n      --timeline-line-end: auto;\n    }\n\n    .root[data-align='right'] & {\n      --timeline-line-start: auto;\n      --timeline-line-end: calc(var(--tl-line-width) * -1);\n    }\n  }\n\n  .root:where([data-align='left']) & {\n    padding-inline-start: var(--offset);\n    text-align: start;\n  }\n\n  .root:where([data-align='right']) & {\n    padding-inline-end: var(--offset);\n    text-align: end;\n  }\n\n  @mixin where-light {\n    --item-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --item-border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-line-active]) {\n    &::before {\n      border-color: var(--tli-color, var(--tl-color));\n    }\n  }\n\n  &:where(:not(:last-of-type)) {\n    --timeline-line-display: block;\n  }\n\n  &:where(:not(:first-of-type)) {\n    margin-top: var(--mantine-spacing-xl);\n  }\n}\n\n.itemBullet {\n  width: var(--tl-bullet-size);\n  height: var(--tl-bullet-size);\n  border-radius: var(--tli-radius, var(--tl-radius));\n  border: var(--tl-line-width) solid;\n  background-color: var(--mantine-color-body);\n  position: absolute;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  .root:where([data-align='left']) & {\n    inset-inline-start: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n    inset-inline-end: auto;\n  }\n\n  .root:where([data-align='right']) & {\n    inset-inline-start: auto;\n    inset-inline-end: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n  }\n\n  &:where([data-with-child]) {\n    border-width: var(--tl-line-width);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-3);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-active]) {\n    border-color: var(--tli-color, var(--tl-color));\n    background-color: var(--mantine-color-white);\n    color: var(--tl-icon-color, var(--mantine-color-white));\n\n    &:where([data-with-child]) {\n      background-color: var(--tli-color, var(--tl-color));\n      color: var(--tl-icon-color, var(--mantine-color-white));\n    }\n  }\n}\n\n.itemBody {\n  .root:where([data-align='left']) & {\n    padding-inline-start: var(--offset);\n    text-align: start;\n  }\n\n  .root:where([data-align='right']) & {\n    padding-inline-end: var(--offset);\n    text-align: end;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Timeline.module.mjs","names":[],"sources":["../../../src/components/Timeline/Timeline.module.css"],"sourcesContent":[".root {\n  --offset: calc(var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2);\n  --tl-bullet-size: 20px;\n  --tl-line-width: 4px;\n  --tl-radius: 1000px;\n  --tl-color: var(--mantine-primary-color-filled);\n\n  &:where(:not([data-opposite])) {\n    &:where([data-align='left']) {\n      padding-inline-start: var(--offset);\n    }\n\n    &:where([data-align='right']) {\n      padding-inline-end: var(--offset);\n    }\n  }\n}\n\n.itemTitle {\n  font-weight: var(--mantine-font-weight-medium);\n  line-height: 1;\n  margin-bottom: calc(var(--mantine-spacing-xs) / 2);\n}\n\n.item {\n  --item-border: var(--tl-line-width) var(--tli-border-style, solid) var(--item-border-color);\n\n  position: relative;\n  color: var(--mantine-color-text);\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    inset-inline-start: var(--timeline-line-start, 0);\n    inset-inline-end: var(--timeline-line-end, 0);\n    bottom: calc(var(--mantine-spacing-xl) * -1);\n    border-inline-start: var(--item-border);\n    display: var(--timeline-line-display, none);\n\n    .root:where(:not([data-opposite]))[data-align='left'] & {\n      --timeline-line-start: calc(var(--tl-line-width) * -1);\n      --timeline-line-end: auto;\n    }\n\n    .root:where(:not([data-opposite]))[data-align='right'] & {\n      --timeline-line-start: auto;\n      --timeline-line-end: calc(var(--tl-line-width) * -1);\n    }\n\n    .root:where([data-opposite]) & {\n      --timeline-line-start: calc(50% - var(--tl-line-width) / 2);\n      --timeline-line-end: auto;\n    }\n  }\n\n  .root:where(:not([data-opposite])):where([data-align='left']) & {\n    padding-inline-start: var(--offset);\n    text-align: start;\n  }\n\n  .root:where(:not([data-opposite])):where([data-align='right']) & {\n    padding-inline-end: var(--offset);\n    text-align: end;\n  }\n\n  .root:where([data-opposite]) & {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n  }\n\n  @mixin where-light {\n    --item-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --item-border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-line-active]) {\n    &::before {\n      border-color: var(--tli-color, var(--tl-color));\n    }\n  }\n\n  &:where(:not(:last-of-type)) {\n    --timeline-line-display: block;\n  }\n\n  &:where(:not(:first-of-type)) {\n    margin-top: var(--mantine-spacing-xl);\n  }\n}\n\n.itemBullet {\n  width: var(--tl-bullet-size);\n  height: var(--tl-bullet-size);\n  border-radius: var(--tli-radius, var(--tl-radius));\n  border: var(--tl-line-width) solid;\n  background-color: var(--mantine-color-body);\n  position: absolute;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  .root:where(:not([data-opposite])):where([data-align='left']) & {\n    inset-inline-start: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n    inset-inline-end: auto;\n  }\n\n  .root:where(:not([data-opposite])):where([data-align='right']) & {\n    inset-inline-start: auto;\n    inset-inline-end: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n  }\n\n  .root:where([data-opposite]) & {\n    position: relative;\n    inset-inline-start: unset;\n    inset-inline-end: unset;\n    grid-column: 2;\n    grid-row: 1;\n  }\n\n  &:where([data-with-child]) {\n    border-width: var(--tl-line-width);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-3);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-active]) {\n    border-color: var(--tli-color, var(--tl-color));\n    background-color: var(--mantine-color-white);\n    color: var(--tl-icon-color, var(--mantine-color-white));\n\n    &:where([data-with-child]) {\n      background-color: var(--tli-color, var(--tl-color));\n      color: var(--tl-icon-color, var(--mantine-color-white));\n    }\n  }\n}\n\n.itemBody {\n  .root:where(:not([data-opposite])):where([data-align='left']) & {\n    padding-inline-start: var(--offset);\n    text-align: start;\n  }\n\n  .root:where(:not([data-opposite])):where([data-align='right']) & {\n    padding-inline-end: var(--offset);\n    text-align: end;\n  }\n\n  .root:where([data-opposite]):where([data-align='left']) & {\n    grid-column: 3;\n    grid-row: 1;\n    padding-inline-start: var(--offset);\n    text-align: start;\n  }\n\n  .root:where([data-opposite]):where([data-align='right']) & {\n    grid-column: 1;\n    grid-row: 1;\n    padding-inline-end: var(--offset);\n    text-align: end;\n  }\n\n  .root:where([data-opposite]):where([data-align='left']) .item:where([data-alternate]) & {\n    grid-column: 1;\n    padding-inline-start: 0;\n    padding-inline-end: var(--offset);\n    text-align: end;\n  }\n\n  .root:where([data-opposite]):where([data-align='right']) .item:where([data-alternate]) & {\n    grid-column: 3;\n    padding-inline-end: 0;\n    padding-inline-start: var(--offset);\n    text-align: start;\n  }\n}\n\n.itemOpposite {\n  .root:where([data-align='left']) & {\n    grid-column: 1;\n    grid-row: 1;\n    padding-inline-end: var(--offset);\n    text-align: end;\n  }\n\n  .root:where([data-align='right']) & {\n    grid-column: 3;\n    grid-row: 1;\n    padding-inline-start: var(--offset);\n    text-align: start;\n  }\n\n  .root:where([data-align='left']) .item:where([data-alternate]) & {\n    grid-column: 3;\n    padding-inline-end: 0;\n    padding-inline-start: var(--offset);\n    text-align: start;\n  }\n\n  .root:where([data-align='right']) .item:where([data-alternate]) & {\n    grid-column: 1;\n    padding-inline-start: 0;\n    padding-inline-end: var(--offset);\n    text-align: end;\n  }\n}\n"],"mappings":""}

package/esm/components/Timeline/TimelineItem/TimelineItem.mjs

@@ -10,13 +10,28 @@ import Timeline_module_default from "../Timeline.module.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Timeline/TimelineItem/TimelineItem.tsx
 const TimelineItem = factory((_props) => {
-	const { classNames, className, style, styles, vars, __active, __align, __lineActive, __vars, bullet, radius, color, lineVariant, children, title, mod, ...others } = useProps("TimelineItem", null, _props);
+	const { classNames, className, style, styles, vars, __active, __align, __lineActive, __vars, bullet, opposite, alternate, radius, color, lineVariant, children, title, mod, ...others } = useProps("TimelineItem", null, _props);
 	const ctx = useTimelineContext();
 	const theme = useMantineTheme();
 	const stylesApiProps = {
 		classNames,
 		styles
 	};
+	const bodyFirst = __align === "left" && !!alternate || __align === "right" && !alternate;
+	const oppositeNode = opposite != null && /* @__PURE__ */ jsx("div", {
+		...ctx.getStyles("itemOpposite", stylesApiProps),
+		children: opposite
+	});
+	const bodyNode = /* @__PURE__ */ jsxs("div", {
+		...ctx.getStyles("itemBody", stylesApiProps),
+		children: [title && /* @__PURE__ */ jsx("div", {
+			...ctx.getStyles("itemTitle", stylesApiProps),
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			...ctx.getStyles("itemContent", stylesApiProps),
+			children
+		})]
+	});
 	return /* @__PURE__ */ jsxs(Box, {
 		...ctx.getStyles("item", {
 			...stylesApiProps,
@@ -25,7 +40,8 @@ const TimelineItem = factory((_props) => {
 		}),
 		mod: [{
 			"line-active": __lineActive,
-			active: __active
+			active: __active,
+			alternate
 		}, mod],
 		__vars: {
 			"--tli-radius": radius !== void 0 ? getRadius(radius) : void 0,
@@ -33,24 +49,19 @@ const TimelineItem = factory((_props) => {
 			"--tli-border-style": lineVariant || void 0
 		},
 		...others,
-		children: [/* @__PURE__ */ jsx(Box, {
-			...ctx.getStyles("itemBullet", stylesApiProps),
-			mod: {
-				"with-child": !!bullet,
-				align: __align,
-				active: __active
-			},
-			children: bullet
-		}), /* @__PURE__ */ jsxs("div", {
-			...ctx.getStyles("itemBody", stylesApiProps),
-			children: [title && /* @__PURE__ */ jsx("div", {
-				...ctx.getStyles("itemTitle", stylesApiProps),
-				children: title
-			}), /* @__PURE__ */ jsx("div", {
-				...ctx.getStyles("itemContent", stylesApiProps),
-				children
-			})]
-		})]
+		children: [
+			bodyFirst ? bodyNode : oppositeNode,
+			/* @__PURE__ */ jsx(Box, {
+				...ctx.getStyles("itemBullet", stylesApiProps),
+				mod: {
+					"with-child": !!bullet,
+					align: __align,
+					active: __active
+				},
+				children: bullet
+			}),
+			bodyFirst ? oppositeNode : bodyNode
+		]
 	});
 });
 TimelineItem.classes = Timeline_module_default;

package/esm/components/Timeline/TimelineItem/TimelineItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.mjs","names":["classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n  | 'itemBody'\n  | 'itemContent'\n  | 'itemBullet'\n  | 'item'\n  | 'itemTitle';\n\nexport interface TimelineItemProps\n  extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n  __active?: boolean;\n  __lineActive?: boolean;\n  __align?: 'right' | 'left';\n\n  /** Item title, displayed next to the bullet */\n  title?: React.ReactNode;\n\n  /** Content displayed below the title */\n  children?: React.ReactNode;\n\n  /** React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. */\n  bullet?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls line border style @default 'solid' */\n  lineVariant?: 'solid' | 'dashed' | 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n  props: TimelineItemProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineItemStylesNames;\n  compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n  const props = useProps('TimelineItem', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    __active,\n    __align,\n    __lineActive,\n    __vars,\n    bullet,\n    radius,\n    color,\n    lineVariant,\n    children,\n    title,\n    mod,\n    ...others\n  } = props;\n\n  const ctx = useTimelineContext();\n  const theme = useMantineTheme();\n\n  const stylesApiProps = { classNames, styles };\n\n  return (\n    <Box\n      {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n      mod={[{ 'line-active': __lineActive, active: __active }, mod]}\n      __vars={{\n        '--tli-radius': radius !== undefined ? getRadius(radius) : undefined,\n        '--tli-color': color ? getThemeColor(color, theme) : undefined,\n        '--tli-border-style': lineVariant || undefined,\n      }}\n      {...others}\n    >\n      <Box\n        {...ctx.getStyles('itemBullet', stylesApiProps)}\n        mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n      >\n        {bullet}\n      </Box>\n\n      <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n        {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n        <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n      </div>\n    </Box>\n  );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;AAwDA,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WAlBS,SAAS,gBAAgB,MAAM,MAmBrC;CAER,MAAM,MAAM,mBAAmB;CAC/B,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAE5C,OACE,qBAAC,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;EAAM,CAAC;EACjE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;EAAS,GAAG,GAAG;EAC5D,QAAQ;GACN,gBAAgB,WAAW,KAAA,IAAY,UAAU,MAAM,IAAI,KAAA;GAC3D,eAAe,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;GACrD,sBAAsB,eAAe,KAAA;EACvC;EACA,GAAI;YARN,CAUE,oBAAC,KAAD;GACE,GAAI,IAAI,UAAU,cAAc,cAAc;GAC9C,KAAK;IAAE,cAAc,CAAC,CAAC;IAAQ,OAAO;IAAS,QAAQ;GAAS;aAE/D;EACE,CAAA,GAEL,qBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,YAAY,cAAc;aAAjD,CACG,SAAS,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa,cAAc;cAAI;GAAW,CAAA,GAC3E,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe,cAAc;IAAI;GAAc,CAAA,CACnE;IACF;;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}
+{"version":3,"file":"TimelineItem.mjs","names":["classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n  | 'itemBody'\n  | 'itemContent'\n  | 'itemBullet'\n  | 'item'\n  | 'itemTitle'\n  | 'itemOpposite';\n\nexport interface TimelineItemProps\n  extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n  __active?: boolean;\n  __lineActive?: boolean;\n  __align?: 'right' | 'left';\n\n  /** Item title, displayed next to the bullet */\n  title?: React.ReactNode;\n\n  /** Content displayed below the title */\n  children?: React.ReactNode;\n\n  /** React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. */\n  bullet?: React.ReactNode;\n\n  /** Content displayed on the opposite side of the timeline item */\n  opposite?: React.ReactNode;\n\n  /** If set, switches the position of content and opposite @default false */\n  alternate?: boolean;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls line border style @default 'solid' */\n  lineVariant?: 'solid' | 'dashed' | 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n  props: TimelineItemProps;\n  ref: HTMLDivElement;\n  stylesNames: TimelineItemStylesNames;\n  compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n  const props = useProps('TimelineItem', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    __active,\n    __align,\n    __lineActive,\n    __vars,\n    bullet,\n    opposite,\n    alternate,\n    radius,\n    color,\n    lineVariant,\n    children,\n    title,\n    mod,\n    ...others\n  } = props;\n\n  const ctx = useTimelineContext();\n  const theme = useMantineTheme();\n\n  const stylesApiProps = { classNames, styles };\n  const bodyFirst = (__align === 'left' && !!alternate) || (__align === 'right' && !alternate);\n\n  const oppositeNode = opposite != null && (\n    <div {...ctx.getStyles('itemOpposite', stylesApiProps)}>{opposite}</div>\n  );\n\n  const bodyNode = (\n    <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n      {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n      <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n    </div>\n  );\n\n  return (\n    <Box\n      {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n      mod={[{ 'line-active': __lineActive, active: __active, alternate }, mod]}\n      __vars={{\n        '--tli-radius': radius !== undefined ? getRadius(radius) : undefined,\n        '--tli-color': color ? getThemeColor(color, theme) : undefined,\n        '--tli-border-style': lineVariant || undefined,\n      }}\n      {...others}\n    >\n      {bodyFirst ? bodyNode : oppositeNode}\n\n      <Box\n        {...ctx.getStyles('itemBullet', stylesApiProps)}\n        mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n      >\n        {bullet}\n      </Box>\n\n      {bodyFirst ? oppositeNode : bodyNode}\n    </Box>\n  );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;AA+DA,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,UACA,WACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WApBS,SAAS,gBAAgB,MAAM,MAqBrC;CAER,MAAM,MAAM,mBAAmB;CAC/B,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAC5C,MAAM,YAAa,YAAY,UAAU,CAAC,CAAC,aAAe,YAAY,WAAW,CAAC;CAElF,MAAM,eAAe,YAAY,QAC/B,oBAAC,OAAD;EAAK,GAAI,IAAI,UAAU,gBAAgB,cAAc;YAAI;CAAc,CAAA;CAGzE,MAAM,WACJ,qBAAC,OAAD;EAAK,GAAI,IAAI,UAAU,YAAY,cAAc;YAAjD,CACG,SAAS,oBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,aAAa,cAAc;aAAI;EAAW,CAAA,GAC3E,oBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,eAAe,cAAc;GAAI;EAAc,CAAA,CACnE;;CAGP,OACE,qBAAC,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;EAAM,CAAC;EACjE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;GAAU;EAAU,GAAG,GAAG;EACvE,QAAQ;GACN,gBAAgB,WAAW,KAAA,IAAY,UAAU,MAAM,IAAI,KAAA;GAC3D,eAAe,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;GACrD,sBAAsB,eAAe,KAAA;EACvC;EACA,GAAI;YARN;GAUG,YAAY,WAAW;GAExB,oBAAC,KAAD;IACE,GAAI,IAAI,UAAU,cAAc,cAAc;IAC9C,KAAK;KAAE,cAAc,CAAC,CAAC;KAAQ,OAAO;KAAS,QAAQ;IAAS;cAE/D;GACE,CAAA;GAEJ,YAAY,eAAe;EACzB;;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}

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 { 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\nfunction isVisibleTreeNode(node: HTMLElement, root: Element) {\n  for (let current: HTMLElement | null = node; current && current !== root; ) {\n    if (current.style.display === 'none') {\n      return false;\n    }\n    current = current.parentElement;\n  }\n\n  return true;\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) && node.children.length > 0;\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    isExpanded,\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        const nextNode = event.currentTarget.querySelector<HTMLLIElement>('[role=treeitem]');\n        nextNode?.setAttribute('data-focus-ring', 'true');\n        nextNode?.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        const parentNode = findElementAncestor(\n          event.currentTarget as HTMLElement,\n          '[role=treeitem]'\n        );\n        parentNode?.setAttribute('data-focus-ring', 'true');\n        parentNode?.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) => isVisibleTreeNode(treeNode, root)\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      const nextNode = nodes[nextIndex];\n      nextNode?.setAttribute('data-focus-ring', 'true');\n      nextNode?.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      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget as HTMLElement)) {\n          event.currentTarget.removeAttribute('data-focus-ring');\n        }\n      }}\n      ref={ref}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          isRoot: level === 1,\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} style={{ marginInlineStart: 4 }} />\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\nfunction isVisibleTreeNode(node: HTMLElement, root: Element) {\n  for (let current: HTMLElement | null = node; current && current !== root;) {\n    if (current.style.display === 'none') {\n      return false;\n    }\n    current = current.parentElement;\n  }\n\n  return true;\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) && node.children.length > 0;\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    isExpanded,\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        const nextNode = event.currentTarget.querySelector<HTMLLIElement>('[role=treeitem]');\n        nextNode?.setAttribute('data-focus-ring', 'true');\n        nextNode?.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        const parentNode = findElementAncestor(\n          event.currentTarget as HTMLElement,\n          '[role=treeitem]'\n        );\n        parentNode?.setAttribute('data-focus-ring', 'true');\n        parentNode?.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) => isVisibleTreeNode(treeNode, root)\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      const nextNode = nodes[nextIndex];\n      nextNode?.setAttribute('data-focus-ring', 'true');\n      nextNode?.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      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget as HTMLElement)) {\n          event.currentTarget.removeAttribute('data-focus-ring');\n        }\n      }}\n      ref={ref}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          isRoot: level === 1,\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} style={{ marginInlineStart: 4 }} />\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/use-tree.mjs

@@ -190,7 +190,7 @@ function useTree({ initialSelectedState = [], expandedState, initialCheckedState
 			if (!_checkedState.includes(value)) setCheckedState([..._checkedState, value]);
 		} else {
 			const checkedNodes = getChildrenNodesValues(value, data);
-			setCheckedState(Array.from(new Set([..._checkedState, ...checkedNodes])));
+			setCheckedState(Array.from(/* @__PURE__ */ new Set([..._checkedState, ...checkedNodes])));
 		}
 	}, [
 		data,

package/esm/components/Tree/use-tree.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-tree.mjs","names":[],"sources":["../../../src/components/Tree/use-tree.ts"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  CheckedNodeStatus,\n  getAllCheckedNodes,\n} from './get-all-checked-nodes/get-all-checked-nodes';\nimport {\n  findTreeNode,\n  getAllChildrenNodes,\n  getChildrenNodesValues,\n} from './get-children-nodes-values/get-children-nodes-values';\nimport { memoizedIsNodeChecked } from './is-node-checked/is-node-checked';\nimport { memoizedIsNodeIndeterminate } from './is-node-indeterminate/is-node-indeterminate';\nimport type { TreeNodeData } from './Tree';\n\nexport type TreeExpandedState = Record<string, boolean>;\n\nfunction getInitialTreeExpandedState(\n  initialState: TreeExpandedState,\n  data: TreeNodeData[],\n  value: string | string[] | undefined,\n  acc: TreeExpandedState = {}\n) {\n  data.forEach((node) => {\n    acc[node.value] = node.value in initialState ? initialState[node.value] : node.value === value;\n\n    if (Array.isArray(node.children)) {\n      getInitialTreeExpandedState(initialState, node.children, value, acc);\n    }\n  });\n\n  return acc;\n}\n\nexport function getTreeExpandedState(\n  data: TreeNodeData[],\n  expandedNodesValues: string[] | '*'\n): Record<string, boolean> {\n  const state = getInitialTreeExpandedState({}, data, []);\n\n  if (expandedNodesValues === '*') {\n    const result: Record<string, boolean> = {};\n    const keys = Object.keys(state);\n    for (let i = 0; i < keys.length; i++) {\n      result[keys[i]] = true;\n    }\n    return result;\n  }\n\n  expandedNodesValues.forEach((node) => {\n    state[node] = true;\n  });\n\n  return state;\n}\n\nfunction getInitialCheckedState(\n  initialState: string[],\n  data: TreeNodeData[],\n  checkStrictly: boolean\n) {\n  if (checkStrictly) {\n    return initialState;\n  }\n\n  const acc: string[] = [];\n\n  initialState.forEach((node) => acc.push(...getChildrenNodesValues(node, data)));\n\n  return Array.from(new Set(acc));\n}\n\nfunction getAllNodeValues(data: TreeNodeData[]): string[] {\n  const acc: string[] = [];\n  for (const node of data) {\n    acc.push(node.value);\n    if (Array.isArray(node.children) && node.children.length > 0) {\n      acc.push(...getAllNodeValues(node.children));\n    }\n  }\n  return acc;\n}\n\nexport interface UseTreeInput {\n  /** Initial expanded state of all nodes, uncontrolled state */\n  initialExpandedState?: TreeExpandedState;\n\n  /** Expanded state of all nodes, controlled state */\n  expandedState?: TreeExpandedState;\n\n  /** Called when the tree expanded state changes */\n  onExpandedStateChange?: (expandedState: TreeExpandedState) => void;\n\n  /** Initial selected state of nodes */\n  initialSelectedState?: string[];\n\n  /** Selected state of all nodes, controlled state */\n  selectedState?: string[];\n\n  /** Called when the tree selected state changes */\n  onSelectedStateChange?: (selectedState: string[]) => void;\n\n  /** Initial checked state of nodes */\n  initialCheckedState?: string[];\n\n  /** Checked state of all nodes, controlled state */\n  checkedState?: string[];\n\n  /** Called when the tree checked state changes */\n  onCheckedStateChange?: (checkedState: string[]) => void;\n\n  /** Determines whether multiple node can be selected at a time */\n  multiple?: boolean;\n\n  /** Called with the node value when it is expanded */\n  onNodeExpand?: (value: string) => void;\n\n  /** Called with the node value when it is collapsed */\n  onNodeCollapse?: (value: string) => void;\n\n  /** Called when a node with `hasChildren: true` is expanded for the first time.\n   * The callback should update the tree data with loaded children.\n   */\n  onLoadChildren?: (nodeValue: string) => Promise<void>;\n\n  /** When `true`, checking a parent does not affect children and vice versa.\n   * Each node's checked state is fully independent. @default false\n   */\n  checkStrictly?: boolean;\n}\n\nexport interface UseTreeReturnType {\n  /** When `true`, each node's checked state is independent (no parent-child cascading) */\n  checkStrictly: boolean;\n\n  /** Determines whether multiple node can be selected at a time */\n  multiple: boolean;\n\n  /** A record of `node.value` and boolean values that represent nodes expanded state */\n  expandedState: TreeExpandedState;\n\n  /** An array of selected nodes values */\n  selectedState: string[];\n\n  /** An array of checked nodes values */\n  checkedState: string[];\n\n  /** A value of the node that was last clicked\n   * Anchor node is used to determine range of selected nodes for multiple selection\n   */\n  anchorNode: string | null;\n\n  /** Initializes tree state based on provided data, called automatically by the Tree component */\n  initialize: (data: TreeNodeData[]) => void;\n\n  /** Toggles expanded state of the node with provided value */\n  toggleExpanded: (value: string) => void;\n\n  /** Collapses node with provided value */\n  collapse: (value: string) => void;\n\n  /** Expands node with provided value */\n  expand: (value: string) => void;\n\n  /** Expands all nodes */\n  expandAllNodes: () => void;\n\n  /** Collapses all nodes */\n  collapseAllNodes: () => void;\n\n  /** Sets expanded state */\n  setExpandedState: (value: TreeExpandedState) => void;\n\n  /** Toggles selected state of the node with provided value */\n  toggleSelected: (value: string) => void;\n\n  /** Selects node with provided value */\n  select: (value: string) => void;\n\n  /** Deselects node with provided value */\n  deselect: (value: string) => void;\n\n  /** Clears selected state */\n  clearSelected: () => void;\n\n  /** Sets selected state */\n  setSelectedState: (value: string[]) => void;\n\n  /** Checks node with provided value */\n  checkNode: (value: string) => void;\n\n  /** Unchecks node with provided value */\n  uncheckNode: (value: string) => void;\n\n  /** Checks all nodes */\n  checkAllNodes: () => void;\n\n  /** Unchecks all nodes */\n  uncheckAllNodes: () => void;\n\n  /** Sets checked state */\n  setCheckedState: (value: string[]) => void;\n\n  /** Returns all checked nodes with status */\n  getCheckedNodes: () => CheckedNodeStatus[];\n\n  /** Returns `true` if node with provided value is checked */\n  isNodeChecked: (value: string) => boolean;\n\n  /** Returns `true` if node with provided value is indeterminate */\n  isNodeIndeterminate: (value: string) => boolean;\n\n  /** Returns `true` if the node's children are currently being loaded */\n  isNodeLoading: (value: string) => boolean;\n\n  /** Returns the error from the last failed load attempt for the given node, or `null` */\n  getNodeLoadError: (value: string) => Error | null;\n\n  /** Programmatically triggers loading of a node's children */\n  loadNode: (value: string) => Promise<void>;\n\n  /** Clears the loaded cache for a node, causing it to re-fetch on next expand */\n  invalidateNode: (value: string) => void;\n}\n\nexport function useTree({\n  initialSelectedState = [],\n  expandedState,\n  initialCheckedState = [],\n  checkedState,\n  initialExpandedState = {},\n  selectedState,\n  multiple = false,\n  onNodeCollapse,\n  onNodeExpand,\n  onCheckedStateChange,\n  onSelectedStateChange,\n  onExpandedStateChange,\n  onLoadChildren,\n  checkStrictly = false,\n}: UseTreeInput = {}): UseTreeReturnType {\n  const [data, setData] = useState<TreeNodeData[]>([]);\n  const [_expandedState, setExpandedState] = useUncontrolled({\n    value: expandedState,\n    defaultValue: initialExpandedState,\n    finalValue: {},\n    onChange: onExpandedStateChange,\n  });\n\n  const [_selectedState, setSelectedState] = useUncontrolled({\n    value: selectedState,\n    defaultValue: initialSelectedState,\n    finalValue: [],\n    onChange: onSelectedStateChange,\n  });\n\n  const [_checkedState, setCheckedState] = useUncontrolled({\n    value: checkedState,\n    defaultValue: initialCheckedState,\n    finalValue: [],\n    onChange: onCheckedStateChange,\n  });\n\n  const [anchorNode, setAnchorNode] = useState<string | null>(null);\n\n  const loadingNodesRef = useRef(new Set<string>());\n  const loadedNodesRef = useRef(new Set<string>());\n  const [loadingNodes, setLoadingNodes] = useState<string[]>([]);\n  const [loadErrors, setLoadErrors] = useState<Record<string, Error>>({});\n\n  const initialize = useCallback(\n    (_data: TreeNodeData[]) => {\n      setExpandedState(getInitialTreeExpandedState(_expandedState, _data, _selectedState));\n      setCheckedState(getInitialCheckedState(_checkedState, _data, checkStrictly));\n      setData(_data);\n    },\n    [_selectedState, _checkedState, _expandedState, checkStrictly]\n  );\n\n  const loadNodeImpl = useCallback(\n    async (value: string) => {\n      if (!onLoadChildren) {\n        return;\n      }\n\n      if (loadingNodesRef.current.has(value) || loadedNodesRef.current.has(value)) {\n        return;\n      }\n\n      loadingNodesRef.current.add(value);\n      setLoadingNodes(Array.from(loadingNodesRef.current));\n      setLoadErrors((prev) => {\n        if (!(value in prev)) {\n          return prev;\n        }\n\n        const next = { ...prev };\n        delete next[value];\n        return next;\n      });\n\n      try {\n        await onLoadChildren(value);\n        loadedNodesRef.current.add(value);\n      } catch (error) {\n        const err = error instanceof Error ? error : new Error(String(error));\n        setLoadErrors((prev) => ({ ...prev, [value]: err }));\n      } finally {\n        loadingNodesRef.current.delete(value);\n        setLoadingNodes(Array.from(loadingNodesRef.current));\n      }\n    },\n    [onLoadChildren]\n  );\n\n  const tryLoadAsync = useCallback(\n    (value: string) => {\n      if (!onLoadChildren) {\n        return;\n      }\n\n      const node = findTreeNode(value, data);\n      if (node && node.hasChildren && !Array.isArray(node.children)) {\n        loadNodeImpl(value);\n      }\n    },\n    [onLoadChildren, data, loadNodeImpl]\n  );\n\n  const toggleExpanded = useCallback(\n    (value: string) => {\n      const nextState = { ..._expandedState, [value]: !_expandedState[value] };\n      nextState[value] ? onNodeExpand?.(value) : onNodeCollapse?.(value);\n      if (nextState[value]) {\n        tryLoadAsync(value);\n      }\n      setExpandedState(nextState);\n    },\n    [onNodeCollapse, onNodeExpand, _expandedState, tryLoadAsync]\n  );\n\n  const collapse = useCallback(\n    (value: string) => {\n      if (_expandedState[value] !== false) {\n        onNodeCollapse?.(value);\n      }\n\n      setExpandedState({ ..._expandedState, [value]: false });\n    },\n    [onNodeCollapse, _expandedState]\n  );\n\n  const expand = useCallback(\n    (value: string) => {\n      if (_expandedState[value] !== true) {\n        onNodeExpand?.(value);\n      }\n\n      tryLoadAsync(value);\n      setExpandedState({ ..._expandedState, [value]: true });\n    },\n    [onNodeExpand, _expandedState, tryLoadAsync]\n  );\n\n  const expandAllNodes = useCallback(() => {\n    const nextState = { ..._expandedState };\n    Object.keys(nextState).forEach((key) => {\n      nextState[key] = true;\n      tryLoadAsync(key);\n    });\n\n    setExpandedState(nextState);\n  }, [_expandedState, tryLoadAsync]);\n\n  const collapseAllNodes = useCallback(() => {\n    const nextState = { ..._expandedState };\n    Object.keys(nextState).forEach((key) => {\n      nextState[key] = false;\n    });\n\n    setExpandedState(nextState);\n  }, [_expandedState]);\n\n  const toggleSelected = useCallback(\n    (value: string) => {\n      if (!multiple) {\n        if (_selectedState.includes(value)) {\n          setAnchorNode(null);\n          return [];\n        }\n\n        setAnchorNode(value);\n        return [value];\n      }\n\n      if (_selectedState.includes(value)) {\n        setAnchorNode(null);\n        return _selectedState.filter((item) => item !== value);\n      }\n\n      setAnchorNode(value);\n      setSelectedState([..._selectedState, value]);\n    },\n    [_selectedState]\n  );\n\n  const select = useCallback(\n    (value: string) => {\n      setAnchorNode(value);\n      setSelectedState(\n        multiple\n          ? _selectedState.includes(value)\n            ? _selectedState\n            : [..._selectedState, value]\n          : [value]\n      );\n    },\n    [_selectedState]\n  );\n\n  const deselect = useCallback(\n    (value: string) => {\n      anchorNode === value && setAnchorNode(null);\n      setSelectedState(_selectedState.filter((item) => item !== value));\n    },\n    [_selectedState]\n  );\n\n  const clearSelected = useCallback(() => {\n    setSelectedState([]);\n    setAnchorNode(null);\n  }, []);\n\n  const checkNode = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        if (!_checkedState.includes(value)) {\n          setCheckedState([..._checkedState, value]);\n        }\n      } else {\n        const checkedNodes = getChildrenNodesValues(value, data);\n        setCheckedState(Array.from(new Set([..._checkedState, ...checkedNodes])));\n      }\n    },\n    [data, _checkedState, checkStrictly]\n  );\n\n  const uncheckNode = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        setCheckedState(_checkedState.filter((item) => item !== value));\n      } else {\n        const checkedNodes = getChildrenNodesValues(value, data);\n        setCheckedState(_checkedState.filter((item) => !checkedNodes.includes(item)));\n      }\n    },\n    [data, _checkedState, checkStrictly]\n  );\n\n  const checkAllNodes = useCallback(() => {\n    if (checkStrictly) {\n      setCheckedState(getAllNodeValues(data));\n    } else {\n      setCheckedState(getAllChildrenNodes(data));\n    }\n  }, [data, checkStrictly]);\n\n  const uncheckAllNodes = useCallback(() => {\n    setCheckedState([]);\n  }, []);\n\n  const getCheckedNodes = useCallback((): CheckedNodeStatus[] => {\n    if (checkStrictly) {\n      return _checkedState.map((value) => {\n        const node = findTreeNode(value, data);\n        return {\n          checked: true,\n          indeterminate: false,\n          value,\n          hasChildren: node\n            ? (Array.isArray(node.children) && node.children.length > 0) || !!node.hasChildren\n            : false,\n        };\n      });\n    }\n    return getAllCheckedNodes(data, _checkedState).result;\n  }, [checkStrictly, _checkedState, data]);\n\n  const isNodeChecked = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        return _checkedState.includes(value);\n      }\n      return memoizedIsNodeChecked(value, data, _checkedState);\n    },\n    [checkStrictly, _checkedState, data]\n  );\n\n  const isNodeIndeterminate = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        return false;\n      }\n      return memoizedIsNodeIndeterminate(value, data, _checkedState);\n    },\n    [checkStrictly, _checkedState, data]\n  );\n\n  const isNodeLoading = useCallback(\n    (value: string) => loadingNodes.includes(value),\n    [loadingNodes]\n  );\n\n  const getNodeLoadError = useCallback((value: string) => loadErrors[value] || null, [loadErrors]);\n\n  const invalidateNode = useCallback((value: string) => {\n    loadedNodesRef.current.delete(value);\n    setLoadErrors((prev) => {\n      if (!(value in prev)) {\n        return prev;\n      }\n\n      const next = { ...prev };\n      delete next[value];\n      return next;\n    });\n  }, []);\n\n  return useMemo(\n    () => ({\n      checkStrictly,\n      multiple,\n      expandedState: _expandedState,\n      selectedState: _selectedState,\n      checkedState: _checkedState,\n      anchorNode,\n      initialize,\n\n      toggleExpanded,\n      collapse,\n      expand,\n      expandAllNodes,\n      collapseAllNodes,\n      setExpandedState,\n\n      checkNode,\n      uncheckNode,\n      checkAllNodes,\n      uncheckAllNodes,\n      setCheckedState,\n\n      toggleSelected,\n      select,\n      deselect,\n      clearSelected,\n      setSelectedState,\n\n      getCheckedNodes,\n      isNodeChecked,\n      isNodeIndeterminate,\n\n      isNodeLoading,\n      getNodeLoadError,\n      loadNode: loadNodeImpl,\n      invalidateNode,\n    }),\n    [\n      checkStrictly,\n      multiple,\n      _expandedState,\n      _selectedState,\n      _checkedState,\n      anchorNode,\n      initialize,\n      toggleExpanded,\n      collapse,\n      expand,\n      expandAllNodes,\n      collapseAllNodes,\n      setExpandedState,\n      checkNode,\n      uncheckNode,\n      checkAllNodes,\n      uncheckAllNodes,\n      setCheckedState,\n      toggleSelected,\n      select,\n      deselect,\n      clearSelected,\n      setSelectedState,\n      getCheckedNodes,\n      isNodeChecked,\n      isNodeIndeterminate,\n      isNodeLoading,\n      getNodeLoadError,\n      loadNodeImpl,\n      invalidateNode,\n    ]\n  );\n}\n\nexport type TreeController = ReturnType<typeof useTree>;\n"],"mappings":"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"}
+{"version":3,"file":"use-tree.mjs","names":[],"sources":["../../../src/components/Tree/use-tree.ts"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport {\n  CheckedNodeStatus,\n  getAllCheckedNodes,\n} from './get-all-checked-nodes/get-all-checked-nodes';\nimport {\n  findTreeNode,\n  getAllChildrenNodes,\n  getChildrenNodesValues,\n} from './get-children-nodes-values/get-children-nodes-values';\nimport { memoizedIsNodeChecked } from './is-node-checked/is-node-checked';\nimport { memoizedIsNodeIndeterminate } from './is-node-indeterminate/is-node-indeterminate';\nimport type { TreeNodeData } from './Tree';\n\nexport type TreeExpandedState = Record<string, boolean>;\n\nfunction getInitialTreeExpandedState(\n  initialState: TreeExpandedState,\n  data: TreeNodeData[],\n  value: string | string[] | undefined,\n  acc: TreeExpandedState = {}\n) {\n  data.forEach((node) => {\n    acc[node.value] = node.value in initialState ? initialState[node.value] : node.value === value;\n\n    if (Array.isArray(node.children)) {\n      getInitialTreeExpandedState(initialState, node.children, value, acc);\n    }\n  });\n\n  return acc;\n}\n\nexport function getTreeExpandedState(\n  data: TreeNodeData[],\n  expandedNodesValues: string[] | '*'\n): Record<string, boolean> {\n  const state = getInitialTreeExpandedState({}, data, []);\n\n  if (expandedNodesValues === '*') {\n    const result: Record<string, boolean> = {};\n    const keys = Object.keys(state);\n    for (let i = 0; i < keys.length; i++) {\n      result[keys[i]] = true;\n    }\n    return result;\n  }\n\n  expandedNodesValues.forEach((node) => {\n    state[node] = true;\n  });\n\n  return state;\n}\n\nfunction getInitialCheckedState(\n  initialState: string[],\n  data: TreeNodeData[],\n  checkStrictly: boolean\n) {\n  if (checkStrictly) {\n    return initialState;\n  }\n\n  const acc: string[] = [];\n\n  initialState.forEach((node) => acc.push(...getChildrenNodesValues(node, data)));\n\n  return Array.from(new Set(acc));\n}\n\nfunction getAllNodeValues(data: TreeNodeData[]): string[] {\n  const acc: string[] = [];\n  for (const node of data) {\n    acc.push(node.value);\n    if (Array.isArray(node.children) && node.children.length > 0) {\n      acc.push(...getAllNodeValues(node.children));\n    }\n  }\n  return acc;\n}\n\nexport interface UseTreeInput {\n  /** Initial expanded state of all nodes, uncontrolled state */\n  initialExpandedState?: TreeExpandedState;\n\n  /** Expanded state of all nodes, controlled state */\n  expandedState?: TreeExpandedState;\n\n  /** Called when the tree expanded state changes */\n  onExpandedStateChange?: (expandedState: TreeExpandedState) => void;\n\n  /** Initial selected state of nodes */\n  initialSelectedState?: string[];\n\n  /** Selected state of all nodes, controlled state */\n  selectedState?: string[];\n\n  /** Called when the tree selected state changes */\n  onSelectedStateChange?: (selectedState: string[]) => void;\n\n  /** Initial checked state of nodes */\n  initialCheckedState?: string[];\n\n  /** Checked state of all nodes, controlled state */\n  checkedState?: string[];\n\n  /** Called when the tree checked state changes */\n  onCheckedStateChange?: (checkedState: string[]) => void;\n\n  /** Determines whether multiple node can be selected at a time */\n  multiple?: boolean;\n\n  /** Called with the node value when it is expanded */\n  onNodeExpand?: (value: string) => void;\n\n  /** Called with the node value when it is collapsed */\n  onNodeCollapse?: (value: string) => void;\n\n  /** Called when a node with `hasChildren: true` is expanded for the first time.\n   * The callback should update the tree data with loaded children.\n   */\n  onLoadChildren?: (nodeValue: string) => Promise<void>;\n\n  /** When `true`, checking a parent does not affect children and vice versa.\n   * Each node's checked state is fully independent. @default false\n   */\n  checkStrictly?: boolean;\n}\n\nexport interface UseTreeReturnType {\n  /** When `true`, each node's checked state is independent (no parent-child cascading) */\n  checkStrictly: boolean;\n\n  /** Determines whether multiple node can be selected at a time */\n  multiple: boolean;\n\n  /** A record of `node.value` and boolean values that represent nodes expanded state */\n  expandedState: TreeExpandedState;\n\n  /** An array of selected nodes values */\n  selectedState: string[];\n\n  /** An array of checked nodes values */\n  checkedState: string[];\n\n  /** A value of the node that was last clicked\n   * Anchor node is used to determine range of selected nodes for multiple selection\n   */\n  anchorNode: string | null;\n\n  /** Initializes tree state based on provided data, called automatically by the Tree component */\n  initialize: (data: TreeNodeData[]) => void;\n\n  /** Toggles expanded state of the node with provided value */\n  toggleExpanded: (value: string) => void;\n\n  /** Collapses node with provided value */\n  collapse: (value: string) => void;\n\n  /** Expands node with provided value */\n  expand: (value: string) => void;\n\n  /** Expands all nodes */\n  expandAllNodes: () => void;\n\n  /** Collapses all nodes */\n  collapseAllNodes: () => void;\n\n  /** Sets expanded state */\n  setExpandedState: (value: TreeExpandedState) => void;\n\n  /** Toggles selected state of the node with provided value */\n  toggleSelected: (value: string) => void;\n\n  /** Selects node with provided value */\n  select: (value: string) => void;\n\n  /** Deselects node with provided value */\n  deselect: (value: string) => void;\n\n  /** Clears selected state */\n  clearSelected: () => void;\n\n  /** Sets selected state */\n  setSelectedState: (value: string[]) => void;\n\n  /** Checks node with provided value */\n  checkNode: (value: string) => void;\n\n  /** Unchecks node with provided value */\n  uncheckNode: (value: string) => void;\n\n  /** Checks all nodes */\n  checkAllNodes: () => void;\n\n  /** Unchecks all nodes */\n  uncheckAllNodes: () => void;\n\n  /** Sets checked state */\n  setCheckedState: (value: string[]) => void;\n\n  /** Returns all checked nodes with status */\n  getCheckedNodes: () => CheckedNodeStatus[];\n\n  /** Returns `true` if node with provided value is checked */\n  isNodeChecked: (value: string) => boolean;\n\n  /** Returns `true` if node with provided value is indeterminate */\n  isNodeIndeterminate: (value: string) => boolean;\n\n  /** Returns `true` if the node's children are currently being loaded */\n  isNodeLoading: (value: string) => boolean;\n\n  /** Returns the error from the last failed load attempt for the given node, or `null` */\n  getNodeLoadError: (value: string) => Error | null;\n\n  /** Programmatically triggers loading of a node's children */\n  loadNode: (value: string) => Promise<void>;\n\n  /** Clears the loaded cache for a node, causing it to re-fetch on next expand */\n  invalidateNode: (value: string) => void;\n}\n\nexport function useTree({\n  initialSelectedState = [],\n  expandedState,\n  initialCheckedState = [],\n  checkedState,\n  initialExpandedState = {},\n  selectedState,\n  multiple = false,\n  onNodeCollapse,\n  onNodeExpand,\n  onCheckedStateChange,\n  onSelectedStateChange,\n  onExpandedStateChange,\n  onLoadChildren,\n  checkStrictly = false,\n}: UseTreeInput = {}): UseTreeReturnType {\n  const [data, setData] = useState<TreeNodeData[]>([]);\n  const [_expandedState, setExpandedState] = useUncontrolled({\n    value: expandedState,\n    defaultValue: initialExpandedState,\n    finalValue: {},\n    onChange: onExpandedStateChange,\n  });\n\n  const [_selectedState, setSelectedState] = useUncontrolled({\n    value: selectedState,\n    defaultValue: initialSelectedState,\n    finalValue: [],\n    onChange: onSelectedStateChange,\n  });\n\n  const [_checkedState, setCheckedState] = useUncontrolled({\n    value: checkedState,\n    defaultValue: initialCheckedState,\n    finalValue: [],\n    onChange: onCheckedStateChange,\n  });\n\n  const [anchorNode, setAnchorNode] = useState<string | null>(null);\n\n  const loadingNodesRef = useRef(new Set<string>());\n  const loadedNodesRef = useRef(new Set<string>());\n  const [loadingNodes, setLoadingNodes] = useState<string[]>([]);\n  const [loadErrors, setLoadErrors] = useState<Record<string, Error>>({});\n\n  const initialize = useCallback(\n    (_data: TreeNodeData[]) => {\n      setExpandedState(getInitialTreeExpandedState(_expandedState, _data, _selectedState));\n      setCheckedState(getInitialCheckedState(_checkedState, _data, checkStrictly));\n      setData(_data);\n    },\n    [_selectedState, _checkedState, _expandedState, checkStrictly]\n  );\n\n  const loadNodeImpl = useCallback(\n    async (value: string) => {\n      if (!onLoadChildren) {\n        return;\n      }\n\n      if (loadingNodesRef.current.has(value) || loadedNodesRef.current.has(value)) {\n        return;\n      }\n\n      loadingNodesRef.current.add(value);\n      setLoadingNodes(Array.from(loadingNodesRef.current));\n      setLoadErrors((prev) => {\n        if (!(value in prev)) {\n          return prev;\n        }\n\n        const next = { ...prev };\n        delete next[value];\n        return next;\n      });\n\n      try {\n        await onLoadChildren(value);\n        loadedNodesRef.current.add(value);\n      } catch (error) {\n        const err = error instanceof Error ? error : new Error(String(error));\n        setLoadErrors((prev) => ({ ...prev, [value]: err }));\n      } finally {\n        loadingNodesRef.current.delete(value);\n        setLoadingNodes(Array.from(loadingNodesRef.current));\n      }\n    },\n    [onLoadChildren]\n  );\n\n  const tryLoadAsync = useCallback(\n    (value: string) => {\n      if (!onLoadChildren) {\n        return;\n      }\n\n      const node = findTreeNode(value, data);\n      if (node && node.hasChildren && !Array.isArray(node.children)) {\n        loadNodeImpl(value);\n      }\n    },\n    [onLoadChildren, data, loadNodeImpl]\n  );\n\n  const toggleExpanded = useCallback(\n    (value: string) => {\n      const nextState = { ..._expandedState, [value]: !_expandedState[value] };\n      nextState[value] ? onNodeExpand?.(value) : onNodeCollapse?.(value);\n      if (nextState[value]) {\n        tryLoadAsync(value);\n      }\n      setExpandedState(nextState);\n    },\n    [onNodeCollapse, onNodeExpand, _expandedState, tryLoadAsync]\n  );\n\n  const collapse = useCallback(\n    (value: string) => {\n      if (_expandedState[value] !== false) {\n        onNodeCollapse?.(value);\n      }\n\n      setExpandedState({ ..._expandedState, [value]: false });\n    },\n    [onNodeCollapse, _expandedState]\n  );\n\n  const expand = useCallback(\n    (value: string) => {\n      if (_expandedState[value] !== true) {\n        onNodeExpand?.(value);\n      }\n\n      tryLoadAsync(value);\n      setExpandedState({ ..._expandedState, [value]: true });\n    },\n    [onNodeExpand, _expandedState, tryLoadAsync]\n  );\n\n  const expandAllNodes = useCallback(() => {\n    const nextState = { ..._expandedState };\n    Object.keys(nextState).forEach((key) => {\n      nextState[key] = true;\n      tryLoadAsync(key);\n    });\n\n    setExpandedState(nextState);\n  }, [_expandedState, tryLoadAsync]);\n\n  const collapseAllNodes = useCallback(() => {\n    const nextState = { ..._expandedState };\n    Object.keys(nextState).forEach((key) => {\n      nextState[key] = false;\n    });\n\n    setExpandedState(nextState);\n  }, [_expandedState]);\n\n  const toggleSelected = useCallback(\n    (value: string) => {\n      if (!multiple) {\n        if (_selectedState.includes(value)) {\n          setAnchorNode(null);\n          return [];\n        }\n\n        setAnchorNode(value);\n        return [value];\n      }\n\n      if (_selectedState.includes(value)) {\n        setAnchorNode(null);\n        return _selectedState.filter((item) => item !== value);\n      }\n\n      setAnchorNode(value);\n      setSelectedState([..._selectedState, value]);\n    },\n    [_selectedState]\n  );\n\n  const select = useCallback(\n    (value: string) => {\n      setAnchorNode(value);\n      setSelectedState(\n        multiple\n          ? _selectedState.includes(value)\n            ? _selectedState\n            : [..._selectedState, value]\n          : [value]\n      );\n    },\n    [_selectedState]\n  );\n\n  const deselect = useCallback(\n    (value: string) => {\n      anchorNode === value && setAnchorNode(null);\n      setSelectedState(_selectedState.filter((item) => item !== value));\n    },\n    [_selectedState]\n  );\n\n  const clearSelected = useCallback(() => {\n    setSelectedState([]);\n    setAnchorNode(null);\n  }, []);\n\n  const checkNode = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        if (!_checkedState.includes(value)) {\n          setCheckedState([..._checkedState, value]);\n        }\n      } else {\n        const checkedNodes = getChildrenNodesValues(value, data);\n        setCheckedState(Array.from(new Set([..._checkedState, ...checkedNodes])));\n      }\n    },\n    [data, _checkedState, checkStrictly]\n  );\n\n  const uncheckNode = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        setCheckedState(_checkedState.filter((item) => item !== value));\n      } else {\n        const checkedNodes = getChildrenNodesValues(value, data);\n        setCheckedState(_checkedState.filter((item) => !checkedNodes.includes(item)));\n      }\n    },\n    [data, _checkedState, checkStrictly]\n  );\n\n  const checkAllNodes = useCallback(() => {\n    if (checkStrictly) {\n      setCheckedState(getAllNodeValues(data));\n    } else {\n      setCheckedState(getAllChildrenNodes(data));\n    }\n  }, [data, checkStrictly]);\n\n  const uncheckAllNodes = useCallback(() => {\n    setCheckedState([]);\n  }, []);\n\n  const getCheckedNodes = useCallback((): CheckedNodeStatus[] => {\n    if (checkStrictly) {\n      return _checkedState.map((value) => {\n        const node = findTreeNode(value, data);\n        return {\n          checked: true,\n          indeterminate: false,\n          value,\n          hasChildren: node\n            ? (Array.isArray(node.children) && node.children.length > 0) || !!node.hasChildren\n            : false,\n        };\n      });\n    }\n    return getAllCheckedNodes(data, _checkedState).result;\n  }, [checkStrictly, _checkedState, data]);\n\n  const isNodeChecked = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        return _checkedState.includes(value);\n      }\n      return memoizedIsNodeChecked(value, data, _checkedState);\n    },\n    [checkStrictly, _checkedState, data]\n  );\n\n  const isNodeIndeterminate = useCallback(\n    (value: string) => {\n      if (checkStrictly) {\n        return false;\n      }\n      return memoizedIsNodeIndeterminate(value, data, _checkedState);\n    },\n    [checkStrictly, _checkedState, data]\n  );\n\n  const isNodeLoading = useCallback(\n    (value: string) => loadingNodes.includes(value),\n    [loadingNodes]\n  );\n\n  const getNodeLoadError = useCallback((value: string) => loadErrors[value] || null, [loadErrors]);\n\n  const invalidateNode = useCallback((value: string) => {\n    loadedNodesRef.current.delete(value);\n    setLoadErrors((prev) => {\n      if (!(value in prev)) {\n        return prev;\n      }\n\n      const next = { ...prev };\n      delete next[value];\n      return next;\n    });\n  }, []);\n\n  return useMemo(\n    () => ({\n      checkStrictly,\n      multiple,\n      expandedState: _expandedState,\n      selectedState: _selectedState,\n      checkedState: _checkedState,\n      anchorNode,\n      initialize,\n\n      toggleExpanded,\n      collapse,\n      expand,\n      expandAllNodes,\n      collapseAllNodes,\n      setExpandedState,\n\n      checkNode,\n      uncheckNode,\n      checkAllNodes,\n      uncheckAllNodes,\n      setCheckedState,\n\n      toggleSelected,\n      select,\n      deselect,\n      clearSelected,\n      setSelectedState,\n\n      getCheckedNodes,\n      isNodeChecked,\n      isNodeIndeterminate,\n\n      isNodeLoading,\n      getNodeLoadError,\n      loadNode: loadNodeImpl,\n      invalidateNode,\n    }),\n    [\n      checkStrictly,\n      multiple,\n      _expandedState,\n      _selectedState,\n      _checkedState,\n      anchorNode,\n      initialize,\n      toggleExpanded,\n      collapse,\n      expand,\n      expandAllNodes,\n      collapseAllNodes,\n      setExpandedState,\n      checkNode,\n      uncheckNode,\n      checkAllNodes,\n      uncheckAllNodes,\n      setCheckedState,\n      toggleSelected,\n      select,\n      deselect,\n      clearSelected,\n      setSelectedState,\n      getCheckedNodes,\n      isNodeChecked,\n      isNodeIndeterminate,\n      isNodeLoading,\n      getNodeLoadError,\n      loadNodeImpl,\n      invalidateNode,\n    ]\n  );\n}\n\nexport type TreeController = ReturnType<typeof useTree>;\n"],"mappings":"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"}

package/esm/components/TreeSelect/TreeSelect.mjs

@@ -228,7 +228,7 @@ const TreeSelect = genericFactory((_props) => {
 			else {
 				const childLeaves = getChildrenNodesValues(val, data);
 				if (nodeChecked) newInternalChecked = internalChecked.filter((v) => !childLeaves.includes(v));
-				else newInternalChecked = [...new Set([...internalChecked, ...childLeaves])];
+				else newInternalChecked = [.../* @__PURE__ */ new Set([...internalChecked, ...childLeaves])];
 			}
 			const newValue = checkedToValue(newInternalChecked, data, checkedStrategy);
 			if (!nodeChecked && newValue.length > (maxValues ?? Infinity)) return;
@@ -337,7 +337,8 @@ const TreeSelect = genericFactory((_props) => {
 		onRemove: () => {
 			if (isCheckbox) {
 				const childLeaves = checkStrictly ? [item] : getChildrenNodesValues(item, data);
-				setValue(checkedToValue(internalChecked.filter((v) => !childLeaves.includes(v)), data, checkedStrategy));
+				const newInternal = internalChecked.filter((v) => !childLeaves.includes(v));
+				setValue(checkedToValue(newInternal, data, checkedStrategy));
 			} else setValue(_value.filter((v) => v !== item));
 			onRemove?.(item);
 		},