@purpurds/drawer 7.13.1 → 8.0.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/LICENSE.txt +4 -4
- package/dist/drawer-content.d.ts +4 -0
- package/dist/drawer-content.d.ts.map +1 -1
- package/dist/drawer-frame.d.ts +2 -1
- package/dist/drawer-frame.d.ts.map +1 -1
- package/dist/drawer.cjs.js +15 -15
- package/dist/drawer.cjs.js.map +1 -1
- package/dist/drawer.es.js +703 -691
- package/dist/drawer.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types.d.ts +1 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +8 -8
- package/src/drawer-content.module.scss +25 -3
- package/src/drawer-content.tsx +6 -1
- package/src/drawer-frame.module.scss +9 -2
- package/src/drawer-frame.tsx +5 -1
- package/src/drawer.stories.tsx +2 -0
- package/src/types.ts +2 -0
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-drawer-
|
|
1
|
+
._purpur-drawer-content_khfax_1{bottom:0;height:90vh;height:90dvh;max-width:100%;position:absolute;width:100%}@media (prefers-reduced-motion: no-preference){._purpur-drawer-content_khfax_1{animation:_drawerSmallScreenAnimation_khfax_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content--left_khfax_15{left:0}._purpur-drawer-content--right_khfax_18{right:0}._purpur-drawer-content--fit-to-content_khfax_21{display:flex;flex-direction:column;height:auto;max-height:90vh;max-height:90dvh}@media screen and (min-width: 600px){._purpur-drawer-content_khfax_1{height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}._purpur-drawer-content--fit-to-content_khfax_21{max-height:100vh;max-height:100dvh}}@media screen and (min-width: 600px) and (prefers-reduced-motion: no-preference){._purpur-drawer-content--right_khfax_18{animation:_drawerLargeScreenAnimationRight_khfax_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content--left_khfax_15{animation:_drawerLargeScreenAnimationLeft_khfax_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content_khfax_1:focus{outline:none}._purpur-drawer-content__content-container_khfax_51{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__drawer-frame_khfax_56[data-swipe=cancel]{transform:translateY(0);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content__drawer-frame_khfax_56[data-swipe=move]{transform:translateY(var(--purpur-drawer-swipe-move-y))}._purpur-drawer-content__drawer-frame_khfax_56[data-swipe=end]{animation:_slideDown_khfax_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-drawer-content__description_khfax_66{color:var(--purpur-color-text-default);display:block;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0}._purpur-drawer-overlay_khfax_77{background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed}@media (prefers-reduced-motion: no-preference){._purpur-drawer-overlay_khfax_77{animation:_overlayAnimation_khfax_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}@keyframes _slideDown_khfax_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}@keyframes _overlayAnimation_khfax_1{0%{opacity:0}to{opacity:1}}@keyframes _drawerLargeScreenAnimationRight_khfax_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _drawerLargeScreenAnimationLeft_khfax_1{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes _drawerSmallScreenAnimation_khfax_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._purpur-drawer-container--header_1u45h_1{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-150);border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}@media screen and (min-width: 600px){._purpur-drawer-container--header_1u45h_1{padding:var(--purpur-spacing-300) var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-container--body_1u45h_10{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) 0}@media screen and (min-width: 600px){._purpur-drawer-container--body_1u45h_10{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) 0}}._purpur-drawer-container--body_1u45h_10._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm)}@media screen and (min-width: 600px){._purpur-drawer-container--body_1u45h_10._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-400) var(--purpur-spacing-300)}}._purpur-drawer-container--footer_1u45h_26{padding:0 var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-200)}@media screen and (min-width: 600px){._purpur-drawer-container--footer_1u45h_26{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-container--footer_1u45h_26._purpur-drawer-container--sticky_1u45h_18{border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);padding:var(--purpur-spacing-200) var(--purpur-spacing-page-padding-sm)}@media screen and (min-width: 600px){._purpur-drawer-container--footer_1u45h_26._purpur-drawer-container--sticky_1u45h_18{padding:var(--purpur-spacing-200) var(--purpur-spacing-300)}}._purpur-drawer-frame_1s8hq_1{background-color:var(--purpur-color-background-primary);border-top-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:var(--purpur-border-radius-lg);box-shadow:var(--purpur-shadow-lg);display:flex;flex-direction:column;height:100%;position:relative}@media screen and (min-width: 600px){._purpur-drawer-frame--left_1s8hq_12{border-bottom-right-radius:var(--purpur-border-radius-lg);border-top-left-radius:0}._purpur-drawer-frame--right_1s8hq_16{border-bottom-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:0}}._purpur-drawer-frame--sticky-footer_1s8hq_21{gap:0}._purpur-drawer-frame__header_1s8hq_24{flex:0 0 auto}._purpur-drawer-frame__body_1s8hq_27{flex:1 1 auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1s8hq_31{flex:1 1 auto;height:auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1s8hq_31 ._purpur-drawer-frame__body_1s8hq_27{display:flex;flex-direction:column}._purpur-drawer-frame__footer_1s8hq_40{flex:0 0 auto}._purpur-drawer-frame__content-container_1s8hq_43{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-frame__content-container--no-footer_1s8hq_48{margin-bottom:var(--purpur-spacing-400)}._purpur-drawer-handle_3n0ew_1{align-items:center;display:flex;height:var(--purpur-spacing-250);justify-content:center;position:absolute;top:0;width:100%}@media screen and (min-width: 600px){._purpur-drawer-handle_3n0ew_1{display:none}}._purpur-drawer-handle_3n0ew_1:before{content:"";background:var(--purpur-color-border-weak);border-radius:var(--purpur-border-radius-full);height:var(--purpur-spacing-50);width:var(--purpur-spacing-600)}._purpur-drawer-header__row_1yg5w_1{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-drawer-header__row--with-back-button_1yg5w_6{margin-bottom:var(--purpur-spacing-100)}._purpur-drawer-header__left_1yg5w_9{flex:1 1 auto}._purpur-drawer-header__right_1yg5w_12{flex:0 0 auto}._purpur-drawer-header__close-button_1yg5w_15{margin-right:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-header__back-button--only-icon_1yg5w_18{margin-left:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-scroll-area__root_1r0fa_1{height:100%}._purpur-drawer-scroll-area__root--fit-to-content_1r0fa_4{display:flex;flex-direction:column;height:auto;overflow:hidden}._purpur-drawer-scroll-area__viewport_1r0fa_10{height:100%}._purpur-drawer-scroll-area__scrollbar_1r0fa_13{display:flex;-webkit-user-select:none;user-select:none;touch-action:none;padding:var(--purpur-spacing-25);background:var(--purpur-color-functional-white);transition:background var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:var(--purpur-spacing-100)}._purpur-drawer-scroll-area__thumb_1r0fa_24{background:var(--purpur-color-gray-200);border-radius:var(--purpur-spacing-200);flex:1;position:relative}._purpur-drawer-scroll-area__thumb_1r0fa_24:before{content:"";height:100%;left:50%;min-height:var(--purpur-spacing-300);min-width:var(--purpur-spacing-300);position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}
|
package/dist/types.d.ts
CHANGED
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IAAE,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IAAE,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;AAE1D,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/drawer",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/drawer.cjs.js",
|
|
6
6
|
"types": "./dist/drawer.d.ts",
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
"@radix-ui/react-dialog": "~1.1.6",
|
|
19
19
|
"@radix-ui/react-scroll-area": "~1.2.3",
|
|
20
20
|
"classnames": "~2.5.0",
|
|
21
|
-
"@purpurds/button": "
|
|
22
|
-
"@purpurds/common-types": "
|
|
23
|
-
"@purpurds/heading": "
|
|
24
|
-
"@purpurds/icon": "
|
|
25
|
-
"@purpurds/paragraph": "
|
|
26
|
-
"@purpurds/tokens": "
|
|
27
|
-
"@purpurds/visually-hidden": "
|
|
21
|
+
"@purpurds/button": "8.0.0",
|
|
22
|
+
"@purpurds/common-types": "8.0.0",
|
|
23
|
+
"@purpurds/heading": "8.0.0",
|
|
24
|
+
"@purpurds/icon": "8.0.0",
|
|
25
|
+
"@purpurds/paragraph": "8.0.0",
|
|
26
|
+
"@purpurds/tokens": "8.0.0",
|
|
27
|
+
"@purpurds/visually-hidden": "8.0.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@storybook/react-vite": "^9.0.18",
|
|
@@ -8,7 +8,6 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
8
8
|
height: 90dvh;
|
|
9
9
|
max-width: 100%;
|
|
10
10
|
position: absolute;
|
|
11
|
-
right: 0;
|
|
12
11
|
width: 100%;
|
|
13
12
|
|
|
14
13
|
@media (prefers-reduced-motion: no-preference) {
|
|
@@ -16,6 +15,14 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
16
15
|
transition: transform $animation-settings;
|
|
17
16
|
}
|
|
18
17
|
|
|
18
|
+
&--left {
|
|
19
|
+
left: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&--right {
|
|
23
|
+
right: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
19
26
|
&--fit-to-content {
|
|
20
27
|
display: flex;
|
|
21
28
|
flex-direction: column;
|
|
@@ -36,7 +43,13 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
36
43
|
}
|
|
37
44
|
|
|
38
45
|
@media (prefers-reduced-motion: no-preference) {
|
|
39
|
-
|
|
46
|
+
&--right {
|
|
47
|
+
animation: drawerLargeScreenAnimationRight $animation-settings;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&--left {
|
|
51
|
+
animation: drawerLargeScreenAnimationLeft $animation-settings;
|
|
52
|
+
}
|
|
40
53
|
}
|
|
41
54
|
}
|
|
42
55
|
|
|
@@ -106,7 +119,7 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
106
119
|
}
|
|
107
120
|
}
|
|
108
121
|
|
|
109
|
-
@keyframes
|
|
122
|
+
@keyframes drawerLargeScreenAnimationRight {
|
|
110
123
|
from {
|
|
111
124
|
transform: translateX(100%);
|
|
112
125
|
}
|
|
@@ -115,6 +128,15 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
|
|
|
115
128
|
}
|
|
116
129
|
}
|
|
117
130
|
|
|
131
|
+
@keyframes drawerLargeScreenAnimationLeft {
|
|
132
|
+
from {
|
|
133
|
+
transform: translateX(-100%);
|
|
134
|
+
}
|
|
135
|
+
to {
|
|
136
|
+
transform: translateX(0%);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
118
140
|
@keyframes drawerSmallScreenAnimation {
|
|
119
141
|
from {
|
|
120
142
|
transform: translateY(100%);
|
package/src/drawer-content.tsx
CHANGED
|
@@ -6,7 +6,7 @@ import c from "classnames/bind";
|
|
|
6
6
|
import { DrawerContext } from "./drawer.context";
|
|
7
7
|
import styles from "./drawer-content.module.scss";
|
|
8
8
|
import { DrawerFrame } from "./drawer-frame";
|
|
9
|
-
import { type OpenHandlerFunction } from "./types";
|
|
9
|
+
import { type OpenHandlerFunction, type Position } from "./types";
|
|
10
10
|
import { useSwipeToDismiss } from "./use-swipe-to-dismiss.hook";
|
|
11
11
|
|
|
12
12
|
const cx = c.bind(styles);
|
|
@@ -39,6 +39,7 @@ export type DrawerContentProps = Omit<BaseProps, "children"> & {
|
|
|
39
39
|
stickyFooter?: boolean;
|
|
40
40
|
title: string;
|
|
41
41
|
zIndex?: number;
|
|
42
|
+
position?: Position;
|
|
42
43
|
} & (WithoutBackButton | WithBackButton);
|
|
43
44
|
|
|
44
45
|
const rootClassName = "purpur-drawer-content";
|
|
@@ -62,6 +63,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
|
|
|
62
63
|
stickyFooter = false,
|
|
63
64
|
title,
|
|
64
65
|
zIndex,
|
|
66
|
+
position = "right",
|
|
65
67
|
...props
|
|
66
68
|
},
|
|
67
69
|
ref
|
|
@@ -70,6 +72,8 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
|
|
|
70
72
|
className,
|
|
71
73
|
rootClassName,
|
|
72
74
|
{ [`${rootClassName}--fit-to-content`]: fitToContent },
|
|
75
|
+
{ [`${rootClassName}--left`]: position === "left" },
|
|
76
|
+
{ [`${rootClassName}--right`]: position === "right" },
|
|
73
77
|
]);
|
|
74
78
|
|
|
75
79
|
const drawerFrameRef = useRef<HTMLDivElement>(null);
|
|
@@ -129,6 +133,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
|
|
|
129
133
|
onSwipeEnd={onSwipeEnd}
|
|
130
134
|
stickyFooter={stickyFooter}
|
|
131
135
|
title={title}
|
|
136
|
+
position={position}
|
|
132
137
|
>
|
|
133
138
|
{bodyText ? (
|
|
134
139
|
<div className={cx(`${rootClassName}__content-container`)}>
|
|
@@ -13,8 +13,15 @@
|
|
|
13
13
|
position: relative;
|
|
14
14
|
|
|
15
15
|
@media screen and (min-width: $purpur-breakpoint-md) {
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
&--left {
|
|
17
|
+
border-bottom-right-radius: var(--purpur-border-radius-lg);
|
|
18
|
+
border-top-left-radius: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&--right {
|
|
22
|
+
border-bottom-left-radius: var(--purpur-border-radius-lg);
|
|
23
|
+
border-top-right-radius: 0;
|
|
24
|
+
}
|
|
18
25
|
}
|
|
19
26
|
|
|
20
27
|
&--sticky-footer {
|
package/src/drawer-frame.tsx
CHANGED
|
@@ -7,7 +7,7 @@ import styles from "./drawer-frame.module.scss";
|
|
|
7
7
|
import { DrawerHandle } from "./drawer-handle";
|
|
8
8
|
import { DrawerHeader } from "./drawer-header";
|
|
9
9
|
import { DrawerScrollArea } from "./drawer-scroll-area";
|
|
10
|
-
import { type SwipeEvent } from "./types";
|
|
10
|
+
import { type Position, type SwipeEvent } from "./types";
|
|
11
11
|
|
|
12
12
|
const cx = c.bind(styles);
|
|
13
13
|
|
|
@@ -28,6 +28,7 @@ export type DrawerFrameProps = Omit<BaseProps, "children"> & {
|
|
|
28
28
|
onSwipeEnd(event: SwipeEvent): void;
|
|
29
29
|
stickyFooter: boolean;
|
|
30
30
|
title: string;
|
|
31
|
+
position?: Position;
|
|
31
32
|
};
|
|
32
33
|
|
|
33
34
|
const rootClassName = "purpur-drawer-frame";
|
|
@@ -53,6 +54,7 @@ export const DrawerFrame = forwardRef<HTMLDivElement, DrawerFrameProps>(
|
|
|
53
54
|
onSwipeEnd,
|
|
54
55
|
title,
|
|
55
56
|
stickyFooter,
|
|
57
|
+
position = "right",
|
|
56
58
|
...props
|
|
57
59
|
},
|
|
58
60
|
ref
|
|
@@ -63,6 +65,8 @@ export const DrawerFrame = forwardRef<HTMLDivElement, DrawerFrameProps>(
|
|
|
63
65
|
{
|
|
64
66
|
[`${rootClassName}--fit-to-content`]: fitToContent,
|
|
65
67
|
[`${rootClassName}--sticky-footer`]: stickyFooter,
|
|
68
|
+
[`${rootClassName}--left`]: position === "left",
|
|
69
|
+
[`${rootClassName}--right`]: position === "right",
|
|
66
70
|
},
|
|
67
71
|
]);
|
|
68
72
|
|
package/src/drawer.stories.tsx
CHANGED
|
@@ -149,6 +149,7 @@ const StorybookMultiDrawerTestComponent = () => {
|
|
|
149
149
|
title="This is drawer 3"
|
|
150
150
|
stickyFooter
|
|
151
151
|
zIndex={20}
|
|
152
|
+
position="left"
|
|
152
153
|
>
|
|
153
154
|
<Heading variant="subsection-100" tag="h3">
|
|
154
155
|
The standard Lorem Ipsum passage, used since the 1500s
|
|
@@ -244,6 +245,7 @@ export const ShowcaseForDrawerContent: DrawerContentStory = {
|
|
|
244
245
|
title: "Title",
|
|
245
246
|
stickyFooter: true,
|
|
246
247
|
zIndex: 20,
|
|
248
|
+
position: "right",
|
|
247
249
|
},
|
|
248
250
|
render: (args) => {
|
|
249
251
|
const [props, updateArgs]: [
|