@mantine/core 9.0.2 → 9.1.1

package/cjs/components/MultiSelect/MultiSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","extractStyleProps","useStyles","useResolvedStylesApi","Fragment","Pill","Combobox","filterPickedValues","PillsInput","OptionsDropdown","InputBase"],"sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  extractStyleProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxRenderPillInput,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedValues } from './filter-picked-values';\n\nconst clearSectionOffset: Record<string, number> = {\n  xs: 41,\n  sm: 50,\n  md: 60,\n  lg: 72,\n  xl: 89,\n};\n\nexport type MultiSelectStylesNames =\n  | __InputStylesNames\n  | ComboboxLikeStylesNames\n  | 'pill'\n  | 'pillsList'\n  | 'inputField';\n\nexport interface MultiSelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<MultiSelectFactory>,\n    ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value[];\n\n  /** Called when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Called with `value` of the removed item */\n  onRemove?: (value: Value) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Called when user attemps to select more values than allowed */\n  onMaxValues?: () => void;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Maximum number of values, no limit if not set */\n  maxValues?: number;\n\n  /** Allows searching through options by user input @default false */\n  searchable?: boolean;\n\n  /** Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead. */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** If set, the check icon is displayed near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** If set, unchecked labels are aligned with checked ones @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the checkmark icon shown next to selected options in the dropdown @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** When enabled, selected options are hidden from the dropdown list @default false */\n  hidePickedOptions?: boolean;\n\n  /** When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only) @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;\n\n  /** A function to render content of the pill */\n  renderPill?: (props: ComboboxRenderPillInput<Value>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron */\n  chevronColor?: MantineColor;\n\n  /** Clear search value when item is selected @default true */\n  clearSearchOnChange?: boolean;\n\n  /** Controls whether dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type MultiSelectFactory = Factory<{\n  props: MultiSelectProps;\n  ref: HTMLInputElement;\n  stylesNames: MultiSelectStylesNames;\n  signature: <Value extends Primitive = string>(\n    props: MultiSelectProps<Value>\n  ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxValues: Infinity,\n  withCheckIcon: true,\n  checkIconPosition: 'left',\n  hiddenInputValuesDivider: ',',\n  clearSearchOnChange: true,\n  openOnFocus: true,\n  size: 'sm',\n} satisfies Partial<MultiSelectProps>;\n\nexport const MultiSelect = genericFactory<MultiSelectFactory>((_props) => {\n  const props = useProps('MultiSelect', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    value,\n    defaultValue,\n    onChange,\n    onKeyDown,\n    variant,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    readOnly,\n    disabled,\n    onFocus,\n    onBlur,\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    wrapperProps,\n    description,\n    label,\n    error,\n    maxValues,\n    searchable,\n    nothingFoundMessage,\n    withCheckIcon,\n    withAlignedLabels,\n    checkIconPosition,\n    hidePickedOptions,\n    withErrorStyles,\n    name,\n    form,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    placeholder,\n    hiddenInputValuesDivider,\n    required,\n    mod,\n    renderOption,\n    renderPill,\n    onRemove,\n    onClear,\n    onMaxValues,\n    scrollAreaProps,\n    chevronColor,\n    attributes,\n    clearSearchOnChange,\n    openOnFocus,\n    loading,\n    loadingPosition,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const {\n    styleProps,\n    rest: { type, autoComplete, ...rest },\n  } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<MultiSelectFactory>({\n    name: 'MultiSelect',\n    classes: {} as any,\n    props: props as any,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MultiSelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === ' ' && !searchable) {\n      event.preventDefault();\n      combobox.toggleDropdown();\n    }\n\n    if (event.key === 'Backspace' && _searchValue.length === 0 && _value.length > 0) {\n      onRemove?.(_value[_value.length - 1]);\n      setValue(_value.slice(0, _value.length - 1));\n    }\n  };\n\n  const values = _value.map((item, index) => {\n    const optionData = optionsLockup[`${item}`] || retainedSelectedOptions.current[`${item}`];\n\n    if (renderPill) {\n      return (\n        <Fragment key={`${item}-${index}`}>\n          {renderPill({\n            option: optionData,\n            value: item,\n            onRemove: () => {\n              setValue(_value.filter((i) => item !== i));\n              onRemove?.(item);\n            },\n            disabled,\n          })}\n        </Fragment>\n      );\n    }\n\n    return (\n      <Pill\n        key={`${item}-${index}`}\n        withRemoveButton={!readOnly && !optionsLockup[`${item}`]?.disabled}\n        onRemove={() => {\n          setValue(_value.filter((i) => item !== i));\n          onRemove?.(item);\n        }}\n        unstyled={unstyled}\n        disabled={disabled}\n        {...getStyles('pill')}\n      >\n        {optionData?.label || item}\n      </Pill>\n    );\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _searchValue]);\n\n  useEffect(() => {\n    _value.forEach((val) => {\n      if (`${val}` in optionsLockup) {\n        retainedSelectedOptions.current[`${val}`] = optionsLockup[`${val}`];\n      }\n    });\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        onClear?.();\n        setValue([]);\n        handleSearchChange('');\n      }}\n    />\n  );\n\n  const filteredData = filterPickedValues({ data: parsedData, value: _value });\n  const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;\n  const pillsListStyle = _clearable\n    ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm }\n    : undefined;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        size={size}\n        readOnly={readOnly}\n        __staticSelector=\"MultiSelect\"\n        attributes={attributes}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          if (clearSearchOnChange) {\n            handleSearchChange('');\n          }\n          combobox.updateSelectedOptionIndex('selected');\n\n          if (_value.includes(optionsLockup[`${val}`].value as any)) {\n            setValue(_value.filter((v) => v !== optionsLockup[`${val}`].value));\n            onRemove?.(optionsLockup[`${val}`].value as any);\n          } else if (_value.length < maxValues) {\n            setValue([..._value, optionsLockup[`${val}`].value] as any);\n          } else {\n            onMaxValues?.();\n          }\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.DropdownTarget>\n          <PillsInput\n            {...styleProps}\n            __staticSelector=\"MultiSelect\"\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            size={size}\n            className={className}\n            style={style}\n            variant={variant}\n            disabled={disabled}\n            radius={radius}\n            __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            rightSectionWidth={rightSectionWidth}\n            rightSectionProps={rightSectionProps}\n            leftSection={leftSection}\n            leftSectionWidth={leftSectionWidth}\n            leftSectionPointerEvents={leftSectionPointerEvents}\n            leftSectionProps={leftSectionProps}\n            loading={loading}\n            loadingPosition={loadingPosition}\n            inputContainer={inputContainer}\n            inputWrapperOrder={inputWrapperOrder}\n            withAsterisk={withAsterisk}\n            labelProps={labelProps}\n            descriptionProps={descriptionProps}\n            errorProps={errorProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            withErrorStyles={withErrorStyles}\n            __stylesApiProps={{\n              ...props,\n              rightSectionPointerEvents: rightSectionPointerEvents || 'none',\n              multiline: true,\n            }}\n            pointer={!searchable}\n            onClick={() => (searchable ? combobox.openDropdown() : combobox.toggleDropdown())}\n            data-expanded={combobox.dropdownOpened || undefined}\n            id={_id}\n            required={required}\n            mod={mod}\n            attributes={attributes}\n          >\n            <Pill.Group\n              attributes={attributes}\n              disabled={disabled}\n              unstyled={unstyled}\n              {...getStyles('pillsList', { style: pillsListStyle })}\n            >\n              {values}\n              <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n                <PillsInput.Field\n                  {...rest}\n                  id={_id}\n                  placeholder={placeholder}\n                  type={!searchable && !placeholder ? 'hidden' : 'visible'}\n                  {...getStyles('inputField')}\n                  unstyled={unstyled}\n                  onFocus={(event) => {\n                    onFocus?.(event);\n                    openOnFocus && searchable && combobox.openDropdown();\n                  }}\n                  onBlur={(event) => {\n                    onBlur?.(event);\n                    combobox.closeDropdown();\n                    handleSearchChange('');\n                  }}\n                  onKeyDown={handleInputKeydown}\n                  value={_searchValue}\n                  onChange={(event) => {\n                    handleSearchChange(event.currentTarget.value);\n                    searchable && combobox.openDropdown();\n                    selectFirstOptionOnChange && combobox.selectFirstOption();\n                  }}\n                  disabled={disabled}\n                  readOnly={readOnly || !searchable}\n                  pointer={!searchable}\n                />\n              </Combobox.EventsTarget>\n            </Pill.Group>\n          </PillsInput>\n        </Combobox.DropdownTarget>\n\n        <OptionsDropdown\n          data={hidePickedOptions ? filteredData : parsedData}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={_searchValue}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={searchable}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={label ? `${_id}-label` : undefined}\n          aria-label={label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        valuesDivider={hiddenInputValuesDivider}\n        value={_value}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nMultiSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nMultiSelect.displayName = '@mantine/core/MultiSelect';\n\nexport namespace MultiSelect {\n  export type Props<Value extends Primitive = string> = MultiSelectProps<Value>;\n  export type StylesNames = MultiSelectStylesNames;\n  export type Factory = MultiSelectFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","extractStyleProps","useStyles","useResolvedStylesApi","Fragment","Pill","Combobox","filterPickedValues","PillsInput","OptionsDropdown","InputBase"],"sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  extractStyleProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  ComboboxRenderPillInput,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedValues } from './filter-picked-values';\n\nconst clearSectionOffset: Record<string, number> = {\n  xs: 41,\n  sm: 50,\n  md: 60,\n  lg: 72,\n  xl: 89,\n};\n\nexport type MultiSelectStylesNames =\n  | __InputStylesNames\n  | ComboboxLikeStylesNames\n  | 'pill'\n  | 'pillsList'\n  | 'inputField';\n\nexport interface MultiSelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<MultiSelectFactory>,\n    ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value[];\n\n  /** Called when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Called with `value` of the removed item */\n  onRemove?: (value: Value) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Called when user attemps to select more values than allowed */\n  onMaxValues?: () => void;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Maximum number of values, no limit if not set */\n  maxValues?: number;\n\n  /** Allows searching through options by user input @default false */\n  searchable?: boolean;\n\n  /** Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead. */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** If set, the check icon is displayed near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** If set, unchecked labels are aligned with checked ones @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the checkmark icon shown next to selected options in the dropdown @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** When enabled, selected options are hidden from the dropdown list @default false */\n  hidePickedOptions?: boolean;\n\n  /** When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only) @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** Divider used to separate values in the hidden input `value` attribute @default ',' */\n  hiddenInputValuesDivider?: string;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n  /** A function to render content of the pill */\n  renderPill?: (props: ComboboxRenderPillInput<Value>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron */\n  chevronColor?: MantineColor;\n\n  /** Clear search value when item is selected @default true */\n  clearSearchOnChange?: boolean;\n\n  /** Controls whether dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type MultiSelectFactory = Factory<{\n  props: MultiSelectProps;\n  ref: HTMLInputElement;\n  stylesNames: MultiSelectStylesNames;\n  signature: <Value extends Primitive = string>(\n    props: MultiSelectProps<Value>\n  ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxValues: Infinity,\n  withCheckIcon: true,\n  checkIconPosition: 'left',\n  hiddenInputValuesDivider: ',',\n  clearSearchOnChange: true,\n  openOnFocus: true,\n  size: 'sm',\n} satisfies Partial<MultiSelectProps>;\n\nexport const MultiSelect = genericFactory<MultiSelectFactory>((_props) => {\n  const props = useProps('MultiSelect', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    value,\n    defaultValue,\n    onChange,\n    onKeyDown,\n    variant,\n    data,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownOpen,\n    onDropdownClose,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    readOnly,\n    disabled,\n    onFocus,\n    onBlur,\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    wrapperProps,\n    description,\n    label,\n    error,\n    maxValues,\n    searchable,\n    nothingFoundMessage,\n    withCheckIcon,\n    withAlignedLabels,\n    checkIconPosition,\n    hidePickedOptions,\n    withErrorStyles,\n    name,\n    form,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    placeholder,\n    hiddenInputValuesDivider,\n    required,\n    mod,\n    renderOption,\n    renderPill,\n    onRemove,\n    onClear,\n    onMaxValues,\n    scrollAreaProps,\n    chevronColor,\n    attributes,\n    clearSearchOnChange,\n    openOnFocus,\n    loading,\n    loadingPosition,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const {\n    styleProps,\n    rest: { type, autoComplete, ...rest },\n  } = extractStyleProps(others);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<MultiSelectFactory>({\n    name: 'MultiSelect',\n    classes: {} as any,\n    props: props as any,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MultiSelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.key === ' ' && !searchable) {\n      event.preventDefault();\n      combobox.toggleDropdown();\n    }\n\n    if (event.key === 'Backspace' && _searchValue.length === 0 && _value.length > 0) {\n      onRemove?.(_value[_value.length - 1]);\n      setValue(_value.slice(0, _value.length - 1));\n    }\n  };\n\n  const values = _value.map((item, index) => {\n    const optionData = optionsLockup[`${item}`] || retainedSelectedOptions.current[`${item}`];\n\n    if (renderPill) {\n      return (\n        <Fragment key={`${item}-${index}`}>\n          {renderPill({\n            option: optionData,\n            value: item,\n            onRemove: () => {\n              setValue(_value.filter((i) => item !== i));\n              onRemove?.(item);\n            },\n            disabled,\n          })}\n        </Fragment>\n      );\n    }\n\n    return (\n      <Pill\n        key={`${item}-${index}`}\n        withRemoveButton={!readOnly && !optionsLockup[`${item}`]?.disabled}\n        onRemove={() => {\n          setValue(_value.filter((i) => item !== i));\n          onRemove?.(item);\n        }}\n        unstyled={unstyled}\n        disabled={disabled}\n        {...getStyles('pill')}\n      >\n        {optionData?.label || item}\n      </Pill>\n    );\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _searchValue]);\n\n  useEffect(() => {\n    _value.forEach((val) => {\n      if (`${val}` in optionsLockup) {\n        retainedSelectedOptions.current[`${val}`] = optionsLockup[`${val}`];\n      }\n    });\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        onClear?.();\n        setValue([]);\n        handleSearchChange('');\n      }}\n    />\n  );\n\n  const filteredData = filterPickedValues({ data: parsedData, value: _value });\n  const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;\n  const pillsListStyle = _clearable\n    ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm }\n    : undefined;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        size={size}\n        readOnly={readOnly}\n        __staticSelector=\"MultiSelect\"\n        attributes={attributes}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          if (clearSearchOnChange) {\n            handleSearchChange('');\n          }\n          combobox.updateSelectedOptionIndex('selected');\n\n          if (_value.includes(optionsLockup[`${val}`].value as any)) {\n            setValue(_value.filter((v) => v !== optionsLockup[`${val}`].value));\n            onRemove?.(optionsLockup[`${val}`].value as any);\n          } else if (_value.length < maxValues) {\n            setValue([..._value, optionsLockup[`${val}`].value] as any);\n          } else {\n            onMaxValues?.();\n          }\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.DropdownTarget>\n          <PillsInput\n            {...styleProps}\n            __staticSelector=\"MultiSelect\"\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            size={size}\n            className={className}\n            style={style}\n            variant={variant}\n            disabled={disabled}\n            radius={radius}\n            __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            rightSectionWidth={rightSectionWidth}\n            rightSectionProps={rightSectionProps}\n            leftSection={leftSection}\n            leftSectionWidth={leftSectionWidth}\n            leftSectionPointerEvents={leftSectionPointerEvents}\n            leftSectionProps={leftSectionProps}\n            loading={loading}\n            loadingPosition={loadingPosition}\n            inputContainer={inputContainer}\n            inputWrapperOrder={inputWrapperOrder}\n            withAsterisk={withAsterisk}\n            labelProps={labelProps}\n            descriptionProps={descriptionProps}\n            errorProps={errorProps}\n            wrapperProps={wrapperProps}\n            description={description}\n            label={label}\n            error={error}\n            withErrorStyles={withErrorStyles}\n            __stylesApiProps={{\n              ...props,\n              rightSectionPointerEvents: rightSectionPointerEvents || 'none',\n              multiline: true,\n            }}\n            pointer={!searchable}\n            onClick={() => (searchable ? combobox.openDropdown() : combobox.toggleDropdown())}\n            data-expanded={combobox.dropdownOpened || undefined}\n            id={_id}\n            required={required}\n            mod={mod}\n            attributes={attributes}\n          >\n            <Pill.Group\n              attributes={attributes}\n              disabled={disabled}\n              unstyled={unstyled}\n              {...getStyles('pillsList', { style: pillsListStyle })}\n            >\n              {values}\n              <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n                <PillsInput.Field\n                  {...rest}\n                  id={_id}\n                  placeholder={placeholder}\n                  type={!searchable && !placeholder ? 'hidden' : 'visible'}\n                  {...getStyles('inputField')}\n                  unstyled={unstyled}\n                  onFocus={(event) => {\n                    onFocus?.(event);\n                    openOnFocus && searchable && combobox.openDropdown();\n                  }}\n                  onBlur={(event) => {\n                    onBlur?.(event);\n                    combobox.closeDropdown();\n                    handleSearchChange('');\n                  }}\n                  onKeyDown={handleInputKeydown}\n                  value={_searchValue}\n                  onChange={(event) => {\n                    handleSearchChange(event.currentTarget.value);\n                    searchable && combobox.openDropdown();\n                    selectFirstOptionOnChange && combobox.selectFirstOption();\n                  }}\n                  disabled={disabled}\n                  readOnly={readOnly || !searchable}\n                  pointer={!searchable}\n                />\n              </Combobox.EventsTarget>\n            </Pill.Group>\n          </PillsInput>\n        </Combobox.DropdownTarget>\n\n        <OptionsDropdown\n          data={hidePickedOptions ? filteredData : parsedData}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={_searchValue}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={searchable}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={label ? `${_id}-label` : undefined}\n          aria-label={label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        name={name}\n        valuesDivider={hiddenInputValuesDivider}\n        value={_value}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nMultiSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nMultiSelect.displayName = '@mantine/core/MultiSelect';\n\nexport namespace MultiSelect {\n  export type Props<Value extends Primitive = string> = MultiSelectProps<Value>;\n  export type StylesNames = MultiSelectStylesNames;\n  export type Factory = MultiSelectFactory;\n}\n"],"mappings":"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"}

package/cjs/components/PasswordInput/PasswordInput.cjs

@@ -129,7 +129,7 @@ const PasswordInput = require_factory.factory((_props) => {
 			size,
 			classNames: {
 				...resolvedClassNames,
-				input: (0, clsx.default)(require_PasswordInput_module.default.input, resolvedClassNames.input)
+				input: (0, clsx.default)(require_PasswordInput_module.default.input, resolvedClassNames?.input)
 			},
 			styles: resolvedStyles,
 			radius,

package/cjs/components/PasswordInput/PasswordInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.cjs","names":["PasswordToggleIcon","createVarsResolver","getSize","factory","useProps","useStyles","useResolvedStylesApi","extractStyleProps","ActionIcon","Input","classes","InputBase"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n  | 'root'\n  | 'visibilityToggle'\n  | 'innerInput'\n  | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n  root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    StylesApiProps<PasswordInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** A component to replace the visibility toggle icon */\n  visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n  /** Props passed down to the visibility toggle button */\n  visibilityToggleButtonProps?: Record<string, any>;\n\n  /** If set, the input value is visible */\n  visible?: boolean;\n\n  /** If set, the input value is visible by default */\n  defaultVisible?: boolean;\n\n  /** Called when visibility changes */\n  onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n  props: PasswordInputProps;\n  ref: HTMLInputElement;\n  stylesNames: PasswordInputStylesNames;\n  vars: PasswordInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  visibilityToggleIcon: PasswordToggleIcon,\n  size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n  root: {\n    '--psi-icon-size': getSize(size, 'psi-icon-size'),\n    '--psi-button-size': getSize(size, 'psi-button-size'),\n  },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n  const props = useProps('PasswordInput', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    required,\n    error,\n    leftSection,\n    disabled,\n    id,\n    variant,\n    inputContainer,\n    description,\n    label,\n    size,\n    errorProps,\n    descriptionProps,\n    labelProps,\n    withAsterisk,\n    inputWrapperOrder,\n    wrapperProps,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionWidth,\n    visible,\n    defaultVisible,\n    onVisibilityChange,\n    visibilityToggleIcon: VisibilityToggleIcon,\n    visibilityToggleButtonProps,\n    rightSectionProps,\n    leftSectionProps,\n    leftSectionPointerEvents,\n    withErrorStyles,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const uuid = useId(id);\n\n  const [_visible, setVisibility] = useUncontrolled({\n    value: visible,\n    defaultValue: defaultVisible,\n    finalValue: false,\n    onChange: onVisibilityChange,\n  });\n\n  const toggleVisibility = () => setVisibility(!_visible);\n\n  const getStyles = useStyles<PasswordInputFactory>({\n    name: 'PasswordInput',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const errorId = errorProps?.id || `${uuid}-error`;\n  const descriptionId = descriptionProps?.id || `${uuid}-description`;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasDescription = !!description;\n  const _describedBy = `${hasError ? errorId : ''} ${hasDescription ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n  const visibilityToggleButton = (\n    <ActionIcon<'button'>\n      {...getStyles('visibilityToggle')}\n      disabled={disabled}\n      radius={radius}\n      aria-pressed={_visible}\n      tabIndex={-1}\n      aria-label=\"Toggle password visibility\"\n      {...visibilityToggleButtonProps}\n      variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n      color=\"gray\"\n      unstyled={unstyled}\n      onTouchEnd={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onTouchEnd?.(event);\n        toggleVisibility();\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onMouseDown?.(event);\n        toggleVisibility();\n      }}\n      onKeyDown={(event) => {\n        visibilityToggleButtonProps?.onKeyDown?.(event);\n        if (event.key === ' ') {\n          event.preventDefault();\n          toggleVisibility();\n        }\n      }}\n    >\n      <VisibilityToggleIcon reveal={_visible} />\n    </ActionIcon>\n  );\n\n  return (\n    <Input.Wrapper\n      required={required}\n      id={uuid}\n      label={label}\n      error={error}\n      description={description}\n      size={size}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"PasswordInput\"\n      __stylesApiProps={props}\n      unstyled={unstyled}\n      withAsterisk={withAsterisk}\n      inputWrapperOrder={inputWrapperOrder}\n      inputContainer={inputContainer}\n      variant={variant}\n      labelProps={{ ...labelProps, htmlFor: uuid }}\n      descriptionProps={{ ...descriptionProps, id: descriptionId }}\n      errorProps={{ ...errorProps, id: errorId }}\n      mod={mod}\n      attributes={attributes}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Input\n        component=\"div\"\n        error={error}\n        leftSection={leftSection}\n        size={size}\n        classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames.input) }}\n        styles={resolvedStyles}\n        radius={radius}\n        disabled={disabled}\n        __staticSelector=\"PasswordInput\"\n        __stylesApiProps={props}\n        rightSectionWidth={rightSectionWidth}\n        rightSection={rightSection ?? visibilityToggleButton}\n        variant={variant}\n        unstyled={unstyled}\n        leftSectionWidth={leftSectionWidth}\n        rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n        rightSectionProps={rightSectionProps}\n        leftSectionProps={leftSectionProps}\n        leftSectionPointerEvents={leftSectionPointerEvents}\n        withAria={false}\n        withErrorStyles={withErrorStyles}\n        attributes={attributes}\n      >\n        <input\n          required={required}\n          data-invalid={!!error || undefined}\n          data-with-left-section={!!leftSection || undefined}\n          {...getStyles('innerInput')}\n          disabled={disabled}\n          id={uuid}\n          {...rest}\n          aria-describedby={describedBy}\n          autoComplete={rest.autoComplete || 'off'}\n          type={_visible ? 'text' : 'password'}\n        />\n      </Input>\n    </Input.Wrapper>\n  );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n  export type Props = PasswordInputProps;\n  export type StylesNames = PasswordInputStylesNames;\n  export type CssVariables = PasswordInputCssVariables;\n  export type Factory = PasswordInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA4DA,MAAM,eAAe;CACnB,sBAAsBA,2BAAAA;CACtB,MAAM;CACP;AAED,MAAM,eAAeC,6BAAAA,oBAA0C,GAAG,EAAE,YAAY,EAC9E,MAAM;CACJ,mBAAmBC,iBAAAA,QAAQ,MAAM,gBAAgB;CACjD,qBAAqBA,iBAAAA,QAAQ,MAAM,kBAAkB;CACtD,EACF,EAAE;AAEH,MAAa,gBAAgBC,gBAAAA,SAA+B,WAAW;CACrE,MAAM,QAAQC,kBAAAA,SAAS,iBAAiB,cAAc,OAAO;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,OACA,aACA,UACA,IACA,SACA,gBACA,aACA,OACA,MACA,YACA,kBACA,YACA,cACA,mBACA,cACA,QACA,cACA,mBACA,2BACA,kBACA,SACA,gBACA,oBACA,sBAAsB,sBACtB,6BACA,mBACA,kBACA,0BACA,iBACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,QAAA,GAAA,eAAA,OAAa,GAAG;CAEtB,MAAM,CAAC,UAAU,kBAAA,GAAA,eAAA,iBAAiC;EAChD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;EACX,CAAC;CAEF,MAAM,yBAAyB,cAAc,CAAC,SAAS;CAEvD,MAAM,YAAYC,mBAAAA,UAAgC;EAChD,MAAM;EACN,SAAA,6BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAA2C;EACxF;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,YAAY,SAASC,4BAAAA,kBAAkB,OAAO;CACtD,MAAM,UAAU,YAAY,MAAM,GAAG,KAAK;CAC1C,MAAM,gBAAgB,kBAAkB,MAAM,GAAG,KAAK;CAGtD,MAAM,eAAe,GAFJ,CAAC,CAAC,SAAS,OAAO,UAAU,YAEV,UAAU,GAAG,GADzB,CAAC,CAAC,cAC2C,gBAAgB;CACpF,MAAM,cAAc,aAAa,MAAM,CAAC,SAAS,IAAI,aAAa,MAAM,GAAG,KAAA;CAE3E,MAAM,yBACJ,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EACE,GAAI,UAAU,mBAAmB;EACvB;EACF;EACR,gBAAc;EACd,UAAU;EACV,cAAW;EACX,GAAI;EACJ,SAAS,6BAA6B,WAAW;EACjD,OAAM;EACI;EACV,aAAa,UAAU;AACrB,SAAM,gBAAgB;AACtB,gCAA6B,aAAa,MAAM;AAChD,qBAAkB;;EAEpB,cAAc,UAAU;AACtB,SAAM,gBAAgB;AACtB,gCAA6B,cAAc,MAAM;AACjD,qBAAkB;;EAEpB,YAAY,UAAU;AACpB,gCAA6B,YAAY,MAAM;AAC/C,OAAI,MAAM,QAAQ,KAAK;AACrB,UAAM,gBAAgB;AACtB,sBAAkB;;;YAItB,iBAAA,GAAA,kBAAA,KAAC,sBAAD,EAAsB,QAAQ,UAAY,CAAA;EAC/B,CAAA;AAGf,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,MAAM,SAAP;EACY;EACV,IAAI;EACG;EACA;EACM;EACP;EACN,YAAY;EACZ,QAAQ;EACR,kBAAiB;EACjB,kBAAkB;EACR;EACI;EACK;EACH;EACP;EACT,YAAY;GAAE,GAAG;GAAY,SAAS;GAAM;EAC5C,kBAAkB;GAAE,GAAG;GAAkB,IAAI;GAAe;EAC5D,YAAY;GAAE,GAAG;GAAY,IAAI;GAAS;EACrC;EACO;EACZ,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACA,cAAAA,OAAD;GACE,WAAU;GACH;GACM;GACP;GACN,YAAY;IAAE,GAAG;IAAoB,QAAA,GAAA,KAAA,SAAUC,6BAAAA,QAAQ,OAAO,mBAAmB,MAAM;IAAE;GACzF,QAAQ;GACA;GACE;GACV,kBAAiB;GACjB,kBAAkB;GACC;GACnB,cAAc,gBAAgB;GACrB;GACC;GACQ;GAClB,2BAA2B,6BAA6B;GACrC;GACD;GACQ;GAC1B,UAAU;GACO;GACL;aAEZ,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACY;IACV,gBAAc,CAAC,CAAC,SAAS,KAAA;IACzB,0BAAwB,CAAC,CAAC,eAAe,KAAA;IACzC,GAAI,UAAU,aAAa;IACjB;IACV,IAAI;IACJ,GAAI;IACJ,oBAAkB;IAClB,cAAc,KAAK,gBAAgB;IACnC,MAAM,WAAW,SAAS;IAC1B,CAAA;GACI,CAAA;EACM,CAAA;EAElB;AAEF,cAAc,UAAU;CAAE,GAAGC,kBAAAA,UAAU;CAAS,GAAGD,6BAAAA;CAAS;AAC5D,cAAc,eAAe;AAC7B,cAAc,cAAc"}
+{"version":3,"file":"PasswordInput.cjs","names":["PasswordToggleIcon","createVarsResolver","getSize","factory","useProps","useStyles","useResolvedStylesApi","extractStyleProps","ActionIcon","Input","classes","InputBase"],"sources":["../../../src/components/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { PasswordToggleIcon } from './PasswordToggleIcon';\nimport classes from './PasswordInput.module.css';\n\nexport type PasswordInputStylesNames =\n  | 'root'\n  | 'visibilityToggle'\n  | 'innerInput'\n  | __InputStylesNames;\nexport type PasswordInputCssVariables = {\n  root: '--psi-icon-size' | '--psi-button-size';\n};\n\nexport interface PasswordInputProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    StylesApiProps<PasswordInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** A component to replace the visibility toggle icon */\n  visibilityToggleIcon?: React.FC<{ reveal: boolean }>;\n\n  /** Props passed down to the visibility toggle button */\n  visibilityToggleButtonProps?: Record<string, any>;\n\n  /** If set, the input value is visible */\n  visible?: boolean;\n\n  /** If set, the input value is visible by default */\n  defaultVisible?: boolean;\n\n  /** Called when visibility changes */\n  onVisibilityChange?: (visible: boolean) => void;\n}\n\nexport type PasswordInputFactory = Factory<{\n  props: PasswordInputProps;\n  ref: HTMLInputElement;\n  stylesNames: PasswordInputStylesNames;\n  vars: PasswordInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  visibilityToggleIcon: PasswordToggleIcon,\n  size: 'sm',\n} satisfies Partial<PasswordInputProps>;\n\nconst varsResolver = createVarsResolver<PasswordInputFactory>((_, { size }) => ({\n  root: {\n    '--psi-icon-size': getSize(size, 'psi-icon-size'),\n    '--psi-button-size': getSize(size, 'psi-button-size'),\n  },\n}));\n\nexport const PasswordInput = factory<PasswordInputFactory>((_props) => {\n  const props = useProps('PasswordInput', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    required,\n    error,\n    leftSection,\n    disabled,\n    id,\n    variant,\n    inputContainer,\n    description,\n    label,\n    size,\n    errorProps,\n    descriptionProps,\n    labelProps,\n    withAsterisk,\n    inputWrapperOrder,\n    wrapperProps,\n    radius,\n    rightSection,\n    rightSectionWidth,\n    rightSectionPointerEvents,\n    leftSectionWidth,\n    visible,\n    defaultVisible,\n    onVisibilityChange,\n    visibilityToggleIcon: VisibilityToggleIcon,\n    visibilityToggleButtonProps,\n    rightSectionProps,\n    leftSectionProps,\n    leftSectionPointerEvents,\n    withErrorStyles,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const uuid = useId(id);\n\n  const [_visible, setVisibility] = useUncontrolled({\n    value: visible,\n    defaultValue: defaultVisible,\n    finalValue: false,\n    onChange: onVisibilityChange,\n  });\n\n  const toggleVisibility = () => setVisibility(!_visible);\n\n  const getStyles = useStyles<PasswordInputFactory>({\n    name: 'PasswordInput',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PasswordInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const errorId = errorProps?.id || `${uuid}-error`;\n  const descriptionId = descriptionProps?.id || `${uuid}-description`;\n  const hasError = !!error && typeof error !== 'boolean';\n  const hasDescription = !!description;\n  const _describedBy = `${hasError ? errorId : ''} ${hasDescription ? descriptionId : ''}`;\n  const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : undefined;\n\n  const visibilityToggleButton = (\n    <ActionIcon<'button'>\n      {...getStyles('visibilityToggle')}\n      disabled={disabled}\n      radius={radius}\n      aria-pressed={_visible}\n      tabIndex={-1}\n      aria-label=\"Toggle password visibility\"\n      {...visibilityToggleButtonProps}\n      variant={visibilityToggleButtonProps?.variant ?? 'subtle'}\n      color=\"gray\"\n      unstyled={unstyled}\n      onTouchEnd={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onTouchEnd?.(event);\n        toggleVisibility();\n      }}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        visibilityToggleButtonProps?.onMouseDown?.(event);\n        toggleVisibility();\n      }}\n      onKeyDown={(event) => {\n        visibilityToggleButtonProps?.onKeyDown?.(event);\n        if (event.key === ' ') {\n          event.preventDefault();\n          toggleVisibility();\n        }\n      }}\n    >\n      <VisibilityToggleIcon reveal={_visible} />\n    </ActionIcon>\n  );\n\n  return (\n    <Input.Wrapper\n      required={required}\n      id={uuid}\n      label={label}\n      error={error}\n      description={description}\n      size={size}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"PasswordInput\"\n      __stylesApiProps={props}\n      unstyled={unstyled}\n      withAsterisk={withAsterisk}\n      inputWrapperOrder={inputWrapperOrder}\n      inputContainer={inputContainer}\n      variant={variant}\n      labelProps={{ ...labelProps, htmlFor: uuid }}\n      descriptionProps={{ ...descriptionProps, id: descriptionId }}\n      errorProps={{ ...errorProps, id: errorId }}\n      mod={mod}\n      attributes={attributes}\n      {...getStyles('root')}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Input\n        component=\"div\"\n        error={error}\n        leftSection={leftSection}\n        size={size}\n        classNames={{ ...resolvedClassNames, input: cx(classes.input, resolvedClassNames?.input) }}\n        styles={resolvedStyles}\n        radius={radius}\n        disabled={disabled}\n        __staticSelector=\"PasswordInput\"\n        __stylesApiProps={props}\n        rightSectionWidth={rightSectionWidth}\n        rightSection={rightSection ?? visibilityToggleButton}\n        variant={variant}\n        unstyled={unstyled}\n        leftSectionWidth={leftSectionWidth}\n        rightSectionPointerEvents={rightSectionPointerEvents || 'all'}\n        rightSectionProps={rightSectionProps}\n        leftSectionProps={leftSectionProps}\n        leftSectionPointerEvents={leftSectionPointerEvents}\n        withAria={false}\n        withErrorStyles={withErrorStyles}\n        attributes={attributes}\n      >\n        <input\n          required={required}\n          data-invalid={!!error || undefined}\n          data-with-left-section={!!leftSection || undefined}\n          {...getStyles('innerInput')}\n          disabled={disabled}\n          id={uuid}\n          {...rest}\n          aria-describedby={describedBy}\n          autoComplete={rest.autoComplete || 'off'}\n          type={_visible ? 'text' : 'password'}\n        />\n      </Input>\n    </Input.Wrapper>\n  );\n});\n\nPasswordInput.classes = { ...InputBase.classes, ...classes };\nPasswordInput.varsResolver = varsResolver;\nPasswordInput.displayName = '@mantine/core/PasswordInput';\n\nexport namespace PasswordInput {\n  export type Props = PasswordInputProps;\n  export type StylesNames = PasswordInputStylesNames;\n  export type CssVariables = PasswordInputCssVariables;\n  export type Factory = PasswordInputFactory;\n}\n"],"mappings":"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"}

package/cjs/components/Popover/Popover.context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/Popover/Popover.context.ts"],"sourcesContent":["import {\n  ClassNames,\n  createSafeContext,\n  GetStylesApi,\n  MantineRadius,\n  MantineShadow,\n  Styles,\n} from '../../core';\nimport { ArrowPosition, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { BasePortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport type { PopoverFactory } from './Popover';\nimport { PopoverWidth } from './Popover.types';\n\nexport interface PopoverContextValue {\n  x: number;\n  y: number;\n  arrowX: number | undefined;\n  arrowY: number | undefined;\n  arrowRef: React.RefObject<HTMLDivElement | null>;\n  opened: boolean;\n  transitionProps?: TransitionOverride;\n  reference: (node: HTMLElement) => void;\n  floating: (node: HTMLElement) => void;\n  width?: PopoverWidth;\n  withArrow: boolean | undefined;\n  arrowSize: number;\n  arrowOffset: number;\n  arrowRadius: number;\n  arrowPosition: ArrowPosition;\n  trapFocus: boolean | undefined;\n  placement: FloatingPosition;\n  withinPortal: boolean | undefined;\n  portalProps?: BasePortalProps;\n  closeOnEscape: boolean | undefined;\n  zIndex: string | number | undefined;\n  radius?: MantineRadius | undefined;\n  shadow?: MantineShadow | undefined;\n  onClose?: () => void;\n  onDismiss?: () => void;\n  getDropdownId: () => string;\n  getTargetId: () => string;\n  controlled: boolean;\n  onToggle: () => void;\n  withRoles: boolean | undefined;\n  targetProps: Record<string, any>;\n  disabled: boolean | undefined;\n  returnFocus: boolean | undefined;\n  classNames: ClassNames<PopoverFactory> | undefined;\n  styles: Styles<PopoverFactory> | undefined;\n  unstyled: boolean | undefined;\n  __staticSelector: string;\n  variant: string | undefined;\n  keepMounted: boolean | undefined;\n  getStyles: GetStylesApi<PopoverFactory>;\n  resolvedStyles: Record<string, any>;\n  floatingStrategy: FloatingStrategy | undefined;\n  referenceHidden: boolean | undefined;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContextValue>(\n  'Popover component was not found in the tree'\n);\n"],"mappings":";;AA4DA,MAAa,CAAC,wBAAwB,6FAAqBA,kBACzD,8CACD"}
+{"version":3,"file":"Popover.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/Popover/Popover.context.ts"],"sourcesContent":["import {\n  ClassNames,\n  createSafeContext,\n  GetStylesApi,\n  MantineRadius,\n  MantineShadow,\n  Styles,\n} from '../../core';\nimport { ArrowPosition, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { BasePortalProps } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport type { PopoverFactory } from './Popover';\nimport { PopoverWidth } from './Popover.types';\n\nexport interface PopoverContextValue {\n  x: number;\n  y: number;\n  arrowX: number | undefined;\n  arrowY: number | undefined;\n  arrowRef: React.RefObject<HTMLDivElement | null>;\n  opened: boolean;\n  transitionProps?: TransitionOverride;\n  reference: (node: HTMLElement) => void;\n  floating: (node: HTMLElement) => void;\n  width?: PopoverWidth;\n  withArrow: boolean | undefined;\n  arrowSize: number;\n  arrowOffset: number;\n  arrowRadius: number;\n  arrowPosition: ArrowPosition;\n  trapFocus: boolean | undefined;\n  placement: FloatingPosition;\n  withinPortal: boolean | undefined;\n  portalProps?: BasePortalProps;\n  closeOnEscape: boolean | undefined;\n  zIndex: string | number | undefined;\n  radius?: MantineRadius | undefined;\n  shadow?: MantineShadow | undefined;\n  onClose?: () => void;\n  onDismiss?: () => void;\n  getDropdownId: () => string;\n  getTargetId: () => string;\n  controlled: boolean;\n  onToggle: () => void;\n  withRoles: boolean | undefined;\n  targetProps: Record<string, any>;\n  disabled: boolean | undefined;\n  returnFocus: boolean | undefined;\n  classNames: ClassNames<PopoverFactory> | undefined;\n  styles: Styles<PopoverFactory> | undefined;\n  unstyled: boolean | undefined;\n  __staticSelector: string;\n  variant: string | undefined;\n  keepMounted: boolean | undefined;\n  getStyles: GetStylesApi<PopoverFactory>;\n  resolvedStyles: Record<string, any> | undefined;\n  floatingStrategy: FloatingStrategy | undefined;\n  referenceHidden: boolean | undefined;\n}\n\nexport const [PopoverContextProvider, usePopoverContext] = createSafeContext<PopoverContextValue>(\n  'Popover component was not found in the tree'\n);\n"],"mappings":";;AA4DA,MAAa,CAAC,wBAAwB,6FAAqBA,kBACzD,8CACD"}

package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs

@@ -71,7 +71,7 @@ const PopoverDropdown = require_factory.factory((_props) => {
 								width: ctx.width === "target" ? void 0 : require_rem.rem(ctx.width),
 								...ctx.referenceHidden ? { display: "none" } : null
 							},
-							ctx.resolvedStyles.dropdown,
+							ctx.resolvedStyles?.dropdown,
 							styles?.dropdown,
 							style
 						]

package/cjs/components/Popover/PopoverDropdown/PopoverDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverDropdown.cjs","names":["factory","useProps","usePopoverContext","OptionalPortal","Transition","FocusTrap","Box","closeOnEscape","rem","FloatingArrow","classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  closeOnEscape,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  useProps,\n} from '../../../core';\nimport { FloatingArrow } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n  extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n  props: PopoverDropdownProps;\n  ref: HTMLDivElement;\n  stylesNames: PopoverStylesNames;\n  compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n  const props = useProps('PopoverDropdown', null, _props);\n  const {\n    className,\n    style,\n    vars,\n    children,\n    onKeyDownCapture,\n    variant,\n    classNames,\n    styles,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = usePopoverContext();\n\n  const returnFocus = useFocusReturn({\n    opened: ctx.opened,\n    shouldReturnFocus: ctx.returnFocus,\n  });\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-labelledby': ctx.getTargetId(),\n        id: ctx.getDropdownId(),\n        role: 'dialog',\n        tabIndex: -1,\n      }\n    : {};\n\n  const mergedRef = useMergedRef(ref, ctx.floating);\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n      <Transition\n        mounted={ctx.opened}\n        {...ctx.transitionProps}\n        transition={ctx.transitionProps?.transition || 'fade'}\n        duration={ctx.transitionProps?.duration ?? 150}\n        keepMounted={ctx.keepMounted}\n        exitDuration={\n          typeof ctx.transitionProps?.exitDuration === 'number'\n            ? ctx.transitionProps.exitDuration\n            : ctx.transitionProps?.duration\n        }\n      >\n        {(transitionStyles) => (\n          <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n            <Box\n              {...accessibleProps}\n              {...others}\n              variant={variant}\n              onKeyDownCapture={closeOnEscape(\n                () => {\n                  ctx.onClose?.();\n                  ctx.onDismiss?.();\n                },\n                {\n                  active: ctx.closeOnEscape,\n                  onTrigger: returnFocus,\n                  onKeyDown: onKeyDownCapture,\n                }\n              )}\n              data-position={ctx.placement}\n              data-fixed={ctx.floatingStrategy === 'fixed' || undefined}\n              {...ctx.getStyles('dropdown', {\n                className,\n                props,\n                classNames,\n                styles,\n                style: [\n                  {\n                    ...transitionStyles,\n                    zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n                    top: ctx.y ?? 0,\n                    left: ctx.x ?? 0,\n                    width: ctx.width === 'target' ? undefined : rem(ctx.width),\n                    ...(ctx.referenceHidden ? { display: 'none' } : null),\n                  },\n                  ctx.resolvedStyles.dropdown,\n                  styles?.dropdown,\n                  style,\n                ],\n              })}\n            >\n              {children}\n\n              <FloatingArrow\n                ref={ctx.arrowRef}\n                arrowX={ctx.arrowX}\n                arrowY={ctx.arrowY}\n                visible={ctx.withArrow}\n                position={ctx.placement}\n                arrowSize={ctx.arrowSize}\n                arrowRadius={ctx.arrowRadius}\n                arrowOffset={ctx.arrowOffset}\n                arrowPosition={ctx.arrowPosition}\n                {...ctx.getStyles('arrow', {\n                  props,\n                  classNames,\n                  styles,\n                })}\n              />\n            </Box>\n          </FocusTrap>\n        )}\n      </Transition>\n    </OptionalPortal>\n  );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,MAAa,kBAAkBA,gBAAAA,SAAiC,WAAW;CACzE,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,MAAM,OAAO;CACvD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAMC,wBAAAA,mBAAmB;CAE/B,MAAM,eAAA,GAAA,eAAA,gBAA6B;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;EACxB,CAAC;CAEF,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,aAAa;EACpC,IAAI,IAAI,eAAe;EACvB,MAAM;EACN,UAAU;EACX,GACD,EAAE;CAEN,MAAM,aAAA,GAAA,eAAA,cAAyB,KAAK,IAAI,SAAS;AAEjD,KAAI,IAAI,SACN,QAAO;AAGT,QACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,SAAS,IAAI;GACb,GAAI,IAAI;GACR,YAAY,IAAI,iBAAiB,cAAc;GAC/C,UAAU,IAAI,iBAAiB,YAAY;GAC3C,aAAa,IAAI;GACjB,cACE,OAAO,IAAI,iBAAiB,iBAAiB,WACzC,IAAI,gBAAgB,eACpB,IAAI,iBAAiB;cAGzB,qBACA,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkBC,wBAAAA,oBACV;AACJ,UAAI,WAAW;AACf,UAAI,aAAa;QAEnB;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;MACZ,CACF;KACD,iBAAe,IAAI;KACnB,cAAY,IAAI,qBAAqB,WAAW,KAAA;KAChD,GAAI,IAAI,UAAU,YAAY;MAC5B;MACA;MACA;MACA;MACA,OAAO;OACL;QACE,GAAG;QACH,QAAQ,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,MAAM,IAAI,KAAK;QACf,OAAO,IAAI,UAAU,WAAW,KAAA,IAAYC,YAAAA,IAAI,IAAI,MAAM;QAC1D,GAAI,IAAI,kBAAkB,EAAE,SAAS,QAAQ,GAAG;QACjD;OACD,IAAI,eAAe;OACnB,QAAQ;OACR;OACD;MACF,CAAC;eAnCJ,CAqCG,UAED,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;MACE,KAAK,IAAI;MACT,QAAQ,IAAI;MACZ,QAAQ,IAAI;MACZ,SAAS,IAAI;MACb,UAAU,IAAI;MACd,WAAW,IAAI;MACf,aAAa,IAAI;MACjB,aAAa,IAAI;MACjB,eAAe,IAAI;MACnB,GAAI,IAAI,UAAU,SAAS;OACzB;OACA;OACA;OACD,CAAC;MACF,CAAA,CACE;;IACI,CAAA;GAEH,CAAA;EACE,CAAA;EAEnB;AAEF,gBAAgB,UAAUC,uBAAAA;AAC1B,gBAAgB,cAAc"}
+{"version":3,"file":"PopoverDropdown.cjs","names":["factory","useProps","usePopoverContext","OptionalPortal","Transition","FocusTrap","Box","closeOnEscape","rem","FloatingArrow","classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  closeOnEscape,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  useProps,\n} from '../../../core';\nimport { FloatingArrow } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n  extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n  props: PopoverDropdownProps;\n  ref: HTMLDivElement;\n  stylesNames: PopoverStylesNames;\n  compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n  const props = useProps('PopoverDropdown', null, _props);\n  const {\n    className,\n    style,\n    vars,\n    children,\n    onKeyDownCapture,\n    variant,\n    classNames,\n    styles,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = usePopoverContext();\n\n  const returnFocus = useFocusReturn({\n    opened: ctx.opened,\n    shouldReturnFocus: ctx.returnFocus,\n  });\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-labelledby': ctx.getTargetId(),\n        id: ctx.getDropdownId(),\n        role: 'dialog',\n        tabIndex: -1,\n      }\n    : {};\n\n  const mergedRef = useMergedRef(ref, ctx.floating);\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n      <Transition\n        mounted={ctx.opened}\n        {...ctx.transitionProps}\n        transition={ctx.transitionProps?.transition || 'fade'}\n        duration={ctx.transitionProps?.duration ?? 150}\n        keepMounted={ctx.keepMounted}\n        exitDuration={\n          typeof ctx.transitionProps?.exitDuration === 'number'\n            ? ctx.transitionProps.exitDuration\n            : ctx.transitionProps?.duration\n        }\n      >\n        {(transitionStyles) => (\n          <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n            <Box\n              {...accessibleProps}\n              {...others}\n              variant={variant}\n              onKeyDownCapture={closeOnEscape(\n                () => {\n                  ctx.onClose?.();\n                  ctx.onDismiss?.();\n                },\n                {\n                  active: ctx.closeOnEscape,\n                  onTrigger: returnFocus,\n                  onKeyDown: onKeyDownCapture,\n                }\n              )}\n              data-position={ctx.placement}\n              data-fixed={ctx.floatingStrategy === 'fixed' || undefined}\n              {...ctx.getStyles('dropdown', {\n                className,\n                props,\n                classNames,\n                styles,\n                style: [\n                  {\n                    ...transitionStyles,\n                    zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n                    top: ctx.y ?? 0,\n                    left: ctx.x ?? 0,\n                    width: ctx.width === 'target' ? undefined : rem(ctx.width),\n                    ...(ctx.referenceHidden ? { display: 'none' } : null),\n                  },\n                  ctx.resolvedStyles?.dropdown,\n                  styles?.dropdown,\n                  style,\n                ],\n              })}\n            >\n              {children}\n\n              <FloatingArrow\n                ref={ctx.arrowRef}\n                arrowX={ctx.arrowX}\n                arrowY={ctx.arrowY}\n                visible={ctx.withArrow}\n                position={ctx.placement}\n                arrowSize={ctx.arrowSize}\n                arrowRadius={ctx.arrowRadius}\n                arrowOffset={ctx.arrowOffset}\n                arrowPosition={ctx.arrowPosition}\n                {...ctx.getStyles('arrow', {\n                  props,\n                  classNames,\n                  styles,\n                })}\n              />\n            </Box>\n          </FocusTrap>\n        )}\n      </Transition>\n    </OptionalPortal>\n  );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,MAAa,kBAAkBA,gBAAAA,SAAiC,WAAW;CACzE,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,MAAM,OAAO;CACvD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAMC,wBAAAA,mBAAmB;CAE/B,MAAM,eAAA,GAAA,eAAA,gBAA6B;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;EACxB,CAAC;CAEF,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,aAAa;EACpC,IAAI,IAAI,eAAe;EACvB,MAAM;EACN,UAAU;EACX,GACD,EAAE;CAEN,MAAM,aAAA,GAAA,eAAA,cAAyB,KAAK,IAAI,SAAS;AAEjD,KAAI,IAAI,SACN,QAAO;AAGT,QACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,SAAS,IAAI;GACb,GAAI,IAAI;GACR,YAAY,IAAI,iBAAiB,cAAc;GAC/C,UAAU,IAAI,iBAAiB,YAAY;GAC3C,aAAa,IAAI;GACjB,cACE,OAAO,IAAI,iBAAiB,iBAAiB,WACzC,IAAI,gBAAgB,eACpB,IAAI,iBAAiB;cAGzB,qBACA,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkBC,wBAAAA,oBACV;AACJ,UAAI,WAAW;AACf,UAAI,aAAa;QAEnB;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;MACZ,CACF;KACD,iBAAe,IAAI;KACnB,cAAY,IAAI,qBAAqB,WAAW,KAAA;KAChD,GAAI,IAAI,UAAU,YAAY;MAC5B;MACA;MACA;MACA;MACA,OAAO;OACL;QACE,GAAG;QACH,QAAQ,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,MAAM,IAAI,KAAK;QACf,OAAO,IAAI,UAAU,WAAW,KAAA,IAAYC,YAAAA,IAAI,IAAI,MAAM;QAC1D,GAAI,IAAI,kBAAkB,EAAE,SAAS,QAAQ,GAAG;QACjD;OACD,IAAI,gBAAgB;OACpB,QAAQ;OACR;OACD;MACF,CAAC;eAnCJ,CAqCG,UAED,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,eAAD;MACE,KAAK,IAAI;MACT,QAAQ,IAAI;MACZ,QAAQ,IAAI;MACZ,SAAS,IAAI;MACb,UAAU,IAAI;MACd,WAAW,IAAI;MACf,aAAa,IAAI;MACjB,aAAa,IAAI;MACjB,eAAe,IAAI;MACnB,GAAI,IAAI,UAAU,SAAS;OACzB;OACA;OACA;OACD,CAAC;MACF,CAAA,CACE;;IACI,CAAA;GAEH,CAAA;EACE,CAAA;EAEnB;AAEF,gBAAgB,UAAUC,uBAAAA;AAC1B,gBAAgB,cAAc"}

package/cjs/components/Radio/Radio.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.module.cjs","names":[],"sources":["../../../src/components/Radio/Radio.module.css"],"sourcesContent":[".root {\n  --radio-size-xs: 16px;\n  --radio-size-sm: 20px;\n  --radio-size-md: 24px;\n  --radio-size-lg: 30px;\n  --radio-size-xl: 36px;\n  --radio-size: var(--radio-size-sm);\n\n  --radio-icon-size-xs: 6px;\n  --radio-icon-size-sm: 8px;\n  --radio-icon-size-md: 10px;\n  --radio-icon-size-lg: 14px;\n  --radio-icon-size-xl: 16px;\n  --radio-icon-size: var(--radio-icon-size-sm);\n  --radio-icon-color: var(--mantine-color-white);\n}\n\n.inner {\n  position: relative;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  order: 1;\n\n  &:where([data-label-position='left']) {\n    order: 2;\n  }\n}\n\n.icon {\n  color: var(--radio-icon-color);\n  opacity: var(--radio-icon-opacity, 0);\n  transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));\n  transition:\n    opacity 100ms ease,\n    transform 200ms ease;\n  pointer-events: none;\n  width: var(--radio-icon-size);\n  height: var(--radio-icon-size);\n  position: absolute;\n  top: calc(50% - var(--radio-icon-size) / 2);\n  left: calc(50% - var(--radio-icon-size) / 2);\n}\n\n.radio {\n  border: 1px solid;\n  position: relative;\n  appearance: none;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  border-radius: var(--radio-radius, var(--radio-size));\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: background-color, border-color;\n  transition-timing-function: ease;\n  transition-duration: 100ms;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:checked {\n    background-color: var(--radio-color, var(--mantine-primary-color-filled));\n    border-color: var(--radio-color, var(--mantine-primary-color-filled));\n\n    & + .icon {\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: scale(1);\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    border-color: var(--mantine-color-disabled-border);\n\n    & + .icon {\n      --radio-icon-color: var(--mantine-color-disabled-color);\n    }\n  }\n\n  &:where([data-with-error-styles][data-error]) {\n    border-color: var(--mantine-color-error);\n  }\n}\n\n.radio--outline {\n  & + .icon {\n    --radio-icon-color: var(--radio-color);\n  }\n\n  &:checked:not(:disabled) {\n    background-color: transparent;\n    border-color: var(--radio-color);\n\n    & + .icon {\n      --radio-icon-color: var(--radio-color);\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Radio.module.cjs","names":[],"sources":["../../../src/components/Radio/Radio.module.css"],"sourcesContent":[".root {\n  --radio-size-xs: 16px;\n  --radio-size-sm: 20px;\n  --radio-size-md: 24px;\n  --radio-size-lg: 30px;\n  --radio-size-xl: 36px;\n  --radio-size: var(--radio-size-sm);\n\n  --radio-icon-size-xs: 6px;\n  --radio-icon-size-sm: 8px;\n  --radio-icon-size-md: 10px;\n  --radio-icon-size-lg: 14px;\n  --radio-icon-size-xl: 16px;\n  --radio-icon-size: var(--radio-icon-size-sm);\n  --radio-icon-color: var(--mantine-color-white);\n}\n\n.inner {\n  position: relative;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  order: 1;\n\n  &:where([data-label-position='left']) {\n    order: 2;\n  }\n}\n\n.icon {\n  color: var(--radio-icon-color);\n  opacity: var(--radio-icon-opacity, 0);\n  translate: -50% -50%;\n  transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));\n  transition:\n    opacity 100ms ease,\n    transform 200ms ease;\n  pointer-events: none;\n  width: var(--radio-icon-size);\n  height: var(--radio-icon-size);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.radio {\n  border: 1px solid;\n  position: relative;\n  appearance: none;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  border-radius: var(--radio-radius, var(--radio-size));\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: background-color, border-color;\n  transition-timing-function: ease;\n  transition-duration: 100ms;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:checked {\n    background-color: var(--radio-color, var(--mantine-primary-color-filled));\n    border-color: var(--radio-color, var(--mantine-primary-color-filled));\n\n    & + .icon {\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: scale(1);\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    border-color: var(--mantine-color-disabled-border);\n\n    & + .icon {\n      --radio-icon-color: var(--mantine-color-disabled-color);\n    }\n  }\n\n  &:where([data-with-error-styles][data-error]) {\n    border-color: var(--mantine-color-error);\n  }\n}\n\n.radio--outline {\n  & + .icon {\n    --radio-icon-color: var(--radio-color);\n  }\n\n  &:checked:not(:disabled) {\n    background-color: transparent;\n    border-color: var(--radio-color);\n\n    & + .icon {\n      --radio-icon-color: var(--radio-color);\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: none;\n    }\n  }\n}\n"],"mappings":""}

package/cjs/components/Rating/Rating.cjs

@@ -116,9 +116,8 @@ const Rating = require_factory.factory((_props) => {
 	const items = Array(_count).fill(0).map((_, index) => {
 		const integerValue = index + 1;
 		const fractionItems = Array.from(new Array(index === 0 ? _fractions + 1 : _fractions));
-		const isGroupActive = !readOnly && Math.ceil(hovered) === integerValue;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			"data-active": isGroupActive || void 0,
+			"data-active": !readOnly && Math.ceil(hovered) === integerValue || void 0,
 			...getStyles("symbolGroup"),
 			children: fractionItems.map((__, fractionIndex) => {
 				const fractionValue = decimalUnit * (index === 0 ? fractionIndex : fractionIndex + 1);

package/cjs/components/Rating/Rating.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.cjs","names":["createVarsResolver","getSize","getThemeColor","factory","useProps","useStyles","useDirection","RatingItem","RatingProvider","Box","classes"],"sources":["../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clamp, useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineSize,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { RatingProvider } from './Rating.context';\nimport { RatingItem } from './RatingItem/RatingItem';\nimport classes from './Rating.module.css';\n\nfunction roundValueTo(value: number, to: number) {\n  const rounded = Math.round(value / to) * to;\n  const precision = `${to}`.split('.')[1]?.length || 0;\n  return Number(rounded.toFixed(precision));\n}\n\nexport type RatingStylesNames =\n  | 'root'\n  | 'starSymbol'\n  | 'input'\n  | 'label'\n  | 'symbolBody'\n  | 'symbolGroup';\n\nexport type RatingCssVariables = {\n  root: '--rating-size' | '--rating-color';\n};\n\nexport interface RatingProps\n  extends BoxProps, StylesApiProps<RatingFactory>, ElementProps<'div', 'onChange'> {\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Icon displayed for unselected rating items. Can be a function that receives the rating value. */\n  emptySymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Icon displayed for selected rating items. Can be a function that receives the rating value. */\n  fullSymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Number of fractions each item can be divided into, default is 1 */\n  fractions?: number;\n\n  /** Controls component size @default 'sm' */\n  size?: MantineSize | number | (string & {});\n\n  /** Number of rating items (stars), default is 5 */\n  count?: number;\n\n  /** Called when rating item is hovered. Receives -1 when hover ends. */\n  onHover?: (value: number) => void;\n\n  /** Function to generate aria-label for each rating value. Receives the rating value as argument, default is (value) => String(value) */\n  getSymbolLabel?: (index: number) => string;\n\n  /** Name attribute for form submission. If not provided, a unique id will be generated. */\n  name?: string;\n\n  /** When true, rating cannot be changed by user interaction, default is false */\n  readOnly?: boolean;\n\n  /** When true, clicking the same rating value clears the rating to 0, default is false */\n  allowClear?: boolean;\n\n  /** When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false */\n  highlightSelectedOnly?: boolean;\n\n  /** Key of theme.colors or any CSS color value, default is 'yellow' */\n  color?: MantineColor;\n}\n\nexport type RatingFactory = Factory<{\n  props: RatingProps;\n  ref: HTMLDivElement;\n  stylesNames: RatingStylesNames;\n  vars: RatingCssVariables;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  getSymbolLabel: (value) => `${value}`,\n  count: 5,\n  fractions: 1,\n  color: 'yellow',\n} satisfies Partial<RatingProps>;\n\nconst varsResolver = createVarsResolver<RatingFactory>((theme, { size, color }) => ({\n  root: {\n    '--rating-size': getSize(size, 'rating-size'),\n    '--rating-color': getThemeColor(color, theme),\n  },\n}));\n\nexport const Rating = factory<RatingFactory>((_props) => {\n  const props = useProps('Rating', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    name,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    fractions,\n    count,\n    onMouseEnter,\n    readOnly,\n    allowClear,\n    onMouseMove,\n    onHover,\n    onMouseLeave,\n    onTouchStart,\n    onTouchEnd,\n    size,\n    variant,\n    getSymbolLabel,\n    color,\n    emptySymbol,\n    fullSymbol,\n    highlightSelectedOnly,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RatingFactory>({\n    name: 'Rating',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { dir } = useDirection();\n\n  const _name = useId(name);\n  const _id = useId(id);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: 0,\n    onChange,\n  });\n\n  const [hovered, setHovered] = useState(-1);\n  const [isOutside, setOutside] = useState(true);\n\n  const _fractions = Math.floor(fractions);\n  const _count = Math.floor(count);\n\n  const decimalUnit = 1 / _fractions;\n  const stableValueRounded = roundValueTo(_value, decimalUnit);\n  const finalValue = hovered !== -1 ? hovered : stableValueRounded;\n\n  const getRatingFromCoordinates = (x: number) => {\n    if (!rootRef.current) {\n      return 0;\n    }\n\n    const { left, right, width } = rootRef.current.getBoundingClientRect();\n    const symbolWidth = width / _count;\n\n    const hoverPosition = dir === 'rtl' ? right - x : x - left;\n    const hoverValue = hoverPosition / symbolWidth;\n\n    return clamp(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);\n  };\n\n  const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(event);\n    !readOnly && setOutside(false);\n  };\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseMove?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    const rounded = getRatingFromCoordinates(event.clientX);\n\n    setHovered(rounded);\n    rounded !== hovered && onHover?.(rounded);\n  };\n\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseLeave?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    setHovered(-1);\n    setOutside(true);\n    hovered !== -1 && onHover?.(-1);\n  };\n\n  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n    const { touches } = event;\n    if (touches.length !== 1) {\n      return;\n    }\n\n    if (!readOnly) {\n      const touch = touches[0];\n      setValue(getRatingFromCoordinates(touch.clientX));\n    }\n\n    onTouchStart?.(event);\n  };\n\n  const handleTouchEnd = (event: React.TouchEvent<HTMLDivElement>) => {\n    event.preventDefault();\n\n    onTouchEnd?.(event);\n  };\n\n  const handleItemBlur = () => isOutside && setHovered(-1);\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n    if (!readOnly) {\n      if (typeof event === 'number') {\n        setHovered(event);\n      } else {\n        setHovered(parseFloat(event.target.value));\n      }\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n    if (!readOnly) {\n      const newValue = typeof event === 'number' ? event : parseFloat(event.target.value);\n\n      // If allowClear is true and clicking the same value, reset to 0\n      if (allowClear && newValue === stableValueRounded) {\n        setValue(0);\n      } else {\n        setValue(newValue);\n      }\n    }\n  };\n\n  const items = Array(_count)\n    .fill(0)\n    .map((_, index) => {\n      const integerValue = index + 1;\n      const fractionItems = Array.from(new Array(index === 0 ? _fractions + 1 : _fractions));\n      const isGroupActive = !readOnly && Math.ceil(hovered) === integerValue;\n\n      return (\n        <div\n          key={integerValue}\n          data-active={isGroupActive || undefined}\n          {...getStyles('symbolGroup')}\n        >\n          {fractionItems.map((__, fractionIndex) => {\n            const fractionValue = decimalUnit * (index === 0 ? fractionIndex : fractionIndex + 1);\n            const symbolValue = roundValueTo(integerValue - 1 + fractionValue, decimalUnit);\n\n            return (\n              <RatingItem\n                key={`${integerValue}-${symbolValue}`}\n                getSymbolLabel={getSymbolLabel}\n                emptyIcon={emptySymbol}\n                fullIcon={fullSymbol}\n                full={\n                  highlightSelectedOnly ? symbolValue === finalValue : symbolValue <= finalValue\n                }\n                active={symbolValue === finalValue}\n                checked={symbolValue === stableValueRounded}\n                readOnly={readOnly}\n                fractionValue={fractionValue}\n                value={symbolValue}\n                name={_name}\n                onChange={handleChange}\n                onBlur={handleItemBlur}\n                onInputChange={handleInputChange}\n                id={`${_id}-${index}-${fractionIndex}`}\n              />\n            );\n          })}\n        </div>\n      );\n    });\n\n  return (\n    <RatingProvider value={{ getStyles }}>\n      <Box\n        ref={useMergedRef(rootRef, ref)}\n        {...getStyles('root')}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onTouchStart={handleTouchStart}\n        onTouchEnd={handleTouchEnd}\n        variant={variant}\n        size={size}\n        id={_id}\n        {...others}\n      >\n        {items}\n      </Box>\n    </RatingProvider>\n  );\n});\n\nRating.classes = classes;\nRating.varsResolver = varsResolver;\nRating.displayName = '@mantine/core/Rating';\n\nexport namespace Rating {\n  export type Props = RatingProps;\n  export type StylesNames = RatingStylesNames;\n  export type Factory = RatingFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Rating.cjs","names":["createVarsResolver","getSize","getThemeColor","factory","useProps","useStyles","useDirection","RatingItem","RatingProvider","Box","classes"],"sources":["../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { clamp, useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineSize,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { RatingProvider } from './Rating.context';\nimport { RatingItem } from './RatingItem/RatingItem';\nimport classes from './Rating.module.css';\n\nfunction roundValueTo(value: number, to: number) {\n  const rounded = Math.round(value / to) * to;\n  const precision = `${to}`.split('.')[1]?.length || 0;\n  return Number(rounded.toFixed(precision));\n}\n\nexport type RatingStylesNames =\n  | 'root'\n  | 'starSymbol'\n  | 'input'\n  | 'label'\n  | 'symbolBody'\n  | 'symbolGroup';\n\nexport type RatingCssVariables = {\n  root: '--rating-size' | '--rating-color';\n};\n\nexport interface RatingProps\n  extends BoxProps, StylesApiProps<RatingFactory>, ElementProps<'div', 'onChange'> {\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Icon displayed for unselected rating items. Can be a function that receives the rating value. */\n  emptySymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Icon displayed for selected rating items. Can be a function that receives the rating value. */\n  fullSymbol?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Number of fractions each item can be divided into, default is 1 */\n  fractions?: number;\n\n  /** Controls component size @default 'sm' */\n  size?: MantineSize | number | (string & {});\n\n  /** Number of rating items (stars), default is 5 */\n  count?: number;\n\n  /** Called when rating item is hovered. Receives -1 when hover ends. */\n  onHover?: (value: number) => void;\n\n  /** Function to generate aria-label for each rating value. Receives the rating value as argument, default is (value) => String(value) */\n  getSymbolLabel?: (index: number) => string;\n\n  /** Name attribute for form submission. If not provided, a unique id will be generated. */\n  name?: string;\n\n  /** When true, rating cannot be changed by user interaction, default is false */\n  readOnly?: boolean;\n\n  /** When true, clicking the same rating value clears the rating to 0, default is false */\n  allowClear?: boolean;\n\n  /** When true, only the clicked rating item is highlighted, not all items up to the selected value, default is false */\n  highlightSelectedOnly?: boolean;\n\n  /** Key of theme.colors or any CSS color value, default is 'yellow' */\n  color?: MantineColor;\n}\n\nexport type RatingFactory = Factory<{\n  props: RatingProps;\n  ref: HTMLDivElement;\n  stylesNames: RatingStylesNames;\n  vars: RatingCssVariables;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  getSymbolLabel: (value) => `${value}`,\n  count: 5,\n  fractions: 1,\n  color: 'yellow',\n} satisfies Partial<RatingProps>;\n\nconst varsResolver = createVarsResolver<RatingFactory>((theme, { size, color }) => ({\n  root: {\n    '--rating-size': getSize(size, 'rating-size'),\n    '--rating-color': getThemeColor(color, theme),\n  },\n}));\n\nexport const Rating = factory<RatingFactory>((_props) => {\n  const props = useProps('Rating', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    name,\n    id,\n    value,\n    defaultValue,\n    onChange,\n    fractions,\n    count,\n    onMouseEnter,\n    readOnly,\n    allowClear,\n    onMouseMove,\n    onHover,\n    onMouseLeave,\n    onTouchStart,\n    onTouchEnd,\n    size,\n    variant,\n    getSymbolLabel,\n    color,\n    emptySymbol,\n    fullSymbol,\n    highlightSelectedOnly,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RatingFactory>({\n    name: 'Rating',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { dir } = useDirection();\n\n  const _name = useId(name);\n  const _id = useId(id);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: 0,\n    onChange,\n  });\n\n  const [hovered, setHovered] = useState(-1);\n  const [isOutside, setOutside] = useState(true);\n\n  const _fractions = Math.floor(fractions);\n  const _count = Math.floor(count);\n\n  const decimalUnit = 1 / _fractions;\n  const stableValueRounded = roundValueTo(_value, decimalUnit);\n  const finalValue = hovered !== -1 ? hovered : stableValueRounded;\n\n  const getRatingFromCoordinates = (x: number) => {\n    if (!rootRef.current) {\n      return 0;\n    }\n\n    const { left, right, width } = rootRef.current.getBoundingClientRect();\n    const symbolWidth = width / _count;\n\n    const hoverPosition = dir === 'rtl' ? right - x : x - left;\n    const hoverValue = hoverPosition / symbolWidth;\n\n    return clamp(roundValueTo(hoverValue + decimalUnit / 2, decimalUnit), decimalUnit, _count);\n  };\n\n  const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(event);\n    !readOnly && setOutside(false);\n  };\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseMove?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    const rounded = getRatingFromCoordinates(event.clientX);\n\n    setHovered(rounded);\n    rounded !== hovered && onHover?.(rounded);\n  };\n\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\n    onMouseLeave?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    setHovered(-1);\n    setOutside(true);\n    hovered !== -1 && onHover?.(-1);\n  };\n\n  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n    const { touches } = event;\n    if (touches.length !== 1) {\n      return;\n    }\n\n    if (!readOnly) {\n      const touch = touches[0];\n      setValue(getRatingFromCoordinates(touch.clientX));\n    }\n\n    onTouchStart?.(event);\n  };\n\n  const handleTouchEnd = (event: React.TouchEvent<HTMLDivElement>) => {\n    event.preventDefault();\n\n    onTouchEnd?.(event);\n  };\n\n  const handleItemBlur = () => isOutside && setHovered(-1);\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n    if (!readOnly) {\n      if (typeof event === 'number') {\n        setHovered(event);\n      } else {\n        setHovered(parseFloat(event.target.value));\n      }\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement> | number) => {\n    if (!readOnly) {\n      const newValue = typeof event === 'number' ? event : parseFloat(event.target.value);\n\n      // If allowClear is true and clicking the same value, reset to 0\n      if (allowClear && newValue === stableValueRounded) {\n        setValue(0);\n      } else {\n        setValue(newValue);\n      }\n    }\n  };\n\n  const items = Array(_count)\n    .fill(0)\n    .map((_, index) => {\n      const integerValue = index + 1;\n      const fractionItems = Array.from(new Array(index === 0 ? _fractions + 1 : _fractions));\n      const isGroupActive = !readOnly && Math.ceil(hovered) === integerValue;\n\n      return (\n        <div\n          key={integerValue}\n          data-active={isGroupActive || undefined}\n          {...getStyles('symbolGroup')}\n        >\n          {fractionItems.map((__, fractionIndex) => {\n            const fractionValue = decimalUnit * (index === 0 ? fractionIndex : fractionIndex + 1);\n            const symbolValue = roundValueTo(integerValue - 1 + fractionValue, decimalUnit);\n\n            return (\n              <RatingItem\n                key={`${integerValue}-${symbolValue}`}\n                getSymbolLabel={getSymbolLabel}\n                emptyIcon={emptySymbol}\n                fullIcon={fullSymbol}\n                full={\n                  highlightSelectedOnly ? symbolValue === finalValue : symbolValue <= finalValue\n                }\n                active={symbolValue === finalValue}\n                checked={symbolValue === stableValueRounded}\n                readOnly={readOnly}\n                fractionValue={fractionValue}\n                value={symbolValue}\n                name={_name}\n                onChange={handleChange}\n                onBlur={handleItemBlur}\n                onInputChange={handleInputChange}\n                id={`${_id}-${index}-${fractionIndex}`}\n              />\n            );\n          })}\n        </div>\n      );\n    });\n\n  return (\n    <RatingProvider value={{ getStyles }}>\n      <Box\n        ref={useMergedRef(rootRef, ref)}\n        {...getStyles('root')}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        onTouchStart={handleTouchStart}\n        onTouchEnd={handleTouchEnd}\n        variant={variant}\n        size={size}\n        id={_id}\n        {...others}\n      >\n        {items}\n      </Box>\n    </RatingProvider>\n  );\n});\n\nRating.classes = classes;\nRating.varsResolver = varsResolver;\nRating.displayName = '@mantine/core/Rating';\n\nexport namespace Rating {\n  export type Props = RatingProps;\n  export type StylesNames = RatingStylesNames;\n  export type Factory = RatingFactory;\n}\n"],"mappings":"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"}

package/cjs/components/ScrollArea/ScrollArea.cjs

@@ -58,20 +58,27 @@ const ScrollArea = require_factory.factory((_props) => {
 		varsResolver
 	});
 	const localViewportRef = (0, react.useRef)(null);
-	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([viewportRef, localViewportRef]);
-	(0, _mantine_hooks.useIsomorphicEffect)(() => {
-		if (startScrollPosition && localViewportRef.current) localViewportRef.current.scrollTo({
-			left: startScrollPosition.x ?? 0,
-			top: startScrollPosition.y ?? 0
-		});
-	}, []);
-	require_use_resize_observer.useResizeObserver(offsetScrollbars === "present" ? localViewportRef.current : null, () => {
+	const [viewportElement, setViewportElement] = (0, react.useState)(null);
+	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([
+		viewportRef,
+		localViewportRef,
+		(0, react.useCallback)((node) => {
+			setViewportElement((current) => current === node ? current : node);
+		}, [])
+	]);
+	require_use_resize_observer.useResizeObserver(offsetScrollbars === "present" ? viewportElement : null, () => {
 		const element = localViewportRef.current;
 		if (element) {
 			setVerticalThumbVisible(element.scrollHeight > element.clientHeight);
 			setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);
 		}
 	});
+	(0, _mantine_hooks.useIsomorphicEffect)(() => {
+		if (startScrollPosition && localViewportRef.current) localViewportRef.current.scrollTo({
+			left: startScrollPosition.x ?? 0,
+			top: startScrollPosition.y ?? 0
+		});
+	}, []);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ScrollAreaRoot.ScrollAreaRoot, {
 		getStyles,
 		type: type === "never" ? "always" : type,
@@ -140,7 +147,14 @@ ScrollArea.displayName = "@mantine/core/ScrollArea";
 const ScrollAreaAutosize = require_factory.factory((props) => {
 	const { children, classNames, styles, scrollbarSize, scrollHideDelay, type, dir, offsetScrollbars, overscrollBehavior, viewportRef, onScrollPositionChange, unstyled, variant, viewportProps, scrollbars, style, vars, onBottomReached, onTopReached, startScrollPosition, onOverflowChange, ...others } = require_use_props.useProps("ScrollAreaAutosize", defaultProps, props);
 	const viewportObserverRef = (0, react.useRef)(null);
-	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([viewportRef, viewportObserverRef]);
+	const [viewportObserverElement, setViewportObserverElement] = (0, react.useState)(null);
+	const combinedViewportRef = (0, _floating_ui_react.useMergeRefs)([
+		viewportRef,
+		viewportObserverRef,
+		(0, react.useCallback)((node) => {
+			setViewportObserverElement((current) => current === node ? current : node);
+		}, [])
+	]);
 	const overflowingRef = (0, react.useRef)(false);
 	const didMountRef = (0, react.useRef)(false);
 	const handleOverflowCheck = (0, react.useEffectEvent)(() => {
@@ -156,7 +170,7 @@ const ScrollAreaAutosize = require_factory.factory((props) => {
 			overflowingRef.current = isOverflowing;
 		}
 	});
-	require_use_resize_observer.useResizeObserver(onOverflowChange ? viewportObserverRef.current : null, handleOverflowCheck);
+	require_use_resize_observer.useResizeObserver(onOverflowChange ? viewportObserverElement : null, handleOverflowCheck);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		...others,
 		variant,

package/cjs/components/ScrollArea/ScrollArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.cjs","names":["createVarsResolver","rem","factory","useProps","useStyles","ScrollAreaRoot","ScrollAreaViewport","ScrollAreaScrollbar","ScrollAreaThumb","ScrollAreaCorner","Box","classes"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { useEffectEvent, useRef, useState } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ScrollAreaCorner } from './ScrollAreaCorner/ScrollAreaCorner';\nimport { ScrollAreaRoot } from './ScrollAreaRoot/ScrollAreaRoot';\nimport { ScrollAreaScrollbar } from './ScrollAreaScrollbar/ScrollAreaScrollbar';\nimport { ScrollAreaThumb } from './ScrollAreaThumb/ScrollAreaThumb';\nimport { ScrollAreaViewport } from './ScrollAreaViewport/ScrollAreaViewport';\nimport { useResizeObserver } from './use-resize-observer';\nimport classes from './ScrollArea.module.css';\n\nexport type ScrollAreaStylesNames =\n  | 'root'\n  | 'viewport'\n  | 'scrollbar'\n  | 'thumb'\n  | 'corner'\n  | 'content';\n\nexport type ScrollAreaCssVariables = {\n  root: '--scrollarea-scrollbar-size';\n};\n\nexport interface ScrollAreaProps\n  extends BoxProps, StylesApiProps<ScrollAreaFactory>, ElementProps<'div'> {\n  /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) */\n  scrollbarSize?: number | string;\n\n  /**\n   * Defines scrollbars behavior\n   * - `'hover'` – scrollbars visible on hover (default)\n   * - `'scroll'` – scrollbars visible during scrolling\n   * - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto)\n   * - `'always'` – scrollbars always visible, even when content doesn't overflow\n   * - `'never'` – scrollbars always hidden\n   * @default 'hover'\n   * */\n  type?: 'auto' | 'always' | 'scroll' | 'hover' | 'never';\n\n  /** Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` @default 1000 */\n  scrollHideDelay?: number;\n\n  /**\n   * Axis at which scrollbars must be rendered\n   * - `'x'` - horizontal scrollbar only\n   * - `'y'` - vertical scrollbar only\n   * - `'xy'` - both scrollbars\n   * - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)\n   * @default 'xy'\n   */\n  scrollbars?: 'x' | 'y' | 'xy' | false;\n\n  /**\n   * Determines whether scrollbars should be offset with padding on given axis\n   * - `true` - adds padding to offset both scrollbars (always)\n   * - `'x'` - adds padding to offset horizontal scrollbar (always)\n   * - `'y'` - adds padding to offset vertical scrollbar (always)\n   * - `'present'` - adds padding only when scrollbars are visible (dynamic)\n   * @default false\n   */\n  offsetScrollbars?: boolean | 'x' | 'y' | 'present';\n\n  /** Assigns viewport element (scrollable container) ref */\n  viewportRef?: React.Ref<HTMLDivElement>;\n\n  /** Props passed down to the viewport element */\n  viewportProps?: React.ComponentProps<'div'>;\n\n  /** Called with current position (`x` and `y` coordinates) when viewport is scrolled */\n  onScrollPositionChange?: (position: { x: number; y: number }) => void;\n\n  /**\n   * Called when scrollarea is scrolled to the bottom (within 0.8px tolerance for sub-pixel rendering)\n   */\n  onBottomReached?: () => void;\n\n  /** Called when scrollarea is scrolled all the way to the top */\n  onTopReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the left (within 0.8px tolerance for sub-pixel rendering) */\n  onLeftReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the right (within 0.8px tolerance for sub-pixel rendering) */\n  onRightReached?: () => void;\n\n  /** Defines `overscroll-behavior` of the viewport */\n  overscrollBehavior?: React.CSSProperties['overscrollBehavior'];\n\n  /** Initial scroll position set on mount */\n  startScrollPosition?: { x?: number; y?: number };\n}\n\nexport interface ScrollAreaAutosizeProps extends ScrollAreaProps {\n  /** Called when content overflows due to max-height, making the container scrollable */\n  onOverflowChange?: (overflowing: boolean) => void;\n}\n\nexport type ScrollAreaFactory = Factory<{\n  props: ScrollAreaProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n  staticComponents: {\n    Autosize: typeof ScrollAreaAutosize;\n  };\n}>;\n\nexport type ScrollAreaAutosizeFactory = Factory<{\n  props: ScrollAreaAutosizeProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n}>;\n\nconst defaultProps = {\n  scrollHideDelay: 1000,\n  type: 'hover',\n  scrollbars: 'xy',\n} satisfies Partial<ScrollAreaProps>;\n\nconst varsResolver = createVarsResolver<ScrollAreaFactory>(\n  (_, { scrollbarSize, overscrollBehavior, scrollbars }) => {\n    let overrideOverscrollBehavior = overscrollBehavior;\n\n    if (overscrollBehavior && scrollbars) {\n      if (scrollbars === 'x') {\n        overrideOverscrollBehavior = `${overscrollBehavior} auto`;\n      } else if (scrollbars === 'y') {\n        overrideOverscrollBehavior = `auto ${overscrollBehavior}`;\n      }\n    }\n\n    return {\n      root: {\n        '--scrollarea-scrollbar-size': rem(scrollbarSize),\n        '--scrollarea-over-scroll-behavior': overrideOverscrollBehavior,\n      },\n    };\n  }\n);\n\nexport const ScrollArea = factory<ScrollAreaFactory>((_props) => {\n  const props = useProps('ScrollArea', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    scrollbarSize,\n    vars,\n    type,\n    scrollHideDelay,\n    viewportProps,\n    viewportRef,\n    onScrollPositionChange,\n    children,\n    offsetScrollbars,\n    scrollbars,\n    onBottomReached,\n    onTopReached,\n    onLeftReached,\n    onRightReached,\n    overscrollBehavior,\n    startScrollPosition,\n    attributes,\n    ...others\n  } = props;\n\n  const [scrollbarHovered, setScrollbarHovered] = useState(false);\n  const [verticalThumbVisible, setVerticalThumbVisible] = useState(false);\n  const [horizontalThumbVisible, setHorizontalThumbVisible] = useState(false);\n\n  // Refs to track previous boundary states\n  const prevAtTopRef = useRef(true);\n  const prevAtBottomRef = useRef(false);\n  const prevAtLeftRef = useRef(true);\n  const prevAtRightRef = useRef(false);\n\n  const getStyles = useStyles<ScrollAreaFactory>({\n    name: 'ScrollArea',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const localViewportRef = useRef<HTMLDivElement>(null);\n  const combinedViewportRef = useMergeRefs([viewportRef, localViewportRef]);\n\n  useIsomorphicEffect(() => {\n    if (startScrollPosition && localViewportRef.current) {\n      localViewportRef.current.scrollTo({\n        left: startScrollPosition.x ?? 0,\n        top: startScrollPosition.y ?? 0,\n      });\n    }\n  }, []);\n\n  useResizeObserver(offsetScrollbars === 'present' ? localViewportRef.current : null, () => {\n    const element = localViewportRef.current;\n    if (element) {\n      setVerticalThumbVisible(element.scrollHeight > element.clientHeight);\n      setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);\n    }\n  });\n\n  return (\n    <ScrollAreaRoot\n      getStyles={getStyles}\n      type={type === 'never' ? 'always' : type}\n      scrollHideDelay={scrollHideDelay}\n      scrollbars={scrollbars}\n      {...getStyles('root')}\n      {...others}\n    >\n      <ScrollAreaViewport\n        {...viewportProps}\n        {...getStyles('viewport', { style: viewportProps?.style })}\n        ref={combinedViewportRef}\n        data-offset-scrollbars={offsetScrollbars === true ? 'xy' : offsetScrollbars || undefined}\n        data-scrollbars={scrollbars || undefined}\n        data-horizontal-hidden={\n          offsetScrollbars === 'present' && !horizontalThumbVisible ? 'true' : undefined\n        }\n        data-vertical-hidden={\n          offsetScrollbars === 'present' && !verticalThumbVisible ? 'true' : undefined\n        }\n        onScroll={(e) => {\n          viewportProps?.onScroll?.(e);\n          onScrollPositionChange?.({ x: e.currentTarget.scrollLeft, y: e.currentTarget.scrollTop });\n          const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n            e.currentTarget;\n\n          // Vertical boundaries\n          // threshold of -0.8 is required for some browsers that use sub-pixel rendering, specifically when zoomed out.\n          const isAtBottom = scrollTop - (scrollHeight - clientHeight) >= -0.8;\n          const isAtTop = scrollTop === 0;\n\n          if (isAtBottom && !prevAtBottomRef.current) {\n            onBottomReached?.();\n          }\n          if (isAtTop && !prevAtTopRef.current) {\n            onTopReached?.();\n          }\n\n          prevAtBottomRef.current = isAtBottom;\n          prevAtTopRef.current = isAtTop;\n\n          // Horizontal boundaries\n          const isAtRight = scrollLeft - (scrollWidth - clientWidth) >= -0.8;\n          const isAtLeft = scrollLeft === 0;\n\n          if (isAtRight && !prevAtRightRef.current) {\n            onRightReached?.();\n          }\n          if (isAtLeft && !prevAtLeftRef.current) {\n            onLeftReached?.();\n          }\n\n          prevAtRightRef.current = isAtRight;\n          prevAtLeftRef.current = isAtLeft;\n        }}\n      >\n        {children}\n      </ScrollAreaViewport>\n\n      {(scrollbars === 'xy' || scrollbars === 'x') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"horizontal\"\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !horizontalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      {(scrollbars === 'xy' || scrollbars === 'y') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"vertical\"\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !verticalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      <ScrollAreaCorner\n        {...getStyles('corner')}\n        data-hovered={scrollbarHovered || undefined}\n        data-hidden={type === 'never' || undefined}\n      />\n    </ScrollAreaRoot>\n  );\n});\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n\nexport const ScrollAreaAutosize = factory<ScrollAreaAutosizeFactory>((props) => {\n  const {\n    children,\n    classNames,\n    styles,\n    scrollbarSize,\n    scrollHideDelay,\n    type,\n    dir,\n    offsetScrollbars,\n    overscrollBehavior,\n    viewportRef,\n    onScrollPositionChange,\n    unstyled,\n    variant,\n    viewportProps,\n    scrollbars,\n    style,\n    vars,\n    onBottomReached,\n    onTopReached,\n    startScrollPosition,\n    onOverflowChange,\n    ...others\n  } = useProps('ScrollAreaAutosize', defaultProps, props as ScrollAreaAutosizeProps);\n\n  // Overflow detection (Autosize-only)\n  const viewportObserverRef = useRef<HTMLDivElement>(null);\n  const combinedViewportRef = useMergeRefs([viewportRef, viewportObserverRef]);\n\n  const overflowingRef = useRef(false);\n  const didMountRef = useRef(false);\n\n  const handleOverflowCheck = useEffectEvent(() => {\n    const el = viewportObserverRef.current;\n    if (!el || !onOverflowChange) {\n      return;\n    }\n\n    const isOverflowing = el.scrollHeight > el.clientHeight;\n\n    if (isOverflowing !== overflowingRef.current) {\n      if (didMountRef.current) {\n        onOverflowChange(isOverflowing);\n      } else {\n        didMountRef.current = true;\n        if (isOverflowing) {\n          onOverflowChange(true);\n        }\n      }\n\n      overflowingRef.current = isOverflowing;\n    }\n  });\n\n  useResizeObserver(onOverflowChange ? viewportObserverRef.current : null, handleOverflowCheck);\n\n  return (\n    <Box {...others} variant={variant} style={[{ display: 'flex', overflow: 'hidden' }, style]}>\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          flex: 1,\n          overflow: 'hidden',\n          ...(scrollbars === 'y' && { minWidth: 0 }),\n          ...(scrollbars === 'x' && { minHeight: 0 }),\n          ...(scrollbars === 'xy' && { minWidth: 0, minHeight: 0 }),\n          ...(scrollbars === false && { minWidth: 0, minHeight: 0 }),\n        }}\n      >\n        <ScrollArea\n          classNames={classNames}\n          styles={styles}\n          scrollHideDelay={scrollHideDelay}\n          scrollbarSize={scrollbarSize}\n          type={type}\n          dir={dir}\n          offsetScrollbars={offsetScrollbars}\n          overscrollBehavior={overscrollBehavior}\n          viewportRef={combinedViewportRef}\n          onScrollPositionChange={onScrollPositionChange}\n          unstyled={unstyled}\n          variant={variant}\n          viewportProps={viewportProps}\n          vars={vars}\n          scrollbars={scrollbars}\n          onBottomReached={onBottomReached}\n          onTopReached={onTopReached}\n          startScrollPosition={startScrollPosition}\n          data-autosize=\"true\"\n        >\n          {children}\n        </ScrollArea>\n      </Box>\n    </Box>\n  );\n});\n\nScrollArea.classes = classes;\nScrollArea.varsResolver = varsResolver;\nScrollAreaAutosize.displayName = '@mantine/core/ScrollAreaAutosize';\nScrollAreaAutosize.classes = classes;\nScrollArea.Autosize = ScrollAreaAutosize;\n\nexport namespace ScrollArea {\n  export type Props = ScrollAreaProps;\n  export type AutosizeProps = ScrollAreaAutosizeProps;\n  export type StylesNames = ScrollAreaStylesNames;\n  export type CssVariables = ScrollAreaCssVariables;\n  export type Factory = ScrollAreaFactory;\n\n  export namespace Autosize {\n    export type Props = ScrollAreaAutosizeProps;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ScrollArea.cjs","names":["createVarsResolver","rem","factory","useProps","useStyles","ScrollAreaRoot","ScrollAreaViewport","ScrollAreaScrollbar","ScrollAreaThumb","ScrollAreaCorner","Box","classes"],"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import { useCallback, useEffectEvent, useRef, useState } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ScrollAreaCorner } from './ScrollAreaCorner/ScrollAreaCorner';\nimport { ScrollAreaRoot } from './ScrollAreaRoot/ScrollAreaRoot';\nimport { ScrollAreaScrollbar } from './ScrollAreaScrollbar/ScrollAreaScrollbar';\nimport { ScrollAreaThumb } from './ScrollAreaThumb/ScrollAreaThumb';\nimport { ScrollAreaViewport } from './ScrollAreaViewport/ScrollAreaViewport';\nimport { useResizeObserver } from './use-resize-observer';\nimport classes from './ScrollArea.module.css';\n\nexport type ScrollAreaStylesNames =\n  | 'root'\n  | 'viewport'\n  | 'scrollbar'\n  | 'thumb'\n  | 'corner'\n  | 'content';\n\nexport type ScrollAreaCssVariables = {\n  root: '--scrollarea-scrollbar-size';\n};\n\nexport interface ScrollAreaProps\n  extends BoxProps, StylesApiProps<ScrollAreaFactory>, ElementProps<'div'> {\n  /** Scrollbar size, any valid CSS value for width/height, numbers are converted to rem, default value is 12px (0.75rem) */\n  scrollbarSize?: number | string;\n\n  /**\n   * Defines scrollbars behavior\n   * - `'hover'` – scrollbars visible on hover (default)\n   * - `'scroll'` – scrollbars visible during scrolling\n   * - `'auto'` – scrollbars visible only when content overflows (like CSS overflow: auto)\n   * - `'always'` – scrollbars always visible, even when content doesn't overflow\n   * - `'never'` – scrollbars always hidden\n   * @default 'hover'\n   * */\n  type?: 'auto' | 'always' | 'scroll' | 'hover' | 'never';\n\n  /** Scroll hide delay in ms, applicable only when type is set to `hover` or `scroll` @default 1000 */\n  scrollHideDelay?: number;\n\n  /**\n   * Axis at which scrollbars must be rendered\n   * - `'x'` - horizontal scrollbar only\n   * - `'y'` - vertical scrollbar only\n   * - `'xy'` - both scrollbars\n   * - `false` - no scrollbars rendered (content remains scrollable via mouse/touch)\n   * @default 'xy'\n   */\n  scrollbars?: 'x' | 'y' | 'xy' | false;\n\n  /**\n   * Determines whether scrollbars should be offset with padding on given axis\n   * - `true` - adds padding to offset both scrollbars (always)\n   * - `'x'` - adds padding to offset horizontal scrollbar (always)\n   * - `'y'` - adds padding to offset vertical scrollbar (always)\n   * - `'present'` - adds padding only when scrollbars are visible (dynamic)\n   * @default false\n   */\n  offsetScrollbars?: boolean | 'x' | 'y' | 'present';\n\n  /** Assigns viewport element (scrollable container) ref */\n  viewportRef?: React.Ref<HTMLDivElement>;\n\n  /** Props passed down to the viewport element */\n  viewportProps?: React.ComponentProps<'div'>;\n\n  /** Called with current position (`x` and `y` coordinates) when viewport is scrolled */\n  onScrollPositionChange?: (position: { x: number; y: number }) => void;\n\n  /**\n   * Called when scrollarea is scrolled to the bottom (within 0.8px tolerance for sub-pixel rendering)\n   */\n  onBottomReached?: () => void;\n\n  /** Called when scrollarea is scrolled all the way to the top */\n  onTopReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the left (within 0.8px tolerance for sub-pixel rendering) */\n  onLeftReached?: () => void;\n\n  /** Called when scrollarea is scrolled to the right (within 0.8px tolerance for sub-pixel rendering) */\n  onRightReached?: () => void;\n\n  /** Defines `overscroll-behavior` of the viewport */\n  overscrollBehavior?: React.CSSProperties['overscrollBehavior'];\n\n  /** Initial scroll position set on mount */\n  startScrollPosition?: { x?: number; y?: number };\n}\n\nexport interface ScrollAreaAutosizeProps extends ScrollAreaProps {\n  /** Called when content overflows due to max-height, making the container scrollable */\n  onOverflowChange?: (overflowing: boolean) => void;\n}\n\nexport type ScrollAreaFactory = Factory<{\n  props: ScrollAreaProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n  staticComponents: {\n    Autosize: typeof ScrollAreaAutosize;\n  };\n}>;\n\nexport type ScrollAreaAutosizeFactory = Factory<{\n  props: ScrollAreaAutosizeProps;\n  ref: HTMLDivElement;\n  stylesNames: ScrollAreaStylesNames;\n  vars: ScrollAreaCssVariables;\n}>;\n\nconst defaultProps = {\n  scrollHideDelay: 1000,\n  type: 'hover',\n  scrollbars: 'xy',\n} satisfies Partial<ScrollAreaProps>;\n\nconst varsResolver = createVarsResolver<ScrollAreaFactory>(\n  (_, { scrollbarSize, overscrollBehavior, scrollbars }) => {\n    let overrideOverscrollBehavior = overscrollBehavior;\n\n    if (overscrollBehavior && scrollbars) {\n      if (scrollbars === 'x') {\n        overrideOverscrollBehavior = `${overscrollBehavior} auto`;\n      } else if (scrollbars === 'y') {\n        overrideOverscrollBehavior = `auto ${overscrollBehavior}`;\n      }\n    }\n\n    return {\n      root: {\n        '--scrollarea-scrollbar-size': rem(scrollbarSize),\n        '--scrollarea-over-scroll-behavior': overrideOverscrollBehavior,\n      },\n    };\n  }\n);\n\nexport const ScrollArea = factory<ScrollAreaFactory>((_props) => {\n  const props = useProps('ScrollArea', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    scrollbarSize,\n    vars,\n    type,\n    scrollHideDelay,\n    viewportProps,\n    viewportRef,\n    onScrollPositionChange,\n    children,\n    offsetScrollbars,\n    scrollbars,\n    onBottomReached,\n    onTopReached,\n    onLeftReached,\n    onRightReached,\n    overscrollBehavior,\n    startScrollPosition,\n    attributes,\n    ...others\n  } = props;\n\n  const [scrollbarHovered, setScrollbarHovered] = useState(false);\n  const [verticalThumbVisible, setVerticalThumbVisible] = useState(false);\n  const [horizontalThumbVisible, setHorizontalThumbVisible] = useState(false);\n\n  // Refs to track previous boundary states\n  const prevAtTopRef = useRef(true);\n  const prevAtBottomRef = useRef(false);\n  const prevAtLeftRef = useRef(true);\n  const prevAtRightRef = useRef(false);\n\n  const getStyles = useStyles<ScrollAreaFactory>({\n    name: 'ScrollArea',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const localViewportRef = useRef<HTMLDivElement>(null);\n  const [viewportElement, setViewportElement] = useState<HTMLDivElement | null>(null);\n  const viewportCallbackRef = useCallback((node: HTMLDivElement | null) => {\n    setViewportElement((current) => (current === node ? current : node));\n  }, []);\n  const combinedViewportRef = useMergeRefs([viewportRef, localViewportRef, viewportCallbackRef]);\n\n  useResizeObserver(offsetScrollbars === 'present' ? viewportElement : null, () => {\n    const element = localViewportRef.current;\n    if (element) {\n      setVerticalThumbVisible(element.scrollHeight > element.clientHeight);\n      setHorizontalThumbVisible(element.scrollWidth > element.clientWidth);\n    }\n  });\n\n  useIsomorphicEffect(() => {\n    if (startScrollPosition && localViewportRef.current) {\n      localViewportRef.current.scrollTo({\n        left: startScrollPosition.x ?? 0,\n        top: startScrollPosition.y ?? 0,\n      });\n    }\n  }, []);\n\n  return (\n    <ScrollAreaRoot\n      getStyles={getStyles}\n      type={type === 'never' ? 'always' : type}\n      scrollHideDelay={scrollHideDelay}\n      scrollbars={scrollbars}\n      {...getStyles('root')}\n      {...others}\n    >\n      <ScrollAreaViewport\n        {...viewportProps}\n        {...getStyles('viewport', { style: viewportProps?.style })}\n        ref={combinedViewportRef}\n        data-offset-scrollbars={offsetScrollbars === true ? 'xy' : offsetScrollbars || undefined}\n        data-scrollbars={scrollbars || undefined}\n        data-horizontal-hidden={\n          offsetScrollbars === 'present' && !horizontalThumbVisible ? 'true' : undefined\n        }\n        data-vertical-hidden={\n          offsetScrollbars === 'present' && !verticalThumbVisible ? 'true' : undefined\n        }\n        onScroll={(e) => {\n          viewportProps?.onScroll?.(e);\n          onScrollPositionChange?.({ x: e.currentTarget.scrollLeft, y: e.currentTarget.scrollTop });\n          const { scrollTop, scrollHeight, clientHeight, scrollLeft, scrollWidth, clientWidth } =\n            e.currentTarget;\n\n          // Vertical boundaries\n          // threshold of -0.8 is required for some browsers that use sub-pixel rendering, specifically when zoomed out.\n          const isAtBottom = scrollTop - (scrollHeight - clientHeight) >= -0.8;\n          const isAtTop = scrollTop === 0;\n\n          if (isAtBottom && !prevAtBottomRef.current) {\n            onBottomReached?.();\n          }\n          if (isAtTop && !prevAtTopRef.current) {\n            onTopReached?.();\n          }\n\n          prevAtBottomRef.current = isAtBottom;\n          prevAtTopRef.current = isAtTop;\n\n          // Horizontal boundaries\n          const isAtRight = scrollLeft - (scrollWidth - clientWidth) >= -0.8;\n          const isAtLeft = scrollLeft === 0;\n\n          if (isAtRight && !prevAtRightRef.current) {\n            onRightReached?.();\n          }\n          if (isAtLeft && !prevAtLeftRef.current) {\n            onLeftReached?.();\n          }\n\n          prevAtRightRef.current = isAtRight;\n          prevAtLeftRef.current = isAtLeft;\n        }}\n      >\n        {children}\n      </ScrollAreaViewport>\n\n      {(scrollbars === 'xy' || scrollbars === 'x') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"horizontal\"\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !horizontalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      {(scrollbars === 'xy' || scrollbars === 'y') && (\n        <ScrollAreaScrollbar\n          {...getStyles('scrollbar')}\n          orientation=\"vertical\"\n          data-hidden={\n            type === 'never' || (offsetScrollbars === 'present' && !verticalThumbVisible)\n              ? true\n              : undefined\n          }\n          forceMount\n          onMouseEnter={() => setScrollbarHovered(true)}\n          onMouseLeave={() => setScrollbarHovered(false)}\n        >\n          <ScrollAreaThumb {...getStyles('thumb')} />\n        </ScrollAreaScrollbar>\n      )}\n\n      <ScrollAreaCorner\n        {...getStyles('corner')}\n        data-hovered={scrollbarHovered || undefined}\n        data-hidden={type === 'never' || undefined}\n      />\n    </ScrollAreaRoot>\n  );\n});\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n\nexport const ScrollAreaAutosize = factory<ScrollAreaAutosizeFactory>((props) => {\n  const {\n    children,\n    classNames,\n    styles,\n    scrollbarSize,\n    scrollHideDelay,\n    type,\n    dir,\n    offsetScrollbars,\n    overscrollBehavior,\n    viewportRef,\n    onScrollPositionChange,\n    unstyled,\n    variant,\n    viewportProps,\n    scrollbars,\n    style,\n    vars,\n    onBottomReached,\n    onTopReached,\n    startScrollPosition,\n    onOverflowChange,\n    ...others\n  } = useProps('ScrollAreaAutosize', defaultProps, props as ScrollAreaAutosizeProps);\n\n  // Overflow detection (Autosize-only)\n  const viewportObserverRef = useRef<HTMLDivElement>(null);\n  const [viewportObserverElement, setViewportObserverElement] = useState<HTMLDivElement | null>(\n    null\n  );\n  const viewportObserverCallbackRef = useCallback((node: HTMLDivElement | null) => {\n    setViewportObserverElement((current) => (current === node ? current : node));\n  }, []);\n  const combinedViewportRef = useMergeRefs([\n    viewportRef,\n    viewportObserverRef,\n    viewportObserverCallbackRef,\n  ]);\n\n  const overflowingRef = useRef(false);\n  const didMountRef = useRef(false);\n\n  const handleOverflowCheck = useEffectEvent(() => {\n    const el = viewportObserverRef.current;\n    if (!el || !onOverflowChange) {\n      return;\n    }\n\n    const isOverflowing = el.scrollHeight > el.clientHeight;\n\n    if (isOverflowing !== overflowingRef.current) {\n      if (didMountRef.current) {\n        onOverflowChange(isOverflowing);\n      } else {\n        didMountRef.current = true;\n        if (isOverflowing) {\n          onOverflowChange(true);\n        }\n      }\n\n      overflowingRef.current = isOverflowing;\n    }\n  });\n\n  useResizeObserver(onOverflowChange ? viewportObserverElement : null, handleOverflowCheck);\n\n  return (\n    <Box {...others} variant={variant} style={[{ display: 'flex', overflow: 'hidden' }, style]}>\n      <Box\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          flex: 1,\n          overflow: 'hidden',\n          ...(scrollbars === 'y' && { minWidth: 0 }),\n          ...(scrollbars === 'x' && { minHeight: 0 }),\n          ...(scrollbars === 'xy' && { minWidth: 0, minHeight: 0 }),\n          ...(scrollbars === false && { minWidth: 0, minHeight: 0 }),\n        }}\n      >\n        <ScrollArea\n          classNames={classNames}\n          styles={styles}\n          scrollHideDelay={scrollHideDelay}\n          scrollbarSize={scrollbarSize}\n          type={type}\n          dir={dir}\n          offsetScrollbars={offsetScrollbars}\n          overscrollBehavior={overscrollBehavior}\n          viewportRef={combinedViewportRef}\n          onScrollPositionChange={onScrollPositionChange}\n          unstyled={unstyled}\n          variant={variant}\n          viewportProps={viewportProps}\n          vars={vars}\n          scrollbars={scrollbars}\n          onBottomReached={onBottomReached}\n          onTopReached={onTopReached}\n          startScrollPosition={startScrollPosition}\n          data-autosize=\"true\"\n        >\n          {children}\n        </ScrollArea>\n      </Box>\n    </Box>\n  );\n});\n\nScrollArea.classes = classes;\nScrollArea.varsResolver = varsResolver;\nScrollAreaAutosize.displayName = '@mantine/core/ScrollAreaAutosize';\nScrollAreaAutosize.classes = classes;\nScrollArea.Autosize = ScrollAreaAutosize;\n\nexport namespace ScrollArea {\n  export type Props = ScrollAreaProps;\n  export type AutosizeProps = ScrollAreaAutosizeProps;\n  export type StylesNames = ScrollAreaStylesNames;\n  export type CssVariables = ScrollAreaCssVariables;\n  export type Factory = ScrollAreaFactory;\n\n  export namespace Autosize {\n    export type Props = ScrollAreaAutosizeProps;\n  }\n}\n"],"mappings":"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"}

package/cjs/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<SelectFactory>,\n    ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n  /** Controlled component value */\n  value?: Value | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value | null;\n\n  /** Called when value changes */\n  onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Determines whether the select should be searchable @default false */\n  searchable?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it @default true */\n  allowDeselect?: boolean;\n\n  /** Displays clear button in the right section when component has value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron, by default depends on the color scheme */\n  chevronColor?: MantineColor;\n\n  /** Automatically selects the highlighted option when input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n  openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n  props: SelectProps;\n  ref: HTMLInputElement;\n  stylesNames: SelectStylesNames;\n  variant: InputVariant;\n  signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n  const props = useProps('Select', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    size,\n    searchable,\n    rightSection,\n    checkIconPosition,\n    withCheckIcon,\n    withAlignedLabels,\n    nothingFoundMessage,\n    name,\n    form,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    error,\n    rightSectionPointerEvents,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    renderOption,\n    onClear,\n    autoComplete,\n    scrollAreaProps,\n    __defaultRightSection,\n    __clearSection,\n    __clearable,\n    chevronColor,\n    autoSelectOnBlur,\n    openOnFocus,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n  const _id = useId(id);\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const selectedOption =\n    _value != null\n      ? `${_value}` in optionsLockup\n        ? optionsLockup[`${_value}`]\n        : retainedSelectedOptions.current[`${_value}`]\n      : undefined;\n  const previousSelectedOption = usePrevious(selectedOption);\n\n  const [search, setSearch, searchControlled] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: selectedOption ? selectedOption.label : '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      } else {\n        combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearch(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, search]);\n\n  useEffect(() => {\n    if (value === null) {\n      handleSearchChange('');\n    }\n\n    if (\n      value != null &&\n      selectedOption &&\n      (previousSelectedOption?.value !== selectedOption.value ||\n        previousSelectedOption?.label !== selectedOption.label)\n    ) {\n      handleSearchChange(selectedOption.label);\n    }\n  }, [value, selectedOption]);\n\n  useEffect(() => {\n    if (!controlled && !searchControlled) {\n      handleSearchChange(\n        _value != null\n          ? `${_value}` in optionsLockup\n            ? optionsLockup[`${_value}`]?.label\n            : retainedSelectedOptions.current[`${_value}`]?.label || ''\n          : ''\n      );\n    }\n  }, [optionsLockup, _value]);\n\n  useEffect(() => {\n    if (_value) {\n      if (`${_value}` in optionsLockup) {\n        retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n      }\n    }\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue(null, null);\n        handleSearchChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  const _clearable = clearable && !!_value && !disabled && !readOnly;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"Select\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        readOnly={readOnly}\n        size={size}\n        attributes={attributes}\n        keepMounted={autoSelectOnBlur}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          const optionLockup = allowDeselect\n            ? `${optionsLockup[val].value}` === `${_value}`\n              ? null\n              : optionsLockup[val]\n            : optionsLockup[val];\n\n          const nextValue = optionLockup ? optionLockup.value : null;\n\n          nextValue !== _value && setValue(nextValue as any, optionLockup);\n          !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n          combobox.closeDropdown();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.Target\n          targetType={searchable ? 'input' : 'button'}\n          autoComplete={autoComplete}\n          withExpandedAttribute\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            {...others}\n            size={size}\n            __staticSelector=\"Select\"\n            disabled={disabled}\n            readOnly={readOnly || !searchable}\n            value={search}\n            onChange={(event) => {\n              handleSearchChange(event.currentTarget.value);\n              combobox.openDropdown();\n              selectFirstOptionOnChange && combobox.selectFirstOption();\n            }}\n            onFocus={(event) => {\n              openOnFocus && !!searchable && combobox.openDropdown();\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              if (autoSelectOnBlur) {\n                combobox.clickSelectedOption();\n              }\n\n              !!searchable && combobox.closeDropdown();\n              const optionLockup =\n                _value != null &&\n                (`${_value}` in optionsLockup\n                  ? optionsLockup[`${_value}`]\n                  : retainedSelectedOptions.current[`${_value}`]);\n              handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n              onBlur?.(event);\n            }}\n            onClick={(event) => {\n              searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n              onClick?.(event);\n            }}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            pointer={!searchable}\n            error={error}\n            attributes={attributes}\n          />\n        </Combobox.Target>\n        <OptionsDropdown\n          data={parsedData as any}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={search}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={!!searchable && selectedOption?.label !== search}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={others.label ? `${_id}-label` : undefined}\n          aria-label={others.label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        value={_value}\n        name={name}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n  export type Props<Value extends Primitive = string> = SelectProps<Value>;\n  export type StylesNames = SelectStylesNames;\n  export type Factory = SelectFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","names":["genericFactory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  MantineColor,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps<Value extends Primitive = string>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    ComboboxLikeProps<Value>,\n    StylesApiProps<SelectFactory>,\n    ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\n  /** Controlled component value */\n  value?: Value | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Value | null;\n\n  /** Called when value changes */\n  onChange?: (value: Value | null, option: ComboboxItem<Value>) => void;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Determines whether the select should be searchable @default false */\n  searchable?: boolean;\n\n  /** Displays check icon near the selected option label @default true */\n  withCheckIcon?: boolean;\n\n  /** Aligns unchecked labels with the checked one @default false */\n  withAlignedLabels?: boolean;\n\n  /** Position of the check icon relative to the option label @default 'left' */\n  checkIconPosition?: 'left' | 'right';\n\n  /** Message displayed when no options match the search query or when there is no data */\n  nothingFoundMessage?: React.ReactNode;\n\n  /** Controlled search value */\n  searchValue?: string;\n\n  /** Default search value */\n  defaultSearchValue?: string;\n\n  /** Called when search changes */\n  onSearchChange?: (value: string) => void;\n\n  /** Allows deselecting the selected option by clicking it @default true */\n  allowDeselect?: boolean;\n\n  /** Displays clear button in the right section when component has value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n  /** A function to render content of the option, replaces the default content of the option */\n  renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n  /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Controls color of the default chevron, by default depends on the color scheme */\n  chevronColor?: MantineColor;\n\n  /** Automatically selects the highlighted option when input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** Opens dropdown when input receives focus (requires searchable={true}) @default true */\n  openOnFocus?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n  props: SelectProps;\n  ref: HTMLInputElement;\n  stylesNames: SelectStylesNames;\n  variant: InputVariant;\n  signature: <Value extends Primitive = string>(props: SelectProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  size: 'sm',\n  withCheckIcon: true,\n  allowDeselect: true,\n  checkIconPosition: 'left',\n  openOnFocus: true,\n} satisfies Partial<SelectProps>;\n\nexport const Select = genericFactory<SelectFactory>((_props) => {\n  const props = useProps('Select', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    size,\n    searchable,\n    rightSection,\n    checkIconPosition,\n    withCheckIcon,\n    withAlignedLabels,\n    nothingFoundMessage,\n    name,\n    form,\n    searchValue,\n    defaultSearchValue,\n    onSearchChange,\n    allowDeselect,\n    error,\n    rightSectionPointerEvents,\n    id,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    hiddenInputProps,\n    renderOption,\n    onClear,\n    autoComplete,\n    scrollAreaProps,\n    __defaultRightSection,\n    __clearSection,\n    __clearable,\n    chevronColor,\n    autoSelectOnBlur,\n    openOnFocus,\n    attributes,\n    ...others\n  } = props;\n\n  const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n  const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n  const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\n  const _id = useId(id);\n\n  const [_value, setValue, controlled] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const selectedOption =\n    _value != null\n      ? `${_value}` in optionsLockup\n        ? optionsLockup[`${_value}`]\n        : retainedSelectedOptions.current[`${_value}`]\n      : undefined;\n  const previousSelectedOption = usePrevious(selectedOption);\n\n  const [search, setSearch, searchControlled] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: selectedOption ? selectedOption.label : '',\n    onChange: onSearchChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      } else {\n        combobox.updateSelectedOptionIndex('active', { scrollIntoView: true });\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearch(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<SelectFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, search]);\n\n  useEffect(() => {\n    if (value === null) {\n      handleSearchChange('');\n    }\n\n    if (\n      value != null &&\n      selectedOption &&\n      (previousSelectedOption?.value !== selectedOption.value ||\n        previousSelectedOption?.label !== selectedOption.label)\n    ) {\n      handleSearchChange(selectedOption.label);\n    }\n  }, [value, selectedOption]);\n\n  useEffect(() => {\n    if (!controlled && !searchControlled) {\n      handleSearchChange(\n        _value != null\n          ? `${_value}` in optionsLockup\n            ? optionsLockup[`${_value}`]?.label\n            : retainedSelectedOptions.current[`${_value}`]?.label || ''\n          : ''\n      );\n    }\n  }, [optionsLockup, _value]);\n\n  useEffect(() => {\n    if (_value) {\n      if (`${_value}` in optionsLockup) {\n        retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];\n      }\n    }\n  }, [optionsLockup, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        setValue(null, null);\n        handleSearchChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  const _clearable = clearable && !!_value && !disabled && !readOnly;\n\n  return (\n    <>\n      <Combobox\n        store={combobox}\n        __staticSelector=\"Select\"\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        readOnly={readOnly}\n        size={size}\n        attributes={attributes}\n        keepMounted={autoSelectOnBlur}\n        onOptionSubmit={(val) => {\n          onOptionSubmit?.(val as any);\n          const optionLockup = allowDeselect\n            ? `${optionsLockup[val].value}` === `${_value}`\n              ? null\n              : optionsLockup[val]\n            : optionsLockup[val];\n\n          const nextValue = optionLockup ? optionLockup.value : null;\n\n          nextValue !== _value && setValue(nextValue as any, optionLockup);\n          !controlled && handleSearchChange(nextValue != null ? optionLockup?.label || '' : '');\n          combobox.closeDropdown();\n        }}\n        {...comboboxProps}\n      >\n        <Combobox.Target\n          targetType={searchable ? 'input' : 'button'}\n          autoComplete={autoComplete}\n          withExpandedAttribute\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            {...others}\n            size={size}\n            __staticSelector=\"Select\"\n            disabled={disabled}\n            readOnly={readOnly || !searchable}\n            value={search}\n            onChange={(event) => {\n              handleSearchChange(event.currentTarget.value);\n              combobox.openDropdown();\n              selectFirstOptionOnChange && combobox.selectFirstOption();\n            }}\n            onFocus={(event) => {\n              openOnFocus && !!searchable && combobox.openDropdown();\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              if (autoSelectOnBlur) {\n                combobox.clickSelectedOption();\n              }\n\n              !!searchable && combobox.closeDropdown();\n              const optionLockup =\n                _value != null &&\n                (`${_value}` in optionsLockup\n                  ? optionsLockup[`${_value}`]\n                  : retainedSelectedOptions.current[`${_value}`]);\n              handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n              onBlur?.(event);\n            }}\n            onClick={(event) => {\n              searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n              onClick?.(event);\n            }}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            unstyled={unstyled}\n            pointer={!searchable}\n            error={error}\n            attributes={attributes}\n          />\n        </Combobox.Target>\n        <OptionsDropdown\n          data={parsedData as any}\n          hidden={readOnly || disabled}\n          filter={filter as OptionsFilter<Primitive> | undefined}\n          search={search}\n          limit={limit}\n          hiddenWhenEmpty={!nothingFoundMessage}\n          withScrollArea={withScrollArea}\n          maxDropdownHeight={maxDropdownHeight}\n          filterOptions={!!searchable && selectedOption?.label !== search}\n          value={_value}\n          checkIconPosition={checkIconPosition}\n          withCheckIcon={withCheckIcon}\n          withAlignedLabels={withAlignedLabels}\n          nothingFoundMessage={nothingFoundMessage}\n          unstyled={unstyled}\n          labelId={others.label ? `${_id}-label` : undefined}\n          aria-label={others.label ? undefined : others['aria-label']}\n          renderOption={renderOption}\n          scrollAreaProps={scrollAreaProps}\n        />\n      </Combobox>\n      <Combobox.HiddenInput\n        value={_value}\n        name={name}\n        form={form}\n        disabled={disabled}\n        {...hiddenInputProps}\n      />\n    </>\n  );\n});\n\nSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nSelect.displayName = '@mantine/core/Select';\n\nexport namespace Select {\n  export type Props<Value extends Primitive = string> = SelectProps<Value>;\n  export type StylesNames = SelectStylesNames;\n  export type Factory = SelectFactory;\n}\n"],"mappings":"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"}