Merge branch 'master' of github.com-rtivital:mantinedev/mantine into 7.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-a91763c0e2",
-  "version": "7.7.1",
+  "version": "7.7.2",
   "description": "Mantine Components Monorepo",
   "packageManager": "yarn@4.1.1",
   "license": "MIT",

packages/@docs/demos/src/demos/core/Stack/Stack.demo.configurator.tsx

@@ -46,7 +46,7 @@ export const configurator: MantineDemo = {
         { label: 'flex-end', value: 'flex-end' },
       ],
       initialValue: 'stretch',
-      libraryValue: 'stretch',
+      libraryValue: null,
     },
     {
       prop: 'justify',
@@ -59,8 +59,8 @@ export const configurator: MantineDemo = {
         { label: 'space-around', value: 'space-around' },
       ],
       initialValue: 'center',
-      libraryValue: 'center',
+      libraryValue: null,
     },
-    { prop: 'gap', type: 'size', initialValue: 'md', libraryValue: 'md' },
+    { prop: 'gap', type: 'size', initialValue: 'md', libraryValue: null },
   ],
 };

packages/@mantine/carousel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/carousel",
-  "version": "7.7.1",
+  "version": "7.7.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.7.1",
-    "@mantine/hooks": "7.7.1",
+    "@mantine/core": "7.7.2",
+    "@mantine/hooks": "7.7.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.7.1",
+  "version": "7.7.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.7.1",
-    "@mantine/hooks": "7.7.1",
+    "@mantine/core": "7.7.2",
+    "@mantine/hooks": "7.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.10.3"

packages/@mantine/charts/src/grid-chart.module.css

@@ -2,6 +2,10 @@
   display: block;
   width: 100%;
 
+  svg {
+    overflow: visible;
+  }
+
   @mixin where-light {
     --chart-grid-color: rgba(173, 181, 189, 0.6);
     --chart-cursor-fill: rgba(173, 181, 189, 0.15);

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

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/code-highlight",
-  "version": "7.7.1",
+  "version": "7.7.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.7.1",
-    "@mantine/hooks": "7.7.1",
+    "@mantine/core": "7.7.2",
+    "@mantine/hooks": "7.7.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.7.1",
+  "version": "7.7.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.7.1",
+  "version": "7.7.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.7.1",
+    "@mantine/hooks": "7.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

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

@@ -110,8 +110,9 @@
 }
 
 .footer {
-  bottom: env(safe-area-inset-bottom);
-  height: var(--app-shell-footer-height);
+  bottom: 0;
+  height: calc(var(--app-shell-footer-height) + env(safe-area-inset-bottom));
+  padding-bottom: env(safe-area-inset-bottom);
   transform: var(--app-shell-footer-transform);
   z-index: var(--app-shell-footer-z-index);
 

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

@@ -6,6 +6,11 @@ import { AppShell } from './AppShell';
 
 export default { title: 'AppShell' };
 
+const lorem =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis eget nunc Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis eget nunc Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis eget nunc';
+
+const longContent = Array(30).fill(lorem).join('\n\n');
+
 export function Usage() {
   const [navbarOpened, { toggle: toggleNavbar }] = useDisclosure(true);
   const [navbarMobileOpened, { toggle: toggleNavbarMobile }] = useDisclosure(false);
@@ -28,7 +33,7 @@ export function Usage() {
         collapsed: { desktop: !asideOpened, mobile: !asideMobileOpened },
       }}
       header={{
-        height: 0,
+        height: 60,
         collapsed: !headerOpened,
       }}
       footer={{
@@ -53,7 +58,7 @@ export function Usage() {
           <Button onClick={toggleAside}>Toggle aside</Button>
           <Button onClick={toggleAsideMobile}>Toggle aside mobile</Button>
         </Group>
-        <p>Other content</p>
+        <p>{longContent}</p>
       </AppShell.Main>
 
       <AppShell.Aside>Aside</AppShell.Aside>

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

@@ -41,7 +41,7 @@ export interface AvatarProps extends BoxProps, StylesApiProps<AvatarFactory> {
   /** Key of `theme.radius` or any valid CSS value to set border-radius, `'100%'` by default */
   radius?: MantineRadius;
 
-  /** Key of `theme.colors` or any valid CSS color, default value is `theme.primaryColor`  */
+  /** Key of `theme.colors` or any valid CSS color, default value is `'gray'`  */
   color?: MantineColor;
 
   /** Gradient configuration used when `variant="gradient"`, default value is `theme.defaultGradient` */

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

@@ -29,9 +29,15 @@
   @mixin where-dark {
     color: var(--mantine-color-dark-1);
   }
+
+  &[data-disabled],
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
 }
 
-.root--subtle {
+.root--subtle:not([data-disabled], :disabled) {
   @mixin hover {
     @mixin where-light {
       background-color: var(--mantine-color-gray-0);

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

@@ -11,6 +11,14 @@ export function SingleButton() {
   );
 }
 
+export function Disabled() {
+  return (
+    <div style={{ padding: 40 }}>
+      <CloseButton disabled />
+    </div>
+  );
+}
+
 export function Usage() {
   return (
     <div style={{ padding: 40 }}>

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

@@ -112,7 +112,7 @@ export const CloseButton = polymorphicFactory<CloseButtonFactory>((_props, ref)
       variant={variant}
       disabled={disabled}
       mod={[{ disabled: disabled || dataDisabled }, mod]}
-      {...getStyles('root', { variant, active: true })}
+      {...getStyles('root', { variant, active: !disabled && !dataDisabled })}
     >
       {icon || <CloseIcon />}
       {children}

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

@@ -254,6 +254,12 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
     return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
   };
 
+  const adjustCursor = (position?: number) => {
+    if (inputRef.current && position) {
+      inputRef.current.setSelectionRange(position, position);
+    }
+  };
+
   const incrementRef = useRef<() => void>();
   incrementRef.current = () => {
     let val: number;
@@ -277,6 +283,7 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
       { floatValue: parseFloat(formattedValue), formattedValue, value: formattedValue },
       { source: 'increment' as any }
     );
+    setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);
   };
 
   const decrementRef = useRef<() => void>();
@@ -300,6 +307,7 @@ export const NumberInput = factory<NumberInputFactory>((_props, ref) => {
       { floatValue: parseFloat(formattedValue), formattedValue, value: formattedValue },
       { source: 'decrement' as any }
     );
+    setTimeout(() => adjustCursor(inputRef.current?.value.length), 0);
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {

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

@@ -116,6 +116,9 @@ export interface PinInputProps
 
   /** Props passed down to the hidden input */
   hiddenInputProps?: React.ComponentPropsWithoutRef<'input'>;
+
+  /** Assigns ref of the root element */
+  rootRef?: React.ForwardedRef<HTMLDivElement>;
 }
 
 export type PinInputFactory = Factory<{
@@ -174,6 +177,7 @@ export const PinInput = factory<PinInputFactory>((props, ref) => {
     vars,
     id,
     hiddenInputProps,
+    rootRef,
     ...others
   } = useProps('PinInput', defaultProps, props);
 
@@ -364,6 +368,7 @@ export const PinInput = factory<PinInputFactory>((props, ref) => {
       <Group
         {...others}
         {...getStyles('root')}
+        ref={rootRef}
         role="group"
         id={uuid}
         gap={gap}

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

@@ -81,8 +81,8 @@
     height: var(--scrollarea-scrollbar-size);
     flex-direction: column;
     bottom: 0;
-    inset-inline-end: 0;
-    inset-inline-start: var(--sa-corner-height);
+    inset-inline-start: 0;
+    inset-inline-end: var(--sa-corner-width);
   }
 }
 

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

@@ -134,15 +134,10 @@ export const ScrollArea = factory<ScrollAreaFactory>((_props, ref) => {
         ref={viewportRef}
         data-offset-scrollbars={offsetScrollbars === true ? 'xy' : offsetScrollbars || undefined}
         data-scrollbars={scrollbars || undefined}
-        onScroll={
-          typeof onScrollPositionChange === 'function'
-            ? ({ currentTarget }) =>
-                onScrollPositionChange({
-                  x: currentTarget.scrollLeft,
-                  y: currentTarget.scrollTop,
-                })
-            : undefined
-        }
+        onScroll={(e) => {
+          viewportProps?.onScroll?.(e);
+          onScrollPositionChange?.({ x: e.currentTarget.scrollLeft, y: e.currentTarget.scrollTop });
+        }}
       >
         {children}
       </ScrollAreaViewport>

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

@@ -11,6 +11,7 @@ export function Usage() {
         data={['React', 'Angular', 'Svelte']}
         placeholder="Select something"
         defaultValue="First"
+        name="usage-select"
       />
     </div>
   );

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

@@ -277,7 +277,12 @@ export const TagsInput = factory<TagsInputFactory>((_props, ref) => {
       }
     }
 
-    if (event.key === 'Backspace' && length === 0 && _value.length > 0) {
+    if (
+      event.key === 'Backspace' &&
+      length === 0 &&
+      _value.length > 0 &&
+      !event.nativeEvent.isComposing
+    ) {
       onRemove?.(_value[_value.length - 1]);
       setValue(_value.slice(0, _value.length - 1));
     }

packages/@mantine/dates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/dates",
-  "version": "7.7.1",
+  "version": "7.7.2",
   "description": "Calendars, date and time pickers based on Mantine components",
   "homepage": "https://mantine.dev/dates/getting-started/",
   "license": "MIT",
@@ -45,8 +45,8 @@
     "directory": "packages/@mantine/dates"
   },
   "peerDependencies": {
-    "@mantine/core": "7.7.1",
-    "@mantine/hooks": "7.7.1",
+    "@mantine/core": "7.7.2",
+    "@mantine/hooks": "7.7.2",
     "dayjs": ">=1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/@mantine/dropzone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/dropzone",
-  "version": "7.7.1",
+  "version": "7.7.2",
   "description": "Dropzone component built with Mantine theme and components",
   "homepage": "https://mantine.dev/x/dropzone/",
   "license": "MIT",
@@ -44,8 +44,8 @@
     "directory": "packages/@mantine/dropzone"
   },
   "peerDependencies": {
-    "@mantine/core": "7.7.1",
-    "@mantine/hooks": "7.7.1",
+    "@mantine/core": "7.7.2",
+    "@mantine/hooks": "7.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/@mantine/form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/form",
-  "version": "7.7.1",
+  "version": "7.7.2",
   "description": "Mantine form management library",
   "homepage": "https://mantine.dev",
   "license": "MIT",

packages/@mantine/hooks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/hooks",
-  "version": "7.7.1",
+  "version": "7.7.2",
   "description": "A collection of 50+ hooks for state and UI management",
   "homepage": "https://mantine.dev",
   "license": "MIT",

packages/@mantine/modals/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/modals",
-  "version": "7.7.1",
+  "version": "7.7.2",
   "description": "Modals manager based on Mantine components",
   "homepage": "https://mantine.dev/x/modals/",
   "license": "MIT",
@@ -39,8 +39,8 @@
     "directory": "packages/@mantine/modals"
   },
   "peerDependencies": {
-    "@mantine/core": "7.7.1",
-    "@mantine/hooks": "7.7.1",
+    "@mantine/core": "7.7.2",
+    "@mantine/hooks": "7.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },