Merge branch 'mantinedev:master' into feature/weeknumber

mantinedev · Nov 27, 2024 · 80d2bdb · 80d2bdb
2 parents 4d2690b + c83f5b0
commit 80d2bdb
Show file tree

Hide file tree

Showing 83 changed files with 1,527 additions and 712 deletions.
diff --git a/apps/help.mantine.dev/package.json b/apps/help.mantine.dev/package.json
@@ -31,7 +31,7 @@
     "react-dom": "^18.3.1",
     "react-imask": "^7.6.1",
     "remark-slug": "^7.0.1",
-    "shiki": "^1.1.7"
+    "shiki": "^1.23.1"
   },
   "devDependencies": {
     "@mdx-js/loader": "^3.0.0",

diff --git a/apps/mantine.dev/package.json b/apps/mantine.dev/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "@docs/demos": "workspace:*",
     "@docs/styles-api": "workspace:*",
-    "@floating-ui/react": "^0.26.27",
+    "@floating-ui/react": "^0.26.28",
     "@hello-pangea/dnd": "^16.3.0",
     "@mantine/carousel": "workspace:*",
     "@mantine/charts": "workspace:*",
@@ -59,7 +59,7 @@
     "@tiptap/starter-kit": "^2.9.1",
     "@types/node": "^20.9.0",
     "@types/react": "18.3.12",
-    "chroma-js": ">=2.4.2",
+    "chroma-js": "^3.1.2",
     "dayjs": "^1.11.13",
     "embla-carousel": "^7.1.0",
     "embla-carousel-autoplay": "^7.1.0",
@@ -71,11 +71,11 @@
     "next-sitemap": "^4.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-dropzone-esm": "15.0.1",
+    "react-dropzone-esm": "15.2.0",
     "react-number-format": "^5.4.2",
     "recharts": "^2.13.3",
     "remark-slug": "^7.0.1",
-    "shiki": "^1.1.7",
+    "shiki": "^1.23.1",
     "typescript": "5.6.3"
   },
   "devDependencies": {

diff --git a/apps/mantine.dev/src/components/Footer/data.ts b/apps/mantine.dev/src/components/Footer/data.ts
@@ -8,7 +8,7 @@ export const FOOTER_LINKS_DATA: LinksGroupProps[] = [
       { type: 'next', label: 'Contribute', link: '/contribute' },
       { type: 'next', label: 'About Mantine', link: '/about' },
       { type: 'next', label: 'Changelog', link: '/changelog/previous-versions' },
-      { type: 'link', label: 'Releases', link: meta.gitHubLinks.releases },
+      { type: 'link', label: 'GitHub Releases', link: meta.gitHubLinks.releases },
     ],
   },
 
@@ -29,7 +29,7 @@ export const FOOTER_LINKS_DATA: LinksGroupProps[] = [
     title: 'Project',
     data: [
       { type: 'link', label: 'Mantine UI', link: meta.uiLink },
-      { type: 'link', label: 'Documentation', link: meta.docsLink },
+      { type: 'link', label: 'Help Center', link: meta.helpCenterLink },
       { type: 'link', label: 'Github organization', link: meta.gitHubLinks.organization },
       { type: 'link', label: 'npm organization', link: meta.npmLink },
     ],

diff --git a/apps/mantine.dev/src/components/ModalsProviderDemo/ModalsProviderDemo.tsx b/apps/mantine.dev/src/components/ModalsProviderDemo/ModalsProviderDemo.tsx
@@ -1,4 +1,5 @@
-import { Button, Text } from '@mantine/core';
+import { IconCheck } from '@tabler/icons-react';
+import { Button, Center, Loader, rem, Stack, Text } from '@mantine/core';
 import { ContextModalProps, ModalsProvider } from '@mantine/modals';
 
 interface ModalsProviderDemoProps {
@@ -18,11 +19,33 @@ const demonstrationModal = ({
   </>
 );
 
+const asyncDemonstrationModal = ({
+  context,
+  id,
+  innerProps,
+}: ContextModalProps<{ modalBody: string; loading: boolean }>) => (
+  <>
+    <Stack>
+      <Text size="sm">{innerProps.modalBody}</Text>
+      <Center>
+        {innerProps.loading ? (
+          <Loader size={32} />
+        ) : (
+          <IconCheck style={{ width: rem(32), height: rem(32), color: 'green' }} />
+        )}
+      </Center>
+    </Stack>
+    <Button fullWidth mt="md" disabled={innerProps.loading} onClick={() => context.closeModal(id)}>
+      Close modal
+    </Button>
+  </>
+);
+
 export function ModalsProviderDemo({ children }: ModalsProviderDemoProps) {
   return (
     <ModalsProvider
       labels={{ confirm: 'Confirm', cancel: 'Cancel' }}
-      modals={{ demonstration: demonstrationModal }}
+      modals={{ demonstration: demonstrationModal, asyncDemonstration: asyncDemonstrationModal }}
     >
       {children}
     </ModalsProvider>

diff --git a/apps/mantine.dev/src/mdx/data/mdx-meta-data.ts b/apps/mantine.dev/src/mdx/data/mdx-meta-data.ts
@@ -187,5 +187,6 @@ export const MDX_META_DATA: Record<string, Frontmatter> = {
     title: 'All releases',
     slug: '/changelog/all-releases',
     hideHeader: true,
+    hideInSearch: true,
   },
 };
diff --git a/apps/mantine.dev/src/pages/charts/bar-chart.mdx b/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} />
diff --git a/apps/mantine.dev/src/pages/form/use-form.mdx b/apps/mantine.dev/src/pages/form/use-form.mdx
@@ -200,6 +200,25 @@ function Demo() {
 }
 ```
 
+## onSubmitPreventDefault option
+
+By default, `event.preventDefault()` is called on the form `onSubmit` handler.
+If you want to change this behavior, you can pass `onSubmitPreventDefault` option
+to `useForm` hook. It can have the following values:
+
+- `always` (default) - always call `event.preventDefault()`
+- `never` - never call `event.preventDefault()`
+- `validation-failed` - call `event.preventDefault()` only if validation failed
+
+```tsx
+import { useForm } from '@mantine/form';
+
+const form = useForm({
+  mode: 'uncontrolled',
+  onSubmitPreventDefault: 'never',
+});
+```
+
 ### Touched and dirty
 
 [Touched & dirty guide](/form/status/)

diff --git a/apps/mantine.dev/src/pages/x/modals.mdx b/apps/mantine.dev/src/pages/x/modals.mdx
@@ -175,10 +175,12 @@ props:
 
 ## Dynamic Content and the modals manager
 
-Note that when using the Modals manager, dynamic content is not supported.
-Once modal is opened, a snapshot is saved into internal state and cannot be updated.
+The Modals manager allows you to dynamically update the content and properties of both standard and context modals after they are opened.
 
-If you intend to have dynamic content in modals, either:
+To update regular modals, use the `modals.updateModal` function:
 
-- Use internal component state, or
-- Use the modal component instead of modals manager
+<Demo data={ModalsDemos.updateModal} />
+
+Context modals can also be updated dynamically using `modals.updateContextModal`:
+
+<Demo data={ModalsDemos.updateContextModal} />
diff --git a/apps/mantine.dev/src/pages/x/tiptap.mdx b/apps/mantine.dev/src/pages/x/tiptap.mdx
@@ -32,6 +32,48 @@ you should look for documentation on [tiptap.dev](https://tiptap.dev/) website.
 
 <Demo data={TipTapDemos.usage} />
 
+## Controlled
+
+To control editor state, create a wrapper component and pass `onChange` handler
+to `useEditor` hook:
+
+```tsx
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { RichTextEditor as MantineRichTextEditor } from '@mantine/tiptap';
+
+interface RichTextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function RichTextEditor({
+  value,
+  onChange,
+}: RichTextEditorProps) {
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: value,
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+  });
+
+  return (
+    <MantineRichTextEditor editor={editor}>
+      <MantineRichTextEditor.Toolbar>
+        <MantineRichTextEditor.ControlsGroup>
+          <MantineRichTextEditor.Bold />
+          <MantineRichTextEditor.Italic />
+        </MantineRichTextEditor.ControlsGroup>
+      </MantineRichTextEditor.Toolbar>
+
+      <MantineRichTextEditor.Content />
+    </MantineRichTextEditor>
+  );
+}
+```
+
 ## Controls and extensions
 
 Some controls require installation of additional [Tiptap extensions](https://tiptap.dev/extensions).

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-a91763c0e2",
-  "version": "7.14.1",
+  "version": "7.14.2",
   "description": "Mantine Components Monorepo",
   "packageManager": "[email protected]",
   "license": "MIT",
@@ -59,15 +59,18 @@
     "syncpack": "syncpack list-mismatches",
     "syncpack:format": "syncpack format",
     "prettier:test": "prettier --check \"**/*.{ts,tsx,mdx,css}\"",
-    "prettier:write": "prettier --write \"**/*.{ts,tsx,mdx,css}\""
+    "prettier:write": "prettier --write \"**/*.{ts,tsx,mdx,css}\"",
+    "ncu:docs": "npx npm-check-updates --packageFile './apps/*/package.json' -x @tabler/icons-react",
+    "ncu:root": "npx npm-check-updates --packageFile './package.json' -x @tabler/icons-react",
+    "ncu": "npm run ncu:docs && npm run ncu:root"
   },
   "dependencies": {
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/serialize": "^1.3.2",
     "@emotion/server": "^11.11.0",
     "@emotion/utils": "^1.4.1",
-    "@floating-ui/react": "^0.26.27",
+    "@floating-ui/react": "^0.26.28",
     "@tabler/icons-react": "^3.3.0",
     "@tiptap/core": "^2.9.1",
     "@tiptap/extension-code-block": "^2.9.1",
@@ -87,7 +90,7 @@
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
-    "chroma-js": ">=2.4.2",
+    "chroma-js": "^3.1.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "embla-carousel": "^7.1.0",
@@ -99,30 +102,30 @@
     "klona": "^2.0.6",
     "lowlight": "^3.1.0",
     "react": "^18.3.1",
-    "react-dropzone-esm": "15.0.1",
+    "react-dropzone-esm": "15.2.0",
     "react-imask": "^7.6.1",
     "react-number-format": "^5.4.2",
     "react-remove-scroll": "^2.6.0",
-    "react-textarea-autosize": "8.5.4",
+    "react-textarea-autosize": "8.5.5",
     "react-transition-group": "4.4.5",
     "recharts": "^2.13.3",
-    "shiki": "^1.1.7",
-    "type-fest": "^4.26.1"
+    "shiki": "^1.23.1",
+    "type-fest": "^4.27.0"
   },
   "devDependencies": {
     "@babel/core": "7.26.0",
     "@babel/preset-env": "7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "7.26.0",
-    "@eslint/js": "^9.14.0",
+    "@eslint/js": "^9.15.0",
     "@hello-pangea/dnd": "^16.3.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/nextjs": "^8.4.2",
-    "@storybook/react": "^8.4.2",
+    "@storybook/nextjs": "^8.4.4",
+    "@storybook/react": "^8.4.4",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
@@ -146,12 +149,11 @@
     "css-loader": "^7.1.2",
     "esbuild": "^0.24.0",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^9.14.0",
+    "eslint": "^9.15.0",
     "eslint-config-mantine": "^4.0.3",
     "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.2",
-    "execa": "^8.0.1",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "gh-pages": "^6.2.0",
@@ -165,35 +167,36 @@
     "new-github-release-url": "^2.0.0",
     "next": "14.2.12",
     "open": "^10.1.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
     "postcss-preset-mantine": "1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.3.3",
     "react-dom": "^18.3.1",
     "react-virtuoso": "^4.12.0",
     "rimraf": "^6.0.1",
-    "rollup": "^4.24.4",
+    "rollup": "^4.27.3",
     "rollup-plugin-banner2": "^1.3.0",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "signale": "^1.4.0",
     "simple-git": "^3.27.0",
-    "storybook": "^8.4.2",
+    "storybook": "^8.4.4",
     "storybook-dark-mode": "^4.0.2",
     "style-loader": "^4.0.0",
     "stylelint": "^16.10.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "syncpack": "^13.0.0",
     "ts-node": "^10.9.2",
-    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "tsx": "^4.19.2",
     "typescript": "5.6.3",
-    "typescript-eslint": "^8.13.0",
+    "typescript-eslint": "^8.15.0",
     "version-next": "^1.0.2",
     "webpack": "^5.96.1",
-    "wrangler": "^3.84.1",
-    "yargs": "^17.7.2"
+    "wrangler": "^3.88.0",
+    "yargs": "^17.7.2",
+    "zx": "^8.2.2"
   },
   "resolutions": {
     "prosemirror-model": "1.18.1",

diff --git a/packages/@docs/demos/package.json b/packages/@docs/demos/package.json
@@ -44,7 +44,7 @@
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x",
     "recharts": "^2.13.3",
-    "shiki": "^1.1.7"
+    "shiki": "^1.23.1"
   },
   "devDependencies": {
     "@docs/styles-api": "workspace:*",