@toptal/picasso 30.0.4 → 30.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Drawer/Drawer.d.ts +2 -0
- package/Drawer/Drawer.js +3 -1
- package/Drawer/Drawer.js.map +1 -1
- package/Modal/Modal.js +2 -0
- package/Modal/Modal.js.map +1 -1
- package/package.json +1 -1
- package/utils/Modal/modal-manager.d.ts +0 -5
- package/utils/Modal/modal-manager.js +0 -23
- package/utils/Modal/modal-manager.js.map +1 -1
- package/utils/__tests__/use-body-scroll-lock.test.d.ts +1 -0
- package/utils/__tests__/use-body-scroll-lock.test.js +65 -0
- package/utils/__tests__/use-body-scroll-lock.test.js.map +1 -0
- package/utils/use-body-scroll-lock.d.ts +1 -0
- package/utils/use-body-scroll-lock.js +53 -0
- package/utils/use-body-scroll-lock.js.map +1 -0
package/Drawer/Drawer.d.ts
CHANGED
|
@@ -19,6 +19,8 @@ export interface Props extends BaseProps {
|
|
|
19
19
|
width?: WidthType;
|
|
20
20
|
/** Animation lifecycle callbacks. Backed by [react-transition-group/Transition](https://reactcommunity.org/react-transition-group/transition#Transition-props) */
|
|
21
21
|
transitionProps?: TransitionProps;
|
|
22
|
+
/** enable Drawer to maintain body scroll lock */
|
|
23
|
+
maintainBodyScrollLock?: boolean;
|
|
22
24
|
}
|
|
23
25
|
export declare const Drawer: {
|
|
24
26
|
(props: Props): JSX.Element;
|
package/Drawer/Drawer.js
CHANGED
|
@@ -20,13 +20,15 @@ import ButtonCircular from '../ButtonCircular';
|
|
|
20
20
|
import Container from '../Container';
|
|
21
21
|
import DrawerTitle from '../DrawerTitle';
|
|
22
22
|
import { useIsomorphicLayoutEffect } from '../utils';
|
|
23
|
+
import { useBodyScrollLock } from '../utils/use-body-scroll-lock';
|
|
23
24
|
const useStyles = makeStyles(styles, { name: 'PicassoDrawer' });
|
|
24
25
|
export const Drawer = (props) => {
|
|
25
|
-
const { children, disablePortal, open, onClose, title, width = 'regular', transitionProps } = props, rest = __rest(props, ["children", "disablePortal", "open", "onClose", "title", "width", "transitionProps"]);
|
|
26
|
+
const { children, disablePortal, open, onClose, title, width = 'regular', transitionProps, maintainBodyScrollLock } = props, rest = __rest(props, ["children", "disablePortal", "open", "onClose", "title", "width", "transitionProps", "maintainBodyScrollLock"]);
|
|
26
27
|
const classes = useStyles();
|
|
27
28
|
const { setHasDrawer } = useDrawer();
|
|
28
29
|
const theme = useTheme();
|
|
29
30
|
const container = usePicassoRoot();
|
|
31
|
+
useBodyScrollLock(Boolean(maintainBodyScrollLock && open));
|
|
30
32
|
useIsomorphicLayoutEffect(() => {
|
|
31
33
|
setHasDrawer(open);
|
|
32
34
|
const cleanup = () => {
|
package/Drawer/Drawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,UAAU,EAAS,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACpE,OAAO,KAAoB,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,WAAW,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}
|
package/Modal/Modal.js
CHANGED
|
@@ -20,6 +20,7 @@ import { ModalManager } from '../utils/Modal';
|
|
|
20
20
|
import ButtonCircular from '../ButtonCircular';
|
|
21
21
|
import styles from './styles';
|
|
22
22
|
import ModalContext from './ModalContext';
|
|
23
|
+
import { useBodyScrollLock } from '../utils/use-body-scroll-lock';
|
|
23
24
|
const useStyles = makeStyles(styles, {
|
|
24
25
|
name: 'PicassoModal',
|
|
25
26
|
});
|
|
@@ -96,6 +97,7 @@ export const Modal = forwardRef(function Modal(props, ref) {
|
|
|
96
97
|
defaultManager.remove(currentModalId);
|
|
97
98
|
};
|
|
98
99
|
}, [open]);
|
|
100
|
+
useBodyScrollLock(open);
|
|
99
101
|
const isSmall = useBreakpoint('small');
|
|
100
102
|
const handleClose = useCallback((_event, reason) => {
|
|
101
103
|
if (reason === 'escapeKeyDown' && onClose) {
|
package/Modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EAGV,SAAS,EACT,MAAM,EACN,WAAW,GACZ,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAE7C,OAAO,EAAE,MAAM,YAAY,CAAA;AAM3B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACtC,OAAO,eAAe,MAAM,4BAA4B,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAC9C,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,YAAY,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
export declare class ModalManager {
|
|
2
2
|
modals: number[];
|
|
3
|
-
scrollLock: {
|
|
4
|
-
prevBodyOverflow: string;
|
|
5
|
-
} | undefined;
|
|
6
3
|
add(modalId: number): void;
|
|
7
4
|
remove(modalId: number): void;
|
|
8
5
|
isTopModal(modalId: number): boolean;
|
|
9
|
-
private dropScrollLock;
|
|
10
|
-
private liftScrollLock;
|
|
11
6
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { isBrowser } from '@toptal/picasso-shared';
|
|
2
1
|
export class ModalManager {
|
|
3
2
|
constructor() {
|
|
4
3
|
this.modals = [];
|
|
@@ -8,7 +7,6 @@ export class ModalManager {
|
|
|
8
7
|
return;
|
|
9
8
|
}
|
|
10
9
|
this.modals.push(modalId);
|
|
11
|
-
this.dropScrollLock();
|
|
12
10
|
}
|
|
13
11
|
remove(modalId) {
|
|
14
12
|
const modalIndex = this.modals.indexOf(modalId);
|
|
@@ -16,30 +14,9 @@ export class ModalManager {
|
|
|
16
14
|
return;
|
|
17
15
|
}
|
|
18
16
|
this.modals.splice(modalIndex, 1);
|
|
19
|
-
this.liftScrollLock();
|
|
20
17
|
}
|
|
21
18
|
isTopModal(modalId) {
|
|
22
19
|
return (this.modals.length > 0 && this.modals[this.modals.length - 1] === modalId);
|
|
23
20
|
}
|
|
24
|
-
dropScrollLock() {
|
|
25
|
-
if (!isBrowser()) {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
if (!this.scrollLock) {
|
|
29
|
-
this.scrollLock = {
|
|
30
|
-
prevBodyOverflow: window.getComputedStyle(document.body).overflow,
|
|
31
|
-
};
|
|
32
|
-
document.body.style.overflow = 'hidden';
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
liftScrollLock() {
|
|
36
|
-
if (!isBrowser()) {
|
|
37
|
-
return;
|
|
38
|
-
}
|
|
39
|
-
if (this.scrollLock && this.modals.length === 0) {
|
|
40
|
-
document.body.style.overflow = this.scrollLock.prevBodyOverflow;
|
|
41
|
-
this.scrollLock = undefined;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
21
|
}
|
|
45
22
|
//# sourceMappingURL=modal-manager.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../../src/utils/Modal/modal-manager.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"modal-manager.js","sourceRoot":"","sources":["../../../src/utils/Modal/modal-manager.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,YAAY;IAAzB;QACE,WAAM,GAAa,EAAE,CAAA;IAyBvB,CAAC;IAvBC,GAAG,CAAC,OAAe;QACjB,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;YACjC,OAAM;SACP;QAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC3B,CAAC;IAED,MAAM,CAAC,OAAe;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;QAE/C,IAAI,UAAU,KAAK,CAAC,CAAC,EAAE;YACrB,OAAM;SACP;QAED,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAA;IACnC,CAAC;IAED,UAAU,CAAC,OAAe;QACxB,OAAO,CACL,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,KAAK,OAAO,CAC1E,CAAA;IACH,CAAC;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { renderHook } from '@testing-library/react-hooks';
|
|
2
|
+
import { useBodyScrollLock } from '../use-body-scroll-lock';
|
|
3
|
+
let defaultBodyOverflow;
|
|
4
|
+
describe('useBodyScrollLock', () => {
|
|
5
|
+
beforeEach(() => {
|
|
6
|
+
defaultBodyOverflow = document.body.style.overflow;
|
|
7
|
+
});
|
|
8
|
+
afterEach(() => {
|
|
9
|
+
document.body.style.overflow = defaultBodyOverflow;
|
|
10
|
+
});
|
|
11
|
+
describe('single usage', () => {
|
|
12
|
+
it('drops scroll lock when mounted with true', () => {
|
|
13
|
+
renderHook(() => useBodyScrollLock(true));
|
|
14
|
+
expect(document.body.style.overflow).toBe('hidden');
|
|
15
|
+
});
|
|
16
|
+
describe('lifts scroll lock', () => {
|
|
17
|
+
it('when unmounted', () => {
|
|
18
|
+
const { unmount } = renderHook(() => useBodyScrollLock(true));
|
|
19
|
+
expect(document.body.style.overflow).toBe('hidden');
|
|
20
|
+
unmount();
|
|
21
|
+
expect(document.body.style.overflow).toBe('');
|
|
22
|
+
});
|
|
23
|
+
it('when isLocked switches into false', () => {
|
|
24
|
+
const { rerender } = renderHook((isLocked) => useBodyScrollLock(isLocked), { initialProps: true });
|
|
25
|
+
expect(document.body.style.overflow).toBe('hidden');
|
|
26
|
+
rerender(false);
|
|
27
|
+
expect(document.body.style.overflow).toBe('');
|
|
28
|
+
});
|
|
29
|
+
it('restores prev body overflow', () => {
|
|
30
|
+
document.body.style.overflow = 'grid';
|
|
31
|
+
const { unmount } = renderHook(() => useBodyScrollLock(true));
|
|
32
|
+
expect(document.body.style.overflow).toBe('hidden');
|
|
33
|
+
unmount();
|
|
34
|
+
expect(document.body.style.overflow).toBe('grid');
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
describe('multiple instances usage', () => {
|
|
39
|
+
it('drops scroll lock once any hook gets isLocked=true', () => {
|
|
40
|
+
const hook1 = renderHook((isLocked) => useBodyScrollLock(isLocked), { initialProps: false });
|
|
41
|
+
const hook2 = renderHook((isLocked) => useBodyScrollLock(isLocked), { initialProps: false });
|
|
42
|
+
const hook3 = renderHook((isLocked) => useBodyScrollLock(isLocked), { initialProps: false });
|
|
43
|
+
expect(document.body.style.overflow).toBe('');
|
|
44
|
+
hook1.rerender(true);
|
|
45
|
+
expect(document.body.style.overflow).toBe('hidden');
|
|
46
|
+
hook2.rerender(true);
|
|
47
|
+
hook3.rerender(true);
|
|
48
|
+
expect(document.body.style.overflow).toBe('hidden');
|
|
49
|
+
});
|
|
50
|
+
it('lifts scroll lock once no hook with isLocked=true left mounted', () => {
|
|
51
|
+
document.body.style.overflow = 'block';
|
|
52
|
+
const hook1 = renderHook((isLocked) => useBodyScrollLock(isLocked), { initialProps: true });
|
|
53
|
+
const hook2 = renderHook((isLocked) => useBodyScrollLock(isLocked), { initialProps: true });
|
|
54
|
+
const hook3 = renderHook((isLocked) => useBodyScrollLock(isLocked), { initialProps: true });
|
|
55
|
+
expect(document.body.style.overflow).toBe('hidden');
|
|
56
|
+
hook3.unmount();
|
|
57
|
+
expect(document.body.style.overflow).toBe('hidden');
|
|
58
|
+
hook2.rerender(false);
|
|
59
|
+
expect(document.body.style.overflow).toBe('hidden');
|
|
60
|
+
hook1.rerender(false);
|
|
61
|
+
expect(document.body.style.overflow).toBe('block');
|
|
62
|
+
});
|
|
63
|
+
});
|
|
64
|
+
});
|
|
65
|
+
//# sourceMappingURL=use-body-scroll-lock.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-body-scroll-lock.test.js","sourceRoot":"","sources":["../../../src/utils/__tests__/use-body-scroll-lock.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useBodyScrollLock: (isLocked: boolean) => void;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { isBrowser } from '@toptal/picasso-shared';
|
|
2
|
+
import { useEffect, useMemo } from 'react';
|
|
3
|
+
const layers = new Set();
|
|
4
|
+
let scrollLock = undefined;
|
|
5
|
+
export const useBodyScrollLock = (isLocked) => {
|
|
6
|
+
const layerId = useMemo(generateLayerId, []);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (isLocked) {
|
|
9
|
+
layers.add(layerId);
|
|
10
|
+
syncBodyScrollLock();
|
|
11
|
+
}
|
|
12
|
+
return () => {
|
|
13
|
+
layers.delete(layerId);
|
|
14
|
+
syncBodyScrollLock();
|
|
15
|
+
};
|
|
16
|
+
}, [layerId, isLocked]);
|
|
17
|
+
};
|
|
18
|
+
const generateLayerId = (() => {
|
|
19
|
+
let count = 0;
|
|
20
|
+
return () => {
|
|
21
|
+
count = count + 1;
|
|
22
|
+
return count;
|
|
23
|
+
};
|
|
24
|
+
})();
|
|
25
|
+
const syncBodyScrollLock = () => {
|
|
26
|
+
if (layers.size > 0) {
|
|
27
|
+
addBodyScrollLock();
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
removeBodyScrollLock();
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const addBodyScrollLock = () => {
|
|
34
|
+
if (!isBrowser()) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
if (!scrollLock) {
|
|
38
|
+
scrollLock = {
|
|
39
|
+
prevBodyOverflow: document.body.style.overflow,
|
|
40
|
+
};
|
|
41
|
+
document.body.style.overflow = 'hidden';
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
const removeBodyScrollLock = () => {
|
|
45
|
+
if (!isBrowser()) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
if (scrollLock) {
|
|
49
|
+
document.body.style.overflow = scrollLock.prevBodyOverflow;
|
|
50
|
+
scrollLock = undefined;
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=use-body-scroll-lock.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-body-scroll-lock.js","sourceRoot":"","sources":["../../src/utils/use-body-scroll-lock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE1C,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;AACjC,IAAI,UAAU,GAA6C,SAAS,CAAC;AAErE,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,QAAiB,EAAE,EAAE;IACrD,MAAM,OAAO,GAAG,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,EAAE;YACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACnB,kBAAkB,EAAE,CAAA;SACrB;QAED,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACtB,kBAAkB,EAAE,CAAA;QACtB,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,GAAG,EAAE;IAC5B,IAAI,KAAK,GAAG,CAAC,CAAA;IAEb,OAAO,GAAG,EAAE;QACV,KAAK,GAAG,KAAK,GAAG,CAAC,CAAA;QAEjB,OAAO,KAAK,CAAC;IACf,CAAC,CAAA;AACH,CAAC,CAAC,EAAE,CAAA;AAEJ,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,IAAI,MAAM,CAAC,IAAI,GAAG,CAAC,EAAE;QACnB,iBAAiB,EAAE,CAAA;KACpB;SAAM;QACL,oBAAoB,EAAE,CAAA;KACvB;AACH,CAAC,CAAA;AAED,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAC7B,IAAI,CAAC,SAAS,EAAE,EAAE;QAChB,OAAM;KACP;IAED,IAAI,CAAC,UAAU,EAAE;QACf,UAAU,GAAG;YACX,gBAAgB,EAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;SAC/C,CAAA;QACD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;KACxC;AACH,CAAC,CAAA;AAED,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,IAAI,CAAC,SAAS,EAAE,EAAE;QAChB,OAAM;KACP;IAED,IAAI,UAAU,EAAE;QACd,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC,gBAAgB,CAAA;QAC1D,UAAU,GAAG,SAAS,CAAA;KACvB;AACH,CAAC,CAAA"}
|