Merge branch 'master' into pass-timezone-when-formatting-time

.yarnrc.yml

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

apps/mantine.dev/src/pages/charts/bar-chart.mdx

@@ -237,3 +237,12 @@ rendered behind the chart.
 To display value above each bar, set `withBarValueLabel`:
 
 <Demo data={BarChartDemos.barValueLabel} />
+
+## Bar value label props
+
+You can pass props down to recharts [LabelList](https://recharts.org/en-US/api/LabelList)
+component with `valueLabelProps` prop. `valueLabelProps` accepts either an object with props
+or a function that receives series data as an argument and returns an object with
+props.
+
+<Demo data={BarChartDemos.valueLabelProps} />

apps/mantine.dev/src/pages/core/app-shell.mdx

@@ -456,3 +456,24 @@ function Demo() {
 - `AppShell.Aside` root element is `aside`
 - `AppShell.Footer` root element is `footer`
 - `AppShell.Main` root element is `main` – **!important:** do not use `main` element inside `AppShell.Main` component
+
+## CSS variables
+
+You can use the following CSS variables in all components used inside `AppShell`:
+
+- `--app-shell-navbar-width` – width of the `AppShell.Navbar`
+- `--app-shell-navbar-offset` – offset of the `AppShell.Navbar`
+- `--app-shell-aside-width` – width of the `AppShell.Aside`
+- `--app-shell-aside-offset` – offset of the `AppShell.Aside`
+- `--app-shell-header-height` – height of the `AppShell.Header`
+- `--app-shell-header-offset` – offset of the `AppShell.Header`
+- `--app-shell-footer-height` – height of the `AppShell.Footer`
+- `--app-shell-footer-offset` – offset of the `AppShell.Footer`
+
+Example of using CSS variables in styles:
+
+```scss
+.main {
+  min-height: calc(100vh - var(--app-shell-header-height));
+}
+```

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

@@ -151,6 +151,9 @@ Differences from using multiple `Drawer` components:
 
 <Demo data={DrawerDemos.stack} />
 
+Note that `Drawer.Stack` can only be used with `Drawer` component. Components built with `Drawer.Root`
+and other compound components are not compatible with `Drawer.Stack`.
+
 ## useDrawersStack hook
 
 `useDrawersStack` hook provides an easy way to control multiple drawers at the same time.

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

@@ -152,6 +152,9 @@ Differences from using multiple `Modal` components:
 
 <Demo data={ModalDemos.stack} />
 
+Note that `Modal.Stack` can only be used with `Modal` component. Components built with `Modal.Root`
+and other compound components are not compatible with `Modal.Stack`.
+
 ## useModalsStack hook
 
 `useModalsStack` hook provides an easy way to control multiple modals at the same time.

apps/mantine.dev/src/pages/styles/css-files-list.mdx

@@ -41,6 +41,7 @@ import '@mantine/core/styles/ModalBase.css';
 import '@mantine/core/styles/Input.css';
 import '@mantine/core/styles/InlineInput.css';
 import '@mantine/core/styles/Flex.css';
+import '@mantine/core/styles/FloatingIndicator.css';
 ```
 
 ## Global styles

package.json

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

packages/@docs/demos/src/demos/charts/BarChart/BarChart.demo.valueLabelProps.tsx

@@ -0,0 +1,53 @@
+import { BarChart } from '@mantine/charts';
+import { MantineDemo } from '@mantinex/demo';
+import { data, dataCode } from './_data';
+
+const code = `
+import { BarChart } from '@mantine/charts';
+import { data } from './data';
+
+function Demo() {
+  return (
+    <BarChart
+      h={300}
+      data={data}
+      dataKey="month"
+      valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)}
+      withBarValueLabel
+      valueLabelProps={{ position: 'inside', fill: 'white' }}
+      series={[
+        { name: 'Smartphones', color: 'violet.6' },
+        { name: 'Laptops', color: 'blue.6' },
+        { name: 'Tablets', color: 'teal.6' },
+      ]}
+    />
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <BarChart
+      h={300}
+      data={data}
+      dataKey="month"
+      valueFormatter={(value) => new Intl.NumberFormat('en-US').format(value)}
+      withBarValueLabel
+      valueLabelProps={{ position: 'inside', fill: 'white' }}
+      series={[
+        { name: 'Smartphones', color: 'violet.6' },
+        { name: 'Laptops', color: 'blue.6' },
+        { name: 'Tablets', color: 'teal.6' },
+      ]}
+    />
+  );
+}
+
+export const valueLabelProps: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code: [
+    { code, language: 'tsx', fileName: 'Demo.tsx' },
+    { code: dataCode, language: 'tsx', fileName: 'data.ts' },
+  ],
+};

packages/@docs/demos/src/demos/charts/BarChart/BarChart.demos.story.tsx

@@ -128,6 +128,11 @@ export const Demo_barValueLabel = {
   render: renderDemo(demos.barValueLabel),
 };
 
+export const Demo_valueLabelProps = {
+  name: '⭐ Demo: valueLabelProps',
+  render: renderDemo(demos.valueLabelProps),
+};
+
 export const Demo_minBarSize = {
   name: '⭐ Demo: minBarSize',
   render: renderDemo(demos.minBarSize),

packages/@docs/demos/src/demos/charts/BarChart/index.ts

@@ -26,3 +26,4 @@ export { barValueLabel } from './BarChart.demo.barValueLabel';
 export { minBarSize } from './BarChart.demo.minBarSize';
 export { mixedStack } from './BarChart.demo.mixedStack';
 export { stripes } from './BarChart.demo.stripes';
+export { valueLabelProps } from './BarChart.demo.valueLabelProps';

packages/@docs/demos/src/demos/charts/DonutChart/DonutChart.demo.withLabels.tsx

@@ -23,5 +23,14 @@ export const withLabels: MantineDemo = {
     { fileName: 'data.ts', code: dataCode, language: 'tsx' },
   ],
   centered: true,
-  controls: [{ type: 'boolean', prop: 'withLabelsLine', initialValue: true, libraryValue: '__' }],
+  controls: [
+    { type: 'boolean', prop: 'withLabelsLine', initialValue: true, libraryValue: '__' },
+    {
+      type: 'segmented',
+      prop: 'labelsType',
+      initialValue: 'value',
+      libraryValue: '__',
+      data: ['value', 'percent'],
+    },
+  ],
 };

packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demo.withWeekNumbers.tsx

@@ -0,0 +1,21 @@
+import { DatePicker } from '@mantine/dates';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { DatePicker } from '@mantine/dates';
+
+function Demo() {
+  return <DatePicker withWeekNumbers />;
+}
+`;
+
+function Demo() {
+  return <DatePicker withWeekNumbers />;
+}
+
+export const withWeekNumbers: MantineDemo = {
+  type: 'code',
+  centered: true,
+  component: Demo,
+  code,
+};

packages/@docs/demos/src/demos/dates/DatePicker/DatePicker.demos.story.tsx

@@ -112,3 +112,8 @@ export const Demo_excludeDate = {
   name: '⭐ Demo: excludeDate',
   render: renderDemo(demos.excludeDate),
 };
+
+export const Demo_withWeekNumbers = {
+  name: '⭐ Demo: withWeekNumbers',
+  render: renderDemo(demos.withWeekNumbers),
+};

packages/@docs/demos/src/demos/dates/DatePicker/index.ts

@@ -19,3 +19,4 @@ export { renderDay } from './DatePicker.demo.renderDay';
 export { hideWeekdays } from './DatePicker.demo.hideWeekdays';
 export { hideOutsideDates } from './DatePicker.demo.hideOutsideDates';
 export { excludeDate } from './DatePicker.demo.excludeDate';
+export { withWeekNumbers } from './DatePicker.demo.withWeekNumbers';

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

@@ -28,6 +28,7 @@ export const MonthStylesApi: StylesApiData<MonthFactory> = {
     weekdaysRow: 'Weekdays tr element',
     weekday: 'Weekday th element',
     day: 'Month day control',
+    weekNumber: 'Week number td element',
   },
 
   vars: {},

packages/@mantine-tests/core/src/shared/it-throws-context-error.tsx

@@ -3,7 +3,7 @@ import { render } from '../render';
 
 interface Options<Props = any> {
   component: React.ComponentType<Props>;
-  props: Props & JSX.IntrinsicAttributes;
+  props: Props & React.JSX.IntrinsicAttributes;
   error: string;
 }
 

packages/@mantine/carousel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/carousel",
-  "version": "7.14.2-alpha.0",
+  "version": "7.14.3",
   "description": "Embla based carousel",
   "homepage": "https://mantine.dev/x/carousel/",
   "license": "MIT",
@@ -44,8 +44,8 @@
     "directory": "packages/@mantine/carousel"
   },
   "peerDependencies": {
-    "@mantine/core": "7.14.2-alpha.0",
-    "@mantine/hooks": "7.14.2-alpha.0",
+    "@mantine/core": "7.14.3",
+    "@mantine/hooks": "7.14.3",
     "embla-carousel-react": ">=7.0.0",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"

packages/@mantine/charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/charts",
-  "version": "7.14.2-alpha.0",
+  "version": "7.14.3",
   "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.14.2-alpha.0",
-    "@mantine/hooks": "7.14.2-alpha.0",
+    "@mantine/core": "7.14.3",
+    "@mantine/hooks": "7.14.3",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x",
     "recharts": "^2.13.3"

packages/@mantine/charts/src/BarChart/BarChart.tsx

@@ -5,6 +5,8 @@ import {
   CartesianGrid,
   Cell,
   Label,
+  LabelList,
+  LabelListProps,
   Legend,
   BarChart as ReChartsBarChart,
   ReferenceLine,
@@ -31,7 +33,6 @@ import {
 import { ChartLegend, ChartLegendStylesNames } from '../ChartLegend';
 import { ChartTooltip, ChartTooltipStylesNames } from '../ChartTooltip';
 import type { BaseChartStylesNames, ChartSeries, GridChartBaseProps } from '../types';
-import { BarLabel } from './BarLabel';
 import classes from '../grid-chart.module.css';
 
 function valueToPercent(value: number) {
@@ -92,6 +93,11 @@ export interface BarChartProps
   /** Determines whether a label with bar value should be displayed on top of each bar, incompatible with `type="stacked"` and `type="percent"`, `false` by default */
   withBarValueLabel?: boolean;
 
+  /** Props passed down to recharts `LabelList` component */
+  valueLabelProps?:
+    | ((series: BarChartSeries) => Partial<Omit<LabelListProps<Record<string, any>>, 'ref'>>)
+    | Partial<LabelListProps<Record<string, any>>>;
+
   /** Sets minimum height of the bar in px, `0` by default */
   minBarSize?: number;
 
@@ -202,6 +208,7 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
     xAxisLabel,
     yAxisLabel,
     withBarValueLabel,
+    valueLabelProps,
     withRightYAxis,
     rightYAxisLabel,
     rightYAxisProps,
@@ -217,6 +224,8 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
   const [highlightedArea, setHighlightedArea] = useState<string | null>(null);
   const shouldHighlight = highlightedArea !== null;
   const stacked = type === 'stacked' || type === 'percent';
+  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;
+
   const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {
     setHighlightedArea(null);
     onMouseLeave?.(event);
@@ -258,11 +267,6 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
         fillOpacity={dimmed ? 0.1 : fillOpacity}
         strokeOpacity={dimmed ? 0.2 : 0}
         stackId={stacked ? 'stack' : item.stackId || undefined}
-        label={
-          withBarValueLabel ? (
-            <BarLabel valueFormatter={valueFormatter} orientation={orientation} />
-          ) : undefined
-        }
         yAxisId={item.yAxisId || 'left'}
         minPointSize={minBarSize}
         {...(typeof barProps === 'function' ? barProps(item) : barProps)}
@@ -275,6 +279,15 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
             }
           />
         ))}
+        {withBarValueLabel && (
+          <LabelList
+            position={orientation === 'vertical' ? 'right' : 'top'}
+            fontSize={12}
+            fill="var(--chart-bar-label-color, var(--mantine-color-dimmed))"
+            formatter={tickFormatter}
+            {...(typeof valueLabelProps === 'function' ? valueLabelProps(item) : valueLabelProps)}
+          />
+        )}
       </Bar>
     );
   });
@@ -299,8 +312,6 @@ export const BarChart = factory<BarChartFactory>((_props, ref) => {
     );
   });
 
-  const tickFormatter = type === 'percent' ? valueToPercent : valueFormatter;
-
   const sharedYAxisProps = {
     axisLine: false,
     ...(orientation === 'vertical'