@mantine/core 9.2.2 → 9.3.0

package/lib/components/Combobox/Combobox.types.d.ts

@@ -48,6 +48,8 @@ export interface ComboboxLikeProps<Value extends Primitive = string> {
     withScrollArea?: boolean;
     /** `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default */
     maxDropdownHeight?: number | string;
+    /** If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */
+    floatingHeight?: 'viewport';
 }
 export interface ComboboxLikeRenderOptionInput<T> {
     option: T;

package/lib/components/Combobox/OptionsDropdown/OptionsDropdown.d.ts

@@ -15,6 +15,8 @@ export interface OptionsDropdownProps {
     limit: number | undefined;
     withScrollArea: boolean | undefined;
     maxDropdownHeight: number | string | undefined;
+    /** Overrides `floatingHeight` from the `Combobox` context, used by `Combobox`-based components */
+    floatingHeight?: 'viewport';
     hidden?: boolean;
     hiddenWhenEmpty?: boolean;
     filterOptions?: boolean;
@@ -29,4 +31,4 @@ export interface OptionsDropdownProps {
     renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;
     scrollAreaProps: ScrollAreaProps | undefined;
 }
-export declare function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit, maxDropdownHeight, withScrollArea, filterOptions, withCheckIcon, withAlignedLabels, value, checkIconPosition, nothingFoundMessage, unstyled, labelId, renderOption, scrollAreaProps, 'aria-label': ariaLabel, }: OptionsDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit, maxDropdownHeight, floatingHeight, withScrollArea, filterOptions, withCheckIcon, withAlignedLabels, value, checkIconPosition, nothingFoundMessage, unstyled, labelId, renderOption, scrollAreaProps, 'aria-label': ariaLabel, }: OptionsDropdownProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/Input/Input.d.ts

@@ -12,7 +12,7 @@ export interface __BaseInputProps extends __InputWrapperProps, __InputProps {
     wrapperProps?: WrapperProps;
 }
 export type __InputStylesNames = InputStylesNames | InputWrapperStylesNames;
-export type InputStylesNames = 'input' | 'wrapper' | 'section';
+export type InputStylesNames = 'input' | 'wrapper' | 'section' | 'bottomSection';
 export type InputVariant = 'default' | 'filled' | 'unstyled';
 export type InputCssVariables = {
     wrapper: '--input-height' | '--input-fz' | '--input-radius' | '--input-left-section-width' | '--input-right-section-width' | '--input-left-section-pointer-events' | '--input-right-section-pointer-events' | '--input-padding-y' | '--input-margin-top' | '--input-margin-bottom';
@@ -64,6 +64,10 @@ export interface __InputProps {
     loading?: boolean;
     /** Position of the loading indicator @default 'right' */
     loadingPosition?: 'left' | 'right';
+    /** Content section displayed at the bottom of the input, inside the border */
+    __bottomSection?: React.ReactNode;
+    /** Props passed down to the `__bottomSection` element */
+    __bottomSectionProps?: React.ComponentProps<'div'>;
 }
 export interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {
     __staticSelector?: string;

package/lib/components/MaskInput/use-mask-input-props.d.ts

@@ -98,6 +98,8 @@ export declare function useMaskInputProps(props: MaskInputProps & {
         __defaultRightSection?: React.ReactNode;
         loading?: boolean;
         loadingPosition?: "left" | "right";
+        __bottomSection?: React.ReactNode;
+        __bottomSectionProps?: React.ComponentProps<"div">;
         unstyled?: boolean;
         variant?: (string & {}) | import("..").InputVariant | undefined;
         classNames?: Partial<Record<import("..").__InputStylesNames, string>> | ((theme: import("../..").MantineTheme, props: MaskInputProps, ctx: unknown) => Partial<Record<import("..").__InputStylesNames, string>>) | undefined;
@@ -117,6 +119,7 @@ export declare function useMaskInputProps(props: MaskInputProps & {
             error?: Record<string, any> | undefined;
             required?: Record<string, any> | undefined;
             wrapper?: Record<string, any> | undefined;
+            bottomSection?: Record<string, any> | undefined;
         } | undefined;
         form?: string | undefined | undefined;
         slot?: string | undefined | undefined;

package/lib/components/Menu/Menu.context.d.ts

@@ -17,5 +17,10 @@ export interface MenuContextValue {
     setOpenedViaClick: (value: boolean) => void;
     withInitialFocusPlaceholder: boolean | undefined;
     registerOpenSub: (closeFn: () => void) => () => void;
+    hasSearch: boolean;
+    registerSearch: () => () => void;
+    searchExitClearRef: React.RefObject<(() => void) | null>;
+    alignItemsLabels: 'all' | 'with-indicators' | 'none';
+    checkIcon: React.ReactNode;
 }
 export declare const MenuContextProvider: import("react").Context<MenuContextValue | null>, useMenuContext: () => MenuContextValue;

package/lib/components/Menu/Menu.d.ts

@@ -1,16 +1,22 @@
 import { Factory, StylesApiProps } from '../../core';
 import { __PopoverProps, PopoverStylesNames } from '../Popover';
 import { type MenuContextValue } from './Menu.context';
+import { MenuCheckboxGroup, type MenuCheckboxGroupProps } from './MenuCheckboxGroup/MenuCheckboxGroup';
+import { MenuCheckboxItem, type MenuCheckboxItemProps } from './MenuCheckboxItem/MenuCheckboxItem';
+import { MenuContextMenu, type MenuContextMenuProps } from './MenuContextMenu/MenuContextMenu';
 import { MenuDivider, type MenuDividerProps } from './MenuDivider/MenuDivider';
 import { MenuDropdown, type MenuDropdownProps } from './MenuDropdown/MenuDropdown';
 import { MenuItem, type MenuItemProps } from './MenuItem/MenuItem';
 import { MenuLabel, type MenuLabelProps } from './MenuLabel/MenuLabel';
+import { MenuRadioGroup, type MenuRadioGroupProps } from './MenuRadioGroup/MenuRadioGroup';
+import { MenuRadioItem, type MenuRadioItemProps } from './MenuRadioItem/MenuRadioItem';
+import { MenuSearch, type MenuSearchProps } from './MenuSearch/MenuSearch';
 import { MenuSub, type MenuSubProps } from './MenuSub/MenuSub';
 import { MenuTarget, type MenuTargetProps } from './MenuTarget/MenuTarget';
 import type { MenuSubDropdownProps } from './MenuSubDropdown/MenuSubDropdown';
 import type { MenuSubItemProps } from './MenuSubItem/MenuSubItem';
 import type { MenuSubTargetProps } from './MenuSubTarget/MenuSubTarget';
-export type MenuStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'label' | 'divider' | 'chevron' | PopoverStylesNames;
+export type MenuStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'itemIndicator' | 'label' | 'divider' | 'chevron' | 'search' | PopoverStylesNames;
 export type MenuFactory = Factory<{
     props: MenuProps;
     stylesNames: MenuStylesNames;
@@ -20,7 +26,13 @@ export type MenuFactory = Factory<{
         Dropdown: typeof MenuDropdown;
         Target: typeof MenuTarget;
         Divider: typeof MenuDivider;
+        Search: typeof MenuSearch;
         Sub: typeof MenuSub;
+        CheckboxItem: typeof MenuCheckboxItem;
+        CheckboxGroup: typeof MenuCheckboxGroup;
+        RadioItem: typeof MenuRadioItem;
+        RadioGroup: typeof MenuRadioGroup;
+        ContextMenu: typeof MenuContextMenu;
     };
 }>;
 export interface MenuProps extends __PopoverProps, StylesApiProps<MenuFactory> {
@@ -63,6 +75,10 @@ export interface MenuProps extends __PopoverProps, StylesApiProps<MenuFactory> {
     withInitialFocusPlaceholder?: boolean;
     /** Determines whether focus should be automatically returned to control when dropdown closes @default `true` */
     returnFocus?: boolean;
+    /** Controls how indicator slot space is reserved on menu items for label alignment. `'all'` reserves space on every `Menu.Item`, `'with-indicators'` reserves space only on `Menu.CheckboxItem` and `Menu.RadioItem`, `'none'` reserves space only on items that currently display an indicator. @default 'with-indicators' */
+    alignItemsLabels?: 'all' | 'with-indicators' | 'none';
+    /** Custom icon rendered as the indicator of checked `Menu.CheckboxItem` and selected `Menu.RadioItem`. Can be overridden per item with the `checkIcon` prop. */
+    checkIcon?: React.ReactNode;
 }
 export declare const Menu: import("../..").MantineComponent<{
     props: MenuProps;
@@ -73,7 +89,13 @@ export declare const Menu: import("../..").MantineComponent<{
         Dropdown: typeof MenuDropdown;
         Target: typeof MenuTarget;
         Divider: typeof MenuDivider;
+        Search: typeof MenuSearch;
         Sub: typeof MenuSub;
+        CheckboxItem: typeof MenuCheckboxItem;
+        CheckboxGroup: typeof MenuCheckboxGroup;
+        RadioItem: typeof MenuRadioItem;
+        RadioGroup: typeof MenuRadioGroup;
+        ContextMenu: typeof MenuContextMenu;
     };
 }>;
 export declare namespace Menu {
@@ -96,9 +118,27 @@ export declare namespace Menu {
     namespace Target {
         type Props = MenuTargetProps;
     }
+    namespace Search {
+        type Props = MenuSearchProps;
+    }
     namespace Sub {
         type Props = MenuSubProps;
     }
+    namespace CheckboxItem {
+        type Props = MenuCheckboxItemProps;
+    }
+    namespace RadioItem {
+        type Props = MenuRadioItemProps;
+    }
+    namespace RadioGroup {
+        type Props = MenuRadioGroupProps;
+    }
+    namespace CheckboxGroup {
+        type Props = MenuCheckboxGroupProps;
+    }
+    namespace ContextMenu {
+        type Props = MenuContextMenuProps;
+    }
     namespace SubDropdown {
         type Props = MenuSubDropdownProps;
     }

package/lib/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.context.d.ts

@@ -0,0 +1,5 @@
+export interface MenuCheckboxGroupContextValue {
+    values: string[];
+    onChange: (value: string) => void;
+}
+export declare const MenuCheckboxGroupContext: import("react").Context<MenuCheckboxGroupContextValue | null>;

package/lib/components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.d.ts

@@ -0,0 +1,14 @@
+export interface MenuCheckboxGroupProps {
+    /** Controlled selected values */
+    value?: string[];
+    /** Uncontrolled default selected values */
+    defaultValue?: string[];
+    /** Called with the new array of selected values when a `Menu.CheckboxItem` is toggled */
+    onChange?: (value: string[]) => void;
+    /** `Menu.CheckboxItem` components and other elements */
+    children?: React.ReactNode;
+}
+export declare function MenuCheckboxGroup(_props: MenuCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuCheckboxGroup {
+    var displayName: string;
+}

package/lib/components/Menu/MenuCheckboxItem/MenuCheckboxItem.d.ts

@@ -0,0 +1,37 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineColor } from '../../../core';
+export type MenuCheckboxItemStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'itemIndicator';
+export interface MenuCheckboxItemProps extends BoxProps, CompoundStylesApiProps<MenuCheckboxItemFactory>, ElementProps<'button', 'color' | 'onChange' | 'value'> {
+    'data-disabled'?: boolean;
+    /** Item label */
+    children?: React.ReactNode;
+    /** Key of `theme.colors` or any valid CSS color */
+    color?: MantineColor;
+    /** If set, closes the menu when this item is clicked. By default, checkbox items do not close the menu. */
+    closeMenuOnClick?: boolean;
+    /** Section displayed at the end of the label */
+    rightSection?: React.ReactNode;
+    /** Sets disabled attribute, applies disabled styles */
+    disabled?: boolean;
+    /** Value of the checkbox item. When used inside `Menu.CheckboxGroup`, determines whether the item is checked and what value is added/removed on toggle. */
+    value?: string;
+    /** Controlled checked state. Overrides selection derived from the parent `Menu.CheckboxGroup`. */
+    checked?: boolean;
+    /** Uncontrolled default checked state. Ignored when the item is used inside `Menu.CheckboxGroup`. */
+    defaultChecked?: boolean;
+    /** Called when checked state changes. Overrides `onChange` of the parent `Menu.CheckboxGroup`. */
+    onChange?: (checked: boolean) => void;
+    /** Replaces the default check icon rendered in the indicator slot when the item is checked. Overrides `checkIcon` set on `Menu`. */
+    checkIcon?: React.ReactNode;
+}
+export type MenuCheckboxItemFactory = Factory<{
+    props: MenuCheckboxItemProps;
+    ref: HTMLButtonElement;
+    stylesNames: MenuCheckboxItemStylesNames;
+    compound: true;
+}>;
+export declare const MenuCheckboxItem: import("../../..").MantineComponent<{
+    props: MenuCheckboxItemProps;
+    ref: HTMLButtonElement;
+    stylesNames: MenuCheckboxItemStylesNames;
+    compound: true;
+}>;

package/lib/components/Menu/MenuContextMenu/MenuContextMenu.d.ts

@@ -0,0 +1,10 @@
+export interface MenuContextMenuProps {
+    /** Element that opens the menu when right-clicked. Menu dropdown is positioned at the cursor. The trigger element must not call `event.preventDefault()` in its own `onContextMenu` handler, otherwise the native context menu is not suppressed. */
+    children: React.ReactNode;
+    /** If set, the right-click trigger is disabled and the browser's default context menu is shown */
+    disabled?: boolean;
+}
+export declare function MenuContextMenu(props: MenuContextMenuProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace MenuContextMenu {
+    var displayName: string;
+}

package/lib/components/Menu/MenuItem/MenuItem.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, CompoundStylesApiProps, MantineColor, PolymorphicFactory } from '../../../core';
-export type MenuItemStylesNames = 'item' | 'itemLabel' | 'itemSection';
+export type MenuItemStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'itemIndicator';
 export interface MenuItemProps extends BoxProps, CompoundStylesApiProps<MenuItemFactory> {
     'data-disabled'?: boolean;
     /** Item label */

package/lib/components/Menu/MenuRadioGroup/MenuRadioGroup.context.d.ts

@@ -0,0 +1,5 @@
+export interface MenuRadioGroupContextValue {
+    value: string | null;
+    onChange: (value: string) => void;
+}
+export declare const MenuRadioGroupContext: import("react").Context<MenuRadioGroupContextValue | null>;

package/lib/components/Menu/MenuRadioGroup/MenuRadioGroup.d.ts

@@ -0,0 +1,14 @@
+export interface MenuRadioGroupProps {
+    /** Controlled selected value */
+    value?: string | null;
+    /** Uncontrolled default selected value */
+    defaultValue?: string | null;
+    /** Called with the new value when a `Menu.RadioItem` is selected */
+    onChange?: (value: string) => void;
+    /** `Menu.RadioItem` components and other elements */
+    children?: React.ReactNode;
+}
+export declare function MenuRadioGroup(_props: MenuRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuRadioGroup {
+    var displayName: string;
+}

package/lib/components/Menu/MenuRadioItem/MenuRadioItem.d.ts

@@ -0,0 +1,35 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory, MantineColor } from '../../../core';
+export type MenuRadioItemStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'itemIndicator';
+export interface MenuRadioItemProps extends BoxProps, CompoundStylesApiProps<MenuRadioItemFactory>, ElementProps<'button', 'color' | 'onChange' | 'value'> {
+    'data-disabled'?: boolean;
+    /** Item label */
+    children?: React.ReactNode;
+    /** Key of `theme.colors` or any valid CSS color */
+    color?: MantineColor;
+    /** If set, closes the menu when this item is clicked. By default, radio items do not close the menu. */
+    closeMenuOnClick?: boolean;
+    /** Section displayed at the end of the label */
+    rightSection?: React.ReactNode;
+    /** Sets disabled attribute, applies disabled styles */
+    disabled?: boolean;
+    /** Value of the radio item. Used by the parent `Menu.RadioGroup` to determine which item is selected. */
+    value: string;
+    /** Overrides selected state determined by the parent `Menu.RadioGroup`. */
+    checked?: boolean;
+    /** Called with the item value when item is selected. Overrides `onChange` of the parent `Menu.RadioGroup`. */
+    onChange?: (value: string) => void;
+    /** Replaces the default radio indicator rendered when the item is selected. Overrides `checkIcon` set on `Menu`. */
+    checkIcon?: React.ReactNode;
+}
+export type MenuRadioItemFactory = Factory<{
+    props: MenuRadioItemProps;
+    ref: HTMLButtonElement;
+    stylesNames: MenuRadioItemStylesNames;
+    compound: true;
+}>;
+export declare const MenuRadioItem: import("../../..").MantineComponent<{
+    props: MenuRadioItemProps;
+    ref: HTMLButtonElement;
+    stylesNames: MenuRadioItemStylesNames;
+    compound: true;
+}>;

package/lib/components/Menu/MenuSearch/MenuSearch.d.ts

@@ -0,0 +1,19 @@
+import { ElementProps, Factory } from '../../../core';
+import { InputProps } from '../../Input/Input';
+export type MenuSearchStylesNames = 'search';
+export interface MenuSearchProps extends InputProps, ElementProps<'input', 'size'> {
+    /** If set, clears the search value after the menu close transition completes. Requires a controlled `value`/`onChange` pair. @default true */
+    clearSearchOnClose?: boolean;
+}
+export type MenuSearchFactory = Factory<{
+    props: MenuSearchProps;
+    ref: HTMLInputElement;
+    stylesNames: MenuSearchStylesNames;
+    compound: true;
+}>;
+export declare const MenuSearch: import("../../..").MantineComponent<{
+    props: MenuSearchProps;
+    ref: HTMLInputElement;
+    stylesNames: MenuSearchStylesNames;
+    compound: true;
+}>;

package/lib/components/Menu/MenuSelectableItem/MenuSelectableItem.d.ts

@@ -0,0 +1,20 @@
+import { MantineColor } from '../../../core';
+export interface MenuSelectableItemProps {
+    role: 'menuitemcheckbox' | 'menuitemradio';
+    checked: boolean;
+    indicator: React.ReactNode;
+    onSelect: () => void;
+    color: MantineColor | undefined;
+    closeMenuOnClick: boolean | undefined;
+    rightSection: React.ReactNode;
+    children: React.ReactNode;
+    disabled: boolean | undefined;
+    dataDisabled: boolean | undefined;
+    className: string | undefined;
+    style: any;
+    styles: any;
+    classNames: any;
+    buttonRef: React.Ref<HTMLButtonElement> | undefined;
+    others: Record<string, any>;
+}
+export declare function MenuSelectableItem({ role, checked, indicator, onSelect, color, closeMenuOnClick, rightSection, children, disabled, dataDisabled, className, style, styles, classNames, buttonRef, others, }: MenuSelectableItemProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/Menu/MenuSubItem/MenuSubItem.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, CompoundStylesApiProps, MantineColor, PolymorphicFactory } from '../../../core';
-export type MenuSubItemStylesNames = 'item' | 'itemLabel' | 'itemSection';
+export type MenuSubItemStylesNames = 'item' | 'itemLabel' | 'itemSection' | 'itemIndicator';
 export interface MenuSubItemProps extends BoxProps, CompoundStylesApiProps<MenuSubItemFactory> {
     'data-disabled'?: boolean;
     /** Item label */

package/lib/components/Menu/index.d.ts

@@ -1,9 +1,15 @@
 import type { MenuFactory, MenuProps, MenuStylesNames } from './Menu';
 import type { MenuContextValue } from './Menu.context';
+import type { MenuCheckboxGroupProps } from './MenuCheckboxGroup/MenuCheckboxGroup';
+import type { MenuCheckboxItemProps } from './MenuCheckboxItem/MenuCheckboxItem';
+import type { MenuContextMenuProps } from './MenuContextMenu/MenuContextMenu';
 import type { MenuDividerProps } from './MenuDivider/MenuDivider';
 import type { MenuDropdownProps } from './MenuDropdown/MenuDropdown';
 import type { MenuItemProps } from './MenuItem/MenuItem';
 import type { MenuLabelProps } from './MenuLabel/MenuLabel';
+import type { MenuRadioGroupProps } from './MenuRadioGroup/MenuRadioGroup';
+import type { MenuRadioItemProps } from './MenuRadioItem/MenuRadioItem';
+import type { MenuSearchProps } from './MenuSearch/MenuSearch';
 import type { MenuSubProps } from './MenuSub/MenuSub';
 import type { MenuSubDropdownProps } from './MenuSubDropdown/MenuSubDropdown';
 import type { MenuSubItemProps } from './MenuSubItem/MenuSubItem';
@@ -15,9 +21,15 @@ export { MenuItem } from './MenuItem/MenuItem';
 export { MenuLabel } from './MenuLabel/MenuLabel';
 export { MenuDropdown } from './MenuDropdown/MenuDropdown';
 export { MenuTarget } from './MenuTarget/MenuTarget';
+export { MenuSearch } from './MenuSearch/MenuSearch';
+export { MenuCheckboxItem } from './MenuCheckboxItem/MenuCheckboxItem';
+export { MenuCheckboxGroup } from './MenuCheckboxGroup/MenuCheckboxGroup';
+export { MenuRadioItem } from './MenuRadioItem/MenuRadioItem';
+export { MenuRadioGroup } from './MenuRadioGroup/MenuRadioGroup';
+export { MenuContextMenu } from './MenuContextMenu/MenuContextMenu';
 export { useMenuContext } from './Menu.context';
 export { MenuSub } from './MenuSub/MenuSub';
 export { MenuSubDropdown } from './MenuSubDropdown/MenuSubDropdown';
 export { MenuSubItem } from './MenuSubItem/MenuSubItem';
 export { MenuSubTarget } from './MenuSubTarget/MenuSubTarget';
-export type { MenuProps, MenuStylesNames, MenuFactory, MenuDividerProps, MenuItemProps, MenuLabelProps, MenuDropdownProps, MenuTargetProps, MenuContextValue, MenuSubProps, MenuSubDropdownProps, MenuSubItemProps, MenuSubTargetProps, };
+export type { MenuProps, MenuStylesNames, MenuFactory, MenuDividerProps, MenuItemProps, MenuLabelProps, MenuDropdownProps, MenuTargetProps, MenuSearchProps, MenuCheckboxItemProps, MenuCheckboxGroupProps, MenuRadioItemProps, MenuRadioGroupProps, MenuContextMenuProps, MenuContextValue, MenuSubProps, MenuSubDropdownProps, MenuSubItemProps, MenuSubTargetProps, };

package/lib/components/Menu/use-menu-type-ahead.d.ts

@@ -0,0 +1,7 @@
+interface UseMenuTypeAheadOptions {
+    enabled: boolean;
+    opened: boolean;
+    getDropdown: () => HTMLElement | null;
+}
+export declare function useMenuTypeAhead({ enabled, opened, getDropdown }: UseMenuTypeAheadOptions): (event: React.KeyboardEvent<HTMLElement>) => void;
+export {};

package/lib/components/OverflowList/OverflowList.d.ts

@@ -1,4 +1,3 @@
-import { Ref } from 'react';
 import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
 export type OverflowListStylesNames = 'root';
 export type OverflowListCssVariables = {
@@ -17,7 +16,13 @@ export interface OverflowListProps<T = any> extends BoxProps, StylesApiProps<Ove
     maxVisibleItems?: number;
     /** Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'xs' */
     gap?: MantineSpacing;
-    ref?: Ref<HTMLDivElement>;
+    /** Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items @default 'end' */
+    collapseFrom?: 'start' | 'end';
+    /** A function to resolve a unique key for each item. Used to detect when the contents of `data`
+     * change (for example when items are reordered while the length stays the same) so the
+     * visible/overflow split can be recomputed. Required to detect reordering when `data` contains
+     * objects; for primitive items (strings, numbers) the item value is used by default. */
+    getItemKey?: (item: T, index: number) => React.Key;
 }
 export type OverflowListFactory = Factory<{
     props: OverflowListProps<any>;

package/lib/components/Pagination/Pagination.context.d.ts

@@ -5,6 +5,7 @@ export interface PaginationContextValue {
     range: (number | 'dots')[];
     active: number;
     disabled: boolean | undefined;
+    layout?: 'default' | 'responsive';
     getItemProps?: (page: number) => Record<string, any>;
     onChange: (page: number) => void;
     onNext: () => void;

package/lib/components/Pagination/Pagination.d.ts

@@ -4,6 +4,7 @@ import { PaginationControl, type PaginationControlProps } from './PaginationCont
 import { PaginationDots, type PaginationDotsProps } from './PaginationDots/PaginationDots';
 import { PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious, type PaginationEdgeProps } from './PaginationEdges/PaginationEdges';
 import { PaginationItems, type PaginationItemsProps } from './PaginationItems/PaginationItems';
+import { PaginationFormatLabel, PaginationLabel, type PaginationLabelProps } from './PaginationLabel/PaginationLabel';
 import { PaginationRoot, PaginationRootCssVariables, PaginationRootProps, PaginationRootStylesNames } from './PaginationRoot/PaginationRoot';
 export type PaginationStylesNames = PaginationRootStylesNames;
 export type PaginationCssVariables = PaginationRootCssVariables;
@@ -30,6 +31,8 @@ export interface PaginationProps extends PaginationRootProps {
     hideWithOnePage?: boolean;
     /** If set to `false`, page number buttons are hidden, only next/previous controls remain @default `true` */
     withPages?: boolean;
+    /** Function to format the label text displayed in responsive mode */
+    formatLabel?: PaginationFormatLabel;
 }
 export type PaginationFactory = Factory<{
     props: PaginationProps;
@@ -45,6 +48,7 @@ export type PaginationFactory = Factory<{
         Next: typeof PaginationNext;
         Previous: typeof PaginationPrevious;
         Items: typeof PaginationItems;
+        Label: typeof PaginationLabel;
     };
 }>;
 export declare const Pagination: import("../..").MantineComponent<{
@@ -61,6 +65,7 @@ export declare const Pagination: import("../..").MantineComponent<{
         Next: typeof PaginationNext;
         Previous: typeof PaginationPrevious;
         Items: typeof PaginationItems;
+        Label: typeof PaginationLabel;
     };
 }>;
 export declare namespace Pagination {
@@ -83,4 +88,7 @@ export declare namespace Pagination {
     namespace Items {
         type Props = PaginationItemsProps;
     }
+    namespace Label {
+        type Props = PaginationLabelProps;
+    }
 }

package/lib/components/Pagination/PaginationLabel/PaginationLabel.d.ts

@@ -0,0 +1,22 @@
+import { BoxProps, CompoundStylesApiProps, ElementProps, Factory } from '../../../core';
+export type PaginationFormatLabel = (input: {
+    page: number;
+    totalPages: number;
+}) => string;
+export type PaginationLabelStylesNames = 'label';
+export interface PaginationLabelProps extends BoxProps, CompoundStylesApiProps<PaginationLabelFactory>, ElementProps<'div'> {
+    /** Function to format the label text */
+    formatLabel?: PaginationFormatLabel;
+}
+export type PaginationLabelFactory = Factory<{
+    props: PaginationLabelProps;
+    ref: HTMLDivElement;
+    stylesNames: PaginationLabelStylesNames;
+    compound: true;
+}>;
+export declare const PaginationLabel: import("../../..").MantineComponent<{
+    props: PaginationLabelProps;
+    ref: HTMLDivElement;
+    stylesNames: PaginationLabelStylesNames;
+    compound: true;
+}>;

package/lib/components/Pagination/PaginationRoot/PaginationRoot.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../../core';
-export type PaginationRootStylesNames = 'root' | 'control' | 'dots';
+export type PaginationRootStylesNames = 'root' | 'control' | 'dots' | 'items' | 'label';
 export type PaginationRootCssVariables = {
     root: '--pagination-control-size' | '--pagination-control-radius' | '--pagination-control-fz' | '--pagination-active-bg' | '--pagination-active-color';
 };
@@ -38,6 +38,8 @@ export interface PaginationRootProps extends BoxProps, StylesApiProps<Pagination
     autoContrast?: boolean;
     /** Starting page number, defaults to 1 */
     startValue?: number;
+    /** Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label @default 'default' */
+    layout?: 'default' | 'responsive';
 }
 export type PaginationRootFactory = Factory<{
     props: PaginationRootProps;

package/lib/components/Pagination/index.d.ts

@@ -4,12 +4,14 @@ import type { PaginationControlProps } from './PaginationControl/PaginationContr
 import type { PaginationDotsProps } from './PaginationDots/PaginationDots';
 import type { PaginationEdgeProps } from './PaginationEdges/PaginationEdges';
 import type { PaginationItemsProps } from './PaginationItems/PaginationItems';
+import type { PaginationFormatLabel, PaginationLabelProps } from './PaginationLabel/PaginationLabel';
 import type { PaginationRootProps } from './PaginationRoot/PaginationRoot';
 export { Pagination } from './Pagination';
 export { PaginationControl } from './PaginationControl/PaginationControl';
 export { PaginationDots } from './PaginationDots/PaginationDots';
 export { PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious, } from './PaginationEdges/PaginationEdges';
 export { PaginationItems } from './PaginationItems/PaginationItems';
+export { PaginationLabel } from './PaginationLabel/PaginationLabel';
 export { PaginationRoot } from './PaginationRoot/PaginationRoot';
 export { usePaginationContext } from './Pagination.context';
-export type { PaginationProps, PaginationStylesNames, PaginationCssVariables, PaginationFactory, PaginationRootProps, PaginationControlProps, PaginationDotsProps, PaginationEdgeProps, PaginationItemsProps, PaginationContextValue, };
+export type { PaginationProps, PaginationStylesNames, PaginationCssVariables, PaginationFactory, PaginationRootProps, PaginationControlProps, PaginationDotsProps, PaginationEdgeProps, PaginationItemsProps, PaginationLabelProps, PaginationFormatLabel, PaginationContextValue, };

package/lib/components/Popover/Popover.d.ts

@@ -5,6 +5,7 @@ import { BasePortalProps } from '../Portal';
 import { TransitionOverride } from '../Transition';
 import { PopoverContextValue } from './Popover.context';
 import { PopoverMiddlewares, PopoverWidth } from './Popover.types';
+import { PopoverContextMenu, PopoverContextMenuProps } from './PopoverContextMenu/PopoverContextMenu';
 import { PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';
 import { PopoverTargetProps } from './PopoverTarget/PopoverTarget';
 export type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';
@@ -68,7 +69,7 @@ export interface __PopoverProps {
     floatingStrategy?: FloatingStrategy;
     /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */
     hideDetached?: boolean;
-    /** Prevents popover from flipping/shifting when it the dropdown is visible */
+    /** If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. @default true */
     preventPositionChangeWhenVisible?: boolean;
 }
 export interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {
@@ -112,6 +113,7 @@ export declare namespace Popover {
         stylesNames: PopoverStylesNames;
         compound: true;
     }>;
+    var ContextMenu: typeof PopoverContextMenu;
     var varsResolver: import("../..").VarsResolver<{
         props: PopoverProps;
         stylesNames: PopoverStylesNames;
@@ -148,4 +150,7 @@ export declare namespace Popover {
     namespace Dropdown {
         type Props = PopoverDropdownProps;
     }
+    namespace ContextMenu {
+        type Props = PopoverContextMenuProps;
+    }
 }

package/lib/components/Popover/PopoverContextMenu/PopoverContextMenu.d.ts

@@ -0,0 +1,10 @@
+export interface PopoverContextMenuProps {
+    /** Element that opens the popover when right-clicked. Dropdown is positioned at the cursor. The trigger element must not call `event.preventDefault()` in its own `onContextMenu` handler, otherwise the native context menu is not suppressed. */
+    children: React.ReactNode;
+    /** If set, the right-click trigger is disabled and the browser's default context menu is shown */
+    disabled?: boolean;
+}
+export declare function PopoverContextMenu(props: PopoverContextMenuProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare namespace PopoverContextMenu {
+    var displayName: string;
+}

package/lib/components/Popover/index.d.ts

@@ -1,10 +1,12 @@
 import type { __PopoverProps, PopoverFactory, PopoverProps, PopoverStylesNames } from './Popover';
 import type { PopoverContextValue } from './Popover.context';
 import type { PopoverWidth } from './Popover.types';
+import type { PopoverContextMenuProps } from './PopoverContextMenu/PopoverContextMenu';
 import type { PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';
 import type { PopoverTargetProps } from './PopoverTarget/PopoverTarget';
 export { Popover } from './Popover';
 export { PopoverDropdown } from './PopoverDropdown/PopoverDropdown';
 export { PopoverTarget } from './PopoverTarget/PopoverTarget';
+export { PopoverContextMenu } from './PopoverContextMenu/PopoverContextMenu';
 export { usePopoverContext } from './Popover.context';
-export type { PopoverProps, __PopoverProps, PopoverFactory, PopoverStylesNames, PopoverTargetProps, PopoverDropdownProps, PopoverWidth, PopoverContextValue, };
+export type { PopoverProps, __PopoverProps, PopoverFactory, PopoverStylesNames, PopoverTargetProps, PopoverDropdownProps, PopoverContextMenuProps, PopoverWidth, PopoverContextValue, };

package/lib/components/Popover/use-popover.d.ts

@@ -15,9 +15,6 @@ interface UsePopoverOptions {
     arrowRef: React.RefObject<HTMLDivElement | null>;
     arrowOffset: number;
     strategy?: FloatingStrategy;
-    dropdownVisible: boolean;
-    setDropdownVisible: (visible: boolean) => void;
-    positionRef: React.RefObject<FloatingPosition>;
     disabled: boolean | undefined;
     preventPositionChangeWhenVisible: boolean | undefined;
     keepMounted: boolean | undefined;
@@ -65,5 +62,6 @@ export declare function usePopover(options: UsePopoverOptions): {
     opened: boolean;
     onClose: () => void;
     onToggle: () => void;
+    resetLockedPlacement: () => void;
 };
 export {};

package/lib/components/Radio/RadioIndicator/RadioIndicator.d.ts

@@ -9,7 +9,7 @@ export interface RadioIndicatorProps extends BoxProps, StylesApiProps<RadioIndic
     /** Key of theme.colors or any valid CSS color to set indicator background color in checked state @default theme.primaryColor */
     color?: MantineColor;
     /** Controls size of the component @default 'sm' */
-    size?: MantineSize | (string & {});
+    size?: MantineSize | (string & {}) | number;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
     radius?: MantineRadius;
     /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */

package/lib/components/Splitter/GripIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function GripVerticalIcon(props: React.ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
+export declare function GripHorizontalIcon(props: React.ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;