Merge branch master into 7.15

.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/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

@@ -159,6 +159,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

@@ -160,6 +160,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",
+  "version": "7.14.3",
   "description": "Mantine Components Monorepo",
-  "packageManager": "yarn@4.5.1",
+  "packageManager": "yarn@4.5.3",
   "license": "MIT",
   "private": true,
   "author": "Vitaly Rtishchev <rtivital@gmail.com>",

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",
+  "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",
-    "@mantine/hooks": "7.14.2",
+    "@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",
+  "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",
-    "@mantine/hooks": "7.14.2",
+    "@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/code-highlight/package.json

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

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

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/colors-generator",
-  "version": "7.14.2",
+  "version": "7.14.3",
   "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.14.2",
+  "version": "7.14.3",
   "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.14.2",
+    "@mantine/hooks": "7.14.3",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x"
   },

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

@@ -33,7 +33,7 @@ export interface AutocompleteProps
     Omit<ComboboxLikeProps, 'data'>,
     StylesApiProps<AutocompleteFactory>,
     ElementProps<'input', 'onChange' | 'size'> {
-  /** Data displayed in the dropdown */
+  /** Data displayed in the dropdown. Values must be unique, otherwise an error will be thrown and component will not render. */
   data?: ComboboxStringData;
 
   /** Controlled component value */

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

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useForm } from '@mantine/form';
 import { CheckboxGroup } from '../CheckboxGroup/CheckboxGroup';
 import { CheckboxIndicator } from '../CheckboxIndicator/CheckboxIndicator';
 import { CheckboxCard } from './CheckboxCard';
@@ -46,3 +47,22 @@ export function WithinGroup() {
     </div>
   );
 }
+
+export function WithUseForm() {
+  const form = useForm({ mode: 'uncontrolled', initialValues: { checkbox: true } });
+
+  return (
+    <div style={{ padding: 40 }}>
+      <CheckboxCard
+        p="md"
+        {...form.getInputProps('checkbox', { type: 'checkbox' })}
+        key={form.key('checkbox')}
+      >
+        <CheckboxIndicator />
+        Some label
+      </CheckboxCard>
+
+      {JSON.stringify(form.values)}
+    </div>
+  );
+}

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

@@ -1,3 +1,4 @@
+import { useUncontrolled } from '@mantine/hooks';
 import {
   BoxProps,
   createVarsResolver,
@@ -24,9 +25,15 @@ export interface CheckboxCardProps
   extends BoxProps,
     StylesApiProps<CheckboxCardFactory>,
     ElementProps<'button', 'onChange'> {
-  /** Checked state */
+  /** Controlled component value */
   checked?: boolean;
 
+  /** Uncontrolled component default value */
+  defaultChecked?: boolean;
+
+  /** Called when value changes */
+  onChange?: (checked: boolean) => void;
+
   /** Determines whether the card should have border, `true` by default */
   withBorder?: boolean;
 
@@ -68,6 +75,8 @@ export const CheckboxCard = factory<CheckboxCardFactory>((_props, ref) => {
     withBorder,
     value,
     onClick,
+    defaultChecked,
+    onChange,
     ...others
   } = props;
 
@@ -87,20 +96,28 @@ export const CheckboxCard = factory<CheckboxCardFactory>((_props, ref) => {
 
   const ctx = useCheckboxGroupContext();
   const _checked =
-    typeof checked === 'boolean' ? checked : ctx?.value.includes(value || '') || false;
+    typeof checked === 'boolean' ? checked : ctx?.value.includes(value || '') || undefined;
+
+  const [_value, setValue] = useUncontrolled({
+    value: _checked,
+    defaultValue: defaultChecked,
+    finalValue: false,
+    onChange,
+  });
 
   return (
-    <CheckboxCardProvider value={{ checked: _checked }}>
+    <CheckboxCardProvider value={{ checked: _value }}>
       <UnstyledButton
         ref={ref}
-        mod={[{ 'with-border': withBorder, checked: _checked }, mod]}
+        mod={[{ 'with-border': withBorder, checked: _value }, mod]}
         {...getStyles('card')}
         {...others}
         role="checkbox"
-        aria-checked={_checked}
+        aria-checked={_value}
         onClick={(event) => {
           onClick?.(event);
           ctx?.onChange(value || '');
+          setValue(!_value);
         }}
       />
     </CheckboxCardProvider>

packages/@mantine/core/src/components/Combobox/Combobox.types.ts

@@ -32,7 +32,7 @@ export type ComboboxParsedItem = ComboboxItem | ComboboxParsedItemGroup;
 export type ComboboxLikeStylesNames = Exclude<ComboboxStylesNames, 'header' | 'footer' | 'search'>;
 
 export interface ComboboxLikeProps {
-  /** Data used to generate options */
+  /** Data used to generate options. Values must be unique, otherwise an error will be thrown and component will not render. */
   data?: ComboboxData;
 
   /** Controlled dropdown opened state */

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

@@ -201,6 +201,6 @@ type FileInputComponent = (<Multiple extends boolean = false>(
   props: FileInputProps<Multiple> & {
     ref?: React.ForwardedRef<HTMLButtonElement>;
   }
-) => JSX.Element) & { extend: typeof _FileInput.extend };
+) => React.JSX.Element) & { extend: typeof _FileInput.extend };
 
 export const FileInput: FileInputComponent = _FileInput as any;

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

@@ -92,6 +92,7 @@
   position: relative;
   transition: background-color 150ms ease;
   overflow: hidden;
+  opacity: var(--thumb-opacity);
 
   &::before {
     content: '';

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

@@ -90,9 +90,9 @@ export const ScrollAreaScrollbarVisible = forwardRef<
             const scrollPos = context.viewport.scrollTop;
             const offset = getThumbOffsetFromScroll(scrollPos, sizes);
             if (sizes.scrollbar.size === 0) {
-              thumbRef.current.style.opacity = '0';
+              thumbRef.current.style.setProperty('--thumb-opacity', '0');
             } else {
-              thumbRef.current.style.opacity = '1';
+              thumbRef.current.style.setProperty('--thumb-opacity', '1');
             }
             thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
           }