Merge branch 'mantinedev:master' into master

mantinedev · Sep 6, 2022 · 3403a93 · 3403a93
2 parents df1bebd + e267c1d
commit 3403a93
Show file tree

Hide file tree

Showing 53 changed files with 187 additions and 136 deletions.
diff --git a/docs/src/docs/guides/remix.mdx b/docs/src/docs/guides/remix.mdx
@@ -61,7 +61,7 @@ Add [MantineProvider](/theming/mantine-provider/) and `StylesPlaceholder` to the
 ```tsx
 import type { MetaFunction } from '@remix-run/node';
 import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
-import { MantineProvider } from '@mantine/core';
+import { MantineProvider, createEmotionCache } from '@mantine/core';
 import { StylesPlaceholder } from '@mantine/remix';
 import { theme } from './theme';
 
@@ -71,14 +71,16 @@ export const meta: MetaFunction = () => ({
   viewport: 'width=device-width,initial-scale=1',
 });
 
+createEmotionCache({ key: 'mantine' });
+
 export default function App() {
   return (
     <MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
       <html lang="en">
         <head>
+          <StylesPlaceholder />
           <Meta />
           <Links />
-          <StylesPlaceholder />
         </head>
         <body>
           <Outlet />

diff --git a/docs/src/docs/others/spotlight.mdx b/docs/src/docs/others/spotlight.mdx
@@ -119,7 +119,7 @@ function SpotlightControl() {
   const spotlight = useSpotlight();
   return (
     <Group position="center">
-      <Button onClick={spotlight.openSpotlight}>Open spotlight</Button>
+      <Button onClick={() => spotlight.openSpotlight()}>Open spotlight</Button>
     </Group>
   );
 }

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "workspaces": [
     "src/*"
   ],
-  "version": "5.2.5",
+  "version": "5.2.6",
   "description": "Mantine Components Monorepo",
   "main": "index.js",
   "repository": "https://github.com/mantinedev/mantine.git",

diff --git a/scripts/changelog.ts b/scripts/changelog.ts
@@ -1,11 +1,14 @@
 import simpleGit from 'simple-git';
+import packageJson from '../package.json';
 
 const git = simpleGit();
 
 async function getChangelog() {
   const logs = await git.log({ maxCount: 100 });
   const messages = logs.all.map((commit) => commit.message);
-  const lastRelease = messages.findIndex((message) => message.includes('release'));
+  const lastRelease = messages.findIndex(
+    (message) => message.includes('release') && !message.includes(packageJson.version)
+  );
   const notes = messages
     .slice(0, lastRelease)
     .filter((message) => /\[@mantine/.test(message) && !message.includes('[@mantine/demos]'))

diff --git a/src/mantine-carousel/package.json b/src/mantine-carousel/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mantine/carousel",
   "description": "Embla based carousel",
-  "version": "5.2.5",
+  "version": "5.2.6",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -22,13 +22,13 @@
     "slick"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.2.5",
-    "@mantine/hooks": "5.2.5",
+    "@mantine/core": "5.2.6",
+    "@mantine/hooks": "5.2.6",
     "embla-carousel-react": "^7.0.0",
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.2.5"
+    "@mantine/utils": "5.2.6"
   },
   "devDependencies": {}
 }
diff --git a/src/mantine-core/package.json b/src/mantine-core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mantine/core",
   "description": "React components library focused on usability, accessibility and developer experience",
-  "version": "5.2.5",
+  "version": "5.2.6",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -27,13 +27,13 @@
     "emotion"
   ],
   "peerDependencies": {
-    "@mantine/hooks": "5.2.5",
+    "@mantine/hooks": "5.2.6",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.2.5",
-    "@mantine/styles": "5.2.5",
+    "@mantine/utils": "5.2.6",
+    "@mantine/styles": "5.2.6",
     "@radix-ui/react-scroll-area": "1.0.0",
     "react-textarea-autosize": "8.3.4",
     "@floating-ui/react-dom-interactions": "0.6.6"

diff --git a/src/mantine-core/src/Drawer/Drawer.styles.ts b/src/mantine-core/src/Drawer/Drawer.styles.ts
@@ -16,6 +16,7 @@ export interface DrawerStylesParams {
   position: DrawerPosition;
   size: number | string;
   zIndex: React.CSSProperties['zIndex'];
+  withOverlay: boolean;
 }
 
 interface GetPositionStyles {
@@ -47,39 +48,43 @@ function getPositionStyles({
   }
 }
 
-export default createStyles((theme, { position, size, zIndex }: DrawerStylesParams) => ({
-  closeButton: {},
-  overlay: {},
+export default createStyles(
+  (theme, { position, size, zIndex, withOverlay }: DrawerStylesParams) => ({
+    closeButton: {},
+    overlay: {},
 
-  root: {
-    position: 'fixed',
-    zIndex,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
+    root: {
+      position: 'fixed',
+      zIndex,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: withOverlay === false ? 'none' : undefined,
+    },
 
-  drawer: {
-    ...getPositionStyles({ position, size, theme }),
-    maxWidth: '100%',
-    maxHeight: '100vh',
-    position: 'fixed',
-    outline: 0,
-    zIndex: 1,
-  },
+    drawer: {
+      ...getPositionStyles({ position, size, theme }),
+      maxWidth: '100%',
+      maxHeight: '100vh',
+      position: 'fixed',
+      outline: 0,
+      zIndex: 1,
+      pointerEvents: withOverlay === false ? 'auto' : undefined,
+    },
 
-  title: {
-    marginRight: theme.spacing.md,
-    textOverflow: 'ellipsis',
-    display: 'block',
-    wordBreak: 'break-word',
-  },
+    title: {
+      marginRight: theme.spacing.md,
+      textOverflow: 'ellipsis',
+      display: 'block',
+      wordBreak: 'break-word',
+    },
 
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: theme.spacing.md,
-  },
-}));
+    header: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: theme.spacing.md,
+    },
+  })
+);
diff --git a/src/mantine-core/src/Drawer/Drawer.tsx b/src/mantine-core/src/Drawer/Drawer.tsx
@@ -164,7 +164,7 @@ export function Drawer(props: DrawerProps) {
   } = useComponentDefaultProps('Drawer', defaultProps, props);
 
   const { classes, cx, theme } = useStyles(
-    { size, position, zIndex },
+    { size, position, zIndex, withOverlay },
     { classNames, styles, unstyled, name: 'Drawer' }
   );
 

diff --git a/src/mantine-core/src/PasswordInput/PasswordInput.tsx b/src/mantine-core/src/PasswordInput/PasswordInput.tsx
@@ -89,6 +89,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
     unstyled,
     visibilityToggleLabel,
     withAsterisk,
+    inputWrapperOrder,
     ...others
   } = useComponentDefaultProps('PasswordInput', defaultProps, props);
 
@@ -145,6 +146,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>((p
       labelProps={labelProps}
       unstyled={unstyled}
       withAsterisk={withAsterisk}
+      inputWrapperOrder={inputWrapperOrder}
       {...systemStyles}
       {...wrapperProps}
     >

diff --git a/src/mantine-dates/package.json b/src/mantine-dates/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@mantine/dates",
   "description": "Calendars, date and time pickers based on Mantine components",
-  "version": "5.2.5",
+  "version": "5.2.6",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -23,13 +23,13 @@
     "picker"
   ],
   "peerDependencies": {
-    "@mantine/core": "5.2.5",
-    "@mantine/hooks": "5.2.5",
+    "@mantine/core": "5.2.6",
+    "@mantine/hooks": "5.2.6",
     "dayjs": ">=1.0.0",
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@mantine/utils": "5.2.5"
+    "@mantine/utils": "5.2.6"
   },
   "devDependencies": {}
 }
diff --git a/src/mantine-demos/package.json b/src/mantine-demos/package.json
@@ -2,7 +2,7 @@
   "name": "@mantine/demos",
   "description": "Demos used in documentation",
   "private": true,
-  "version": "5.2.5",
+  "version": "5.2.6",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
@@ -18,20 +18,20 @@
   "peerDependencies": {
     "react": "*",
     "@emotion/styled": "*",
-    "@mantine/core": "5.2.5",
-    "@mantine/hooks": "5.2.5",
-    "@mantine/dates": "5.2.5",
-    "@mantine/form": "5.2.5",
-    "@mantine/rte": "5.2.5",
-    "@mantine/modals": "5.2.5",
-    "@mantine/nprogress": "5.2.5",
-    "@mantine/notifications": "5.2.5",
-    "@mantine/dropzone": "5.2.5",
-    "@mantine/prism": "5.2.5",
-    "@mantine/labs": "5.2.5",
-    "@mantine/spotlight": "5.2.5",
-    "@mantine/carousel": "5.2.5",
-    "@mantine/ds": "5.2.5",
+    "@mantine/core": "5.2.6",
+    "@mantine/hooks": "5.2.6",
+    "@mantine/dates": "5.2.6",
+    "@mantine/form": "5.2.6",
+    "@mantine/rte": "5.2.6",
+    "@mantine/modals": "5.2.6",
+    "@mantine/nprogress": "5.2.6",
+    "@mantine/notifications": "5.2.6",
+    "@mantine/dropzone": "5.2.6",
+    "@mantine/prism": "5.2.6",
+    "@mantine/labs": "5.2.6",
+    "@mantine/spotlight": "5.2.6",
+    "@mantine/carousel": "5.2.6",
+    "@mantine/ds": "5.2.6",
     "@tabler/icons": "*",
     "react-beautiful-dnd": "*",
     "embla-carousel-autoplay": "*",

diff --git a/src/mantine-demos/src/demos/core/MultiSelect/MultiSelect.demo.countries.tsx b/src/mantine-demos/src/demos/core/MultiSelect/MultiSelect.demo.countries.tsx
@@ -161,7 +161,7 @@ export function CountriesSelect(props: Partial<MultiSelectProps>) {
       searchable
       defaultValue={['US', 'FI']}
       placeholder="Pick countries"
-      label="Which countries you visited last year?"
+      label="Which countries did you visit last year?"
       {...props}
     />
   );

diff --git a/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.boundaries.tsx b/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.boundaries.tsx
@@ -26,6 +26,7 @@ function Demo() {
         label="Event date"
         minDate={dayjs(new Date()).startOf('month').add(5, 'days').toDate()}
         maxDate={dayjs(new Date()).endOf('month').subtract(5, 'days').toDate()}
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.disabled.tsx b/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.disabled.tsx
@@ -20,6 +20,7 @@ function Demo() {
         placeholder="Your birthday"
         disabled
         value={new Date()}
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.exclude.tsx b/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.exclude.tsx
@@ -16,6 +16,7 @@ function Demo() {
         placeholder="Pick date"
         label="Event date"
         excludeDate={(date) => date.getDay() === 0 || date.getDay() === 6}
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.firstDaySunday.tsx b/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.firstDaySunday.tsx
@@ -22,6 +22,7 @@ function Demo() {
         label="Sunday as first day of week"
         placeholder="Pick date"
         firstDayOfWeek="sunday"
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.flip.tsx b/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.flip.tsx
@@ -13,7 +13,7 @@ export const flip: MantineDemo = {
   type: 'configurator',
   component: (props: any) => (
     <div style={{ maxWidth: 340, marginLeft: 'auto', marginRight: 'auto' }}>
-      <DatePicker placeholder="Pick date" label="Event date" {...props} />
+      <DatePicker placeholder="Pick date" label="Event date" {...props} withinPortal />
     </div>
   ),
   codeTemplate,

diff --git a/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.format.tsx b/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.format.tsx
@@ -26,6 +26,7 @@ function Demo() {
         inputFormat="MM/DD/YYYY"
         labelFormat="MM/YYYY"
         defaultValue={new Date()}
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.freeInput.tsx b/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.freeInput.tsx
@@ -12,7 +12,13 @@ function Demo() {
 function Demo() {
   return (
     <div style={{ maxWidth: 340, marginLeft: 'auto', marginRight: 'auto' }}>
-      <DatePicker placeholder="Pick date" label="Event date" withAsterisk allowFreeInput />
+      <DatePicker
+        placeholder="Pick date"
+        label="Event date"
+        withAsterisk
+        allowFreeInput
+        withinPortal
+      />
     </div>
   );
 }

diff --git a/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.icon.tsx b/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.icon.tsx
@@ -20,7 +20,12 @@ function Demo() {
 function Demo() {
   return (
     <div style={{ maxWidth: 340, marginLeft: 'auto', marginRight: 'auto' }}>
-      <DatePicker placeholder="Pick date" label="Event date" icon={<IconCalendar size={16} />} />
+      <DatePicker
+        placeholder="Pick date"
+        label="Event date"
+        icon={<IconCalendar size={16} />}
+        withinPortal
+      />
     </div>
   );
 }

diff --git a/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.localization.tsx b/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.localization.tsx
@@ -26,6 +26,7 @@ function Demo() {
         placeholder="Выберите дату"
         label="Дата события"
         defaultValue={new Date()}
+        withinPortal
       />
     </div>
   );

diff --git a/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.modal.tsx b/src/mantine-demos/src/demos/dates/DatePicker/DatePicker.demo.modal.tsx
@@ -12,7 +12,7 @@ function Demo() {
 function Demo() {
   return (
     <div style={{ maxWidth: 340, marginLeft: 'auto', marginRight: 'auto' }}>
-      <DatePicker dropdownType="modal" placeholder="Pick date" label="Event date" />
+      <DatePicker dropdownType="modal" placeholder="Pick date" label="Event date" withinPortal />
     </div>
   );
 }