[docs] Add dropzone pointer-events documentation (#3067)

docs/src/docs/others/dropzone.mdx

@@ -80,6 +80,13 @@ To open files browser from outside of component use `openRef` prop to get functi
 
 <Demo data={DropzoneDemos.manual} />
 
+## Enable child pointer event
+
+By default, Dropzone disables pointer events on its children for dragging events to work. So when we set `activateOnClick` to `false`,
+clicking on any children inside Dropzone will do nothing. However, You can set style `pointerEvents: 'all'` to make children events to work:
+
+<Demo data={DropzoneDemos.enableChildPointerEvent} />
+
 ## Mime types
 
 To specify file types provide an object with the keys set to the [mime type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)

src/mantine-demos/src/demos/dropzone/Dropzone.demo.enableChildPointerEvent.tsx

@@ -0,0 +1,49 @@
+import React, { useRef } from 'react';
+import { Button } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { MantineDemo } from '@mantine/ds';
+
+const code = `
+import { useRef } from 'react';
+import { Button, Group } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+
+function Demo() {
+  const openRef = useRef<() => void>(null);
+
+  return (
+    <>
+      <Dropzone
+        openRef={openRef}
+        activateOnClick={false}
+        styles={{ inner: { pointerEvents: 'all' } }}
+      >
+        <Button onClick={() => openRef.current()}>Select files</Button>
+      </Dropzone>
+    </>
+  );
+}
+`;
+
+function Demo() {
+  const openRef = useRef<() => void>(null);
+
+  return (
+    <>
+      <Dropzone
+        openRef={openRef}
+        onDrop={() => {}}
+        activateOnClick={false}
+        styles={{ inner: { pointerEvents: 'all' } }}
+      >
+        <Button onClick={() => openRef.current()}>Select files</Button>
+      </Dropzone>
+    </>
+  );
+}
+
+export const enableChildPointerEvent: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  code,
+};

src/mantine-demos/src/demos/dropzone/index.ts

@@ -2,6 +2,7 @@ export { usage } from './Dropzone.demo.usage';
 export { loading } from './Dropzone.demo.loading';
 export { disabled } from './Dropzone.demo.disabled';
 export { manual } from './Dropzone.demo.manual';
+export { enableChildPointerEvent } from './Dropzone.demo.enableChildPointerEvent';
 export { fullScreen } from './Dropzone.demo.fullScreen';
 export { stylesApi } from './Dropzone.demo.stylesApi';
 export { preview } from './Dropzone.demo.preview';