@mantine/core 7.12.2 → 7.13.1

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

@@ -9,7 +9,7 @@ export interface MultiSelectProps extends BoxProps, __BaseInputProps, ComboboxLi
     value?: string[];
     /** Default value for uncontrolled component */
     defaultValue?: string[];
-    /** Called whe value changes */
+    /** Called when value changes */
     onChange?: (value: string[]) => void;
     /** Called with `value` of the removed item */
     onRemove?: (value: string) => void;

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

@@ -73,7 +73,7 @@ export interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFact
     trapFocus?: boolean;
     /** Determines whether dropdown should be closed when `Escape` key is pressed, `true` by default */
     closeOnEscape?: boolean;
-    /** id base to create accessibility connections */
+    /** Id base to create accessibility connections */
     id?: string;
     /** Determines whether dropdown and target elements should have accessible roles, `true` by default */
     withRoles?: boolean;

package/lib/components/Title/Title.d.ts

@@ -1,6 +1,6 @@
-import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
+import { BoxProps, ElementProps, Factory, MantineSize, StylesApiProps } from '../../core';
 export type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;
-export type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'];
+export type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'] | MantineSize;
 export type TitleStylesNames = 'root';
 export type TitleCssVariables = {
     root: '--title-fw' | '--title-lh' | '--title-fz' | '--title-line-clamp' | '--title-text-wrap';

package/lib/components/Title/get-title-size.d.ts

@@ -4,4 +4,4 @@ export interface GetTitleSizeResult {
     fontWeight: string;
     lineHeight: string;
 }
-export declare function getTitleSize(order: TitleOrder, size: TitleSize | undefined): GetTitleSizeResult;
+export declare function getTitleSize(order: TitleOrder, size?: TitleSize): GetTitleSizeResult;

package/lib/components/Tree/Tree.d.ts

@@ -45,7 +45,7 @@ export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, Elemen
     expandOnSpace?: boolean;
     /** Determines whether node should be selected on click, `false` by default */
     selectOnClick?: boolean;
-    /** use-tree hook instance that can be used to manipulate component state */
+    /** Use-tree hook instance that can be used to manipulate component state */
     tree?: TreeController;
     /** A function to render tree node label */
     renderNode?: RenderNode;

package/lib/core/Box/style-props/parse-style-props/parse-style-props.d.ts

@@ -1,7 +1,7 @@
 import { MantineTheme } from '../../../MantineProvider';
 import type { SystemPropData } from '../style-props-data';
 import type { StyleProp } from '../style-props.types';
-import type { SortMediaQueriesResult } from './sort-media-queries';
+import { SortMediaQueriesResult } from './sort-media-queries';
 interface ParseStylePropsOptions {
     styleProps: Record<string, StyleProp<any>>;
     theme: MantineTheme;

package/lib/core/Box/style-props/style-props.types.d.ts

@@ -1,88 +1,88 @@
 import type { MantineBreakpoint, MantineColor, MantineFontSize, MantineLineHeight, MantineSpacing } from '../../MantineProvider';
 export type StyleProp<Value> = Value | Partial<Record<MantineBreakpoint | (string & {}), Value>>;
 export interface MantineStyleProps {
-    /** margin, theme key: theme.spacing */
+    /** Margin, theme key: theme.spacing */
     m?: StyleProp<MantineSpacing>;
-    /** marginBlock, theme key: theme.spacing */
+    /** MarginBlock, theme key: theme.spacing */
     my?: StyleProp<MantineSpacing>;
-    /** marginInline, theme key: theme.spacing */
+    /** MarginInline, theme key: theme.spacing */
     mx?: StyleProp<MantineSpacing>;
-    /** marginTop, theme key: theme.spacing */
+    /** MarginTop, theme key: theme.spacing */
     mt?: StyleProp<MantineSpacing>;
-    /** marginBottom, theme key: theme.spacing */
+    /** MarginBottom, theme key: theme.spacing */
     mb?: StyleProp<MantineSpacing>;
-    /** marginInlineStart, theme key: theme.spacing */
+    /** MarginInlineStart, theme key: theme.spacing */
     ms?: StyleProp<MantineSpacing>;
-    /** marginInlineEnd, theme key: theme.spacing */
+    /** MarginInlineEnd, theme key: theme.spacing */
     me?: StyleProp<MantineSpacing>;
-    /** marginLeft, theme key: theme.spacing */
+    /** MarginLeft, theme key: theme.spacing */
     ml?: StyleProp<MantineSpacing>;
-    /** marginRight, theme key: theme.spacing */
+    /** MarginRight, theme key: theme.spacing */
     mr?: StyleProp<MantineSpacing>;
-    /** padding, theme key: theme.spacing */
+    /** Padding, theme key: theme.spacing */
     p?: StyleProp<MantineSpacing>;
-    /** paddingBlock, theme key: theme.spacing */
+    /** PaddingBlock, theme key: theme.spacing */
     py?: StyleProp<MantineSpacing>;
-    /** paddingInline, theme key: theme.spacing */
+    /** PaddingInline, theme key: theme.spacing */
     px?: StyleProp<MantineSpacing>;
-    /** paddingTop, theme key: theme.spacing */
+    /** PaddingTop, theme key: theme.spacing */
     pt?: StyleProp<MantineSpacing>;
-    /** paddingBottom, theme key: theme.spacing */
+    /** PaddingBottom, theme key: theme.spacing */
     pb?: StyleProp<MantineSpacing>;
-    /** paddingInlineStart, theme key: theme.spacing */
+    /** PaddingInlineStart, theme key: theme.spacing */
     ps?: StyleProp<MantineSpacing>;
-    /** paddingInlineEnd, theme key: theme.spacing */
+    /** PaddingInlineEnd, theme key: theme.spacing */
     pe?: StyleProp<MantineSpacing>;
-    /** paddingLeft, theme key: theme.spacing */
+    /** PaddingLeft, theme key: theme.spacing */
     pl?: StyleProp<MantineSpacing>;
-    /** paddingRight, theme key: theme.spacing */
+    /** PaddingRight, theme key: theme.spacing */
     pr?: StyleProp<MantineSpacing>;
-    /** border */
+    /** Border */
     bd?: StyleProp<React.CSSProperties['border']>;
-    /** background, theme key: theme.colors */
+    /** Background, theme key: theme.colors */
     bg?: StyleProp<MantineColor>;
-    /** color */
+    /** Color */
     c?: StyleProp<MantineColor>;
     opacity?: StyleProp<React.CSSProperties['opacity']>;
-    /** fontFamily */
+    /** FontFamily */
     ff?: StyleProp<'monospace' | 'text' | 'heading' | (string & {})>;
-    /** fontSize, theme key: theme.fontSizes */
+    /** FontSize, theme key: theme.fontSizes */
     fz?: StyleProp<MantineFontSize | `h${1 | 2 | 3 | 4 | 5 | 6}` | number | (string & {})>;
-    /** fontWeight */
+    /** FontWeight */
     fw?: StyleProp<React.CSSProperties['fontWeight']>;
-    /** letterSpacing */
+    /** LetterSpacing */
     lts?: StyleProp<React.CSSProperties['letterSpacing']>;
-    /** textAlign */
+    /** TextAlign */
     ta?: StyleProp<React.CSSProperties['textAlign']>;
-    /** lineHeight, theme key: lineHeights */
+    /** LineHeight, theme key: lineHeights */
     lh?: StyleProp<MantineLineHeight | `h${1 | 2 | 3 | 4 | 5 | 6}` | number | (string & {})>;
-    /** fontStyle */
+    /** FontStyle */
     fs?: StyleProp<React.CSSProperties['fontStyle']>;
-    /** textTransform */
+    /** TextTransform */
     tt?: StyleProp<React.CSSProperties['textTransform']>;
-    /** textDecoration */
+    /** TextDecoration */
     td?: StyleProp<React.CSSProperties['textDecoration']>;
-    /** width, theme key: theme.spacing */
+    /** Width, theme key: theme.spacing */
     w?: StyleProp<React.CSSProperties['width']>;
-    /** minWidth, theme key: theme.spacing*/
+    /** MinWidth, theme key: theme.spacing*/
     miw?: StyleProp<React.CSSProperties['minWidth']>;
-    /** maxWidth, theme key: theme.spacing */
+    /** MaxWidth, theme key: theme.spacing */
     maw?: StyleProp<React.CSSProperties['maxWidth']>;
-    /** height, theme key: theme.spacing */
+    /** Height, theme key: theme.spacing */
     h?: StyleProp<React.CSSProperties['height']>;
-    /** minHeight, theme key: theme.spacing */
+    /** MinHeight, theme key: theme.spacing */
     mih?: StyleProp<React.CSSProperties['minHeight']>;
-    /** maxHeight, theme key: theme.spacing */
+    /** MaxHeight, theme key: theme.spacing */
     mah?: StyleProp<React.CSSProperties['maxHeight']>;
-    /** backgroundSize */
+    /** BackgroundSize */
     bgsz?: StyleProp<React.CSSProperties['backgroundSize']>;
-    /** backgroundPosition */
+    /** BackgroundPosition */
     bgp?: StyleProp<React.CSSProperties['backgroundPosition']>;
-    /** backgroundRepeat */
+    /** BackgroundRepeat */
     bgr?: StyleProp<React.CSSProperties['backgroundRepeat']>;
-    /** backgroundAttachment */
+    /** BackgroundAttachment */
     bga?: StyleProp<React.CSSProperties['backgroundAttachment']>;
-    /** position */
+    /** Position */
     pos?: StyleProp<React.CSSProperties['position']>;
     top?: StyleProp<React.CSSProperties['top']>;
     left?: StyleProp<React.CSSProperties['left']>;

package/lib/core/MantineProvider/theme.types.d.ts

@@ -7,7 +7,7 @@ export interface MantineTheme {
      *  - `never` – focus ring is always hidden (not recommended)
      */
     focusRing: 'auto' | 'always' | 'never';
-    /** rem units scale, change if you customize font-size of `<html />` element
+    /** Rem units scale, change if you customize font-size of `<html />` element
      *  default value is `1` (for `100%`/`16px` font-size on `<html />`)
      */
     scale: number;
@@ -49,7 +49,7 @@ export interface MantineTheme {
      *  Default value is `0.3`
      * */
     luminanceThreshold: number;
-    /** font-family used in all components, system fonts by default */
+    /** Font-family used in all components, system fonts by default */
     fontFamily: string;
     /** Monospace font-family, used in code and other similar components, system fonts by default  */
     fontFamilyMonospace: string;

package/lib/core/utils/get-breakpoint-value/get-breakpoint-value.d.ts

@@ -1,2 +1,3 @@
-import type { MantineTheme } from '../../MantineProvider';
-export declare function getBreakpointValue(breakpoint: number | string, theme: MantineTheme): number;
+import type { MantineBreakpoint } from '../../MantineProvider';
+export type BreakpointsSource = Record<MantineBreakpoint, number | string>;
+export declare function getBreakpointValue(breakpoint: number | string, breakpoints: BreakpointsSource): number;

package/lib/core/utils/get-sorted-breakpoints/get-sorted-breakpoints.d.ts

@@ -1,5 +1,5 @@
-import type { MantineTheme } from '../../MantineProvider';
-export declare function getSortedBreakpoints(breakpoints: string[], theme: MantineTheme): {
+import { BreakpointsSource } from '../get-breakpoint-value/get-breakpoint-value';
+export declare function getSortedBreakpoints(values: string[], breakpoints: BreakpointsSource): {
     value: string;
     px: number;
 }[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "7.12.2",
+  "version": "7.13.1",
   "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.12.2",
+    "@mantine/hooks": "7.13.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -57,6 +57,6 @@
   },
   "devDependencies": {
     "@mantine-tests/core": "1.1.0",
-    "@mantine/hooks": "7.12.2"
+    "@mantine/hooks": "7.13.1"
   }
 }

package/styles/Breadcrumbs.css

@@ -1,6 +1,7 @@
 .m_8b3717df {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .m_f678d540 {

package/styles/Breadcrumbs.layer.css

@@ -1,6 +1,7 @@
 @layer mantine {.m_8b3717df {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .m_f678d540 {

package/styles/Grid.css

@@ -1,3 +1,7 @@
+.m_8478a6da {
+  container: mantine-grid / inline-size;
+}
+
 .m_410352e9 {
   --grid-overflow: visible;
   --grid-margin: calc(var(--grid-gutter) / -2);

package/styles/Grid.layer.css

@@ -1,4 +1,8 @@
-@layer mantine {.m_410352e9 {
+@layer mantine {.m_8478a6da {
+  container: mantine-grid / inline-size;
+}
+
+.m_410352e9 {
   --grid-overflow: visible;
   --grid-margin: calc(var(--grid-gutter) / -2);
   --grid-col-padding: calc(var(--grid-gutter) / 2);

package/styles/Table.css

@@ -80,7 +80,7 @@
 
 .m_b242d975 {
   top: var(--table-sticky-header-offset, 0);
-  z-index: 1;
+  z-index: 3;
 }
 
 .m_b242d975:where([data-sticky]) {

package/styles/Table.layer.css

@@ -80,7 +80,7 @@
 
 .m_b242d975 {
   top: var(--table-sticky-header-offset, 0);
-  z-index: 1;
+  z-index: 3;
 }
 
 .m_b242d975:where([data-sticky]) {

package/styles.css

@@ -2843,6 +2843,7 @@ fieldset:disabled .m_d3ea56bb,
 .m_8b3717df {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .m_f678d540 {
@@ -3887,6 +3888,10 @@ fieldset:disabled .m_d3ea56bb,
   margin-bottom: var(--mantine-spacing-sm);
 }
 
+.m_8478a6da {
+  container: mantine-grid / inline-size;
+}
+
 .m_410352e9 {
   --grid-overflow: visible;
   --grid-margin: calc(var(--grid-gutter) / -2);
@@ -6501,7 +6506,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 
 .m_b242d975 {
   top: var(--table-sticky-header-offset, 0);
-  z-index: 1;
+  z-index: 3;
 }
 
 .m_b242d975:where([data-sticky]) {

package/styles.layer.css

@@ -2843,6 +2843,7 @@ fieldset:disabled .m_d3ea56bb,
 .m_8b3717df {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .m_f678d540 {
@@ -3887,6 +3888,10 @@ fieldset:disabled .m_d3ea56bb,
   margin-bottom: var(--mantine-spacing-sm);
 }
 
+.m_8478a6da {
+  container: mantine-grid / inline-size;
+}
+
 .m_410352e9 {
   --grid-overflow: visible;
   --grid-margin: calc(var(--grid-gutter) / -2);
@@ -6501,7 +6506,7 @@ fieldset:disabled .m_c9ade57f:where([data-inverted]),
 
 .m_b242d975 {
   top: var(--table-sticky-header-offset, 0);
-  z-index: 1;
+  z-index: 3;
 }
 
 .m_b242d975:where([data-sticky]) {