@mantine/core 9.4.3-alpha.0 → 9.5.1-alpha.0

package/cjs/components/Slider/RangeSlider/RangeSlider.cjs

@@ -139,13 +139,16 @@ const RangeSlider = require_factory.factory((_props) => {
 		if (triggerChangeEnd) onChangeEnd?.(valueRef.current);
 	};
 	const handleChange = (val) => {
-		if (!disabled && thumbIndex.current !== void 0) setRangedValue(require_get_change_value.getChangeValue({
-			value: val,
-			min: domainMin,
-			max: domainMax,
-			step,
-			precision
-		}), thumbIndex.current, false);
+		if (!disabled && thumbIndex.current !== void 0) {
+			const nextValue = require_get_change_value.getChangeValue({
+				value: val,
+				min: domainMin,
+				max: domainMax,
+				step,
+				precision
+			});
+			setRangedValue(nextValue, thumbIndex.current, false);
+		}
 	};
 	const { ref: useMoveRef, active } = (0, _mantine_hooks.useMove)(({ x, y }) => handleChange(orientation === "vertical" ? 1 - y : x), { onScrubEnd: () => !disabled && onChangeEnd?.(valueRef.current) }, dir);
 	function handleThumbMouseDown(index) {
@@ -186,28 +189,32 @@ const RangeSlider = require_factory.factory((_props) => {
 				event.preventDefault();
 				const focusedIndex = getFocusedThumbIndex();
 				thumbs.current[focusedIndex].focus();
-				setRangedValue(require_get_floating_value.getFloatingValue(restrictToMarks && marks ? require_get_step_mark_value.getNextMarkValue(valueRef.current[focusedIndex], marks) : Math.min(Math.max(valueRef.current[focusedIndex] + step, domainMin), domainMax), precision), focusedIndex, true);
+				const nextValue = restrictToMarks && marks ? require_get_step_mark_value.getNextMarkValue(valueRef.current[focusedIndex], marks) : Math.min(Math.max(valueRef.current[focusedIndex] + step, domainMin), domainMax);
+				setRangedValue(require_get_floating_value.getFloatingValue(nextValue, precision), focusedIndex, true);
 				break;
 			}
 			case "ArrowRight": {
 				event.preventDefault();
 				const focusedIndex = getFocusedThumbIndex();
 				thumbs.current[focusedIndex].focus();
-				setRangedValue(require_get_floating_value.getFloatingValue(restrictToMarks && marks ? (dir === "rtl" ? require_get_step_mark_value.getPreviousMarkValue : require_get_step_mark_value.getNextMarkValue)(valueRef.current[focusedIndex], marks) : Math.min(Math.max(dir === "rtl" ? valueRef.current[focusedIndex] - step : valueRef.current[focusedIndex] + step, domainMin), domainMax), precision), focusedIndex, true);
+				const nextValue = restrictToMarks && marks ? (dir === "rtl" ? require_get_step_mark_value.getPreviousMarkValue : require_get_step_mark_value.getNextMarkValue)(valueRef.current[focusedIndex], marks) : Math.min(Math.max(dir === "rtl" ? valueRef.current[focusedIndex] - step : valueRef.current[focusedIndex] + step, domainMin), domainMax);
+				setRangedValue(require_get_floating_value.getFloatingValue(nextValue, precision), focusedIndex, true);
 				break;
 			}
 			case "ArrowDown": {
 				event.preventDefault();
 				const focusedIndex = getFocusedThumbIndex();
 				thumbs.current[focusedIndex].focus();
-				setRangedValue(require_get_floating_value.getFloatingValue(restrictToMarks && marks ? require_get_step_mark_value.getPreviousMarkValue(valueRef.current[focusedIndex], marks) : Math.min(Math.max(valueRef.current[focusedIndex] - step, domainMin), domainMax), precision), focusedIndex, true);
+				const nextValue = restrictToMarks && marks ? require_get_step_mark_value.getPreviousMarkValue(valueRef.current[focusedIndex], marks) : Math.min(Math.max(valueRef.current[focusedIndex] - step, domainMin), domainMax);
+				setRangedValue(require_get_floating_value.getFloatingValue(nextValue, precision), focusedIndex, true);
 				break;
 			}
 			case "ArrowLeft": {
 				event.preventDefault();
 				const focusedIndex = getFocusedThumbIndex();
 				thumbs.current[focusedIndex].focus();
-				setRangedValue(require_get_floating_value.getFloatingValue(restrictToMarks && marks ? (dir === "rtl" ? require_get_step_mark_value.getNextMarkValue : require_get_step_mark_value.getPreviousMarkValue)(valueRef.current[focusedIndex], marks) : Math.min(Math.max(dir === "rtl" ? valueRef.current[focusedIndex] + step : valueRef.current[focusedIndex] - step, domainMin), domainMax), precision), focusedIndex, true);
+				const nextValue = restrictToMarks && marks ? (dir === "rtl" ? require_get_step_mark_value.getNextMarkValue : require_get_step_mark_value.getPreviousMarkValue)(valueRef.current[focusedIndex], marks) : Math.min(Math.max(dir === "rtl" ? valueRef.current[focusedIndex] + step : valueRef.current[focusedIndex] - step, domainMin), domainMax);
+				setRangedValue(require_get_floating_value.getFloatingValue(nextValue, precision), focusedIndex, true);
 				break;
 			}
 			default: break;

package/cjs/components/Slider/RangeSlider/RangeSlider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.cjs","names":["createVarsResolver","getSize","getThemeColor","getRadius","rem","factory","useProps","useStyles","useDirection","getPosition","getPrecision","findClosestNumber","getLastMarkValue","getFirstMarkValue","getPreviousMarkValue","getNextMarkValue","getFloatingValue","getChangeValue","getClientPosition","SliderProvider","SliderRoot","Track","Thumb","classes"],"sources":["../../../../src/components/Slider/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getClientPosition } from '../utils/get-client-position/get-client-position';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n  getFirstMarkValue,\n  getLastMarkValue,\n  getNextMarkValue,\n  getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport type RangeSliderValue = [number, number];\n\nexport interface RangeSliderProps\n  extends\n    BoxProps,\n    StylesApiProps<RangeSliderFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @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  /** Controls size of the track @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Minimal possible value @default 0 */\n  min?: number;\n\n  /** Maximum possible value @default 100 */\n  max?: number;\n\n  /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n  domain?: [number, number];\n\n  /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n  step?: number;\n\n  /** Number of significant digits after the decimal point */\n  precision?: number;\n\n  /** Controlled component value */\n  value?: RangeSliderValue;\n\n  /** Uncontrolled component default value */\n  defaultValue?: RangeSliderValue;\n\n  /** Called when value changes */\n  onChange?: (value: RangeSliderValue) => void;\n\n  /** Called when user stops dragging slider or changes value with arrows */\n  onChangeEnd?: (value: RangeSliderValue) => void;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n\n  /** Marks displayed on the track */\n  marks?: SliderMark[];\n\n  /** Function to generate label or any react node to render instead, set to null to disable label */\n  label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n  labelTransitionProps?: TransitionOverride;\n\n  /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n  labelAlwaysOn?: boolean;\n\n  /** Determines whether the label should be displayed when the slider is hovered @default true */\n  showLabelOnHover?: boolean;\n\n  /** Content rendered inside thumb */\n  thumbChildren?: React.ReactNode;\n\n  /** Disables slider */\n  disabled?: boolean;\n\n  /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n  thumbSize?: number | string;\n\n  /** A transformation function to change the scale of the slider */\n  scale?: (value: number) => number;\n\n  /** Determines whether track values representation should be inverted @default false */\n  inverted?: boolean;\n\n  /** Slider orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Minimal range interval between the two thumbs. Consider this value relative to the total range (max - min). @default 10 */\n  minRange?: number;\n\n  /** Maximum range interval @default Infinity */\n  maxRange?: number;\n\n  /** `aria-label` for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided) */\n  thumbLabel?: string;\n\n  /** `aria-valuetext` for both thumbs. When a function is provided, it receives the scaled value. */\n  thumbValueText?: string | ((value: number) => string);\n\n  /** First thumb `aria-label` */\n  thumbFromLabel?: string;\n\n  /** Second thumb `aria-label` */\n  thumbToLabel?: string;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Determines whether the selection should be only allowed from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to thumb element based on the thumb index */\n  thumbProps?: (index: 0 | 1) => React.ComponentProps<'div'>;\n\n  /** Determines whether the other thumb should be pushed by the current thumb dragging when `minRange`/`maxRange` is reached @default true */\n  pushOnOverlap?: boolean;\n}\n\nexport type RangeSliderFactory = Factory<{\n  props: RangeSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: SliderStylesNames;\n  vars: SliderCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<RangeSliderFactory>(\n  (theme, { size, color, thumbSize, radius }) => ({\n    root: {\n      '--slider-size': getSize(size, 'slider-size'),\n      '--slider-color': color ? getThemeColor(color, theme) : undefined,\n      '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n      '--slider-thumb-size':\n        thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n    },\n  })\n);\n\nconst defaultProps = {\n  min: 0,\n  max: 100,\n  minRange: 10,\n  step: 1,\n  marks: [],\n  label: (f) => f,\n  labelTransitionProps: { transition: 'fade', duration: 0 },\n  labelAlwaysOn: false,\n  showLabelOnHover: true,\n  disabled: false,\n  pushOnOverlap: true,\n  scale: (v) => v,\n  size: 'md',\n  maxRange: Infinity,\n} satisfies Partial<RangeSliderProps>;\n\nexport const RangeSlider = factory<RangeSliderFactory>((_props) => {\n  const props = useProps('RangeSlider', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    value,\n    onChange,\n    onChangeEnd,\n    size,\n    min,\n    max,\n    domain,\n    minRange,\n    maxRange,\n    step,\n    precision: _precision,\n    defaultValue,\n    name,\n    marks,\n    label,\n    labelTransitionProps,\n    labelAlwaysOn,\n    thumbFromLabel,\n    thumbToLabel,\n    thumbValueText,\n    showLabelOnHover,\n    thumbChildren,\n    disabled,\n    unstyled,\n    scale,\n    inverted,\n    orientation,\n    className,\n    style,\n    vars,\n    hiddenInputProps,\n    restrictToMarks,\n    thumbProps,\n    pushOnOverlap,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RangeSliderFactory>({\n    name: 'RangeSlider',\n    props,\n    classes,\n    classNames,\n    className,\n    styles,\n    style,\n    attributes,\n    vars,\n    varsResolver,\n    unstyled,\n  });\n\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const { dir } = useDirection();\n  const [focused, setFocused] = useState(-1);\n  const [hovered, setHovered] = useState(false);\n  const [_value, setValue] = useUncontrolled<RangeSliderValue>({\n    value,\n    defaultValue,\n    finalValue: [min, max],\n    onChange,\n  });\n  const valueRef = useRef(_value);\n  const thumbs = useRef<HTMLDivElement[]>([]);\n  const root = useRef<HTMLDivElement>(null);\n  const thumbIndex = useRef<number | undefined>(undefined);\n  const [domainMin, domainMax] = domain || [min!, max!];\n  const positions = [\n    getPosition({ value: _value[0], min: domainMin, max: domainMax }),\n    getPosition({ value: _value[1], min: domainMin, max: domainMax }),\n  ];\n\n  const precision = _precision ?? getPrecision(step);\n\n  const _setValue = (val: RangeSliderValue) => {\n    setValue(val);\n    valueRef.current = val;\n  };\n\n  useEffect(\n    () => {\n      if (Array.isArray(value)) {\n        valueRef.current = value;\n      }\n    },\n    Array.isArray(value) ? [value[0], value[1]] : [null, null]\n  );\n\n  const setRangedValue = (val: number, index: number, triggerChangeEnd: boolean) => {\n    if (index === -1) {\n      return;\n    }\n\n    const clone: RangeSliderValue = [...valueRef.current];\n\n    if (restrictToMarks && marks) {\n      const closest = findClosestNumber(\n        val,\n        marks.map((m) => m.value)\n      );\n\n      const current = clone[index];\n      clone[index] = closest;\n      const otherIndex = index === 0 ? 1 : 0;\n\n      const lastMarkValue = getLastMarkValue(marks);\n      const firstMarkValue = getFirstMarkValue(marks);\n\n      if (closest === lastMarkValue && clone[otherIndex] === lastMarkValue) {\n        clone[index] = current;\n      } else if (closest === firstMarkValue && clone[otherIndex] === firstMarkValue) {\n        clone[index] = current;\n      } else if (closest === clone[otherIndex]) {\n        if (current > clone[otherIndex]) {\n          clone[otherIndex] = getPreviousMarkValue(closest, marks);\n        } else {\n          clone[otherIndex] = getNextMarkValue(closest, marks);\n        }\n      }\n    } else {\n      const clampedVal = clamp(val, min!, max!);\n      clone[index] = clampedVal;\n\n      if (index === 0) {\n        if (clampedVal > clone[1] - (minRange - 0.000000001)) {\n          if (pushOnOverlap) {\n            clone[1] = Math.min(val + minRange, max);\n          } else {\n            clone[index] = valueRef.current[index];\n          }\n        }\n\n        if (clampedVal > (max - (minRange - 0.000000001) || min)) {\n          clone[index] = valueRef.current[index];\n        }\n\n        if (clone[1] - val > maxRange) {\n          if (pushOnOverlap) {\n            clone[1] = val + maxRange;\n          } else {\n            clone[index] = valueRef.current[index];\n          }\n        }\n      }\n\n      if (index === 1) {\n        if (clampedVal < clone[0] + minRange) {\n          if (pushOnOverlap) {\n            clone[0] = Math.max(val - minRange, min);\n          } else {\n            clone[index] = valueRef.current[index];\n          }\n        }\n\n        if (clampedVal < clone[0] + minRange) {\n          clone[index] = valueRef.current[index];\n        }\n\n        if (clampedVal - clone[0] > maxRange) {\n          if (pushOnOverlap) {\n            clone[0] = val - maxRange;\n          } else {\n            clone[index] = valueRef.current[index];\n          }\n        }\n      }\n    }\n\n    clone[0] = getFloatingValue(clone[0], precision);\n    clone[1] = getFloatingValue(clone[1], precision);\n\n    if (clone[0] > clone[1]) {\n      const temp = clone[0];\n      clone[0] = clone[1];\n      clone[1] = temp;\n    }\n\n    _setValue(clone);\n\n    if (triggerChangeEnd) {\n      onChangeEnd?.(valueRef.current);\n    }\n  };\n\n  const handleChange = (val: number) => {\n    if (!disabled && thumbIndex.current !== undefined) {\n      const nextValue = getChangeValue({\n        value: val,\n        min: domainMin,\n        max: domainMax,\n        step,\n        precision,\n      });\n      setRangedValue(nextValue, thumbIndex.current, false);\n    }\n  };\n\n  const { ref: useMoveRef, active } = useMove(\n    ({ x, y }) => handleChange(orientation === 'vertical' ? 1 - y : x),\n    { onScrubEnd: () => !disabled && onChangeEnd?.(valueRef.current) },\n    dir\n  );\n\n  function handleThumbMouseDown(index: number) {\n    thumbIndex.current = index;\n  }\n\n  const handleTrackMouseDownCapture = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n  ) => {\n    if (containerRef.current) {\n      containerRef.current.focus();\n      const rect = containerRef.current.getBoundingClientRect();\n      const changePosition = getClientPosition(event.nativeEvent, orientation);\n\n      const changeValue =\n        orientation === 'vertical'\n          ? getChangeValue({\n              value: rect.bottom - changePosition,\n              max,\n              min,\n              step,\n              containerWidth: rect.height,\n            })\n          : getChangeValue({\n              value: changePosition - rect.left,\n              max,\n              min,\n              step,\n              containerWidth: rect.width,\n            });\n\n      const nearestHandle =\n        Math.abs(_value[0] - changeValue) > Math.abs(_value[1] - changeValue) ? 1 : 0;\n      const _nearestHandle =\n        orientation === 'vertical'\n          ? nearestHandle\n          : dir === 'ltr'\n            ? nearestHandle\n            : nearestHandle === 1\n              ? 0\n              : 1;\n\n      thumbIndex.current = _nearestHandle;\n    }\n  };\n\n  const getFocusedThumbIndex = () => {\n    if (focused !== 1 && focused !== 0) {\n      setFocused(0);\n      return 0;\n    }\n\n    return focused;\n  };\n\n  const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disabled) {\n      switch (event.key) {\n        case 'ArrowUp': {\n          event.preventDefault();\n          const focusedIndex = getFocusedThumbIndex();\n          thumbs.current[focusedIndex].focus();\n          const nextValue =\n            restrictToMarks && marks\n              ? getNextMarkValue(valueRef.current[focusedIndex], marks)\n              : Math.min(Math.max(valueRef.current[focusedIndex] + step, domainMin), domainMax);\n          setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n          break;\n        }\n\n        case 'ArrowRight': {\n          event.preventDefault();\n          const focusedIndex = getFocusedThumbIndex();\n          thumbs.current[focusedIndex].focus();\n\n          const nextValue =\n            restrictToMarks && marks\n              ? (dir === 'rtl' ? getPreviousMarkValue : getNextMarkValue)(\n                  valueRef.current[focusedIndex],\n                  marks\n                )\n              : Math.min(\n                  Math.max(\n                    dir === 'rtl'\n                      ? valueRef.current[focusedIndex] - step\n                      : valueRef.current[focusedIndex] + step,\n                    domainMin\n                  ),\n                  domainMax\n                );\n\n          setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n          break;\n        }\n\n        case 'ArrowDown': {\n          event.preventDefault();\n          const focusedIndex = getFocusedThumbIndex();\n          thumbs.current[focusedIndex].focus();\n          const nextValue =\n            restrictToMarks && marks\n              ? getPreviousMarkValue(valueRef.current[focusedIndex], marks)\n              : Math.min(Math.max(valueRef.current[focusedIndex] - step, domainMin), domainMax);\n          setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n          break;\n        }\n\n        case 'ArrowLeft': {\n          event.preventDefault();\n          const focusedIndex = getFocusedThumbIndex();\n          thumbs.current[focusedIndex].focus();\n\n          const nextValue =\n            restrictToMarks && marks\n              ? (dir === 'rtl' ? getNextMarkValue : getPreviousMarkValue)(\n                  valueRef.current[focusedIndex],\n                  marks\n                )\n              : Math.min(\n                  Math.max(\n                    dir === 'rtl'\n                      ? valueRef.current[focusedIndex] + step\n                      : valueRef.current[focusedIndex] - step,\n                    domainMin\n                  ),\n                  domainMax\n                );\n\n          setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n          break;\n        }\n\n        default: {\n          break;\n        }\n      }\n    }\n  };\n\n  const sharedThumbProps = {\n    max,\n    min,\n    size,\n    labelTransitionProps,\n    labelAlwaysOn,\n    orientation,\n    onBlur: () => setFocused(-1),\n  };\n\n  const hasArrayThumbChildren = Array.isArray(thumbChildren);\n\n  return (\n    <SliderProvider value={{ getStyles }}>\n      <SliderRoot\n        {...others}\n        size={size}\n        ref={useMergedRef(ref, root)}\n        disabled={disabled}\n        orientation={orientation}\n        onMouseDownCapture={() => root.current?.focus()}\n        onKeyDownCapture={() => {\n          if (thumbs.current[0]?.parentElement?.contains(document.activeElement)) {\n            return;\n          }\n          thumbs.current[0]?.focus();\n        }}\n      >\n        <Track\n          offset={positions[0]}\n          marksOffset={_value[0]}\n          filled={positions[1] - positions[0]}\n          marks={marks}\n          inverted={inverted}\n          min={domainMin}\n          max={domainMax}\n          value={_value[1]}\n          disabled={disabled}\n          containerProps={{\n            ref: useMergedRef(containerRef, useMoveRef) as any,\n            onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n            onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n            onTouchStartCapture: handleTrackMouseDownCapture,\n            onTouchEndCapture: () => {\n              thumbIndex.current = -1;\n            },\n            onMouseDownCapture: handleTrackMouseDownCapture,\n            onMouseUpCapture: () => {\n              thumbIndex.current = -1;\n            },\n            onKeyDownCapture: handleTrackKeydownCapture,\n          }}\n        >\n          <Thumb\n            {...sharedThumbProps}\n            value={scale(_value[0])}\n            position={positions[0]}\n            dragging={active}\n            label={\n              typeof label === 'function'\n                ? label(getFloatingValue(scale(_value[0]), precision))\n                : label\n            }\n            ref={(node) => {\n              if (node) {\n                thumbs.current[0] = node;\n              }\n            }}\n            thumbLabel={thumbFromLabel}\n            thumbValueText={thumbValueText}\n            onMouseDown={() => handleThumbMouseDown(0)}\n            onFocus={() => setFocused(0)}\n            showLabelOnHover={showLabelOnHover}\n            isHovered={hovered}\n            disabled={disabled}\n            {...thumbProps?.(0)}\n          >\n            {hasArrayThumbChildren ? thumbChildren[0] : thumbChildren}\n          </Thumb>\n\n          <Thumb\n            {...sharedThumbProps}\n            thumbLabel={thumbToLabel}\n            value={scale(_value[1])}\n            position={positions[1]}\n            dragging={active}\n            label={\n              typeof label === 'function'\n                ? label(getFloatingValue(scale(_value[1]), precision))\n                : label\n            }\n            ref={(node) => {\n              if (node) {\n                thumbs.current[1] = node;\n              }\n            }}\n            thumbValueText={thumbValueText}\n            onMouseDown={() => handleThumbMouseDown(1)}\n            onFocus={() => setFocused(1)}\n            showLabelOnHover={showLabelOnHover}\n            isHovered={hovered}\n            disabled={disabled}\n            {...thumbProps?.(1)}\n          >\n            {hasArrayThumbChildren ? thumbChildren[1] : thumbChildren}\n          </Thumb>\n        </Track>\n\n        <input type=\"hidden\" name={`${name}_from`} value={_value[0]} {...hiddenInputProps} />\n        <input type=\"hidden\" name={`${name}_to`} value={_value[1]} {...hiddenInputProps} />\n      </SliderRoot>\n    </SliderProvider>\n  );\n});\n\nRangeSlider.classes = classes;\nRangeSlider.varsResolver = varsResolver;\nRangeSlider.displayName = '@mantine/core/RangeSlider';\n\nexport namespace RangeSlider {\n  export type Props = RangeSliderProps;\n  export type Value = RangeSliderValue;\n  export type Factory = RangeSliderFactory;\n  export type StylesNames = SliderStylesNames;\n  export type CssVariables = SliderCssVariables;\n  export type Mark = SliderMark;\n}\n"],"mappings":"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"}
+{"version":3,"file":"RangeSlider.cjs","names":["createVarsResolver","getSize","getThemeColor","getRadius","rem","factory","useProps","useStyles","useDirection","getPosition","getPrecision","findClosestNumber","getLastMarkValue","getFirstMarkValue","getPreviousMarkValue","getNextMarkValue","getFloatingValue","getChangeValue","getClientPosition","SliderProvider","SliderRoot","Track","Thumb","classes"],"sources":["../../../../src/components/Slider/RangeSlider/RangeSlider.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getClientPosition } from '../utils/get-client-position/get-client-position';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n  getFirstMarkValue,\n  getLastMarkValue,\n  getNextMarkValue,\n  getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport type RangeSliderValue = [number, number];\n\nexport interface RangeSliderProps\n  extends\n    BoxProps,\n    StylesApiProps<RangeSliderFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @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  /** Controls size of the track @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Minimal possible value @default 0 */\n  min?: number;\n\n  /** Maximum possible value @default 100 */\n  max?: number;\n\n  /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n  domain?: [number, number];\n\n  /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n  step?: number;\n\n  /** Number of significant digits after the decimal point */\n  precision?: number;\n\n  /** Controlled component value */\n  value?: RangeSliderValue;\n\n  /** Uncontrolled component default value */\n  defaultValue?: RangeSliderValue;\n\n  /** Called when value changes */\n  onChange?: (value: RangeSliderValue) => void;\n\n  /** Called when user stops dragging slider or changes value with arrows */\n  onChangeEnd?: (value: RangeSliderValue) => void;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n\n  /** Marks displayed on the track */\n  marks?: SliderMark[];\n\n  /** Function to generate label or any react node to render instead, set to null to disable label */\n  label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n  labelTransitionProps?: TransitionOverride;\n\n  /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n  labelAlwaysOn?: boolean;\n\n  /** Determines whether the label should be displayed when the slider is hovered @default true */\n  showLabelOnHover?: boolean;\n\n  /** Content rendered inside thumb */\n  thumbChildren?: React.ReactNode;\n\n  /** Disables slider */\n  disabled?: boolean;\n\n  /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n  thumbSize?: number | string;\n\n  /** A transformation function to change the scale of the slider */\n  scale?: (value: number) => number;\n\n  /** Determines whether track values representation should be inverted @default false */\n  inverted?: boolean;\n\n  /** Slider orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Minimal range interval between the two thumbs. Consider this value relative to the total range (max - min). @default 10 */\n  minRange?: number;\n\n  /** Maximum range interval @default Infinity */\n  maxRange?: number;\n\n  /** `aria-label` for both thumbs (overridden by thumbFromLabel/thumbToLabel if provided) */\n  thumbLabel?: string;\n\n  /** `aria-valuetext` for both thumbs. When a function is provided, it receives the scaled value. */\n  thumbValueText?: string | ((value: number) => string);\n\n  /** First thumb `aria-label` */\n  thumbFromLabel?: string;\n\n  /** Second thumb `aria-label` */\n  thumbToLabel?: string;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Determines whether the selection should be only allowed from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to thumb element based on the thumb index */\n  thumbProps?: (index: 0 | 1) => React.ComponentProps<'div'>;\n\n  /** Determines whether the other thumb should be pushed by the current thumb dragging when `minRange`/`maxRange` is reached @default true */\n  pushOnOverlap?: boolean;\n}\n\nexport type RangeSliderFactory = Factory<{\n  props: RangeSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: SliderStylesNames;\n  vars: SliderCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<RangeSliderFactory>(\n  (theme, { size, color, thumbSize, radius }) => ({\n    root: {\n      '--slider-size': getSize(size, 'slider-size'),\n      '--slider-color': color ? getThemeColor(color, theme) : undefined,\n      '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n      '--slider-thumb-size':\n        thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n    },\n  })\n);\n\nconst defaultProps = {\n  min: 0,\n  max: 100,\n  minRange: 10,\n  step: 1,\n  marks: [],\n  label: (f) => f,\n  labelTransitionProps: { transition: 'fade', duration: 0 },\n  labelAlwaysOn: false,\n  showLabelOnHover: true,\n  disabled: false,\n  pushOnOverlap: true,\n  scale: (v) => v,\n  size: 'md',\n  maxRange: Infinity,\n} satisfies Partial<RangeSliderProps>;\n\nexport const RangeSlider = factory<RangeSliderFactory>((_props) => {\n  const props = useProps('RangeSlider', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    value,\n    onChange,\n    onChangeEnd,\n    size,\n    min,\n    max,\n    domain,\n    minRange,\n    maxRange,\n    step,\n    precision: _precision,\n    defaultValue,\n    name,\n    marks,\n    label,\n    labelTransitionProps,\n    labelAlwaysOn,\n    thumbFromLabel,\n    thumbToLabel,\n    thumbValueText,\n    showLabelOnHover,\n    thumbChildren,\n    disabled,\n    unstyled,\n    scale,\n    inverted,\n    orientation,\n    className,\n    style,\n    vars,\n    hiddenInputProps,\n    restrictToMarks,\n    thumbProps,\n    pushOnOverlap,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RangeSliderFactory>({\n    name: 'RangeSlider',\n    props,\n    classes,\n    classNames,\n    className,\n    styles,\n    style,\n    attributes,\n    vars,\n    varsResolver,\n    unstyled,\n  });\n\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const { dir } = useDirection();\n  const [focused, setFocused] = useState(-1);\n  const [hovered, setHovered] = useState(false);\n  const [_value, setValue] = useUncontrolled<RangeSliderValue>({\n    value,\n    defaultValue,\n    finalValue: [min, max],\n    onChange,\n  });\n  const valueRef = useRef(_value);\n  const thumbs = useRef<HTMLDivElement[]>([]);\n  const root = useRef<HTMLDivElement>(null);\n  const thumbIndex = useRef<number | undefined>(undefined);\n  const [domainMin, domainMax] = domain || [min!, max!];\n  const positions = [\n    getPosition({ value: _value[0], min: domainMin, max: domainMax }),\n    getPosition({ value: _value[1], min: domainMin, max: domainMax }),\n  ];\n\n  const precision = _precision ?? getPrecision(step);\n\n  const _setValue = (val: RangeSliderValue) => {\n    setValue(val);\n    valueRef.current = val;\n  };\n\n  useEffect(\n    () => {\n      if (Array.isArray(value)) {\n        valueRef.current = value;\n      }\n    },\n    Array.isArray(value) ? [value[0], value[1]] : [null, null]\n  );\n\n  const setRangedValue = (val: number, index: number, triggerChangeEnd: boolean) => {\n    if (index === -1) {\n      return;\n    }\n\n    const clone: RangeSliderValue = [...valueRef.current];\n\n    if (restrictToMarks && marks) {\n      const closest = findClosestNumber(\n        val,\n        marks.map((m) => m.value)\n      );\n\n      const current = clone[index];\n      clone[index] = closest;\n      const otherIndex = index === 0 ? 1 : 0;\n\n      const lastMarkValue = getLastMarkValue(marks);\n      const firstMarkValue = getFirstMarkValue(marks);\n\n      if (closest === lastMarkValue && clone[otherIndex] === lastMarkValue) {\n        clone[index] = current;\n      } else if (closest === firstMarkValue && clone[otherIndex] === firstMarkValue) {\n        clone[index] = current;\n      } else if (closest === clone[otherIndex]) {\n        if (current > clone[otherIndex]) {\n          clone[otherIndex] = getPreviousMarkValue(closest, marks);\n        } else {\n          clone[otherIndex] = getNextMarkValue(closest, marks);\n        }\n      }\n    } else {\n      const clampedVal = clamp(val, min!, max!);\n      clone[index] = clampedVal;\n\n      if (index === 0) {\n        if (clampedVal > clone[1] - (minRange - 0.000000001)) {\n          if (pushOnOverlap) {\n            clone[1] = Math.min(val + minRange, max);\n          } else {\n            clone[index] = valueRef.current[index];\n          }\n        }\n\n        if (clampedVal > (max - (minRange - 0.000000001) || min)) {\n          clone[index] = valueRef.current[index];\n        }\n\n        if (clone[1] - val > maxRange) {\n          if (pushOnOverlap) {\n            clone[1] = val + maxRange;\n          } else {\n            clone[index] = valueRef.current[index];\n          }\n        }\n      }\n\n      if (index === 1) {\n        if (clampedVal < clone[0] + minRange) {\n          if (pushOnOverlap) {\n            clone[0] = Math.max(val - minRange, min);\n          } else {\n            clone[index] = valueRef.current[index];\n          }\n        }\n\n        if (clampedVal < clone[0] + minRange) {\n          clone[index] = valueRef.current[index];\n        }\n\n        if (clampedVal - clone[0] > maxRange) {\n          if (pushOnOverlap) {\n            clone[0] = val - maxRange;\n          } else {\n            clone[index] = valueRef.current[index];\n          }\n        }\n      }\n    }\n\n    clone[0] = getFloatingValue(clone[0], precision);\n    clone[1] = getFloatingValue(clone[1], precision);\n\n    if (clone[0] > clone[1]) {\n      const temp = clone[0];\n      clone[0] = clone[1];\n      clone[1] = temp;\n    }\n\n    _setValue(clone);\n\n    if (triggerChangeEnd) {\n      onChangeEnd?.(valueRef.current);\n    }\n  };\n\n  const handleChange = (val: number) => {\n    if (!disabled && thumbIndex.current !== undefined) {\n      const nextValue = getChangeValue({\n        value: val,\n        min: domainMin,\n        max: domainMax,\n        step,\n        precision,\n      });\n      setRangedValue(nextValue, thumbIndex.current, false);\n    }\n  };\n\n  const { ref: useMoveRef, active } = useMove(\n    ({ x, y }) => handleChange(orientation === 'vertical' ? 1 - y : x),\n    { onScrubEnd: () => !disabled && onChangeEnd?.(valueRef.current) },\n    dir\n  );\n\n  function handleThumbMouseDown(index: number) {\n    thumbIndex.current = index;\n  }\n\n  const handleTrackMouseDownCapture = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n  ) => {\n    if (containerRef.current) {\n      containerRef.current.focus();\n      const rect = containerRef.current.getBoundingClientRect();\n      const changePosition = getClientPosition(event.nativeEvent, orientation);\n\n      const changeValue =\n        orientation === 'vertical'\n          ? getChangeValue({\n              value: rect.bottom - changePosition,\n              max,\n              min,\n              step,\n              containerWidth: rect.height,\n            })\n          : getChangeValue({\n              value: changePosition - rect.left,\n              max,\n              min,\n              step,\n              containerWidth: rect.width,\n            });\n\n      const nearestHandle =\n        Math.abs(_value[0] - changeValue) > Math.abs(_value[1] - changeValue) ? 1 : 0;\n      const _nearestHandle =\n        orientation === 'vertical'\n          ? nearestHandle\n          : dir === 'ltr'\n            ? nearestHandle\n            : nearestHandle === 1\n              ? 0\n              : 1;\n\n      thumbIndex.current = _nearestHandle;\n    }\n  };\n\n  const getFocusedThumbIndex = () => {\n    if (focused !== 1 && focused !== 0) {\n      setFocused(0);\n      return 0;\n    }\n\n    return focused;\n  };\n\n  const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disabled) {\n      switch (event.key) {\n        case 'ArrowUp': {\n          event.preventDefault();\n          const focusedIndex = getFocusedThumbIndex();\n          thumbs.current[focusedIndex].focus();\n          const nextValue =\n            restrictToMarks && marks\n              ? getNextMarkValue(valueRef.current[focusedIndex], marks)\n              : Math.min(Math.max(valueRef.current[focusedIndex] + step, domainMin), domainMax);\n          setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n          break;\n        }\n\n        case 'ArrowRight': {\n          event.preventDefault();\n          const focusedIndex = getFocusedThumbIndex();\n          thumbs.current[focusedIndex].focus();\n\n          const nextValue =\n            restrictToMarks && marks\n              ? (dir === 'rtl' ? getPreviousMarkValue : getNextMarkValue)(\n                  valueRef.current[focusedIndex],\n                  marks\n                )\n              : Math.min(\n                  Math.max(\n                    dir === 'rtl'\n                      ? valueRef.current[focusedIndex] - step\n                      : valueRef.current[focusedIndex] + step,\n                    domainMin\n                  ),\n                  domainMax\n                );\n\n          setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n          break;\n        }\n\n        case 'ArrowDown': {\n          event.preventDefault();\n          const focusedIndex = getFocusedThumbIndex();\n          thumbs.current[focusedIndex].focus();\n          const nextValue =\n            restrictToMarks && marks\n              ? getPreviousMarkValue(valueRef.current[focusedIndex], marks)\n              : Math.min(Math.max(valueRef.current[focusedIndex] - step, domainMin), domainMax);\n          setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n          break;\n        }\n\n        case 'ArrowLeft': {\n          event.preventDefault();\n          const focusedIndex = getFocusedThumbIndex();\n          thumbs.current[focusedIndex].focus();\n\n          const nextValue =\n            restrictToMarks && marks\n              ? (dir === 'rtl' ? getNextMarkValue : getPreviousMarkValue)(\n                  valueRef.current[focusedIndex],\n                  marks\n                )\n              : Math.min(\n                  Math.max(\n                    dir === 'rtl'\n                      ? valueRef.current[focusedIndex] + step\n                      : valueRef.current[focusedIndex] - step,\n                    domainMin\n                  ),\n                  domainMax\n                );\n\n          setRangedValue(getFloatingValue(nextValue, precision), focusedIndex, true);\n          break;\n        }\n\n        default: {\n          break;\n        }\n      }\n    }\n  };\n\n  const sharedThumbProps = {\n    max,\n    min,\n    size,\n    labelTransitionProps,\n    labelAlwaysOn,\n    orientation,\n    onBlur: () => setFocused(-1),\n  };\n\n  const hasArrayThumbChildren = Array.isArray(thumbChildren);\n\n  return (\n    <SliderProvider value={{ getStyles }}>\n      <SliderRoot\n        {...others}\n        size={size}\n        ref={useMergedRef(ref, root)}\n        disabled={disabled}\n        orientation={orientation}\n        onMouseDownCapture={() => root.current?.focus()}\n        onKeyDownCapture={() => {\n          if (thumbs.current[0]?.parentElement?.contains(document.activeElement)) {\n            return;\n          }\n          thumbs.current[0]?.focus();\n        }}\n      >\n        <Track\n          offset={positions[0]}\n          marksOffset={_value[0]}\n          filled={positions[1] - positions[0]}\n          marks={marks}\n          inverted={inverted}\n          min={domainMin}\n          max={domainMax}\n          value={_value[1]}\n          disabled={disabled}\n          containerProps={{\n            ref: useMergedRef(containerRef, useMoveRef) as any,\n            onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n            onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n            onTouchStartCapture: handleTrackMouseDownCapture,\n            onTouchEndCapture: () => {\n              thumbIndex.current = -1;\n            },\n            onMouseDownCapture: handleTrackMouseDownCapture,\n            onMouseUpCapture: () => {\n              thumbIndex.current = -1;\n            },\n            onKeyDownCapture: handleTrackKeydownCapture,\n          }}\n        >\n          <Thumb\n            {...sharedThumbProps}\n            value={scale(_value[0])}\n            position={positions[0]}\n            dragging={active}\n            label={\n              typeof label === 'function'\n                ? label(getFloatingValue(scale(_value[0]), precision))\n                : label\n            }\n            ref={(node) => {\n              if (node) {\n                thumbs.current[0] = node;\n              }\n            }}\n            thumbLabel={thumbFromLabel}\n            thumbValueText={thumbValueText}\n            onMouseDown={() => handleThumbMouseDown(0)}\n            onFocus={() => setFocused(0)}\n            showLabelOnHover={showLabelOnHover}\n            isHovered={hovered}\n            disabled={disabled}\n            {...thumbProps?.(0)}\n          >\n            {hasArrayThumbChildren ? thumbChildren[0] : thumbChildren}\n          </Thumb>\n\n          <Thumb\n            {...sharedThumbProps}\n            thumbLabel={thumbToLabel}\n            value={scale(_value[1])}\n            position={positions[1]}\n            dragging={active}\n            label={\n              typeof label === 'function'\n                ? label(getFloatingValue(scale(_value[1]), precision))\n                : label\n            }\n            ref={(node) => {\n              if (node) {\n                thumbs.current[1] = node;\n              }\n            }}\n            thumbValueText={thumbValueText}\n            onMouseDown={() => handleThumbMouseDown(1)}\n            onFocus={() => setFocused(1)}\n            showLabelOnHover={showLabelOnHover}\n            isHovered={hovered}\n            disabled={disabled}\n            {...thumbProps?.(1)}\n          >\n            {hasArrayThumbChildren ? thumbChildren[1] : thumbChildren}\n          </Thumb>\n        </Track>\n\n        <input type=\"hidden\" name={`${name}_from`} value={_value[0]} {...hiddenInputProps} />\n        <input type=\"hidden\" name={`${name}_to`} value={_value[1]} {...hiddenInputProps} />\n      </SliderRoot>\n    </SliderProvider>\n  );\n});\n\nRangeSlider.classes = classes;\nRangeSlider.varsResolver = varsResolver;\nRangeSlider.displayName = '@mantine/core/RangeSlider';\n\nexport namespace RangeSlider {\n  export type Props = RangeSliderProps;\n  export type Value = RangeSliderValue;\n  export type Factory = RangeSliderFactory;\n  export type StylesNames = SliderStylesNames;\n  export type CssVariables = SliderCssVariables;\n  export type Mark = SliderMark;\n}\n"],"mappings":"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"}

package/cjs/components/Table/Table.components.cjs

@@ -59,5 +59,6 @@ exports.TableTfoot = TableTfoot;
 exports.TableTh = TableTh;
 exports.TableThead = TableThead;
 exports.TableTr = TableTr;
+exports.tableElement = tableElement;
 
 //# sourceMappingURL=Table.components.cjs.map

package/cjs/components/TagsInput/TagsInput.cjs

@@ -135,11 +135,12 @@ const TagsInput = require_factory.factory((_props) => {
 		onPaste?.(event);
 		event.preventDefault();
 		if (event.clipboardData) {
+			const pastedText = event.clipboardData.getData("text/plain");
 			setValue(require_get_splitted_tags.getSplittedTags({
 				splitChars,
 				allowDuplicates,
 				maxTags,
-				value: `${_searchValue}${event.clipboardData.getData("text/plain")}`,
+				value: `${_searchValue}${pastedText}`,
 				currentTags: _value,
 				isDuplicate,
 				onDuplicate

package/cjs/components/TagsInput/TagsInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TagsInput.cjs","names":["factory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","extractStyleProps","usePillsReorder","useStyles","useResolvedStylesApi","getSplittedTags","Fragment","Pill","Combobox","PillsInput","OptionsDropdown","filterPickedTags","InputBase"],"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,YAAYA,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,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,OAAA,GAAA,eAAA,MAAA,CAAY,EAAE;CACpB,MAAM,aAAaC,iCAAAA,sBAAsB,IAAI;CAC7C,MAAM,gBAAgBC,2BAAAA,iBAAiB,UAAU;CACjD,MAAM,YAAA,GAAA,MAAA,OAAA,CAAoC,IAAI;CAC9C,MAAM,QAAA,GAAA,eAAA,aAAA,CAAoB,UAAU,GAAG;CAEvC,MAAM,WAAWC,qBAAAA,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,WAC7BC,4BAAAA,kBAAkB,MAAM;CAE5B,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,gBAAA,CAA4B;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,EAAE,cAAc,cAAc,uBAAuBC,0BAAAA,gBAAgB;EACzE,OAAO;EACP,UAAU;EACV,SAAS,oBAAoB,CAAC,YAAY,CAAC;CAC7C,CAAC;CAED,MAAM,CAAC,cAAc,mBAAA,GAAA,eAAA,gBAAA,CAAkC;EACrD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,sBAAsB,UAAkB;EAC5C,eAAe,KAAK;EACpB,SAAS,oBAAoB;CAC/B;CAEA,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAS,CAAC;EACH;EACP;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAAuC;EACpF;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,QAAgB;EAKzC,IAJqB,cACjB,YAAY,KAAK,MAAM,IACvB,OAAO,MAAM,QAAQ,IAAI,YAAY,MAAM,IAAI,YAAY,CAAC,GAE9C;GAChB,cAAc,GAAG;GACjB,IAAI,CAAC,iBAAiB;IACpB,mBAAmB,EAAE;IACrB;GACF;EACF;EAEA,IAAI,OAAO,UAAU,SAAS;GAC5B,YAAY,GAAG;GACf;EACF;EAEA,iBAAiB,GAAG;EACpB,mBAAmB,EAAE;EACrB,IAAI,IAAI,SAAS,GACf,SAAS,CAAC,GAAG,QAAQ,GAAG,CAAC;CAE7B;CAEA,MAAM,sBAAsB,UAAiD;EAC3E,YAAY,KAAK;EAEjB,IAAI,MAAM,oBAAoB,MAAM,qBAAqB,GACvD;EAGF,MAAM,aAAa,aAAa,KAAK;EACrC,MAAM,EAAE,WAAW;EAEnB,IAAI,WAAW,SAAS,MAAM,GAAG,KAAK,SAAS,GAAG;GAChD,SACEC,0BAAAA,gBAAgB;IACd;IACA;IACA;IACA,OAAO;IACP,aAAa;IACb;IACA;GACF,CAAC,CACH;GACA,mBAAmB,EAAE;GACrB,MAAM,eAAe;EACvB;EAEA,IAAI,MAAM,QAAQ,WAAW,SAAS,KAAK,CAAC,MAAM,YAAY,aAAa;GACzE,MAAM,eAAe;GAMrB,IAAI,CAJwB,CAAC,SAAS,cACpC,IAAI,SAAS,OAAO,gDACtB,GAGE;GAGF,kBAAkB,UAAU;EAC9B;EAEA,IACE,MAAM,QAAQ,eACd,WAAW,KACX,OAAO,SAAS,KAChB,CAAC,MAAM,YAAY,eACnB,CAAC,UACD;GACA,WAAW,OAAO,OAAO,SAAS,EAAE;GACpC,SAAS,OAAO,MAAM,GAAG,OAAO,SAAS,CAAC,CAAC;EAC7C;EAEA,mBAAmB,KAAK;CAC1B;CAEA,MAAM,eAAe,UAAkD;EACrE,UAAU,KAAK;EACf,MAAM,eAAe;EAErB,IAAI,MAAM,eAAe;GAEvB,SACEA,0BAAAA,gBAAgB;IACd;IACA;IACA;IACA,OAAO,GAAG,eANK,MAAM,cAAc,QAAQ,YAMT;IAClC,aAAa;IACb;IACA;GACF,CAAC,CACH;GACA,mBAAmB,EAAE;EACvB;CACF;CAEA,MAAM,SAAS,OAAO,KAAK,MAAM,UAAU;EACzC,MAAM,qBAAqB;GACzB,MAAM,aAAa,OAAO,MAAM;GAChC,WAAW,OAAO,OAAO,CAAC;GAC1B,SAAS,UAAU;GACnB,WAAW,IAAI;EACjB;EAEA,MAAM,eAAe,aAAa,KAAK;EAEvC,IAAI,YACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,MAAAA,UAAD,EAAA,UACG,WAAW;GACV,QAAQ,cAAc,SAAS;IAAE,OAAO;IAAM,OAAO;IAAM,UAAU;GAAM;GAC3E,OAAO;GACP,UAAU;GACV,UAAU,YAAY;GACtB;EACF,CAAC,EACO,GARK,GAAG,KAAK,GAAG,OAQhB;EAId,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD;GAEE,kBAAkB,CAAC;GACnB,UAAU;GACA;GACA;GACE;GACZ,GAAI,UAAU,MAAM;GACpB,GAAI;aAEH;EACG,GAVC,GAAG,KAAK,GAAG,OAUZ;CAEV,CAAC;CAED,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,2BACF,SAAS,kBAAkB;CAE/B,GAAG;EAAC;EAA2B;EAAQ;CAAY,CAAC;CAEpD,MAAM,cACJ,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,SAAS,aAAV;EACE,GAAI;EACJ,eAAe;GACb,SAAS,CAAC,CAAC;GACX,mBAAmB,EAAE;GACrB,SAAS,SAAS,MAAM;GACxB,SAAS,aAAa;GACtB,UAAU;EACZ;CACD,CAAA;CAGH,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,iBAAAA,UAAD;EACE,OAAO;EACP,YAAY;EACZ,QAAQ;EACE;EACJ;EACI;EACV,kBAAiB;EACL;EACI;EAChB,iBAAiB,QAAQ;GACvB,iBAAiB,GAAG;GACpB,mBAAmB,EAAE;GAErB,IAAI,OAAO,UAAU,SACnB,YAAY,GAAG;QAEf,SAAS,CAAC,GAAG,QAAQ,cAAc,IAAI,CAAC,KAAK,CAAC;GAGhD,SAAS,oBAAoB;EAC/B;EACA,GAAI;YAtBN,CAwBE,iBAAA,GAAA,kBAAA,IAAA,CAACA,iBAAAA,SAAS,gBAAV,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,YAAD;GACE,GAAI;GACJ,kBAAiB;GACjB,YAAY;GACZ,QAAQ;GACE;GACJ;GACK;GACJ;GACE;GACC;GACF;GACM;GACd,gBAAgB;GAChB,aAAa,aAAa,OAAO,SAAS,KAAK,CAAC,YAAY,CAAC;GAC7D,oBAAoB;GACD;GACQ;GACR;GACN;GACK;GACQ;GACR;GACT;GACQ;GACD;GACG;GACL;GACJ;GACE;GACM;GACN;GACE;GACA;GACD;GACN;GACA;GACE;GACQ;GACE;GACnB,kBAAkB;IAAE,GAAG;IAAO,WAAW;GAAK;GAC9C,IAAI;GACC;GACO;aAEZ,iBAAA,GAAA,kBAAA,KAAA,CAACF,aAAAA,KAAK,OAAN;IACY;IACA;IACV,GAAI,UAAU,WAAW;IACzB,GAAI,aAAa;cAJnB,CAMG,QACD,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,SAAS,cAAV;KAAqC;KAAc,uBAAA;eACjD,iBAAA,GAAA,kBAAA,IAAA,CAACC,mBAAAA,WAAW,OAAZ;MACE,GAAI;MACJ,KAAK;MACL,GAAI,UAAU,YAAY;MAChB;MACV,WAAW;MACX,UAAU,UAAU;OAClB,UAAU,KAAK;OACf,eAAe,SAAS,aAAa;MACvC;MACA,SAAS,UAAU;OACjB,SAAS,KAAK;OACd,qBAAqB,kBAAkB,YAAY;OACnD,SAAS,cAAc;MACzB;MACA,SAAS;MACT,OAAO;MACP,WAAW,UAAU,mBAAmB,MAAM,cAAc,KAAK;MACjE,UAAU,YAAY,OAAO,WAAW;MAC9B;MACA;MACV,IAAI;KACL,CAAA;IACoB,CAAA,CACb;;EACF,CAAA,EACW,CAAA,GAEzB,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,iBAAD;GACE,MAAMC,2BAAAA,iBAAiB;IAAE,MAAM;IAAY,OAAO;GAAO,CAAC;GAC1D,QAAQ,YAAY;GACZ;GACR,QAAQ;GACD;GACP,iBAAA;GACgB;GACG;GACT;GACV,SAAS,QAAQ,GAAG,IAAI,UAAU,KAAA;GAClC,cAAY,QAAQ,KAAA,IAAY,OAAO;GACzB;GACG;EAClB,CAAA,CACO;KACV,iBAAA,GAAA,kBAAA,IAAA,CAACH,iBAAAA,SAAS,aAAV;EACQ;EACA;EACN,OAAO;EACP,eAAe;EACL;EACV,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN,CAAC;AAED,UAAU,UAAU;CAAE,GAAGI,kBAAAA,UAAU;CAAS,GAAGJ,iBAAAA,SAAS;AAAQ;AAChE,UAAU,cAAc"}
+{"version":3,"file":"TagsInput.cjs","names":["factory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","extractStyleProps","usePillsReorder","useStyles","useResolvedStylesApi","getSplittedTags","Fragment","Pill","Combobox","PillsInput","OptionsDropdown","filterPickedTags","InputBase"],"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":"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"}

package/cjs/components/Timeline/Timeline.cjs

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

package/cjs/components/Timeline/Timeline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.cjs","names":["createVarsResolver","rem","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","Children","TimelineProvider","Box","classes","TimelineItem"],"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,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,YAAY,WAAW,QAAQ,OAAO,oBAAoB,EAClE,MAAM;CACJ,oBAAoBC,YAAAA,IAAI,UAAU;CAClC,mBAAmBA,YAAAA,IAAI,SAAS;CAChC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;CAClE,cAAc,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;CACpD,mBAAmBC,gCAAAA,qBAAqB,cAAc,KAAK,IACvDC,2BAAAA,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,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,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAYC,MAAAA,SAAS,QAAQ,QAAQ;CAC3C,MAAM,QAAQ,UAAU,KAAK,MAAW,WAAA,GAAA,MAAA,aAAA,CACzB,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,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;EAAkB,OAAO,EAAE,UAAU;YACnC,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG;GAAG,GAAI;aACpD;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAOC,qBAAAA"}
+{"version":3,"file":"Timeline.cjs","names":["createVarsResolver","rem","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","Children","TimelineProvider","Box","classes","TimelineItem"],"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,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,YAAY,WAAW,QAAQ,OAAO,oBAAoB,EAClE,MAAM;CACJ,oBAAoBC,YAAAA,IAAI,UAAU;CAClC,mBAAmBA,YAAAA,IAAI,SAAS;CAChC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;CAClE,cAAc,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;CACpD,mBAAmBC,gCAAAA,qBAAqB,cAAc,KAAK,IACvDC,2BAAAA,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,WAAWC,gBAAAA,SAA0B,WAAW;CAC3D,MAAM,QAAQC,kBAAAA,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,YAAYC,mBAAAA,UAA2B;EAC3C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAYC,MAAAA,SAAS,QAAQ,QAAQ;CAC3C,MAAM,cAAc,UAAU,MAAM,SAAc,KAAK,OAAO,YAAY,IAAI;CAC9E,MAAM,QAAQ,UAAU,KAAK,MAAW,WAAA,GAAA,MAAA,aAAA,CACzB,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,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD;EAAkB,OAAO,EAAE,UAAU;YACnC,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,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,UAAUC,wBAAAA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAOC,qBAAAA"}

package/cjs/components/Timeline/Timeline.module.cjs

@@ -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
 exports.default = Timeline_module_default;

package/cjs/components/Timeline/Timeline.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.module.cjs","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.cjs","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/cjs/components/Timeline/TimelineItem/TimelineItem.cjs

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

package/cjs/components/Timeline/TimelineItem/TimelineItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineItem.cjs","names":["factory","useProps","useTimelineContext","useMantineTheme","Box","getRadius","getThemeColor","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,eAAeA,gBAAAA,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WAlBSC,kBAAAA,SAAS,gBAAgB,MAAM,MAmBrC;CAER,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,QAAQC,6BAAAA,gBAAgB;CAE9B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAE5C,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,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,IAAYC,iBAAAA,UAAU,MAAM,IAAI,KAAA;GAC3D,eAAe,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;GACrD,sBAAsB,eAAe,KAAA;EACvC;EACA,GAAI;YARN,CAUE,iBAAA,GAAA,kBAAA,IAAA,CAACF,YAAAA,KAAD;GACE,GAAI,IAAI,UAAU,cAAc,cAAc;GAC9C,KAAK;IAAE,cAAc,CAAC,CAAC;IAAQ,OAAO;IAAS,QAAQ;GAAS;aAE/D;EACE,CAAA,GAEL,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,GAAI,IAAI,UAAU,YAAY,cAAc;aAAjD,CACG,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa,cAAc;cAAI;GAAW,CAAA,GAC3E,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe,cAAc;IAAI;GAAc,CAAA,CACnE;IACF;;AAET,CAAC;AAED,aAAa,UAAUG,wBAAAA;AACvB,aAAa,cAAc"}
+{"version":3,"file":"TimelineItem.cjs","names":["factory","useProps","useTimelineContext","useMantineTheme","Box","getRadius","getThemeColor","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,eAAeA,gBAAAA,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,UACA,WACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WApBSC,kBAAAA,SAAS,gBAAgB,MAAM,MAqBrC;CAER,MAAM,MAAMC,yBAAAA,mBAAmB;CAC/B,MAAM,QAAQC,6BAAAA,gBAAgB;CAE9B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAC5C,MAAM,YAAa,YAAY,UAAU,CAAC,CAAC,aAAe,YAAY,WAAW,CAAC;CAElF,MAAM,eAAe,YAAY,QAC/B,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,GAAI,IAAI,UAAU,gBAAgB,cAAc;YAAI;CAAc,CAAA;CAGzE,MAAM,WACJ,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,GAAI,IAAI,UAAU,YAAY,cAAc;YAAjD,CACG,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,IAAI,UAAU,aAAa,cAAc;aAAI;EAAW,CAAA,GAC3E,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,GAAI,IAAI,UAAU,eAAe,cAAc;GAAI;EAAc,CAAA,CACnE;;CAGP,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,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,IAAYC,iBAAAA,UAAU,MAAM,IAAI,KAAA;GAC3D,eAAe,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;GACrD,sBAAsB,eAAe,KAAA;EACvC;EACA,GAAI;YARN;GAUG,YAAY,WAAW;GAExB,iBAAA,GAAA,kBAAA,IAAA,CAACF,YAAAA,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,UAAUG,wBAAAA;AACvB,aAAa,cAAc"}