@mantine/core 9.2.2 → 9.3.1

package/esm/components/MultiSelect/MultiSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.mjs","names":["useId"],"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  usePillsReorder,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { 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  /** If set, selected values can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */\n  withPillsReorder?: 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(['Input', 'InputWrapper', '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    withPillsReorder,\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 { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({\n    value: _value,\n    onChange: setValue,\n    enabled: withPillsReorder && !disabled && !readOnly,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<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.defaultPrevented) {\n      return;\n    }\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    handleInputKeyDown(event);\n  };\n\n  const values = _value.map((item, index) => {\n    const optionData = optionsLockup[`${item}`] || retainedSelectedOptions.current[`${item}`];\n    const reorderProps = getPillProps(index);\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            reorderProps,\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        {...reorderProps}\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              {...getListProps()}\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":";;;;;;;;;;;;;;;;;;;;AAyCA,MAAM,qBAA6C;CACjD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AA8GA,MAAM,eAAe;CACnB,WAAW;CACX,eAAe;CACf,mBAAmB;CACnB,0BAA0B;CAC1B,qBAAqB;CACrB,aAAa;CACb,MAAM;AACR;AAEA,MAAa,cAAc,gBAAoC,WAAW;CACxE,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAa,GAAG,cAAc,MAAM;CACrF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,WACA,SACA,MACA,gBACA,uBACA,gBACA,iBACA,2BACA,iCACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,aACA,oBACA,gBACA,UACA,UACA,SACA,QACA,QACA,cACA,mBACA,2BACA,mBACA,aACA,kBACA,0BACA,kBACA,gBACA,mBACA,cACA,YACA,kBACA,YACA,cACA,aACA,OACA,OACA,WACA,YACA,qBACA,eACA,mBACA,mBACA,mBACA,iBACA,MACA,MACA,IACA,WACA,kBACA,kBACA,kBACA,aACA,0BACA,UACA,KACA,cACA,YACA,UACA,SACA,aACA,iBACA,cACA,YACA,qBACA,aACA,SACA,iBACA,kBACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,aAAa,sBAAsB,IAAI;CAC7C,MAAM,gBAAgB,iBAAiB,UAAU;CACjD,MAAM,0BAA0B,OAAgD,CAAC,CAAC;CAElF,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAClB,SAAS,oBAAoB;EAC/B;CACF,CAAC;CAED,MAAM,EACJ,YACA,MAAM,EAAE,MAAM,cAAc,GAAG,WAC7B,kBAAkB,MAAM;CAE5B,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,EAAE,cAAc,cAAc,uBAAuB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"}
+{"version":3,"file":"MultiSelect.mjs","names":["useId"],"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  usePillsReorder,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { 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  /** If set, selected values can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */\n  withPillsReorder?: 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(['Input', 'InputWrapper', '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    floatingHeight,\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    withPillsReorder,\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 { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({\n    value: _value,\n    onChange: setValue,\n    enabled: withPillsReorder && !disabled && !readOnly,\n  });\n\n  const [_searchValue, setSearchValue] = useUncontrolled({\n    value: searchValue,\n    defaultValue: defaultSearchValue,\n    finalValue: '',\n    onChange: onSearchChange,\n  });\n\n  const handleSearchChange = (value: string) => {\n    setSearchValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const getStyles = useStyles<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.defaultPrevented) {\n      return;\n    }\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    handleInputKeyDown(event);\n  };\n\n  const values = _value.map((item, index) => {\n    const optionData = optionsLockup[`${item}`] || retainedSelectedOptions.current[`${item}`];\n    const reorderProps = getPillProps(index);\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            reorderProps,\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        {...reorderProps}\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        floatingHeight={floatingHeight}\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              {...getListProps()}\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":";;;;;;;;;;;;;;;;;;;;AAyCA,MAAM,qBAA6C;CACjD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AA8GA,MAAM,eAAe;CACnB,WAAW;CACX,eAAe;CACf,mBAAmB;CACnB,0BAA0B;CAC1B,qBAAqB;CACrB,aAAa;CACb,MAAM;AACR;AAEA,MAAa,cAAc,gBAAoC,WAAW;CACxE,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAa,GAAG,cAAc,MAAM;CACrF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,WACA,SACA,MACA,gBACA,uBACA,gBACA,iBACA,2BACA,iCACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,gBACA,aACA,oBACA,gBACA,UACA,UACA,SACA,QACA,QACA,cACA,mBACA,2BACA,mBACA,aACA,kBACA,0BACA,kBACA,gBACA,mBACA,cACA,YACA,kBACA,YACA,cACA,aACA,OACA,OACA,WACA,YACA,qBACA,eACA,mBACA,mBACA,mBACA,iBACA,MACA,MACA,IACA,WACA,kBACA,kBACA,kBACA,aACA,0BACA,UACA,KACA,cACA,YACA,UACA,SACA,aACA,iBACA,cACA,YACA,qBACA,aACA,SACA,iBACA,kBACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,aAAa,sBAAsB,IAAI;CAC7C,MAAM,gBAAgB,iBAAiB,UAAU;CACjD,MAAM,0BAA0B,OAAgD,CAAC,CAAC;CAElF,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAClB,SAAS,oBAAoB;EAC/B;CACF,CAAC;CAED,MAAM,EACJ,YACA,MAAM,EAAE,MAAM,cAAc,GAAG,WAC7B,kBAAkB,MAAM;CAE5B,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,EAAE,cAAc,cAAc,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"}

package/esm/components/OverflowList/OverflowList.mjs

@@ -8,7 +8,7 @@ import { Box } from "../../core/Box/Box.mjs";
 import { getRowPositionsData } from "./get-row-position-data.mjs";
 import { useDimensions } from "./use-dimensions.mjs";
 import OverflowList_module_default from "./OverflowList.module.mjs";
-import { cloneElement, useRef, useState } from "react";
+import { cloneElement, useMemo, useRef, useState } from "react";
 import { useIsomorphicEffect, useMergedRef } from "@mantine/hooks";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/OverflowList/OverflowList.tsx
@@ -17,9 +17,15 @@ const defaultProps = {
 	maxVisibleItems: Infinity
 };
 const varsResolver = createVarsResolver((_, { gap }) => ({ root: { "--ol-gap": getSpacing(gap) } }));
+function getDataSignature(data, getItemKey) {
+	return data.map((item, index) => {
+		if (getItemKey) return getItemKey(item, index);
+		return item !== null && (typeof item === "object" || typeof item === "function") ? index : String(item);
+	}).join("\0");
+}
 const OverflowList = genericFactory((_props) => {
 	const props = useProps("OverflowList", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, attributes, data, renderOverflow, renderItem, maxRows, maxVisibleItems, ref, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, attributes, data, renderOverflow, renderItem, maxRows, maxVisibleItems, collapseFrom, getItemKey, ref, ...others } = props;
 	const getStyles = useStyles({
 		name: "OverflowList",
 		classes: OverflowList_module_default,
@@ -39,7 +45,10 @@ const OverflowList = genericFactory((_props) => {
 	const containerRef = useRef(null);
 	const rootRef = useMergedRef(containerRef, ref);
 	const finalVisibleCount = visibleCount - subtractCount;
-	const overflowElement = data.length - finalVisibleCount > 0 && phase !== "measuring" ? renderOverflow?.(data.slice(finalVisibleCount)) : null;
+	const showOverflow = data.length - finalVisibleCount > 0 && phase !== "measuring";
+	const isCollapseStart = collapseFrom === "start";
+	const overflowItems = isCollapseStart ? data.slice(0, data.length - finalVisibleCount) : data.slice(finalVisibleCount);
+	const overflowElement = showOverflow ? renderOverflow?.(overflowItems) : null;
 	const _overflowRef = useRef(null);
 	const overflowRef = useMergedRef(_overflowRef, overflowElement?.ref);
 	const dimensions = useDimensions(containerRef);
@@ -47,7 +56,11 @@ const OverflowList = genericFactory((_props) => {
 		setPhase("measuring");
 		setVisibleCount(data.length);
 		setSubtractCount(0);
-	}, [data.length, maxRows]);
+	}, [
+		useMemo(() => getDataSignature(data, getItemKey), [data, getItemKey]),
+		maxRows,
+		collapseFrom
+	]);
 	useIsomorphicEffect(() => {
 		if (phase === "measuring") {
 			countVisibleItems();
@@ -65,12 +78,41 @@ const OverflowList = genericFactory((_props) => {
 			setSubtractCount(0);
 		}
 	}, [dimensions]);
+	const fitsInRows = (itemWidths, containerWidth, columnGap, startIndex = 0) => {
+		let rows = 1;
+		let rowWidth = 0;
+		for (let i = startIndex; i < itemWidths.length; i += 1) {
+			const width = itemWidths[i];
+			const needed = rowWidth > 0 ? width + columnGap : width;
+			if (rowWidth + needed > containerWidth && rowWidth > 0) {
+				rows++;
+				if (rows > maxRows) return false;
+				rowWidth = width;
+			} else rowWidth += needed;
+		}
+		return true;
+	};
 	const countVisibleItems = () => {
 		const rowData = getRowPositionsData(containerRef, _overflowRef);
 		if (!rowData) return;
+		const container = containerRef.current;
+		if (!container) return;
+		if (isCollapseStart) {
+			const containerWidth = container.getBoundingClientRect().width;
+			const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;
+			const widths = rowData.children.map((child) => child.getBoundingClientRect().width);
+			let count = 0;
+			for (let i = widths.length - 1; i >= 0; i--) {
+				if (!fitsInRows(widths, containerWidth, columnGap, i)) break;
+				count = widths.length - i;
+			}
+			count = Math.min(count, maxVisibleItems);
+			setVisibleCount(count);
+			return;
+		}
 		if (data.length === 1) {
 			const itemRef = rowData.itemsSizesMap[rowData.rowPositions[0]].elements.values().next().value;
-			const containerWidth = containerRef.current?.getBoundingClientRect().width ?? 0;
+			const containerWidth = container.getBoundingClientRect().width;
 			if ((itemRef?.getBoundingClientRect().width ?? 0) > containerWidth) setVisibleCount(0);
 			else setVisibleCount(1);
 			return;
@@ -86,6 +128,17 @@ const OverflowList = genericFactory((_props) => {
 		const rowData = getRowPositionsData(containerRef, _overflowRef);
 		if (!rowData) return false;
 		const { rowPositions, itemsSizesMap } = rowData;
+		if (isCollapseStart) {
+			const container = containerRef.current;
+			if (!container) return false;
+			const containerWidth = container.getBoundingClientRect().width;
+			const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;
+			if (!fitsInRows([_overflowRef.current.getBoundingClientRect().width, ...rowData.children.map((child) => child.getBoundingClientRect().width)], containerWidth, columnGap)) {
+				setSubtractCount((c) => c + 1);
+				return true;
+			}
+			return false;
+		}
 		const overflowRect = _overflowRef.current.getBoundingClientRect();
 		if (overflowRect.top + overflowRect.height / 2 > itemsSizesMap[rowPositions[rowPositions.length - 1]].bottom) {
 			setSubtractCount((c) => c + 1);
@@ -95,15 +148,21 @@ const OverflowList = genericFactory((_props) => {
 	};
 	const clonedOverflowElement = overflowElement ? cloneElement(overflowElement, { ref: overflowRef }) : null;
 	let finalItems = data;
-	if (maxVisibleItems) finalItems = finalItems.slice(0, maxVisibleItems);
+	if (maxVisibleItems) finalItems = isCollapseStart ? finalItems.slice(-maxVisibleItems) : finalItems.slice(0, maxVisibleItems);
+	const indexOffset = isCollapseStart ? data.length - finalItems.length : 0;
 	return /* @__PURE__ */ jsxs(Box, {
 		ref: rootRef,
 		...getStyles("root"),
 		...others,
-		children: [finalItems.map((item, index) => {
-			if (!(phase === "measuring" || index < finalVisibleCount)) return null;
-			return /* @__PURE__ */ jsx(Fragment$1, { children: renderItem(item, index) }, index);
-		}), clonedOverflowElement]
+		children: [
+			isCollapseStart && clonedOverflowElement,
+			finalItems.map((item, index) => {
+				if (!(phase === "measuring" || (isCollapseStart ? index >= finalItems.length - finalVisibleCount : index < finalVisibleCount))) return null;
+				const dataIndex = indexOffset + index;
+				return /* @__PURE__ */ jsx(Fragment$1, { children: renderItem(item, dataIndex) }, dataIndex);
+			}),
+			!isCollapseStart && clonedOverflowElement
+		]
 	});
 });
 OverflowList.displayName = "@mantine/core/OverflowList";

package/esm/components/OverflowList/OverflowList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowList.mjs","names":["Fragment","classes"],"sources":["../../../src/components/OverflowList/OverflowList.tsx"],"sourcesContent":["// Originally based on https://github.com/Eliav2/react-responsive-overflow-list (MIT License)\n// Contains the modified version adapted for Mantine\nimport { cloneElement, Ref, useRef, useState } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { getRowPositionsData } from './get-row-position-data';\nimport { useDimensions } from './use-dimensions';\nimport classes from './OverflowList.module.css';\n\nexport type OverflowListStylesNames = 'root';\nexport type OverflowListCssVariables = {\n  root: '--ol-gap';\n};\n\nexport interface OverflowListProps<T = any>\n  extends BoxProps, StylesApiProps<OverflowListFactory>, ElementProps<'div', 'children'> {\n  /** Array of items to display */\n  data: T[];\n\n  /** Function to render item */\n  renderItem: (item: T, index: number) => React.ReactNode;\n\n  /** Function to render hidden items */\n  renderOverflow: (items: T[]) => React.ReactNode;\n\n  /** Number of rows to display @default 1 */\n  maxRows?: number;\n\n  /** Maximum number of visible items @default Infinity */\n  maxVisibleItems?: number;\n\n  /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'xs' */\n  gap?: MantineSpacing;\n\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport type OverflowListFactory = Factory<{\n  props: OverflowListProps<any>;\n  ref: HTMLDivElement;\n  stylesNames: OverflowListStylesNames;\n  vars: OverflowListCssVariables;\n  signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxRows: 1,\n  maxVisibleItems: Infinity,\n} satisfies Partial<OverflowListProps<any>>;\n\nconst varsResolver = createVarsResolver<OverflowListFactory>((_, { gap }) => ({\n  root: {\n    '--ol-gap': getSpacing(gap),\n  },\n}));\n\nexport const OverflowList = genericFactory<OverflowListFactory>((_props) => {\n  const props = useProps('OverflowList', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    data,\n    renderOverflow,\n    renderItem,\n    maxRows,\n    maxVisibleItems,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<OverflowListFactory>({\n    name: 'OverflowList',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [subtractCount, setSubtractCount] = useState(0);\n  const [phase, setPhase] = useState<'normal' | 'measuring' | 'measuring-overflow-indicator'>(\n    'normal'\n  );\n\n  const containerRef = useRef<HTMLElement>(null);\n  const rootRef = useMergedRef(containerRef, ref);\n  const finalVisibleCount = visibleCount - subtractCount;\n  const overflowCount = data.length - finalVisibleCount;\n  const showOverflow = overflowCount > 0 && phase !== 'measuring';\n  const overflowElement = showOverflow ? renderOverflow?.(data.slice(finalVisibleCount)) : null;\n\n  const _overflowRef = useRef<HTMLElement>(null);\n  const overflowRef = useMergedRef(_overflowRef, (overflowElement as any)?.ref);\n  const dimensions = useDimensions(containerRef);\n\n  useIsomorphicEffect(() => {\n    setPhase('measuring');\n    setVisibleCount(data.length);\n    setSubtractCount(0);\n  }, [data.length, maxRows]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring') {\n      countVisibleItems();\n      setPhase('measuring-overflow-indicator');\n    }\n  }, [phase]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring-overflow-indicator') {\n      const updateWasNeeded = updateOverflowIndicator();\n      if (!updateWasNeeded) {\n        setPhase('normal');\n      }\n    }\n  }, [phase, subtractCount]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'normal') {\n      setPhase('measuring');\n      setSubtractCount(0);\n    }\n  }, [dimensions]);\n\n  const countVisibleItems = () => {\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return;\n    }\n\n    if (data.length === 1) {\n      const itemRef = rowData.itemsSizesMap[rowData.rowPositions[0]].elements.values().next().value;\n      const containerWidth = containerRef.current?.getBoundingClientRect().width ?? 0;\n      const itemWidth = itemRef?.getBoundingClientRect().width ?? 0;\n\n      if (itemWidth > containerWidth) {\n        setVisibleCount(0);\n      } else {\n        setVisibleCount(1);\n      }\n\n      return;\n    }\n\n    const visibleRowPositions = rowData.rowPositions.slice(0, maxRows);\n\n    let fittingCount = visibleRowPositions.reduce((acc, position) => {\n      return acc + rowData.itemsSizesMap[position].elements.size;\n    }, 0);\n\n    fittingCount = Math.min(fittingCount, maxVisibleItems);\n    setVisibleCount(fittingCount);\n  };\n\n  const updateOverflowIndicator = () => {\n    if (!_overflowRef.current) {\n      return false;\n    }\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return false;\n    }\n\n    const { rowPositions, itemsSizesMap } = rowData;\n\n    const overflowRect = _overflowRef.current.getBoundingClientRect();\n    const overflowMiddleY = overflowRect.top + overflowRect.height / 2;\n    const lastRowTop = rowPositions[rowPositions.length - 1];\n    const lastRow = itemsSizesMap[lastRowTop];\n\n    if (overflowMiddleY > lastRow.bottom) {\n      setSubtractCount((c) => c + 1);\n      return true;\n    }\n\n    return false;\n  };\n\n  const clonedOverflowElement = overflowElement\n    ? cloneElement(overflowElement as React.ReactElement<any>, { ref: overflowRef })\n    : null;\n\n  let finalItems = data;\n  if (maxVisibleItems) {\n    finalItems = finalItems.slice(0, maxVisibleItems);\n  }\n\n  return (\n    <Box ref={rootRef} {...getStyles('root')} {...others}>\n      {finalItems.map((item, index) => {\n        const isVisible = phase === 'measuring' || index < finalVisibleCount;\n        if (!isVisible) {\n          return null;\n        }\n        const itemComponent = renderItem(item, index);\n\n        return <Fragment key={index}>{itemComponent}</Fragment>;\n      })}\n\n      {clonedOverflowElement}\n    </Box>\n  );\n});\n\nOverflowList.displayName = '@mantine/core/OverflowList';\nOverflowList.classes = classes;\nOverflowList.varsResolver = varsResolver;\n\nexport namespace OverflowList {\n  export type Props = OverflowListProps;\n  export type Factory = OverflowListFactory;\n  export type StylesNames = OverflowListStylesNames;\n  export type CssVariables = OverflowListCssVariables;\n}\n"],"mappings":"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"}
+{"version":3,"file":"OverflowList.mjs","names":["Fragment","classes"],"sources":["../../../src/components/OverflowList/OverflowList.tsx"],"sourcesContent":["// Originally based on https://github.com/Eliav2/react-responsive-overflow-list (MIT License)\n// Contains the modified version adapted for Mantine\nimport { cloneElement, useMemo, useRef, useState } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { getRowPositionsData } from './get-row-position-data';\nimport { useDimensions } from './use-dimensions';\nimport classes from './OverflowList.module.css';\n\nexport type OverflowListStylesNames = 'root';\nexport type OverflowListCssVariables = {\n  root: '--ol-gap';\n};\n\nexport interface OverflowListProps<T = any>\n  extends BoxProps, StylesApiProps<OverflowListFactory>, ElementProps<'div', 'children'> {\n  /** Array of items to display */\n  data: T[];\n\n  /** Function to render item */\n  renderItem: (item: T, index: number) => React.ReactNode;\n\n  /** Function to render hidden items */\n  renderOverflow: (items: T[]) => React.ReactNode;\n\n  /** Number of rows to display @default 1 */\n  maxRows?: number;\n\n  /** Maximum number of visible items @default Infinity */\n  maxVisibleItems?: number;\n\n  /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'xs' */\n  gap?: MantineSpacing;\n\n  /** Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items @default 'end' */\n  collapseFrom?: 'start' | 'end';\n\n  /** A function to resolve a unique key for each item. Used to detect when the contents of `data`\n   * change (for example when items are reordered while the length stays the same) so the\n   * visible/overflow split can be recomputed. Required to detect reordering when `data` contains\n   * objects; for primitive items (strings, numbers) the item value is used by default. */\n  getItemKey?: (item: T, index: number) => React.Key;\n}\n\nexport type OverflowListFactory = Factory<{\n  props: OverflowListProps<any>;\n  ref: HTMLDivElement;\n  stylesNames: OverflowListStylesNames;\n  vars: OverflowListCssVariables;\n  signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  maxRows: 1,\n  maxVisibleItems: Infinity,\n} satisfies Partial<OverflowListProps<any>>;\n\nconst varsResolver = createVarsResolver<OverflowListFactory>((_, { gap }) => ({\n  root: {\n    '--ol-gap': getSpacing(gap),\n  },\n}));\n\nfunction getDataSignature<T>(\n  data: T[],\n  getItemKey: ((item: T, index: number) => React.Key) | undefined\n): string {\n  return data\n    .map((item, index) => {\n      if (getItemKey) {\n        return getItemKey(item, index);\n      }\n      return item !== null && (typeof item === 'object' || typeof item === 'function')\n        ? index\n        : String(item);\n    })\n    .join('\\u0000');\n}\n\nexport const OverflowList = genericFactory<OverflowListFactory>((_props) => {\n  const props = useProps('OverflowList', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    data,\n    renderOverflow,\n    renderItem,\n    maxRows,\n    maxVisibleItems,\n    collapseFrom,\n    getItemKey,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<OverflowListFactory>({\n    name: 'OverflowList',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const [visibleCount, setVisibleCount] = useState(data.length);\n  const [subtractCount, setSubtractCount] = useState(0);\n  const [phase, setPhase] = useState<'normal' | 'measuring' | 'measuring-overflow-indicator'>(\n    'normal'\n  );\n\n  const containerRef = useRef<HTMLElement>(null);\n  const rootRef = useMergedRef(containerRef, ref);\n  const finalVisibleCount = visibleCount - subtractCount;\n  const overflowCount = data.length - finalVisibleCount;\n  const showOverflow = overflowCount > 0 && phase !== 'measuring';\n  const isCollapseStart = collapseFrom === 'start';\n  const overflowItems = isCollapseStart\n    ? data.slice(0, data.length - finalVisibleCount)\n    : data.slice(finalVisibleCount);\n  const overflowElement = showOverflow ? renderOverflow?.(overflowItems) : null;\n\n  const _overflowRef = useRef<HTMLElement>(null);\n  const overflowRef = useMergedRef(_overflowRef, (overflowElement as any)?.ref);\n  const dimensions = useDimensions(containerRef);\n  const dataKey = useMemo(() => getDataSignature(data, getItemKey), [data, getItemKey]);\n\n  useIsomorphicEffect(() => {\n    setPhase('measuring');\n    setVisibleCount(data.length);\n    setSubtractCount(0);\n  }, [dataKey, maxRows, collapseFrom]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring') {\n      countVisibleItems();\n      setPhase('measuring-overflow-indicator');\n    }\n  }, [phase]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'measuring-overflow-indicator') {\n      const updateWasNeeded = updateOverflowIndicator();\n      if (!updateWasNeeded) {\n        setPhase('normal');\n      }\n    }\n  }, [phase, subtractCount]);\n\n  useIsomorphicEffect(() => {\n    if (phase === 'normal') {\n      setPhase('measuring');\n      setSubtractCount(0);\n    }\n  }, [dimensions]);\n\n  const fitsInRows = (\n    itemWidths: number[],\n    containerWidth: number,\n    columnGap: number,\n    startIndex = 0\n  ) => {\n    let rows = 1;\n    let rowWidth = 0;\n\n    for (let i = startIndex; i < itemWidths.length; i += 1) {\n      const width = itemWidths[i];\n      const needed = rowWidth > 0 ? width + columnGap : width;\n\n      if (rowWidth + needed > containerWidth && rowWidth > 0) {\n        rows++;\n        if (rows > maxRows!) {\n          return false;\n        }\n        rowWidth = width;\n      } else {\n        rowWidth += needed;\n      }\n    }\n\n    return true;\n  };\n\n  const countVisibleItems = () => {\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    if (isCollapseStart) {\n      const containerWidth = container.getBoundingClientRect().width;\n      const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;\n      const children = rowData.children;\n      const widths = children.map((child) => child.getBoundingClientRect().width);\n\n      let count = 0;\n      for (let i = widths.length - 1; i >= 0; i--) {\n        if (!fitsInRows(widths, containerWidth, columnGap, i)) {\n          break;\n        }\n        count = widths.length - i;\n      }\n\n      count = Math.min(count, maxVisibleItems!);\n      setVisibleCount(count);\n      return;\n    }\n\n    if (data.length === 1) {\n      const itemRef = rowData.itemsSizesMap[rowData.rowPositions[0]].elements.values().next().value;\n      const containerWidth = container.getBoundingClientRect().width;\n      const itemWidth = itemRef?.getBoundingClientRect().width ?? 0;\n\n      if (itemWidth > containerWidth) {\n        setVisibleCount(0);\n      } else {\n        setVisibleCount(1);\n      }\n\n      return;\n    }\n\n    const visibleRowPositions = rowData.rowPositions.slice(0, maxRows);\n\n    let fittingCount = visibleRowPositions.reduce((acc, position) => {\n      return acc + rowData.itemsSizesMap[position].elements.size;\n    }, 0);\n\n    fittingCount = Math.min(fittingCount, maxVisibleItems);\n    setVisibleCount(fittingCount);\n  };\n\n  const updateOverflowIndicator = () => {\n    if (!_overflowRef.current) {\n      return false;\n    }\n    const rowData = getRowPositionsData(containerRef, _overflowRef);\n    if (!rowData) {\n      return false;\n    }\n\n    const { rowPositions, itemsSizesMap } = rowData;\n\n    if (isCollapseStart) {\n      const container = containerRef.current;\n      if (!container) {\n        return false;\n      }\n      const containerWidth = container.getBoundingClientRect().width;\n      const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;\n      const overflowWidth = _overflowRef.current.getBoundingClientRect().width;\n      const children = rowData.children;\n      const itemWidths = [\n        overflowWidth,\n        ...children.map((child) => child.getBoundingClientRect().width),\n      ];\n\n      if (!fitsInRows(itemWidths, containerWidth, columnGap)) {\n        setSubtractCount((c) => c + 1);\n        return true;\n      }\n\n      return false;\n    }\n\n    const overflowRect = _overflowRef.current.getBoundingClientRect();\n    const overflowMiddleY = overflowRect.top + overflowRect.height / 2;\n    const lastRowTop = rowPositions[rowPositions.length - 1];\n    const lastRow = itemsSizesMap[lastRowTop];\n\n    if (overflowMiddleY > lastRow.bottom) {\n      setSubtractCount((c) => c + 1);\n      return true;\n    }\n\n    return false;\n  };\n\n  const clonedOverflowElement = overflowElement\n    ? cloneElement(overflowElement as React.ReactElement<any>, { ref: overflowRef })\n    : null;\n\n  let finalItems = data;\n  if (maxVisibleItems) {\n    finalItems = isCollapseStart\n      ? finalItems.slice(-maxVisibleItems!)\n      : finalItems.slice(0, maxVisibleItems);\n  }\n\n  const indexOffset = isCollapseStart ? data.length - finalItems.length : 0;\n\n  return (\n    <Box ref={rootRef} {...getStyles('root')} {...others}>\n      {isCollapseStart && clonedOverflowElement}\n\n      {finalItems.map((item, index) => {\n        const isVisible =\n          phase === 'measuring' ||\n          (isCollapseStart\n            ? index >= finalItems.length - finalVisibleCount\n            : index < finalVisibleCount);\n        if (!isVisible) {\n          return null;\n        }\n        const dataIndex = indexOffset + index;\n        const itemComponent = renderItem(item, dataIndex);\n\n        return <Fragment key={dataIndex}>{itemComponent}</Fragment>;\n      })}\n\n      {!isCollapseStart && clonedOverflowElement}\n    </Box>\n  );\n});\n\nOverflowList.displayName = '@mantine/core/OverflowList';\nOverflowList.classes = classes;\nOverflowList.varsResolver = varsResolver;\n\nexport namespace OverflowList {\n  export type Props = OverflowListProps;\n  export type Factory = OverflowListFactory;\n  export type StylesNames = OverflowListStylesNames;\n  export type CssVariables = OverflowListCssVariables;\n}\n"],"mappings":"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"}

package/esm/components/Pagination/Pagination.context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.context.mjs","names":[],"sources":["../../../src/components/Pagination/Pagination.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { PaginationRootFactory } from './PaginationRoot/PaginationRoot';\n\nexport interface PaginationContextValue {\n  total: number;\n  range: (number | 'dots')[];\n  active: number;\n  disabled: boolean | undefined;\n  getItemProps?: (page: number) => Record<string, any>;\n  onChange: (page: number) => void;\n  onNext: () => void;\n  onPrevious: () => void;\n  onFirst: () => void;\n  onLast: () => void;\n  getStyles: GetStylesApi<PaginationRootFactory>;\n}\n\nexport const [PaginationProvider, usePaginationContext] = createSafeContext<PaginationContextValue>(\n  'Pagination.Root component was not found in tree'\n);\n"],"mappings":";;;AAiBA,MAAa,CAAC,oBAAoB,wBAAwB,kBACxD,iDACF"}
+{"version":3,"file":"Pagination.context.mjs","names":[],"sources":["../../../src/components/Pagination/Pagination.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { PaginationRootFactory } from './PaginationRoot/PaginationRoot';\n\nexport interface PaginationContextValue {\n  total: number;\n  range: (number | 'dots')[];\n  active: number;\n  disabled: boolean | undefined;\n  layout?: 'default' | 'responsive';\n  getItemProps?: (page: number) => Record<string, any>;\n  onChange: (page: number) => void;\n  onNext: () => void;\n  onPrevious: () => void;\n  onFirst: () => void;\n  onLast: () => void;\n  getStyles: GetStylesApi<PaginationRootFactory>;\n}\n\nexport const [PaginationProvider, usePaginationContext] = createSafeContext<PaginationContextValue>(\n  'Pagination.Root component was not found in tree'\n);\n"],"mappings":";;;AAkBA,MAAa,CAAC,oBAAoB,wBAAwB,kBACxD,iDACF"}

package/esm/components/Pagination/Pagination.mjs

@@ -1,14 +1,17 @@
 "use client";
 import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
 import { factory } from "../../core/factory/factory.mjs";
+import { Box } from "../../core/Box/Box.mjs";
 import { Group } from "../Group/Group.mjs";
+import { usePaginationContext } from "./Pagination.context.mjs";
 import Pagination_module_default from "./Pagination.module.mjs";
 import { PaginationControl } from "./PaginationControl/PaginationControl.mjs";
 import { PaginationDots } from "./PaginationDots/PaginationDots.mjs";
 import { PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious } from "./PaginationEdges/PaginationEdges.mjs";
 import { PaginationItems } from "./PaginationItems/PaginationItems.mjs";
+import { PaginationLabel } from "./PaginationLabel/PaginationLabel.mjs";
 import { PaginationRoot } from "./PaginationRoot/PaginationRoot.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Pagination/Pagination.tsx
 const defaultProps = {
 	withControls: true,
@@ -17,11 +20,19 @@ const defaultProps = {
 	boundaries: 1,
 	gap: 8
 };
+function PaginationItemsGroup({ children }) {
+	return /* @__PURE__ */ jsx(Box, {
+		...usePaginationContext().getStyles("items"),
+		children
+	});
+}
 const Pagination = factory((_props) => {
-	const { withEdges, withControls, getControlProps, nextIcon, previousIcon, lastIcon, firstIcon, dotsIcon, total, gap, hideWithOnePage, withPages, ...others } = useProps("Pagination", defaultProps, _props);
+	const { withEdges, withControls, getControlProps, nextIcon, previousIcon, lastIcon, firstIcon, dotsIcon, total, gap, hideWithOnePage, withPages, layout, formatLabel, ...others } = useProps("Pagination", defaultProps, _props);
 	if (total <= 0 || hideWithOnePage && total === 1) return null;
+	const pagesContent = withPages ? layout === "responsive" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PaginationItemsGroup, { children: /* @__PURE__ */ jsx(PaginationItems, { dotsIcon }) }), /* @__PURE__ */ jsx(PaginationLabel, { formatLabel })] }) : /* @__PURE__ */ jsx(PaginationItems, { dotsIcon }) : null;
 	return /* @__PURE__ */ jsx(PaginationRoot, {
 		total,
+		layout,
 		...others,
 		children: /* @__PURE__ */ jsxs(Group, {
 			gap,
@@ -34,7 +45,7 @@ const Pagination = factory((_props) => {
 					icon: previousIcon,
 					...getControlProps?.("previous")
 				}),
-				withPages && /* @__PURE__ */ jsx(PaginationItems, { dotsIcon }),
+				pagesContent,
 				withControls && /* @__PURE__ */ jsx(PaginationNext, {
 					icon: nextIcon,
 					...getControlProps?.("next")
@@ -57,6 +68,7 @@ Pagination.Last = PaginationLast;
 Pagination.Next = PaginationNext;
 Pagination.Previous = PaginationPrevious;
 Pagination.Items = PaginationItems;
+Pagination.Label = PaginationLabel;
 //#endregion
 export { Pagination };
 

package/esm/components/Pagination/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.mjs","names":["classes"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { factory, Factory, MantineSpacing, useProps } from '../../core';\nimport { Group } from '../Group/Group';\nimport { PaginationIcon } from './Pagination.icons';\nimport {\n  PaginationControl,\n  type PaginationControlProps,\n} from './PaginationControl/PaginationControl';\nimport { PaginationDots, type PaginationDotsProps } from './PaginationDots/PaginationDots';\nimport {\n  PaginationFirst,\n  PaginationLast,\n  PaginationNext,\n  PaginationPrevious,\n  type PaginationEdgeProps,\n} from './PaginationEdges/PaginationEdges';\nimport { PaginationItems, type PaginationItemsProps } from './PaginationItems/PaginationItems';\nimport {\n  PaginationRoot,\n  PaginationRootCssVariables,\n  PaginationRootProps,\n  PaginationRootStylesNames,\n} from './PaginationRoot/PaginationRoot';\nimport classes from './Pagination.module.css';\nexport type PaginationStylesNames = PaginationRootStylesNames;\nexport type PaginationCssVariables = PaginationRootCssVariables;\n\nexport interface PaginationProps extends PaginationRootProps {\n  /** If set, first/last controls are displayed @default false */\n  withEdges?: boolean;\n\n  /** If set, next/previous controls are displayed @default true */\n  withControls?: boolean;\n\n  /** Props passed down to next/previous/first/last controls */\n  getControlProps?: (control: 'first' | 'previous' | 'last' | 'next') => Record<string, any>;\n\n  /** Next control icon component */\n  nextIcon?: PaginationIcon;\n\n  /** Previous control icon component */\n  previousIcon?: PaginationIcon;\n\n  /** Last control icon component */\n  lastIcon?: PaginationIcon;\n\n  /** First control icon component */\n  firstIcon?: PaginationIcon;\n\n  /** Dots icon component */\n  dotsIcon?: PaginationIcon;\n\n  /** Key of `theme.spacing`, gap between controls @default 8 */\n  gap?: MantineSpacing;\n\n  /** If set, the pagination is hidden when only one page is available (`total={1}`) @default false */\n  hideWithOnePage?: boolean;\n\n  /** If set to `false`, page number buttons are hidden, only next/previous controls remain @default `true` */\n  withPages?: boolean;\n}\n\nexport type PaginationFactory = Factory<{\n  props: PaginationProps;\n  ref: HTMLDivElement;\n  stylesNames: PaginationStylesNames;\n  vars: PaginationCssVariables;\n  staticComponents: {\n    Root: typeof PaginationRoot;\n    Control: typeof PaginationControl;\n    Dots: typeof PaginationDots;\n    First: typeof PaginationFirst;\n    Last: typeof PaginationLast;\n    Next: typeof PaginationNext;\n    Previous: typeof PaginationPrevious;\n    Items: typeof PaginationItems;\n  };\n}>;\n\nconst defaultProps = {\n  withControls: true,\n  withPages: true,\n  siblings: 1,\n  boundaries: 1,\n  gap: 8,\n} satisfies Partial<PaginationProps>;\n\nexport const Pagination = factory<PaginationFactory>((_props) => {\n  const props = useProps('Pagination', defaultProps, _props);\n  const {\n    withEdges,\n    withControls,\n    getControlProps,\n    nextIcon,\n    previousIcon,\n    lastIcon,\n    firstIcon,\n    dotsIcon,\n    total,\n    gap,\n    hideWithOnePage,\n    withPages,\n    ...others\n  } = props;\n\n  if (total <= 0 || (hideWithOnePage && total === 1)) {\n    return null;\n  }\n\n  return (\n    <PaginationRoot total={total} {...others}>\n      <Group gap={gap}>\n        {withEdges && <PaginationFirst icon={firstIcon} {...getControlProps?.('first')} />}\n        {withControls && (\n          <PaginationPrevious icon={previousIcon} {...getControlProps?.('previous')} />\n        )}\n        {withPages && <PaginationItems dotsIcon={dotsIcon} />}\n        {withControls && <PaginationNext icon={nextIcon} {...getControlProps?.('next')} />}\n        {withEdges && <PaginationLast icon={lastIcon} {...getControlProps?.('last')} />}\n      </Group>\n    </PaginationRoot>\n  );\n});\n\nPagination.classes = classes;\nPagination.displayName = '@mantine/core/Pagination';\nPagination.Root = PaginationRoot;\nPagination.Control = PaginationControl;\nPagination.Dots = PaginationDots;\nPagination.First = PaginationFirst;\nPagination.Last = PaginationLast;\nPagination.Next = PaginationNext;\nPagination.Previous = PaginationPrevious;\nPagination.Items = PaginationItems;\n\nexport namespace Pagination {\n  export type Props = PaginationProps;\n  export type StylesNames = PaginationStylesNames;\n  export type CssVariables = PaginationCssVariables;\n  export type Factory = PaginationFactory;\n\n  export namespace Root {\n    export type Props = PaginationRootProps;\n  }\n\n  export namespace Control {\n    export type Props = PaginationControlProps;\n  }\n\n  export namespace Dots {\n    export type Props = PaginationDotsProps;\n  }\n\n  export namespace Edge {\n    export type Props = PaginationEdgeProps;\n  }\n\n  export namespace Items {\n    export type Props = PaginationItemsProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;AA8EA,MAAM,eAAe;CACnB,cAAc;CACd,WAAW;CACX,UAAU;CACV,YAAY;CACZ,KAAK;AACP;AAEA,MAAa,aAAa,SAA4B,WAAW;CAE/D,MAAM,EACJ,WACA,cACA,iBACA,UACA,cACA,UACA,WACA,UACA,OACA,KACA,iBACA,WACA,GAAG,WAdS,SAAS,cAAc,cAAc,MAe3C;CAER,IAAI,SAAS,KAAM,mBAAmB,UAAU,GAC9C,OAAO;CAGT,OACE,oBAAC,gBAAD;EAAuB;EAAO,GAAI;YAChC,qBAAC,OAAD;GAAY;aAAZ;IACG,aAAa,oBAAC,iBAAD;KAAiB,MAAM;KAAW,GAAI,kBAAkB,OAAO;IAAI,CAAA;IAChF,gBACC,oBAAC,oBAAD;KAAoB,MAAM;KAAc,GAAI,kBAAkB,UAAU;IAAI,CAAA;IAE7E,aAAa,oBAAC,iBAAD,EAA2B,SAAW,CAAA;IACnD,gBAAgB,oBAAC,gBAAD;KAAgB,MAAM;KAAU,GAAI,kBAAkB,MAAM;IAAI,CAAA;IAChF,aAAa,oBAAC,gBAAD;KAAgB,MAAM;KAAU,GAAI,kBAAkB,MAAM;IAAI,CAAA;GACzE;;CACO,CAAA;AAEpB,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,cAAc;AACzB,WAAW,OAAO;AAClB,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,QAAQ;AACnB,WAAW,OAAO;AAClB,WAAW,OAAO;AAClB,WAAW,WAAW;AACtB,WAAW,QAAQ"}
+{"version":3,"file":"Pagination.mjs","names":["classes"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { Box, factory, Factory, MantineSpacing, useProps } from '../../core';\nimport { Group } from '../Group/Group';\nimport { usePaginationContext } from './Pagination.context';\nimport { PaginationIcon } from './Pagination.icons';\nimport {\n  PaginationControl,\n  type PaginationControlProps,\n} from './PaginationControl/PaginationControl';\nimport { PaginationDots, type PaginationDotsProps } from './PaginationDots/PaginationDots';\nimport {\n  PaginationFirst,\n  PaginationLast,\n  PaginationNext,\n  PaginationPrevious,\n  type PaginationEdgeProps,\n} from './PaginationEdges/PaginationEdges';\nimport { PaginationItems, type PaginationItemsProps } from './PaginationItems/PaginationItems';\nimport {\n  PaginationFormatLabel,\n  PaginationLabel,\n  type PaginationLabelProps,\n} from './PaginationLabel/PaginationLabel';\nimport {\n  PaginationRoot,\n  PaginationRootCssVariables,\n  PaginationRootProps,\n  PaginationRootStylesNames,\n} from './PaginationRoot/PaginationRoot';\nimport classes from './Pagination.module.css';\nexport type PaginationStylesNames = PaginationRootStylesNames;\nexport type PaginationCssVariables = PaginationRootCssVariables;\n\nexport interface PaginationProps extends PaginationRootProps {\n  /** If set, first/last controls are displayed @default false */\n  withEdges?: boolean;\n\n  /** If set, next/previous controls are displayed @default true */\n  withControls?: boolean;\n\n  /** Props passed down to next/previous/first/last controls */\n  getControlProps?: (control: 'first' | 'previous' | 'last' | 'next') => Record<string, any>;\n\n  /** Next control icon component */\n  nextIcon?: PaginationIcon;\n\n  /** Previous control icon component */\n  previousIcon?: PaginationIcon;\n\n  /** Last control icon component */\n  lastIcon?: PaginationIcon;\n\n  /** First control icon component */\n  firstIcon?: PaginationIcon;\n\n  /** Dots icon component */\n  dotsIcon?: PaginationIcon;\n\n  /** Key of `theme.spacing`, gap between controls @default 8 */\n  gap?: MantineSpacing;\n\n  /** If set, the pagination is hidden when only one page is available (`total={1}`) @default false */\n  hideWithOnePage?: boolean;\n\n  /** If set to `false`, page number buttons are hidden, only next/previous controls remain @default `true` */\n  withPages?: boolean;\n\n  /** Function to format the label text displayed in responsive mode */\n  formatLabel?: PaginationFormatLabel;\n}\n\nexport type PaginationFactory = Factory<{\n  props: PaginationProps;\n  ref: HTMLDivElement;\n  stylesNames: PaginationStylesNames;\n  vars: PaginationCssVariables;\n  staticComponents: {\n    Root: typeof PaginationRoot;\n    Control: typeof PaginationControl;\n    Dots: typeof PaginationDots;\n    First: typeof PaginationFirst;\n    Last: typeof PaginationLast;\n    Next: typeof PaginationNext;\n    Previous: typeof PaginationPrevious;\n    Items: typeof PaginationItems;\n    Label: typeof PaginationLabel;\n  };\n}>;\n\nconst defaultProps = {\n  withControls: true,\n  withPages: true,\n  siblings: 1,\n  boundaries: 1,\n  gap: 8,\n} satisfies Partial<PaginationProps>;\n\ninterface PaginationItemsGroupProps {\n  children: React.ReactNode;\n}\n\nfunction PaginationItemsGroup({ children }: PaginationItemsGroupProps) {\n  const ctx = usePaginationContext();\n  return <Box {...ctx.getStyles('items')}>{children}</Box>;\n}\n\nexport const Pagination = factory<PaginationFactory>((_props) => {\n  const props = useProps('Pagination', defaultProps, _props);\n  const {\n    withEdges,\n    withControls,\n    getControlProps,\n    nextIcon,\n    previousIcon,\n    lastIcon,\n    firstIcon,\n    dotsIcon,\n    total,\n    gap,\n    hideWithOnePage,\n    withPages,\n    layout,\n    formatLabel,\n    ...others\n  } = props;\n\n  if (total <= 0 || (hideWithOnePage && total === 1)) {\n    return null;\n  }\n\n  const isResponsive = layout === 'responsive';\n\n  const pagesContent = withPages ? (\n    isResponsive ? (\n      <>\n        <PaginationItemsGroup>\n          <PaginationItems dotsIcon={dotsIcon} />\n        </PaginationItemsGroup>\n        <PaginationLabel formatLabel={formatLabel} />\n      </>\n    ) : (\n      <PaginationItems dotsIcon={dotsIcon} />\n    )\n  ) : null;\n\n  return (\n    <PaginationRoot total={total} layout={layout} {...others}>\n      <Group gap={gap}>\n        {withEdges && <PaginationFirst icon={firstIcon} {...getControlProps?.('first')} />}\n        {withControls && (\n          <PaginationPrevious icon={previousIcon} {...getControlProps?.('previous')} />\n        )}\n        {pagesContent}\n        {withControls && <PaginationNext icon={nextIcon} {...getControlProps?.('next')} />}\n        {withEdges && <PaginationLast icon={lastIcon} {...getControlProps?.('last')} />}\n      </Group>\n    </PaginationRoot>\n  );\n});\n\nPagination.classes = classes;\nPagination.displayName = '@mantine/core/Pagination';\nPagination.Root = PaginationRoot;\nPagination.Control = PaginationControl;\nPagination.Dots = PaginationDots;\nPagination.First = PaginationFirst;\nPagination.Last = PaginationLast;\nPagination.Next = PaginationNext;\nPagination.Previous = PaginationPrevious;\nPagination.Items = PaginationItems;\nPagination.Label = PaginationLabel;\n\nexport namespace Pagination {\n  export type Props = PaginationProps;\n  export type StylesNames = PaginationStylesNames;\n  export type CssVariables = PaginationCssVariables;\n  export type Factory = PaginationFactory;\n\n  export namespace Root {\n    export type Props = PaginationRootProps;\n  }\n\n  export namespace Control {\n    export type Props = PaginationControlProps;\n  }\n\n  export namespace Dots {\n    export type Props = PaginationDotsProps;\n  }\n\n  export namespace Edge {\n    export type Props = PaginationEdgeProps;\n  }\n\n  export namespace Items {\n    export type Props = PaginationItemsProps;\n  }\n\n  export namespace Label {\n    export type Props = PaginationLabelProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAwFA,MAAM,eAAe;CACnB,cAAc;CACd,WAAW;CACX,UAAU;CACV,YAAY;CACZ,KAAK;AACP;AAMA,SAAS,qBAAqB,EAAE,YAAuC;CAErE,OAAO,oBAAC,KAAD;EAAK,GADA,qBACM,EAAE,UAAU,OAAO;EAAI;CAAc,CAAA;AACzD;AAEA,MAAa,aAAa,SAA4B,WAAW;CAE/D,MAAM,EACJ,WACA,cACA,iBACA,UACA,cACA,UACA,WACA,UACA,OACA,KACA,iBACA,WACA,QACA,aACA,GAAG,WAhBS,SAAS,cAAc,cAAc,MAiB3C;CAER,IAAI,SAAS,KAAM,mBAAmB,UAAU,GAC9C,OAAO;CAKT,MAAM,eAAe,YAFA,WAAW,eAI5B,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,sBAAD,EAAA,UACE,oBAAC,iBAAD,EAA2B,SAAW,CAAA,EAClB,CAAA,GACtB,oBAAC,iBAAD,EAA8B,YAAc,CAAA,CAC5C,EAAA,CAAA,IAEF,oBAAC,iBAAD,EAA2B,SAAW,CAAA,IAEtC;CAEJ,OACE,oBAAC,gBAAD;EAAuB;EAAe;EAAQ,GAAI;YAChD,qBAAC,OAAD;GAAY;aAAZ;IACG,aAAa,oBAAC,iBAAD;KAAiB,MAAM;KAAW,GAAI,kBAAkB,OAAO;IAAI,CAAA;IAChF,gBACC,oBAAC,oBAAD;KAAoB,MAAM;KAAc,GAAI,kBAAkB,UAAU;IAAI,CAAA;IAE7E;IACA,gBAAgB,oBAAC,gBAAD;KAAgB,MAAM;KAAU,GAAI,kBAAkB,MAAM;IAAI,CAAA;IAChF,aAAa,oBAAC,gBAAD;KAAgB,MAAM;KAAU,GAAI,kBAAkB,MAAM;IAAI,CAAA;GACzE;;CACO,CAAA;AAEpB,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,cAAc;AACzB,WAAW,OAAO;AAClB,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,QAAQ;AACnB,WAAW,OAAO;AAClB,WAAW,OAAO;AAClB,WAAW,WAAW;AACtB,WAAW,QAAQ;AACnB,WAAW,QAAQ"}

package/esm/components/Pagination/Pagination.module.mjs

@@ -3,7 +3,9 @@
 var Pagination_module_default = {
 	"root": "m_4addd315",
 	"control": "m_326d024a",
-	"dots": "m_4ad7767d"
+	"dots": "m_4ad7767d",
+	"items": "m_105fdbed",
+	"label": "m_10817321"
 };
 //#endregion
 export { Pagination_module_default as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.module.mjs","names":[],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".root {\n  --pagination-control-size-xs: 22px;\n  --pagination-control-size-sm: 26px;\n  --pagination-control-size-md: 32px;\n  --pagination-control-size-lg: 38px;\n  --pagination-control-size-xl: 44px;\n\n  --pagination-control-size-input-xs: 30px;\n  --pagination-control-size-input-sm: 36px;\n  --pagination-control-size-input-md: 42px;\n  --pagination-control-size-input-lg: 50px;\n  --pagination-control-size-input-xl: 60px;\n\n  --pagination-control-size: var(--pagination-control-size-md);\n  --pagination-control-fz: var(--mantine-font-size-md);\n  --pagination-active-bg: var(--mantine-primary-color-filled);\n}\n\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid;\n  cursor: pointer;\n  color: var(--mantine-color-text);\n  height: var(--pagination-control-size);\n  min-width: var(--pagination-control-size);\n  font-size: var(--pagination-control-fz);\n  line-height: 1;\n  border-radius: var(--pagination-control-radius, var(--mantine-radius-default));\n\n  &:where([data-with-padding]) {\n    padding: calc(var(--pagination-control-size) / 4);\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-4);\n    background-color: var(--mantine-color-white);\n\n    @mixin hover {\n      &:where(:not(:disabled, [data-disabled])) {\n        background-color: var(--mantine-color-gray-0);\n      }\n    }\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n    background-color: var(--mantine-color-dark-6);\n\n    @mixin hover {\n      &:where(:not(:disabled, [data-disabled])) {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--pagination-active-bg);\n    border-color: var(--pagination-active-bg);\n    color: var(--pagination-active-color, var(--mantine-color-white));\n\n    @mixin hover {\n      background-color: var(--pagination-active-bg);\n    }\n  }\n}\n\n.dots {\n  height: var(--pagination-control-size);\n  min-width: var(--pagination-control-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n"],"mappings":""}
+{"version":3,"file":"Pagination.module.mjs","names":[],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".root {\n  --pagination-control-size-xs: 22px;\n  --pagination-control-size-sm: 26px;\n  --pagination-control-size-md: 32px;\n  --pagination-control-size-lg: 38px;\n  --pagination-control-size-xl: 44px;\n\n  --pagination-control-size-input-xs: 30px;\n  --pagination-control-size-input-sm: 36px;\n  --pagination-control-size-input-md: 42px;\n  --pagination-control-size-input-lg: 50px;\n  --pagination-control-size-input-xl: 60px;\n\n  --pagination-control-size: var(--pagination-control-size-md);\n  --pagination-control-fz: var(--mantine-font-size-md);\n  --pagination-active-bg: var(--mantine-primary-color-filled);\n\n  &:where([data-layout='responsive']) {\n    container-type: inline-size;\n  }\n}\n\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid;\n  cursor: pointer;\n  color: var(--mantine-color-text);\n  height: var(--pagination-control-size);\n  min-width: var(--pagination-control-size);\n  font-size: var(--pagination-control-fz);\n  line-height: 1;\n  border-radius: var(--pagination-control-radius, var(--mantine-radius-default));\n\n  &:where([data-with-padding]) {\n    padding: calc(var(--pagination-control-size) / 4);\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-4);\n    background-color: var(--mantine-color-white);\n\n    @mixin hover {\n      &:where(:not(:disabled, [data-disabled])) {\n        background-color: var(--mantine-color-gray-0);\n      }\n    }\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n    background-color: var(--mantine-color-dark-6);\n\n    @mixin hover {\n      &:where(:not(:disabled, [data-disabled])) {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--pagination-active-bg);\n    border-color: var(--pagination-active-bg);\n    color: var(--pagination-active-color, var(--mantine-color-white));\n\n    @mixin hover {\n      background-color: var(--pagination-active-bg);\n    }\n  }\n}\n\n.dots {\n  height: var(--pagination-control-size);\n  min-width: var(--pagination-control-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.items {\n  display: flex;\n  gap: inherit;\n  align-items: center;\n\n  @container (width <= 400px) {\n    display: none;\n  }\n}\n\n.label {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  height: var(--pagination-control-size);\n  font-size: var(--pagination-control-fz);\n  white-space: nowrap;\n\n  @container (width <= 400px) {\n    display: flex;\n  }\n}\n"],"mappings":""}

package/esm/components/Pagination/PaginationLabel/PaginationLabel.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { usePaginationContext } from "../Pagination.context.mjs";
+import Pagination_module_default from "../Pagination.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Pagination/PaginationLabel/PaginationLabel.tsx
+const defaultProps = { formatLabel: ({ page, totalPages }) => `Page ${page} of ${totalPages}` };
+const PaginationLabel = factory((_props) => {
+	const { classNames, className, style, styles, vars, formatLabel, ...others } = useProps("PaginationLabel", defaultProps, _props);
+	const ctx = usePaginationContext();
+	return /* @__PURE__ */ jsx(Box, {
+		...ctx.getStyles("label", {
+			className,
+			style,
+			styles,
+			classNames
+		}),
+		...others,
+		children: formatLabel({
+			page: ctx.active,
+			totalPages: ctx.total
+		})
+	});
+});
+PaginationLabel.classes = Pagination_module_default;
+PaginationLabel.displayName = "@mantine/core/PaginationLabel";
+//#endregion
+export { PaginationLabel };
+
+//# sourceMappingURL=PaginationLabel.mjs.map

package/esm/components/Pagination/PaginationLabel/PaginationLabel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationLabel.mjs","names":["classes"],"sources":["../../../../src/components/Pagination/PaginationLabel/PaginationLabel.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { usePaginationContext } from '../Pagination.context';\nimport classes from '../Pagination.module.css';\n\nexport type PaginationFormatLabel = (input: { page: number; totalPages: number }) => string;\nexport type PaginationLabelStylesNames = 'label';\n\nexport interface PaginationLabelProps\n  extends BoxProps, CompoundStylesApiProps<PaginationLabelFactory>, ElementProps<'div'> {\n  /** Function to format the label text */\n  formatLabel?: PaginationFormatLabel;\n}\n\nexport type PaginationLabelFactory = Factory<{\n  props: PaginationLabelProps;\n  ref: HTMLDivElement;\n  stylesNames: PaginationLabelStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  formatLabel: ({ page, totalPages }) => `Page ${page} of ${totalPages}`,\n} satisfies Partial<PaginationLabelProps>;\n\nexport const PaginationLabel = factory<PaginationLabelFactory>((_props) => {\n  const props = useProps('PaginationLabel', defaultProps, _props);\n  const { classNames, className, style, styles, vars, formatLabel, ...others } = props;\n  const ctx = usePaginationContext();\n\n  return (\n    <Box {...ctx.getStyles('label', { className, style, styles, classNames })} {...others}>\n      {formatLabel({ page: ctx.active, totalPages: ctx.total })}\n    </Box>\n  );\n});\n\nPaginationLabel.classes = classes;\nPaginationLabel.displayName = '@mantine/core/PaginationLabel';\n"],"mappings":";;;;;;;;AA4BA,MAAM,eAAe,EACnB,cAAc,EAAE,MAAM,iBAAiB,QAAQ,KAAK,MAAM,aAC5D;AAEA,MAAa,kBAAkB,SAAiC,WAAW;CAEzE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,aAAa,GAAG,WADtD,SAAS,mBAAmB,cAAc,MAC2B;CACnF,MAAM,MAAM,qBAAqB;CAEjC,OACE,oBAAC,KAAD;EAAK,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAO;GAAQ;EAAW,CAAC;EAAG,GAAI;YAC5E,YAAY;GAAE,MAAM,IAAI;GAAQ,YAAY,IAAI;EAAM,CAAC;CACrD,CAAA;AAET,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}

package/esm/components/Pagination/PaginationRoot/PaginationRoot.mjs

@@ -31,7 +31,7 @@ const varsResolver = createVarsResolver((theme, { size, radius, color, autoContr
 } }));
 const PaginationRoot = factory((_props) => {
 	const props = useProps("PaginationRoot", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, total, value, defaultValue, onChange, disabled, siblings, boundaries, color, radius, onNextPage, onPreviousPage, onFirstPage, onLastPage, getItemProps, autoContrast, startValue, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, total, value, defaultValue, onChange, disabled, siblings, boundaries, color, radius, onNextPage, onPreviousPage, onFirstPage, onLastPage, getItemProps, autoContrast, startValue, layout, mod, attributes, ...others } = props;
 	const getStyles = useStyles({
 		name: "Pagination",
 		classes: Pagination_module_default,
@@ -60,6 +60,7 @@ const PaginationRoot = factory((_props) => {
 			range,
 			active,
 			disabled,
+			layout,
 			getItemProps,
 			onChange: setPage,
 			onNext: createEventHandler(onNextPage, next),
@@ -70,6 +71,7 @@ const PaginationRoot = factory((_props) => {
 		},
 		children: /* @__PURE__ */ jsx(Box, {
 			...getStyles("root"),
+			mod: [{ layout }, mod],
 			...others
 		})
 	});

package/esm/components/Pagination/PaginationRoot/PaginationRoot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationRoot.mjs","names":["classes"],"sources":["../../../../src/components/Pagination/PaginationRoot/PaginationRoot.tsx"],"sourcesContent":["import { usePagination } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createEventHandler,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { PaginationProvider } from '../Pagination.context';\nimport classes from '../Pagination.module.css';\n\nexport type PaginationRootStylesNames = 'root' | 'control' | 'dots';\nexport type PaginationRootCssVariables = {\n  root:\n    | '--pagination-control-size'\n    | '--pagination-control-radius'\n    | '--pagination-control-fz'\n    | '--pagination-active-bg'\n    | '--pagination-active-color';\n};\n\nexport interface PaginationRootProps\n  extends\n    BoxProps,\n    StylesApiProps<PaginationRootFactory>,\n    ElementProps<'div', 'value' | 'onChange'> {\n  /** `height` and `min-width` of controls @default 'md' */\n  size?: MantineSize | `input-${MantineSize}` | (string & {}) | number;\n\n  /** Total number of pages, must be an integer */\n  total: number;\n\n  /** Active page for controlled component, must be an integer in [1, total] interval */\n  value?: number;\n\n  /** Active page for uncontrolled component, must be an integer in [1, total] interval */\n  defaultValue?: number;\n\n  /** Called when page changes */\n  onChange?: (value: number) => void;\n\n  /** Disables all controls, applies disabled styles */\n  disabled?: boolean;\n\n  /** Number of siblings displayed on the left/right side of the selected page @default 1 */\n  siblings?: number;\n\n  /** Number of elements visible on the left/right edges @default 1 */\n  boundaries?: number;\n\n  /** Key of `theme.colors`, active item color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Called when next page control is clicked */\n  onNextPage?: () => void;\n\n  /** Called when previous page control is clicked */\n  onPreviousPage?: () => void;\n\n  /** Called when first page control is clicked */\n  onFirstPage?: () => void;\n\n  /** Called when last page control is clicked */\n  onLastPage?: () => void;\n\n  /** Additional props passed down to controls */\n  getItemProps?: (page: number) => Record<string, any>;\n\n  /** If set, adjusts text color based on the active page background color to ensure sufficient contrast */\n  autoContrast?: boolean;\n\n  /** Starting page number, defaults to 1 */\n  startValue?: number;\n}\n\nexport type PaginationRootFactory = Factory<{\n  props: PaginationRootProps;\n  ref: HTMLDivElement;\n  stylesNames: PaginationRootStylesNames;\n  vars: PaginationRootCssVariables;\n}>;\n\nconst defaultProps = {\n  siblings: 1,\n  boundaries: 1,\n} satisfies Partial<PaginationRootProps>;\n\nconst varsResolver = createVarsResolver<PaginationRootFactory>(\n  (theme, { size, radius, color, autoContrast }) => ({\n    root: {\n      '--pagination-control-radius': radius === undefined ? undefined : getRadius(radius),\n      '--pagination-control-size': getSize(size, 'pagination-control-size'),\n      '--pagination-control-fz': getFontSize(size),\n      '--pagination-active-bg': color ? getThemeColor(color, theme) : undefined,\n      '--pagination-active-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n    },\n  })\n);\n\nexport const PaginationRoot = factory<PaginationRootFactory>((_props) => {\n  const props = useProps('PaginationRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    total,\n    value,\n    defaultValue,\n    onChange,\n    disabled,\n    siblings,\n    boundaries,\n    color,\n    radius,\n    onNextPage,\n    onPreviousPage,\n    onFirstPage,\n    onLastPage,\n    getItemProps,\n    autoContrast,\n    startValue,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<PaginationRootFactory>({\n    name: 'Pagination',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { range, setPage, next, previous, active, first, last } = usePagination({\n    page: value,\n    initialPage: defaultValue,\n    onChange,\n    total,\n    siblings,\n    boundaries,\n    startValue,\n  });\n\n  return (\n    <PaginationProvider\n      value={{\n        total,\n        range,\n        active,\n        disabled,\n        getItemProps,\n        onChange: setPage,\n        onNext: createEventHandler(onNextPage, next),\n        onPrevious: createEventHandler(onPreviousPage, previous),\n        onFirst: createEventHandler(onFirstPage, first),\n        onLast: createEventHandler(onLastPage, last),\n        getStyles,\n      }}\n    >\n      <Box {...getStyles('root')} {...others} />\n    </PaginationProvider>\n  );\n});\n\nPaginationRoot.classes = classes;\nPaginationRoot.varsResolver = varsResolver;\nPaginationRoot.displayName = '@mantine/core/PaginationRoot';\n"],"mappings":";;;;;;;;;;;;;;;;AAmGA,MAAM,eAAe;CACnB,UAAU;CACV,YAAY;AACd;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAoB,EACjD,MAAM;CACJ,+BAA+B,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClF,6BAA6B,QAAQ,MAAM,yBAAyB;CACpE,2BAA2B,YAAY,IAAI;CAC3C,0BAA0B,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;CAChE,6BAA6B,qBAAqB,cAAc,KAAK,IACjE,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,cACA,UACA,UACA,UACA,YACA,OACA,QACA,YACA,gBACA,aACA,YACA,cACA,cACA,YACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,OAAO,SAAS,MAAM,UAAU,QAAQ,OAAO,SAAS,cAAc;EAC5E,MAAM;EACN,aAAa;EACb;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,oBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,UAAU;GACV,QAAQ,mBAAmB,YAAY,IAAI;GAC3C,YAAY,mBAAmB,gBAAgB,QAAQ;GACvD,SAAS,mBAAmB,aAAa,KAAK;GAC9C,QAAQ,mBAAmB,YAAY,IAAI;GAC3C;EACF;YAEA,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,GAAI;EAAS,CAAA;CACvB,CAAA;AAExB,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,eAAe;AAC9B,eAAe,cAAc"}
+{"version":3,"file":"PaginationRoot.mjs","names":["classes"],"sources":["../../../../src/components/Pagination/PaginationRoot/PaginationRoot.tsx"],"sourcesContent":["import { usePagination } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createEventHandler,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { PaginationProvider } from '../Pagination.context';\nimport classes from '../Pagination.module.css';\n\nexport type PaginationRootStylesNames = 'root' | 'control' | 'dots' | 'items' | 'label';\nexport type PaginationRootCssVariables = {\n  root:\n    | '--pagination-control-size'\n    | '--pagination-control-radius'\n    | '--pagination-control-fz'\n    | '--pagination-active-bg'\n    | '--pagination-active-color';\n};\n\nexport interface PaginationRootProps\n  extends\n    BoxProps,\n    StylesApiProps<PaginationRootFactory>,\n    ElementProps<'div', 'value' | 'onChange'> {\n  /** `height` and `min-width` of controls @default 'md' */\n  size?: MantineSize | `input-${MantineSize}` | (string & {}) | number;\n\n  /** Total number of pages, must be an integer */\n  total: number;\n\n  /** Active page for controlled component, must be an integer in [1, total] interval */\n  value?: number;\n\n  /** Active page for uncontrolled component, must be an integer in [1, total] interval */\n  defaultValue?: number;\n\n  /** Called when page changes */\n  onChange?: (value: number) => void;\n\n  /** Disables all controls, applies disabled styles */\n  disabled?: boolean;\n\n  /** Number of siblings displayed on the left/right side of the selected page @default 1 */\n  siblings?: number;\n\n  /** Number of elements visible on the left/right edges @default 1 */\n  boundaries?: number;\n\n  /** Key of `theme.colors`, active item color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Called when next page control is clicked */\n  onNextPage?: () => void;\n\n  /** Called when previous page control is clicked */\n  onPreviousPage?: () => void;\n\n  /** Called when first page control is clicked */\n  onFirstPage?: () => void;\n\n  /** Called when last page control is clicked */\n  onLastPage?: () => void;\n\n  /** Additional props passed down to controls */\n  getItemProps?: (page: number) => Record<string, any>;\n\n  /** If set, adjusts text color based on the active page background color to ensure sufficient contrast */\n  autoContrast?: boolean;\n\n  /** Starting page number, defaults to 1 */\n  startValue?: number;\n\n  /** Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label @default 'default' */\n  layout?: 'default' | 'responsive';\n}\n\nexport type PaginationRootFactory = Factory<{\n  props: PaginationRootProps;\n  ref: HTMLDivElement;\n  stylesNames: PaginationRootStylesNames;\n  vars: PaginationRootCssVariables;\n}>;\n\nconst defaultProps = {\n  siblings: 1,\n  boundaries: 1,\n} satisfies Partial<PaginationRootProps>;\n\nconst varsResolver = createVarsResolver<PaginationRootFactory>(\n  (theme, { size, radius, color, autoContrast }) => ({\n    root: {\n      '--pagination-control-radius': radius === undefined ? undefined : getRadius(radius),\n      '--pagination-control-size': getSize(size, 'pagination-control-size'),\n      '--pagination-control-fz': getFontSize(size),\n      '--pagination-active-bg': color ? getThemeColor(color, theme) : undefined,\n      '--pagination-active-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n    },\n  })\n);\n\nexport const PaginationRoot = factory<PaginationRootFactory>((_props) => {\n  const props = useProps('PaginationRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    total,\n    value,\n    defaultValue,\n    onChange,\n    disabled,\n    siblings,\n    boundaries,\n    color,\n    radius,\n    onNextPage,\n    onPreviousPage,\n    onFirstPage,\n    onLastPage,\n    getItemProps,\n    autoContrast,\n    startValue,\n    layout,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<PaginationRootFactory>({\n    name: 'Pagination',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { range, setPage, next, previous, active, first, last } = usePagination({\n    page: value,\n    initialPage: defaultValue,\n    onChange,\n    total,\n    siblings,\n    boundaries,\n    startValue,\n  });\n\n  return (\n    <PaginationProvider\n      value={{\n        total,\n        range,\n        active,\n        disabled,\n        layout,\n        getItemProps,\n        onChange: setPage,\n        onNext: createEventHandler(onNextPage, next),\n        onPrevious: createEventHandler(onPreviousPage, previous),\n        onFirst: createEventHandler(onFirstPage, first),\n        onLast: createEventHandler(onLastPage, last),\n        getStyles,\n      }}\n    >\n      <Box {...getStyles('root')} mod={[{ layout }, mod]} {...others} />\n    </PaginationProvider>\n  );\n});\n\nPaginationRoot.classes = classes;\nPaginationRoot.varsResolver = varsResolver;\nPaginationRoot.displayName = '@mantine/core/PaginationRoot';\n"],"mappings":";;;;;;;;;;;;;;;;AAsGA,MAAM,eAAe;CACnB,UAAU;CACV,YAAY;AACd;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAoB,EACjD,MAAM;CACJ,+BAA+B,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClF,6BAA6B,QAAQ,MAAM,yBAAyB;CACpE,2BAA2B,YAAY,IAAI;CAC3C,0BAA0B,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;CAChE,6BAA6B,qBAAqB,cAAc,KAAK,IACjE,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,cACA,UACA,UACA,UACA,YACA,OACA,QACA,YACA,gBACA,aACA,YACA,cACA,cACA,YACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,OAAO,SAAS,MAAM,UAAU,QAAQ,OAAO,SAAS,cAAc;EAC5E,MAAM;EACN,aAAa;EACb;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,oBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA,UAAU;GACV,QAAQ,mBAAmB,YAAY,IAAI;GAC3C,YAAY,mBAAmB,gBAAgB,QAAQ;GACvD,SAAS,mBAAmB,aAAa,KAAK;GAC9C,QAAQ,mBAAmB,YAAY,IAAI;GAC3C;EACF;YAEA,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC,EAAE,OAAO,GAAG,GAAG;GAAG,GAAI;EAAS,CAAA;CAC/C,CAAA;AAExB,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,eAAe;AAC9B,eAAe,cAAc"}

package/esm/components/Popover/Popover.mjs

@@ -12,6 +12,7 @@ import { Overlay } from "../Overlay/Overlay.mjs";
 import { OptionalPortal } from "../Portal/OptionalPortal.mjs";
 import { Transition } from "../Transition/Transition.mjs";
 import { PopoverContextProvider } from "./Popover.context.mjs";
+import { PopoverContextMenu } from "./PopoverContextMenu/PopoverContextMenu.mjs";
 import Popover_module_default from "./Popover.module.mjs";
 import { PopoverDropdown } from "./PopoverDropdown/PopoverDropdown.mjs";
 import { PopoverTarget } from "./PopoverTarget/PopoverTarget.mjs";
@@ -44,6 +45,7 @@ const defaultProps = {
 	returnFocus: false,
 	withOverlay: false,
 	hideDetached: true,
+	preventPositionChangeWhenVisible: true,
 	clickOutsideEvents: ["mousedown", "touchstart"],
 	zIndex: getDefaultZIndex("popover"),
 	__staticSelector: "Popover",
@@ -73,8 +75,6 @@ function Popover(_props) {
 		styles,
 		props
 	});
-	const [dropdownVisible, setDropdownVisible] = useState(opened ?? defaultOpened ?? false);
-	const positionRef = useRef(position);
 	const arrowRef = useRef(null);
 	const [targetNode, setTargetNode] = useState(null);
 	const [dropdownNode, setDropdownNode] = useState(null);
@@ -96,9 +96,6 @@ function Popover(_props) {
 		onClose,
 		onDismiss,
 		strategy: floatingStrategy,
-		dropdownVisible,
-		setDropdownVisible,
-		positionRef,
 		disabled,
 		preventPositionChangeWhenVisible,
 		keepMounted
@@ -120,13 +117,11 @@ function Popover(_props) {
 	const onExited = useCallback(() => {
 		transitionProps?.onExited?.();
 		onExitTransitionEnd?.();
-		setDropdownVisible(false);
-		if (!preventPositionChangeWhenVisible) positionRef.current = position;
+		popover.resetLockedPlacement();
 	}, [
 		transitionProps?.onExited,
 		onExitTransitionEnd,
-		preventPositionChangeWhenVisible,
-		position
+		popover.resetLockedPlacement
 	]);
 	const onEntered = useCallback(() => {
 		transitionProps?.onEntered?.();
@@ -202,6 +197,7 @@ function Popover(_props) {
 }
 Popover.Target = PopoverTarget;
 Popover.Dropdown = PopoverDropdown;
+Popover.ContextMenu = PopoverContextMenu;
 Popover.varsResolver = varsResolver;
 Popover.displayName = "@mantine/core/Popover";
 Popover.extend = (input) => input;