From cfefc9354b6763477fc14e9918d5dd6a28fec848 Mon Sep 17 00:00:00 2001 From: Vitaly Rtishchev Date: Sun, 14 Aug 2022 11:00:52 +0300 Subject: [PATCH 1/3] [@mantine/core] Modal: Fix incorrect scrollbar offset on Windows/Linux (#1721) --- src/mantine-core/src/Modal/Modal.story.tsx | 17 ++++++++++++++++- src/mantine-core/src/Modal/Modal.styles.ts | 2 +- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/mantine-core/src/Modal/Modal.story.tsx b/src/mantine-core/src/Modal/Modal.story.tsx index 420793bcf8d..fe57c466d1c 100644 --- a/src/mantine-core/src/Modal/Modal.story.tsx +++ b/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) => ( +

+ 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! +

+ )); + function WrappedModal( props: Omit, 'opened' | 'onClose'> ) { @@ -81,4 +91,9 @@ storiesOf('Modal', module) default radius )) - .add('Fullscreen', () => Full screen modal); + .add('Fullscreen', () => ( + <> + Full screen modal + {content} + + )); diff --git a/src/mantine-core/src/Modal/Modal.styles.ts b/src/mantine-core/src/Modal/Modal.styles.ts index 6fc907b035b..b7638e26283 100644 --- a/src/mantine-core/src/Modal/Modal.styles.ts +++ b/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), }, From ea905bb1abc92a6ed3558b9193e819a5c05ead8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20van=20der=20Sande?= Date: Sun, 14 Aug 2022 13:28:38 +0200 Subject: [PATCH 2/3] [@mantine/core] Collapse: Fixed error thrown when using component with reduced motion (#2116) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Jérémie van der Sande --- src/mantine-core/src/Collapse/use-collapse.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mantine-core/src/Collapse/use-collapse.ts b/src/mantine-core/src/Collapse/use-collapse.ts index 384f3c1c714..3aeef2955bb 100644 --- a/src/mantine-core/src/Collapse/use-collapse.ts +++ b/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 }, }; From 3318f68358405b87b5cf168f621d7f5e91d5f1d4 Mon Sep 17 00:00:00 2001 From: Meier Lukas Date: Sun, 14 Aug 2022 14:06:13 +0200 Subject: [PATCH 3/3] [docs] Add reset part to FileButton docs (#2113) * [docs] Add reset part to file-button docs * [docs] Add reset part to FileButton docs - resolve issues --- docs/src/docs/core/FileButton.mdx | 7 ++ .../core/FileButton/FileButton.demo.reset.tsx | 67 +++++++++++++++++++ .../src/demos/core/FileButton/index.ts | 1 + 3 files changed, 75 insertions(+) create mode 100644 src/mantine-demos/src/demos/core/FileButton/FileButton.demo.reset.tsx diff --git a/docs/src/docs/core/FileButton.mdx b/docs/src/docs/core/FileButton.mdx index 55c3a99b3fc..8ba3d5bf9b1 100644 --- a/docs/src/docs/core/FileButton.mdx +++ b/docs/src/docs/core/FileButton.mdx @@ -23,3 +23,10 @@ import { FileButtonDemos } from '@mantine/demos'; Set `multiple` prop to enable picking multiple files: + +## 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: + + diff --git a/src/mantine-demos/src/demos/core/FileButton/FileButton.demo.reset.tsx b/src/mantine-demos/src/demos/core/FileButton/FileButton.demo.reset.tsx new file mode 100644 index 00000000000..965c85b1890 --- /dev/null +++ b/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(null); + const resetRef = useRef<() => void>(null); + + const clearFile = () => { + setFile(null); + resetRef.current?.(); + }; + + return ( + <> + + + {(props) => } + + + + {file && ( + + Picked file: {file.name} + + )} + + ); +} +`; + +function Demo() { + const [file, setFile] = useState(null); + const resetRef = useRef<() => void>(null); + + const clearFile = () => { + setFile(null); + resetRef.current?.(); + }; + + return ( + <> + + + {(props) => } + + + + {file && ( + + Picked file: {file.name} + + )} + + ); +} + +export const reset: MantineDemo = { + type: 'demo', + component: Demo, + code, +}; diff --git a/src/mantine-demos/src/demos/core/FileButton/index.ts b/src/mantine-demos/src/demos/core/FileButton/index.ts index 446d82af5ab..97eaff270c8 100644 --- a/src/mantine-demos/src/demos/core/FileButton/index.ts +++ b/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';