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.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.4.0.cjs

apps/help.mantine.dev/src/pages/q/data-grid-i-need.mdx

@@ -29,4 +29,4 @@ and [Table](https://mantine.dev/code/table/) component from Mantine.
 
 The DataGrid component is complex and requires a lot of maintenance.
 As of now (January 2024), it is not planned to add native DataGrid component
-to Mantine in the nearest future.
+to Mantine in the near future.

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

@@ -7,7 +7,7 @@ export const MDX_CORE_DATA: Record<string, Frontmatter> = {
     slug: '/core/box',
     description: 'Base component for all Mantine components',
     import: "import { Box } from '@mantine/core';",
-    source: '@mantine/core/src/components/Box/Box.tsx',
+    source: '@mantine/core/src/core/Box/Box.tsx',
     docs: 'core/box.mdx',
   },
 

apps/mantine.dev/src/pages/contribute.mdx

@@ -57,6 +57,6 @@ Individual packages do not have dedicated scripts.
 
 ### Docs scripts
 
-- `docs:docgen` – generates components types information with [docgen script](https://github.com/mantinedev/mantine/blob/master/scripts/docgen.ts)
+- `docs:docgen` – generates components types information with [docgen script](https://github.com/mantinedev/mantine/blob/master/scripts/docgen/index.ts)
 - `docs:build` – builds docs for production
 - `docs:deploy` – builds and deploys docs to the GitHub Pages

apps/mantine.dev/src/pages/core/number-input.mdx

@@ -25,6 +25,17 @@ function Demo() {
 }
 ```
 
+## Value type
+
+`value`, `defaultValue` and `onChange` props can be either string or number. In all cases
+when `NumberInput` value can be represented as a number, `onChange` function is called
+with a number (for example `55`, `1.28`, `-100`, etc.). But there are several cases when
+it is not possible to represent value as a number:
+
+- Empty state is represented as an empty string – `''`
+- Numbers that are larger than `Number.MAX_SAFE_INTEGER` or smaller than `Number.MIN_SAFE_INTEGER` are represented as strings – `'90071992547409910'`
+- Numbers that consist of only multiple zeros are represented as strings – `0.`, `0.0`, `-0.00`, etc.
+
 ## min and max
 
 Set `min` and `max` props to limit the input value:

apps/mantine.dev/src/pages/dates/time-input.mdx

@@ -10,6 +10,23 @@ export default Layout(MDX_DATA.TimeInput);
 
 <Demo data={TimeInputDemos.configurator} />
 
+## Controlled
+
+```tsx
+import { useState } from 'react';
+import { TimeInput } from '@mantine/dates';
+
+function Demo() {
+  const [value, setValue] = useState('');
+  return (
+    <TimeInput
+      value={value}
+      onChange={(event) => setValue(event.currentTarget.value)}
+    />
+  );
+}
+```
+
 ## Show browser picker
 
 You can show browser picker by calling `showPicker` method of input element.

apps/mantine.dev/src/pages/styles/responsive.mdx

@@ -132,7 +132,7 @@ function CustomComponent() {
 Some components support `size` prop, which changes various aspects of component appearance.
 `size` prop is not responsive – it is not possible to define different component sizes for different
 screen sizes. Instead, you can render multiple components with different sizes and show/hide them
-based on media query:
+based on media query with `className` or `hiddenFrom`/`visibleFrom` props:
 
 <Demo data={StylesDemos.sizesMedia} />
 

apps/mantine.dev/src/pages/styles/vanilla-extract.mdx

@@ -57,15 +57,19 @@ properties are already exposed as CSS variables. Instead, use `themeToVars` func
 to create an object with CSS variables from Mantine theme:
 
 ```tsx
-// theme.css.ts
+// theme.ts
 import { createTheme } from '@mantine/core';
-import { themeToVars } from '@mantine/vanilla-extract';
 
 // Do not forget to pass theme to MantineProvider
 export const theme = createTheme({
   fontFamily: 'serif',
   primaryColor: 'cyan',
 });
+```
+
+```tsx
+// theme.css.ts
+import { theme } from './theme';
 
 // CSS variables object, can be access in *.css.ts files
 export const vars = themeToVars(theme);

changelog/7.0.0.md

@@ -309,7 +309,7 @@ There are multiple ways to customize component sizes:
 - With component [CSS variables](https://mantine.dev/styles/styles-api)
 - With [static CSS variables](https://mantine.dev/styles/variants-sizes#sizes-with-static-css-variables)
 
-Example of customizing [Button](https://mantine.dev/core/button) size with `data-size` attribute:
+Example of customizing [Input](https://mantine.dev/core/input) size with `data-size` attribute:
 
 ```tsx
 import { createTheme, Input, MantineProvider } from '@mantine/core';

changelog/7.12.0.md

@@ -43,21 +43,31 @@ function Demo() {
 You can now subscribe to notifications state changes with `useNotifications` hook:
 
 ```tsx
-import { Button } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-
 function Demo() {
+  const [counter, { increment }] = useCounter();
+  const notificationsStore = useNotifications();
+
+  const showNotification = () => {
+    notifications.show({
+      title: `Notification ${counter}`,
+      message: 'Most notifications are added to queue',
+    });
+
+    increment();
+  };
+
   return (
-    <Button
-      onClick={() =>
-        notifications.show({
-          title: 'Default notification',
-          message: 'Do not forget to star Mantine on GitHub! 🌟',
-        })
-      }
-    >
-      Show notification
-    </Button>
+    <>
+      <Button onClick={showNotification} mb="md">
+        Show notification
+      </Button>
+
+      <Text>Notifications state</Text>
+      <Code block>{JSON.stringify(notificationsStore.notifications, null, 2)}</Code>
+
+      <Text mt="md">Notifications queue</Text>
+      <Code block>{JSON.stringify(notificationsStore.queue, null, 2)}</Code>
+    </>
   );
 }
 ```

package.json

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

packages/@docs/demos/src/demos/form/Form.demo.focusError.tsx

@@ -11,6 +11,7 @@ import { isEmail, isNotEmpty, useForm } from '@mantine/form';
 function Demo() {
   const form = useForm({
     mode: 'uncontrolled',
+    name: 'register-form',
     initialValues: {
       name: '',
       email: '',
@@ -60,6 +61,7 @@ function Demo() {
 function Demo() {
   const form = useForm({
     mode: 'uncontrolled',
+    name: 'register-form',
     initialValues: {
       name: '',
       email: '',

packages/@docs/demos/src/demos/notifications/Notifications.demo.store.tsx

@@ -4,21 +4,31 @@ import { notifications, useNotifications } from '@mantine/notifications';
 import { MantineDemo } from '@mantinex/demo';
 
 const code = `
-import { Button } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-
 function Demo() {
+  const [counter, { increment }] = useCounter();
+  const notificationsStore = useNotifications();
+
+  const showNotification = () => {
+    notifications.show({
+      title: \`Notification \${counter}\`,
+      message: 'Most notifications are added to queue',
+    });
+
+    increment();
+  };
+
   return (
-    <Button
-      onClick={() =>
-        notifications.show({
-          title: 'Default notification',
-          message: 'Do not forget to star Mantine on GitHub! 🌟',
-        })
-      }
-    >
-      Show notification
-    </Button>
+    <>
+      <Button onClick={showNotification} mb="md">
+        Show notification
+      </Button>
+
+      <Text>Notifications state</Text>
+      <Code block>{JSON.stringify(notificationsStore.notifications, null, 2)}</Code>
+
+      <Text mt="md">Notifications queue</Text>
+      <Code block>{JSON.stringify(notificationsStore.queue, null, 2)}</Code>
+    </>
   );
 }`;
 

packages/@docs/demos/src/demos/styles/Styles.demo.sizesMedia.tsx

@@ -1,71 +1,30 @@
 import { TextInput } from '@mantine/core';
 import { MantineDemo } from '@mantinex/demo';
-import classes from './Styles.demo.sizesMedia.module.css';
 
 const code = `
 import { TextInput } from '@mantine/core';
-import classes from './Demo.module.css';
 
 function Demo() {
   return (
     <>
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xs"
-        className={classes['input-mobile']}
-      />
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xl"
-        className={classes['input-desktop']}
-      />
+      <TextInput size="xs" hiddenFrom="sm" label="My input" placeholder="My input" />
+      <TextInput size="xl" visibleFrom="sm" label="My input" placeholder="My input" />
     </>
   );
 }
 `;
 
-const cssCode = `
-.input-mobile {
-  @media (min-width: em(750px)) {
-    display: none;
-  }
-}
-
-.input-desktop {
-  display: none;
-
-  @media (min-width: em(750px)) {
-    display: block;
-  }
-}
-`;
-
 function Demo() {
   return (
     <>
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xs"
-        className={classes['input-mobile']}
-      />
-      <TextInput
-        label="My input"
-        placeholder="My input"
-        size="xl"
-        className={classes['input-desktop']}
-      />
+      <TextInput size="xs" hiddenFrom="sm" label="My input" placeholder="My input" />
+      <TextInput size="xl" visibleFrom="sm" label="My input" placeholder="My input" />
     </>
   );
 }
 
 export const sizesMedia: MantineDemo = {
   type: 'code',
   component: Demo,
-  code: [
-    { fileName: 'Demo.tsx', code, language: 'tsx' },
-    { fileName: 'Demo.module.css', code: cssCode, language: 'scss' },
-  ],
+  code: { fileName: 'Demo.tsx', code, language: 'tsx' },
 };

packages/@docs/styles-api/src/data/SegmentedControl.styles-api.ts

@@ -32,6 +32,7 @@ export const SegmentedControlStylesApi: StylesApiData<SegmentedControlFactory> =
       selector: 'root',
       condition: '`withItemsBorder` prop is not `false`',
     },
+    { modifier: 'data-disabled', selector: 'root', condition: 'Value of `disabled` prop' },
     { modifier: 'data-orientation', selector: 'control', value: 'Value of `orientation` prop' },
     {
       modifier: 'data-active',

packages/@mantine/carousel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/carousel",
-  "version": "7.11.2",
+  "version": "7.12.1",
   "description": "Embla based carousel",
   "homepage": "https://mantine.dev/x/carousel/",
   "license": "MIT",
@@ -44,8 +44,8 @@
     "directory": "packages/@mantine/carousel"
   },
   "peerDependencies": {
-    "@mantine/core": "7.11.2",
-    "@mantine/hooks": "7.11.2",
+    "@mantine/core": "7.12.1",
+    "@mantine/hooks": "7.12.1",
     "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.11.2",
+  "version": "7.12.1",
   "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.11.2",
-    "@mantine/hooks": "7.11.2",
+    "@mantine/core": "7.12.1",
+    "@mantine/hooks": "7.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.10.3"