@mantine/core 9.4.2 → 9.5.0

package/esm/components/AngleSlider/AngleSlider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AngleSlider.mjs","names":["classes"],"sources":["../../../src/components/AngleSlider/AngleSlider.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { normalizeRadialValue, useMergedRef, useRadialMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './AngleSlider.module.css';\n\nexport type AngleSliderStylesNames = 'root' | 'thumb' | 'label' | 'marks' | 'mark';\nexport type AngleSliderCssVariables = {\n  root: '--slider-size' | '--thumb-size';\n};\n\nexport interface AngleSliderProps\n  extends BoxProps, StylesApiProps<AngleSliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Step between values @default 1 */\n  step?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called on value change */\n  onChange?: (value: number) => void;\n\n  /** Called after the selection is finished */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` */\n  onScrubEnd?: () => void;\n\n  /** If set, the label is displayed inside the slider @default true */\n  withLabel?: boolean;\n\n  /** Array of marks displayed on the slider */\n  marks?: { value: number; label?: string }[];\n\n  /** Slider size in px @default 60 */\n  size?: number;\n\n  /** Size of the thumb in px. Calculated based on the `size` value by default. */\n  thumbSize?: number;\n\n  /** A function to format label based on the current value */\n  formatLabel?: (value: number) => React.ReactNode;\n\n  /** Sets `data-disabled` attribute, disables interactions */\n  disabled?: boolean;\n\n  /** If set, the selection is allowed only from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n}\n\nexport type AngleSliderFactory = Factory<{\n  props: AngleSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: AngleSliderStylesNames;\n  vars: AngleSliderCssVariables;\n}>;\n\nconst defaultProps = {\n  step: 1,\n  withLabel: true,\n} satisfies Partial<AngleSliderProps>;\n\nconst varsResolver = createVarsResolver<AngleSliderFactory>((_, { size, thumbSize }) => ({\n  root: {\n    '--slider-size': rem(size),\n    '--thumb-size': rem(thumbSize),\n  },\n}));\n\nexport const AngleSlider = factory<AngleSliderFactory>((_props) => {\n  const props = useProps('AngleSlider', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    step,\n    value,\n    defaultValue,\n    onChange,\n    onMouseDown,\n    withLabel,\n    marks,\n    thumbSize,\n    restrictToMarks,\n    formatLabel,\n    onChangeEnd,\n    disabled,\n    onTouchStart,\n    name,\n    hiddenInputProps,\n    'aria-label': ariaLabel,\n    tabIndex,\n    onScrubStart,\n    onScrubEnd,\n    mod,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: 0,\n    onChange,\n  });\n\n  const update = (val: number) => {\n    if (rootRef.current && !disabled) {\n      const newValue =\n        restrictToMarks && Array.isArray(marks)\n          ? findClosestNumber(\n              val,\n              marks.map((mark) => mark.value)\n            )\n          : val;\n\n      setValue(newValue);\n    }\n  };\n\n  const { ref: radialMoveRef } = useRadialMove(update, {\n    step,\n    onChangeEnd,\n    onScrubStart,\n    onScrubEnd,\n  });\n\n  const getStyles = useStyles<AngleSliderFactory>({\n    name: 'AngleSlider',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    let newValue = _value;\n\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (_value === 0) {\n        newValue = 359;\n      } else {\n        newValue = normalizeRadialValue(_value - step, step);\n      }\n    }\n\n    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (_value === 359) {\n        newValue = 0;\n      } else {\n        newValue = normalizeRadialValue(_value + step, step);\n      }\n    }\n\n    if (event.key === 'Home') {\n      newValue = 0;\n    }\n\n    if (event.key === 'End') {\n      newValue = 359;\n    }\n\n    if (restrictToMarks && Array.isArray(marks)) {\n      const markValues = marks.map((mark) => mark.value);\n      const currentIndex = markValues.indexOf(_value);\n\n      if (currentIndex !== -1) {\n        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n          newValue = markValues[currentIndex === 0 ? markValues.length - 1 : currentIndex - 1];\n        } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n          newValue = markValues[currentIndex === markValues.length - 1 ? 0 : currentIndex + 1];\n        } else {\n          newValue = findClosestNumber(newValue, markValues);\n        }\n      } else {\n        newValue = findClosestNumber(newValue, markValues);\n      }\n    }\n\n    setValue(newValue);\n    onChangeEnd?.(newValue);\n  };\n\n  const marksItems = marks?.map((mark, index) => (\n    <div\n      {...getStyles('mark', { style: { '--angle': `${mark.value}deg` } })}\n      data-label={mark.label || undefined}\n      key={index}\n    />\n  ));\n\n  return (\n    <Box\n      ref={useMergedRef(ref, rootRef, radialMoveRef)}\n      {...getStyles('root', { focusable: true })}\n      mod={[{ disabled }, mod]}\n      {...others}\n    >\n      {marksItems && marksItems.length > 0 && <div {...getStyles('marks')}>{marksItems}</div>}\n\n      {withLabel && (\n        <div {...getStyles('label')}>\n          {typeof formatLabel === 'function' ? formatLabel(_value) : _value}\n        </div>\n      )}\n      <div\n        tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n        role=\"slider\"\n        aria-valuemax={360}\n        aria-valuemin={0}\n        aria-valuenow={_value}\n        onKeyDown={handleKeyDown}\n        aria-label={ariaLabel}\n        {...getStyles('thumb', { style: { transform: `rotate(${_value}deg)` } })}\n      />\n      <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />\n    </Box>\n  );\n});\n\nAngleSlider.displayName = '@mantine/core/AngleSlider';\nAngleSlider.classes = classes;\nAngleSlider.varsResolver = varsResolver;\n\nexport namespace AngleSlider {\n  export type Props = AngleSliderProps;\n  export type StylesNames = AngleSliderStylesNames;\n  export type CssVariables = AngleSliderCssVariables;\n  export type Factory = AngleSliderFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"AngleSlider.mjs","names":["classes"],"sources":["../../../src/components/AngleSlider/AngleSlider.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { normalizeRadialValue, useMergedRef, useRadialMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './AngleSlider.module.css';\n\nexport type AngleSliderStylesNames = 'root' | 'thumb' | 'label' | 'marks' | 'mark';\nexport type AngleSliderCssVariables = {\n  root: '--slider-size' | '--thumb-size';\n};\n\nexport interface AngleSliderProps\n  extends BoxProps, StylesApiProps<AngleSliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Step between values @default 1 */\n  step?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called on value change */\n  onChange?: (value: number) => void;\n\n  /** Called after the selection is finished */\n  onChangeEnd?: (value: number) => void;\n\n  /** Called in `onMouseDown` and `onTouchStart` */\n  onScrubStart?: () => void;\n\n  /** Called in `onMouseUp` and `onTouchEnd` */\n  onScrubEnd?: () => void;\n\n  /** If set, the label is displayed inside the slider @default true */\n  withLabel?: boolean;\n\n  /** Array of marks displayed on the slider */\n  marks?: { value: number; label?: string }[];\n\n  /** Slider size in px @default 60 */\n  size?: number;\n\n  /** Size of the thumb in px. Calculated based on the `size` value by default. */\n  thumbSize?: number;\n\n  /** A function to format label based on the current value */\n  formatLabel?: (value: number) => React.ReactNode;\n\n  /** Sets `data-disabled` attribute, disables interactions */\n  disabled?: boolean;\n\n  /** If set, the selection is allowed only from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n}\n\nexport type AngleSliderFactory = Factory<{\n  props: AngleSliderProps;\n  ref: HTMLDivElement;\n  stylesNames: AngleSliderStylesNames;\n  vars: AngleSliderCssVariables;\n}>;\n\nconst defaultProps = {\n  step: 1,\n  withLabel: true,\n} satisfies Partial<AngleSliderProps>;\n\nconst varsResolver = createVarsResolver<AngleSliderFactory>((_, { size, thumbSize }) => ({\n  root: {\n    '--slider-size': rem(size),\n    '--thumb-size': rem(thumbSize),\n  },\n}));\n\nexport const AngleSlider = factory<AngleSliderFactory>((_props) => {\n  const props = useProps('AngleSlider', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    step,\n    value,\n    defaultValue,\n    onChange,\n    onMouseDown,\n    withLabel,\n    marks,\n    thumbSize,\n    restrictToMarks,\n    formatLabel,\n    onChangeEnd,\n    disabled,\n    onTouchStart,\n    name,\n    hiddenInputProps,\n    'aria-label': ariaLabel,\n    tabIndex,\n    onScrubStart,\n    onScrubEnd,\n    mod,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: 0,\n    onChange,\n  });\n\n  const update = (val: number) => {\n    if (rootRef.current && !disabled) {\n      const newValue =\n        restrictToMarks && Array.isArray(marks)\n          ? findClosestNumber(\n              val,\n              marks.map((mark) => mark.value)\n            )\n          : val;\n\n      setValue(newValue);\n    }\n  };\n\n  const { ref: radialMoveRef } = useRadialMove(update, {\n    step,\n    onChangeEnd,\n    onScrubStart,\n    onScrubEnd,\n  });\n\n  const getStyles = useStyles<AngleSliderFactory>({\n    name: 'AngleSlider',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      return;\n    }\n\n    let newValue = _value;\n\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      if (_value === 0) {\n        newValue = 359;\n      } else {\n        newValue = normalizeRadialValue(_value - step, step);\n      }\n    }\n\n    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      if (_value === 359) {\n        newValue = 0;\n      } else {\n        newValue = normalizeRadialValue(_value + step, step);\n      }\n    }\n\n    if (event.key === 'Home') {\n      newValue = 0;\n    }\n\n    if (event.key === 'End') {\n      newValue = 359;\n    }\n\n    if (restrictToMarks && Array.isArray(marks)) {\n      const markValues = marks.map((mark) => mark.value);\n      const currentIndex = markValues.indexOf(_value);\n\n      if (currentIndex !== -1) {\n        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {\n          newValue = markValues[currentIndex === 0 ? markValues.length - 1 : currentIndex - 1];\n        } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {\n          newValue = markValues[currentIndex === markValues.length - 1 ? 0 : currentIndex + 1];\n        } else {\n          newValue = findClosestNumber(newValue, markValues);\n        }\n      } else {\n        newValue = findClosestNumber(newValue, markValues);\n      }\n    }\n\n    setValue(newValue);\n    onChangeEnd?.(newValue);\n  };\n\n  const marksItems = marks?.map((mark, index) => (\n    <div\n      {...getStyles('mark', { style: { '--angle': `${mark.value}deg` } })}\n      data-label={mark.label || undefined}\n      key={index}\n    />\n  ));\n\n  return (\n    <Box\n      ref={useMergedRef(ref, rootRef, radialMoveRef)}\n      {...getStyles('root', { focusable: true })}\n      mod={[{ disabled }, mod]}\n      {...others}\n    >\n      {marksItems && marksItems.length > 0 && <div {...getStyles('marks')}>{marksItems}</div>}\n\n      {withLabel && (\n        <div {...getStyles('label')}>\n          {typeof formatLabel === 'function' ? formatLabel(_value) : _value}\n        </div>\n      )}\n      <div\n        tabIndex={tabIndex ?? (disabled ? -1 : 0)}\n        role=\"slider\"\n        aria-valuemax={360}\n        aria-valuemin={0}\n        aria-valuenow={_value}\n        onKeyDown={handleKeyDown}\n        aria-label={ariaLabel}\n        {...getStyles('thumb', { style: { transform: `rotate(${_value}deg)` } })}\n      />\n      <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />\n    </Box>\n  );\n});\n\nAngleSlider.displayName = '@mantine/core/AngleSlider';\nAngleSlider.classes = classes;\nAngleSlider.varsResolver = varsResolver;\n\nexport namespace AngleSlider {\n  export type Props = AngleSliderProps;\n  export type StylesNames = AngleSliderStylesNames;\n  export type CssVariables = AngleSliderCssVariables;\n  export type Factory = AngleSliderFactory;\n}\n"],"mappings":"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"}

package/esm/components/Avatar/AvatarGroup/AvatarGroup.mjs

@@ -14,23 +14,24 @@ const varsResolver = createVarsResolver((_, { spacing }) => ({ group: { "--ag-sp
 const AvatarGroup = factory((_props) => {
 	const props = useProps("AvatarGroup", null, _props);
 	const { classNames, className, style, styles, unstyled, vars, spacing, attributes, ...others } = props;
+	const getStyles = useStyles({
+		name: "AvatarGroup",
+		classes: Avatar_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver,
+		rootSelector: "group"
+	});
 	return /* @__PURE__ */ jsx(AvatarGroupContext, {
 		value: { withinGroup: true },
 		children: /* @__PURE__ */ jsx(Box, {
-			...useStyles({
-				name: "AvatarGroup",
-				classes: Avatar_module_default,
-				props,
-				className,
-				style,
-				classNames,
-				styles,
-				unstyled,
-				attributes,
-				vars,
-				varsResolver,
-				rootSelector: "group"
-			})("group"),
+			...getStyles("group"),
 			...others
 		})
 	});

package/esm/components/Avatar/AvatarGroup/AvatarGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.mjs","names":["classes"],"sources":["../../../../src/components/Avatar/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../Avatar.module.css';\n\nexport interface AvatarGroupContextValue {\n  withinGroup: boolean;\n}\n\nexport const AvatarGroupContext = createContext<AvatarGroupContextValue>({ withinGroup: false });\n\nexport type AvatarGroupStylesNames = 'group';\nexport type AvatarGroupCssVariables = {\n  group: '--ag-spacing';\n};\n\nexport interface AvatarGroupProps\n  extends BoxProps, StylesApiProps<AvatarGroupFactory>, ElementProps<'div'> {\n  /** Negative space between Avatar components @default 'sm' */\n  spacing?: MantineSpacing;\n}\n\nexport type AvatarGroupFactory = Factory<{\n  props: AvatarGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: AvatarGroupStylesNames;\n  vars: AvatarGroupCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<AvatarGroupFactory>((_, { spacing }) => ({\n  group: {\n    '--ag-spacing': getSpacing(spacing),\n  },\n}));\n\nexport const AvatarGroup = factory<AvatarGroupFactory>((_props) => {\n  const props = useProps('AvatarGroup', null, _props);\n  const { classNames, className, style, styles, unstyled, vars, spacing, attributes, ...others } =\n    props;\n\n  const getStyles = useStyles<AvatarGroupFactory>({\n    name: 'AvatarGroup',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'group',\n  });\n\n  return (\n    <AvatarGroupContext value={{ withinGroup: true }}>\n      <Box {...getStyles('group')} {...others} />\n    </AvatarGroupContext>\n  );\n});\n\nAvatarGroup.classes = classes;\nAvatarGroup.varsResolver = varsResolver;\nAvatarGroup.displayName = '@mantine/core/AvatarGroup';\n"],"mappings":";;;;;;;;;;;AAoBA,MAAa,qBAAqB,cAAuC,EAAE,aAAa,MAAM,CAAC;AAoB/F,MAAM,eAAe,oBAAwC,GAAG,EAAE,eAAe,EAC/E,OAAO,EACL,gBAAgB,WAAW,OAAO,EACpC,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,UAAU,MAAM,SAAS,YAAY,GAAG,WACpF;CAiBF,OACE,oBAAC,oBAAD;EAAoB,OAAO,EAAE,aAAa,KAAK;YAC7C,oBAAC,KAAD;GAAK,GAjBS,UAA8B;IAC9C,MAAM;IACN,SAAA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,cAAc;GAChB,CAIqB,CAAC,CAAC,OAAO;GAAG,GAAI;EAAS,CAAA;CACxB,CAAA;AAExB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
+{"version":3,"file":"AvatarGroup.mjs","names":["classes"],"sources":["../../../../src/components/Avatar/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport classes from '../Avatar.module.css';\n\nexport interface AvatarGroupContextValue {\n  withinGroup: boolean;\n}\n\nexport const AvatarGroupContext = createContext<AvatarGroupContextValue>({ withinGroup: false });\n\nexport type AvatarGroupStylesNames = 'group';\nexport type AvatarGroupCssVariables = {\n  group: '--ag-spacing';\n};\n\nexport interface AvatarGroupProps\n  extends BoxProps, StylesApiProps<AvatarGroupFactory>, ElementProps<'div'> {\n  /** Negative space between Avatar components @default 'sm' */\n  spacing?: MantineSpacing;\n}\n\nexport type AvatarGroupFactory = Factory<{\n  props: AvatarGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: AvatarGroupStylesNames;\n  vars: AvatarGroupCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<AvatarGroupFactory>((_, { spacing }) => ({\n  group: {\n    '--ag-spacing': getSpacing(spacing),\n  },\n}));\n\nexport const AvatarGroup = factory<AvatarGroupFactory>((_props) => {\n  const props = useProps('AvatarGroup', null, _props);\n  const { classNames, className, style, styles, unstyled, vars, spacing, attributes, ...others } =\n    props;\n\n  const getStyles = useStyles<AvatarGroupFactory>({\n    name: 'AvatarGroup',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'group',\n  });\n\n  return (\n    <AvatarGroupContext value={{ withinGroup: true }}>\n      <Box {...getStyles('group')} {...others} />\n    </AvatarGroupContext>\n  );\n});\n\nAvatarGroup.classes = classes;\nAvatarGroup.varsResolver = varsResolver;\nAvatarGroup.displayName = '@mantine/core/AvatarGroup';\n"],"mappings":";;;;;;;;;;;AAoBA,MAAa,qBAAqB,cAAuC,EAAE,aAAa,MAAM,CAAC;AAoB/F,MAAM,eAAe,oBAAwC,GAAG,EAAE,eAAe,EAC/E,OAAO,EACL,gBAAgB,WAAW,OAAO,EACpC,EACF,EAAE;AAEF,MAAa,cAAc,SAA6B,WAAW;CACjE,MAAM,QAAQ,SAAS,eAAe,MAAM,MAAM;CAClD,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,UAAU,MAAM,SAAS,YAAY,GAAG,WACpF;CAEF,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,OACE,oBAAC,oBAAD;EAAoB,OAAO,EAAE,aAAa,KAAK;YAC7C,oBAAC,KAAD;GAAK,GAAI,UAAU,OAAO;GAAG,GAAI;EAAS,CAAA;CACxB,CAAA;AAExB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/Cascader/Cascader.mjs

@@ -0,0 +1,371 @@
+"use client";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { useResolvedStylesApi } from "../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs";
+import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
+import { extractStyleProps } from "../../core/Box/style-props/extract-style-props/extract-style-props.mjs";
+import { factory } from "../../core/factory/factory.mjs";
+import { ScrollArea } from "../ScrollArea/ScrollArea.mjs";
+import { InputBase } from "../InputBase/InputBase.mjs";
+import { useCombobox } from "../Combobox/use-combobox/use-combobox.mjs";
+import { Combobox } from "../Combobox/Combobox.mjs";
+import { CheckIcon } from "../Checkbox/CheckIcon.mjs";
+import { CascaderColumns } from "./CascaderColumns.mjs";
+import { flattenCascaderPaths } from "./flatten-cascader-paths.mjs";
+import { getCascaderPathOptions } from "./get-cascader-path-options.mjs";
+import { useCascader } from "./use-cascader.mjs";
+import Cascader_module_default from "./Cascader.module.mjs";
+import { Fragment, useEffect, useMemo } from "react";
+import { useId as useId$1, useUncontrolled } from "@mantine/hooks";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Cascader/Cascader.tsx
+const defaultProps = {
+	expandTrigger: "click",
+	changeOnSelect: false,
+	allowDeselect: true,
+	withCheckIcon: true,
+	checkIconPosition: "right",
+	withColumns: true,
+	searchable: false,
+	separator: "/",
+	maxDisplayedLevels: 3,
+	previousLevelsControlLabel: "Show previous levels",
+	nextLevelsControlLabel: "Show next levels",
+	maxDropdownHeight: 260,
+	openOnFocus: true,
+	size: "sm"
+};
+function optionLabelToString(option) {
+	return typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : option.value;
+}
+function firstEnabledOptionIndex(options) {
+	return options.findIndex((option) => !option.disabled);
+}
+function lastEnabledOptionIndex(options) {
+	for (let index = options.length - 1; index >= 0; index -= 1) if (!options[index].disabled) return index;
+	return -1;
+}
+function joinPathLabels(options, separator) {
+	return options.map(optionLabelToString).join(` ${separator} `);
+}
+function defaultCascaderFilter(query, options, separator) {
+	const trimmed = query.trim().toLowerCase();
+	if (trimmed.length === 0) return true;
+	return joinPathLabels(options, separator).toLowerCase().includes(trimmed);
+}
+function defaultRenderSearchOption(options, separator) {
+	return options.map((option, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsxs("span", {
+		"data-cascader-separator": true,
+		children: [
+			" ",
+			separator,
+			" "
+		]
+	}), option.label ?? option.value] }, option.value));
+}
+const Cascader = factory((_props) => {
+	const props = useProps([
+		"Input",
+		"InputWrapper",
+		"Cascader"
+	], defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, size, data, value, defaultValue, onChange, changeOnSelect, closeOnSelect, allowDeselect, withCheckIcon, checkIconPosition, withColumns, expandTrigger, searchable, searchValue, defaultSearchValue, onSearchChange, filter, renderSearchOption, formatValue, renderOption, separator, columnWidth, maxDisplayedLevels, previousLevelsControlLabel, nextLevelsControlLabel, maxDropdownHeight, nothingFoundMessage, clearable, clearSectionMode, clearButtonProps, onClear, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, comboboxProps, scrollAreaProps, chevronColor, hiddenInputProps, openOnFocus, variant, onKeyDown, onFocus, onBlur, onClick, readOnly, disabled, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, successProps, wrapperProps, description, label, error, success, withErrorStyles, withSuccessStyles, name, form, id, placeholder, required, mod, attributes, ...others } = props;
+	const _id = useId$1(id);
+	const separatorString = typeof separator === "string" || typeof separator === "number" ? String(separator) : "/";
+	const combobox = useCombobox({
+		opened: dropdownOpened,
+		defaultOpened: defaultDropdownOpened,
+		onDropdownOpen: () => {
+			onDropdownOpen?.();
+			cascader.resetActivePath();
+		},
+		onDropdownClose: () => {
+			onDropdownClose?.();
+			if (searchable) setSearchValue(cascader.value ? displayString : "");
+		}
+	});
+	const shouldCloseOnSelect = closeOnSelect ?? !allowDeselect;
+	const cascader = useCascader({
+		data,
+		value,
+		defaultValue,
+		onChange,
+		changeOnSelect,
+		allowDeselect,
+		expandTrigger,
+		onLeafSelect: () => {
+			if (shouldCloseOnSelect) combobox.closeDropdown();
+		}
+	});
+	const getStyles = useStyles({
+		name: "Cascader",
+		classes: Cascader_module_default,
+		props,
+		classNames,
+		styles,
+		unstyled,
+		attributes
+	});
+	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+		props,
+		styles,
+		classNames
+	});
+	const { styleProps, rest: { type, autoComplete, ...rest } } = extractStyleProps(others);
+	const displayString = useMemo(() => {
+		if (cascader.pathOptions.length === 0 || !cascader.value) return "";
+		if (formatValue) {
+			const rendered = formatValue({
+				value: cascader.value,
+				options: cascader.pathOptions
+			});
+			if (typeof rendered === "string" || typeof rendered === "number") return String(rendered);
+		}
+		return joinPathLabels(cascader.pathOptions, separatorString);
+	}, [
+		cascader.pathOptions,
+		cascader.value,
+		formatValue,
+		separatorString
+	]);
+	const [_searchValue, setSearchValue] = useUncontrolled({
+		value: searchValue,
+		defaultValue: defaultSearchValue,
+		finalValue: useMemo(() => {
+			if (!searchable || !defaultValue) return "";
+			return joinPathLabels(getCascaderPathOptions(data, defaultValue), separatorString);
+		}, []),
+		onChange: onSearchChange
+	});
+	const isSearching = !!searchable && _searchValue.trim().length > 0 && _searchValue !== displayString;
+	useEffect(() => {
+		if (searchable) setSearchValue(cascader.value ? displayString : "");
+	}, [cascader.value]);
+	const showFlatList = isSearching || !withColumns;
+	const flatPaths = useMemo(() => flattenCascaderPaths(data), [data]);
+	const flatListItems = useMemo(() => {
+		if (!showFlatList) return [];
+		const base = flatPaths.filter((flatPath) => changeOnSelect ? true : flatPath.leaf);
+		if (!isSearching) return base;
+		return base.filter((flatPath) => filter ? filter(_searchValue, flatPath.options) : defaultCascaderFilter(_searchValue, flatPath.options, separatorString));
+	}, [
+		flatPaths,
+		showFlatList,
+		isSearching,
+		_searchValue,
+		changeOnSelect,
+		filter,
+		separatorString
+	]);
+	const canInteract = !readOnly && !disabled;
+	const handleSearchChange = (nextValue) => {
+		setSearchValue(nextValue);
+		if (canInteract) combobox.openDropdown();
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.key === "Escape") {
+			combobox.closeDropdown();
+			return;
+		}
+		if (showFlatList || !canInteract) return;
+		if (!combobox.dropdownOpened) {
+			if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "ArrowRight" || event.key === "Enter" || !searchable && event.key === " ") {
+				event.preventDefault();
+				cascader.setKeyboardNav(true);
+				combobox.openDropdown();
+				if (!cascader.value && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+					const rootIndex = event.key === "ArrowDown" ? firstEnabledOptionIndex(data) : lastEnabledOptionIndex(data);
+					if (rootIndex >= 0) cascader.setActivePath([data[rootIndex].value]);
+				}
+			}
+			return;
+		}
+		if (cascader.handleColumnsKeyDown(event)) event.preventDefault();
+		else if (!searchable && event.key === " ") event.preventDefault();
+	};
+	const clearButton = /* @__PURE__ */ jsx(Combobox.ClearButton, {
+		...clearButtonProps,
+		onClear: () => {
+			onClear?.();
+			cascader.setValue(null);
+			cascader.setActivePath([]);
+			setSearchValue("");
+			combobox.focusTarget();
+		}
+	});
+	const hasValue = Array.isArray(cascader.value) && cascader.value.length > 0;
+	const _clearable = clearable && hasValue && !disabled && !readOnly;
+	const listId = _id ? `${_id}-cascader-list` : void 0;
+	const valueKey = cascader.value ? JSON.stringify(cascader.value) : null;
+	const dropdown = /* @__PURE__ */ jsx(Combobox.Dropdown, {
+		hidden: readOnly || disabled,
+		style: showFlatList ? void 0 : { padding: 0 },
+		children: showFlatList ? /* @__PURE__ */ jsxs(Combobox.Options, {
+			"aria-label": typeof label === "string" ? label : void 0,
+			children: [/* @__PURE__ */ jsx(ScrollArea.Autosize, {
+				mah: maxDropdownHeight ?? 260,
+				type: "scroll",
+				scrollbarSize: "var(--combobox-padding)",
+				offsetScrollbars: "y",
+				...scrollAreaProps,
+				children: flatListItems.map((flatPath, index) => {
+					const pathKey = JSON.stringify(flatPath.path);
+					const active = valueKey !== null && pathKey === valueKey;
+					return /* @__PURE__ */ jsx(Combobox.Option, {
+						value: `${index}`,
+						active,
+						disabled: flatPath.disabled,
+						children: /* @__PURE__ */ jsxs("span", {
+							...getStyles("flatOption"),
+							children: [
+								active && withCheckIcon && checkIconPosition === "left" && /* @__PURE__ */ jsx(CheckIcon, { ...getStyles("columnOptionCheck") }),
+								/* @__PURE__ */ jsx("span", {
+									...getStyles("columnOptionLabel"),
+									children: renderSearchOption ? renderSearchOption(_searchValue, flatPath.options) : defaultRenderSearchOption(flatPath.options, separator)
+								}),
+								active && withCheckIcon && checkIconPosition !== "left" && /* @__PURE__ */ jsx(CheckIcon, { ...getStyles("columnOptionCheck") })
+							]
+						})
+					}, pathKey);
+				})
+			}), flatListItems.length === 0 && nothingFoundMessage && /* @__PURE__ */ jsx(Combobox.Empty, { children: nothingFoundMessage })]
+		}) : /* @__PURE__ */ jsx(CascaderColumns, {
+			data,
+			activePath: cascader.activePath,
+			value: cascader.value,
+			keyboardNav: cascader.keyboardNav,
+			withCheckIcon,
+			checkIconPosition,
+			renderOption,
+			columnWidth,
+			maxDisplayedLevels,
+			previousLevelsControlLabel,
+			nextLevelsControlLabel,
+			maxDropdownHeight,
+			nothingFoundMessage,
+			getStyles,
+			unstyled,
+			scrollAreaProps,
+			onOptionClick: cascader.handleOptionClick,
+			onOptionMouseEnter: cascader.handleOptionMouseEnter,
+			onColumnsMouseLeave: () => {
+				if (expandTrigger === "hover") cascader.setActivePath(cascader.value ?? []);
+			},
+			onPointerActivity: () => cascader.setKeyboardNav(false),
+			listId
+		})
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Combobox, {
+		store: combobox,
+		__staticSelector: "Cascader",
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		unstyled,
+		readOnly,
+		size,
+		attributes,
+		width: showFlatList ? "target" : "max-content",
+		position: "bottom-start",
+		onOptionSubmit: (val) => {
+			const index = Number(val);
+			const flatPath = flatListItems[index];
+			if (!flatPath || flatPath.disabled) return;
+			cascader.selectPath(flatPath.path);
+			cascader.setActivePath(flatPath.path);
+			if (shouldCloseOnSelect) combobox.closeDropdown();
+		},
+		...comboboxProps,
+		children: [/* @__PURE__ */ jsx(Combobox.Target, {
+			targetType: searchable ? "input" : "button",
+			withKeyboardNavigation: showFlatList,
+			autoComplete,
+			children: /* @__PURE__ */ jsx(InputBase, {
+				id: _id,
+				__defaultRightSection: /* @__PURE__ */ jsx(Combobox.Chevron, {
+					size,
+					error,
+					unstyled,
+					color: chevronColor
+				}),
+				__clearSection: clearButton,
+				__clearable: _clearable,
+				__clearSectionMode: clearSectionMode,
+				rightSection,
+				rightSectionPointerEvents: rightSectionPointerEvents || "none",
+				...rest,
+				...styleProps,
+				size,
+				__staticSelector: "Cascader",
+				disabled,
+				readOnly: readOnly || !searchable,
+				value: searchable ? _searchValue : displayString,
+				onChange: (event) => handleSearchChange(event.currentTarget.value),
+				onFocus: (event) => {
+					if (openOnFocus && searchable && canInteract) combobox.openDropdown();
+					onFocus?.(event);
+				},
+				onBlur: (event) => {
+					combobox.closeDropdown();
+					onBlur?.(event);
+				},
+				onClick: (event) => {
+					if (canInteract) {
+						cascader.setKeyboardNav(false);
+						if (searchable) combobox.openDropdown();
+						else combobox.toggleDropdown();
+					}
+					onClick?.(event);
+				},
+				onKeyDown: handleKeyDown,
+				classNames: resolvedClassNames,
+				styles: resolvedStyles,
+				unstyled,
+				pointer: !searchable,
+				error,
+				success,
+				attributes,
+				className,
+				style,
+				variant,
+				radius,
+				leftSection,
+				leftSectionWidth,
+				leftSectionPointerEvents,
+				leftSectionProps,
+				rightSectionWidth,
+				rightSectionProps,
+				inputContainer,
+				inputWrapperOrder,
+				withAsterisk,
+				labelProps,
+				descriptionProps,
+				errorProps,
+				successProps,
+				wrapperProps,
+				description,
+				label,
+				withErrorStyles,
+				withSuccessStyles,
+				placeholder,
+				required,
+				mod
+			})
+		}), dropdown]
+	}), /* @__PURE__ */ jsx(Combobox.HiddenInput, {
+		value: cascader.value,
+		name,
+		form,
+		disabled,
+		...hiddenInputProps
+	})] });
+});
+Cascader.classes = {
+	...InputBase.classes,
+	...Combobox.classes,
+	...Cascader_module_default
+};
+Cascader.displayName = "@mantine/core/Cascader";
+//#endregion
+export { Cascader };
+
+//# sourceMappingURL=Cascader.mjs.map

package/esm/components/Cascader/Cascader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cascader.mjs","names":["useId","classes"],"sources":["../../../src/components/Cascader/Cascader.tsx"],"sourcesContent":["import { Fragment, useEffect, useMemo } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  extractStyleProps,\n  Factory,\n  factory,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { CheckIcon } from '../Checkbox/CheckIcon';\nimport { Combobox, ComboboxLikeStylesNames, useCombobox } from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollArea, ScrollAreaProps } from '../ScrollArea';\nimport { CascaderColumns } from './CascaderColumns';\nimport { flattenCascaderPaths } from './flatten-cascader-paths';\nimport { getCascaderPathOptions } from './get-cascader-path-options';\nimport { useCascader } from './use-cascader';\nimport classes from './Cascader.module.css';\n\nexport interface CascaderOption {\n  /** Option value, must be unique across the whole data tree */\n  value: string;\n\n  /** Option label, if not set `value` is used instead */\n  label?: React.ReactNode;\n\n  /** Nested options */\n  children?: CascaderOption[];\n\n  /** If set, the option cannot be selected or expanded */\n  disabled?: boolean;\n}\n\nexport interface CascaderFormatValueInput {\n  /** Selected path from root to node */\n  value: string[];\n\n  /** Option chain resolved from the selected path */\n  options: CascaderOption[];\n}\n\nexport type CascaderFormatValue = (input: CascaderFormatValueInput) => React.ReactNode;\n\nexport type CascaderStylesNames =\n  | __InputStylesNames\n  | ComboboxLikeStylesNames\n  | 'columnsList'\n  | 'columnsOverflow'\n  | 'column'\n  | 'columnScroll'\n  | 'columnOption'\n  | 'columnOptionLabel'\n  | 'columnOptionIcon'\n  | 'columnOptionCheck'\n  | 'columnEmpty'\n  | 'flatOption';\n\nexport interface CascaderProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<CascaderFactory>,\n    ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Hierarchical options data */\n  data: CascaderOption[];\n\n  /** Controlled selected path from root to node */\n  value?: string[] | null;\n\n  /** Uncontrolled selected path from root to node */\n  defaultValue?: string[] | null;\n\n  /** Called when the selected path changes with the path and the resolved option chain */\n  onChange?: (value: string[] | null, options: CascaderOption[]) => void;\n\n  /** If set, any intermediate option can be selected, not only leaf options @default false */\n  changeOnSelect?: boolean;\n\n  /** Determines whether the dropdown should be closed when a value is selected, defaults to `!allowDeselect` */\n  closeOnSelect?: boolean;\n\n  /** If set, the selected value can be deselected by selecting it again @default true */\n  allowDeselect?: boolean;\n\n  /** If set, the check icon is displayed on the selected option @default true */\n  withCheckIcon?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'right' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Renders the dropdown as cascading columns. When `false`, options are rendered as a flat list of paths, the same way as search results (useful for narrow/mobile layouts) @default true */\n  withColumns?: boolean;\n\n  /** Determines how the next column is opened @default 'click' */\n  expandTrigger?: 'click' | 'hover';\n\n  /** If set, options can be searched by their flattened paths @default false */\n  searchable?: boolean;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Uncontrolled search value */\n  defaultSearchValue?: string;\n\n  /** Called when the search value changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Custom search filter, matched against the full option path */\n  filter?: (query: string, options: CascaderOption[]) => boolean;\n\n  /** Custom rendering of a search result row */\n  renderSearchOption?: (query: string, options: CascaderOption[]) => React.ReactNode;\n\n  /** A function to format the selected path displayed in the input, should return a string */\n  formatValue?: CascaderFormatValue;\n\n  /** Custom rendering of an option in columns */\n  renderOption?: (option: CascaderOption, level: number) => React.ReactNode;\n\n  /** Path separator displayed in the input and search results @default '/' */\n  separator?: React.ReactNode;\n\n  /** Width of each column */\n  columnWidth?: number | string;\n\n  /** Maximum number of columns (levels) displayed next to each other, deeper levels replace earlier ones @default 3 */\n  maxDisplayedLevels?: number;\n\n  /** `aria-label` and `title` of the control that reveals levels hidden before the visible ones by `maxDisplayedLevels` @default 'Show previous levels' */\n  previousLevelsControlLabel?: string;\n\n  /** `aria-label` and `title` of the control that reveals levels hidden after the visible ones by `maxDisplayedLevels` @default 'Show next levels' */\n  nextLevelsControlLabel?: string;\n\n  /** Max height of a column before it becomes scrollable @default 260 */\n  maxDropdownHeight?: number | string;\n\n  /** Message displayed when there are no options or search results */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** If set, the clear button is displayed when a value is selected @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and `rightSection` are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Controlled dropdown opened state */\n  dropdownOpened?: boolean;\n\n  /** Uncontrolled dropdown opened state */\n  defaultDropdownOpened?: boolean;\n\n  /** Called when the dropdown opens */\n  onDropdownOpen?: () => void;\n\n  /** Called when the dropdown closes */\n  onDropdownClose?: () => void;\n\n  /** Props passed down to the underlying `Combobox` component */\n  comboboxProps?: Record<string, any>;\n\n  /** Props passed down to the dropdown `ScrollArea` */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls the default chevron color */\n  chevronColor?: MantineColor;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Opens the dropdown when the input is focused in `searchable` mode @default true */\n  openOnFocus?: boolean;\n}\n\nexport type CascaderFactory = Factory<{\n  props: CascaderProps;\n  ref: HTMLInputElement;\n  stylesNames: CascaderStylesNames;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  expandTrigger: 'click',\n  changeOnSelect: false,\n  allowDeselect: true,\n  withCheckIcon: true,\n  checkIconPosition: 'right',\n  withColumns: true,\n  searchable: false,\n  separator: '/',\n  maxDisplayedLevels: 3,\n  previousLevelsControlLabel: 'Show previous levels',\n  nextLevelsControlLabel: 'Show next levels',\n  maxDropdownHeight: 260,\n  openOnFocus: true,\n  size: 'sm',\n} satisfies Partial<CascaderProps>;\n\nfunction optionLabelToString(option: CascaderOption): string {\n  return typeof option.label === 'string' || typeof option.label === 'number'\n    ? String(option.label)\n    : option.value;\n}\n\nfunction firstEnabledOptionIndex(options: CascaderOption[]): number {\n  return options.findIndex((option) => !option.disabled);\n}\n\nfunction lastEnabledOptionIndex(options: CascaderOption[]): number {\n  for (let index = options.length - 1; index >= 0; index -= 1) {\n    if (!options[index].disabled) {\n      return index;\n    }\n  }\n  return -1;\n}\n\nfunction joinPathLabels(options: CascaderOption[], separator: string): string {\n  return options.map(optionLabelToString).join(` ${separator} `);\n}\n\nfunction defaultCascaderFilter(\n  query: string,\n  options: CascaderOption[],\n  separator: string\n): boolean {\n  const trimmed = query.trim().toLowerCase();\n  if (trimmed.length === 0) {\n    return true;\n  }\n  return joinPathLabels(options, separator).toLowerCase().includes(trimmed);\n}\n\nfunction defaultRenderSearchOption(\n  options: CascaderOption[],\n  separator: React.ReactNode\n): React.ReactNode {\n  return options.map((option, index) => (\n    <Fragment key={option.value}>\n      {index > 0 && <span data-cascader-separator> {separator} </span>}\n      {option.label ?? option.value}\n    </Fragment>\n  ));\n}\n\nexport const Cascader = factory<CascaderFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'Cascader'], defaultProps as any, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    data,\n    value,\n    defaultValue,\n    onChange,\n    changeOnSelect,\n    closeOnSelect,\n    allowDeselect,\n    withCheckIcon,\n    checkIconPosition,\n    withColumns,\n    expandTrigger,\n    searchable,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    filter,\n    renderSearchOption,\n    formatValue,\n    renderOption,\n    separator,\n    columnWidth,\n    maxDisplayedLevels,\n    previousLevelsControlLabel,\n    nextLevelsControlLabel,\n    maxDropdownHeight,\n    nothingFoundMessage,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    onClear,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    comboboxProps,\n    scrollAreaProps,\n    chevronColor,\n    hiddenInputProps,\n    openOnFocus,\n    variant,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    onClick,\n    readOnly,\n    disabled,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    rightSectionProps,\n    leftSection,\n    leftSectionWidth,\n    leftSectionPointerEvents,\n    leftSectionProps,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    labelProps,\n    descriptionProps,\n    errorProps,\n    successProps,\n    wrapperProps,\n    description,\n    label,\n    error,\n    success,\n    withErrorStyles,\n    withSuccessStyles,\n    name,\n    form,\n    id,\n    placeholder,\n    required,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const separatorString =\n    typeof separator === 'string' || typeof separator === 'number' ? String(separator) : '/';\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      cascader.resetActivePath();\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      if (searchable) {\n        setSearchValue(cascader.value ? displayString : '');\n      }\n    },\n  });\n\n  // When `allowDeselect` is enabled, keep the dropdown open by default so the value can be toggled\n  const shouldCloseOnSelect = closeOnSelect ?? !allowDeselect;\n\n  const cascader = useCascader({\n    data,\n    value,\n    defaultValue,\n    onChange,\n    changeOnSelect,\n    allowDeselect,\n    expandTrigger,\n    onLeafSelect: () => {\n      if (shouldCloseOnSelect) {\n        combobox.closeDropdown();\n      }\n    },\n  });\n\n  const getStyles = useStyles<CascaderFactory>({\n    name: 'Cascader',\n    classes,\n    props: props as any,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<CascaderFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const {\n    styleProps,\n    rest: { type, autoComplete, ...rest },\n  } = extractStyleProps(others);\n\n  const displayString = useMemo(() => {\n    if (cascader.pathOptions.length === 0 || !cascader.value) {\n      return '';\n    }\n    if (formatValue) {\n      const rendered = formatValue({ value: cascader.value, options: cascader.pathOptions });\n      if (typeof rendered === 'string' || typeof rendered === 'number') {\n        return String(rendered);\n      }\n    }\n    return joinPathLabels(cascader.pathOptions, separatorString);\n  }, [cascader.pathOptions, cascader.value, formatValue, separatorString]);\n\n  const initialSearchValue = useMemo(() => {\n    if (!searchable || !defaultValue) {\n      return '';\n    }\n    return joinPathLabels(getCascaderPathOptions(data, defaultValue), separatorString);\n  }, []);\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: initialSearchValue,\n    onChange: onSearchChange,\n  });\n\n  const isSearching =\n    !!searchable && _searchValue.trim().length > 0 && _searchValue !== displayString;\n\n  useEffect(() => {\n    if (searchable) {\n      setSearchValue(cascader.value ? displayString : '');\n    }\n  }, [cascader.value]);\n\n  // The dropdown renders a flat list of paths when searching or when `withColumns` is disabled\n  const showFlatList = isSearching || !withColumns;\n\n  const flatPaths = useMemo(() => flattenCascaderPaths(data), [data]);\n\n  const flatListItems = useMemo(() => {\n    if (!showFlatList) {\n      return [];\n    }\n    const base = flatPaths.filter((flatPath) => (changeOnSelect ? true : flatPath.leaf));\n    if (!isSearching) {\n      return base;\n    }\n    return base.filter((flatPath) =>\n      filter\n        ? filter(_searchValue, flatPath.options)\n        : defaultCascaderFilter(_searchValue, flatPath.options, separatorString)\n    );\n  }, [flatPaths, showFlatList, isSearching, _searchValue, changeOnSelect, filter, separatorString]);\n\n  const canInteract = !readOnly && !disabled;\n\n  const handleSearchChange = (nextValue: string) => {\n    setSearchValue(nextValue);\n    if (canInteract) {\n      combobox.openDropdown();\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === 'Escape') {\n      combobox.closeDropdown();\n      return;\n    }\n\n    if (showFlatList || !canInteract) {\n      return;\n    }\n\n    if (!combobox.dropdownOpened) {\n      const opensDropdown =\n        event.key === 'ArrowDown' ||\n        event.key === 'ArrowUp' ||\n        event.key === 'ArrowRight' ||\n        event.key === 'Enter' ||\n        (!searchable && event.key === ' ');\n\n      if (opensDropdown) {\n        event.preventDefault();\n        cascader.setKeyboardNav(true);\n        combobox.openDropdown();\n\n        if (!cascader.value && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {\n          const rootIndex =\n            event.key === 'ArrowDown'\n              ? firstEnabledOptionIndex(data)\n              : lastEnabledOptionIndex(data);\n          if (rootIndex >= 0) {\n            cascader.setActivePath([data[rootIndex].value]);\n          }\n        }\n      }\n      return;\n    }\n\n    if (cascader.handleColumnsKeyDown(event)) {\n      event.preventDefault();\n    } else if (!searchable && event.key === ' ') {\n      event.preventDefault();\n    }\n  };\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        onClear?.();\n        cascader.setValue(null);\n        cascader.setActivePath([]);\n        setSearchValue('');\n        combobox.focusTarget();\n      }}\n    />\n  );\n\n  const hasValue = Array.isArray(cascader.value) && cascader.value.length > 0;\n  const _clearable = clearable && hasValue && !disabled && !readOnly;\n\n  const listId = _id ? `${_id}-cascader-list` : undefined;\n  const valueKey = cascader.value ? JSON.stringify(cascader.value) : null;\n\n  const dropdown = (\n    <Combobox.Dropdown\n      hidden={readOnly || disabled}\n      style={showFlatList ? undefined : { padding: 0 }}\n    >\n      {showFlatList ? (\n        <Combobox.Options aria-label={typeof label === 'string' ? label : undefined}>\n          <ScrollArea.Autosize\n            mah={maxDropdownHeight ?? 260}\n            type=\"scroll\"\n            scrollbarSize=\"var(--combobox-padding)\"\n            offsetScrollbars=\"y\"\n            {...scrollAreaProps}\n          >\n            {flatListItems.map((flatPath, index) => {\n              const pathKey = JSON.stringify(flatPath.path);\n              const active = valueKey !== null && pathKey === valueKey;\n              return (\n                <Combobox.Option\n                  key={pathKey}\n                  value={`${index}`}\n                  active={active}\n                  disabled={flatPath.disabled}\n                >\n                  <span {...getStyles('flatOption')}>\n                    {active && withCheckIcon && checkIconPosition === 'left' && (\n                      <CheckIcon {...getStyles('columnOptionCheck')} />\n                    )}\n                    <span {...getStyles('columnOptionLabel')}>\n                      {renderSearchOption\n                        ? renderSearchOption(_searchValue, flatPath.options)\n                        : defaultRenderSearchOption(flatPath.options, separator)}\n                    </span>\n                    {active && withCheckIcon && checkIconPosition !== 'left' && (\n                      <CheckIcon {...getStyles('columnOptionCheck')} />\n                    )}\n                  </span>\n                </Combobox.Option>\n              );\n            })}\n          </ScrollArea.Autosize>\n          {flatListItems.length === 0 && nothingFoundMessage && (\n            <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>\n          )}\n        </Combobox.Options>\n      ) : (\n        <CascaderColumns\n          data={data}\n          activePath={cascader.activePath}\n          value={cascader.value}\n          keyboardNav={cascader.keyboardNav}\n          withCheckIcon={withCheckIcon}\n          checkIconPosition={checkIconPosition}\n          renderOption={renderOption}\n          columnWidth={columnWidth}\n          maxDisplayedLevels={maxDisplayedLevels}\n          previousLevelsControlLabel={previousLevelsControlLabel}\n          nextLevelsControlLabel={nextLevelsControlLabel}\n          maxDropdownHeight={maxDropdownHeight}\n          nothingFoundMessage={nothingFoundMessage}\n          getStyles={getStyles}\n          unstyled={unstyled}\n          scrollAreaProps={scrollAreaProps}\n          onOptionClick={cascader.handleOptionClick}\n          onOptionMouseEnter={cascader.handleOptionMouseEnter}\n          onColumnsMouseLeave={() => {\n            if (expandTrigger === 'hover') {\n              cascader.setActivePath(cascader.value ?? []);\n            }\n          }}\n          onPointerActivity={() => cascader.setKeyboardNav(false)}\n          listId={listId}\n        />\n      )}\n    </Combobox.Dropdown>\n  );\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"Cascader\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        readOnly={readOnly}\n        size={size}\n        attributes={attributes}\n        width={showFlatList ? 'target' : 'max-content'}\n        position=\"bottom-start\"\n        onOptionSubmit={(val) => {\n          const index = Number(val);\n          const flatPath = flatListItems[index];\n          if (!flatPath || flatPath.disabled) {\n            return;\n          }\n          cascader.selectPath(flatPath.path);\n          cascader.setActivePath(flatPath.path);\n          if (shouldCloseOnSelect) {\n            combobox.closeDropdown();\n          }\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.Target\n          targetType={searchable ? 'input' : 'button'}\n          withKeyboardNavigation={showFlatList}\n          autoComplete={autoComplete}\n        >\n          <InputBase\n            id={_id}\n            __defaultRightSection={\n              <Combobox.Chevron\n                size={size}\n                error={error}\n                unstyled={unstyled}\n                color={chevronColor}\n              />\n            }\n            __clearSection={clearButton}\n            __clearable={_clearable}\n            __clearSectionMode={clearSectionMode}\n            rightSection={rightSection}\n            rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n            {...rest}\n            {...styleProps}\n            size={size}\n            __staticSelector=\"Cascader\"\n            disabled={disabled}\n            readOnly={readOnly || !searchable}\n            value={searchable ? _searchValue : displayString}\n            onChange={(event) => handleSearchChange(event.currentTarget.value)}\n            onFocus={(event) => {\n              if (openOnFocus && searchable && canInteract) {\n                combobox.openDropdown();\n              }\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              combobox.closeDropdown();\n              onBlur?.(event);\n            }}\n            onClick={(event) => {\n              if (canInteract) {\n                cascader.setKeyboardNav(false);\n                if (searchable) {\n                  combobox.openDropdown();\n                } else {\n                  combobox.toggleDropdown();\n                }\n              }\n              onClick?.(event);\n            }}\n            onKeyDown={handleKeyDown}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            pointer={!searchable}\n            error={error}\n            success={success}\n            attributes={attributes}\n            className={className}\n            style={style}\n            variant={variant}\n            radius={radius}\n            leftSection={leftSection}\n            leftSectionWidth={leftSectionWidth}\n            leftSectionPointerEvents={leftSectionPointerEvents}\n            leftSectionProps={leftSectionProps}\n            rightSectionWidth={rightSectionWidth}\n            rightSectionProps={rightSectionProps}\n            inputContainer={inputContainer}\n            inputWrapperOrder={inputWrapperOrder}\n            withAsterisk={withAsterisk}\n            labelProps={labelProps}\n            descriptionProps={descriptionProps}\n            errorProps={errorProps}\n            successProps={successProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            withErrorStyles={withErrorStyles}\n            withSuccessStyles={withSuccessStyles}\n            placeholder={placeholder}\n            required={required}\n            mod={mod}\n          />\n        </Combobox.Target>\n        {dropdown}\n      </Combobox>\n      <Combobox.HiddenInput\n        value={cascader.value}\n        name={name}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nCascader.classes = { ...InputBase.classes, ...Combobox.classes, ...classes };\nCascader.displayName = '@mantine/core/Cascader';\n"],"mappings":"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"}

package/esm/components/Cascader/Cascader.module.mjs

@@ -0,0 +1,18 @@
+"use client";
+//#region packages/@mantine/core/src/components/Cascader/Cascader.module.css
+var Cascader_module_default = {
+	"columnsList": "m_9a782f2c",
+	"column": "m_4c5a03a5",
+	"columnScroll": "m_7f3ac6d2",
+	"columnsOverflow": "m_6b93b90",
+	"columnOption": "m_791f687a",
+	"flatOption": "m_452a61d",
+	"columnOptionLabel": "m_aecd629a",
+	"columnOptionIcon": "m_92054c13",
+	"columnOptionCheck": "m_ae51c8ae",
+	"columnEmpty": "m_97ff10a8"
+};
+//#endregion
+export { Cascader_module_default as default };
+
+//# sourceMappingURL=Cascader.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Cascader.module.mjs","names":[],"sources":["../../../src/components/Cascader/Cascader.module.css"],"sourcesContent":[".columnsList {\n  --cascader-column-width: 200px;\n\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n}\n\n.column {\n  display: flex;\n  flex-direction: column;\n  width: var(--cascader-column-width);\n  min-width: var(--cascader-column-width);\n  border-inline-end: rem(1px) solid var(--popover-border-color, var(--mantine-color-default-border));\n\n  /* Keep the border width reserved so revealing the next column does not shift the layout */\n  &:where([data-last]) {\n    border-inline-end-color: transparent;\n  }\n}\n\n.columnScroll {\n  flex: 1;\n  padding: var(--combobox-padding);\n}\n\n.columnsOverflow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: stretch;\n  padding-inline: calc(var(--combobox-padding) / 2);\n  color: var(--mantine-color-dimmed);\n  cursor: pointer;\n  border-inline-end: rem(1px) solid var(--popover-border-color, var(--mantine-color-default-border));\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-7);\n    }\n  }\n\n  & > svg {\n    width: 0.9em;\n    height: 0.9em;\n    transform: rotate(90deg);\n  }\n\n  /* Round the corners that sit against the rounded dropdown edge so the hover background\n     does not overflow the dropdown corners */\n  &:where([data-position='start']) {\n    border-start-start-radius: var(--popover-radius, var(--mantine-radius-default));\n    border-end-start-radius: var(--popover-radius, var(--mantine-radius-default));\n  }\n\n  /* The divider on the left is provided by the previous column, so this control has none */\n  &:where([data-position='end']) {\n    border-inline-end-color: transparent;\n    border-start-end-radius: var(--popover-radius, var(--mantine-radius-default));\n    border-end-end-radius: var(--popover-radius, var(--mantine-radius-default));\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  @mixin where-rtl {\n    & > svg {\n      transform: rotate(-90deg);\n    }\n\n    &:where([data-position='end']) > svg {\n      transform: rotate(90deg);\n    }\n  }\n}\n\n.columnOption {\n  display: flex;\n  align-items: center;\n  gap: var(--mantine-spacing-xs);\n  width: 100%;\n  padding: var(--combobox-option-padding);\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  border-radius: var(--combobox-option-radius, var(--mantine-radius-default));\n  color: var(--mantine-color-text);\n  cursor: pointer;\n\n  @mixin hover {\n    &:where(:not([data-disabled], [data-active])) {\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-0);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-7);\n      }\n    }\n  }\n\n  /* Selected options in the ancestor columns (the navigation trail) */\n  &:where([data-in-path]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-1);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-6);\n    }\n  }\n\n  /* Option in the column that is currently being navigated */\n  &:where([data-active]) {\n    background-color: var(--mantine-primary-color-filled);\n    color: var(--mantine-color-white);\n\n    @mixin hover {\n      background-color: var(--mantine-primary-color-filled-hover);\n    }\n  }\n\n  &:where([data-disabled]) {\n    color: var(--mantine-color-dimmed);\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n\n.flatOption {\n  display: flex;\n  align-items: center;\n  gap: var(--mantine-spacing-xs);\n  width: 100%;\n}\n\n.columnOptionLabel {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.columnOptionIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 0.9em;\n  min-width: 0.9em;\n  height: 0.9em;\n  color: var(--mantine-color-dimmed);\n  transform: rotate(-90deg);\n\n  :where([data-active]) & {\n    color: inherit;\n  }\n\n  @mixin where-rtl {\n    transform: rotate(90deg);\n  }\n}\n\n.columnOptionCheck {\n  width: 0.8em;\n  min-width: 0.8em;\n  height: 0.8em;\n  opacity: 0.4;\n\n  :where([data-active]) &,\n  :where([data-combobox-selected]) & {\n    opacity: 1;\n  }\n}\n\n.columnEmpty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--combobox-option-padding);\n  color: var(--mantine-color-dimmed);\n  font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n  white-space: nowrap;\n}\n"],"mappings":""}