@behivetech/atoms.drawer 0.0.0-stage → 0.4.3
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/README.md +42 -2
- package/dist/index.cjs +248 -0
- package/dist/index.css +172 -0
- package/dist/index.d.ts +41 -0
- package/dist/index.js +236 -0
- package/docs.json +78 -0
- package/drawer.example.tsx +25 -0
- package/drawer.module.scss +99 -0
- package/drawer.tsx +128 -0
- package/index.ts +2 -0
- package/package.json +62 -3
package/README.md
CHANGED
|
@@ -1,3 +1,43 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Drawer
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A `Card` docked to one edge of the viewport as a slide-in panel, built on
|
|
4
|
+
[Radix `Dialog`](https://www.radix-ui.com/primitives/docs/components/dialog)
|
|
5
|
+
for focus trapping, Escape-to-close, and outside-click-to-close. It has no
|
|
6
|
+
opinion on what goes inside the panel — an optional `title` renders a header
|
|
7
|
+
with a close button, otherwise just the `children` are shown.
|
|
8
|
+
|
|
9
|
+
`placement` controls which edge it docks to; `backdrop` controls whether it
|
|
10
|
+
blocks the rest of the page or floats alongside content the user can keep
|
|
11
|
+
interacting with, e.g. an always-visible properties panel. For a centered
|
|
12
|
+
dialog that always blocks the page, use `@behivetech/atoms.modal` instead.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
import { Drawer } from '@behivetech/atoms.drawer';
|
|
18
|
+
|
|
19
|
+
// A blocking panel docked to the right edge — closes on backdrop click
|
|
20
|
+
<Drawer onClose={() => setOpen(false)} title="Add Block" placement="right">
|
|
21
|
+
<div>Panel content</div>
|
|
22
|
+
</Drawer>
|
|
23
|
+
|
|
24
|
+
// A non-blocking panel docked to the right edge — the rest of the page stays
|
|
25
|
+
// interactive, and clicking outside the panel does not close it
|
|
26
|
+
<Drawer onClose={() => setSelected(null)} title="Block" placement="right" backdrop={false}>
|
|
27
|
+
<div>Properties form</div>
|
|
28
|
+
</Drawer>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Props
|
|
32
|
+
|
|
33
|
+
| Prop | Type | Default | Description |
|
|
34
|
+
| -------------- | -------------------------------- | ------- | -------------------------------------------------------------------------------------------- |
|
|
35
|
+
| `onClose` | `() => void` | — | Called when the drawer is dismissed (backdrop click, Escape, or the close button) — required |
|
|
36
|
+
| `title` | `string` | — | Optional header title; omit to render no header and no close button |
|
|
37
|
+
| `icon` | `ReactNode` | — | Optional icon rendered before the title; ignored if `title` is omitted |
|
|
38
|
+
| `padding` | `none \| sm \| md \| lg` | `none` | Internal padding of the panel body — same values as `Card`'s `padding` prop |
|
|
39
|
+
| `headingLevel` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `3` | Which heading tag wraps `title` — same values as `Card`'s `headingLevel` prop |
|
|
40
|
+
| `placement` | `top \| right \| bottom \| left` | — | Which edge the panel docks to — required |
|
|
41
|
+
| `backdrop` | `boolean` | `true` | Whether a dimmed backdrop blocks the page and closes the drawer when clicked |
|
|
42
|
+
| `children` | `ReactNode` | — | Panel content |
|
|
43
|
+
| `className` | `string` | — | Additional class names |
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
9
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
10
|
+
};
|
|
11
|
+
var __export = (target, all) => {
|
|
12
|
+
for (var name in all)
|
|
13
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
14
|
+
};
|
|
15
|
+
var __copyProps = (to, from, except, desc) => {
|
|
16
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
17
|
+
for (let key of __getOwnPropNames(from))
|
|
18
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
19
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
20
|
+
}
|
|
21
|
+
return to;
|
|
22
|
+
};
|
|
23
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
24
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
25
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
26
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
27
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
28
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
29
|
+
mod
|
|
30
|
+
));
|
|
31
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
32
|
+
|
|
33
|
+
// ../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js
|
|
34
|
+
var require_classnames = __commonJS({
|
|
35
|
+
"../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"(exports2, module2) {
|
|
36
|
+
"use strict";
|
|
37
|
+
(function() {
|
|
38
|
+
"use strict";
|
|
39
|
+
var hasOwn = {}.hasOwnProperty;
|
|
40
|
+
function classNames() {
|
|
41
|
+
var classes = "";
|
|
42
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
43
|
+
var arg = arguments[i];
|
|
44
|
+
if (arg) {
|
|
45
|
+
classes = appendClass(classes, parseValue(arg));
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return classes;
|
|
49
|
+
}
|
|
50
|
+
function parseValue(arg) {
|
|
51
|
+
if (typeof arg === "string" || typeof arg === "number") {
|
|
52
|
+
return arg;
|
|
53
|
+
}
|
|
54
|
+
if (typeof arg !== "object") {
|
|
55
|
+
return "";
|
|
56
|
+
}
|
|
57
|
+
if (Array.isArray(arg)) {
|
|
58
|
+
return classNames.apply(null, arg);
|
|
59
|
+
}
|
|
60
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
|
|
61
|
+
return arg.toString();
|
|
62
|
+
}
|
|
63
|
+
var classes = "";
|
|
64
|
+
for (var key in arg) {
|
|
65
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
66
|
+
classes = appendClass(classes, key);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
return classes;
|
|
70
|
+
}
|
|
71
|
+
function appendClass(value, newClass) {
|
|
72
|
+
if (!newClass) {
|
|
73
|
+
return value;
|
|
74
|
+
}
|
|
75
|
+
if (value) {
|
|
76
|
+
return value + " " + newClass;
|
|
77
|
+
}
|
|
78
|
+
return value + newClass;
|
|
79
|
+
}
|
|
80
|
+
if (typeof module2 !== "undefined" && module2.exports) {
|
|
81
|
+
classNames.default = classNames;
|
|
82
|
+
module2.exports = classNames;
|
|
83
|
+
} else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
|
|
84
|
+
define("classnames", [], function() {
|
|
85
|
+
return classNames;
|
|
86
|
+
});
|
|
87
|
+
} else {
|
|
88
|
+
window.classNames = classNames;
|
|
89
|
+
}
|
|
90
|
+
})();
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
// index.ts
|
|
95
|
+
var index_exports = {};
|
|
96
|
+
__export(index_exports, {
|
|
97
|
+
Drawer: () => Drawer
|
|
98
|
+
});
|
|
99
|
+
module.exports = __toCommonJS(index_exports);
|
|
100
|
+
|
|
101
|
+
// drawer.tsx
|
|
102
|
+
var RadixDialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
103
|
+
|
|
104
|
+
// ../../../../packages/registry/class-names/dist/index.js
|
|
105
|
+
var import_classnames = __toESM(require_classnames(), 1);
|
|
106
|
+
var getClassName = ({
|
|
107
|
+
className,
|
|
108
|
+
modifiers = {},
|
|
109
|
+
rootClass,
|
|
110
|
+
styles = {}
|
|
111
|
+
}) => {
|
|
112
|
+
function getModifiers() {
|
|
113
|
+
const updatedModifiers = {};
|
|
114
|
+
const modifierKeys = Object.keys(modifiers);
|
|
115
|
+
if (modifierKeys.length) {
|
|
116
|
+
modifierKeys.forEach((modKey) => {
|
|
117
|
+
const classKey = `${rootClass}--${modKey}`;
|
|
118
|
+
const newClassName = styles[classKey] || classKey;
|
|
119
|
+
updatedModifiers[newClassName] = modifiers[modKey] ?? false;
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
return updatedModifiers;
|
|
123
|
+
}
|
|
124
|
+
function getChildClass(childClassName) {
|
|
125
|
+
const classKey = `${rootClass}__${childClassName}`;
|
|
126
|
+
return styles[classKey] || classKey;
|
|
127
|
+
}
|
|
128
|
+
function getRootStyles() {
|
|
129
|
+
return (0, import_classnames.default)(
|
|
130
|
+
className,
|
|
131
|
+
{
|
|
132
|
+
...getModifiers()
|
|
133
|
+
},
|
|
134
|
+
styles[rootClass] || rootClass
|
|
135
|
+
);
|
|
136
|
+
}
|
|
137
|
+
return [getRootStyles(), getChildClass];
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
// drawer.tsx
|
|
141
|
+
var import_atoms = require("@behivetech/atoms.card");
|
|
142
|
+
var import_atoms2 = require("@behivetech/atoms.button");
|
|
143
|
+
var import_atoms3 = require("@behivetech/atoms.icon");
|
|
144
|
+
|
|
145
|
+
// drawer.module.scss
|
|
146
|
+
var drawer_module_default = {
|
|
147
|
+
"BHT__Card": "BHT__Card",
|
|
148
|
+
"BHT__Card__header": "BHT__Card__header",
|
|
149
|
+
"BHT__Card__heading": "BHT__Card__heading",
|
|
150
|
+
"BHT__Card__icon": "BHT__Card__icon",
|
|
151
|
+
"BHT__Card__title": "BHT__Card__title",
|
|
152
|
+
"BHT__Card__action": "BHT__Card__action",
|
|
153
|
+
"BHT__Card__body-padding": "BHT__Card__body-padding",
|
|
154
|
+
"BHT__Card--interactive": "BHT__Card--interactive",
|
|
155
|
+
"BHT__Card--scrollable-body": "BHT__Card--scrollable-body",
|
|
156
|
+
"BHT__Card--padding-sm": "BHT__Card--padding-sm",
|
|
157
|
+
"BHT__Card--padding-md": "BHT__Card--padding-md",
|
|
158
|
+
"BHT__Card--padding-lg": "BHT__Card--padding-lg",
|
|
159
|
+
"BHT__Drawer": "BHT__Drawer",
|
|
160
|
+
"BHT__Drawer__backdrop": "BHT__Drawer__backdrop",
|
|
161
|
+
"BHT__Drawer__panel": "BHT__Drawer__panel",
|
|
162
|
+
"BHT__Drawer__visually-hidden-title": "BHT__Drawer__visually-hidden-title",
|
|
163
|
+
"BHT__Drawer--placement-right": "BHT__Drawer--placement-right",
|
|
164
|
+
"BHT__Drawer--placement-left": "BHT__Drawer--placement-left",
|
|
165
|
+
"BHT__Drawer--placement-top": "BHT__Drawer--placement-top",
|
|
166
|
+
"BHT__Drawer--placement-bottom": "BHT__Drawer--placement-bottom"
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
// drawer.tsx
|
|
170
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
171
|
+
var Drawer = ({
|
|
172
|
+
className,
|
|
173
|
+
onClose,
|
|
174
|
+
title,
|
|
175
|
+
icon,
|
|
176
|
+
padding,
|
|
177
|
+
headingLevel,
|
|
178
|
+
placement,
|
|
179
|
+
backdrop = true,
|
|
180
|
+
children,
|
|
181
|
+
...rest
|
|
182
|
+
}) => {
|
|
183
|
+
const [rootClass, getChildClass] = getClassName({
|
|
184
|
+
className,
|
|
185
|
+
rootClass: "BHT__Drawer",
|
|
186
|
+
modifiers: { [`placement-${placement}`]: true },
|
|
187
|
+
styles: drawer_module_default
|
|
188
|
+
});
|
|
189
|
+
const hasHeader = title !== void 0;
|
|
190
|
+
const cardTitle = hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixDialog.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title }) }) : void 0;
|
|
191
|
+
const cardAction = hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_atoms2.Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_atoms3.CloseIcon, { size: "sm" }) }) }) : void 0;
|
|
192
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
193
|
+
RadixDialog.Root,
|
|
194
|
+
{
|
|
195
|
+
open: true,
|
|
196
|
+
modal: backdrop,
|
|
197
|
+
onOpenChange: (open) => !open && onClose(),
|
|
198
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(RadixDialog.Portal, { children: [
|
|
199
|
+
backdrop && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixDialog.Overlay, { className: getChildClass("backdrop") }),
|
|
200
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
201
|
+
RadixDialog.Content,
|
|
202
|
+
{
|
|
203
|
+
...rest,
|
|
204
|
+
className: rootClass,
|
|
205
|
+
onPointerDownOutside: (e) => {
|
|
206
|
+
if (!backdrop) e.preventDefault();
|
|
207
|
+
},
|
|
208
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
209
|
+
import_atoms.Card,
|
|
210
|
+
{
|
|
211
|
+
className: getChildClass("panel"),
|
|
212
|
+
icon: hasHeader ? icon : void 0,
|
|
213
|
+
title: cardTitle,
|
|
214
|
+
headingLevel,
|
|
215
|
+
action: cardAction,
|
|
216
|
+
padding,
|
|
217
|
+
scrollableBody: true,
|
|
218
|
+
children: [
|
|
219
|
+
!hasHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
220
|
+
RadixDialog.Title,
|
|
221
|
+
{
|
|
222
|
+
className: getChildClass("visually-hidden-title"),
|
|
223
|
+
children: "Dialog"
|
|
224
|
+
}
|
|
225
|
+
),
|
|
226
|
+
children
|
|
227
|
+
]
|
|
228
|
+
}
|
|
229
|
+
)
|
|
230
|
+
}
|
|
231
|
+
)
|
|
232
|
+
] })
|
|
233
|
+
}
|
|
234
|
+
);
|
|
235
|
+
};
|
|
236
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
237
|
+
0 && (module.exports = {
|
|
238
|
+
Drawer
|
|
239
|
+
});
|
|
240
|
+
/*! Bundled license information:
|
|
241
|
+
|
|
242
|
+
classnames/index.js:
|
|
243
|
+
(*!
|
|
244
|
+
Copyright (c) 2018 Jed Watson.
|
|
245
|
+
Licensed under the MIT License (MIT), see
|
|
246
|
+
http://jedwatson.github.io/classnames
|
|
247
|
+
*)
|
|
248
|
+
*/
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
|
|
3
|
+
/* esbuild-sass-plugin:css-chunkdrawer.module.scss */
|
|
4
|
+
.BHT__Card {
|
|
5
|
+
background: var(--card-background, var(--md-sys-color-surface, var(--color-surface)));
|
|
6
|
+
color: var(--md-sys-color-on-surface, var(--color-on-surface));
|
|
7
|
+
border: var(--card-border, 1px solid var(--md-sys-color-outline-variant, var(--color-border)));
|
|
8
|
+
border-radius: var(--card-radius, var(--md-sys-shape-corner-medium, 12px));
|
|
9
|
+
min-width: 0;
|
|
10
|
+
}
|
|
11
|
+
.BHT__Card__header {
|
|
12
|
+
padding: var(--spacing-4) var(--spacing-6);
|
|
13
|
+
border-bottom: 1px solid var(--md-sys-color-outline-variant, var(--color-border));
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: space-between;
|
|
17
|
+
gap: var(--spacing-4);
|
|
18
|
+
}
|
|
19
|
+
.BHT__Card__heading {
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
gap: var(--spacing-2);
|
|
23
|
+
min-width: 0;
|
|
24
|
+
}
|
|
25
|
+
.BHT__Card__icon {
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
line-height: 1;
|
|
28
|
+
}
|
|
29
|
+
.BHT__Card__title {
|
|
30
|
+
margin: 0;
|
|
31
|
+
font-family: var(--md-sys-typescale-title-medium-font, var(--font-heading));
|
|
32
|
+
font-size: var(--md-sys-typescale-title-medium-size, 1rem);
|
|
33
|
+
font-weight: var(--md-sys-typescale-title-medium-weight, 500);
|
|
34
|
+
line-height: var(--md-sys-typescale-title-medium-line-height, 1.5rem);
|
|
35
|
+
letter-spacing: var(--md-sys-typescale-title-medium-tracking, 0.0094em);
|
|
36
|
+
color: var(--md-sys-color-on-surface, var(--color-text-heading));
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
text-overflow: ellipsis;
|
|
39
|
+
white-space: nowrap;
|
|
40
|
+
}
|
|
41
|
+
.BHT__Card__action {
|
|
42
|
+
display: inline-flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
gap: var(--spacing-2);
|
|
45
|
+
flex-shrink: 0;
|
|
46
|
+
}
|
|
47
|
+
.BHT__Card__body-padding {
|
|
48
|
+
display: block;
|
|
49
|
+
width: 100%;
|
|
50
|
+
padding: 0;
|
|
51
|
+
margin: 0;
|
|
52
|
+
background: none;
|
|
53
|
+
border: none;
|
|
54
|
+
font: inherit;
|
|
55
|
+
color: inherit;
|
|
56
|
+
text-align: inherit;
|
|
57
|
+
}
|
|
58
|
+
.BHT__Card--interactive.BHT__Card {
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
}
|
|
61
|
+
.BHT__Card--interactive .BHT__Card__body-padding {
|
|
62
|
+
position: relative;
|
|
63
|
+
isolation: isolate;
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
align-items: center;
|
|
67
|
+
gap: var(--spacing-2);
|
|
68
|
+
text-align: center;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
}
|
|
71
|
+
.BHT__Card--interactive .BHT__Card__body-padding::after {
|
|
72
|
+
content: "";
|
|
73
|
+
position: absolute;
|
|
74
|
+
inset: 0;
|
|
75
|
+
background: currentColor;
|
|
76
|
+
opacity: 0;
|
|
77
|
+
pointer-events: none;
|
|
78
|
+
transition: opacity var(--md-sys-motion-duration-short-2, 100ms) var(--md-sys-motion-easing-standard, ease);
|
|
79
|
+
}
|
|
80
|
+
.BHT__Card--interactive .BHT__Card__body-padding:hover::after {
|
|
81
|
+
opacity: var(--md-sys-state-hover-opacity, 0.08);
|
|
82
|
+
}
|
|
83
|
+
.BHT__Card--interactive .BHT__Card__body-padding:focus-visible::after {
|
|
84
|
+
opacity: var(--md-sys-state-focus-opacity, 0.1);
|
|
85
|
+
}
|
|
86
|
+
.BHT__Card--interactive .BHT__Card__body-padding:active::after {
|
|
87
|
+
opacity: var(--md-sys-state-pressed-opacity, 0.1);
|
|
88
|
+
}
|
|
89
|
+
.BHT__Card--interactive .BHT__Card__body-padding:focus-visible {
|
|
90
|
+
outline: 3px solid var(--md-sys-color-secondary, var(--color-border-focus));
|
|
91
|
+
outline-offset: -3px;
|
|
92
|
+
}
|
|
93
|
+
.BHT__Card--scrollable-body.BHT__Card {
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
overflow: hidden;
|
|
97
|
+
}
|
|
98
|
+
.BHT__Card--scrollable-body .BHT__Card__body-padding {
|
|
99
|
+
overflow-y: auto;
|
|
100
|
+
flex: 1;
|
|
101
|
+
min-height: 0;
|
|
102
|
+
}
|
|
103
|
+
.BHT__Card--padding-sm .BHT__Card__body-padding {
|
|
104
|
+
padding: var(--spacing-3);
|
|
105
|
+
}
|
|
106
|
+
.BHT__Card--padding-md .BHT__Card__body-padding {
|
|
107
|
+
padding: var(--spacing-5);
|
|
108
|
+
}
|
|
109
|
+
.BHT__Card--padding-lg .BHT__Card__body-padding {
|
|
110
|
+
padding: var(--spacing-8);
|
|
111
|
+
}
|
|
112
|
+
.BHT__Drawer {
|
|
113
|
+
z-index: var(--z-modal, 400);
|
|
114
|
+
}
|
|
115
|
+
.BHT__Drawer__backdrop {
|
|
116
|
+
position: fixed;
|
|
117
|
+
inset: 0;
|
|
118
|
+
background: var(--color-overlay);
|
|
119
|
+
z-index: var(--z-modal, 400);
|
|
120
|
+
}
|
|
121
|
+
.BHT__Drawer__panel {
|
|
122
|
+
--card-background: var( --md-sys-color-surface-container-low, var(--color-surface-raised) );
|
|
123
|
+
--card-radius: var(--md-sys-shape-corner-large, 16px);
|
|
124
|
+
box-shadow: var(--md-sys-elevation-1, var(--shadow-sm));
|
|
125
|
+
}
|
|
126
|
+
.BHT__Drawer__visually-hidden-title {
|
|
127
|
+
position: absolute;
|
|
128
|
+
width: 1px;
|
|
129
|
+
height: 1px;
|
|
130
|
+
padding: 0;
|
|
131
|
+
margin: -1px;
|
|
132
|
+
overflow: hidden;
|
|
133
|
+
clip: rect(0, 0, 0, 0);
|
|
134
|
+
white-space: nowrap;
|
|
135
|
+
border: 0;
|
|
136
|
+
}
|
|
137
|
+
.BHT__Drawer--placement-right.BHT__Drawer,
|
|
138
|
+
.BHT__Drawer--placement-left.BHT__Drawer {
|
|
139
|
+
position: fixed;
|
|
140
|
+
top: 0;
|
|
141
|
+
height: 100vh;
|
|
142
|
+
}
|
|
143
|
+
.BHT__Drawer--placement-right .BHT__Drawer__panel,
|
|
144
|
+
.BHT__Drawer--placement-left .BHT__Drawer__panel {
|
|
145
|
+
width: min(20rem, 90vw);
|
|
146
|
+
height: 100%;
|
|
147
|
+
--card-radius: 0;
|
|
148
|
+
}
|
|
149
|
+
.BHT__Drawer--placement-right.BHT__Drawer {
|
|
150
|
+
right: 0;
|
|
151
|
+
}
|
|
152
|
+
.BHT__Drawer--placement-left.BHT__Drawer {
|
|
153
|
+
left: 0;
|
|
154
|
+
}
|
|
155
|
+
.BHT__Drawer--placement-top.BHT__Drawer,
|
|
156
|
+
.BHT__Drawer--placement-bottom.BHT__Drawer {
|
|
157
|
+
position: fixed;
|
|
158
|
+
left: 0;
|
|
159
|
+
width: 100vw;
|
|
160
|
+
}
|
|
161
|
+
.BHT__Drawer--placement-top .BHT__Drawer__panel,
|
|
162
|
+
.BHT__Drawer--placement-bottom .BHT__Drawer__panel {
|
|
163
|
+
width: 100%;
|
|
164
|
+
max-height: min(20rem, 90vh);
|
|
165
|
+
--card-radius: 0;
|
|
166
|
+
}
|
|
167
|
+
.BHT__Drawer--placement-top.BHT__Drawer {
|
|
168
|
+
top: 0;
|
|
169
|
+
}
|
|
170
|
+
.BHT__Drawer--placement-bottom.BHT__Drawer {
|
|
171
|
+
bottom: 0;
|
|
172
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { CardPadding, CardHeadingLevel } from '@behivetech/atoms.card';
|
|
4
|
+
|
|
5
|
+
type DrawerPlacement = "top" | "right" | "bottom" | "left";
|
|
6
|
+
interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
7
|
+
/** Additional class names to merge with the component root element */
|
|
8
|
+
className?: string;
|
|
9
|
+
/** Called when the drawer is dismissed (backdrop click, Escape, or the close button) */
|
|
10
|
+
onClose: () => void;
|
|
11
|
+
/** Optional header title; omit to render no header and no close button */
|
|
12
|
+
title?: string;
|
|
13
|
+
/** Optional icon rendered before the title in the header; ignored if `title` is omitted */
|
|
14
|
+
icon?: ReactNode;
|
|
15
|
+
/** Internal padding of the panel body — same values as `Card`'s `padding` prop */
|
|
16
|
+
padding?: CardPadding;
|
|
17
|
+
/** Which heading tag wraps `title` — same values as `Card`'s `headingLevel` prop */
|
|
18
|
+
headingLevel?: CardHeadingLevel;
|
|
19
|
+
/** Which edge the panel slides in from */
|
|
20
|
+
placement: DrawerPlacement;
|
|
21
|
+
/**
|
|
22
|
+
* Whether a dimmed backdrop covers the rest of the page, blocks interaction with
|
|
23
|
+
* it, and closes the drawer when clicked — a real modal. Defaults to true. Set
|
|
24
|
+
* false for a non-blocking panel that floats alongside content the user can keep
|
|
25
|
+
* interacting with, e.g. an always-visible properties panel that updates as a
|
|
26
|
+
* different item is selected behind it.
|
|
27
|
+
*/
|
|
28
|
+
backdrop?: boolean;
|
|
29
|
+
/** Panel content */
|
|
30
|
+
children: ReactNode;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* A `Card` docked to one edge of the viewport as a slide-in panel, built on
|
|
34
|
+
* Radix's `Dialog` for focus trapping, Escape-to-close, and outside-click-to-close.
|
|
35
|
+
* `placement` controls which edge it docks to; `backdrop` controls whether it
|
|
36
|
+
* blocks the rest of the page or floats alongside content the user can keep
|
|
37
|
+
* interacting with. For a centered dialog that always blocks the page, use `Modal`.
|
|
38
|
+
*/
|
|
39
|
+
declare const Drawer: ({ className, onClose, title, icon, padding, headingLevel, placement, backdrop, children, ...rest }: DrawerProps) => react.JSX.Element;
|
|
40
|
+
|
|
41
|
+
export { Drawer, type DrawerPlacement, type DrawerProps };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
19
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
20
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
21
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
22
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
23
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
|
+
mod
|
|
25
|
+
));
|
|
26
|
+
|
|
27
|
+
// ../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js
|
|
28
|
+
var require_classnames = __commonJS({
|
|
29
|
+
"../../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js"(exports, module) {
|
|
30
|
+
"use strict";
|
|
31
|
+
(function() {
|
|
32
|
+
"use strict";
|
|
33
|
+
var hasOwn = {}.hasOwnProperty;
|
|
34
|
+
function classNames() {
|
|
35
|
+
var classes = "";
|
|
36
|
+
for (var i = 0; i < arguments.length; i++) {
|
|
37
|
+
var arg = arguments[i];
|
|
38
|
+
if (arg) {
|
|
39
|
+
classes = appendClass(classes, parseValue(arg));
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return classes;
|
|
43
|
+
}
|
|
44
|
+
function parseValue(arg) {
|
|
45
|
+
if (typeof arg === "string" || typeof arg === "number") {
|
|
46
|
+
return arg;
|
|
47
|
+
}
|
|
48
|
+
if (typeof arg !== "object") {
|
|
49
|
+
return "";
|
|
50
|
+
}
|
|
51
|
+
if (Array.isArray(arg)) {
|
|
52
|
+
return classNames.apply(null, arg);
|
|
53
|
+
}
|
|
54
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
|
|
55
|
+
return arg.toString();
|
|
56
|
+
}
|
|
57
|
+
var classes = "";
|
|
58
|
+
for (var key in arg) {
|
|
59
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
60
|
+
classes = appendClass(classes, key);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
return classes;
|
|
64
|
+
}
|
|
65
|
+
function appendClass(value, newClass) {
|
|
66
|
+
if (!newClass) {
|
|
67
|
+
return value;
|
|
68
|
+
}
|
|
69
|
+
if (value) {
|
|
70
|
+
return value + " " + newClass;
|
|
71
|
+
}
|
|
72
|
+
return value + newClass;
|
|
73
|
+
}
|
|
74
|
+
if (typeof module !== "undefined" && module.exports) {
|
|
75
|
+
classNames.default = classNames;
|
|
76
|
+
module.exports = classNames;
|
|
77
|
+
} else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
|
|
78
|
+
define("classnames", [], function() {
|
|
79
|
+
return classNames;
|
|
80
|
+
});
|
|
81
|
+
} else {
|
|
82
|
+
window.classNames = classNames;
|
|
83
|
+
}
|
|
84
|
+
})();
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
// drawer.tsx
|
|
89
|
+
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
90
|
+
|
|
91
|
+
// ../../../../packages/registry/class-names/dist/index.js
|
|
92
|
+
var import_classnames = __toESM(require_classnames(), 1);
|
|
93
|
+
var getClassName = ({
|
|
94
|
+
className,
|
|
95
|
+
modifiers = {},
|
|
96
|
+
rootClass,
|
|
97
|
+
styles = {}
|
|
98
|
+
}) => {
|
|
99
|
+
function getModifiers() {
|
|
100
|
+
const updatedModifiers = {};
|
|
101
|
+
const modifierKeys = Object.keys(modifiers);
|
|
102
|
+
if (modifierKeys.length) {
|
|
103
|
+
modifierKeys.forEach((modKey) => {
|
|
104
|
+
const classKey = `${rootClass}--${modKey}`;
|
|
105
|
+
const newClassName = styles[classKey] || classKey;
|
|
106
|
+
updatedModifiers[newClassName] = modifiers[modKey] ?? false;
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
return updatedModifiers;
|
|
110
|
+
}
|
|
111
|
+
function getChildClass(childClassName) {
|
|
112
|
+
const classKey = `${rootClass}__${childClassName}`;
|
|
113
|
+
return styles[classKey] || classKey;
|
|
114
|
+
}
|
|
115
|
+
function getRootStyles() {
|
|
116
|
+
return (0, import_classnames.default)(
|
|
117
|
+
className,
|
|
118
|
+
{
|
|
119
|
+
...getModifiers()
|
|
120
|
+
},
|
|
121
|
+
styles[rootClass] || rootClass
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
return [getRootStyles(), getChildClass];
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
// drawer.tsx
|
|
128
|
+
import {
|
|
129
|
+
Card
|
|
130
|
+
} from "@behivetech/atoms.card";
|
|
131
|
+
import { Button } from "@behivetech/atoms.button";
|
|
132
|
+
import { CloseIcon } from "@behivetech/atoms.icon";
|
|
133
|
+
|
|
134
|
+
// drawer.module.scss
|
|
135
|
+
var drawer_module_default = {
|
|
136
|
+
"BHT__Card": "BHT__Card",
|
|
137
|
+
"BHT__Card__header": "BHT__Card__header",
|
|
138
|
+
"BHT__Card__heading": "BHT__Card__heading",
|
|
139
|
+
"BHT__Card__icon": "BHT__Card__icon",
|
|
140
|
+
"BHT__Card__title": "BHT__Card__title",
|
|
141
|
+
"BHT__Card__action": "BHT__Card__action",
|
|
142
|
+
"BHT__Card__body-padding": "BHT__Card__body-padding",
|
|
143
|
+
"BHT__Card--interactive": "BHT__Card--interactive",
|
|
144
|
+
"BHT__Card--scrollable-body": "BHT__Card--scrollable-body",
|
|
145
|
+
"BHT__Card--padding-sm": "BHT__Card--padding-sm",
|
|
146
|
+
"BHT__Card--padding-md": "BHT__Card--padding-md",
|
|
147
|
+
"BHT__Card--padding-lg": "BHT__Card--padding-lg",
|
|
148
|
+
"BHT__Drawer": "BHT__Drawer",
|
|
149
|
+
"BHT__Drawer__backdrop": "BHT__Drawer__backdrop",
|
|
150
|
+
"BHT__Drawer__panel": "BHT__Drawer__panel",
|
|
151
|
+
"BHT__Drawer__visually-hidden-title": "BHT__Drawer__visually-hidden-title",
|
|
152
|
+
"BHT__Drawer--placement-right": "BHT__Drawer--placement-right",
|
|
153
|
+
"BHT__Drawer--placement-left": "BHT__Drawer--placement-left",
|
|
154
|
+
"BHT__Drawer--placement-top": "BHT__Drawer--placement-top",
|
|
155
|
+
"BHT__Drawer--placement-bottom": "BHT__Drawer--placement-bottom"
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
// drawer.tsx
|
|
159
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
160
|
+
var Drawer = ({
|
|
161
|
+
className,
|
|
162
|
+
onClose,
|
|
163
|
+
title,
|
|
164
|
+
icon,
|
|
165
|
+
padding,
|
|
166
|
+
headingLevel,
|
|
167
|
+
placement,
|
|
168
|
+
backdrop = true,
|
|
169
|
+
children,
|
|
170
|
+
...rest
|
|
171
|
+
}) => {
|
|
172
|
+
const [rootClass, getChildClass] = getClassName({
|
|
173
|
+
className,
|
|
174
|
+
rootClass: "BHT__Drawer",
|
|
175
|
+
modifiers: { [`placement-${placement}`]: true },
|
|
176
|
+
styles: drawer_module_default
|
|
177
|
+
});
|
|
178
|
+
const hasHeader = title !== void 0;
|
|
179
|
+
const cardTitle = hasHeader ? /* @__PURE__ */ jsx(RadixDialog.Title, { asChild: true, children: /* @__PURE__ */ jsx("span", { children: title }) }) : void 0;
|
|
180
|
+
const cardAction = hasHeader ? /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": "Close", children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" }) }) }) : void 0;
|
|
181
|
+
return /* @__PURE__ */ jsx(
|
|
182
|
+
RadixDialog.Root,
|
|
183
|
+
{
|
|
184
|
+
open: true,
|
|
185
|
+
modal: backdrop,
|
|
186
|
+
onOpenChange: (open) => !open && onClose(),
|
|
187
|
+
children: /* @__PURE__ */ jsxs(RadixDialog.Portal, { children: [
|
|
188
|
+
backdrop && /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: getChildClass("backdrop") }),
|
|
189
|
+
/* @__PURE__ */ jsx(
|
|
190
|
+
RadixDialog.Content,
|
|
191
|
+
{
|
|
192
|
+
...rest,
|
|
193
|
+
className: rootClass,
|
|
194
|
+
onPointerDownOutside: (e) => {
|
|
195
|
+
if (!backdrop) e.preventDefault();
|
|
196
|
+
},
|
|
197
|
+
children: /* @__PURE__ */ jsxs(
|
|
198
|
+
Card,
|
|
199
|
+
{
|
|
200
|
+
className: getChildClass("panel"),
|
|
201
|
+
icon: hasHeader ? icon : void 0,
|
|
202
|
+
title: cardTitle,
|
|
203
|
+
headingLevel,
|
|
204
|
+
action: cardAction,
|
|
205
|
+
padding,
|
|
206
|
+
scrollableBody: true,
|
|
207
|
+
children: [
|
|
208
|
+
!hasHeader && /* @__PURE__ */ jsx(
|
|
209
|
+
RadixDialog.Title,
|
|
210
|
+
{
|
|
211
|
+
className: getChildClass("visually-hidden-title"),
|
|
212
|
+
children: "Dialog"
|
|
213
|
+
}
|
|
214
|
+
),
|
|
215
|
+
children
|
|
216
|
+
]
|
|
217
|
+
}
|
|
218
|
+
)
|
|
219
|
+
}
|
|
220
|
+
)
|
|
221
|
+
] })
|
|
222
|
+
}
|
|
223
|
+
);
|
|
224
|
+
};
|
|
225
|
+
export {
|
|
226
|
+
Drawer
|
|
227
|
+
};
|
|
228
|
+
/*! Bundled license information:
|
|
229
|
+
|
|
230
|
+
classnames/index.js:
|
|
231
|
+
(*!
|
|
232
|
+
Copyright (c) 2018 Jed Watson.
|
|
233
|
+
Licensed under the MIT License (MIT), see
|
|
234
|
+
http://jedwatson.github.io/classnames
|
|
235
|
+
*)
|
|
236
|
+
*/
|
package/docs.json
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://github.com/behivetech/bht-component-registry/docs.schema.json",
|
|
3
|
+
"version": 2,
|
|
4
|
+
"generatedAt": "2026-10-23T16:59:21.788Z",
|
|
5
|
+
"docs": [
|
|
6
|
+
{
|
|
7
|
+
"displayName": "Drawer",
|
|
8
|
+
"description": "A `Card` docked to one edge of the viewport as a slide-in panel, built on\nRadix's `Dialog` for focus trapping, Escape-to-close, and outside-click-to-close.\n`placement` controls which edge it docks to; `backdrop` controls whether it\nblocks the rest of the page or floats alongside content the user can keep\ninteracting with. For a centered dialog that always blocks the page, use `Modal`.",
|
|
9
|
+
"extendsNative": true,
|
|
10
|
+
"props": [
|
|
11
|
+
{
|
|
12
|
+
"name": "children",
|
|
13
|
+
"type": "ReactNode",
|
|
14
|
+
"required": true,
|
|
15
|
+
"defaultValue": null,
|
|
16
|
+
"description": "Panel content"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "onClose",
|
|
20
|
+
"type": "() => void",
|
|
21
|
+
"required": true,
|
|
22
|
+
"defaultValue": null,
|
|
23
|
+
"description": "Called when the drawer is dismissed (backdrop click, Escape, or the close button)"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"name": "placement",
|
|
27
|
+
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
|
|
28
|
+
"required": true,
|
|
29
|
+
"defaultValue": null,
|
|
30
|
+
"description": "Which edge the panel slides in from"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"name": "backdrop",
|
|
34
|
+
"type": "boolean",
|
|
35
|
+
"required": false,
|
|
36
|
+
"defaultValue": "true",
|
|
37
|
+
"description": "Whether a dimmed backdrop covers the rest of the page, blocks interaction with\nit, and closes the drawer when clicked — a real modal. Defaults to true. Set\nfalse for a non-blocking panel that floats alongside content the user can keep\ninteracting with, e.g. an always-visible properties panel that updates as a\ndifferent item is selected behind it."
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"name": "className",
|
|
41
|
+
"type": "string",
|
|
42
|
+
"required": false,
|
|
43
|
+
"defaultValue": null,
|
|
44
|
+
"description": "Additional class names to merge with the component root element"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "headingLevel",
|
|
48
|
+
"type": "1 | 2 | 3 | 4 | 5 | 6",
|
|
49
|
+
"required": false,
|
|
50
|
+
"defaultValue": null,
|
|
51
|
+
"description": "Which heading tag wraps `title` — same values as `Card`'s `headingLevel` prop"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"name": "icon",
|
|
55
|
+
"type": "ReactNode",
|
|
56
|
+
"required": false,
|
|
57
|
+
"defaultValue": null,
|
|
58
|
+
"description": "Optional icon rendered before the title in the header; ignored if `title` is omitted"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"name": "padding",
|
|
62
|
+
"type": "\"none\" | \"sm\" | \"md\" | \"lg\"",
|
|
63
|
+
"required": false,
|
|
64
|
+
"defaultValue": null,
|
|
65
|
+
"description": "Internal padding of the panel body — same values as `Card`'s `padding` prop"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"name": "title",
|
|
69
|
+
"type": "string",
|
|
70
|
+
"required": false,
|
|
71
|
+
"defaultValue": null,
|
|
72
|
+
"description": "Optional header title; omit to render no header and no close button"
|
|
73
|
+
}
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
],
|
|
77
|
+
"functions": []
|
|
78
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Drawer } from "./drawer.js";
|
|
2
|
+
|
|
3
|
+
export const BasicDrawer = () => (
|
|
4
|
+
<Drawer onClose={() => {}} title="Add Block" placement="right">
|
|
5
|
+
Panel content
|
|
6
|
+
</Drawer>
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
export const DrawerWithoutTitle = () => (
|
|
10
|
+
<Drawer onClose={() => {}} placement="right">
|
|
11
|
+
Panel content, no header
|
|
12
|
+
</Drawer>
|
|
13
|
+
);
|
|
14
|
+
|
|
15
|
+
export const NonBlockingRightPanelDrawer = () => (
|
|
16
|
+
<Drawer onClose={() => {}} title="Block" placement="right" backdrop={false}>
|
|
17
|
+
Non-blocking side panel content
|
|
18
|
+
</Drawer>
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
export const BottomSheetDrawer = () => (
|
|
22
|
+
<Drawer onClose={() => {}} title="Filters" placement="bottom">
|
|
23
|
+
Slides up from the bottom edge
|
|
24
|
+
</Drawer>
|
|
25
|
+
);
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
// See modal.module.scss for why this is here — Drawer renders its panel as a
|
|
2
|
+
// Card too, and Card's CSS otherwise never ships with this package.
|
|
3
|
+
@use "../card/card.module.scss";
|
|
4
|
+
|
|
5
|
+
// Material Design 3 modal side sheet (bottom sheet for top/bottom placement).
|
|
6
|
+
// The panel is a Card re-themed through its custom properties.
|
|
7
|
+
.BHT__Drawer {
|
|
8
|
+
z-index: var(--z-modal, 400);
|
|
9
|
+
|
|
10
|
+
&__backdrop {
|
|
11
|
+
position: fixed;
|
|
12
|
+
inset: 0;
|
|
13
|
+
background: var(--color-overlay);
|
|
14
|
+
z-index: var(--z-modal, 400);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&__panel {
|
|
18
|
+
/* Card reads these custom properties — see Card's README */
|
|
19
|
+
--card-background: var(
|
|
20
|
+
--md-sys-color-surface-container-low,
|
|
21
|
+
var(--color-surface-raised)
|
|
22
|
+
);
|
|
23
|
+
--card-radius: var(--md-sys-shape-corner-large, 16px);
|
|
24
|
+
|
|
25
|
+
box-shadow: var(--md-sys-elevation-1, var(--shadow-sm));
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&__visually-hidden-title {
|
|
29
|
+
// Fixed px: this is the standard clip idiom for hiding content from sight
|
|
30
|
+
// while leaving it to screen readers, not a size that should scale.
|
|
31
|
+
position: absolute;
|
|
32
|
+
width: 1px;
|
|
33
|
+
height: 1px;
|
|
34
|
+
padding: 0;
|
|
35
|
+
margin: -1px;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
clip: rect(0, 0, 0, 0);
|
|
38
|
+
white-space: nowrap;
|
|
39
|
+
border: 0;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&--placement-right,
|
|
43
|
+
&--placement-left {
|
|
44
|
+
&.BHT__Drawer {
|
|
45
|
+
position: fixed;
|
|
46
|
+
top: 0;
|
|
47
|
+
height: 100vh;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.BHT__Drawer {
|
|
51
|
+
&__panel {
|
|
52
|
+
width: min(20rem, 90vw);
|
|
53
|
+
height: 100%;
|
|
54
|
+
--card-radius: 0;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&--placement-right {
|
|
60
|
+
&.BHT__Drawer {
|
|
61
|
+
right: 0;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&--placement-left {
|
|
66
|
+
&.BHT__Drawer {
|
|
67
|
+
left: 0;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&--placement-top,
|
|
72
|
+
&--placement-bottom {
|
|
73
|
+
&.BHT__Drawer {
|
|
74
|
+
position: fixed;
|
|
75
|
+
left: 0;
|
|
76
|
+
width: 100vw;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.BHT__Drawer {
|
|
80
|
+
&__panel {
|
|
81
|
+
width: 100%;
|
|
82
|
+
max-height: min(20rem, 90vh);
|
|
83
|
+
--card-radius: 0;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
&--placement-top {
|
|
89
|
+
&.BHT__Drawer {
|
|
90
|
+
top: 0;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&--placement-bottom {
|
|
95
|
+
&.BHT__Drawer {
|
|
96
|
+
bottom: 0;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
package/drawer.tsx
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { type HTMLAttributes, type ReactNode } from "react";
|
|
2
|
+
import * as RadixDialog from "@radix-ui/react-dialog";
|
|
3
|
+
import { getClassName } from "@bht-component-registry/class-names";
|
|
4
|
+
import {
|
|
5
|
+
Card,
|
|
6
|
+
type CardPadding,
|
|
7
|
+
type CardHeadingLevel,
|
|
8
|
+
} from "@behivetech/atoms.card";
|
|
9
|
+
import { Button } from "@behivetech/atoms.button";
|
|
10
|
+
// The glyph, not the set: `<Icon name>` is a runtime lookup, so importing it
|
|
11
|
+
// here would pull all 22 icons into every consumer of Drawer.
|
|
12
|
+
import { CloseIcon } from "@behivetech/atoms.icon";
|
|
13
|
+
import styles from "./drawer.module.scss";
|
|
14
|
+
|
|
15
|
+
export type DrawerPlacement = "top" | "right" | "bottom" | "left";
|
|
16
|
+
|
|
17
|
+
export interface DrawerProps extends Omit<
|
|
18
|
+
HTMLAttributes<HTMLDivElement>,
|
|
19
|
+
"title"
|
|
20
|
+
> {
|
|
21
|
+
/** Additional class names to merge with the component root element */
|
|
22
|
+
className?: string;
|
|
23
|
+
/** Called when the drawer is dismissed (backdrop click, Escape, or the close button) */
|
|
24
|
+
onClose: () => void;
|
|
25
|
+
/** Optional header title; omit to render no header and no close button */
|
|
26
|
+
title?: string;
|
|
27
|
+
/** Optional icon rendered before the title in the header; ignored if `title` is omitted */
|
|
28
|
+
icon?: ReactNode;
|
|
29
|
+
/** Internal padding of the panel body — same values as `Card`'s `padding` prop */
|
|
30
|
+
padding?: CardPadding;
|
|
31
|
+
/** Which heading tag wraps `title` — same values as `Card`'s `headingLevel` prop */
|
|
32
|
+
headingLevel?: CardHeadingLevel;
|
|
33
|
+
/** Which edge the panel slides in from */
|
|
34
|
+
placement: DrawerPlacement;
|
|
35
|
+
/**
|
|
36
|
+
* Whether a dimmed backdrop covers the rest of the page, blocks interaction with
|
|
37
|
+
* it, and closes the drawer when clicked — a real modal. Defaults to true. Set
|
|
38
|
+
* false for a non-blocking panel that floats alongside content the user can keep
|
|
39
|
+
* interacting with, e.g. an always-visible properties panel that updates as a
|
|
40
|
+
* different item is selected behind it.
|
|
41
|
+
*/
|
|
42
|
+
backdrop?: boolean;
|
|
43
|
+
/** Panel content */
|
|
44
|
+
children: ReactNode;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* A `Card` docked to one edge of the viewport as a slide-in panel, built on
|
|
49
|
+
* Radix's `Dialog` for focus trapping, Escape-to-close, and outside-click-to-close.
|
|
50
|
+
* `placement` controls which edge it docks to; `backdrop` controls whether it
|
|
51
|
+
* blocks the rest of the page or floats alongside content the user can keep
|
|
52
|
+
* interacting with. For a centered dialog that always blocks the page, use `Modal`.
|
|
53
|
+
*/
|
|
54
|
+
export const Drawer = ({
|
|
55
|
+
className,
|
|
56
|
+
onClose,
|
|
57
|
+
title,
|
|
58
|
+
icon,
|
|
59
|
+
padding,
|
|
60
|
+
headingLevel,
|
|
61
|
+
placement,
|
|
62
|
+
backdrop = true,
|
|
63
|
+
children,
|
|
64
|
+
...rest
|
|
65
|
+
}: DrawerProps) => {
|
|
66
|
+
const [rootClass, getChildClass] = getClassName({
|
|
67
|
+
className,
|
|
68
|
+
rootClass: "BHT__Drawer",
|
|
69
|
+
modifiers: { [`placement-${placement}`]: true },
|
|
70
|
+
styles,
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
const hasHeader = title !== undefined;
|
|
74
|
+
|
|
75
|
+
const cardTitle = hasHeader ? (
|
|
76
|
+
<RadixDialog.Title asChild>
|
|
77
|
+
<span>{title}</span>
|
|
78
|
+
</RadixDialog.Title>
|
|
79
|
+
) : undefined;
|
|
80
|
+
|
|
81
|
+
const cardAction = hasHeader ? (
|
|
82
|
+
<RadixDialog.Close asChild>
|
|
83
|
+
<Button variant="ghost" size="sm" iconOnly aria-label="Close">
|
|
84
|
+
<CloseIcon size="sm" />
|
|
85
|
+
</Button>
|
|
86
|
+
</RadixDialog.Close>
|
|
87
|
+
) : undefined;
|
|
88
|
+
|
|
89
|
+
return (
|
|
90
|
+
<RadixDialog.Root
|
|
91
|
+
open
|
|
92
|
+
modal={backdrop}
|
|
93
|
+
onOpenChange={(open) => !open && onClose()}
|
|
94
|
+
>
|
|
95
|
+
<RadixDialog.Portal>
|
|
96
|
+
{backdrop && (
|
|
97
|
+
<RadixDialog.Overlay className={getChildClass("backdrop")} />
|
|
98
|
+
)}
|
|
99
|
+
<RadixDialog.Content
|
|
100
|
+
{...rest}
|
|
101
|
+
className={rootClass}
|
|
102
|
+
onPointerDownOutside={(e) => {
|
|
103
|
+
if (!backdrop) e.preventDefault();
|
|
104
|
+
}}
|
|
105
|
+
>
|
|
106
|
+
<Card
|
|
107
|
+
className={getChildClass("panel")}
|
|
108
|
+
icon={hasHeader ? icon : undefined}
|
|
109
|
+
title={cardTitle}
|
|
110
|
+
headingLevel={headingLevel}
|
|
111
|
+
action={cardAction}
|
|
112
|
+
padding={padding}
|
|
113
|
+
scrollableBody
|
|
114
|
+
>
|
|
115
|
+
{!hasHeader && (
|
|
116
|
+
<RadixDialog.Title
|
|
117
|
+
className={getChildClass("visually-hidden-title")}
|
|
118
|
+
>
|
|
119
|
+
Dialog
|
|
120
|
+
</RadixDialog.Title>
|
|
121
|
+
)}
|
|
122
|
+
{children}
|
|
123
|
+
</Card>
|
|
124
|
+
</RadixDialog.Content>
|
|
125
|
+
</RadixDialog.Portal>
|
|
126
|
+
</RadixDialog.Root>
|
|
127
|
+
);
|
|
128
|
+
};
|
package/index.ts
ADDED
package/package.json
CHANGED
|
@@ -1,6 +1,65 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@behivetech/atoms.drawer",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.4.3",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"private": false,
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"types": "./dist/index.d.ts",
|
|
10
|
+
"import": "./dist/index.js",
|
|
11
|
+
"require": "./dist/index.cjs"
|
|
12
|
+
},
|
|
13
|
+
"./styles.css": "./dist/index.css"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md",
|
|
18
|
+
"index.ts",
|
|
19
|
+
"drawer.tsx",
|
|
20
|
+
"drawer.module.scss",
|
|
21
|
+
"*.example.tsx",
|
|
22
|
+
"docs.json"
|
|
23
|
+
],
|
|
24
|
+
"registry": {
|
|
25
|
+
"status": "stable",
|
|
26
|
+
"tags": []
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"@radix-ui/react-dialog": "^1.1.23",
|
|
30
|
+
"@behivetech/atoms.button": "0.4.3",
|
|
31
|
+
"@behivetech/atoms.card": "0.4.3",
|
|
32
|
+
"@behivetech/atoms.icon": "0.3.3"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"react": "^19.2.7",
|
|
36
|
+
"react-dom": "^19.2.7"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@types/react": "19.2.17",
|
|
40
|
+
"@types/react-dom": "19.2.3",
|
|
41
|
+
"eslint": "^9.39.5",
|
|
42
|
+
"tsup": "^8.5.1",
|
|
43
|
+
"typescript": "^6.0.3",
|
|
44
|
+
"vitest": "^4.1.10",
|
|
45
|
+
"@bht-component-registry/class-names": "0.0.6",
|
|
46
|
+
"@bht-component-registry/env": "0.1.0"
|
|
47
|
+
},
|
|
48
|
+
"repository": {
|
|
49
|
+
"type": "git",
|
|
50
|
+
"url": "https://github.com/behivetech/bht-galaxy.git",
|
|
51
|
+
"directory": "registry/behivetech/atoms/drawer"
|
|
52
|
+
},
|
|
53
|
+
"publishConfig": {
|
|
54
|
+
"registry": "https://registry.npmjs.org",
|
|
55
|
+
"access": "public",
|
|
56
|
+
"provenance": true
|
|
57
|
+
},
|
|
58
|
+
"scripts": {
|
|
59
|
+
"build": "tsup && bht-registry-docgen",
|
|
60
|
+
"dev": "tsup --watch",
|
|
61
|
+
"lint": "eslint . --max-warnings 0",
|
|
62
|
+
"check-types": "tsc --noEmit",
|
|
63
|
+
"test": "vitest run"
|
|
64
|
+
}
|
|
6
65
|
}
|