@purpurds/drawer 8.8.1 → 8.9.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.cjs.js +4 -24
- package/dist/drawer.cjs.js.map +1 -1
- package/dist/drawer.es.js +257 -304
- package/dist/drawer.es.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +24 -24
- package/src/drawer.test.tsx +9 -7
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-drawer-content_71yig_1{bottom:0;height:95.5vh;height:95.5dvh;max-width:100%;position:absolute;width:100%;transform:translateY(var(--purpur-drawer-swipe-move-y))}@media(prefers-reduced-motion:no-preference){._purpur-drawer-content_71yig_1:not([data-swipe=move]){transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content_71yig_1[data-state=open]{animation:_slideUp_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content_71yig_1[data-state=closed]{animation:_slideDown_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content--left_71yig_21{left:0}._purpur-drawer-content--right_71yig_24{right:0}._purpur-drawer-content--fit-to-content_71yig_27{display:flex;flex-direction:column;height:auto;max-height:95.5vh;max-height:95.5dvh}@media screen and (min-width:600px){._purpur-drawer-content_71yig_1{height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}._purpur-drawer-content--fit-to-content_71yig_27{max-height:100vh;max-height:100dvh}}@media screen and (min-width:600px)and (prefers-reduced-motion:no-preference){._purpur-drawer-content--right_71yig_24[data-state=open]{animation:_slideInRight_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content--left_71yig_21[data-state=open]{animation:_slideInLeft_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content--right_71yig_24[data-state=closed]{animation:_slideOutRight_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content--left_71yig_21[data-state=closed]{animation:_slideOutLeft_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content_71yig_1:focus{outline:none}._purpur-drawer-content__content-container_71yig_63{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__description_71yig_68{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_71yig_79{background:var(--purpur-color-overlay-default);
|
|
1
|
+
._purpur-drawer-content_71yig_1{bottom:0;height:95.5vh;height:95.5dvh;max-width:100%;position:absolute;width:100%;transform:translateY(var(--purpur-drawer-swipe-move-y))}@media(prefers-reduced-motion:no-preference){._purpur-drawer-content_71yig_1:not([data-swipe=move]){transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content_71yig_1[data-state=open]{animation:_slideUp_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content_71yig_1[data-state=closed]{animation:_slideDown_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content--left_71yig_21{left:0}._purpur-drawer-content--right_71yig_24{right:0}._purpur-drawer-content--fit-to-content_71yig_27{display:flex;flex-direction:column;height:auto;max-height:95.5vh;max-height:95.5dvh}@media screen and (min-width:600px){._purpur-drawer-content_71yig_1{height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}._purpur-drawer-content--fit-to-content_71yig_27{max-height:100vh;max-height:100dvh}}@media screen and (min-width:600px)and (prefers-reduced-motion:no-preference){._purpur-drawer-content--right_71yig_24[data-state=open]{animation:_slideInRight_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content--left_71yig_21[data-state=open]{animation:_slideInLeft_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content--right_71yig_24[data-state=closed]{animation:_slideOutRight_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content--left_71yig_21[data-state=closed]{animation:_slideOutLeft_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-drawer-content_71yig_1:focus{outline:none}._purpur-drawer-content__content-container_71yig_63{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__description_71yig_68{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_71yig_79{background:var(--purpur-color-overlay-default);inset:0;position:fixed}@media(prefers-reduced-motion:no-preference){._purpur-drawer-overlay_71yig_79{transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-overlay_71yig_79[data-state=open]{animation:_fadeIn_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-overlay_71yig_79[data-state=closed]{animation:_fadeOut_71yig_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}@keyframes _fadeIn_71yig_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_71yig_1{0%{opacity:1}to{opacity:0}}@keyframes _slideInRight_71yig_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _slideOutRight_71yig_1{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes _slideInLeft_71yig_1{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes _slideOutLeft_71yig_1{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes _slideUp_71yig_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes _slideDown_71yig_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}._purpur-drawer-container--header_1bcla_1{border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-drawer-container--body_1bcla_4{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm) 0}@media screen and (min-width:600px){._purpur-drawer-container--body_1bcla_4{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) 0}}._purpur-drawer-container--body_1bcla_4._purpur-drawer-container--sticky_1bcla_12{padding:var(--purpur-spacing-300) var(--purpur-spacing-page-padding-sm)}@media screen and (min-width:600px){._purpur-drawer-container--body_1bcla_4._purpur-drawer-container--sticky_1bcla_12{padding:var(--purpur-spacing-400) var(--purpur-spacing-300)}}._purpur-drawer-container--footer_1bcla_20{padding:0 var(--purpur-spacing-page-padding-sm) var(--purpur-spacing-200)}@media screen and (min-width:600px){._purpur-drawer-container--footer_1bcla_20{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-container--footer_1bcla_20._purpur-drawer-container--sticky_1bcla_12{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_1bcla_20._purpur-drawer-container--sticky_1bcla_12{padding:var(--purpur-spacing-200) var(--purpur-spacing-300)}}._purpur-drawer-frame_1didd_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}._purpur-drawer-frame--without-back-button_1didd_11 ._purpur-drawer-frame__header_1didd_11{padding:var(--purpur-spacing-300) calc(56 * var(--purpur-spacing-10)) var(--purpur-spacing-150) var(--purpur-spacing-200)}._purpur-drawer-frame--with-back-button_1didd_14 ._purpur-drawer-frame__header_1didd_11{padding:calc(14 * var(--purpur-spacing-10)) var(--purpur-spacing-200) var(--purpur-spacing-150)}@media screen and (min-width:600px){._purpur-drawer-frame--left_1didd_18{border-bottom-right-radius:var(--purpur-border-radius-lg);border-top-left-radius:0}._purpur-drawer-frame--right_1didd_22{border-bottom-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:0}._purpur-drawer-frame--without-back-button_1didd_11 ._purpur-drawer-frame__header_1didd_11{padding:var(--purpur-spacing-300) calc(64 * var(--purpur-spacing-10)) var(--purpur-spacing-200) var(--purpur-spacing-300)}._purpur-drawer-frame--with-back-button_1didd_14 ._purpur-drawer-frame__header_1didd_11{padding:calc(14 * var(--purpur-spacing-10)) var(--purpur-spacing-300) var(--purpur-spacing-200)}}._purpur-drawer-frame--sticky-footer_1didd_33{gap:0}._purpur-drawer-frame__header_1didd_11{flex:0 0 auto}._purpur-drawer-frame__body_1didd_39{flex:1 1 auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1didd_43{flex:1 1 auto;height:auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1didd_43 ._purpur-drawer-frame__body_1didd_39{display:flex;flex-direction:column}._purpur-drawer-frame__footer_1didd_52{flex:0 0 auto}._purpur-drawer-frame__content-container_1didd_55{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-frame__content-container--no-footer_1didd_60{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_1iujy_1{min-height:calc(1.25*clamp(var(--purpur-typography-scale-200),3cqw,var(--purpur-typography-scale-400)))}._purpur-drawer-header__row_1iujy_4{display:flex}._purpur-drawer-header__row--with-back-button_1iujy_7{margin-bottom:var(--purpur-spacing-100)}._purpur-drawer-header__left_1iujy_10{flex:1 1 auto}._purpur-drawer-header__right_1iujy_13{flex:0 0 auto}._purpur-drawer-header_1iujy_1 ._purpur-drawer-header__close-button_1iujy_16{position:absolute;top:calc(14 * var(--purpur-spacing-10));right:calc(6 * var(--purpur-spacing-10));padding:calc(10 * var(--purpur-spacing-10))}@media screen and (min-width:600px){._purpur-drawer-header_1iujy_1 ._purpur-drawer-header__close-button_1iujy_16{right:calc(14 * var(--purpur-spacing-10))}}._purpur-drawer-header__back-button--only-icon_1iujy_27{margin-left:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-scroll-area__root_1hyos_1{height:100%}._purpur-drawer-scroll-area__root--fit-to-content_1hyos_4{display:flex;flex-direction:column;height:auto;overflow:hidden}._purpur-drawer-scroll-area__viewport_1hyos_10{position:relative;height:100%}._purpur-drawer-scroll-area__scrollbar_1hyos_14{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_1hyos_25{background:var(--purpur-color-gray-200);border-radius:var(--purpur-spacing-200);flex:1;position:relative}._purpur-drawer-scroll-area__thumb_1hyos_25: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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/drawer",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.9.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/drawer.cjs.js",
|
|
6
6
|
"types": "./dist/drawer.d.ts",
|
|
@@ -17,34 +17,34 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@radix-ui/react-dialog": "~1.1.6",
|
|
19
19
|
"@radix-ui/react-scroll-area": "~1.2.3",
|
|
20
|
-
"classnames": "~2.5.
|
|
21
|
-
"@purpurds/button": "8.
|
|
22
|
-
"@purpurds/common-types": "8.
|
|
23
|
-
"@purpurds/heading": "8.
|
|
24
|
-
"@purpurds/icon": "8.
|
|
25
|
-
"@purpurds/paragraph": "8.
|
|
26
|
-
"@purpurds/tokens": "8.
|
|
27
|
-
"@purpurds/visually-hidden": "8.
|
|
20
|
+
"classnames": "~2.5.1",
|
|
21
|
+
"@purpurds/button": "8.9.0",
|
|
22
|
+
"@purpurds/common-types": "8.9.0",
|
|
23
|
+
"@purpurds/heading": "8.9.0",
|
|
24
|
+
"@purpurds/icon": "8.9.0",
|
|
25
|
+
"@purpurds/paragraph": "8.9.0",
|
|
26
|
+
"@purpurds/tokens": "8.9.0",
|
|
27
|
+
"@purpurds/visually-hidden": "8.9.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@storybook/react-vite": "^10.0.
|
|
31
|
-
"@testing-library/dom": "~10.4.
|
|
32
|
-
"@testing-library/jest-dom": "~6.
|
|
33
|
-
"@testing-library/react": "~16.
|
|
30
|
+
"@storybook/react-vite": "^10.0.8",
|
|
31
|
+
"@testing-library/dom": "~10.4.1",
|
|
32
|
+
"@testing-library/jest-dom": "~6.9.1",
|
|
33
|
+
"@testing-library/react": "~16.3.0",
|
|
34
34
|
"@testing-library/user-event": "~14.5.1",
|
|
35
35
|
"@types/node": "22.17",
|
|
36
|
-
"@types/react-dom": "^19.
|
|
37
|
-
"@types/react": "^19.
|
|
38
|
-
"eslint": "9.
|
|
39
|
-
"jsdom": "~
|
|
40
|
-
"lint-staged": "
|
|
36
|
+
"@types/react-dom": "^19.2.3",
|
|
37
|
+
"@types/react": "^19.2.6",
|
|
38
|
+
"eslint": "9.39.1",
|
|
39
|
+
"jsdom": "~27.2.0",
|
|
40
|
+
"lint-staged": "16.2.6",
|
|
41
41
|
"prettier": "~2.8.8",
|
|
42
|
-
"react-dom": "^19.
|
|
43
|
-
"react": "^19.
|
|
44
|
-
"storybook": "^10.0.
|
|
45
|
-
"typescript": "^5.
|
|
46
|
-
"vite": "^
|
|
47
|
-
"vitest": "^
|
|
42
|
+
"react-dom": "^19.2.0",
|
|
43
|
+
"react": "^19.2.0",
|
|
44
|
+
"storybook": "^10.0.8",
|
|
45
|
+
"typescript": "^5.9.3",
|
|
46
|
+
"vite": "^7.2.2",
|
|
47
|
+
"vitest": "^4.0.10",
|
|
48
48
|
"@purpurds/component-rig": "1.0.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
package/src/drawer.test.tsx
CHANGED
|
@@ -7,13 +7,15 @@ import { afterEach, describe, expect, it, vi } from "vitest";
|
|
|
7
7
|
|
|
8
8
|
import { Drawer } from "./drawer";
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
vi.
|
|
10
|
+
global.ResizeObserver = vi.fn(function (this: {
|
|
11
|
+
observe: ReturnType<typeof vi.fn>;
|
|
12
|
+
unobserve: ReturnType<typeof vi.fn>;
|
|
13
|
+
disconnect: ReturnType<typeof vi.fn>;
|
|
14
|
+
}) {
|
|
15
|
+
this.observe = vi.fn();
|
|
16
|
+
this.unobserve = vi.fn();
|
|
17
|
+
this.disconnect = vi.fn();
|
|
18
|
+
}) as unknown as typeof ResizeObserver;
|
|
17
19
|
|
|
18
20
|
expect.extend(matchers);
|
|
19
21
|
|