npm - @mantine/core - Versions diffs - 9.3.1 → 9.4.0 - Mend

@mantine/core 9.3.1 → 9.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (876) hide show

package/esm/components/ColorPicker/ColorSlider/ColorSlider.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorSlider.mjs","names":["classes"],"sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import { use, useRef, useState } from 'react';\nimport {\n clampUseMovePosition,\n useDidUpdate,\n useMergedRef,\n useMove,\n UseMovePosition,\n} from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n ElementProps,\n factory,\n Factory,\n MantineSize,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useStyles,\n} from '../../../core';\nimport { ColorPickerContext } from '../ColorPicker.context';\nimport { Thumb } from '../Thumb/Thumb';\nimport classes from '../ColorPicker.module.css';\n\nexport type ColorSliderStylesNames = 'slider' \| 'sliderOverlay' \| 'thumb';\n\nexport interface __ColorSliderProps extends ElementProps<'div', 'onChange'> {\n /** Controlled component value /\n value: number;\n\n /* Called when value changes /\n onChange?: (value: number) => void;\n\n /* Called when user stops dragging the slider or uses keyboard to change value /\n onChangeEnd?: (value: number) => void;\n\n /* Called when user starts dragging the slider /\n onScrubStart?: () => void;\n\n /* Called when user stops dragging the slider /\n onScrubEnd?: () => void;\n\n /* Slider size @default 'md' /\n size?: MantineSize \| (string & {});\n\n /* If set, slider thumb can be focused @default true /\n focusable?: boolean;\n}\n\nexport interface ColorSliderProps\n extends\n BoxProps,\n StylesApiProps<ColorSliderFactory>,\n __ColorSliderProps,\n ElementProps<'div', 'onChange'> {\n __staticSelector?: string;\n maxValue: number;\n overlays: React.CSSProperties[];\n round: boolean;\n thumbColor?: string;\n}\n\nexport type ColorSliderOptions = Omit<\n ColorSliderProps,\n 'maxValue' \| 'overlays' \| 'round' \| 'thumbColor'\n>;\n\nexport type ColorSliderFactory = Factory<{\n props: ColorSliderProps;\n ref: HTMLDivElement;\n stylesNames: ColorSliderStylesNames;\n}>;\n\nexport const ColorSlider = factory<ColorSliderFactory>((_props) => {\n const props = useProps('ColorSlider', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n onChange,\n onChangeEnd,\n maxValue,\n round,\n size = 'md',\n focusable = true,\n value,\n overlays,\n thumbColor = 'transparent',\n onScrubStart,\n onScrubEnd,\n __staticSelector = 'ColorPicker',\n attributes,\n ref,\n ...others\n } = props;\n\n const _getStyles = useStyles<ColorSliderFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'slider',\n });\n\n const ctxGetStyles = use(ColorPickerContext)?.getStyles;\n const getStyles = ctxGetStyles \|\| _getStyles;\n\n const theme = useMantineTheme();\n const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n const positionRef = useRef(position);\n const getChangeValue = (val: number) => (round ? Math.round(val maxValue) : val * maxValue);\n const { ref: sliderRef } = useMove(\n ({ x, y }) => {\n positionRef.current = { x, y };\n onChange?.(getChangeValue(x));\n },\n {\n onScrubEnd: () => {\n const { x } = positionRef.current;\n onChangeEnd?.(getChangeValue(x));\n onScrubEnd?.();\n },\n onScrubStart,\n }\n );\n\n useDidUpdate(() => {\n setPosition({ y: 0, x: value / maxValue });\n }, [value]);\n\n const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n event.preventDefault();\n const _position = clampUseMovePosition(pos);\n onChange?.(getChangeValue(_position.x));\n onChangeEnd?.(getChangeValue(_position.x));\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowRight': {\n handleArrow(event, { x: position.x + 0.05, y: position.y });\n break;\n }\n\n case 'ArrowLeft': {\n handleArrow(event, { x: position.x - 0.05, y: position.y });\n break;\n }\n }\n };\n\n const layers = overlays.map((overlay, index) => (\n <div {...getStyles('sliderOverlay')} style={overlay} key={index} />\n ));\n\n return (\n <Box\n {...others}\n ref={useMergedRef(sliderRef, ref)}\n {...getStyles('slider')}\n size={size}\n role=\"slider\"\n aria-valuenow={value}\n aria-valuemax={maxValue}\n aria-valuemin={0}\n tabIndex={focusable ? 0 : -1}\n onKeyDown={handleKeyDown}\n data-focus-ring={theme.focusRing}\n __vars={{\n '--cp-thumb-size': `var(--cp-thumb-size-${size})`,\n }}\n >\n {layers}\n\n <Thumb\n position={position}\n {...getStyles('thumb', { style: { top: rem(1), background: thumbColor } })}\n />\n </Box>\n );\n});\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\nColorSlider.classes = classes;\n"],"mappings":";;;;;;;;;;;;;;AA0EA,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,aACA,UACA,OACA,OAAO,MACP,YAAY,MACZ,OACA,UACA,aAAa,eACb,cACA,YACA,mBAAmB,eACnB,YACA,KACA,GAAG,WACD;CAEJ,MAAM,aAAa,UAA8B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAGD,MAAM,YADe,IAAI,kBAAkB,~~GAAG~~,aACZ;CAElC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,SAAS;EAAE,GAAG;EAAG,GAAG,QAAQ;CAAS,CAAC;CACtE,MAAM,cAAc,OAAO,QAAQ;CACnC,MAAM,kBAAkB,QAAiB,QAAQ,KAAK,MAAM,MAAM,QAAQ,IAAI,MAAM;CACpF,MAAM,EAAE,KAAK,cAAc,SACxB,EAAE,GAAG,QAAQ;EACZ,YAAY,UAAU;GAAE;GAAG;EAAE;EAC7B,WAAW,eAAe,CAAC,CAAC;CAC9B,GACA;EACE,kBAAkB;GAChB,MAAM,EAAE,MAAM,YAAY;GAC1B,cAAc,eAAe,CAAC,CAAC;GAC/B,aAAa;EACf;EACA;CACF,CACF;CAEA,mBAAmB;EACjB,YAAY;GAAE,GAAG;GAAG,GAAG,QAAQ;EAAS,CAAC;CAC3C,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,OAA4C,QAAyB;EACxF,MAAM,eAAe;EACrB,MAAM,YAAY,qBAAqB,GAAG;EAC1C,WAAW,eAAe,UAAU,CAAC,CAAC;EACtC,cAAc,eAAe,UAAU,CAAC,CAAC;CAC3C;CAEA,MAAM,iBAAiB,UAA+C;EACpE,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;EAEJ;CACF;CAEA,MAAM,SAAS,SAAS,KAAK,SAAS,UACpC,8BAAC,OAAD;EAAK,GAAI,UAAU,eAAe;EAAG,OAAO;EAAS,KAAK;CAAQ,CAAA,CACnE;CAED,OACE,qBAAC,KAAD;EACE,GAAI;EACJ,KAAK,aAAa,WAAW,GAAG;EAChC,GAAI,UAAU,QAAQ;EAChB;EACN,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,UAAU,YAAY,IAAI;EAC1B,WAAW;EACX,mBAAiB,MAAM;EACvB,QAAQ,EACN,mBAAmB,uBAAuB,KAAK,GACjD;YAdF,CAgBG,QAED,oBAAC,OAAD;GACY;GACV,GAAI,UAAU,SAAS,EAAE,OAAO;IAAE,KAAK,IAAI,CAAC;IAAG,YAAY;GAAW,EAAE,CAAC;EAC1E,CAAA,CACE;;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUA"}
1	+ {"version":3,"file":"ColorSlider.mjs","names":["classes"],"sources":["../../../../src/components/ColorPicker/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import { use, useRef, useState } from 'react';\nimport {\n clampUseMovePosition,\n useDidUpdate,\n useMergedRef,\n useMove,\n UseMovePosition,\n} from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n ElementProps,\n factory,\n Factory,\n MantineSize,\n rem,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useStyles,\n} from '../../../core';\nimport { ColorPickerContext } from '../ColorPicker.context';\nimport { Thumb } from '../Thumb/Thumb';\nimport classes from '../ColorPicker.module.css';\n\nexport type ColorSliderStylesNames = 'slider' \| 'sliderOverlay' \| 'thumb';\n\nexport interface __ColorSliderProps extends ElementProps<'div', 'onChange'> {\n /** Controlled component value /\n value: number;\n\n /* Called when value changes /\n onChange?: (value: number) => void;\n\n /* Called when user stops dragging the slider or uses keyboard to change value /\n onChangeEnd?: (value: number) => void;\n\n /* Called when user starts dragging the slider /\n onScrubStart?: () => void;\n\n /* Called when user stops dragging the slider /\n onScrubEnd?: () => void;\n\n /* Slider size @default 'md' /\n size?: MantineSize \| (string & {});\n\n /* If set, slider thumb can be focused @default true /\n focusable?: boolean;\n}\n\nexport interface ColorSliderProps\n extends\n BoxProps,\n StylesApiProps<ColorSliderFactory>,\n __ColorSliderProps,\n ElementProps<'div', 'onChange'> {\n __staticSelector?: string;\n maxValue: number;\n overlays: React.CSSProperties[];\n round: boolean;\n thumbColor?: string;\n}\n\nexport type ColorSliderOptions = Omit<\n ColorSliderProps,\n 'maxValue' \| 'overlays' \| 'round' \| 'thumbColor'\n>;\n\nexport type ColorSliderFactory = Factory<{\n props: ColorSliderProps;\n ref: HTMLDivElement;\n stylesNames: ColorSliderStylesNames;\n}>;\n\nexport const ColorSlider = factory<ColorSliderFactory>((_props) => {\n const props = useProps('ColorSlider', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n onChange,\n onChangeEnd,\n maxValue,\n round,\n size = 'md',\n focusable = true,\n value,\n overlays,\n thumbColor = 'transparent',\n onScrubStart,\n onScrubEnd,\n __staticSelector = 'ColorPicker',\n attributes,\n ref,\n ...others\n } = props;\n\n const _getStyles = useStyles<ColorSliderFactory>({\n name: __staticSelector,\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'slider',\n });\n\n const ctxGetStyles = use(ColorPickerContext)?.getStyles;\n const getStyles = ctxGetStyles \|\| _getStyles;\n\n const theme = useMantineTheme();\n const [position, setPosition] = useState({ y: 0, x: value / maxValue });\n const positionRef = useRef(position);\n const getChangeValue = (val: number) => (round ? Math.round(val maxValue) : val * maxValue);\n const { ref: sliderRef } = useMove(\n ({ x, y }) => {\n positionRef.current = { x, y };\n onChange?.(getChangeValue(x));\n },\n {\n onScrubEnd: () => {\n const { x } = positionRef.current;\n onChangeEnd?.(getChangeValue(x));\n onScrubEnd?.();\n },\n onScrubStart,\n }\n );\n\n useDidUpdate(() => {\n setPosition({ y: 0, x: value / maxValue });\n }, [value]);\n\n const handleArrow = (event: React.KeyboardEvent<HTMLDivElement>, pos: UseMovePosition) => {\n event.preventDefault();\n const _position = clampUseMovePosition(pos);\n onChange?.(getChangeValue(_position.x));\n onChangeEnd?.(getChangeValue(_position.x));\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n switch (event.key) {\n case 'ArrowRight': {\n handleArrow(event, { x: position.x + 0.05, y: position.y });\n break;\n }\n\n case 'ArrowLeft': {\n handleArrow(event, { x: position.x - 0.05, y: position.y });\n break;\n }\n }\n };\n\n const layers = overlays.map((overlay, index) => (\n <div {...getStyles('sliderOverlay')} style={overlay} key={index} />\n ));\n\n return (\n <Box\n {...others}\n ref={useMergedRef(sliderRef, ref)}\n {...getStyles('slider')}\n size={size}\n role=\"slider\"\n aria-valuenow={value}\n aria-valuemax={maxValue}\n aria-valuemin={0}\n tabIndex={focusable ? 0 : -1}\n onKeyDown={handleKeyDown}\n data-focus-ring={theme.focusRing}\n __vars={{\n '--cp-thumb-size': `var(--cp-thumb-size-${size})`,\n }}\n >\n {layers}\n\n <Thumb\n position={position}\n {...getStyles('thumb', { style: { top: rem(1), background: thumbColor } })}\n />\n </Box>\n );\n});\n\nColorSlider.displayName = '@mantine/core/ColorSlider';\nColorSlider.classes = classes;\n"],"mappings":";;;;;;;;;;;;;;AA0EA,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,aACA,UACA,OACA,OAAO,MACP,YAAY,MACZ,OACA,UACA,aAAa,eACb,cACA,YACA,mBAAmB,eACnB,YACA,KACA,GAAG,WACD;CAEJ,MAAM,aAAa,UAA8B;EAC/C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAGD,MAAM,YADe,IAAI,kBAAkB,CAAC,EAAE,aACZ;CAElC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,CAAC,UAAU,eAAe,SAAS;EAAE,GAAG;EAAG,GAAG,QAAQ;CAAS,CAAC;CACtE,MAAM,cAAc,OAAO,QAAQ;CACnC,MAAM,kBAAkB,QAAiB,QAAQ,KAAK,MAAM,MAAM,QAAQ,IAAI,MAAM;CACpF,MAAM,EAAE,KAAK,cAAc,SACxB,EAAE,GAAG,QAAQ;EACZ,YAAY,UAAU;GAAE;GAAG;EAAE;EAC7B,WAAW,eAAe,CAAC,CAAC;CAC9B,GACA;EACE,kBAAkB;GAChB,MAAM,EAAE,MAAM,YAAY;GAC1B,cAAc,eAAe,CAAC,CAAC;GAC/B,aAAa;EACf;EACA;CACF,CACF;CAEA,mBAAmB;EACjB,YAAY;GAAE,GAAG;GAAG,GAAG,QAAQ;EAAS,CAAC;CAC3C,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,OAA4C,QAAyB;EACxF,MAAM,eAAe;EACrB,MAAM,YAAY,qBAAqB,GAAG;EAC1C,WAAW,eAAe,UAAU,CAAC,CAAC;EACtC,cAAc,eAAe,UAAU,CAAC,CAAC;CAC3C;CAEA,MAAM,iBAAiB,UAA+C;EACpE,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;GAGF,KAAK;IACH,YAAY,OAAO;KAAE,GAAG,SAAS,IAAI;KAAM,GAAG,SAAS;IAAE,CAAC;IAC1D;EAEJ;CACF;CAEA,MAAM,SAAS,SAAS,KAAK,SAAS,UACpC,8BAAC,OAAD;EAAK,GAAI,UAAU,eAAe;EAAG,OAAO;EAAS,KAAK;CAAQ,CAAA,CACnE;CAED,OACE,qBAAC,KAAD;EACE,GAAI;EACJ,KAAK,aAAa,WAAW,GAAG;EAChC,GAAI,UAAU,QAAQ;EAChB;EACN,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,UAAU,YAAY,IAAI;EAC1B,WAAW;EACX,mBAAiB,MAAM;EACvB,QAAQ,EACN,mBAAmB,uBAAuB,KAAK,GACjD;YAdF,CAgBG,QAED,oBAAC,OAAD;GACY;GACV,GAAI,UAAU,SAAS,EAAE,OAAO;IAAE,KAAK,IAAI,CAAC;IAAG,YAAY;GAAW,EAAE,CAAC;EAC1E,CAAA,CACE;;AAET,CAAC;AAED,YAAY,cAAc;AAC1B,YAAY,UAAUA"}

package/esm/components/ColorPicker/converters/converters.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"converters.mjs","names":[],"sources":["../../../../src/components/ColorPicker/converters/converters.ts"],"sourcesContent":["import { ColorFormat, HsvaColor, RgbaColor } from '../ColorPicker.types';\nimport { round } from './parsers';\n\nexport function hsvaToRgbaObject({ h, s, v, a }: HsvaColor): RgbaColor {\n const _h = (h / 360) * 6;\n const _s = s / 100;\n const _v = v / 100;\n\n const hh = Math.floor(_h);\n const l = _v * (1 - _s);\n const c = _v * (1 - (_h - hh) * _s);\n const d = _v * (1 - (1 - _h + hh) * _s);\n const module = hh % 6;\n\n return {\n r: round([_v, c, l, l, d, _v][module] * 255),\n g: round([d, _v, _v, c, l, l][module] * 255),\n b: round([l, l, d, _v, _v, c][module] * 255),\n a: round(a, 2),\n };\n}\n\nexport function hsvaToRgba(color: HsvaColor, includeAlpha: boolean) {\n const { r, g, b, a } = hsvaToRgbaObject(color);\n\n if (!includeAlpha) {\n return `rgb(${r}, ${g}, ${b})`;\n }\n\n return `rgba(${r}, ${g}, ${b}, ${round(a, 2)})`;\n}\n\nexport function hsvaToHsl({ h, s, v, a }: HsvaColor, includeAlpha: boolean) {\n const hh = ((200 - s) * v) / 100;\n\n const result = {\n h: Math.round(h),\n s: Math.round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),\n l: Math.round(hh / 2),\n };\n\n if (!includeAlpha) {\n return `hsl(${result.h}, ${result.s}%, ${result.l}%)`;\n }\n\n return `hsla(${result.h}, ${result.s}%, ${result.l}%, ${round(a, 2)})`;\n}\n\nfunction formatHexPart(number: number) {\n const hex = number.toString(16);\n return hex.length < 2 ? `0${hex}` : hex;\n}\n\nexport function hsvaToHex(color: HsvaColor) {\n const { r, g, b } = hsvaToRgbaObject(color);\n return `#${formatHexPart(r)}${formatHexPart(g)}${formatHexPart(b)}`;\n}\n\nexport function hsvaToHexa(color: HsvaColor) {\n const a = Math.round(color.a * 255);\n\n return `${hsvaToHex(color)}${formatHexPart(a)}`;\n}\n\nconst CONVERTERS: Record<ColorFormat, (color: HsvaColor) => string> = {\n hex: hsvaToHex,\n hexa: (color) => hsvaToHexa(color),\n rgb: (color) => hsvaToRgba(color, false),\n rgba: (color) => hsvaToRgba(color, true),\n hsl: (color) => hsvaToHsl(color, false),\n hsla: (color) => hsvaToHsl(color, true),\n};\n\nexport function convertHsvaTo(format: ColorFormat, color: HsvaColor) {\n if (!color) {\n return '#000000';\n }\n\n if (!(format in CONVERTERS)) {\n return CONVERTERS.hex(color);\n }\n\n return CONVERTERS[format](color);\n}\n"],"mappings":";;;AAGA,SAAgB,iBAAiB,EAAE,GAAG,GAAG,GAAG,KAA2B;CACrE,MAAM,KAAM,IAAI,MAAO;CACvB,MAAM,KAAK,IAAI;CACf,MAAM,KAAK,IAAI;CAEf,MAAM,KAAK,KAAK,MAAM,EAAE;CACxB,MAAM,IAAI,MAAM,IAAI;CACpB,MAAM,IAAI,MAAM,KAAK,KAAK,MAAM;CAChC,MAAM,IAAI,MAAM,KAAK,IAAI,KAAK,MAAM;CACpC,MAAM,SAAS,KAAK;CAEpB,OAAO;EACL,GAAG,MAAM;GAAC;GAAI;GAAG;GAAG;GAAG;GAAG;EAAE,~~EAAE~~,UAAU,GAAG;EAC3C,GAAG,MAAM;GAAC;GAAG;GAAI;GAAI;GAAG;GAAG;EAAC,~~EAAE~~,UAAU,GAAG;EAC3C,GAAG,MAAM;GAAC;GAAG;GAAG;GAAG;GAAI;GAAI;EAAC,~~EAAE~~,UAAU,GAAG;EAC3C,GAAG,MAAM,GAAG,CAAC;CACf;AACF;AAEA,SAAgB,WAAW,OAAkB,cAAuB;CAClE,MAAM,EAAE,GAAG,GAAG,GAAG,MAAM,iBAAiB,KAAK;CAE7C,IAAI,CAAC,cACH,OAAO,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;CAG9B,OAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,MAAM,GAAG,CAAC,EAAE;AAC/C;AAEA,SAAgB,UAAU,EAAE,GAAG,GAAG,GAAG,KAAgB,cAAuB;CAC1E,MAAM,MAAO,MAAM,KAAK,IAAK;CAE7B,MAAM,SAAS;EACb,GAAG,KAAK,MAAM,CAAC;EACf,GAAG,KAAK,MAAM,KAAK,KAAK,KAAK,MAAQ,IAAI,IAAK,OAAO,MAAM,MAAM,KAAK,MAAM,MAAO,MAAM,CAAC;EAC1F,GAAG,KAAK,MAAM,KAAK,CAAC;CACtB;CAEA,IAAI,CAAC,cACH,OAAO,OAAO,OAAO,EAAE,IAAI,OAAO,EAAE,KAAK,OAAO,EAAE;CAGpD,OAAO,QAAQ,OAAO,EAAE,IAAI,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,MAAM,GAAG,CAAC,EAAE;AACtE;AAEA,SAAS,cAAc,QAAgB;CACrC,MAAM,MAAM,OAAO,SAAS,EAAE;CAC9B,OAAO,IAAI,SAAS,IAAI,IAAI,QAAQ;AACtC;AAEA,SAAgB,UAAU,OAAkB;CAC1C,MAAM,EAAE,GAAG,GAAG,MAAM,iBAAiB,KAAK;CAC1C,OAAO,IAAI,cAAc,CAAC,IAAI,cAAc,CAAC,IAAI,cAAc,CAAC;AAClE;AAEA,SAAgB,WAAW,OAAkB;CAC3C,MAAM,IAAI,KAAK,MAAM,MAAM,IAAI,GAAG;CAElC,OAAO,GAAG,UAAU,KAAK,IAAI,cAAc,CAAC;AAC9C;AAEA,MAAM,aAAgE;CACpE,KAAK;CACL,OAAO,UAAU,WAAW,KAAK;CACjC,MAAM,UAAU,WAAW,OAAO,KAAK;CACvC,OAAO,UAAU,WAAW,OAAO,IAAI;CACvC,MAAM,UAAU,UAAU,OAAO,KAAK;CACtC,OAAO,UAAU,UAAU,OAAO,IAAI;AACxC;AAEA,SAAgB,cAAc,QAAqB,OAAkB;CACnE,IAAI,CAAC,OACH,OAAO;CAGT,IAAI,EAAE,UAAU,aACd,OAAO,WAAW,IAAI,KAAK;CAG7B,OAAO,WAAW,~~QAAQ~~,KAAK;AACjC"}
1	+ {"version":3,"file":"converters.mjs","names":[],"sources":["../../../../src/components/ColorPicker/converters/converters.ts"],"sourcesContent":["import { ColorFormat, HsvaColor, RgbaColor } from '../ColorPicker.types';\nimport { round } from './parsers';\n\nexport function hsvaToRgbaObject({ h, s, v, a }: HsvaColor): RgbaColor {\n const _h = (h / 360) * 6;\n const _s = s / 100;\n const _v = v / 100;\n\n const hh = Math.floor(_h);\n const l = _v * (1 - _s);\n const c = _v * (1 - (_h - hh) * _s);\n const d = _v * (1 - (1 - _h + hh) * _s);\n const module = hh % 6;\n\n return {\n r: round([_v, c, l, l, d, _v][module] * 255),\n g: round([d, _v, _v, c, l, l][module] * 255),\n b: round([l, l, d, _v, _v, c][module] * 255),\n a: round(a, 2),\n };\n}\n\nexport function hsvaToRgba(color: HsvaColor, includeAlpha: boolean) {\n const { r, g, b, a } = hsvaToRgbaObject(color);\n\n if (!includeAlpha) {\n return `rgb(${r}, ${g}, ${b})`;\n }\n\n return `rgba(${r}, ${g}, ${b}, ${round(a, 2)})`;\n}\n\nexport function hsvaToHsl({ h, s, v, a }: HsvaColor, includeAlpha: boolean) {\n const hh = ((200 - s) * v) / 100;\n\n const result = {\n h: Math.round(h),\n s: Math.round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),\n l: Math.round(hh / 2),\n };\n\n if (!includeAlpha) {\n return `hsl(${result.h}, ${result.s}%, ${result.l}%)`;\n }\n\n return `hsla(${result.h}, ${result.s}%, ${result.l}%, ${round(a, 2)})`;\n}\n\nfunction formatHexPart(number: number) {\n const hex = number.toString(16);\n return hex.length < 2 ? `0${hex}` : hex;\n}\n\nexport function hsvaToHex(color: HsvaColor) {\n const { r, g, b } = hsvaToRgbaObject(color);\n return `#${formatHexPart(r)}${formatHexPart(g)}${formatHexPart(b)}`;\n}\n\nexport function hsvaToHexa(color: HsvaColor) {\n const a = Math.round(color.a * 255);\n\n return `${hsvaToHex(color)}${formatHexPart(a)}`;\n}\n\nconst CONVERTERS: Record<ColorFormat, (color: HsvaColor) => string> = {\n hex: hsvaToHex,\n hexa: (color) => hsvaToHexa(color),\n rgb: (color) => hsvaToRgba(color, false),\n rgba: (color) => hsvaToRgba(color, true),\n hsl: (color) => hsvaToHsl(color, false),\n hsla: (color) => hsvaToHsl(color, true),\n};\n\nexport function convertHsvaTo(format: ColorFormat, color: HsvaColor) {\n if (!color) {\n return '#000000';\n }\n\n if (!(format in CONVERTERS)) {\n return CONVERTERS.hex(color);\n }\n\n return CONVERTERS[format](color);\n}\n"],"mappings":";;;AAGA,SAAgB,iBAAiB,EAAE,GAAG,GAAG,GAAG,KAA2B;CACrE,MAAM,KAAM,IAAI,MAAO;CACvB,MAAM,KAAK,IAAI;CACf,MAAM,KAAK,IAAI;CAEf,MAAM,KAAK,KAAK,MAAM,EAAE;CACxB,MAAM,IAAI,MAAM,IAAI;CACpB,MAAM,IAAI,MAAM,KAAK,KAAK,MAAM;CAChC,MAAM,IAAI,MAAM,KAAK,IAAI,KAAK,MAAM;CACpC,MAAM,SAAS,KAAK;CAEpB,OAAO;EACL,GAAG,MAAM;GAAC;GAAI;GAAG;GAAG;GAAG;GAAG;EAAE,CAAC,CAAC,UAAU,GAAG;EAC3C,GAAG,MAAM;GAAC;GAAG;GAAI;GAAI;GAAG;GAAG;EAAC,CAAC,CAAC,UAAU,GAAG;EAC3C,GAAG,MAAM;GAAC;GAAG;GAAG;GAAG;GAAI;GAAI;EAAC,CAAC,CAAC,UAAU,GAAG;EAC3C,GAAG,MAAM,GAAG,CAAC;CACf;AACF;AAEA,SAAgB,WAAW,OAAkB,cAAuB;CAClE,MAAM,EAAE,GAAG,GAAG,GAAG,MAAM,iBAAiB,KAAK;CAE7C,IAAI,CAAC,cACH,OAAO,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;CAG9B,OAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,MAAM,GAAG,CAAC,EAAE;AAC/C;AAEA,SAAgB,UAAU,EAAE,GAAG,GAAG,GAAG,KAAgB,cAAuB;CAC1E,MAAM,MAAO,MAAM,KAAK,IAAK;CAE7B,MAAM,SAAS;EACb,GAAG,KAAK,MAAM,CAAC;EACf,GAAG,KAAK,MAAM,KAAK,KAAK,KAAK,MAAQ,IAAI,IAAK,OAAO,MAAM,MAAM,KAAK,MAAM,MAAO,MAAM,CAAC;EAC1F,GAAG,KAAK,MAAM,KAAK,CAAC;CACtB;CAEA,IAAI,CAAC,cACH,OAAO,OAAO,OAAO,EAAE,IAAI,OAAO,EAAE,KAAK,OAAO,EAAE;CAGpD,OAAO,QAAQ,OAAO,EAAE,IAAI,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,MAAM,GAAG,CAAC,EAAE;AACtE;AAEA,SAAS,cAAc,QAAgB;CACrC,MAAM,MAAM,OAAO,SAAS,EAAE;CAC9B,OAAO,IAAI,SAAS,IAAI,IAAI,QAAQ;AACtC;AAEA,SAAgB,UAAU,OAAkB;CAC1C,MAAM,EAAE,GAAG,GAAG,MAAM,iBAAiB,KAAK;CAC1C,OAAO,IAAI,cAAc,CAAC,IAAI,cAAc,CAAC,IAAI,cAAc,CAAC;AAClE;AAEA,SAAgB,WAAW,OAAkB;CAC3C,MAAM,IAAI,KAAK,MAAM,MAAM,IAAI,GAAG;CAElC,OAAO,GAAG,UAAU,KAAK,IAAI,cAAc,CAAC;AAC9C;AAEA,MAAM,aAAgE;CACpE,KAAK;CACL,OAAO,UAAU,WAAW,KAAK;CACjC,MAAM,UAAU,WAAW,OAAO,KAAK;CACvC,OAAO,UAAU,WAAW,OAAO,IAAI;CACvC,MAAM,UAAU,UAAU,OAAO,KAAK;CACtC,OAAO,UAAU,UAAU,OAAO,IAAI;AACxC;AAEA,SAAgB,cAAc,QAAqB,OAAkB;CACnE,IAAI,CAAC,OACH,OAAO;CAGT,IAAI,EAAE,UAAU,aACd,OAAO,WAAW,IAAI,KAAK;CAG7B,OAAO,WAAW,OAAO,CAAC,KAAK;AACjC"}

package/esm/components/ColorPicker/converters/parsers.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"parsers.mjs","names":[],"sources":["../../../../src/components/ColorPicker/converters/parsers.ts"],"sourcesContent":["import { ColorFormat, HslaColor, HsvaColor, RgbaColor } from '../ColorPicker.types';\n\nexport function round(number: number, digits = 0, base = 10 ** digits) {\n return Math.round(base * number) / base;\n}\n\nfunction hslaToHsva({ h, s, l, a }: HslaColor): HsvaColor {\n const ss = s * ((l < 50 ? l : 100 - l) / 100);\n\n return {\n h,\n s: ss > 0 ? ((2 * ss) / (l + ss)) * 100 : 0,\n v: l + ss,\n a,\n };\n}\n\nconst angleUnits: Record<string, number> = {\n grad: 360 / 400,\n turn: 360,\n rad: 360 / (Math.PI * 2),\n};\n\nexport function parseHue(value: string, unit = 'deg') {\n return Number(value) * (angleUnits[unit] \|\| 1);\n}\n\nconst HSL_REGEXP =\n /hsla?\$?\\s(-?\\d\\.?\\d+)(deg\|rad\|grad\|turn)?[,\\s]+(-?\\d\\.?\\d+)%?[,\\s]+(-?\\d\\.?\\d+)%?,?\\s[/\\s](-?\\d\\.?\\d+)?(%)?\\s\$?/i;\n\nexport function parseHsla(color: string): HsvaColor {\n const match = HSL_REGEXP.exec(color);\n\n if (!match) {\n return { h: 0, s: 0, v: 0, a: 1 };\n }\n\n return hslaToHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n l: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),\n });\n}\n\nfunction rgbaToHsva({ r, g, b, a }: RgbaColor): HsvaColor {\n const max = Math.max(r, g, b);\n const delta = max - Math.min(r, g, b);\n\n const hh = delta\n ? max === r\n ? (g - b) / delta\n : max === g\n ? 2 + (b - r) / delta\n : 4 + (r - g) / delta\n : 0;\n\n return {\n h: round(60 * (hh < 0 ? hh + 6 : hh), 3),\n s: round(max ? (delta / max) * 100 : 0, 3),\n v: round((max / 255) * 100, 3),\n a,\n };\n}\n\nexport function parseHex(color: string): HsvaColor {\n const hex = color[0] === '#' ? color.slice(1) : color;\n\n if (hex.length === 3) {\n return rgbaToHsva({\n r: parseInt(hex[0] + hex[0], 16),\n g: parseInt(hex[1] + hex[1], 16),\n b: parseInt(hex[2] + hex[2], 16),\n a: 1,\n });\n }\n\n return rgbaToHsva({\n r: parseInt(hex.slice(0, 2), 16),\n g: parseInt(hex.slice(2, 4), 16),\n b: parseInt(hex.slice(4, 6), 16),\n a: 1,\n });\n}\n\nexport function parseHexa(color: string): HsvaColor {\n const hex = color[0] === '#' ? color.slice(1) : color;\n\n const roundA = (a: string) => round(parseInt(a, 16) / 255, 3);\n if (hex.length === 4) {\n const withoutOpacity = hex.slice(0, 3);\n const a = roundA(hex[3] + hex[3]);\n\n const hsvaColor: HsvaColor = { ...parseHex(withoutOpacity), a };\n return hsvaColor;\n }\n\n const withoutOpacity = hex.slice(0, 6);\n const a = roundA(hex.slice(6, 8));\n const hsvaColor: HsvaColor = { ...parseHex(withoutOpacity), a };\n return hsvaColor;\n}\n\nconst RGB_REGEXP =\n /rgba?\$?\\s(-?\\d\\.?\\d+)(%)?[,\\s]+(-?\\d\\.?\\d+)(%)?[,\\s]+(-?\\d\\.?\\d+)(%)?,?\\s[/\\s](-?\\d\\.?\\d+)?(%)?\\s\$?/i;\n\nexport function parseRgba(color: string): HsvaColor {\n const match = RGB_REGEXP.exec(color);\n\n if (!match) {\n return { h: 0, s: 0, v: 0, a: 1 };\n }\n\n return rgbaToHsva({\n r: Number(match[1]) / (match[2] ? 100 / 255 : 1),\n g: Number(match[3]) / (match[4] ? 100 / 255 : 1),\n b: Number(match[5]) / (match[6] ? 100 / 255 : 1),\n a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1),\n });\n}\n\nconst VALIDATION_REGEXP: Record<ColorFormat, RegExp> = {\n hex: /^#?([0-9A-F]{3}){1,2}$/i,\n hexa: /^#?([0-9A-F]{4}){1,2}$/i,\n rgb: /^rgb\$(\\d+),\\s(\\d+),\\s(\\d+)(?:,\\s(\\d+(?:\\.\\d+)?))?\$$/i,\n rgba: /^rgba\$(\\d+),\\s(\\d+),\\s(\\d+)(?:,\\s(\\d+(?:\\.\\d+)?))?\$$/i,\n hsl: /hsl\$\\s(\\d+)\\s,\\s(\\d+(?:\\.\\d+)?%)\\s,\\s(\\d+(?:\\.\\d+)?%)\$/i,\n hsla: /^hsla\$(\\d+),\\s([\\d.]+)%,\\s([\\d.]+)%,\\s(\\d*(?:\\.\\d+)?)\$$/i,\n};\n\nconst CONVERTERS: Record<ColorFormat, (color: string) => HsvaColor> = {\n hex: parseHex,\n hexa: parseHexa,\n rgb: parseRgba,\n rgba: parseRgba,\n hsl: parseHsla,\n hsla: parseHsla,\n};\n\nexport function isColorValid(color: string) {\n for (const [, regexp] of Object.entries(VALIDATION_REGEXP)) {\n if (regexp.test(color)) {\n return true;\n }\n }\n\n return false;\n}\n\nexport function parseColor(color: string): HsvaColor {\n if (typeof color !== 'string') {\n return { h: 0, s: 0, v: 0, a: 1 };\n }\n\n if (color === 'transparent') {\n return { h: 0, s: 0, v: 0, a: 0 };\n }\n\n const trimmed = color.trim();\n\n for (const [rule, regexp] of Object.entries(VALIDATION_REGEXP)) {\n if (regexp.test(trimmed)) {\n return CONVERTERS[rule as keyof typeof CONVERTERS](trimmed);\n }\n }\n\n return { h: 0, s: 0, v: 0, a: 1 };\n}\n"],"mappings":"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~~MAAiC~~,OAAO;CAI9D,OAAO;EAAE,GAAG;EAAG,GAAG;EAAG,GAAG;EAAG,GAAG;CAAE;AAClC"}
1	+ {"version":3,"file":"parsers.mjs","names":[],"sources":["../../../../src/components/ColorPicker/converters/parsers.ts"],"sourcesContent":["import { ColorFormat, HslaColor, HsvaColor, RgbaColor } from '../ColorPicker.types';\n\nexport function round(number: number, digits = 0, base = 10 ** digits) {\n return Math.round(base * number) / base;\n}\n\nfunction hslaToHsva({ h, s, l, a }: HslaColor): HsvaColor {\n const ss = s * ((l < 50 ? l : 100 - l) / 100);\n\n return {\n h,\n s: ss > 0 ? ((2 * ss) / (l + ss)) * 100 : 0,\n v: l + ss,\n a,\n };\n}\n\nconst angleUnits: Record<string, number> = {\n grad: 360 / 400,\n turn: 360,\n rad: 360 / (Math.PI * 2),\n};\n\nexport function parseHue(value: string, unit = 'deg') {\n return Number(value) * (angleUnits[unit] \|\| 1);\n}\n\nconst HSL_REGEXP =\n /hsla?\$?\\s(-?\\d\\.?\\d+)(deg\|rad\|grad\|turn)?[,\\s]+(-?\\d\\.?\\d+)%?[,\\s]+(-?\\d\\.?\\d+)%?,?\\s[/\\s](-?\\d\\.?\\d+)?(%)?\\s\$?/i;\n\nexport function parseHsla(color: string): HsvaColor {\n const match = HSL_REGEXP.exec(color);\n\n if (!match) {\n return { h: 0, s: 0, v: 0, a: 1 };\n }\n\n return hslaToHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n l: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),\n });\n}\n\nfunction rgbaToHsva({ r, g, b, a }: RgbaColor): HsvaColor {\n const max = Math.max(r, g, b);\n const delta = max - Math.min(r, g, b);\n\n const hh = delta\n ? max === r\n ? (g - b) / delta\n : max === g\n ? 2 + (b - r) / delta\n : 4 + (r - g) / delta\n : 0;\n\n return {\n h: round(60 * (hh < 0 ? hh + 6 : hh), 3),\n s: round(max ? (delta / max) * 100 : 0, 3),\n v: round((max / 255) * 100, 3),\n a,\n };\n}\n\nexport function parseHex(color: string): HsvaColor {\n const hex = color[0] === '#' ? color.slice(1) : color;\n\n if (hex.length === 3) {\n return rgbaToHsva({\n r: parseInt(hex[0] + hex[0], 16),\n g: parseInt(hex[1] + hex[1], 16),\n b: parseInt(hex[2] + hex[2], 16),\n a: 1,\n });\n }\n\n return rgbaToHsva({\n r: parseInt(hex.slice(0, 2), 16),\n g: parseInt(hex.slice(2, 4), 16),\n b: parseInt(hex.slice(4, 6), 16),\n a: 1,\n });\n}\n\nexport function parseHexa(color: string): HsvaColor {\n const hex = color[0] === '#' ? color.slice(1) : color;\n\n const roundA = (a: string) => round(parseInt(a, 16) / 255, 3);\n if (hex.length === 4) {\n const withoutOpacity = hex.slice(0, 3);\n const a = roundA(hex[3] + hex[3]);\n\n const hsvaColor: HsvaColor = { ...parseHex(withoutOpacity), a };\n return hsvaColor;\n }\n\n const withoutOpacity = hex.slice(0, 6);\n const a = roundA(hex.slice(6, 8));\n const hsvaColor: HsvaColor = { ...parseHex(withoutOpacity), a };\n return hsvaColor;\n}\n\nconst RGB_REGEXP =\n /rgba?\$?\\s(-?\\d\\.?\\d+)(%)?[,\\s]+(-?\\d\\.?\\d+)(%)?[,\\s]+(-?\\d\\.?\\d+)(%)?,?\\s[/\\s](-?\\d\\.?\\d+)?(%)?\\s\$?/i;\n\nexport function parseRgba(color: string): HsvaColor {\n const match = RGB_REGEXP.exec(color);\n\n if (!match) {\n return { h: 0, s: 0, v: 0, a: 1 };\n }\n\n return rgbaToHsva({\n r: Number(match[1]) / (match[2] ? 100 / 255 : 1),\n g: Number(match[3]) / (match[4] ? 100 / 255 : 1),\n b: Number(match[5]) / (match[6] ? 100 / 255 : 1),\n a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1),\n });\n}\n\nconst VALIDATION_REGEXP: Record<ColorFormat, RegExp> = {\n hex: /^#?([0-9A-F]{3}){1,2}$/i,\n hexa: /^#?([0-9A-F]{4}){1,2}$/i,\n rgb: /^rgb\$(\\d+),\\s(\\d+),\\s(\\d+)(?:,\\s(\\d+(?:\\.\\d+)?))?\$$/i,\n rgba: /^rgba\$(\\d+),\\s(\\d+),\\s(\\d+)(?:,\\s(\\d+(?:\\.\\d+)?))?\$$/i,\n hsl: /hsl\$\\s(\\d+)\\s,\\s(\\d+(?:\\.\\d+)?%)\\s,\\s(\\d+(?:\\.\\d+)?%)\$/i,\n hsla: /^hsla\$(\\d+),\\s([\\d.]+)%,\\s([\\d.]+)%,\\s(\\d*(?:\\.\\d+)?)\$$/i,\n};\n\nconst CONVERTERS: Record<ColorFormat, (color: string) => HsvaColor> = {\n hex: parseHex,\n hexa: parseHexa,\n rgb: parseRgba,\n rgba: parseRgba,\n hsl: parseHsla,\n hsla: parseHsla,\n};\n\nexport function isColorValid(color: string) {\n for (const [, regexp] of Object.entries(VALIDATION_REGEXP)) {\n if (regexp.test(color)) {\n return true;\n }\n }\n\n return false;\n}\n\nexport function parseColor(color: string): HsvaColor {\n if (typeof color !== 'string') {\n return { h: 0, s: 0, v: 0, a: 1 };\n }\n\n if (color === 'transparent') {\n return { h: 0, s: 0, v: 0, a: 0 };\n }\n\n const trimmed = color.trim();\n\n for (const [rule, regexp] of Object.entries(VALIDATION_REGEXP)) {\n if (regexp.test(trimmed)) {\n return CONVERTERS[rule as keyof typeof CONVERTERS](trimmed);\n }\n }\n\n return { h: 0, s: 0, v: 0, a: 1 };\n}\n"],"mappings":"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"}

package/esm/components/Combobox/Combobox.mjs CHANGED Viewed

@@ -26,6 +26,7 @@ import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Combobox/Combobox.tsx
 const defaultProps = {
 	keepMounted: true,
+	keepMountedMode: "display-none",
 	withinPortal: true,
 	resetSelectionOnOptionHover: false,
 	width: "target",

package/esm/components/Combobox/Combobox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.mjs","names":["classes"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n createVarsResolver,\n ExtendComponent,\n Factory,\n getFontSize,\n getSize,\n MantineSize,\n MantineThemeComponent,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { PopoverMiddlewares } from '../Popover/Popover.types';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n ComboboxClearButton,\n ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n ComboboxDropdownTarget,\n ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n ComboboxEventsTarget,\n ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n ComboboxHiddenInput,\n ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n \| 'options'\n \| 'dropdown'\n \| 'option'\n \| 'search'\n \| 'empty'\n \| 'footer'\n \| 'header'\n \| 'group'\n \| 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n options: '--combobox-option-fz' \| '--combobox-option-padding';\n dropdown: '--combobox-padding' \| '--combobox-option-fz' \| '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n __staticSelector?: string;\n\n /** Combobox content /\n children?: React.ReactNode;\n\n /* Combobox store, can be used to control combobox state /\n store?: ComboboxStore;\n\n /* Called when item is selected with the `Enter` key or by clicking it /\n onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n /* Controls items `font-size` and `padding` @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* Controls `padding` of the dropdown @default 4 /\n dropdownPadding?: React.CSSProperties['padding'];\n\n /* Determines whether selection should be reset when option is hovered @default false /\n resetSelectionOnOptionHover?: boolean;\n\n /* Determines whether the `Combobox` value can be changed /\n readOnly?: boolean;\n\n /* If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */\n floatingHeight?: 'viewport';\n}\n\nexport type ComboboxFactory = Factory<{\n props: ComboboxProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxStylesNames;\n vars: ComboboxCSSVariables;\n staticComponents: {\n Target: typeof ComboboxTarget;\n Dropdown: typeof ComboboxDropdown;\n Options: typeof ComboboxOptions;\n Option: typeof ComboboxOption;\n Search: typeof ComboboxSearch;\n Empty: typeof ComboboxEmpty;\n Chevron: typeof ComboboxChevron;\n Footer: typeof ComboboxFooter;\n Header: typeof ComboboxHeader;\n EventsTarget: typeof ComboboxEventsTarget;\n DropdownTarget: typeof ComboboxDropdownTarget;\n Group: typeof ComboboxGroup;\n ClearButton: typeof ComboboxClearButton;\n HiddenInput: typeof ComboboxHiddenInput;\n };\n}>;\n\nconst defaultProps = {\n keepMounted: true,\n withinPortal: true,\n resetSelectionOnOptionHover: false,\n width: 'target',\n transitionProps: { transition: 'fade', duration: 0 },\n size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n options: {\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n\n dropdown: {\n '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n const props = useProps('Combobox', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n children,\n store: controlledStore,\n vars,\n onOptionSubmit,\n onClose,\n size,\n dropdownPadding,\n resetSelectionOnOptionHover,\n __staticSelector,\n readOnly,\n attributes,\n floatingHeight,\n middlewares,\n ...others\n } = props;\n\n const resolvedMiddlewares: PopoverMiddlewares \| undefined =\n floatingHeight === 'viewport'\n ? {\n ...middlewares,\n flip: false,\n size: {\n ...(typeof middlewares?.size === 'object' ? middlewares.size : {}),\n padding:\n typeof middlewares?.size === 'object' && middlewares.size.padding !== undefined\n ? middlewares.size.padding\n : 10,\n apply: ({ availableHeight, availableWidth, elements, ...rest }) => {\n elements.floating.style.setProperty(\n '--combobox-floating-max-height',\n `${availableHeight}px`\n );\n const userSize = middlewares?.size;\n if (typeof userSize === 'object' && userSize.apply) {\n userSize.apply({ availableHeight, availableWidth, elements, ...rest });\n } else if (userSize) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n },\n },\n }\n : middlewares;\n\n const uncontrolledStore = useCombobox();\n const store = controlledStore \|\| uncontrolledStore;\n\n const getStyles = useStyles<ComboboxFactory>({\n name: __staticSelector \|\| 'Combobox',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const onDropdownClose = () => {\n onClose?.();\n store.closeDropdown();\n };\n\n return (\n <ComboboxProvider\n value={{\n getStyles,\n store,\n onOptionSubmit,\n size,\n resetSelectionOnOptionHover,\n readOnly,\n floatingHeight,\n }}\n >\n <Popover\n opened={store.dropdownOpened}\n {...others}\n middlewares={resolvedMiddlewares}\n onChange={(_opened) => !_opened && onDropdownClose()}\n withRoles={false}\n unstyled={unstyled}\n >\n {children}\n </Popover>\n </ComboboxProvider>\n );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n export type Props = ComboboxProps;\n export type StylesNames = ComboboxStylesNames;\n export type Factory = ComboboxFactory;\n\n export namespace Dropdown {\n export type Props = ComboboxDropdownProps;\n }\n\n export namespace Options {\n export type Props = ComboboxOptionsProps;\n }\n\n export namespace Option {\n export type Props = ComboboxOptionProps;\n }\n\n export namespace Target {\n export type Props = ComboboxTargetProps;\n }\n\n export namespace Chevron {\n export type Props = ComboboxChevronProps;\n }\n\n export namespace Empty {\n export type Props = ComboboxEmptyProps;\n }\n\n export namespace Search {\n export type Props = ComboboxSearchProps;\n }\n\n export namespace Footer {\n export type Props = ComboboxFooterProps;\n }\n\n export namespace Header {\n export type Props = ComboboxHeaderProps;\n }\n\n export namespace DropdownTarget {\n export type Props = ComboboxDropdownTargetProps;\n }\n\n export namespace EventsTarget {\n export type Props = ComboboxEventsTargetProps;\n }\n\n export namespace Group {\n export type Props = ComboboxGroupProps;\n }\n\n export namespace ClearButton {\n export type Props = ComboboxClearButtonProps;\n }\n\n export namespace HiddenInput {\n export type Props = ComboboxHiddenInputProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAM,eAAe;CACnB,aAAa;CACb,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACnD,MAAM;AACR;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;CAEA,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAY,IAAI,eAAe;EACrF,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;AACF,EAAE;AAEF,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,gBACA,aACA,GAAG,WACD;CAEJ,MAAM,sBACJ,mBAAmB,aACf;EACE,GAAG;EACH,MAAM;EACN,MAAM;GACJ,GAAI,OAAO,aAAa,SAAS,WAAW,YAAY,OAAO,CAAC;GAChE,SACE,OAAO,aAAa,SAAS,YAAY,YAAY,KAAK,YAAY,KAAA,IAClE,YAAY,KAAK,UACjB;GACN,QAAQ,EAAE,iBAAiB,gBAAgB,UAAU,GAAG,WAAW;IACjE,SAAS,SAAS,MAAM,YACtB,kCACA,GAAG,gBAAgB,GACrB;IACA,MAAM,WAAW,aAAa;IAC9B,IAAI,OAAO,aAAa,YAAY,SAAS,OAC3C,SAAS,MAAM;KAAE;KAAiB;KAAgB;KAAU,GAAG;IAAK,CAAC;SAChE,IAAI,UACT,OAAO,OAAO,SAAS,SAAS,OAAO;KACrC,UAAU,GAAG,eAAe;KAC5B,WAAW,GAAG,gBAAgB;IAChC,CAAC;GAEL;EACF;CACF,IACA;CAEN,MAAM,oBAAoB,YAAY;CACtC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAY,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB;EAC5B,UAAU;EACV,MAAM,cAAc;CACtB;CAEA,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACE,QAAQ,MAAM;GACd,GAAI;GACJ,aAAa;GACb,WAAW,YAAY,CAAC,WAAW,gBAAgB;GACnD,WAAW;GACD;GAET;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,WAAW;AACpB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ;AACjB,SAAS,cAAc;AACvB,SAAS,cAAc"}
1	+ {"version":3,"file":"Combobox.mjs","names":["classes"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n createVarsResolver,\n ExtendComponent,\n Factory,\n getFontSize,\n getSize,\n MantineSize,\n MantineThemeComponent,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { PopoverMiddlewares } from '../Popover/Popover.types';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n ComboboxClearButton,\n ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n ComboboxDropdownTarget,\n ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n ComboboxEventsTarget,\n ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n ComboboxHiddenInput,\n ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n \| 'options'\n \| 'dropdown'\n \| 'option'\n \| 'search'\n \| 'empty'\n \| 'footer'\n \| 'header'\n \| 'group'\n \| 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n options: '--combobox-option-fz' \| '--combobox-option-padding';\n dropdown: '--combobox-padding' \| '--combobox-option-fz' \| '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n __staticSelector?: string;\n\n /** Combobox content /\n children?: React.ReactNode;\n\n /* Combobox store, can be used to control combobox state /\n store?: ComboboxStore;\n\n /* Called when item is selected with the `Enter` key or by clicking it /\n onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n /* Controls items `font-size` and `padding` @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* Controls `padding` of the dropdown @default 4 /\n dropdownPadding?: React.CSSProperties['padding'];\n\n /* Determines whether selection should be reset when option is hovered @default false /\n resetSelectionOnOptionHover?: boolean;\n\n /* Determines whether the `Combobox` value can be changed /\n readOnly?: boolean;\n\n /* If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */\n floatingHeight?: 'viewport';\n}\n\nexport type ComboboxFactory = Factory<{\n props: ComboboxProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxStylesNames;\n vars: ComboboxCSSVariables;\n staticComponents: {\n Target: typeof ComboboxTarget;\n Dropdown: typeof ComboboxDropdown;\n Options: typeof ComboboxOptions;\n Option: typeof ComboboxOption;\n Search: typeof ComboboxSearch;\n Empty: typeof ComboboxEmpty;\n Chevron: typeof ComboboxChevron;\n Footer: typeof ComboboxFooter;\n Header: typeof ComboboxHeader;\n EventsTarget: typeof ComboboxEventsTarget;\n DropdownTarget: typeof ComboboxDropdownTarget;\n Group: typeof ComboboxGroup;\n ClearButton: typeof ComboboxClearButton;\n HiddenInput: typeof ComboboxHiddenInput;\n };\n}>;\n\nconst defaultProps = {\n keepMounted: true,\n keepMountedMode: 'display-none',\n withinPortal: true,\n resetSelectionOnOptionHover: false,\n width: 'target',\n transitionProps: { transition: 'fade', duration: 0 },\n size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n options: {\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n\n dropdown: {\n '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n const props = useProps('Combobox', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n children,\n store: controlledStore,\n vars,\n onOptionSubmit,\n onClose,\n size,\n dropdownPadding,\n resetSelectionOnOptionHover,\n __staticSelector,\n readOnly,\n attributes,\n floatingHeight,\n middlewares,\n ...others\n } = props;\n\n const resolvedMiddlewares: PopoverMiddlewares \| undefined =\n floatingHeight === 'viewport'\n ? {\n ...middlewares,\n flip: false,\n size: {\n ...(typeof middlewares?.size === 'object' ? middlewares.size : {}),\n padding:\n typeof middlewares?.size === 'object' && middlewares.size.padding !== undefined\n ? middlewares.size.padding\n : 10,\n apply: ({ availableHeight, availableWidth, elements, ...rest }) => {\n elements.floating.style.setProperty(\n '--combobox-floating-max-height',\n `${availableHeight}px`\n );\n const userSize = middlewares?.size;\n if (typeof userSize === 'object' && userSize.apply) {\n userSize.apply({ availableHeight, availableWidth, elements, ...rest });\n } else if (userSize) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n },\n },\n }\n : middlewares;\n\n const uncontrolledStore = useCombobox();\n const store = controlledStore \|\| uncontrolledStore;\n\n const getStyles = useStyles<ComboboxFactory>({\n name: __staticSelector \|\| 'Combobox',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const onDropdownClose = () => {\n onClose?.();\n store.closeDropdown();\n };\n\n return (\n <ComboboxProvider\n value={{\n getStyles,\n store,\n onOptionSubmit,\n size,\n resetSelectionOnOptionHover,\n readOnly,\n floatingHeight,\n }}\n >\n <Popover\n opened={store.dropdownOpened}\n {...others}\n middlewares={resolvedMiddlewares}\n onChange={(_opened) => !_opened && onDropdownClose()}\n withRoles={false}\n unstyled={unstyled}\n >\n {children}\n </Popover>\n </ComboboxProvider>\n );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n export type Props = ComboboxProps;\n export type StylesNames = ComboboxStylesNames;\n export type Factory = ComboboxFactory;\n\n export namespace Dropdown {\n export type Props = ComboboxDropdownProps;\n }\n\n export namespace Options {\n export type Props = ComboboxOptionsProps;\n }\n\n export namespace Option {\n export type Props = ComboboxOptionProps;\n }\n\n export namespace Target {\n export type Props = ComboboxTargetProps;\n }\n\n export namespace Chevron {\n export type Props = ComboboxChevronProps;\n }\n\n export namespace Empty {\n export type Props = ComboboxEmptyProps;\n }\n\n export namespace Search {\n export type Props = ComboboxSearchProps;\n }\n\n export namespace Footer {\n export type Props = ComboboxFooterProps;\n }\n\n export namespace Header {\n export type Props = ComboboxHeaderProps;\n }\n\n export namespace DropdownTarget {\n export type Props = ComboboxDropdownTargetProps;\n }\n\n export namespace EventsTarget {\n export type Props = ComboboxEventsTargetProps;\n }\n\n export namespace Group {\n export type Props = ComboboxGroupProps;\n }\n\n export namespace ClearButton {\n export type Props = ComboboxClearButtonProps;\n }\n\n export namespace HiddenInput {\n export type Props = ComboboxHiddenInputProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAM,eAAe;CACnB,aAAa;CACb,iBAAiB;CACjB,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACnD,MAAM;AACR;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;CAEA,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAY,IAAI,eAAe;EACrF,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;AACF,EAAE;AAEF,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,gBACA,aACA,GAAG,WACD;CAEJ,MAAM,sBACJ,mBAAmB,aACf;EACE,GAAG;EACH,MAAM;EACN,MAAM;GACJ,GAAI,OAAO,aAAa,SAAS,WAAW,YAAY,OAAO,CAAC;GAChE,SACE,OAAO,aAAa,SAAS,YAAY,YAAY,KAAK,YAAY,KAAA,IAClE,YAAY,KAAK,UACjB;GACN,QAAQ,EAAE,iBAAiB,gBAAgB,UAAU,GAAG,WAAW;IACjE,SAAS,SAAS,MAAM,YACtB,kCACA,GAAG,gBAAgB,GACrB;IACA,MAAM,WAAW,aAAa;IAC9B,IAAI,OAAO,aAAa,YAAY,SAAS,OAC3C,SAAS,MAAM;KAAE;KAAiB;KAAgB;KAAU,GAAG;IAAK,CAAC;SAChE,IAAI,UACT,OAAO,OAAO,SAAS,SAAS,OAAO;KACrC,UAAU,GAAG,eAAe;KAC5B,WAAW,GAAG,gBAAgB;IAChC,CAAC;GAEL;EACF;CACF,IACA;CAEN,MAAM,oBAAoB,YAAY;CACtC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAY,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB;EAC5B,UAAU;EACV,MAAM,cAAc;CACtB;CAEA,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACE,QAAQ,MAAM;GACd,GAAI;GACJ,aAAa;GACb,WAAW,YAAY,CAAC,WAAW,gBAAgB;GACnD,WAAW;GACD;GAET;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,WAAW;AACpB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ;AACjB,SAAS,cAAc;AACvB,SAAS,cAAc"}

package/esm/components/Combobox/ComboboxEmpty/ComboboxEmpty.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxEmpty.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxEmpty/ComboboxEmpty.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxEmptyStylesNames = 'empty';\n\nexport interface ComboboxEmptyProps\n extends BoxProps, CompoundStylesApiProps<ComboboxEmptyFactory>, ElementProps<'div'> {}\n\nexport type ComboboxEmptyFactory = Factory<{\n props: ComboboxEmptyProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxEmptyStylesNames;\n compound: true;\n}>;\n\nexport const ComboboxEmpty = factory<ComboboxEmptyFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'ComboboxEmpty',\n null,\n props\n );\n\n const ctx = useComboboxContext();\n\n return <Box {...ctx.getStyles('empty', { className, classNames, styles, style })} {...others} />;\n});\n\nComboboxEmpty.classes = classes;\nComboboxEmpty.displayName = '@mantine/core/ComboboxEmpty';\n"],"mappings":";;;;;;;;AAwBA,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,iBACA,MACA,KACF;CAIA,OAAO,oBAAC,KAAD;EAAK,GAFA,mBAEM,~~EAAE~~,UAAU,SAAS;GAAE;GAAW;GAAY;GAAQ;EAAM,CAAC;EAAG,GAAI;CAAS,CAAA;AACjG,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}
1	+ {"version":3,"file":"ComboboxEmpty.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxEmpty/ComboboxEmpty.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxEmptyStylesNames = 'empty';\n\nexport interface ComboboxEmptyProps\n extends BoxProps, CompoundStylesApiProps<ComboboxEmptyFactory>, ElementProps<'div'> {}\n\nexport type ComboboxEmptyFactory = Factory<{\n props: ComboboxEmptyProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxEmptyStylesNames;\n compound: true;\n}>;\n\nexport const ComboboxEmpty = factory<ComboboxEmptyFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'ComboboxEmpty',\n null,\n props\n );\n\n const ctx = useComboboxContext();\n\n return <Box {...ctx.getStyles('empty', { className, classNames, styles, style })} {...others} />;\n});\n\nComboboxEmpty.classes = classes;\nComboboxEmpty.displayName = '@mantine/core/ComboboxEmpty';\n"],"mappings":";;;;;;;;AAwBA,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,iBACA,MACA,KACF;CAIA,OAAO,oBAAC,KAAD;EAAK,GAFA,mBAEM,CAAC,CAAC,UAAU,SAAS;GAAE;GAAW;GAAY;GAAQ;EAAM,CAAC;EAAG,GAAI;CAAS,CAAA;AACjG,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}

package/esm/components/Combobox/ComboboxFooter/ComboboxFooter.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxFooter.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxFooter/ComboboxFooter.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxFooterStylesNames = 'footer';\n\nexport interface ComboboxFooterProps\n extends BoxProps, CompoundStylesApiProps<ComboboxFooterFactory>, ElementProps<'div'> {}\n\nexport type ComboboxFooterFactory = Factory<{\n props: ComboboxFooterProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxFooterStylesNames;\n compound: true;\n}>;\n\nexport const ComboboxFooter = factory<ComboboxFooterFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'ComboboxFooter',\n null,\n props\n );\n\n const ctx = useComboboxContext();\n\n return (\n <Box\n {...ctx.getStyles('footer', { className, classNames, style, styles })}\n {...others}\n onMouseDown={(event) => {\n event.preventDefault();\n }}\n />\n );\n});\n\nComboboxFooter.classes = classes;\nComboboxFooter.displayName = '@mantine/core/ComboboxFooter';\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiB,SAAgC,UAAU;CACtE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,kBACA,MACA,KACF;CAIA,OACE,oBAAC,KAAD;EACE,GAJQ,mBAIF,~~EAAE~~,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACpE,GAAI;EACJ,cAAc,UAAU;GACtB,MAAM,eAAe;EACvB;CACD,CAAA;AAEL,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,cAAc"}
1	+ {"version":3,"file":"ComboboxFooter.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxFooter/ComboboxFooter.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxFooterStylesNames = 'footer';\n\nexport interface ComboboxFooterProps\n extends BoxProps, CompoundStylesApiProps<ComboboxFooterFactory>, ElementProps<'div'> {}\n\nexport type ComboboxFooterFactory = Factory<{\n props: ComboboxFooterProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxFooterStylesNames;\n compound: true;\n}>;\n\nexport const ComboboxFooter = factory<ComboboxFooterFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'ComboboxFooter',\n null,\n props\n );\n\n const ctx = useComboboxContext();\n\n return (\n <Box\n {...ctx.getStyles('footer', { className, classNames, style, styles })}\n {...others}\n onMouseDown={(event) => {\n event.preventDefault();\n }}\n />\n );\n});\n\nComboboxFooter.classes = classes;\nComboboxFooter.displayName = '@mantine/core/ComboboxFooter';\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiB,SAAgC,UAAU;CACtE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,kBACA,MACA,KACF;CAIA,OACE,oBAAC,KAAD;EACE,GAJQ,mBAIF,CAAC,CAAC,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACpE,GAAI;EACJ,cAAc,UAAU;GACtB,MAAM,eAAe;EACvB;CACD,CAAA;AAEL,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,cAAc"}

package/esm/components/Combobox/ComboboxGroup/ComboboxGroup.mjs CHANGED Viewed

@@ -11,9 +11,10 @@ const ComboboxGroup = factory((props) => {
 	const { classNames, className, style, styles, vars, children, label, id, ...others } = useProps("ComboboxGroup", null, props);
 	const ctx = useComboboxContext();
 	const _id = useId(id);
+	const hasLabel = label !== void 0 && label !== null && label !== false && label !== "";
 	return /* @__PURE__ */ jsxs(Box, {
 		role: "group",
-		"aria-labelledby": label ? _id : void 0,
+		"aria-labelledby": hasLabel ? _id : void 0,
 		...ctx.getStyles("group", {
 			className,
 			classNames,
@@ -21,7 +22,7 @@ const ComboboxGroup = factory((props) => {
 			styles
 		}),
 		...others,
-		children: [label && /* @__PURE__ */ jsx("div", {
+		children: [hasLabel && /* @__PURE__ */ jsx("div", {
 			id: _id,
 			...ctx.getStyles("groupLabel", {
 				classNames,

package/esm/components/Combobox/ComboboxGroup/ComboboxGroup.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxGroup.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxGroup/ComboboxGroup.tsx"],"sourcesContent":["import { useId } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxGroupStylesNames = 'group' \| 'groupLabel';\n\nexport interface ComboboxGroupProps\n extends BoxProps, CompoundStylesApiProps<ComboboxGroupFactory>, ElementProps<'div'> {\n /** Group label */\n label?: React.ReactNode;\n}\n\nexport type ComboboxGroupFactory = Factory<{\n props: ComboboxGroupProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxGroupStylesNames;\n compound: true;\n}>;\n\nexport const ComboboxGroup = factory<ComboboxGroupFactory>((props) => {\n const { classNames, className, style, styles, vars, children, label, id, ...others } = useProps(\n 'ComboboxGroup',\n null,\n props\n );\n\n const ctx = useComboboxContext();\n const _id = useId(id);\n\n return (\n <Box\n role=\"group\"\n aria-labelledby={~~label~~ ? _id : undefined}\n {...ctx.getStyles('group', { className, classNames, style, styles })}\n {...others}\n >\n {~~label~~ && (\n <div id={_id} {...ctx.getStyles('groupLabel', { classNames, styles })}>\n {label}\n </div>\n )}\n {children}\n </Box>\n );\n});\n\nComboboxGroup.classes = classes;\nComboboxGroup.displayName = '@mantine/core/ComboboxGroup';\n"],"mappings":";;;;;;;;;AA4BA,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,OAAO,IAAI,GAAG,WAAW,SACrF,iBACA,MACA,KACF;CAEA,MAAM,MAAM,mBAAmB;CAC/B,MAAM,MAAM,MAAM,EAAE;CAEpB,OACE,qBAAC,KAAD;EACE,MAAK;EACL,mBAAiB,~~QAAQ~~,MAAM,KAAA;~~EAC/B~~,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACnE,GAAI;YAJN,CAMG,~~SACC~~,oBAAC,OAAD;GAAK,IAAI;GAAK,GAAI,IAAI,UAAU,cAAc;IAAE;IAAY;GAAO,CAAC;aACjE;EACE,CAAA,GAEN,QACE;;AAET,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}
1	+ {"version":3,"file":"ComboboxGroup.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxGroup/ComboboxGroup.tsx"],"sourcesContent":["import { useId } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxGroupStylesNames = 'group' \| 'groupLabel';\n\nexport interface ComboboxGroupProps\n extends BoxProps, CompoundStylesApiProps<ComboboxGroupFactory>, ElementProps<'div'> {\n /** Group label */\n label?: React.ReactNode;\n}\n\nexport type ComboboxGroupFactory = Factory<{\n props: ComboboxGroupProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxGroupStylesNames;\n compound: true;\n}>;\n\nexport const ComboboxGroup = factory<ComboboxGroupFactory>((props) => {\n const { classNames, className, style, styles, vars, children, label, id, ...others } = useProps(\n 'ComboboxGroup',\n null,\n props\n );\n\n const ctx = useComboboxContext();\n const _id = useId(id);\n\n const hasLabel = label !== undefined && label !== null && label !== false && label !== '';\n\n return (\n <Box\n role=\"group\"\n aria-labelledby={hasLabel ? _id : undefined}\n {...ctx.getStyles('group', { className, classNames, style, styles })}\n {...others}\n >\n {hasLabel && (\n <div id={_id} {...ctx.getStyles('groupLabel', { classNames, styles })}>\n {label}\n </div>\n )}\n {children}\n </Box>\n );\n});\n\nComboboxGroup.classes = classes;\nComboboxGroup.displayName = '@mantine/core/ComboboxGroup';\n"],"mappings":";;;;;;;;;AA4BA,MAAa,gBAAgB,SAA+B,UAAU;CACpE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,OAAO,IAAI,GAAG,WAAW,SACrF,iBACA,MACA,KACF;CAEA,MAAM,MAAM,mBAAmB;CAC/B,MAAM,MAAM,MAAM,EAAE;CAEpB,MAAM,WAAW,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU,SAAS,UAAU;CAEvF,OACE,qBAAC,KAAD;EACE,MAAK;EACL,mBAAiB,WAAW,MAAM,KAAA;EAClC,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACnE,GAAI;YAJN,CAMG,YACC,oBAAC,OAAD;GAAK,IAAI;GAAK,GAAI,IAAI,UAAU,cAAc;IAAE;IAAY;GAAO,CAAC;aACjE;EACE,CAAA,GAEN,QACE;;AAET,CAAC;AAED,cAAc,UAAUA;AACxB,cAAc,cAAc"}

package/esm/components/Combobox/ComboboxHeader/ComboboxHeader.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxHeader.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxHeader/ComboboxHeader.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxHeaderStylesNames = 'header';\n\nexport interface ComboboxHeaderProps\n extends BoxProps, CompoundStylesApiProps<ComboboxHeaderFactory>, ElementProps<'div'> {}\n\nexport type ComboboxHeaderFactory = Factory<{\n props: ComboboxHeaderProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxHeaderStylesNames;\n compound: true;\n}>;\n\nexport const ComboboxHeader = factory<ComboboxHeaderFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'ComboboxHeader',\n null,\n props\n );\n\n const ctx = useComboboxContext();\n\n return (\n <Box\n {...ctx.getStyles('header', { className, classNames, style, styles })}\n {...others}\n onMouseDown={(event) => {\n event.preventDefault();\n }}\n />\n );\n});\n\nComboboxHeader.classes = classes;\nComboboxHeader.displayName = '@mantine/core/ComboboxHeader';\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiB,SAAgC,UAAU;CACtE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,kBACA,MACA,KACF;CAIA,OACE,oBAAC,KAAD;EACE,GAJQ,mBAIF,~~EAAE~~,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACpE,GAAI;EACJ,cAAc,UAAU;GACtB,MAAM,eAAe;EACvB;CACD,CAAA;AAEL,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,cAAc"}
1	+ {"version":3,"file":"ComboboxHeader.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxHeader/ComboboxHeader.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxHeaderStylesNames = 'header';\n\nexport interface ComboboxHeaderProps\n extends BoxProps, CompoundStylesApiProps<ComboboxHeaderFactory>, ElementProps<'div'> {}\n\nexport type ComboboxHeaderFactory = Factory<{\n props: ComboboxHeaderProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxHeaderStylesNames;\n compound: true;\n}>;\n\nexport const ComboboxHeader = factory<ComboboxHeaderFactory>((props) => {\n const { classNames, className, style, styles, vars, ...others } = useProps(\n 'ComboboxHeader',\n null,\n props\n );\n\n const ctx = useComboboxContext();\n\n return (\n <Box\n {...ctx.getStyles('header', { className, classNames, style, styles })}\n {...others}\n onMouseDown={(event) => {\n event.preventDefault();\n }}\n />\n );\n});\n\nComboboxHeader.classes = classes;\nComboboxHeader.displayName = '@mantine/core/ComboboxHeader';\n"],"mappings":";;;;;;;;AAwBA,MAAa,iBAAiB,SAAgC,UAAU;CACtE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,GAAG,WAAW,SAChE,kBACA,MACA,KACF;CAIA,OACE,oBAAC,KAAD;EACE,GAJQ,mBAIF,CAAC,CAAC,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACpE,GAAI;EACJ,cAAc,UAAU;GACtB,MAAM,eAAe;EACvB;CACD,CAAA;AAEL,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,cAAc"}

package/esm/components/Combobox/OptionsDropdown/OptionsDropdown.mjs CHANGED Viewed

@@ -60,7 +60,7 @@ function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit,
 		limit: limit ?? Infinity
 	}) : data;
 	const isEmpty = isEmptyComboboxData(filteredData);
-	const options = filteredData.map((item) => /* @__PURE__ */ jsx(Option, {
+	const options = filteredData.map((item, index) => /* @__PURE__ */ jsx(Option, {
 		data: item,
 		withCheckIcon,
 		withAlignedLabels,
@@ -68,7 +68,7 @@ function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit,
 		checkIconPosition,
 		unstyled,
 		renderOption
-	}, isOptionsGroup(item) ? item.group : `${item.value}`));
+	}, isOptionsGroup(item) ? `group-${typeof item.group === "string" ? item.group : index}` : `${item.value}`));
 	return /* @__PURE__ */ jsx(Combobox.Dropdown, {
 		hidden: hidden || hiddenWhenEmpty && isEmpty,
 		"data-composed": true,

package/esm/components/Combobox/OptionsDropdown/OptionsDropdown.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OptionsDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { Primitive } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ScrollArea, ScrollAreaProps } from '../../ScrollArea/ScrollArea';\nimport { Combobox } from '../Combobox';\nimport { useComboboxContext } from '../Combobox.context';\nimport { ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter<Value extends Primitive = string> = (\n input: FilterOptionsInput<Value>\n) => ComboboxParsedItem<Value>[];\n\nexport interface OptionsGroup {\n group: ~~string~~;\n items: ComboboxItem<Primitive>[];\n}\n\nexport type OptionsData = (ComboboxItem<Primitive> \| OptionsGroup)[];\n\ninterface OptionProps {\n data: ComboboxItem<Primitive> \| OptionsGroup;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive \| Primitive[] \| null;\n checkIconPosition?: 'left' \| 'right';\n unstyled: boolean \| undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction isValueChecked(value: Primitive \| Primitive[] \| undefined \| null, optionValue: Primitive) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({\n data,\n withCheckIcon,\n withAlignedLabels,\n value,\n checkIconPosition,\n unstyled,\n renderOption,\n}: OptionProps) {\n if (!isOptionsGroup(data)) {\n const checked = isValueChecked(value, data.value);\n const check =\n withCheckIcon &&\n (checked ? (\n <CheckIcon className={classes.optionsDropdownCheckIcon} />\n ) : withAlignedLabels ? (\n <div className={classes.optionsDropdownCheckPlaceholder} />\n ) : null);\n\n const defaultContent = (\n <>\n {checkIconPosition === 'left' && check}\n <span>{data.label}</span>\n {checkIconPosition === 'right' && check}\n </>\n );\n\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' \|\| undefined}\n data-checked={checked \|\| undefined}\n aria-selected={checked}\n active={checked}\n >\n {typeof renderOption === 'function'\n ? renderOption({ option: data, checked })\n : defaultContent}\n </Combobox.Option>\n );\n }\n\n const options = data.items.map((item) => (\n <Option\n data={item}\n value={value}\n key={`${item.value}`}\n unstyled={unstyled}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n checkIconPosition={checkIconPosition}\n renderOption={renderOption}\n />\n ));\n\n return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n}\n\nexport interface OptionsDropdownProps {\n data: OptionsData;\n filter: OptionsFilter<Primitive> \| undefined;\n search: string \| undefined;\n limit: number \| undefined;\n withScrollArea: boolean \| undefined;\n maxDropdownHeight: number \| string \| undefined;\n /** Overrides `floatingHeight` from the `Combobox` context, used by `Combobox`-based components */\n floatingHeight?: 'viewport';\n hidden?: boolean;\n hiddenWhenEmpty?: boolean;\n filterOptions?: boolean;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive \| Primitive[] \| null;\n checkIconPosition?: 'left' \| 'right';\n nothingFoundMessage?: React.ReactNode;\n unstyled: boolean \| undefined;\n labelId: string \| undefined;\n 'aria-label': string \| undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n scrollAreaProps: ScrollAreaProps \| undefined;\n}\n\nexport function OptionsDropdown({\n data,\n hidden,\n hiddenWhenEmpty,\n filter,\n search,\n limit,\n maxDropdownHeight,\n floatingHeight,\n withScrollArea = true,\n filterOptions = true,\n withCheckIcon = false,\n withAlignedLabels = false,\n value,\n checkIconPosition,\n nothingFoundMessage,\n unstyled,\n labelId,\n renderOption,\n scrollAreaProps,\n 'aria-label': ariaLabel,\n}: OptionsDropdownProps) {\n const ctx = useComboboxContext();\n validateOptions(data);\n\n const shouldFilter = typeof search === 'string';\n const filteredData = shouldFilter\n ? (filter \|\| defaultOptionsFilter)({\n options: data,\n search: filterOptions ? search : '',\n limit: limit ?? Infinity,\n })\n : data;\n const isEmpty = isEmptyComboboxData(filteredData);\n\n const options = filteredData.map((item) => (\n <Option\n data={item}\n key={isOptionsGroup(item) ? item.group : `${item.value}`}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n value={value}\n checkIconPosition={checkIconPosition}\n unstyled={unstyled}\n renderOption={renderOption}\n />\n ));\n\n return (\n <Combobox.Dropdown hidden={hidden \|\| (hiddenWhenEmpty && isEmpty)} data-composed>\n <Combobox.Options labelledBy={labelId} aria-label={ariaLabel}>\n {withScrollArea ? (\n <ScrollArea.Autosize\n mah={\n (floatingHeight ?? ctx.floatingHeight) === 'viewport'\n ? 'var(--combobox-floating-options-max-height)'\n : (maxDropdownHeight ?? 220)\n }\n type=\"scroll\"\n scrollbarSize=\"var(--combobox-padding)\"\n offsetScrollbars=\"y\"\n {...scrollAreaProps}\n >\n {options}\n </ScrollArea.Autosize>\n ) : (\n options\n )}\n {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n </Combobox.Options>\n </Combobox.Dropdown>\n );\n}\n"],"mappings":";;;;;;;;;;;;;AAkCA,SAAS,eAAe,OAAmD,aAAwB;CACjG,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,WAAW,IAAI,UAAU;AACxE;AAEA,SAAS,OAAO,EACd,MACA,eACA,mBACA,OACA,mBACA,UACA,gBACc;CACd,IAAI,CAAC,eAAe,IAAI,GAAG;EACzB,MAAM,UAAU,eAAe,OAAO,KAAK,KAAK;EAChD,MAAM,QACJ,kBACC,UACC,oBAAC,WAAD,EAAW,WAAWA,wBAAQ,yBAA2B,CAAA,IACvD,oBACF,oBAAC,OAAD,EAAK,WAAWA,wBAAQ,gCAAkC,CAAA,IACxD;EAEN,MAAM,iBACJ,qBAAA,UAAA,EAAA,UAAA;GACG,sBAAsB,UAAU;GACjC,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;GACvB,sBAAsB,WAAW;EAClC,EAAA,CAAA;EAGJ,OACE,oBAAC,SAAS,QAAV;GACE,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,WAAW,GAAG,GAAGA,wBAAQ,wBAAwB,CAAC,SAAS,CAAC;GAC5D,gBAAc,sBAAsB,WAAW,KAAA;GAC/C,gBAAc,WAAW,KAAA;GACzB,iBAAe;GACf,QAAQ;aAEP,OAAO,iBAAiB,aACrB,aAAa;IAAE,QAAQ;IAAM;GAAQ,CAAC,IACtC;EACW,CAAA;CAErB;CAEA,MAAM,UAAU,KAAK,MAAM,KAAK,SAC9B,oBAAC,QAAD;EACE,MAAM;EACC;EAEG;EACK;EACI;EACA;EACL;CACf,GANM,GAAG,KAAK,OAMd,CACF;CAED,OAAO,oBAAC,SAAS,OAAV;EAAgB,OAAO,KAAK;YAAQ;CAAwB,CAAA;AACrE;AA0BA,SAAgB,gBAAgB,EAC9B,MACA,QACA,iBACA,QACA,QACA,OACA,mBACA,gBACA,iBAAiB,MACjB,gBAAgB,MAChB,gBAAgB,OAChB,oBAAoB,OACpB,OACA,mBACA,qBACA,UACA,SACA,cACA,iBACA,cAAc,aACS;CACvB,MAAM,MAAM,mBAAmB;CAC/B,gBAAgB,IAAI;CAGpB,MAAM,eADe,OAAO,WAAW,YAElC,UAAU,~~sBAAsB~~;EAC/B,SAAS;EACT,QAAQ,gBAAgB,SAAS;EACjC,OAAO,SAAS;CAClB,CAAC,IACD;CACJ,MAAM,UAAU,oBAAoB,YAAY;CAEhD,MAAM,UAAU,aAAa,KAAK,~~SAChC~~,oBAAC,QAAD;EACE,MAAM;~~EAES~~;EACI;EACZ;EACY;EACT;EACI;CACf,~~GAPM~~,eAAe,IAAI,~~IAAI~~,KAAK,QAAQ,GAAG,KAAK,~~OAOlD~~,CACF;CAED,OACE,oBAAC,SAAS,UAAV;EAAmB,QAAQ,UAAW,mBAAmB;EAAU,iBAAA;YACjE,qBAAC,SAAS,SAAV;GAAkB,YAAY;GAAS,cAAY;aAAnD,CACG,iBACC,oBAAC,WAAW,UAAZ;IACE,MACG,kBAAkB,IAAI,oBAAoB,aACvC,gDACC,qBAAqB;IAE5B,MAAK;IACL,eAAc;IACd,kBAAiB;IACjB,GAAI;cAEH;GACkB,CAAA,IAErB,SAED,WAAW,uBAAuB,oBAAC,SAAS,OAAV,EAAA,UAAiB,oBAAoC,CAAA,CACxE;;CACD,CAAA;AAEvB"}
1	+ {"version":3,"file":"OptionsDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { Primitive } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ScrollArea, ScrollAreaProps } from '../../ScrollArea/ScrollArea';\nimport { Combobox } from '../Combobox';\nimport { useComboboxContext } from '../Combobox.context';\nimport { ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter<Value extends Primitive = string> = (\n input: FilterOptionsInput<Value>\n) => ComboboxParsedItem<Value>[];\n\nexport interface OptionsGroup {\n group: React.ReactNode;\n items: ComboboxItem<Primitive>[];\n}\n\nexport type OptionsData = (ComboboxItem<Primitive> \| OptionsGroup)[];\n\ninterface OptionProps {\n data: ComboboxItem<Primitive> \| OptionsGroup;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive \| Primitive[] \| null;\n checkIconPosition?: 'left' \| 'right';\n unstyled: boolean \| undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction isValueChecked(value: Primitive \| Primitive[] \| undefined \| null, optionValue: Primitive) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({\n data,\n withCheckIcon,\n withAlignedLabels,\n value,\n checkIconPosition,\n unstyled,\n renderOption,\n}: OptionProps) {\n if (!isOptionsGroup(data)) {\n const checked = isValueChecked(value, data.value);\n const check =\n withCheckIcon &&\n (checked ? (\n <CheckIcon className={classes.optionsDropdownCheckIcon} />\n ) : withAlignedLabels ? (\n <div className={classes.optionsDropdownCheckPlaceholder} />\n ) : null);\n\n const defaultContent = (\n <>\n {checkIconPosition === 'left' && check}\n <span>{data.label}</span>\n {checkIconPosition === 'right' && check}\n </>\n );\n\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' \|\| undefined}\n data-checked={checked \|\| undefined}\n aria-selected={checked}\n active={checked}\n >\n {typeof renderOption === 'function'\n ? renderOption({ option: data, checked })\n : defaultContent}\n </Combobox.Option>\n );\n }\n\n const options = data.items.map((item) => (\n <Option\n data={item}\n value={value}\n key={`${item.value}`}\n unstyled={unstyled}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n checkIconPosition={checkIconPosition}\n renderOption={renderOption}\n />\n ));\n\n return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n}\n\nexport interface OptionsDropdownProps {\n data: OptionsData;\n filter: OptionsFilter<Primitive> \| undefined;\n search: string \| undefined;\n limit: number \| undefined;\n withScrollArea: boolean \| undefined;\n maxDropdownHeight: number \| string \| undefined;\n /** Overrides `floatingHeight` from the `Combobox` context, used by `Combobox`-based components */\n floatingHeight?: 'viewport';\n hidden?: boolean;\n hiddenWhenEmpty?: boolean;\n filterOptions?: boolean;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive \| Primitive[] \| null;\n checkIconPosition?: 'left' \| 'right';\n nothingFoundMessage?: React.ReactNode;\n unstyled: boolean \| undefined;\n labelId: string \| undefined;\n 'aria-label': string \| undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n scrollAreaProps: ScrollAreaProps \| undefined;\n}\n\nexport function OptionsDropdown({\n data,\n hidden,\n hiddenWhenEmpty,\n filter,\n search,\n limit,\n maxDropdownHeight,\n floatingHeight,\n withScrollArea = true,\n filterOptions = true,\n withCheckIcon = false,\n withAlignedLabels = false,\n value,\n checkIconPosition,\n nothingFoundMessage,\n unstyled,\n labelId,\n renderOption,\n scrollAreaProps,\n 'aria-label': ariaLabel,\n}: OptionsDropdownProps) {\n const ctx = useComboboxContext();\n validateOptions(data);\n\n const shouldFilter = typeof search === 'string';\n const filteredData = shouldFilter\n ? (filter \|\| defaultOptionsFilter)({\n options: data,\n search: filterOptions ? search : '',\n limit: limit ?? Infinity,\n })\n : data;\n const isEmpty = isEmptyComboboxData(filteredData);\n\n const options = filteredData.map((item, index) => (\n <Option\n data={item}\n key={\n isOptionsGroup(item)\n ? `group-${typeof item.group === 'string' ? item.group : index}`\n : `${item.value}`\n }\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n value={value}\n checkIconPosition={checkIconPosition}\n unstyled={unstyled}\n renderOption={renderOption}\n />\n ));\n\n return (\n <Combobox.Dropdown hidden={hidden \|\| (hiddenWhenEmpty && isEmpty)} data-composed>\n <Combobox.Options labelledBy={labelId} aria-label={ariaLabel}>\n {withScrollArea ? (\n <ScrollArea.Autosize\n mah={\n (floatingHeight ?? ctx.floatingHeight) === 'viewport'\n ? 'var(--combobox-floating-options-max-height)'\n : (maxDropdownHeight ?? 220)\n }\n type=\"scroll\"\n scrollbarSize=\"var(--combobox-padding)\"\n offsetScrollbars=\"y\"\n {...scrollAreaProps}\n >\n {options}\n </ScrollArea.Autosize>\n ) : (\n options\n )}\n {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n </Combobox.Options>\n </Combobox.Dropdown>\n );\n}\n"],"mappings":";;;;;;;;;;;;;AAkCA,SAAS,eAAe,OAAmD,aAAwB;CACjG,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,WAAW,IAAI,UAAU;AACxE;AAEA,SAAS,OAAO,EACd,MACA,eACA,mBACA,OACA,mBACA,UACA,gBACc;CACd,IAAI,CAAC,eAAe,IAAI,GAAG;EACzB,MAAM,UAAU,eAAe,OAAO,KAAK,KAAK;EAChD,MAAM,QACJ,kBACC,UACC,oBAAC,WAAD,EAAW,WAAWA,wBAAQ,yBAA2B,CAAA,IACvD,oBACF,oBAAC,OAAD,EAAK,WAAWA,wBAAQ,gCAAkC,CAAA,IACxD;EAEN,MAAM,iBACJ,qBAAA,UAAA,EAAA,UAAA;GACG,sBAAsB,UAAU;GACjC,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;GACvB,sBAAsB,WAAW;EAClC,EAAA,CAAA;EAGJ,OACE,oBAAC,SAAS,QAAV;GACE,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,WAAW,GAAG,GAAGA,wBAAQ,wBAAwB,CAAC,SAAS,CAAC;GAC5D,gBAAc,sBAAsB,WAAW,KAAA;GAC/C,gBAAc,WAAW,KAAA;GACzB,iBAAe;GACf,QAAQ;aAEP,OAAO,iBAAiB,aACrB,aAAa;IAAE,QAAQ;IAAM;GAAQ,CAAC,IACtC;EACW,CAAA;CAErB;CAEA,MAAM,UAAU,KAAK,MAAM,KAAK,SAC9B,oBAAC,QAAD;EACE,MAAM;EACC;EAEG;EACK;EACI;EACA;EACL;CACf,GANM,GAAG,KAAK,OAMd,CACF;CAED,OAAO,oBAAC,SAAS,OAAV;EAAgB,OAAO,KAAK;YAAQ;CAAwB,CAAA;AACrE;AA0BA,SAAgB,gBAAgB,EAC9B,MACA,QACA,iBACA,QACA,QACA,OACA,mBACA,gBACA,iBAAiB,MACjB,gBAAgB,MAChB,gBAAgB,OAChB,oBAAoB,OACpB,OACA,mBACA,qBACA,UACA,SACA,cACA,iBACA,cAAc,aACS;CACvB,MAAM,MAAM,mBAAmB;CAC/B,gBAAgB,IAAI;CAGpB,MAAM,eADe,OAAO,WAAW,YAElC,UAAU,qBAAA,CAAsB;EAC/B,SAAS;EACT,QAAQ,gBAAgB,SAAS;EACjC,OAAO,SAAS;CAClB,CAAC,IACD;CACJ,MAAM,UAAU,oBAAoB,YAAY;CAEhD,MAAM,UAAU,aAAa,KAAK,MAAM,UACtC,oBAAC,QAAD;EACE,MAAM;EAMS;EACI;EACZ;EACY;EACT;EACI;CACf,GAVG,eAAe,IAAI,IACf,SAAS,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,UACvD,GAAG,KAAK,OAQf,CACF;CAED,OACE,oBAAC,SAAS,UAAV;EAAmB,QAAQ,UAAW,mBAAmB;EAAU,iBAAA;YACjE,qBAAC,SAAS,SAAV;GAAkB,YAAY;GAAS,cAAY;aAAnD,CACG,iBACC,oBAAC,WAAW,UAAZ;IACE,MACG,kBAAkB,IAAI,oBAAoB,aACvC,gDACC,qBAAqB;IAE5B,MAAK;IACL,eAAc;IACd,kBAAiB;IACjB,GAAI;cAEH;GACkB,CAAA,IAErB,SAED,WAAW,uBAAuB,oBAAC,SAAS,OAAV,EAAA,UAAiB,oBAAoC,CAAA,CACxE;;CACD,CAAA;AAEvB"}

package/esm/components/Combobox/OptionsDropdown/default-options-filter.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"default-options-filter.mjs","names":[],"sources":["../../../../src/components/Combobox/OptionsDropdown/default-options-filter.ts"],"sourcesContent":["import { Primitive } from '../../../core';\nimport { ComboboxItem, ComboboxParsedItem } from '../Combobox.types';\nimport { isOptionsGroup } from './is-options-group';\n\nexport interface FilterOptionsInput<Value extends Primitive = Primitive> {\n options: ComboboxParsedItem<Value>[];\n search: string;\n limit: number;\n}\n\nexport function defaultOptionsFilter({\n options,\n search,\n limit,\n}: FilterOptionsInput): ComboboxParsedItem<Primitive>[] {\n const parsedSearch = search.trim().toLowerCase();\n const result: ComboboxParsedItem<Primitive>[] = [];\n\n for (let i = 0; i < options.length; i += 1) {\n const item = options[i];\n\n if (result.length === limit) {\n return result;\n }\n\n if (isOptionsGroup(item)) {\n result.push({\n group: item.group,\n items: defaultOptionsFilter({\n options: item.items,\n search,\n limit: limit - result.length,\n }) as ComboboxItem[],\n });\n }\n\n if (!isOptionsGroup(item)) {\n if (item.label.toLowerCase().includes(parsedSearch)) {\n result.push(item);\n }\n }\n }\n\n return result;\n}\n"],"mappings":";;;AAUA,SAAgB,qBAAqB,EACnC,SACA,QACA,SACsD;CACtD,MAAM,eAAe,OAAO,KAAK,~~EAAE~~,YAAY;CAC/C,MAAM,SAA0C,CAAC;CAEjD,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,GAAG;EAC1C,MAAM,OAAO,QAAQ;EAErB,IAAI,OAAO,WAAW,OACpB,OAAO;EAGT,IAAI,eAAe,IAAI,GACrB,OAAO,KAAK;GACV,OAAO,KAAK;GACZ,OAAO,qBAAqB;IAC1B,SAAS,KAAK;IACd;IACA,OAAO,QAAQ,OAAO;GACxB,CAAC;EACH,CAAC;EAGH,IAAI,CAAC,eAAe,IAAI;OAClB,KAAK,MAAM,YAAY,~~EAAE~~,SAAS,YAAY,GAChD,OAAO,KAAK,IAAI;EAAA;CAGtB;CAEA,OAAO;AACT"}
1	+ {"version":3,"file":"default-options-filter.mjs","names":[],"sources":["../../../../src/components/Combobox/OptionsDropdown/default-options-filter.ts"],"sourcesContent":["import { Primitive } from '../../../core';\nimport { ComboboxItem, ComboboxParsedItem } from '../Combobox.types';\nimport { isOptionsGroup } from './is-options-group';\n\nexport interface FilterOptionsInput<Value extends Primitive = Primitive> {\n options: ComboboxParsedItem<Value>[];\n search: string;\n limit: number;\n}\n\nexport function defaultOptionsFilter({\n options,\n search,\n limit,\n}: FilterOptionsInput): ComboboxParsedItem<Primitive>[] {\n const parsedSearch = search.trim().toLowerCase();\n const result: ComboboxParsedItem<Primitive>[] = [];\n\n for (let i = 0; i < options.length; i += 1) {\n const item = options[i];\n\n if (result.length === limit) {\n return result;\n }\n\n if (isOptionsGroup(item)) {\n result.push({\n group: item.group,\n items: defaultOptionsFilter({\n options: item.items,\n search,\n limit: limit - result.length,\n }) as ComboboxItem[],\n });\n }\n\n if (!isOptionsGroup(item)) {\n if (item.label.toLowerCase().includes(parsedSearch)) {\n result.push(item);\n }\n }\n }\n\n return result;\n}\n"],"mappings":";;;AAUA,SAAgB,qBAAqB,EACnC,SACA,QACA,SACsD;CACtD,MAAM,eAAe,OAAO,KAAK,CAAC,CAAC,YAAY;CAC/C,MAAM,SAA0C,CAAC;CAEjD,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,GAAG;EAC1C,MAAM,OAAO,QAAQ;EAErB,IAAI,OAAO,WAAW,OACpB,OAAO;EAGT,IAAI,eAAe,IAAI,GACrB,OAAO,KAAK;GACV,OAAO,KAAK;GACZ,OAAO,qBAAqB;IAC1B,SAAS,KAAK;IACd;IACA,OAAO,QAAQ,OAAO;GACxB,CAAC;EACH,CAAC;EAGH,IAAI,CAAC,eAAe,IAAI;OAClB,KAAK,MAAM,YAAY,CAAC,CAAC,SAAS,YAAY,GAChD,OAAO,KAAK,IAAI;EAAA;CAGtB;CAEA,OAAO;AACT"}

package/esm/components/Combobox/use-combobox/get-index/get-index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"get-index.mjs","names":[],"sources":["../../../../../src/components/Combobox/use-combobox/get-index/get-index.ts"],"sourcesContent":["export function getPreviousIndex(\n currentIndex: number,\n elements: NodeListOf<HTMLDivElement> \| HTMLDivElement[],\n loop: boolean\n) {\n for (let i = currentIndex - 1; i >= 0; i -= 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = elements.length - 1; i > -1; i -= 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\nexport function getNextIndex(\n currentIndex: number,\n elements: NodeListOf<HTMLDivElement> \| HTMLDivElement[],\n loop: boolean\n) {\n for (let i = currentIndex + 1; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = 0; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\nexport function getFirstIndex(elements: NodeListOf<HTMLDivElement> \| HTMLDivElement[]) {\n for (let i = 0; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n return -1;\n}\n"],"mappings":";;AAAA,SAAgB,iBACd,cACA,UACA,MACA;CACA,KAAK,IAAI,IAAI,eAAe,GAAG,KAAK,GAAG,KAAK,GAC1C,IAAI,CAAC,SAAS,~~GAAG~~,aAAa,wBAAwB,GACpD,OAAO;CAIX,IAAI;OACG,IAAI,IAAI,SAAS,SAAS,GAAG,IAAI,IAAI,KAAK,GAC7C,IAAI,CAAC,SAAS,~~GAAG~~,aAAa,wBAAwB,GACpD,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,SAAgB,aACd,cACA,UACA,MACA;CACA,KAAK,IAAI,IAAI,eAAe,GAAG,IAAI,SAAS,QAAQ,KAAK,GACvD,IAAI,CAAC,SAAS,~~GAAG~~,aAAa,wBAAwB,GACpD,OAAO;CAIX,IAAI;OACG,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GACxC,IAAI,CAAC,SAAS,~~GAAG~~,aAAa,wBAAwB,GACpD,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,SAAgB,cAAc,UAAyD;CACrF,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GACxC,IAAI,CAAC,SAAS,~~GAAG~~,aAAa,wBAAwB,GACpD,OAAO;CAIX,OAAO;AACT"}
1	+ {"version":3,"file":"get-index.mjs","names":[],"sources":["../../../../../src/components/Combobox/use-combobox/get-index/get-index.ts"],"sourcesContent":["export function getPreviousIndex(\n currentIndex: number,\n elements: NodeListOf<HTMLDivElement> \| HTMLDivElement[],\n loop: boolean\n) {\n for (let i = currentIndex - 1; i >= 0; i -= 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = elements.length - 1; i > -1; i -= 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\nexport function getNextIndex(\n currentIndex: number,\n elements: NodeListOf<HTMLDivElement> \| HTMLDivElement[],\n loop: boolean\n) {\n for (let i = currentIndex + 1; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n if (loop) {\n for (let i = 0; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n }\n\n return currentIndex;\n}\n\nexport function getFirstIndex(elements: NodeListOf<HTMLDivElement> \| HTMLDivElement[]) {\n for (let i = 0; i < elements.length; i += 1) {\n if (!elements[i].hasAttribute('data-combobox-disabled')) {\n return i;\n }\n }\n\n return -1;\n}\n"],"mappings":";;AAAA,SAAgB,iBACd,cACA,UACA,MACA;CACA,KAAK,IAAI,IAAI,eAAe,GAAG,KAAK,GAAG,KAAK,GAC1C,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,wBAAwB,GACpD,OAAO;CAIX,IAAI;OACG,IAAI,IAAI,SAAS,SAAS,GAAG,IAAI,IAAI,KAAK,GAC7C,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,wBAAwB,GACpD,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,SAAgB,aACd,cACA,UACA,MACA;CACA,KAAK,IAAI,IAAI,eAAe,GAAG,IAAI,SAAS,QAAQ,KAAK,GACvD,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,wBAAwB,GACpD,OAAO;CAIX,IAAI;OACG,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GACxC,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,wBAAwB,GACpD,OAAO;CAAA;CAKb,OAAO;AACT;AAEA,SAAgB,cAAc,UAAyD;CACrF,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK,GACxC,IAAI,CAAC,SAAS,EAAE,CAAC,aAAa,wBAAwB,GACpD,OAAO;CAIX,OAAO;AACT"}

package/esm/components/Combobox/use-combobox/use-combobox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-combobox.mjs","names":[],"sources":["../../../../src/components/Combobox/use-combobox/use-combobox.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { findElementBySelector, findElementsBySelector, getRootElement } from '../../../core/utils';\nimport { getFirstIndex, getNextIndex, getPreviousIndex } from './get-index/get-index';\n\nexport type ComboboxDropdownEventSource = 'keyboard' \| 'mouse' \| 'unknown';\n\nexport interface ComboboxStore {\n /** Current dropdown opened state /\n dropdownOpened: boolean;\n\n /* Opens dropdown /\n openDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /* Closes dropdown /\n closeDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /* Toggles dropdown opened state /\n toggleDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /* Selected option index ref /\n selectedOptionIndex: number;\n\n /* Returns currently selected option index or `-1` if none of the options is selected /\n getSelectedOptionIndex: () => number;\n\n /* Selects `Combobox.Option` by index /\n selectOption: (index: number) => void;\n\n /* Selects first `Combobox.Option` with `active` prop.\n * If there are no such options, the function does nothing.\n /\n selectActiveOption: () => string \| null;\n\n /* Selects first `Combobox.Option` that is not disabled.\n * If there are no such options, the function does nothing.\n * /\n selectFirstOption: () => string \| null;\n\n /* Selects next `Combobox.Option` that is not disabled.\n * If the current option is the last one, the function selects first option, if `loop` is true.\n /\n selectNextOption: () => string \| null;\n\n /* Selects previous `Combobox.Option` that is not disabled.\n * If the current option is the first one, the function selects last option, if `loop` is true.\n * /\n selectPreviousOption: () => string \| null;\n\n /* Resets selected option index to -1, removes `data-combobox-selected` from selected option /\n resetSelectedOption: () => void;\n\n /* Triggers `onClick` event of selected option.\n * If there is no selected option, the function does nothing.\n /\n clickSelectedOption: () => void;\n\n /* Updates selected option index to currently selected or active option.\n * The function is required to be used with searchable components to update selected option index\n * when options list changes based on search query.\n /\n updateSelectedOptionIndex: (\n target?: 'active' \| 'selected' \| number,\n options?: { scrollIntoView?: boolean }\n ) => void;\n\n /* List id, used for `aria-` attributes /\n listId: string \| null;\n\n /** Sets list id /\n setListId: (id: string) => void;\n\n /* Ref of `Combobox.Search` input /\n searchRef: React.RefObject<HTMLInputElement \| null>;\n\n /* Moves focus to `Combobox.Search` input /\n focusSearchInput: () => void;\n\n /* Ref of the target element /\n targetRef: React.RefObject<HTMLElement \| null>;\n\n /* Moves focus to the target element /\n focusTarget: () => void;\n}\n\nexport interface UseComboboxOptions {\n /* Default value for `dropdownOpened`, `false` by default. Used when the component is uncontrolled /\n defaultOpened?: boolean;\n\n /* Controlled `dropdownOpened` state. When set, the dropdown opened state is controlled by the parent component /\n opened?: boolean;\n\n /* Called when `dropdownOpened` state changes. Required for controlled mode /\n onOpenedChange?: (opened: boolean) => void;\n\n /* Called when dropdown closes with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown closure /\n onDropdownClose?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /* Called when dropdown opens with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown opening /\n onDropdownOpen?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /* Determines whether arrow key presses should loop through items (first to last and last to first). Defaults to `true` /\n loop?: boolean;\n\n /* `behavior` passed down to `element.scrollIntoView`. Controls the scrolling animation when options are scrolled into view. Defaults to `'instant'` */\n scrollBehavior?: ScrollBehavior;\n}\n\nexport function useCombobox({\n defaultOpened,\n opened,\n onOpenedChange,\n onDropdownClose,\n onDropdownOpen,\n loop = true,\n scrollBehavior = 'instant',\n}: UseComboboxOptions = {}): ComboboxStore {\n const [dropdownOpened, setDropdownOpened] = useUncontrolled({\n value: opened,\n defaultValue: defaultOpened,\n finalValue: false,\n onChange: onOpenedChange,\n });\n\n const listId = useRef<string \| null>(null);\n const selectedOptionIndex = useRef<number>(-1);\n const searchRef = useRef<HTMLInputElement \| null>(null);\n const targetRef = useRef<HTMLElement \| null>(null);\n const focusSearchTimeout = useRef<number>(-1);\n const focusTargetTimeout = useRef<number>(-1);\n const selectedIndexUpdateTimeout = useRef<number>(-1);\n\n const openDropdown: ComboboxStore['openDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (!dropdownOpened) {\n setDropdownOpened(true);\n onDropdownOpen?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownOpen, dropdownOpened]\n );\n\n const closeDropdown: ComboboxStore['closeDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n setDropdownOpened(false);\n onDropdownClose?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownClose, dropdownOpened]\n );\n\n const toggleDropdown: ComboboxStore['toggleDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n closeDropdown(eventSource);\n } else {\n openDropdown(eventSource);\n }\n },\n [closeDropdown, openDropdown, dropdownOpened]\n );\n\n const clearSelectedItem = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const selected = findElementBySelector(`#${listId.current} [data-combobox-selected]`, root);\n selected?.removeAttribute('data-combobox-selected');\n selected?.removeAttribute('aria-selected');\n }, []);\n\n const selectOption = useCallback(\n (index: number) => {\n const root = getRootElement(targetRef.current);\n const list = findElementBySelector(`#${listId.current!}`, root);\n const items = list\n ? findElementsBySelector<HTMLDivElement>('[data-combobox-option]', list)\n : null;\n\n if (!items) {\n return null;\n }\n\n const nextIndex = index >= items!.length ? 0 : index < 0 ? items!.length - 1 : index;\n selectedOptionIndex.current = nextIndex;\n\n if (items?.[nextIndex] && !items[nextIndex].hasAttribute('data-combobox-disabled')) {\n clearSelectedItem();\n items[nextIndex].setAttribute('data-combobox-selected', 'true');\n items[nextIndex].setAttribute('aria-selected', 'true');\n items[nextIndex].scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n return items[nextIndex].id;\n }\n\n return null;\n },\n [scrollBehavior, clearSelectedItem]\n );\n\n const selectActiveOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const activeOption = findElementBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-active]`,\n root\n );\n\n if (activeOption) {\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const index = items.findIndex((option) => option === activeOption);\n return selectOption(index);\n }\n\n return selectOption(0);\n }, [selectOption]);\n\n const selectNextOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getNextIndex(selectedOptionIndex.current, items, loop));\n }, [selectOption, loop]);\n\n const selectPreviousOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getPreviousIndex(selectedOptionIndex.current, items, loop));\n }, [selectOption, loop]);\n\n const selectFirstOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getFirstIndex(items));\n }, [selectOption]);\n\n const updateSelectedOptionIndex: ComboboxStore['updateSelectedOptionIndex'] = useCallback(\n (target = 'selected', options) => {\n if (typeof target === 'number') {\n selectedOptionIndex.current = target;\n const root = getRootElement(targetRef.current);\n\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n\n if (options?.scrollIntoView) {\n items[target]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n }\n return;\n }\n\n selectedIndexUpdateTimeout.current = window.setTimeout(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const index = items.findIndex((option) => option.hasAttribute(`data-combobox-${target}`));\n\n selectedOptionIndex.current = index;\n\n if (options?.scrollIntoView) {\n items[index]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n }\n }, 0);\n },\n []\n );\n\n const resetSelectedOption = useCallback(() => {\n selectedOptionIndex.current = -1;\n clearSelectedItem();\n }, [clearSelectedItem]);\n\n const clickSelectedOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const item = items?.[selectedOptionIndex.current];\n item?.click();\n }, []);\n\n const setListId = useCallback((id: string) => {\n listId.current = id;\n }, []);\n\n const focusSearchInput = useCallback(() => {\n focusSearchTimeout.current = window.setTimeout(() => searchRef.current?.focus(), 0);\n }, []);\n\n const focusTarget = useCallback(() => {\n focusTargetTimeout.current = window.setTimeout(() => targetRef.current?.focus(), 0);\n }, []);\n\n const getSelectedOptionIndex = useCallback(() => selectedOptionIndex.current, []);\n\n useEffect(\n () => () => {\n window.clearTimeout(focusSearchTimeout.current);\n window.clearTimeout(focusTargetTimeout.current);\n window.clearTimeout(selectedIndexUpdateTimeout.current);\n },\n []\n );\n\n return {\n dropdownOpened,\n openDropdown,\n closeDropdown,\n toggleDropdown,\n\n selectedOptionIndex: selectedOptionIndex.current,\n getSelectedOptionIndex,\n selectOption,\n selectFirstOption,\n selectActiveOption,\n selectNextOption,\n selectPreviousOption,\n resetSelectedOption,\n updateSelectedOptionIndex,\n\n listId: listId.current,\n setListId,\n clickSelectedOption,\n\n searchRef,\n focusSearchInput,\n\n targetRef,\n focusTarget,\n };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-combobox.mjs","names":[],"sources":["../../../../src/components/Combobox/use-combobox/use-combobox.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { findElementBySelector, findElementsBySelector, getRootElement } from '../../../core/utils';\nimport { getFirstIndex, getNextIndex, getPreviousIndex } from './get-index/get-index';\n\nexport type ComboboxDropdownEventSource = 'keyboard' \| 'mouse' \| 'unknown';\n\nexport interface ComboboxStore {\n /** Current dropdown opened state /\n dropdownOpened: boolean;\n\n /* Opens dropdown /\n openDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /* Closes dropdown /\n closeDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /* Toggles dropdown opened state /\n toggleDropdown: (eventSource?: ComboboxDropdownEventSource) => void;\n\n /* Selected option index ref /\n selectedOptionIndex: number;\n\n /* Returns currently selected option index or `-1` if none of the options is selected /\n getSelectedOptionIndex: () => number;\n\n /* Selects `Combobox.Option` by index /\n selectOption: (index: number) => void;\n\n /* Selects first `Combobox.Option` with `active` prop.\n * If there are no such options, the function does nothing.\n /\n selectActiveOption: () => string \| null;\n\n /* Selects first `Combobox.Option` that is not disabled.\n * If there are no such options, the function does nothing.\n * /\n selectFirstOption: () => string \| null;\n\n /* Selects next `Combobox.Option` that is not disabled.\n * If the current option is the last one, the function selects first option, if `loop` is true.\n /\n selectNextOption: () => string \| null;\n\n /* Selects previous `Combobox.Option` that is not disabled.\n * If the current option is the first one, the function selects last option, if `loop` is true.\n * /\n selectPreviousOption: () => string \| null;\n\n /* Resets selected option index to -1, removes `data-combobox-selected` from selected option /\n resetSelectedOption: () => void;\n\n /* Triggers `onClick` event of selected option.\n * If there is no selected option, the function does nothing.\n /\n clickSelectedOption: () => void;\n\n /* Updates selected option index to currently selected or active option.\n * The function is required to be used with searchable components to update selected option index\n * when options list changes based on search query.\n /\n updateSelectedOptionIndex: (\n target?: 'active' \| 'selected' \| number,\n options?: { scrollIntoView?: boolean }\n ) => void;\n\n /* List id, used for `aria-` attributes /\n listId: string \| null;\n\n /** Sets list id /\n setListId: (id: string) => void;\n\n /* Ref of `Combobox.Search` input /\n searchRef: React.RefObject<HTMLInputElement \| null>;\n\n /* Moves focus to `Combobox.Search` input /\n focusSearchInput: () => void;\n\n /* Ref of the target element /\n targetRef: React.RefObject<HTMLElement \| null>;\n\n /* Moves focus to the target element /\n focusTarget: () => void;\n}\n\nexport interface UseComboboxOptions {\n /* Default value for `dropdownOpened`, `false` by default. Used when the component is uncontrolled /\n defaultOpened?: boolean;\n\n /* Controlled `dropdownOpened` state. When set, the dropdown opened state is controlled by the parent component /\n opened?: boolean;\n\n /* Called when `dropdownOpened` state changes. Required for controlled mode /\n onOpenedChange?: (opened: boolean) => void;\n\n /* Called when dropdown closes with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown closure /\n onDropdownClose?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /* Called when dropdown opens with event source: keyboard, mouse or unknown. Useful for analytics or side effects on dropdown opening /\n onDropdownOpen?: (eventSource: ComboboxDropdownEventSource) => void;\n\n /* Determines whether arrow key presses should loop through items (first to last and last to first). Defaults to `true` /\n loop?: boolean;\n\n /* `behavior` passed down to `element.scrollIntoView`. Controls the scrolling animation when options are scrolled into view. Defaults to `'instant'` */\n scrollBehavior?: ScrollBehavior;\n}\n\nexport function useCombobox({\n defaultOpened,\n opened,\n onOpenedChange,\n onDropdownClose,\n onDropdownOpen,\n loop = true,\n scrollBehavior = 'instant',\n}: UseComboboxOptions = {}): ComboboxStore {\n const [dropdownOpened, setDropdownOpened] = useUncontrolled({\n value: opened,\n defaultValue: defaultOpened,\n finalValue: false,\n onChange: onOpenedChange,\n });\n\n const listId = useRef<string \| null>(null);\n const selectedOptionIndex = useRef<number>(-1);\n const searchRef = useRef<HTMLInputElement \| null>(null);\n const targetRef = useRef<HTMLElement \| null>(null);\n const focusSearchTimeout = useRef<number>(-1);\n const focusTargetTimeout = useRef<number>(-1);\n const selectedIndexUpdateTimeout = useRef<number>(-1);\n\n const openDropdown: ComboboxStore['openDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (!dropdownOpened) {\n setDropdownOpened(true);\n onDropdownOpen?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownOpen, dropdownOpened]\n );\n\n const closeDropdown: ComboboxStore['closeDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n setDropdownOpened(false);\n onDropdownClose?.(eventSource);\n }\n },\n [setDropdownOpened, onDropdownClose, dropdownOpened]\n );\n\n const toggleDropdown: ComboboxStore['toggleDropdown'] = useCallback(\n (eventSource = 'unknown') => {\n if (dropdownOpened) {\n closeDropdown(eventSource);\n } else {\n openDropdown(eventSource);\n }\n },\n [closeDropdown, openDropdown, dropdownOpened]\n );\n\n const clearSelectedItem = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const selected = findElementBySelector(`#${listId.current} [data-combobox-selected]`, root);\n selected?.removeAttribute('data-combobox-selected');\n selected?.removeAttribute('aria-selected');\n }, []);\n\n const selectOption = useCallback(\n (index: number) => {\n const root = getRootElement(targetRef.current);\n const list = findElementBySelector(`#${listId.current!}`, root);\n const items = list\n ? findElementsBySelector<HTMLDivElement>('[data-combobox-option]', list)\n : null;\n\n if (!items) {\n return null;\n }\n\n const nextIndex = index >= items!.length ? 0 : index < 0 ? items!.length - 1 : index;\n selectedOptionIndex.current = nextIndex;\n\n if (items?.[nextIndex] && !items[nextIndex].hasAttribute('data-combobox-disabled')) {\n clearSelectedItem();\n items[nextIndex].setAttribute('data-combobox-selected', 'true');\n items[nextIndex].setAttribute('aria-selected', 'true');\n items[nextIndex].scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n return items[nextIndex].id;\n }\n\n return null;\n },\n [scrollBehavior, clearSelectedItem]\n );\n\n const selectActiveOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const activeOption = findElementBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-active]`,\n root\n );\n\n if (activeOption) {\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const index = items.findIndex((option) => option === activeOption);\n return selectOption(index);\n }\n\n return selectOption(0);\n }, [selectOption]);\n\n const selectNextOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getNextIndex(selectedOptionIndex.current, items, loop));\n }, [selectOption, loop]);\n\n const selectPreviousOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getPreviousIndex(selectedOptionIndex.current, items, loop));\n }, [selectOption, loop]);\n\n const selectFirstOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n return selectOption(getFirstIndex(items));\n }, [selectOption]);\n\n const updateSelectedOptionIndex: ComboboxStore['updateSelectedOptionIndex'] = useCallback(\n (target = 'selected', options) => {\n if (typeof target === 'number') {\n selectedOptionIndex.current = target;\n const root = getRootElement(targetRef.current);\n\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n\n if (options?.scrollIntoView) {\n items[target]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n }\n return;\n }\n\n selectedIndexUpdateTimeout.current = window.setTimeout(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const index = items.findIndex((option) => option.hasAttribute(`data-combobox-${target}`));\n\n selectedOptionIndex.current = index;\n\n if (options?.scrollIntoView) {\n items[index]?.scrollIntoView({ block: 'nearest', behavior: scrollBehavior });\n }\n }, 0);\n },\n []\n );\n\n const resetSelectedOption = useCallback(() => {\n selectedOptionIndex.current = -1;\n clearSelectedItem();\n }, [clearSelectedItem]);\n\n const clickSelectedOption = useCallback(() => {\n const root = getRootElement(targetRef.current);\n const items = findElementsBySelector<HTMLDivElement>(\n `#${listId.current} [data-combobox-option]`,\n root\n );\n const item = items?.[selectedOptionIndex.current];\n item?.click();\n }, []);\n\n const setListId = useCallback((id: string) => {\n listId.current = id;\n }, []);\n\n const focusSearchInput = useCallback(() => {\n focusSearchTimeout.current = window.setTimeout(() => searchRef.current?.focus(), 0);\n }, []);\n\n const focusTarget = useCallback(() => {\n focusTargetTimeout.current = window.setTimeout(() => targetRef.current?.focus(), 0);\n }, []);\n\n const getSelectedOptionIndex = useCallback(() => selectedOptionIndex.current, []);\n\n useEffect(\n () => () => {\n window.clearTimeout(focusSearchTimeout.current);\n window.clearTimeout(focusTargetTimeout.current);\n window.clearTimeout(selectedIndexUpdateTimeout.current);\n },\n []\n );\n\n return {\n dropdownOpened,\n openDropdown,\n closeDropdown,\n toggleDropdown,\n\n selectedOptionIndex: selectedOptionIndex.current,\n getSelectedOptionIndex,\n selectOption,\n selectFirstOption,\n selectActiveOption,\n selectNextOption,\n selectPreviousOption,\n resetSelectedOption,\n updateSelectedOptionIndex,\n\n listId: listId.current,\n setListId,\n clickSelectedOption,\n\n searchRef,\n focusSearchInput,\n\n targetRef,\n focusTarget,\n };\n}\n"],"mappings":"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"}

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

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