Merge branch 'master' of github.com:mantinedev/mantine

docs/src/docs/core/FileButton.mdx

@@ -23,3 +23,10 @@ import { FileButtonDemos } from '@mantine/demos';
 Set `multiple` prop to enable picking multiple files:
 
 <Demo data={FileButtonDemos.multiple} />
+
+## Reset file
+
+`resetRef` should be used to fix issue with stale value on hidden input element as input type file cannot be controlled.
+Call `resetRef` when user selection is cleared:
+
+<Demo data={FileButtonDemos.reset} />

src/mantine-core/src/Collapse/use-collapse.ts

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import { flushSync } from 'react-dom';
-import { useDidUpdate, useMergedRef } from '@mantine/hooks';
+import { useDidUpdate, mergeRefs } from '@mantine/hooks';
 
 function getAutoHeightDuration(height: number | string) {
   if (!height || typeof height === 'string') {
@@ -108,7 +108,7 @@ export function useCollapse({
     return {
       'aria-hidden': !opened,
       ...rest,
-      [refKey]: useMergedRef(el, theirRef),
+      [refKey]: mergeRefs(el, theirRef),
       onTransitionEnd: handleTransitionEnd,
       style: { boxSizing: 'border-box', ...style, ...styles },
     };

src/mantine-core/src/Modal/Modal.story.tsx

@@ -11,6 +11,16 @@ import { Menu } from '../Menu/Menu';
 import { Modal } from './Modal';
 import { MultiSelect } from '../MultiSelect/MultiSelect';
 
+const content = Array(20)
+  .fill(0)
+  .map((_, index) => (
+    <p key={index}>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, eum nihil odit, voluptatem
+      quae quibusdam sint omnis corporis beatae quod sunt magni sequi consequatur rem necessitatibus
+      quia eos! Accusamus, doloribus!
+    </p>
+  ));
+
 function WrappedModal(
   props: Omit<React.ComponentPropsWithoutRef<typeof Modal>, 'opened' | 'onClose'>
 ) {
@@ -81,4 +91,9 @@ storiesOf('Modal', module)
       <WrappedModal title="Modal with default radius">default radius</WrappedModal>
     </MantineProvider>
   ))
-  .add('Fullscreen', () => <WrappedModal fullScreen>Full screen modal</WrappedModal>);
+  .add('Fullscreen', () => (
+    <>
+      <WrappedModal fullScreen>Full screen modal</WrappedModal>
+      {content}
+    </>
+  ));

src/mantine-core/src/Modal/Modal.styles.ts

@@ -76,7 +76,7 @@ export default createStyles(
       marginTop: centered ? 'auto' : undefined,
       marginBottom: centered ? 'auto' : undefined,
       zIndex: 1,
-      marginLeft: 'calc(var(--removed-scroll-width, 0px) * -1)',
+      marginLeft: fullScreen ? undefined : 'calc(var(--removed-scroll-width, 0px) * -1)',
       ...getFullScreenStyles(fullScreen),
     },
 

src/mantine-demos/src/demos/core/FileButton/FileButton.demo.reset.tsx

@@ -0,0 +1,67 @@
+import React, { useState, useRef } from 'react';
+import { FileButton, Button, Group, Text } from '@mantine/core';
+
+const code = `
+import { useState, useRef } from 'react';
+import { FileButton, Button, Group, Text } from '@mantine/core';
+
+function Demo() {
+  const [file, setFile] = useState<File | null>(null);
+  const resetRef = useRef<() => void>(null);
+
+  const clearFile = () => {
+    setFile(null);
+    resetRef.current?.();
+  };
+
+  return (
+    <>
+    <Group position="center">
+    <FileButton resetRef={resetRef} onChange={setFile} accept="image/png,image/jpeg">
+      {(props) => <Button {...props}>Upload image</Button>}
+    </FileButton>
+    <Button disabled={!file} color="red" onClick={clearFile}>Reset</Button>
+  </Group>
+  {file && (
+    <Text size="sm" align="center" mt="sm">
+      Picked file: {file.name}
+    </Text>
+      )}
+    </>
+  );
+}
+`;
+
+function Demo() {
+  const [file, setFile] = useState<File | null>(null);
+  const resetRef = useRef<() => void>(null);
+
+  const clearFile = () => {
+    setFile(null);
+    resetRef.current?.();
+  };
+
+  return (
+    <>
+      <Group position="center">
+        <FileButton resetRef={resetRef} onChange={setFile} accept="image/png,image/jpeg">
+          {(props) => <Button {...props}>Upload image</Button>}
+        </FileButton>
+        <Button disabled={!file} color="red" onClick={clearFile}>
+          Reset
+        </Button>
+      </Group>
+      {file && (
+        <Text size="sm" align="center" mt="sm">
+          Picked file: {file.name}
+        </Text>
+      )}
+    </>
+  );
+}
+
+export const reset: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  code,
+};

src/mantine-demos/src/demos/core/FileButton/index.ts

@@ -1,2 +1,3 @@
 export { usage } from './FileButton.demo.usage';
 export { multiple } from './FileButton.demo.multiple';
+export { reset } from './FileButton.demo.reset';