@toptal/picasso-drawer 100.0.1 → 100.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/dist-package/src/Drawer/Drawer.d.ts +2 -0
- package/dist-package/src/Drawer/Drawer.d.ts.map +1 -1
- package/dist-package/src/Drawer/Drawer.js +2 -2
- package/dist-package/src/Drawer/Drawer.js.map +1 -1
- package/package.json +1 -1
- package/src/Drawer/Drawer.tsx +4 -0
- package/src/Drawer/test.tsx +26 -1
|
@@ -24,6 +24,8 @@ export interface Props extends BaseProps {
|
|
|
24
24
|
transparentBackdrop?: boolean;
|
|
25
25
|
/** Remove the backdrop and leave elements behind interactive */
|
|
26
26
|
disableBackdrop?: boolean;
|
|
27
|
+
/** If `true`, the backdrop is rendered even when nested in another dialog */
|
|
28
|
+
forceRenderBackdrop?: boolean;
|
|
27
29
|
/** Disable drawer scrolling and let children manage their own scroll */
|
|
28
30
|
disableScroll?: boolean;
|
|
29
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAExE,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAUrD,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAIrD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAA;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,2IAA2I;IAC3I,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,iDAAiD;IACjD,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,yCAAyC;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,iEAAiE;IACjE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAoBD,eAAO,MAAM,MAAM;yEAOhB,KAAK;;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAExE,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAUrD,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAIrD,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,+CAA+C;IAC/C,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,uFAAuF;IACvF,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAA;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,2IAA2I;IAC3I,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,iDAAiD;IACjD,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,yCAAyC;IACzC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,iEAAiE;IACjE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,6EAA6E;IAC7E,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,wEAAwE;IACxE,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAoBD,eAAO,MAAM,MAAM;yEAOhB,KAAK;;CAyHP,CAAA;AAID,eAAe,MAAM,CAAA"}
|
|
@@ -38,7 +38,7 @@ const getTransitionDuration = (timeout) => {
|
|
|
38
38
|
};
|
|
39
39
|
export const Drawer = (_a) => {
|
|
40
40
|
var { anchor = 'right', disablePortal = false, disableScroll = false, onClose = () => { }, width = 'regular' } = _a, props = __rest(_a, ["anchor", "disablePortal", "disableScroll", "onClose", "width"]);
|
|
41
|
-
const { children, open, title, transitionProps, maintainBodyScrollLock = true, transparentBackdrop, disableBackdrop, className, style, 'data-testid': testId, 'data-private': dataPrivate, } = props;
|
|
41
|
+
const { children, open, title, transitionProps, maintainBodyScrollLock = true, transparentBackdrop, disableBackdrop, forceRenderBackdrop = true, className, style, 'data-testid': testId, 'data-private': dataPrivate, } = props;
|
|
42
42
|
const { setHasDrawer } = useDrawer();
|
|
43
43
|
const container = usePicassoRoot();
|
|
44
44
|
const popupRef = useRef(null);
|
|
@@ -58,7 +58,7 @@ export const Drawer = (_a) => {
|
|
|
58
58
|
const popupStyle = transitionDuration != null
|
|
59
59
|
? Object.assign(Object.assign({}, style), { transitionDuration: `${transitionDuration}ms` }) : style;
|
|
60
60
|
const overlay = (React.createElement(React.Fragment, null,
|
|
61
|
-
!disableBackdrop && (React.createElement(BaseUIDialog.Backdrop, { className: twMerge('z-drawer fixed inset-0 bg-black transition-opacity duration-300', 'data-starting-style:opacity-0 data-ending-style:opacity-0', transparentBackdrop ? 'bg-black/0' : 'bg-black/50') })),
|
|
61
|
+
!disableBackdrop && (React.createElement(BaseUIDialog.Backdrop, { forceRender: forceRenderBackdrop, className: twMerge('z-drawer fixed inset-0 bg-black transition-opacity duration-300', 'data-starting-style:opacity-0 data-ending-style:opacity-0', transparentBackdrop ? 'bg-black/0' : 'bg-black/50') })),
|
|
62
62
|
React.createElement(BaseUIDialog.Popup, { ref: popupRef, initialFocus: popupRef, render: React.createElement(DrawerPaper, { anchor: anchor, disableScroll: disableScroll, className: className, style: popupStyle, "data-testid": testId, "data-private": dataPrivate }) },
|
|
63
63
|
React.createElement(Container, { flex: true, direction: 'column', className: twMerge('max-w-full relative flex-1', widthClassName[width], disableScroll && 'overflow-hidden') },
|
|
64
64
|
React.createElement(DrawerTitle, { title: title }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/Drawer/Drawer.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/C,8EAA8E;AAC9E,+EAA+E;AAC/E,gFAAgF;AAChF,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAE9D,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAEpE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EACL,yBAAyB,EACzB,iBAAiB,GAClB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/Drawer/Drawer.tsx
CHANGED
|
@@ -42,6 +42,8 @@ export interface Props extends BaseProps {
|
|
|
42
42
|
transparentBackdrop?: boolean
|
|
43
43
|
/** Remove the backdrop and leave elements behind interactive */
|
|
44
44
|
disableBackdrop?: boolean
|
|
45
|
+
/** If `true`, the backdrop is rendered even when nested in another dialog */
|
|
46
|
+
forceRenderBackdrop?: boolean
|
|
45
47
|
/** Disable drawer scrolling and let children manage their own scroll */
|
|
46
48
|
disableScroll?: boolean
|
|
47
49
|
}
|
|
@@ -80,6 +82,7 @@ export const Drawer = ({
|
|
|
80
82
|
maintainBodyScrollLock = true,
|
|
81
83
|
transparentBackdrop,
|
|
82
84
|
disableBackdrop,
|
|
85
|
+
forceRenderBackdrop = true,
|
|
83
86
|
className,
|
|
84
87
|
style,
|
|
85
88
|
'data-testid': testId,
|
|
@@ -117,6 +120,7 @@ export const Drawer = ({
|
|
|
117
120
|
<>
|
|
118
121
|
{!disableBackdrop && (
|
|
119
122
|
<BaseUIDialog.Backdrop
|
|
123
|
+
forceRender={forceRenderBackdrop}
|
|
120
124
|
className={twMerge(
|
|
121
125
|
'z-drawer fixed inset-0 bg-black transition-opacity duration-300',
|
|
122
126
|
'data-starting-style:opacity-0 data-ending-style:opacity-0',
|
package/src/Drawer/test.tsx
CHANGED
|
@@ -13,6 +13,9 @@ const renderDrawer = (props: Partial<Props> = {}, children: ReactNode = null) =>
|
|
|
13
13
|
</Drawer>
|
|
14
14
|
)
|
|
15
15
|
|
|
16
|
+
const getBackdrops = (element: HTMLElement) =>
|
|
17
|
+
element.querySelectorAll('.bg-black\\/50')
|
|
18
|
+
|
|
16
19
|
describe('Drawer', () => {
|
|
17
20
|
it('renders content when open', () => {
|
|
18
21
|
const { getByTestId } = renderDrawer()
|
|
@@ -61,7 +64,29 @@ describe('Drawer', () => {
|
|
|
61
64
|
it('does not render a backdrop when disableBackdrop is set', () => {
|
|
62
65
|
const { baseElement } = renderDrawer({ disableBackdrop: true })
|
|
63
66
|
|
|
64
|
-
expect(baseElement
|
|
67
|
+
expect(getBackdrops(baseElement)).toHaveLength(0)
|
|
68
|
+
})
|
|
69
|
+
|
|
70
|
+
it('renders a backdrop for a nested drawer by default', () => {
|
|
71
|
+
const { baseElement } = renderDrawer(
|
|
72
|
+
{},
|
|
73
|
+
<Drawer open onClose={jest.fn()}>
|
|
74
|
+
<span>Nested drawer body</span>
|
|
75
|
+
</Drawer>
|
|
76
|
+
)
|
|
77
|
+
|
|
78
|
+
expect(getBackdrops(baseElement)).toHaveLength(2)
|
|
79
|
+
})
|
|
80
|
+
|
|
81
|
+
it('given forceRenderBackdrop is false, does not render a backdrop for a nested drawer', () => {
|
|
82
|
+
const { baseElement } = renderDrawer(
|
|
83
|
+
{},
|
|
84
|
+
<Drawer open forceRenderBackdrop={false} onClose={jest.fn()}>
|
|
85
|
+
<span>Nested drawer body</span>
|
|
86
|
+
</Drawer>
|
|
87
|
+
)
|
|
88
|
+
|
|
89
|
+
expect(getBackdrops(baseElement)).toHaveLength(1)
|
|
65
90
|
})
|
|
66
91
|
|
|
67
92
|
it('disables paper scrolling when disableScroll is set', () => {
|