@seamapi/react 0.21.1 → 0.22.1
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 +9 -0
- package/index.css +44 -0
- package/index.css.map +1 -1
- package/index.min.css +1 -1
- package/index.min.css.map +1 -1
- package/lib/SeamProvider.js +11 -6
- package/lib/SeamProvider.js.map +1 -1
- package/lib/copy.d.ts +1 -0
- package/lib/copy.js +4 -0
- package/lib/copy.js.map +1 -0
- package/lib/icons/Copy.d.ts +2 -0
- package/lib/icons/Copy.js +5 -0
- package/lib/icons/Copy.js.map +1 -0
- package/lib/ui/AccessCodeDetails/AccessCodeDetails.d.ts +2 -3
- package/lib/ui/AccessCodeDetails/AccessCodeDetails.js +7 -2
- package/lib/ui/AccessCodeDetails/AccessCodeDetails.js.map +1 -1
- package/lib/ui/AccessCodeTable/AccessCodeTable.js +13 -2
- package/lib/ui/AccessCodeTable/AccessCodeTable.js.map +1 -1
- package/lib/ui/Menu/Menu.d.ts +19 -0
- package/lib/ui/Menu/Menu.js +93 -0
- package/lib/ui/Menu/Menu.js.map +1 -0
- package/lib/ui/Menu/MenuItem.d.ts +6 -0
- package/lib/ui/Menu/MenuItem.js +10 -0
- package/lib/ui/Menu/MenuItem.js.map +1 -0
- package/lib/ui/Menu/MoreActionsMenu.d.ts +6 -0
- package/lib/ui/Menu/MoreActionsMenu.js +11 -0
- package/lib/ui/Menu/MoreActionsMenu.js.map +1 -0
- package/lib/ui/device/OnlineStatus.js +0 -1
- package/lib/ui/device/OnlineStatus.js.map +1 -1
- package/package.json +4 -2
- package/src/lib/SeamProvider.tsx +13 -8
- package/src/lib/copy.ts +3 -0
- package/src/lib/icons/Copy.tsx +30 -0
- package/src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx +12 -4
- package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx +28 -2
- package/src/lib/ui/Menu/Menu.tsx +179 -0
- package/src/lib/ui/Menu/MenuItem.tsx +24 -0
- package/src/lib/ui/Menu/MoreActionsMenu.tsx +27 -0
- package/src/lib/ui/device/OnlineStatus.tsx +0 -2
- package/src/styles/_access-code-table.scss +9 -0
- package/src/styles/_main.scss +2 -0
- package/src/styles/_menus.scss +46 -0
package/README.md
CHANGED
|
@@ -170,6 +170,13 @@ $ npm run docs:start
|
|
|
170
170
|
|
|
171
171
|
[Storybook]: https://storybook.js.org/
|
|
172
172
|
|
|
173
|
+
### Fake Seam Connect
|
|
174
|
+
|
|
175
|
+
This project uses a [fake version of Seam Connect](https://github.com/seamapi/fake-seam-connect)
|
|
176
|
+
to have deterministic responses for rendering views. You can edit the seed data
|
|
177
|
+
for the fake, or find ids that could be useful for testing components in
|
|
178
|
+
[seed-fake.js](.storybook/seed-fake.js).
|
|
179
|
+
|
|
173
180
|
### Previews
|
|
174
181
|
|
|
175
182
|
Every pull request deploys the Storybook with the examples
|
|
@@ -251,6 +258,7 @@ The following repository secrets must be set on [GitHub Actions]:
|
|
|
251
258
|
|
|
252
259
|
The following repository variables must be set on [GitHub Actions]:
|
|
253
260
|
|
|
261
|
+
- `STORYBOOK_SEAM_ENDPOINT`: The Seam endpoint to use with Storybook.
|
|
254
262
|
- `STORYBOOK_SEAM_PUBLISHABLE_KEY`: The Seam publishable key to use with Storybook.
|
|
255
263
|
- `STORYBOOK_SEAM_USER_IDENTIFIER_KEY`: The Seam user identifer key to use with Storybook.
|
|
256
264
|
|
|
@@ -265,6 +273,7 @@ The following environment variables must be set on [Vercel]:
|
|
|
265
273
|
|
|
266
274
|
- `SEAM_PUBLISHABLE_KEY`: The Seam publishable key to use with the examples.
|
|
267
275
|
- `SEAM_USER_IDENTIFIER_KEY`: The Seam user identifer key to use with the examples..
|
|
276
|
+
- `STORYBOOK_SEAM_ENDPOINT`: The Seam endpoint to use with Storybook.
|
|
268
277
|
- `STORYBOOK_SEAM_PUBLISHABLE_KEY`: The Seam publishable key to use with Storybook.
|
|
269
278
|
- `STORYBOOK_SEAM_USER_IDENTIFIER_KEY`: The Seam user identifer key to use with Storybook.
|
|
270
279
|
|
package/index.css
CHANGED
|
@@ -273,6 +273,44 @@
|
|
|
273
273
|
.seam-components .seam-lock-icon * {
|
|
274
274
|
fill: #6e7179;
|
|
275
275
|
}
|
|
276
|
+
.seam-components .seam-menu-bg {
|
|
277
|
+
width: 100vw;
|
|
278
|
+
height: 100vh;
|
|
279
|
+
justify-content: center;
|
|
280
|
+
align-items: center;
|
|
281
|
+
position: fixed;
|
|
282
|
+
inset: 0;
|
|
283
|
+
z-index: 999999;
|
|
284
|
+
display: none;
|
|
285
|
+
}
|
|
286
|
+
.seam-components .seam-menu-content {
|
|
287
|
+
width: 250px;
|
|
288
|
+
position: absolute;
|
|
289
|
+
padding: 8px 0;
|
|
290
|
+
background: #fff;
|
|
291
|
+
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 16px 2px rgba(15, 22, 28, 0.15);
|
|
292
|
+
border-radius: 8px;
|
|
293
|
+
}
|
|
294
|
+
.seam-components .seam-menu-content .seam-menu-item {
|
|
295
|
+
padding: 0 16px;
|
|
296
|
+
height: 36px;
|
|
297
|
+
display: flex;
|
|
298
|
+
align-items: center;
|
|
299
|
+
font-size: 16px;
|
|
300
|
+
line-height: 134%;
|
|
301
|
+
cursor: pointer;
|
|
302
|
+
}
|
|
303
|
+
.seam-components .seam-menu-content .seam-menu-item:hover {
|
|
304
|
+
background: #f4f6f8;
|
|
305
|
+
}
|
|
306
|
+
.seam-components .seam-menu-shadow {
|
|
307
|
+
z-index: -1;
|
|
308
|
+
opacity: 0;
|
|
309
|
+
visibility: hidden;
|
|
310
|
+
top: 0;
|
|
311
|
+
right: 0;
|
|
312
|
+
position: fixed;
|
|
313
|
+
}
|
|
276
314
|
.seam-components .seam-device-details .seam-body {
|
|
277
315
|
display: flex;
|
|
278
316
|
flex-direction: column;
|
|
@@ -483,6 +521,12 @@
|
|
|
483
521
|
align-items: center;
|
|
484
522
|
justify-content: center;
|
|
485
523
|
}
|
|
524
|
+
.seam-components .seam-access-code-table-action-menu .menu-item-copy {
|
|
525
|
+
display: flex;
|
|
526
|
+
align-items: center;
|
|
527
|
+
justify-content: space-between;
|
|
528
|
+
flex: 1;
|
|
529
|
+
}
|
|
486
530
|
.seam-components .seam-access-code-details > .seam-summary {
|
|
487
531
|
background: #f1f3f4;
|
|
488
532
|
border-radius: 16px;
|
package/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["src/styles/_reset.scss","src/styles/_main.scss","src/styles/_typography.scss","src/styles/_colors.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_icons.scss","src/styles/_device-details.scss","src/styles/_device-table.scss","src/styles/_access-code-table.scss","src/styles/_access-code-details.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["src/styles/_reset.scss","src/styles/_main.scss","src/styles/_typography.scss","src/styles/_colors.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_icons.scss","src/styles/_menus.scss","src/styles/_device-details.scss","src/styles/_device-table.scss","src/styles/_access-code-table.scss","src/styles/_access-code-details.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACcA;ECXE;;AFGA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAmDE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AEtGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAKF;EACE,OCTU;;ADcZ;EACE,OCPS;;ADYX;EACE,OCvBW;;ACPb;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAMJ;EACE;EACA;EACA;;AC1CF;EACE;EACA;EACA;EACA;;AC2GF;EJ/GA;EIoHE;EACA;;AAjFF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE,YH7DM;EG8DN;EACA;;AAEA;EACE,YH5DS;EG6DT,cH7DS;;AGgEX;EAEE,YHjEQ;EGkER,cHlEQ;;AGsEZ;EACE,OH9EM;EG+EN;EACA;;AAEA;EACE,YH9EM;;AGiFR;EAEE;EACA,OHxFO;;AG4FX;EACE,OHrFU;EGsFV;;AAEA;EACE,YHjFC;EGkFD,cHxFU;;AG2FZ;EAEE,OH7FU;EG8FV,cH7FQ;EG8FR;;AAcF;EAEE;;AAxHJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAMJ;EACE,OHlBM;EGmBN;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AC9BJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,OJXQ;;AKPV;EACE,MLMQ;;AMRZ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,YNHQ;;AMQd;EACE;EACA;EACA;EACA;EACA;EACA;;ACvCA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE,YPIE;;AOAN;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA,OPnCE;;AOsCJ;EACE;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA,YP1CD;;AO4CC;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKF;EACE,OPtEA;EOuEA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE,OP7FF;;AOgGA;EACE,OPlGF;;AOqGA;EACE;EACA;;AAGF;EACE;EACA;;AAOV;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;;AClJJ;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA,ORvBE;EQwBF;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,ORjCE;EQkCF;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AClDZ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,OTrBI;;ASuBJ;EACE;EACA,OTtBE;;AS2BR;EACE;EACA;EACA;EACA;;AAMJ;EACE;EACA;EACA;EACA;;ACnDF;EACE,YVcC;EUbD;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA,OVLI;EUMJ;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE,OV5BI;EU6BJ;EACA;;AAEA;EACE;EACA,OVnCG;;AUwCT;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE,OV3FA;;AU+FA;EACE;;AAGF;EACE","file":"index.css"}
|
package/index.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.seam-components{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}.seam-components *,.seam-components *::before,.seam-components *::after{box-sizing:border-box}.seam-components html,.seam-components body,.seam-components div,.seam-components span,.seam-components object,.seam-components iframe,.seam-components figure,.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6,.seam-components p,.seam-components blockquote,.seam-components pre,.seam-components a,.seam-components code,.seam-components em,.seam-components img,.seam-components small,.seam-components strike,.seam-components strong,.seam-components sub,.seam-components sup,.seam-components tt,.seam-components b,.seam-components u,.seam-components i,.seam-components ol,.seam-components ul,.seam-components li,.seam-components fieldset,.seam-components form,.seam-components label,.seam-components table,.seam-components caption,.seam-components tbody,.seam-components tfoot,.seam-components thead,.seam-components tr,.seam-components th,.seam-components td,.seam-components main,.seam-components canvas,.seam-components embed,.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components video{margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;text-size-adjust:none}.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components main{display:block}.seam-components body{line-height:1}.seam-components ol,.seam-components ul{list-style:none}.seam-components blockquote,.seam-components q{quotes:none}.seam-components blockquote::before,.seam-components blockquote::after,.seam-components q::before,.seam-components q::after{content:"";content:none}.seam-components table{border-collapse:collapse;border-spacing:0}.seam-components input{appearance:none;border-radius:0}.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6{font-weight:600}.seam-components .seam-caption{color:#9da1a9}.seam-components .seam-text-danger{color:#e36857}.seam-components html{color:#232b3a}.seam-components .seam-table-header{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 16px}.seam-components .seam-table-title{font-size:21px;line-height:132%}.seam-components .seam-table-title .seam-caption{font-size:16px;line-height:134%}.seam-components .seam-table-row{display:flex;padding:4px;height:72px;border-bottom:1px solid #eee}.seam-components .seam-table-row:hover{background:#f4f6f8}.seam-components .seam-table-row .seam-title{font-weight:600;font-size:18px;line-height:132%}.seam-components .seam-table-cell{display:flex;align-items:center;padding:4px}.seam-components .seam-text-field{padding:0 8px;height:40px;border:1px solid #d5d8dc;border-radius:8px}.seam-components .seam-btn{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;font-weight:600;cursor:pointer}.seam-components .seam-btn.seam-btn-small{font-size:14px;line-height:22px;border-radius:6px;padding:4px 10px}.seam-components .seam-btn.seam-btn-medium{font-size:16px;line-height:26px;border-radius:7px;padding:6px 16px}.seam-components .seam-btn.seam-btn-large{font-size:19px;line-height:30px;border-radius:8px;padding:8px 22px}.seam-components .seam-btn.seam-btn-solid{background:#007afc;color:#fff;border:1px solid #007afc}.seam-components .seam-btn.seam-btn-solid:hover{background:#006ee3;border-color:#006ee3}.seam-components .seam-btn.seam-btn-solid.seam-btn-disabled,.seam-components .seam-btn.seam-btn-solid:disabled{background:#c1dfff;border-color:#c1dfff}.seam-components .seam-btn.seam-btn-outline{color:#007afc;border:1px solid #7ebcff;background:rgba(0,0,0,0)}.seam-components .seam-btn.seam-btn-outline:hover{background:#f2f8ff}.seam-components .seam-btn.seam-btn-outline.seam-btn-disabled,.seam-components .seam-btn.seam-btn-outline:disabled{background:rgba(0,0,0,0);color:#7ebcff}.seam-components .seam-btn.seam-btn-neutral{color:#6e7179;border:1px solid #b9bec5}.seam-components .seam-btn.seam-btn-neutral:hover{background:#f1f3f4;border-color:#b9bec5}.seam-components .seam-btn.seam-btn-neutral.seam-btn-disabled,.seam-components .seam-btn.seam-btn-neutral:disabled{color:#b9bec5;border-color:#d5d8dc;background:#fff}.seam-components .seam-btn.seam-btn-disabled,.seam-components .seam-btn:disabled{cursor:not-allowed}.seam-components .seam-icon-btn{border-radius:6px;border:1px solid rgba(0,122,252,.5);cursor:pointer;background:#fff;padding:6px;line-height:0}.seam-components .seam-icon-btn:hover{background:rgba(0,122,252,.08)}.seam-components .seam-text-btn{color:#007afc;padding:0;cursor:pointer;background:rgba(0,0,0,0);border:0}.seam-components .seam-text-btn:hover{text-decoration:underline}.seam-components .seam-text-btn.seam-btn-disabled,.seam-components .seam-text-btn:disabled{cursor:not-allowed;text-decoration:none}.seam-components .seam-content-header{height:56px;display:flex;align-items:center;position:relative;justify-content:center;margin:0 16px}.seam-components .seam-content-header .seam-back-icon{position:absolute;top:50%;transform:translate(4px, -25%);left:0;cursor:pointer}.seam-components .seam-content-header .seam-title{font-size:16px;line-height:134%;color:#6e7179}.seam-components .seam-lock-icon *{fill:#6e7179}.seam-components .seam-device-details .seam-body{display:flex;flex-direction:column;gap:16px;margin:0 24px 24px}.seam-components .seam-device-details .seam-body .seam-box{border:1px solid #d5d8dc;border-radius:8px}.seam-components .seam-device-details .seam-body .seam-box .seam-content{padding:12px 12px 12px 16px}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes{padding:12px 8px 12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes:hover{background:#f4f6f8}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-code-length{border-top:1px solid #d5d8dc}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-lock-status{display:flex;justify-content:space-between}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-lock-status>.seam-right{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-label{font-size:14px;line-height:134%;color:#6e7179}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-value{display:block;font-weight:600;font-size:16px;line-height:134%}.seam-components .seam-device-details .seam-body .seam-summary{padding:24px 16px;border-radius:16px;background:#f1f3f4}.seam-components .seam-device-details .seam-body .seam-summary .seam-content{display:flex;align-items:center;gap:20px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image{width:100px;height:100px;display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image img{max-width:100%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info>.seam-label{color:#6e7179;font-weight:600;font-size:14px;line-height:134%;margin-bottom:4px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-device-name{margin-bottom:16px;font-weight:600;font-size:21px;line-height:132%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties{display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:1fr;font-size:14px;line-height:134%;row-gap:4px;column-gap:28px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-label{color:#9da1a9}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-status-text{color:#6e7179}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties svg{scale:.75;margin-right:8px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties>*{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-icon-cell{flex:0;margin-left:8px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-name-cell{flex:1}.seam-components .seam-device-details .seam-body .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-table .seam-table-row{cursor:pointer}.seam-components .seam-device-table .seam-table-row .seam-image-cell{width:64px;height:64px;padding:4px}.seam-components .seam-device-table .seam-table-row .seam-image-cell img{width:100%}.seam-components .seam-device-table .seam-table-row .seam-body-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom{display:flex;justify-content:space-between;align-items:center;width:100%}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-model{font-weight:400;font-size:14px;line-height:134%;color:#6e7179;flex:0 1 190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses{display:flex;align-items:center;color:#6e7179;font-size:14px;line-height:134%}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses>div{display:flex;align-items:center;margin-right:16px}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses>div svg{scale:.75}.seam-components .seam-access-code-table .seam-table-row{cursor:pointer}.seam-components .seam-access-code-table .seam-table-row .seam-icon-cell{flex:0;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-table-row .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell .seam-code-details{font-size:14px;line-height:134%;color:#6e7179}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell .seam-code-details .seam-dot-divider{margin:0 4px;color:#d5d8dc}.seam-components .seam-access-code-table .seam-table-row .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-details>.seam-summary{background:#f1f3f4;border-radius:16px;margin:0 24px 16px}.seam-components .seam-access-code-details>.seam-summary>.seam-top{padding:24px 16px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-label{font-weight:600;font-size:14px;line-height:134%;color:#6e7179;margin-bottom:4px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-access-code-name{font-weight:600;font-size:21px;line-height:132%;margin-bottom:8px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-code{background:#fff;border:1px solid #9da1a9;border-radius:8px;padding:10px 16px;font-weight:600;font-size:24px;line-height:134%;margin-bottom:8px}.seam-components .seam-access-code-details>.seam-summary>.seam-top .seam-duration{color:#6e7179;font-size:14px;line-height:134%}.seam-components .seam-access-code-details>.seam-summary>.seam-top .seam-duration .seam-label{font-weight:600;color:#232b3a}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device{border-top:1px solid #dde0e2;padding:8px 16px 8px 8px;display:flex;align-items:center}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-device-image{width:72px;height:72px;margin-right:16px}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-device-image img{width:100%;max-height:100%}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-body{flex:1;font-weight:400;font-size:14px;line-height:134%;margin-right:8px}.seam-components .seam-access-code-details .seam-details{font-size:16px;line-height:134%;border-bottom:1px solid rgba(0,0,0,.12);padding:0 24px}.seam-components .seam-access-code-details .seam-details .seam-row{padding:16px;display:flex;border-top:1px solid rgba(0,0,0,.12)}.seam-components .seam-access-code-details .seam-details .seam-row .seam-heading{width:112px}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content{display:flex;flex:1}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times{display:flex;flex:1;font-size:16px;line-height:134%}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times .seam-label{color:#9da1a9}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times>div div{margin-bottom:4px}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times>div:first-child{flex:0 1 160px}/*# sourceMappingURL=index.min.css.map */
|
|
1
|
+
.seam-components{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}.seam-components *,.seam-components *::before,.seam-components *::after{box-sizing:border-box}.seam-components html,.seam-components body,.seam-components div,.seam-components span,.seam-components object,.seam-components iframe,.seam-components figure,.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6,.seam-components p,.seam-components blockquote,.seam-components pre,.seam-components a,.seam-components code,.seam-components em,.seam-components img,.seam-components small,.seam-components strike,.seam-components strong,.seam-components sub,.seam-components sup,.seam-components tt,.seam-components b,.seam-components u,.seam-components i,.seam-components ol,.seam-components ul,.seam-components li,.seam-components fieldset,.seam-components form,.seam-components label,.seam-components table,.seam-components caption,.seam-components tbody,.seam-components tfoot,.seam-components thead,.seam-components tr,.seam-components th,.seam-components td,.seam-components main,.seam-components canvas,.seam-components embed,.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components video{margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;text-size-adjust:none}.seam-components footer,.seam-components header,.seam-components nav,.seam-components section,.seam-components main{display:block}.seam-components body{line-height:1}.seam-components ol,.seam-components ul{list-style:none}.seam-components blockquote,.seam-components q{quotes:none}.seam-components blockquote::before,.seam-components blockquote::after,.seam-components q::before,.seam-components q::after{content:"";content:none}.seam-components table{border-collapse:collapse;border-spacing:0}.seam-components input{appearance:none;border-radius:0}.seam-components h1,.seam-components h2,.seam-components h3,.seam-components h4,.seam-components h5,.seam-components h6{font-weight:600}.seam-components .seam-caption{color:#9da1a9}.seam-components .seam-text-danger{color:#e36857}.seam-components html{color:#232b3a}.seam-components .seam-table-header{display:flex;justify-content:space-between;align-items:center;height:56px;padding:0 16px}.seam-components .seam-table-title{font-size:21px;line-height:132%}.seam-components .seam-table-title .seam-caption{font-size:16px;line-height:134%}.seam-components .seam-table-row{display:flex;padding:4px;height:72px;border-bottom:1px solid #eee}.seam-components .seam-table-row:hover{background:#f4f6f8}.seam-components .seam-table-row .seam-title{font-weight:600;font-size:18px;line-height:132%}.seam-components .seam-table-cell{display:flex;align-items:center;padding:4px}.seam-components .seam-text-field{padding:0 8px;height:40px;border:1px solid #d5d8dc;border-radius:8px}.seam-components .seam-btn{font-family:"Source Sans Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;font-weight:600;cursor:pointer}.seam-components .seam-btn.seam-btn-small{font-size:14px;line-height:22px;border-radius:6px;padding:4px 10px}.seam-components .seam-btn.seam-btn-medium{font-size:16px;line-height:26px;border-radius:7px;padding:6px 16px}.seam-components .seam-btn.seam-btn-large{font-size:19px;line-height:30px;border-radius:8px;padding:8px 22px}.seam-components .seam-btn.seam-btn-solid{background:#007afc;color:#fff;border:1px solid #007afc}.seam-components .seam-btn.seam-btn-solid:hover{background:#006ee3;border-color:#006ee3}.seam-components .seam-btn.seam-btn-solid.seam-btn-disabled,.seam-components .seam-btn.seam-btn-solid:disabled{background:#c1dfff;border-color:#c1dfff}.seam-components .seam-btn.seam-btn-outline{color:#007afc;border:1px solid #7ebcff;background:rgba(0,0,0,0)}.seam-components .seam-btn.seam-btn-outline:hover{background:#f2f8ff}.seam-components .seam-btn.seam-btn-outline.seam-btn-disabled,.seam-components .seam-btn.seam-btn-outline:disabled{background:rgba(0,0,0,0);color:#7ebcff}.seam-components .seam-btn.seam-btn-neutral{color:#6e7179;border:1px solid #b9bec5}.seam-components .seam-btn.seam-btn-neutral:hover{background:#f1f3f4;border-color:#b9bec5}.seam-components .seam-btn.seam-btn-neutral.seam-btn-disabled,.seam-components .seam-btn.seam-btn-neutral:disabled{color:#b9bec5;border-color:#d5d8dc;background:#fff}.seam-components .seam-btn.seam-btn-disabled,.seam-components .seam-btn:disabled{cursor:not-allowed}.seam-components .seam-icon-btn{border-radius:6px;border:1px solid rgba(0,122,252,.5);cursor:pointer;background:#fff;padding:6px;line-height:0}.seam-components .seam-icon-btn:hover{background:rgba(0,122,252,.08)}.seam-components .seam-text-btn{color:#007afc;padding:0;cursor:pointer;background:rgba(0,0,0,0);border:0}.seam-components .seam-text-btn:hover{text-decoration:underline}.seam-components .seam-text-btn.seam-btn-disabled,.seam-components .seam-text-btn:disabled{cursor:not-allowed;text-decoration:none}.seam-components .seam-content-header{height:56px;display:flex;align-items:center;position:relative;justify-content:center;margin:0 16px}.seam-components .seam-content-header .seam-back-icon{position:absolute;top:50%;transform:translate(4px, -25%);left:0;cursor:pointer}.seam-components .seam-content-header .seam-title{font-size:16px;line-height:134%;color:#6e7179}.seam-components .seam-lock-icon *{fill:#6e7179}.seam-components .seam-menu-bg{width:100vw;height:100vh;justify-content:center;align-items:center;position:fixed;inset:0;z-index:999999;display:none}.seam-components .seam-menu-content{width:250px;position:absolute;padding:8px 0;background:#fff;box-shadow:0 0 1px rgba(0,0,0,.3),0 2px 16px 2px rgba(15,22,28,.15);border-radius:8px}.seam-components .seam-menu-content .seam-menu-item{padding:0 16px;height:36px;display:flex;align-items:center;font-size:16px;line-height:134%;cursor:pointer}.seam-components .seam-menu-content .seam-menu-item:hover{background:#f4f6f8}.seam-components .seam-menu-shadow{z-index:-1;opacity:0;visibility:hidden;top:0;right:0;position:fixed}.seam-components .seam-device-details .seam-body{display:flex;flex-direction:column;gap:16px;margin:0 24px 24px}.seam-components .seam-device-details .seam-body .seam-box{border:1px solid #d5d8dc;border-radius:8px}.seam-components .seam-device-details .seam-body .seam-box .seam-content{padding:12px 12px 12px 16px}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes{padding:12px 8px 12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-codes:hover{background:#f4f6f8}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-access-code-length{border-top:1px solid #d5d8dc}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-lock-status{display:flex;justify-content:space-between}.seam-components .seam-device-details .seam-body .seam-box .seam-content.seam-lock-status>.seam-right{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-label{font-size:14px;line-height:134%;color:#6e7179}.seam-components .seam-device-details .seam-body .seam-box .seam-content .seam-value{display:block;font-weight:600;font-size:16px;line-height:134%}.seam-components .seam-device-details .seam-body .seam-summary{padding:24px 16px;border-radius:16px;background:#f1f3f4}.seam-components .seam-device-details .seam-body .seam-summary .seam-content{display:flex;align-items:center;gap:20px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image{width:100px;height:100px;display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-image img{max-width:100%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info>.seam-label{color:#6e7179;font-weight:600;font-size:14px;line-height:134%;margin-bottom:4px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-device-name{margin-bottom:16px;font-weight:600;font-size:21px;line-height:132%}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties{display:grid;grid-template-columns:min-content 1fr;grid-auto-rows:1fr;font-size:14px;line-height:134%;row-gap:4px;column-gap:28px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-label{color:#9da1a9}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties .seam-status-text{color:#6e7179}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties svg{scale:.75;margin-right:8px}.seam-components .seam-device-details .seam-body .seam-summary .seam-content .seam-info .seam-properties>*{display:flex;align-items:center}.seam-components .seam-device-details .seam-body .seam-icon-cell{flex:0;margin-left:8px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-details .seam-body .seam-name-cell{flex:1}.seam-components .seam-device-details .seam-body .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-device-table .seam-table-row{cursor:pointer}.seam-components .seam-device-table .seam-table-row .seam-image-cell{width:64px;height:64px;padding:4px}.seam-components .seam-device-table .seam-table-row .seam-image-cell img{width:100%}.seam-components .seam-device-table .seam-table-row .seam-body-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom{display:flex;justify-content:space-between;align-items:center;width:100%}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-model{font-weight:400;font-size:14px;line-height:134%;color:#6e7179;flex:0 1 190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses{display:flex;align-items:center;color:#6e7179;font-size:14px;line-height:134%}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses>div{display:flex;align-items:center;margin-right:16px}.seam-components .seam-device-table .seam-table-row .seam-body-cell .seam-bottom .seam-device-statuses>div svg{scale:.75}.seam-components .seam-access-code-table .seam-table-row{cursor:pointer}.seam-components .seam-access-code-table .seam-table-row .seam-icon-cell{flex:0;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-table-row .seam-icon-cell>div{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell{flex:1;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell .seam-code-details{font-size:14px;line-height:134%;color:#6e7179}.seam-components .seam-access-code-table .seam-table-row .seam-name-cell .seam-code-details .seam-dot-divider{margin:0 4px;color:#d5d8dc}.seam-components .seam-access-code-table .seam-table-row .seam-action-cell{margin-right:12px;display:flex;align-items:center;justify-content:center}.seam-components .seam-access-code-table-action-menu .menu-item-copy{display:flex;align-items:center;justify-content:space-between;flex:1}.seam-components .seam-access-code-details>.seam-summary{background:#f1f3f4;border-radius:16px;margin:0 24px 16px}.seam-components .seam-access-code-details>.seam-summary>.seam-top{padding:24px 16px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-label{font-weight:600;font-size:14px;line-height:134%;color:#6e7179;margin-bottom:4px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-access-code-name{font-weight:600;font-size:21px;line-height:132%;margin-bottom:8px}.seam-components .seam-access-code-details>.seam-summary>.seam-top>.seam-code{background:#fff;border:1px solid #9da1a9;border-radius:8px;padding:10px 16px;font-weight:600;font-size:24px;line-height:134%;margin-bottom:8px}.seam-components .seam-access-code-details>.seam-summary>.seam-top .seam-duration{color:#6e7179;font-size:14px;line-height:134%}.seam-components .seam-access-code-details>.seam-summary>.seam-top .seam-duration .seam-label{font-weight:600;color:#232b3a}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device{border-top:1px solid #dde0e2;padding:8px 16px 8px 8px;display:flex;align-items:center}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-device-image{width:72px;height:72px;margin-right:16px}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-device-image img{width:100%;max-height:100%}.seam-components .seam-access-code-details>.seam-summary .seam-access-code-device .seam-body{flex:1;font-weight:400;font-size:14px;line-height:134%;margin-right:8px}.seam-components .seam-access-code-details .seam-details{font-size:16px;line-height:134%;border-bottom:1px solid rgba(0,0,0,.12);padding:0 24px}.seam-components .seam-access-code-details .seam-details .seam-row{padding:16px;display:flex;border-top:1px solid rgba(0,0,0,.12)}.seam-components .seam-access-code-details .seam-details .seam-row .seam-heading{width:112px}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content{display:flex;flex:1}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times{display:flex;flex:1;font-size:16px;line-height:134%}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times .seam-label{color:#9da1a9}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times>div div{margin-bottom:4px}.seam-components .seam-access-code-details .seam-details .seam-row .seam-content .seam-times>div:first-child{flex:0 1 160px}/*# sourceMappingURL=index.min.css.map */
|
package/index.min.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["src/styles/_main.scss","src/styles/_typography.scss","src/styles/_reset.scss","src/styles/_colors.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_icons.scss","src/styles/_device-details.scss","src/styles/_device-table.scss","src/styles/_access-code-table.scss","src/styles/_access-code-details.scss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["src/styles/_main.scss","src/styles/_typography.scss","src/styles/_reset.scss","src/styles/_colors.scss","src/styles/_tables.scss","src/styles/_inputs.scss","src/styles/_buttons.scss","src/styles/_layout.scss","src/styles/_icons.scss","src/styles/_menus.scss","src/styles/_device-details.scss","src/styles/_device-table.scss","src/styles/_access-code-table.scss","src/styles/_access-code-details.scss"],"names":[],"mappings":"AAcA,iBCXE,2JCGA,wEAGE,sBAGF,ylCAmDE,SACA,UACA,SACA,eACA,oBACA,wBACA,kCACA,mCACA,sBAGF,oHAKE,cAGF,sBACE,cAGF,wCAEE,gBAGF,+CAEE,YAGF,4HAIE,WACA,aAGF,uBACE,yBACA,iBAGF,uBACE,gBACA,gBDtGF,wHAME,gBAKF,+BACE,METU,QFcZ,mCACE,MEPS,QFYX,sBACE,MEvBW,QCPb,oCACE,aACA,8BACA,mBACA,YACA,eAGF,mCACE,eACA,iBAEA,iDACE,eACA,iBAMJ,iCACE,aACA,YACA,YACA,6BAEA,uCACE,mBAGF,6CACE,gBACA,eACA,iBAMJ,kCACE,aACA,mBACA,YC1CF,kCACE,cACA,YACA,yBACA,kBC2GF,2BL/GA,2JKoHE,gBACA,eAjFF,0CACE,eACA,iBACA,kBACA,iBAGF,2CACE,eACA,iBACA,kBACA,iBAGF,0CACE,eACA,iBACA,kBACA,iBAKF,0CACE,WH7DM,QG8DN,WACA,yBAEA,gDACE,WH5DS,QG6DT,aH7DS,QGgEX,+GAEE,WHjEQ,QGkER,aHlEQ,QGsEZ,4CACE,MH9EM,QG+EN,yBACA,yBAEA,kDACE,WH9EM,QGiFR,mHAEE,yBACA,MHxFO,QG4FX,4CACE,MHrFU,QGsFV,yBAEA,kDACE,WHjFC,QGkFD,aHxFU,QG2FZ,mHAEE,MH7FU,QG8FV,aH7FQ,QG8FR,gBAcF,iFAEE,mBAxHJ,gCACE,kBACA,oCACA,eACA,gBACA,YACA,cAEA,sCACE,+BAMJ,gCACE,MHlBM,QGmBN,UACA,eACA,yBACA,SAEA,sCACE,0BAGF,2FAEE,mBACA,qBC9BJ,sCACE,YACA,aACA,mBACA,kBACA,uBACA,cAEA,sDACE,kBACA,QACA,+BACA,OACA,eAGF,kDACE,eACA,iBACA,MJXQ,QKPV,mCACE,KLMQ,QMRZ,+BACE,YACA,aACA,uBACA,mBACA,eACA,QACA,eACA,aAGF,oCACE,YACA,kBACA,cACA,gBACA,oEACA,kBAEA,oDACE,eACA,YACA,aACA,mBACA,eACA,iBACA,eAEA,0DACE,WNHQ,QMQd,mCACE,WACA,UACA,kBACA,MACA,QACA,eCvCA,iDACE,aACA,sBACA,SACA,mBAEA,2DACE,yBACA,kBAEA,yEACE,4BAEA,2FACE,2BACA,aACA,mBACA,8BACA,eAEA,iGACE,WPIE,yGOCJ,6BAGF,0FACE,aACA,8BAEA,sGACE,aACA,mBAIJ,qFACE,eACA,iBACA,MPnCE,QOsCJ,qFACE,cACA,gBACA,eACA,iBAKN,+DACE,kBACA,mBACA,WP1CD,QO4CC,6EACE,aACA,mBACA,SAEA,yFACE,YACA,aACA,aACA,mBAEA,6FACE,eAKF,oGACE,MPtEA,QOuEA,gBACA,eACA,iBACA,kBAGF,0GACE,mBACA,gBACA,eACA,iBAGF,yGACE,aACA,sCACA,mBACA,eACA,iBACA,YACA,gBAEA,qHACE,MP7FF,QOgGA,2HACE,MPlGF,QOqGA,6GACE,UACA,iBAGF,2GACE,aACA,mBAOV,iEACE,OACA,gBACA,aACA,mBACA,uBAEA,qEACE,WACA,YACA,aACA,mBACA,uBAIJ,iEACE,OAGF,mEACE,kBACA,aACA,mBACA,uBClJJ,oDACE,eAEA,qEACE,WACA,YACA,YAEA,yEACE,WAIJ,oEACE,OACA,sBACA,uBACA,uBACA,QAEA,iFACE,aACA,8BACA,mBACA,WAEA,oGACE,gBACA,eACA,iBACA,MRvBE,QQwBF,eACA,mBACA,gBACA,uBAGF,uGACE,aACA,mBACA,MRjCE,QQkCF,eACA,iBAEA,2GACE,aACA,mBACA,kBAEA,+GACE,UClDZ,yDACE,eAEA,yEACE,OACA,aACA,mBACA,uBAEA,6EACE,WACA,YACA,aACA,mBACA,uBAIJ,yEACE,OACA,sBACA,uBACA,uBACA,QAEA,4FACE,eACA,iBACA,MTrBI,QSuBJ,8GACE,aACA,MTtBE,QS2BR,2EACE,kBACA,aACA,mBACA,uBAMJ,qEACE,aACA,mBACA,8BACA,OCnDF,yDACE,WVcC,QUbD,mBACA,mBAEA,mEACE,kBAEA,+EACE,gBACA,eACA,iBACA,MVLI,QUMJ,kBAGF,0FACE,gBACA,eACA,iBACA,kBAGF,8EACE,gBACA,yBACA,kBACA,kBACA,gBACA,eACA,iBACA,kBAGF,kFACE,MV5BI,QU6BJ,eACA,iBAEA,8FACE,gBACA,MVnCG,QUwCT,kFACE,6BACA,yBACA,aACA,mBAEA,qGACE,WACA,YACA,kBAEA,yGACE,WACA,gBAIJ,6FACE,OACA,gBACA,eACA,iBACA,iBAKN,yDACE,eACA,iBACA,wCACA,eAEA,mEACE,aACA,aACA,qCAEA,iFACE,YAGF,iFACE,aACA,OAEA,6FACE,aACA,OACA,eACA,iBAEA,yGACE,MV3FA,QU+FA,qGACE,kBAGF,6GACE","file":"index.min.css"}
|
package/lib/SeamProvider.js
CHANGED
|
@@ -7,12 +7,14 @@ export function SeamProvider({ children, ...props }) {
|
|
|
7
7
|
const queryClientRef = useRef(new QueryClient());
|
|
8
8
|
const contextRef = useRef(createSeamContextValue(props));
|
|
9
9
|
if (contextRef.current.client == null &&
|
|
10
|
-
contextRef.current.publishableKey == null
|
|
10
|
+
contextRef.current.publishableKey == null &&
|
|
11
|
+
contextRef.current.clientSessionToken == null) {
|
|
11
12
|
contextRef.current = defaultSeamContextValue;
|
|
12
13
|
}
|
|
13
14
|
if (contextRef.current.client == null &&
|
|
14
|
-
contextRef.current.publishableKey == null
|
|
15
|
-
|
|
15
|
+
contextRef.current.publishableKey == null &&
|
|
16
|
+
contextRef.current.clientSessionToken == null) {
|
|
17
|
+
throw new Error(`Must provide either a Seam client, clientSessionToken or a publishableKey.`);
|
|
16
18
|
}
|
|
17
19
|
return (_jsx("div", { className: 'seam-components', children: _jsx(QueryClientProvider, { client: queryClientRef.current, children: _jsx(Provider, { value: { ...contextRef.current }, children: children }) }) }));
|
|
18
20
|
}
|
|
@@ -95,9 +97,12 @@ const isSeamProviderPropsWithClientSessionToken = (props) => {
|
|
|
95
97
|
if ('client' in props && props.client != null) {
|
|
96
98
|
throw new Error('Cannot provide a Seam client along with other options.');
|
|
97
99
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
100
|
+
// No reason to ban this behavior, but it's unnecessary.
|
|
101
|
+
// if ('publishableKey' in props && props.publishableKey != null) {
|
|
102
|
+
// throw new Error(
|
|
103
|
+
// 'Cannot provide both a clientSessionToken and a publishableKey .'
|
|
104
|
+
// )
|
|
105
|
+
// }
|
|
101
106
|
if ('userIdentifierKey' in props && props.userIdentifierKey != null) {
|
|
102
107
|
throw new Error('Cannot use a userIdentifierKey with a clientSessionToken.');
|
|
103
108
|
}
|
package/lib/SeamProvider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACxE,OAAO,EACL,aAAa,EAEb,UAAU,EACV,MAAM,GACP,MAAM,OAAO,CAAA;AAoCd,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,GAAG,KAAK,EAC6B;IACrC,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAA;IAEhC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,WAAW,EAAE,CAAC,CAAA;IAEhD,MAAM,UAAU,GAAG,MAAM,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC,CAAA;IACxD,IACE,UAAU,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI;QACjC,UAAU,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,
|
|
1
|
+
{"version":3,"file":"SeamProvider.js","sourceRoot":"","sources":["../src/lib/SeamProvider.tsx"],"names":[],"mappings":"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"}
|
package/lib/copy.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function copy(value: string): Promise<void>;
|
package/lib/copy.js
ADDED
package/lib/copy.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"copy.js","sourceRoot":"","sources":["../src/lib/copy.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,IAAI,CAAC,KAAa;IACtC,MAAM,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export const CopyIcon = (props) => (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 18, height: 18, fill: 'none', ...props, children: [_jsx("mask", { id: 'copy_svg__a', width: 18, height: 18, x: 0, y: 0, maskUnits: 'userSpaceOnUse', style: {
|
|
3
|
+
maskType: 'alpha',
|
|
4
|
+
}, children: _jsx("path", { fill: '#D9D9D9', d: 'M0 0h18v18H0z' }) }), _jsx("g", { mask: 'url(#copy_svg__a)', children: _jsx("path", { fill: '#007AFC', d: 'M3.75 16.5c-.413 0-.766-.147-1.06-.44A1.446 1.446 0 0 1 2.25 15V4.5h1.5V15H12v1.5H3.75Zm3-3c-.412 0-.766-.147-1.059-.44A1.445 1.445 0 0 1 5.25 12V3c0-.413.147-.766.441-1.06.293-.293.647-.44 1.059-.44h6.75c.412 0 .766.147 1.06.44.293.294.44.647.44 1.06v9c0 .412-.147.766-.44 1.06-.294.293-.648.44-1.06.44H6.75Zm0-1.5h6.75V3H6.75v9Z' }) })] }));
|
|
5
|
+
//# sourceMappingURL=Copy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Copy.js","sourceRoot":"","sources":["../../src/lib/icons/Copy.tsx"],"names":[],"mappings":";AACA,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAA8B,EAAe,EAAE,CAAC,CACvE,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,MAAM,KACP,KAAK,aAET,eACE,EAAE,EAAC,aAAa,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB,YAED,eAAM,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,eAAe,GAAG,GACpC,EACP,YAAG,IAAI,EAAC,mBAAmB,YACzB,eACE,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,4UAA4U,GAC9U,GACA,IACA,CACP,CAAA"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import type { AccessCode } from 'seamapi';
|
|
2
1
|
export interface AccessCodeDetailsProps {
|
|
3
|
-
|
|
2
|
+
accessCodeId: string;
|
|
4
3
|
onBack?: () => void;
|
|
5
4
|
}
|
|
6
|
-
export declare function AccessCodeDetails({
|
|
5
|
+
export declare function AccessCodeDetails({ accessCodeId, onBack, }: AccessCodeDetailsProps): JSX.Element | null;
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { DateTime } from 'luxon';
|
|
3
3
|
import { useState } from 'react';
|
|
4
|
+
import { useAccessCode } from '../../../lib/index.js';
|
|
4
5
|
import { AccessCodeDevice } from '../../../lib/ui/AccessCodeDetails/AccessCodeDevice.js';
|
|
5
6
|
import { DeviceDetails } from '../../../lib/ui/DeviceDetails/DeviceDetails.js';
|
|
6
7
|
import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
|
|
7
8
|
import { useIsDateInPast } from '../../../lib/use-is-date-in-past.js';
|
|
8
|
-
export function AccessCodeDetails({
|
|
9
|
-
const
|
|
9
|
+
export function AccessCodeDetails({ accessCodeId, onBack, }) {
|
|
10
|
+
const { accessCode } = useAccessCode(accessCodeId);
|
|
10
11
|
const [selectedDeviceId, selectDevice] = useState(null);
|
|
12
|
+
if (accessCode == null) {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
const name = accessCode.name ?? t.fallbackName;
|
|
11
16
|
if (selectedDeviceId != null) {
|
|
12
17
|
return (_jsx(DeviceDetails, { deviceId: selectedDeviceId, onBack: () => {
|
|
13
18
|
selectDevice(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccessCodeDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,8CAA8C,CAAA;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAO5D,MAAM,UAAU,iBAAiB,CAAC,EAChC,
|
|
1
|
+
{"version":3,"file":"AccessCodeDetails.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeDetails/AccessCodeDetails.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
+
import { copy } from '../../../lib/copy.js';
|
|
3
4
|
import { AccessCodeKeyIcon } from '../../../lib/icons/AccessCodeKey.js';
|
|
5
|
+
import { CopyIcon } from '../../../lib/icons/Copy.js';
|
|
4
6
|
import { useAccessCodes } from '../../../lib/seam/access-codes/use-access-codes.js';
|
|
5
7
|
import { AccessCodeDetails } from '../../../lib/ui/AccessCodeDetails/AccessCodeDetails.js';
|
|
6
8
|
import { CodeDetails } from '../../../lib/ui/AccessCodeTable/CodeDetails.js';
|
|
7
9
|
import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
|
|
10
|
+
import { MenuItem } from '../../../lib/ui/Menu/MenuItem.js';
|
|
11
|
+
import { MoreActionsMenu } from '../../../lib/ui/Menu/MoreActionsMenu.js';
|
|
8
12
|
import { TableBody } from '../../../lib/ui/Table/TableBody.js';
|
|
9
13
|
import { TableCell } from '../../../lib/ui/Table/TableCell.js';
|
|
10
14
|
import { TableHeader } from '../../../lib/ui/Table/TableHeader.js';
|
|
@@ -19,7 +23,7 @@ export function AccessCodeTable(props) {
|
|
|
19
23
|
const { onBack } = props;
|
|
20
24
|
const [selectedAccessCode, selectAccessCode] = useState(null);
|
|
21
25
|
if (selectedAccessCode != null) {
|
|
22
|
-
return (_jsx(AccessCodeDetails, {
|
|
26
|
+
return (_jsx(AccessCodeDetails, { accessCodeId: selectedAccessCode.access_code_id, onBack: () => {
|
|
23
27
|
selectAccessCode(null);
|
|
24
28
|
} }));
|
|
25
29
|
}
|
|
@@ -28,9 +32,16 @@ export function AccessCodeTable(props) {
|
|
|
28
32
|
}
|
|
29
33
|
return (_jsxs("div", { className: 'seam-access-code-table', children: [_jsx(ContentHeader, { onBack: onBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.accessCodes, " ", _jsxs(Caption, { children: ["(", accessCodes.length, ")"] })] }) }), _jsx(TableBody, { children: accessCodes.map((code) => (_jsxs(TableRow, { onClick: () => {
|
|
30
34
|
selectAccessCode(code);
|
|
31
|
-
}, children: [_jsx(TableCell, { className: 'seam-icon-cell', children: _jsx("div", { children: _jsx(AccessCodeKeyIcon, {}) }) }), _jsxs(TableCell, { className: 'seam-name-cell', children: [_jsx(Title, { children: code.name }), _jsx(CodeDetails, { accessCode: code })] }), _jsx(TableCell, { className: 'seam-action-cell'
|
|
35
|
+
}, children: [_jsx(TableCell, { className: 'seam-icon-cell', children: _jsx("div", { children: _jsx(AccessCodeKeyIcon, {}) }) }), _jsxs(TableCell, { className: 'seam-name-cell', children: [_jsx(Title, { children: code.name }), _jsx(CodeDetails, { accessCode: code })] }), _jsx(TableCell, { className: 'seam-action-cell', children: _jsx(MoreActionsMenu, { MenuProps: {
|
|
36
|
+
BackgroundProps: {
|
|
37
|
+
className: 'seam-access-code-table-action-menu',
|
|
38
|
+
},
|
|
39
|
+
}, children: _jsx(MenuItem, { onClick: () => {
|
|
40
|
+
void copy(code.code ?? '');
|
|
41
|
+
}, children: _jsxs("div", { className: 'menu-item-copy', children: [_jsxs("span", { children: [t.copyCode, " - ", code.code] }), _jsx(CopyIcon, {})] }) }) }) })] }, code.access_code_id))) })] }));
|
|
32
42
|
}
|
|
33
43
|
const t = {
|
|
34
44
|
accessCodes: 'Access Codes',
|
|
45
|
+
copyCode: 'Copy code',
|
|
35
46
|
};
|
|
36
47
|
//# sourceMappingURL=AccessCodeTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,2CAA2C,CAAA;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAA;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAOlD,MAAM,UAAU,eAAe,CAC7B,KAA2B;IAE3B,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC;QACrC,SAAS,EAAE,KAAK,CAAC,QAAQ;KAC1B,CAAC,CAAA;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAExB,MAAM,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CACrD,IAAI,CACL,CAAA;IAED,IAAI,kBAAkB,IAAI,IAAI,EAAE;QAC9B,OAAO,CACL,KAAC,iBAAiB,IAChB,
|
|
1
|
+
{"version":3,"file":"AccessCodeTable.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/AccessCodeTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface MenuProps {
|
|
3
|
+
children: JSX.Element | JSX.Element[];
|
|
4
|
+
verticalOffset?: number;
|
|
5
|
+
horizontalOffset?: number;
|
|
6
|
+
edgeOffset?: number;
|
|
7
|
+
button: (props: {
|
|
8
|
+
open: (event: React.MouseEvent<HTMLElement>) => void;
|
|
9
|
+
}) => React.ReactElement;
|
|
10
|
+
BackgroundProps?: Partial<{
|
|
11
|
+
className?: string;
|
|
12
|
+
}>;
|
|
13
|
+
}
|
|
14
|
+
interface MenuContextProps {
|
|
15
|
+
close: () => void;
|
|
16
|
+
}
|
|
17
|
+
declare const Menu: ({ verticalOffset, horizontalOffset, edgeOffset, children, button, BackgroundProps, }: MenuProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
18
|
+
export declare function useMenu(): MenuContextProps;
|
|
19
|
+
export default Menu;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useState, } from 'react';
|
|
4
|
+
import { createPortal } from 'react-dom';
|
|
5
|
+
const MenuContext = createContext(undefined);
|
|
6
|
+
const Menu = ({ verticalOffset = 5, horizontalOffset = 0, edgeOffset = 5, children, button, BackgroundProps, }) => {
|
|
7
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
8
|
+
const [documentEl, setDocumentEl] = useState(null);
|
|
9
|
+
const [contentEl, setContentEl] = useState(null);
|
|
10
|
+
const [top, setTop] = useState(0);
|
|
11
|
+
const [left, setLeft] = useState(0);
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
const containers = document.querySelectorAll('.seam-components');
|
|
14
|
+
const el = containers[containers.length - 1];
|
|
15
|
+
if (el != null) {
|
|
16
|
+
setDocumentEl(el);
|
|
17
|
+
}
|
|
18
|
+
}, [setDocumentEl]);
|
|
19
|
+
const handleClose = () => {
|
|
20
|
+
setAnchorEl(null);
|
|
21
|
+
};
|
|
22
|
+
const open = (event) => {
|
|
23
|
+
setAnchorEl(event.currentTarget);
|
|
24
|
+
};
|
|
25
|
+
const setPositions = useCallback(() => {
|
|
26
|
+
if (anchorEl == null || contentEl == null || documentEl == null)
|
|
27
|
+
return;
|
|
28
|
+
const { right: containerRight, bottom: containerBottom } = documentEl.getBoundingClientRect();
|
|
29
|
+
const { top: anchorTop, left: anchorLeft, height: anchorHeight, } = anchorEl.getBoundingClientRect();
|
|
30
|
+
const { width: contentWidth, height: contentHeight } = contentEl.getBoundingClientRect();
|
|
31
|
+
const anchorBottom = anchorTop + anchorHeight;
|
|
32
|
+
const top = anchorBottom + verticalOffset;
|
|
33
|
+
const left = anchorLeft + horizontalOffset;
|
|
34
|
+
const right = left + contentWidth;
|
|
35
|
+
const bottom = top + contentHeight;
|
|
36
|
+
// If the content would overflow right, we'll need to set it relative
|
|
37
|
+
// to the right of the container.
|
|
38
|
+
const isOverflowingRight = right > containerRight;
|
|
39
|
+
const visibleLeft = isOverflowingRight
|
|
40
|
+
? containerRight - contentWidth - horizontalOffset - edgeOffset
|
|
41
|
+
: left;
|
|
42
|
+
setLeft(visibleLeft);
|
|
43
|
+
// If the content would overflow bottom, we'll position it to be
|
|
44
|
+
// above the anchor.
|
|
45
|
+
const isOverFlowingBottom = bottom > containerBottom;
|
|
46
|
+
const visibleTop = isOverFlowingBottom
|
|
47
|
+
? anchorTop - contentHeight - verticalOffset
|
|
48
|
+
: top;
|
|
49
|
+
setTop(visibleTop);
|
|
50
|
+
}, [
|
|
51
|
+
anchorEl,
|
|
52
|
+
horizontalOffset,
|
|
53
|
+
verticalOffset,
|
|
54
|
+
contentEl,
|
|
55
|
+
documentEl,
|
|
56
|
+
edgeOffset,
|
|
57
|
+
]);
|
|
58
|
+
const isOpen = Boolean(anchorEl);
|
|
59
|
+
useLayoutEffect(() => {
|
|
60
|
+
setPositions();
|
|
61
|
+
window.addEventListener('scroll', setPositions);
|
|
62
|
+
window.addEventListener('resize', setPositions);
|
|
63
|
+
return () => {
|
|
64
|
+
window.removeEventListener('scroll', setPositions);
|
|
65
|
+
window.removeEventListener('resize', setPositions);
|
|
66
|
+
};
|
|
67
|
+
}, [setPositions]);
|
|
68
|
+
const hasSetPosition = top !== 0 && left !== 0;
|
|
69
|
+
const visible = isOpen && hasSetPosition;
|
|
70
|
+
if (documentEl == null) {
|
|
71
|
+
return null;
|
|
72
|
+
}
|
|
73
|
+
return (_jsxs(MenuContext.Provider, { value: {
|
|
74
|
+
close: handleClose,
|
|
75
|
+
}, children: [button({ open }), createPortal(_jsx("div", { className: classNames('seam-menu-bg', BackgroundProps?.className), style: {
|
|
76
|
+
display: visible ? 'flex' : 'none',
|
|
77
|
+
}, onClick: (e) => {
|
|
78
|
+
e.stopPropagation();
|
|
79
|
+
handleClose();
|
|
80
|
+
}, children: _jsx("div", { className: 'seam-menu-content', style: {
|
|
81
|
+
top,
|
|
82
|
+
left,
|
|
83
|
+
}, children: children }) }), documentEl), _jsx("div", { className: 'seam-menu-shadow', children: _jsx("div", { className: 'seam-menu-content', ref: setContentEl, children: children }) })] }));
|
|
84
|
+
};
|
|
85
|
+
export function useMenu() {
|
|
86
|
+
const context = useContext(MenuContext);
|
|
87
|
+
if (context === undefined) {
|
|
88
|
+
throw new Error('useMenu must be used within a Menu.');
|
|
89
|
+
}
|
|
90
|
+
return context;
|
|
91
|
+
}
|
|
92
|
+
export default Menu;
|
|
93
|
+
//# sourceMappingURL=Menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../src/lib/ui/Menu/Menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMenu } from '../../../lib/ui/Menu/Menu.js';
|
|
3
|
+
export function MenuItem({ children, onClick }) {
|
|
4
|
+
const { close: closeMenu } = useMenu();
|
|
5
|
+
return (_jsx("div", { className: 'seam-menu-item', onClick: () => {
|
|
6
|
+
onClick();
|
|
7
|
+
closeMenu();
|
|
8
|
+
}, children: children }));
|
|
9
|
+
}
|
|
10
|
+
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/lib/ui/Menu/MenuItem.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAO7C,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAiB;IAC3D,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAA;IAEtC,OAAO,CACL,cACE,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,EAAE,CAAA;YACT,SAAS,EAAE,CAAA;QACb,CAAC,YAEA,QAAQ,GACL,CACP,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { type MenuProps } from '../../../lib/ui/Menu/Menu.js';
|
|
2
|
+
export interface MoreActionsMenuProps {
|
|
3
|
+
children: JSX.Element | JSX.Element[];
|
|
4
|
+
MenuProps?: Partial<MenuProps>;
|
|
5
|
+
}
|
|
6
|
+
export declare function MoreActionsMenu({ children, MenuProps }: MoreActionsMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { DotsEllipsisMoreIcon } from '../../../lib/icons/DotsEllipsisMore.js';
|
|
3
|
+
import { IconButton } from '../../../lib/ui/IconButton.js';
|
|
4
|
+
import Menu, {} from '../../../lib/ui/Menu/Menu.js';
|
|
5
|
+
export function MoreActionsMenu({ children, MenuProps }) {
|
|
6
|
+
return (_jsx(Menu, { button: ({ open }) => (_jsx(IconButton, { onClick: (e) => {
|
|
7
|
+
e.stopPropagation();
|
|
8
|
+
open(e);
|
|
9
|
+
}, children: _jsx(DotsEllipsisMoreIcon, {}) })), ...MenuProps, children: children }));
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=MoreActionsMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MoreActionsMenu.js","sourceRoot":"","sources":["../../../src/lib/ui/Menu/MoreActionsMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,IAAI,EAAE,EAAkB,MAAM,qBAAqB,CAAA;AAM1D,MAAM,UAAU,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAwB;IAC3E,OAAO,CACL,KAAC,IAAI,IACH,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACpB,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;gBACb,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,CAAC,CAAC,CAAA;YACT,CAAC,YAED,KAAC,oBAAoB,KAAG,GACb,CACd,KACG,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAA;AACH,CAAC"}
|
|
@@ -10,7 +10,6 @@ function Content(props) {
|
|
|
10
10
|
if (isOnline) {
|
|
11
11
|
return (_jsxs(_Fragment, { children: [_jsx(OnlineStatusOnlineIcon, {}), _jsx("span", { className: 'seam-status-text', children: t.online })] }));
|
|
12
12
|
}
|
|
13
|
-
// TODO: Check for Account Offline status
|
|
14
13
|
return (_jsxs(_Fragment, { children: [_jsx(OnlineStatusDeviceOfflineIcon, {}), _jsx("span", { className: 'seam-text-danger', children: t.deviceOffline })] }));
|
|
15
14
|
}
|
|
16
15
|
const t = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OnlineStatus.js","sourceRoot":"","sources":["../../../src/lib/ui/device/OnlineStatus.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,6BAA6B,EAAE,MAAM,wCAAwC,CAAA;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AAMxE,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,MAAM,EAAE,EACN,UAAU,EAAE,EAAE,MAAM,EAAE,GACvB,GACF,GAAG,KAAK,CAAA;IAET,OAAO,CACL,cAAK,SAAS,EAAC,oBAAoB,YACjC,KAAC,OAAO,IAAC,QAAQ,EAAE,MAAM,GAAI,GACzB,CACP,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,KAA4B;IAC3C,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC1B,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,8BACE,KAAC,sBAAsB,KAAG,EAC1B,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,MAAM,GAAQ,IACnD,CACJ,CAAA;KACF;IAED,
|
|
1
|
+
{"version":3,"file":"OnlineStatus.js","sourceRoot":"","sources":["../../../src/lib/ui/device/OnlineStatus.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,6BAA6B,EAAE,MAAM,wCAAwC,CAAA;AACtF,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AAMxE,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EACJ,MAAM,EAAE,EACN,UAAU,EAAE,EAAE,MAAM,EAAE,GACvB,GACF,GAAG,KAAK,CAAA;IAET,OAAO,CACL,cAAK,SAAS,EAAC,oBAAoB,YACjC,KAAC,OAAO,IAAC,QAAQ,EAAE,MAAM,GAAI,GACzB,CACP,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,KAA4B;IAC3C,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC1B,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,8BACE,KAAC,sBAAsB,KAAG,EAC1B,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,MAAM,GAAQ,IACnD,CACJ,CAAA;KACF;IAED,OAAO,CACL,8BACE,KAAC,6BAA6B,KAAG,EACjC,eAAM,SAAS,EAAC,kBAAkB,YAAE,CAAC,CAAC,aAAa,GAAQ,IAC1D,CACJ,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,MAAM,EAAE,QAAQ;IAChB,aAAa,EAAE,gBAAgB;CAChC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seamapi/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.22.1",
|
|
4
4
|
"description": "Seam React component library.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "index.js",
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
"@emotion/styled": "^11.10.6",
|
|
105
105
|
"@mui/icons-material": "^5.11.16",
|
|
106
106
|
"@mui/material": "^5.12.2",
|
|
107
|
-
"@seamapi/fake-seam-connect": "^0.
|
|
107
|
+
"@seamapi/fake-seam-connect": "^0.4.2",
|
|
108
108
|
"@storybook/addon-essentials": "^7.0.2",
|
|
109
109
|
"@storybook/addon-interactions": "^7.0.2",
|
|
110
110
|
"@storybook/addon-links": "^7.0.2",
|
|
@@ -122,6 +122,7 @@
|
|
|
122
122
|
"@types/react-dom": "^18.0.11",
|
|
123
123
|
"@types/uuid": "^9.0.1",
|
|
124
124
|
"@vitejs/plugin-react": "^4.0.0",
|
|
125
|
+
"axios": "^1.4.0",
|
|
125
126
|
"concurrently": "^8.0.1",
|
|
126
127
|
"copy-webpack-plugin": "^11.0.0",
|
|
127
128
|
"del-cli": "^5.0.0",
|
|
@@ -139,6 +140,7 @@
|
|
|
139
140
|
"jest-environment-jsdom": "^29.5.0",
|
|
140
141
|
"prettier": "^2.3.0",
|
|
141
142
|
"prop-types": "^15.8.1",
|
|
143
|
+
"raw-body": "^2.5.2",
|
|
142
144
|
"react": "^18.2.0",
|
|
143
145
|
"react-dom": "^18.2.0",
|
|
144
146
|
"sass": "^1.62.1",
|
package/src/lib/SeamProvider.tsx
CHANGED
|
@@ -53,16 +53,20 @@ export function SeamProvider({
|
|
|
53
53
|
const contextRef = useRef(createSeamContextValue(props))
|
|
54
54
|
if (
|
|
55
55
|
contextRef.current.client == null &&
|
|
56
|
-
contextRef.current.publishableKey == null
|
|
56
|
+
contextRef.current.publishableKey == null &&
|
|
57
|
+
contextRef.current.clientSessionToken == null
|
|
57
58
|
) {
|
|
58
59
|
contextRef.current = defaultSeamContextValue
|
|
59
60
|
}
|
|
60
61
|
|
|
61
62
|
if (
|
|
62
63
|
contextRef.current.client == null &&
|
|
63
|
-
contextRef.current.publishableKey == null
|
|
64
|
+
contextRef.current.publishableKey == null &&
|
|
65
|
+
contextRef.current.clientSessionToken == null
|
|
64
66
|
) {
|
|
65
|
-
throw new Error(
|
|
67
|
+
throw new Error(
|
|
68
|
+
`Must provide either a Seam client, clientSessionToken or a publishableKey.`
|
|
69
|
+
)
|
|
66
70
|
}
|
|
67
71
|
|
|
68
72
|
return (
|
|
@@ -178,11 +182,12 @@ const isSeamProviderPropsWithClientSessionToken = (
|
|
|
178
182
|
throw new Error('Cannot provide a Seam client along with other options.')
|
|
179
183
|
}
|
|
180
184
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
185
|
+
// No reason to ban this behavior, but it's unnecessary.
|
|
186
|
+
// if ('publishableKey' in props && props.publishableKey != null) {
|
|
187
|
+
// throw new Error(
|
|
188
|
+
// 'Cannot provide both a clientSessionToken and a publishableKey .'
|
|
189
|
+
// )
|
|
190
|
+
// }
|
|
186
191
|
|
|
187
192
|
if ('userIdentifierKey' in props && props.userIdentifierKey != null) {
|
|
188
193
|
throw new Error('Cannot use a userIdentifierKey with a clientSessionToken.')
|
package/src/lib/copy.ts
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { SVGProps } from 'react'
|
|
2
|
+
export const CopyIcon = (props: SVGProps<SVGSVGElement>): JSX.Element => (
|
|
3
|
+
<svg
|
|
4
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
5
|
+
width={18}
|
|
6
|
+
height={18}
|
|
7
|
+
fill='none'
|
|
8
|
+
{...props}
|
|
9
|
+
>
|
|
10
|
+
<mask
|
|
11
|
+
id='copy_svg__a'
|
|
12
|
+
width={18}
|
|
13
|
+
height={18}
|
|
14
|
+
x={0}
|
|
15
|
+
y={0}
|
|
16
|
+
maskUnits='userSpaceOnUse'
|
|
17
|
+
style={{
|
|
18
|
+
maskType: 'alpha',
|
|
19
|
+
}}
|
|
20
|
+
>
|
|
21
|
+
<path fill='#D9D9D9' d='M0 0h18v18H0z' />
|
|
22
|
+
</mask>
|
|
23
|
+
<g mask='url(#copy_svg__a)'>
|
|
24
|
+
<path
|
|
25
|
+
fill='#007AFC'
|
|
26
|
+
d='M3.75 16.5c-.413 0-.766-.147-1.06-.44A1.446 1.446 0 0 1 2.25 15V4.5h1.5V15H12v1.5H3.75Zm3-3c-.412 0-.766-.147-1.059-.44A1.445 1.445 0 0 1 5.25 12V3c0-.413.147-.766.441-1.06.293-.293.647-.44 1.059-.44h6.75c.412 0 .766.147 1.06.44.293.294.44.647.44 1.06v9c0 .412-.147.766-.44 1.06-.294.293-.648.44-1.06.44H6.75Zm0-1.5h6.75V3H6.75v9Z'
|
|
27
|
+
/>
|
|
28
|
+
</g>
|
|
29
|
+
</svg>
|
|
30
|
+
)
|
|
@@ -2,23 +2,31 @@ import { DateTime } from 'luxon'
|
|
|
2
2
|
import { useState } from 'react'
|
|
3
3
|
import type { AccessCode } from 'seamapi'
|
|
4
4
|
|
|
5
|
+
import { useAccessCode } from 'lib/index.js'
|
|
6
|
+
|
|
5
7
|
import { AccessCodeDevice } from 'lib/ui/AccessCodeDetails/AccessCodeDevice.js'
|
|
6
8
|
import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js'
|
|
7
9
|
import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
|
|
8
10
|
import { useIsDateInPast } from 'lib/use-is-date-in-past.js'
|
|
9
11
|
|
|
10
12
|
export interface AccessCodeDetailsProps {
|
|
11
|
-
|
|
13
|
+
accessCodeId: string
|
|
12
14
|
onBack?: () => void
|
|
13
15
|
}
|
|
14
16
|
|
|
15
17
|
export function AccessCodeDetails({
|
|
16
|
-
|
|
18
|
+
accessCodeId,
|
|
17
19
|
onBack,
|
|
18
|
-
}: AccessCodeDetailsProps): JSX.Element {
|
|
19
|
-
const
|
|
20
|
+
}: AccessCodeDetailsProps): JSX.Element | null {
|
|
21
|
+
const { accessCode } = useAccessCode(accessCodeId)
|
|
20
22
|
const [selectedDeviceId, selectDevice] = useState<string | null>(null)
|
|
21
23
|
|
|
24
|
+
if (accessCode == null) {
|
|
25
|
+
return null
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const name = accessCode.name ?? t.fallbackName
|
|
29
|
+
|
|
22
30
|
if (selectedDeviceId != null) {
|
|
23
31
|
return (
|
|
24
32
|
<DeviceDetails
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { useState } from 'react'
|
|
2
2
|
import type { AccessCode } from 'seamapi'
|
|
3
3
|
|
|
4
|
+
import { copy } from 'lib/copy.js'
|
|
4
5
|
import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
|
|
6
|
+
import { CopyIcon } from 'lib/icons/Copy.js'
|
|
5
7
|
import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
|
|
6
8
|
import { AccessCodeDetails } from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
|
|
7
9
|
import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
|
|
8
10
|
import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
|
|
11
|
+
import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
|
|
12
|
+
import { MoreActionsMenu } from 'lib/ui/Menu/MoreActionsMenu.js'
|
|
9
13
|
import { TableBody } from 'lib/ui/Table/TableBody.js'
|
|
10
14
|
import { TableCell } from 'lib/ui/Table/TableCell.js'
|
|
11
15
|
import { TableHeader } from 'lib/ui/Table/TableHeader.js'
|
|
@@ -34,7 +38,7 @@ export function AccessCodeTable(
|
|
|
34
38
|
if (selectedAccessCode != null) {
|
|
35
39
|
return (
|
|
36
40
|
<AccessCodeDetails
|
|
37
|
-
|
|
41
|
+
accessCodeId={selectedAccessCode.access_code_id}
|
|
38
42
|
onBack={() => {
|
|
39
43
|
selectAccessCode(null)
|
|
40
44
|
}}
|
|
@@ -71,7 +75,28 @@ export function AccessCodeTable(
|
|
|
71
75
|
<Title>{code.name}</Title>
|
|
72
76
|
<CodeDetails accessCode={code} />
|
|
73
77
|
</TableCell>
|
|
74
|
-
<TableCell className='seam-action-cell'
|
|
78
|
+
<TableCell className='seam-action-cell'>
|
|
79
|
+
<MoreActionsMenu
|
|
80
|
+
MenuProps={{
|
|
81
|
+
BackgroundProps: {
|
|
82
|
+
className: 'seam-access-code-table-action-menu',
|
|
83
|
+
},
|
|
84
|
+
}}
|
|
85
|
+
>
|
|
86
|
+
<MenuItem
|
|
87
|
+
onClick={() => {
|
|
88
|
+
void copy(code.code ?? '')
|
|
89
|
+
}}
|
|
90
|
+
>
|
|
91
|
+
<div className='menu-item-copy'>
|
|
92
|
+
<span>
|
|
93
|
+
{t.copyCode} - {code.code}
|
|
94
|
+
</span>
|
|
95
|
+
<CopyIcon />
|
|
96
|
+
</div>
|
|
97
|
+
</MenuItem>
|
|
98
|
+
</MoreActionsMenu>
|
|
99
|
+
</TableCell>
|
|
75
100
|
</TableRow>
|
|
76
101
|
))}
|
|
77
102
|
</TableBody>
|
|
@@ -81,4 +106,5 @@ export function AccessCodeTable(
|
|
|
81
106
|
|
|
82
107
|
const t = {
|
|
83
108
|
accessCodes: 'Access Codes',
|
|
109
|
+
copyCode: 'Copy code',
|
|
84
110
|
}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import classNames from 'classnames'
|
|
2
|
+
import {
|
|
3
|
+
createContext,
|
|
4
|
+
useCallback,
|
|
5
|
+
useContext,
|
|
6
|
+
useEffect,
|
|
7
|
+
useLayoutEffect,
|
|
8
|
+
useState,
|
|
9
|
+
} from 'react'
|
|
10
|
+
import { createPortal } from 'react-dom'
|
|
11
|
+
|
|
12
|
+
export interface MenuProps {
|
|
13
|
+
children: JSX.Element | JSX.Element[]
|
|
14
|
+
verticalOffset?: number
|
|
15
|
+
horizontalOffset?: number
|
|
16
|
+
edgeOffset?: number
|
|
17
|
+
button: (props: {
|
|
18
|
+
open: (event: React.MouseEvent<HTMLElement>) => void
|
|
19
|
+
}) => React.ReactElement
|
|
20
|
+
BackgroundProps?: Partial<{
|
|
21
|
+
className?: string
|
|
22
|
+
}>
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
interface MenuContextProps {
|
|
26
|
+
close: () => void
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const MenuContext = createContext<MenuContextProps | undefined>(undefined)
|
|
30
|
+
|
|
31
|
+
const Menu = ({
|
|
32
|
+
verticalOffset = 5,
|
|
33
|
+
horizontalOffset = 0,
|
|
34
|
+
edgeOffset = 5,
|
|
35
|
+
children,
|
|
36
|
+
button,
|
|
37
|
+
BackgroundProps,
|
|
38
|
+
}: MenuProps) => {
|
|
39
|
+
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
|
40
|
+
const [documentEl, setDocumentEl] = useState<null | Element>(null)
|
|
41
|
+
const [contentEl, setContentEl] = useState<HTMLDivElement | null>(null)
|
|
42
|
+
const [top, setTop] = useState(0)
|
|
43
|
+
const [left, setLeft] = useState(0)
|
|
44
|
+
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
const containers = document.querySelectorAll('.seam-components')
|
|
47
|
+
const el = containers[containers.length - 1]
|
|
48
|
+
if (el != null) {
|
|
49
|
+
setDocumentEl(el)
|
|
50
|
+
}
|
|
51
|
+
}, [setDocumentEl])
|
|
52
|
+
|
|
53
|
+
const handleClose = () => {
|
|
54
|
+
setAnchorEl(null)
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
const open = (event: React.MouseEvent<HTMLElement>) => {
|
|
58
|
+
setAnchorEl(event.currentTarget)
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
const setPositions = useCallback(() => {
|
|
62
|
+
if (anchorEl == null || contentEl == null || documentEl == null) return
|
|
63
|
+
|
|
64
|
+
const { right: containerRight, bottom: containerBottom } =
|
|
65
|
+
documentEl.getBoundingClientRect()
|
|
66
|
+
|
|
67
|
+
const {
|
|
68
|
+
top: anchorTop,
|
|
69
|
+
left: anchorLeft,
|
|
70
|
+
height: anchorHeight,
|
|
71
|
+
} = anchorEl.getBoundingClientRect()
|
|
72
|
+
|
|
73
|
+
const { width: contentWidth, height: contentHeight } =
|
|
74
|
+
contentEl.getBoundingClientRect()
|
|
75
|
+
|
|
76
|
+
const anchorBottom = anchorTop + anchorHeight
|
|
77
|
+
|
|
78
|
+
const top = anchorBottom + verticalOffset
|
|
79
|
+
const left = anchorLeft + horizontalOffset
|
|
80
|
+
const right = left + contentWidth
|
|
81
|
+
const bottom = top + contentHeight
|
|
82
|
+
|
|
83
|
+
// If the content would overflow right, we'll need to set it relative
|
|
84
|
+
// to the right of the container.
|
|
85
|
+
const isOverflowingRight = right > containerRight
|
|
86
|
+
const visibleLeft = isOverflowingRight
|
|
87
|
+
? containerRight - contentWidth - horizontalOffset - edgeOffset
|
|
88
|
+
: left
|
|
89
|
+
setLeft(visibleLeft)
|
|
90
|
+
|
|
91
|
+
// If the content would overflow bottom, we'll position it to be
|
|
92
|
+
// above the anchor.
|
|
93
|
+
const isOverFlowingBottom = bottom > containerBottom
|
|
94
|
+
const visibleTop = isOverFlowingBottom
|
|
95
|
+
? anchorTop - contentHeight - verticalOffset
|
|
96
|
+
: top
|
|
97
|
+
setTop(visibleTop)
|
|
98
|
+
}, [
|
|
99
|
+
anchorEl,
|
|
100
|
+
horizontalOffset,
|
|
101
|
+
verticalOffset,
|
|
102
|
+
contentEl,
|
|
103
|
+
documentEl,
|
|
104
|
+
edgeOffset,
|
|
105
|
+
])
|
|
106
|
+
|
|
107
|
+
const isOpen = Boolean(anchorEl)
|
|
108
|
+
|
|
109
|
+
useLayoutEffect(() => {
|
|
110
|
+
setPositions()
|
|
111
|
+
window.addEventListener('scroll', setPositions)
|
|
112
|
+
window.addEventListener('resize', setPositions)
|
|
113
|
+
return () => {
|
|
114
|
+
window.removeEventListener('scroll', setPositions)
|
|
115
|
+
window.removeEventListener('resize', setPositions)
|
|
116
|
+
}
|
|
117
|
+
}, [setPositions])
|
|
118
|
+
|
|
119
|
+
const hasSetPosition = top !== 0 && left !== 0
|
|
120
|
+
const visible = isOpen && hasSetPosition
|
|
121
|
+
|
|
122
|
+
if (documentEl == null) {
|
|
123
|
+
return null
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
return (
|
|
127
|
+
<MenuContext.Provider
|
|
128
|
+
value={{
|
|
129
|
+
close: handleClose,
|
|
130
|
+
}}
|
|
131
|
+
>
|
|
132
|
+
{button({ open })}
|
|
133
|
+
{createPortal(
|
|
134
|
+
<div
|
|
135
|
+
className={classNames('seam-menu-bg', BackgroundProps?.className)}
|
|
136
|
+
style={{
|
|
137
|
+
display: visible ? 'flex' : 'none',
|
|
138
|
+
}}
|
|
139
|
+
onClick={(e) => {
|
|
140
|
+
e.stopPropagation()
|
|
141
|
+
handleClose()
|
|
142
|
+
}}
|
|
143
|
+
>
|
|
144
|
+
<div
|
|
145
|
+
className='seam-menu-content'
|
|
146
|
+
style={{
|
|
147
|
+
top,
|
|
148
|
+
left,
|
|
149
|
+
}}
|
|
150
|
+
>
|
|
151
|
+
{children}
|
|
152
|
+
</div>
|
|
153
|
+
</div>,
|
|
154
|
+
documentEl
|
|
155
|
+
)}
|
|
156
|
+
|
|
157
|
+
{/*
|
|
158
|
+
* Render a shadow element to calculate the content size even if we're
|
|
159
|
+
* not actually showing the content yet.
|
|
160
|
+
*/}
|
|
161
|
+
<div className='seam-menu-shadow'>
|
|
162
|
+
<div className='seam-menu-content' ref={setContentEl}>
|
|
163
|
+
{children}
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
</MenuContext.Provider>
|
|
167
|
+
)
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
export function useMenu() {
|
|
171
|
+
const context = useContext(MenuContext)
|
|
172
|
+
if (context === undefined) {
|
|
173
|
+
throw new Error('useMenu must be used within a Menu.')
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
return context
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
export default Menu
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { ReactNode } from 'react'
|
|
2
|
+
|
|
3
|
+
import { useMenu } from 'lib/ui/Menu/Menu.js'
|
|
4
|
+
|
|
5
|
+
export interface MenuItemProps {
|
|
6
|
+
children: ReactNode
|
|
7
|
+
onClick: () => void
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export function MenuItem({ children, onClick }: MenuItemProps) {
|
|
11
|
+
const { close: closeMenu } = useMenu()
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<div
|
|
15
|
+
className='seam-menu-item'
|
|
16
|
+
onClick={() => {
|
|
17
|
+
onClick()
|
|
18
|
+
closeMenu()
|
|
19
|
+
}}
|
|
20
|
+
>
|
|
21
|
+
{children}
|
|
22
|
+
</div>
|
|
23
|
+
)
|
|
24
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { DotsEllipsisMoreIcon } from 'lib/icons/DotsEllipsisMore.js'
|
|
2
|
+
import { IconButton } from 'lib/ui/IconButton.js'
|
|
3
|
+
import Menu, { type MenuProps } from 'lib/ui/Menu/Menu.js'
|
|
4
|
+
|
|
5
|
+
export interface MoreActionsMenuProps {
|
|
6
|
+
children: JSX.Element | JSX.Element[]
|
|
7
|
+
MenuProps?: Partial<MenuProps>
|
|
8
|
+
}
|
|
9
|
+
export function MoreActionsMenu({ children, MenuProps }: MoreActionsMenuProps) {
|
|
10
|
+
return (
|
|
11
|
+
<Menu
|
|
12
|
+
button={({ open }) => (
|
|
13
|
+
<IconButton
|
|
14
|
+
onClick={(e) => {
|
|
15
|
+
e.stopPropagation()
|
|
16
|
+
open(e)
|
|
17
|
+
}}
|
|
18
|
+
>
|
|
19
|
+
<DotsEllipsisMoreIcon />
|
|
20
|
+
</IconButton>
|
|
21
|
+
)}
|
|
22
|
+
{...MenuProps}
|
|
23
|
+
>
|
|
24
|
+
{children}
|
|
25
|
+
</Menu>
|
|
26
|
+
)
|
|
27
|
+
}
|
package/src/styles/_main.scss
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
@use './access-code-table';
|
|
8
8
|
@use './colors';
|
|
9
9
|
@use './icons';
|
|
10
|
+
@use './menus';
|
|
10
11
|
@use './device-details';
|
|
11
12
|
@use './device-table';
|
|
12
13
|
@use './access-code-details';
|
|
@@ -22,6 +23,7 @@
|
|
|
22
23
|
@include buttons.all;
|
|
23
24
|
@include layout.all;
|
|
24
25
|
@include icons.all;
|
|
26
|
+
@include menus.all;
|
|
25
27
|
|
|
26
28
|
// Components
|
|
27
29
|
@include device-details.all;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
@use './colors';
|
|
2
|
+
|
|
3
|
+
@mixin all {
|
|
4
|
+
.seam-menu-bg {
|
|
5
|
+
width: 100vw;
|
|
6
|
+
height: 100vh;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
align-items: center;
|
|
9
|
+
position: fixed;
|
|
10
|
+
inset: 0;
|
|
11
|
+
z-index: 999999;
|
|
12
|
+
display: none; // Toggled in JS (component)
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.seam-menu-content {
|
|
16
|
+
width: 250px;
|
|
17
|
+
position: absolute;
|
|
18
|
+
padding: 8px 0;
|
|
19
|
+
background: #fff;
|
|
20
|
+
box-shadow: 0 0 1px rgb(0 0 0 / 30%), 0 2px 16px 2px rgb(15 22 28 / 15%);
|
|
21
|
+
border-radius: 8px;
|
|
22
|
+
|
|
23
|
+
.seam-menu-item {
|
|
24
|
+
padding: 0 16px;
|
|
25
|
+
height: 36px;
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
font-size: 16px;
|
|
29
|
+
line-height: 134%;
|
|
30
|
+
cursor: pointer;
|
|
31
|
+
|
|
32
|
+
&:hover {
|
|
33
|
+
background: colors.$item-hover-bg;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.seam-menu-shadow {
|
|
39
|
+
z-index: -1;
|
|
40
|
+
opacity: 0;
|
|
41
|
+
visibility: hidden;
|
|
42
|
+
top: 0;
|
|
43
|
+
right: 0;
|
|
44
|
+
position: fixed;
|
|
45
|
+
}
|
|
46
|
+
}
|