Merge branch 'master' of github.com:mantinedev/mantine into 7.13

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.4.0.cjs
+yarnPath: .yarn/releases/yarn-4.4.1.cjs

apps/mantine.dev/src/components/MdxProvider/MdxTemplatesList/community-data.ts

@@ -31,6 +31,12 @@ export const COMMUNITY_TEMPLATES_DATA: Template[] = [
     link: 'https://github.com/KennethAduan/kenstack-bun-nextjs-mantine/',
     description: 'Next.js app router + Mantine + Bun template',
   },
+  {
+    type: 'next',
+    name: 'ship-template',
+    link: 'https://github.com/paralect/ship',
+    description: 'Fullstack boilerplate with Next.js, auth, MongoDB, Turborepo',
+  },
   {
     type: 'vite',
     name: 'nx-vite-monorepo-template',

apps/mantine.dev/src/components/Search/Search.tsx

@@ -14,6 +14,7 @@ export function Search() {
     label: page.title,
     description:
       page.search || page.description || (page.date ? `Released ${page.date}` : undefined),
+    keywords: page.searchTags,
     onClick: () => router.push(page.slug),
   }));
 

apps/mantine.dev/src/mdx/data/mdx-hooks-data.ts

@@ -10,6 +10,7 @@ function hDocs(hook: string, description: string): Frontmatter {
     import: `import { ${hook} } from '@mantine/hooks';`,
     source: `@mantine/hooks/src/${name}/${name}.ts`,
     docs: `hooks/${name}.mdx`,
+    searchTags: `${hook} ${name.split('-').join(' ')}`,
   };
 }
 

apps/mantine.dev/src/pages/core/tree.mdx

@@ -125,6 +125,9 @@ export interface UseTreeInput {
   /** Initial selected state of nodes */
   initialSelectedState?: string[];
 
+  /** Initial checked state of nodes */
+  initialCheckedState?: string[];
+
   /** Determines whether multiple node can be selected at a time */
   multiple?: boolean;
 }

apps/mantine.dev/src/pages/form/actions.mdx

@@ -79,10 +79,16 @@ Form name must be a string that contains only letters, numbers and dashes:
 import { useForm } from '@mantine/form';
 
 // ✅ Valid form name
-const valid = useForm({ name: 'valid-FORM-name-10' mode: 'uncontrolled' });
+const valid = useForm({
+  name: 'valid-FORM-name-10',
+  mode: 'uncontrolled',
+});
 
 // ❌ Invalid form name: must not contain spaces and special characters
-const invalid = useForm({ name: 'invalid_form name', mode: 'uncontrolled' });
+const invalid = useForm({
+  name: 'invalid_form name',
+  mode: 'uncontrolled',
+});
 ```
 
 Note that form names must be unique, if you have multiple forms with the same name, form actions will

apps/mantine.dev/src/types/MdxContent.ts

@@ -20,6 +20,9 @@ export interface Frontmatter {
   /** Page keywords, used for search in spotlight */
   search?: string;
 
+  /** Tags used for search, not visible in UI */
+  searchTags?: string;
+
   /** Release date, displayed in changelogs */
   date?: string;
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "mantine-a91763c0e2",
-  "version": "7.12.1",
+  "version": "7.12.2",
   "description": "Mantine Components Monorepo",
-  "packageManager": "[email protected].0",
+  "packageManager": "[email protected].1",
   "license": "MIT",
   "private": true,
   "author": "Vitaly Rtishchev <[email protected]>",

packages/@mantine/carousel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/carousel",
-  "version": "7.12.1",
+  "version": "7.12.2",
   "description": "Embla based carousel",
   "homepage": "https://mantine.dev/x/carousel/",
   "license": "MIT",
@@ -44,8 +44,8 @@
     "directory": "packages/@mantine/carousel"
   },
   "peerDependencies": {
-    "@mantine/core": "7.12.1",
-    "@mantine/hooks": "7.12.1",
+    "@mantine/core": "7.12.2",
+    "@mantine/hooks": "7.12.2",
     "embla-carousel-react": ">=7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/@mantine/charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/charts",
-  "version": "7.12.1",
+  "version": "7.12.2",
   "description": "Charts components built with recharts and Mantine",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "directory": "packages/@mantine/charts"
   },
   "peerDependencies": {
-    "@mantine/core": "7.12.1",
-    "@mantine/hooks": "7.12.1",
+    "@mantine/core": "7.12.2",
+    "@mantine/hooks": "7.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.10.3"

packages/@mantine/code-highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/code-highlight",
-  "version": "7.12.1",
+  "version": "7.12.2",
   "description": "Code highlight with Mantine theme",
   "homepage": "https://mantine.dev/x/code-highlight/",
   "license": "MIT",
@@ -45,8 +45,8 @@
     "directory": "packages/@mantine/code-highlight"
   },
   "peerDependencies": {
-    "@mantine/core": "7.12.1",
-    "@mantine/hooks": "7.12.1",
+    "@mantine/core": "7.12.2",
+    "@mantine/hooks": "7.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/@mantine/colors-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/colors-generator",
-  "version": "7.12.1",
+  "version": "7.12.2",
   "description": "A library to generate 10 shades of color based on provided color value",
   "homepage": "https://mantine.dev",
   "license": "MIT",

packages/@mantine/core/package.json

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

packages/@mantine/core/src/components/Badge/Badge.module.css

@@ -34,8 +34,7 @@
   line-height: var(--badge-lh);
   text-decoration: none;
   padding: 0 var(--badge-padding-x);
-  display: grid;
-  grid-template-columns: auto 1fr auto;
+  display: inline-grid;
   align-items: center;
   justify-content: center;
   width: fit-content;
@@ -49,6 +48,18 @@
   background: var(--badge-bg);
   border: var(--badge-bd);
 
+  &:where([data-with-right-section]) {
+    grid-template-columns: 1fr auto;
+  }
+
+  &:where([data-with-left-section], [data-variant='dot']) {
+    grid-template-columns: auto 1fr;
+  }
+
+  &:where([data-with-left-section][data-with-right-section]) {
+    grid-template-columns: auto 1fr auto;
+  }
+
   &:where([data-block]) {
     display: flex;
     width: 100%;
@@ -91,6 +102,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: center;
 }
 
 .section {

packages/@mantine/core/src/components/Badge/Badge.story.tsx

@@ -33,6 +33,24 @@ export function Usage() {
   );
 }
 
+export function WithFixedWidth() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Badge w={200} rightSection="R" leftSection="L">
+        Badge
+      </Badge>
+      <Badge w={200} leftSection="L">
+        Badge
+      </Badge>
+      <Badge w={200} rightSection="R">
+        Badge
+      </Badge>
+      <Badge w={200}>Badge</Badge>
+      <span>Other content</span>
+    </div>
+  );
+}
+
 export function WithIconInSection() {
   return (
     <Badge

packages/@mantine/core/src/components/Badge/Badge.tsx

@@ -147,7 +147,15 @@ export const Badge = polymorphicFactory<BadgeFactory>((_props, ref) => {
   return (
     <Box
       variant={variant}
-      mod={[{ block: fullWidth, circle }, mod]}
+      mod={[
+        {
+          block: fullWidth,
+          circle,
+          'with-right-section': !!rightSection,
+          'with-left-section': !!leftSection,
+        },
+        mod,
+      ]}
       {...getStyles('root', { variant })}
       ref={ref}
       {...others}

packages/@mantine/core/src/components/Checkbox/Checkbox.tsx

@@ -37,7 +37,7 @@ export type CheckboxCssVariables = {
 export interface CheckboxProps
   extends BoxProps,
     StylesApiProps<CheckboxFactory>,
-    ElementProps<'input', 'size'> {
+    ElementProps<'input', 'size' | 'children'> {
   /** Id used to connect input with the label. If not set, unique id is generated instead. */
   id?: string;
 
@@ -137,7 +137,6 @@ export const Checkbox = factory<CheckboxFactory>((_props, ref) => {
     size,
     radius,
     wrapperProps,
-    children,
     checked,
     labelPosition,
     description,

packages/@mantine/core/src/components/Radio/Radio.tsx

@@ -42,7 +42,7 @@ export type RadioCssVariables = {
 export interface RadioProps
   extends BoxProps,
     StylesApiProps<RadioFactory>,
-    ElementProps<'input', 'size'> {
+    ElementProps<'input', 'size' | 'children'> {
   /** Content of the `label` associated with the radio */
   label?: React.ReactNode;
 

packages/@mantine/core/src/components/ScrollArea/ScrollArea.tsx

@@ -212,6 +212,7 @@ export const ScrollAreaAutosize = factory<ScrollAreaFactory>((props, ref) => {
     scrollbars,
     style,
     vars,
+    onBottomReached,
     ...others
   } = useProps('ScrollAreaAutosize', defaultProps, props);
 
@@ -233,6 +234,7 @@ export const ScrollAreaAutosize = factory<ScrollAreaFactory>((props, ref) => {
           viewportProps={viewportProps}
           vars={vars}
           scrollbars={scrollbars}
+          onBottomReached={onBottomReached}
         >
           {children}
         </ScrollArea>

packages/@mantine/core/src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx

@@ -95,7 +95,6 @@ export const Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>((props, forw
             rectRef.current = scrollbar!.getBoundingClientRect();
             prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
             document.body.style.webkitUserSelect = 'none';
-            document.body.style.pointerEvents = 'none';
             handleDragScroll(event);
           }
         })}
@@ -108,7 +107,6 @@ export const Scrollbar = forwardRef<HTMLDivElement, ScrollbarProps>((props, forw
             element.releasePointerCapture(event.pointerId);
           }
           document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
-          document.body.style.pointerEvents = 'auto';
           rectRef.current = null;
         })}
       />

packages/@mantine/core/src/components/Switch/Switch.tsx

@@ -43,7 +43,7 @@ export type SwitchCssVariables = {
 export interface SwitchProps
   extends BoxProps,
     StylesApiProps<SwitchFactory>,
-    ElementProps<'input', 'size'> {
+    ElementProps<'input', 'size' | 'children'> {
   /** Id used to bind input and label, if not passed, unique id will be generated instead */
   id?: string;
 
@@ -127,7 +127,6 @@ export const Switch = factory<SwitchFactory>((_props, ref) => {
     size,
     radius,
     wrapperProps,
-    children,
     thumbIcon,
     checked,
     defaultChecked,

packages/@mantine/core/src/components/Tabs/TabsPanel/TabsPanel.tsx

@@ -37,12 +37,13 @@ const defaultProps: Partial<TabsPanelProps> = {};
 
 export const TabsPanel = factory<TabsPanelFactory>((_props, ref) => {
   const props = useProps('TabsPanel', defaultProps, _props);
-  const { children, className, value, classNames, styles, style, mod, ...others } = props;
+  const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } =
+    props;
 
   const ctx = useTabsContext();
 
   const active = ctx.value === value;
-  const content = ctx.keepMounted || props.keepMounted ? children : active ? children : null;
+  const content = ctx.keepMounted || keepMounted ? children : active ? children : null;
 
   return (
     <Box