@mantine/core 7.15.3 → 7.16.0

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

@@ -4,6 +4,7 @@ export { InputDescription } from './InputDescription/InputDescription';
 export { InputError } from './InputError/InputError';
 export { InputLabel } from './InputLabel/InputLabel';
 export { InputPlaceholder } from './InputPlaceholder/InputPlaceholder';
+export { InputClearButton } from './InputClearButton/InputClearButton';
 export { useInputProps } from './use-input-props';
 export { useInputWrapperContext } from './InputWrapper.context';
 export type { __InputProps, __BaseInputProps, __InputStylesNames, InputCssVariables, InputFactory, InputProps, InputStylesNames, InputVariant, } from './Input';
@@ -12,3 +13,4 @@ export type { InputDescriptionCssVariables, InputDescriptionFactory, InputDescri
 export type { InputErrorCssVariables, InputErrorFactory, InputErrorProps, InputErrorStylesNames, } from './InputError/InputError';
 export type { InputLabelCssVariables, InputLabelFactory, InputLabelProps, InputLabelStylesNames, } from './InputLabel/InputLabel';
 export type { InputPlaceholderFactory, InputPlaceholderProps, InputPlaceholderStylesNames, } from './InputPlaceholder/InputPlaceholder';
+export type { InputClearButtonFactory, InputClearButtonProps, } from './InputClearButton/InputClearButton';

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -1,7 +1,6 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
-import { __CloseButtonProps } from '../CloseButton';
 import { ComboboxItem, ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames } from '../Combobox';
-import { __BaseInputProps, __InputStylesNames } from '../Input';
+import { __BaseInputProps, __InputStylesNames, InputClearButtonProps } from '../Input';
 import { ScrollAreaProps } from '../ScrollArea';
 export type MultiSelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
 export interface MultiSelectProps extends BoxProps, __BaseInputProps, ComboboxLikeProps, StylesApiProps<MultiSelectFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
@@ -36,7 +35,7 @@ export interface MultiSelectProps extends BoxProps, __BaseInputProps, ComboboxLi
     /** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */
     clearable?: boolean;
     /** Props passed down to the clear button */
-    clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
+    clearButtonProps?: InputClearButtonProps & ElementProps<'button'>;
     /** Props passed down to the hidden input */
     hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
     /** Divider used to separate values in the hidden input `value` attribute, `','` by default */

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

@@ -28,6 +28,8 @@ export interface PaginationProps extends PaginationRootProps {
     gap?: MantineSize | (string & {}) | number;
     /** Determines whether the pagination should be hidden when only one page is available (`total={1}`), `false` by default */
     hideWithOnePage?: boolean;
+    /** Determines whether pages controls should be displayed, `true` by default */
+    withPages?: boolean;
 }
 export type PaginationFactory = Factory<{
     props: PaginationProps;

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

@@ -1,9 +1,10 @@
-import { ExtendComponent, Factory, MantineRadius, MantineShadow, StylesApiProps } from '../../core';
+import { ElementProps, ExtendComponent, Factory, MantineRadius, MantineShadow, StylesApiProps } from '../../core';
 import { ArrowPosition, FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../Floating';
+import { OverlayProps } from '../Overlay';
 import { PortalProps } from '../Portal';
 import { TransitionOverride } from '../Transition';
 import { PopoverMiddlewares, PopoverWidth } from './Popover.types';
-export type PopoverStylesNames = 'dropdown' | 'arrow';
+export type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';
 export type PopoverCssVariables = {
     dropdown: '--popover-radius' | '--popover-shadow';
 };
@@ -34,6 +35,10 @@ export interface __PopoverProps {
     middlewares?: PopoverMiddlewares;
     /** Determines whether component should have an arrow, `false` by default */
     withArrow?: boolean;
+    /** Determines whether the overlay should be displayed when the dropdown is opened, `false` by default */
+    withOverlay?: boolean;
+    /** Props passed down to `Overlay` component */
+    overlayProps?: OverlayProps & ElementProps<'div'>;
     /** Arrow size in px, `7` by default */
     arrowSize?: number;
     /** Arrow offset in px, `5` by default */

package/lib/components/Select/Select.d.ts

@@ -1,7 +1,6 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
-import { __CloseButtonProps } from '../CloseButton';
 import { ComboboxItem, ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames } from '../Combobox';
-import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
+import { __BaseInputProps, __InputStylesNames, InputClearButtonProps, InputVariant } from '../Input';
 import { ScrollAreaProps } from '../ScrollArea';
 export type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;
 export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikeProps, StylesApiProps<SelectFactory>, ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {
@@ -32,7 +31,7 @@ export interface SelectProps extends BoxProps, __BaseInputProps, ComboboxLikePro
     /** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */
     clearable?: boolean;
     /** Props passed down to the clear button */
-    clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
+    clearButtonProps?: InputClearButtonProps & ElementProps<'button'>;
     /** Props passed down to the hidden input */
     hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
     /** A function to render content of the option, replaces the default content of the option */

package/lib/components/Slider/RangeSlider/RangeSlider.d.ts

@@ -60,6 +60,8 @@ export interface RangeSliderProps extends BoxProps, StylesApiProps<RangeSliderFa
     thumbToLabel?: string;
     /** Props passed down to the hidden input */
     hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
+    /** Determines whether the selection should be only allowed from the given marks array, `false` by default */
+    restrictToMarks?: boolean;
     /** Props passed down to thumb element based on the thumb index */
     thumbProps?: (index: 0 | 1) => React.ComponentPropsWithoutRef<'div'>;
 }

package/lib/components/TableOfContents/TableOfContents.d.ts

@@ -0,0 +1,58 @@
+import { UseScrollSpyHeadingData, UseScrollSpyOptions } from '@mantine/hooks';
+import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, MantineSize, StylesApiProps } from '../../core';
+import { UnstyledButtonProps } from '../UnstyledButton';
+export type TableOfContentsStylesNames = 'root' | 'control';
+export type TableOfContentsVariant = 'filled' | 'light' | 'none';
+export type TableOfContentsCssVariables = {
+    root: '--toc-bg' | '--toc-color' | '--toc-size' | '--toc-depth-offset' | '--toc-radius';
+};
+export interface InitialTableOfContentsData {
+    /** Heading depth, 1-6 */
+    depth: number;
+    /** Heading text content value */
+    value: string;
+    /** Heading id, must be unique, used as `key` */
+    id?: string;
+}
+export interface TableOfContentsGetControlPropsPayload {
+    /** True if the associated heading is currently the best match in the viewport */
+    active: boolean;
+    /** Data passed down from `use-scroll-spy` hook: depth, id, value */
+    data: UseScrollSpyHeadingData;
+}
+export interface TableOfContentsProps extends BoxProps, StylesApiProps<TableOfContentsFactory>, ElementProps<'div'> {
+    /** Key of `theme.colors` or any valid CSS color value, `theme.primaryColor` by default */
+    color?: MantineColor;
+    /** Controls font-size and padding of all elements, `'md'` by default */
+    size?: MantineSize | (string & {}) | number;
+    /** Determines whether text color with filled variant should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */
+    autoContrast?: boolean;
+    /** Options passed down to `use-scroll-spy` hook */
+    scrollSpyOptions?: UseScrollSpyOptions;
+    /** Data used to render content until actual values are retrieved from the DOM, empty array by default */
+    initialData?: InitialTableOfContentsData[];
+    /** A function to pass props down to controls, accepts values from `use-scroll-spy` hook as an argument and active state. */
+    getControlProps?: (payload: TableOfContentsGetControlPropsPayload) => UnstyledButtonProps & ElementProps<'button'> & Record<`data-${string}`, any>;
+    /** Minimum `depth` value that requires offset, `1` by default */
+    minDepthToOffset?: number;
+    /** Controls padding on the left side of control, multiplied by (`depth` - `minDepthToOffset`), `20px` by default  */
+    depthOffset?: number | string;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */
+    radius?: MantineRadius;
+    /** A function to reinitialize headings from `use-scroll-spy` hook */
+    reinitializeRef?: React.RefObject<() => void>;
+}
+export type TableOfContentsFactory = Factory<{
+    props: TableOfContentsProps;
+    ref: HTMLDivElement;
+    stylesNames: TableOfContentsStylesNames;
+    vars: TableOfContentsCssVariables;
+    variant: TableOfContentsVariant;
+}>;
+export declare const TableOfContents: import("../../core").MantineComponent<{
+    props: TableOfContentsProps;
+    ref: HTMLDivElement;
+    stylesNames: TableOfContentsStylesNames;
+    vars: TableOfContentsCssVariables;
+    variant: TableOfContentsVariant;
+}>;

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

@@ -0,0 +1,2 @@
+export { TableOfContents } from './TableOfContents';
+export type { TableOfContentsProps, TableOfContentsCssVariables, TableOfContentsFactory, TableOfContentsStylesNames, TableOfContentsVariant, } from './TableOfContents';

package/lib/components/TagsInput/TagsInput.d.ts

@@ -1,7 +1,6 @@
 import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
-import { __CloseButtonProps } from '../CloseButton';
 import { ComboboxLikeProps, ComboboxLikeRenderOptionInput, ComboboxLikeStylesNames, ComboboxStringData, ComboboxStringItem } from '../Combobox';
-import { __BaseInputProps, __InputStylesNames } from '../Input';
+import { __BaseInputProps, __InputStylesNames, InputClearButtonProps } from '../Input';
 import { ScrollAreaProps } from '../ScrollArea';
 export type TagsInputStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
 export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<ComboboxLikeProps, 'data'>, StylesApiProps<TagsInputFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
@@ -34,7 +33,7 @@ export interface TagsInputProps extends BoxProps, __BaseInputProps, Omit<Combobo
     /** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */
     clearable?: boolean;
     /** Props passed down to the clear button */
-    clearButtonProps?: __CloseButtonProps & ElementProps<'button'>;
+    clearButtonProps?: InputClearButtonProps & ElementProps<'button'>;
     /** Props passed down to the hidden input */
     hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
     /** Divider used to separate values in the hidden input `value` attribute, `','` by default */

package/lib/components/index.d.ts

@@ -88,6 +88,7 @@ export * from './Stack';
 export * from './Stepper';
 export * from './Switch';
 export * from './Table';
+export * from './TableOfContents';
 export * from './Tabs';
 export * from './TagsInput';
 export * from './Text';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.15.3",
+  "version": "7.16.0",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "7.15.3",
+    "@mantine/hooks": "7.16.0",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },

package/styles/Popover.css

@@ -29,3 +29,8 @@
   border: 1px solid var(--popover-border-color);
   z-index: 1;
 }
+
+.m_3d7bc908 {
+  position: fixed;
+  inset: 0;
+}

package/styles/Popover.layer.css

@@ -29,4 +29,9 @@
   border: 1px solid var(--popover-border-color);
   z-index: 1;
 }
+
+.m_3d7bc908 {
+  position: fixed;
+  inset: 0;
+}
 }

package/styles/TableOfContents.css

@@ -0,0 +1,38 @@
+.m_bcaa9990 {
+  display: flex;
+  flex-direction: column;
+  --toc-depth-offset: 0.8em;
+}
+
+.m_375a65ef {
+  display: block;
+  padding: 0.3em 0.8em;
+  font-size: var(--toc-size, var(--mantine-font-size-md));
+  border-radius: var(--toc-radius, var(--mantine-radius-default));
+  padding-left: max(calc(var(--depth-offset) * var(--toc-depth-offset)), 0.8em);
+}
+
+@media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m_375a65ef:where([data-active]) {
+    background-color: var(--toc-bg);
+    color: var(--toc-color);
+  }

package/styles/TableOfContents.layer.css

@@ -0,0 +1,39 @@
+@layer mantine {.m_bcaa9990 {
+  display: flex;
+  flex-direction: column;
+  --toc-depth-offset: 0.8em;
+}
+
+.m_375a65ef {
+  display: block;
+  padding: 0.3em 0.8em;
+  font-size: var(--toc-size, var(--mantine-font-size-md));
+  border-radius: var(--toc-radius, var(--mantine-radius-default));
+  padding-left: max(calc(var(--depth-offset) * var(--toc-depth-offset)), 0.8em);
+}
+
+@media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m_375a65ef:where([data-active]) {
+    background-color: var(--toc-bg);
+    color: var(--toc-color);
+  }
+}

package/styles.css

@@ -794,6 +794,26 @@ fieldset:disabled .mantine-active:active {
       border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
 }
 
+.m_9814e45f {
+  inset: 0;
+  position: absolute;
+  background: var(--overlay-bg, rgba(0, 0, 0, 0.6));
+  backdrop-filter: var(--overlay-filter);
+  -webkit-backdrop-filter: var(--overlay-filter);
+  border-radius: var(--overlay-radius, 0);
+  z-index: var(--overlay-z-index);
+}
+
+  .m_9814e45f:where([data-fixed]) {
+    position: fixed;
+  }
+
+  .m_9814e45f:where([data-center]) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
 .m_38a85659 {
   position: absolute;
   border: 1px solid var(--popover-border-color);
@@ -826,6 +846,11 @@ fieldset:disabled .mantine-active:active {
   z-index: 1;
 }
 
+.m_3d7bc908 {
+  position: fixed;
+  inset: 0;
+}
+
 .m_5ae2e3c {
   --loader-size-xs: calc(1.125rem * var(--mantine-scale));
   --loader-size-sm: calc(1.375rem * var(--mantine-scale));
@@ -1211,26 +1236,6 @@ fieldset:disabled .mantine-active:active {
       max-width: var(--group-child-width);
     }
 
-.m_9814e45f {
-  inset: 0;
-  position: absolute;
-  background: var(--overlay-bg, rgba(0, 0, 0, 0.6));
-  backdrop-filter: var(--overlay-filter);
-  -webkit-backdrop-filter: var(--overlay-filter);
-  border-radius: var(--overlay-radius, 0);
-  z-index: var(--overlay-z-index);
-}
-
-  .m_9814e45f:where([data-fixed]) {
-    position: fixed;
-  }
-
-  .m_9814e45f:where([data-center]) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
 .m_615af6c9 {
   line-height: 1;
   padding: 0;
@@ -6763,6 +6768,45 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   min-width: var(--table-min-width);
 }
 
+.m_bcaa9990 {
+  display: flex;
+  flex-direction: column;
+  --toc-depth-offset: 0.8em;
+}
+
+.m_375a65ef {
+  display: block;
+  padding: 0.3em 0.8em;
+  font-size: var(--toc-size, var(--mantine-font-size-md));
+  border-radius: var(--toc-radius, var(--mantine-radius-default));
+  padding-left: max(calc(var(--depth-offset) * var(--toc-depth-offset)), 0.8em);
+}
+
+@media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m_375a65ef:where([data-active]) {
+    background-color: var(--toc-bg);
+    color: var(--toc-color);
+  }
+
 .m_89d60db1 {
   display: var(--tabs-display);
   flex-direction: var(--tabs-flex-direction);

package/styles.layer.css

@@ -794,6 +794,26 @@ fieldset:disabled .mantine-active:active {
       border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-dark-4);
 }
 
+.m_9814e45f {
+  inset: 0;
+  position: absolute;
+  background: var(--overlay-bg, rgba(0, 0, 0, 0.6));
+  backdrop-filter: var(--overlay-filter);
+  -webkit-backdrop-filter: var(--overlay-filter);
+  border-radius: var(--overlay-radius, 0);
+  z-index: var(--overlay-z-index);
+}
+
+  .m_9814e45f:where([data-fixed]) {
+    position: fixed;
+  }
+
+  .m_9814e45f:where([data-center]) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
 .m_38a85659 {
   position: absolute;
   border: 1px solid var(--popover-border-color);
@@ -826,6 +846,11 @@ fieldset:disabled .mantine-active:active {
   z-index: 1;
 }
 
+.m_3d7bc908 {
+  position: fixed;
+  inset: 0;
+}
+
 .m_5ae2e3c {
   --loader-size-xs: calc(1.125rem * var(--mantine-scale));
   --loader-size-sm: calc(1.375rem * var(--mantine-scale));
@@ -1211,26 +1236,6 @@ fieldset:disabled .mantine-active:active {
       max-width: var(--group-child-width);
     }
 
-.m_9814e45f {
-  inset: 0;
-  position: absolute;
-  background: var(--overlay-bg, rgba(0, 0, 0, 0.6));
-  backdrop-filter: var(--overlay-filter);
-  -webkit-backdrop-filter: var(--overlay-filter);
-  border-radius: var(--overlay-radius, 0);
-  z-index: var(--overlay-z-index);
-}
-
-  .m_9814e45f:where([data-fixed]) {
-    position: fixed;
-  }
-
-  .m_9814e45f:where([data-center]) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
 .m_615af6c9 {
   line-height: 1;
   padding: 0;
@@ -6763,6 +6768,45 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
   min-width: var(--table-min-width);
 }
 
+.m_bcaa9990 {
+  display: flex;
+  flex-direction: column;
+  --toc-depth-offset: 0.8em;
+}
+
+.m_375a65ef {
+  display: block;
+  padding: 0.3em 0.8em;
+  font-size: var(--toc-size, var(--mantine-font-size-md));
+  border-radius: var(--toc-radius, var(--mantine-radius-default));
+  padding-left: max(calc(var(--depth-offset) * var(--toc-depth-offset)), 0.8em);
+}
+
+@media (hover: hover) {
+      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:hover):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+@media (hover: none) {
+      :where([data-mantine-color-scheme='light']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-gray-1);
+  }
+
+      :where([data-mantine-color-scheme='dark']) .m_375a65ef:where(:active):where(:not([data-variant='none'])) {
+        background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.m_375a65ef:where([data-active]) {
+    background-color: var(--toc-bg);
+    color: var(--toc-color);
+  }
+
 .m_89d60db1 {
   display: var(--tabs-display);
   flex-direction: var(--tabs-flex-direction);