@crispy-seed/data-table 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -224,4 +224,20 @@
224
224
  gap: 8px;
225
225
  padding: 8px 12px;
226
226
  border-top: 1px solid var(--seed-color-stroke-neutral-muted);
227
+ }
228
+ .seed-record-preview__tabsRoot {
229
+ flex: 1;
230
+ min-height: 0;
231
+ display: flex;
232
+ flex-direction: column;
233
+ overflow: hidden;
234
+ }
235
+ .seed-record-preview__tabPanel {
236
+ flex: 1;
237
+ min-height: 0;
238
+ overflow-y: auto;
239
+ padding: 8px 12px;
240
+ }
241
+ .seed-record-preview__tabBadge {
242
+ margin-inline-start: 6px;
227
243
  }
@@ -260,4 +260,23 @@
260
260
  padding: 8px 12px;
261
261
  display: flex;
262
262
  }
263
+
264
+ .seed-record-preview__tabsRoot {
265
+ flex-direction: column;
266
+ flex: 1;
267
+ min-height: 0;
268
+ display: flex;
269
+ overflow: hidden;
270
+ }
271
+
272
+ .seed-record-preview__tabPanel {
273
+ flex: 1;
274
+ min-height: 0;
275
+ padding: 8px 12px;
276
+ overflow-y: auto;
277
+ }
278
+
279
+ .seed-record-preview__tabBadge {
280
+ margin-inline-start: 6px;
281
+ }
263
282
  }
@@ -3,6 +3,13 @@
3
3
  display: flex;
4
4
  height: 100%;
5
5
  }
6
+ .seed-resizable-panel__root[data-floating='true'] {
7
+ position: absolute;
8
+ inset: 0;
9
+ display: block;
10
+ height: auto;
11
+ pointer-events: none;
12
+ }
6
13
  .seed-resizable-panel__spacer {
7
14
  flex: 0 0 auto;
8
15
  height: 100%;
@@ -34,27 +41,32 @@
34
41
  }
35
42
  .seed-resizable-panel__panel[data-floating='true'] {
36
43
  position: absolute;
37
- top: 8px;
38
- bottom: 8px;
44
+ top: 0;
45
+ bottom: 0;
39
46
  z-index: 20;
47
+ pointer-events: auto;
40
48
  border-inline-end: none;
41
49
  border-inline-start: none;
42
- border-radius: 12px;
43
- box-shadow: 0 0 0 1px rgba(28,40,64,0.04), 0 4px 8px -4px rgba(28,40,64,0.12), 0 4px 12px -2px rgba(24,41,75,0.16);
44
50
  transform: none;
45
51
  opacity: 1;
46
52
  }
47
53
  .seed-resizable-panel__panel[data-floating='true'][data-side='left'] {
48
- left: 8px;
54
+ left: 0;
55
+ border-top-right-radius: 12px;
56
+ border-bottom-right-radius: 12px;
57
+ box-shadow: 1px 0 0 rgba(28,40,64,0.04), 8px 0 16px -6px rgba(28,40,64,0.12), 8px 0 24px -4px rgba(24,41,75,0.16);
49
58
  }
50
59
  .seed-resizable-panel__panel[data-floating='true'][data-side='right'] {
51
- right: 8px;
60
+ right: 0;
61
+ border-top-left-radius: 12px;
62
+ border-bottom-left-radius: 12px;
63
+ box-shadow: -1px 0 0 rgba(28,40,64,0.04), -8px 0 16px -6px rgba(28,40,64,0.12), -8px 0 24px -4px rgba(24,41,75,0.16);
52
64
  }
53
65
  .seed-resizable-panel__panel[data-floating='true'][data-side='left'][data-state='open'] {
54
66
  animation: seed-enter;
55
67
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
56
68
  animation-duration: 0.18s;
57
- --seed-enter-translate-x: calc(-100% - 8px);
69
+ --seed-enter-translate-x: -100%;
58
70
  --seed-enter-translate-y: 0;
59
71
  --seed-enter-opacity: 0;
60
72
  --seed-enter-scale: 1;
@@ -69,7 +81,7 @@
69
81
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
70
82
  animation-duration: 0.14s;
71
83
  animation-fill-mode: forwards;
72
- --seed-exit-translate-x: calc(-100% - 8px);
84
+ --seed-exit-translate-x: -100%;
73
85
  --seed-exit-translate-y: 0;
74
86
  --seed-exit-opacity: 0;
75
87
  --seed-exit-scale: 1;
@@ -83,7 +95,7 @@
83
95
  animation: seed-enter;
84
96
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
85
97
  animation-duration: 0.18s;
86
- --seed-enter-translate-x: calc(100% + 8px);
98
+ --seed-enter-translate-x: 100%;
87
99
  --seed-enter-translate-y: 0;
88
100
  --seed-enter-opacity: 0;
89
101
  --seed-enter-scale: 1;
@@ -98,7 +110,7 @@
98
110
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
99
111
  animation-duration: 0.14s;
100
112
  animation-fill-mode: forwards;
101
- --seed-exit-translate-x: calc(100% + 8px);
113
+ --seed-exit-translate-x: 100%;
102
114
  --seed-exit-translate-y: 0;
103
115
  --seed-exit-opacity: 0;
104
116
  --seed-exit-scale: 1;
@@ -111,6 +123,22 @@
111
123
  .seed-resizable-panel__inner {
112
124
  height: 100%;
113
125
  }
126
+ .seed-resizable-panel__backdrop {
127
+ position: absolute;
128
+ inset: 0;
129
+ z-index: 19;
130
+ pointer-events: auto;
131
+ background: rgba(15, 19, 32, 0.32);
132
+ opacity: 0;
133
+ transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1);
134
+ }
135
+ .seed-resizable-panel__backdrop[data-state='open'] {
136
+ opacity: 1;
137
+ transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
138
+ }
139
+ .seed-resizable-panel__backdrop[data-state='closed'] {
140
+ opacity: 0;
141
+ }
114
142
  .seed-resizable-panel__handle {
115
143
  position: absolute;
116
144
  top: 0;
@@ -5,6 +5,14 @@
5
5
  position: relative;
6
6
  }
7
7
 
8
+ .seed-resizable-panel__root[data-floating="true"] {
9
+ pointer-events: none;
10
+ height: auto;
11
+ display: block;
12
+ position: absolute;
13
+ inset: 0;
14
+ }
15
+
8
16
  .seed-resizable-panel__spacer {
9
17
  flex: none;
10
18
  height: 100%;
@@ -43,26 +51,31 @@
43
51
 
44
52
  .seed-resizable-panel__panel[data-floating="true"] {
45
53
  z-index: 20;
54
+ pointer-events: auto;
46
55
  opacity: 1;
47
56
  border-inline: none;
48
- border-radius: 12px;
49
57
  position: absolute;
50
- top: 8px;
51
- bottom: 8px;
58
+ top: 0;
59
+ bottom: 0;
52
60
  transform: none;
53
- box-shadow: 0 0 0 1px #1c28400a, 0 4px 8px -4px #1c28401f, 0 4px 12px -2px #18294b29;
54
61
  }
55
62
 
56
63
  .seed-resizable-panel__panel[data-floating="true"][data-side="left"] {
57
- left: 8px;
64
+ border-top-right-radius: 12px;
65
+ border-bottom-right-radius: 12px;
66
+ left: 0;
67
+ box-shadow: 1px 0 #1c28400a, 8px 0 16px -6px #1c28401f, 8px 0 24px -4px #18294b29;
58
68
  }
59
69
 
60
70
  .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
61
- right: 8px;
71
+ border-top-left-radius: 12px;
72
+ border-bottom-left-radius: 12px;
73
+ right: 0;
74
+ box-shadow: -1px 0 #1c28400a, -8px 0 16px -6px #1c28401f, -8px 0 24px -4px #18294b29;
62
75
  }
63
76
 
64
77
  .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="open"] {
65
- --seed-enter-translate-x: calc(-100% - 8px);
78
+ --seed-enter-translate-x: -100%;
66
79
  --seed-enter-translate-y: 0;
67
80
  --seed-enter-opacity: 0;
68
81
  --seed-enter-scale: 1;
@@ -76,7 +89,7 @@
76
89
  }
77
90
 
78
91
  .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="closed"] {
79
- --seed-exit-translate-x: calc(-100% - 8px);
92
+ --seed-exit-translate-x: -100%;
80
93
  --seed-exit-translate-y: 0;
81
94
  --seed-exit-opacity: 0;
82
95
  --seed-exit-scale: 1;
@@ -90,7 +103,7 @@
90
103
  }
91
104
 
92
105
  .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="open"] {
93
- --seed-enter-translate-x: calc(100% + 8px);
106
+ --seed-enter-translate-x: 100%;
94
107
  --seed-enter-translate-y: 0;
95
108
  --seed-enter-opacity: 0;
96
109
  --seed-enter-scale: 1;
@@ -104,7 +117,7 @@
104
117
  }
105
118
 
106
119
  .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="closed"] {
107
- --seed-exit-translate-x: calc(100% + 8px);
120
+ --seed-exit-translate-x: 100%;
108
121
  --seed-exit-translate-y: 0;
109
122
  --seed-exit-opacity: 0;
110
123
  --seed-exit-scale: 1;
@@ -121,6 +134,25 @@
121
134
  height: 100%;
122
135
  }
123
136
 
137
+ .seed-resizable-panel__backdrop {
138
+ z-index: 19;
139
+ pointer-events: auto;
140
+ opacity: 0;
141
+ background: #0f132052;
142
+ transition: opacity .16s cubic-bezier(.4, 0, 1, 1);
143
+ position: absolute;
144
+ inset: 0;
145
+ }
146
+
147
+ .seed-resizable-panel__backdrop[data-state="open"] {
148
+ opacity: 1;
149
+ transition-timing-function: cubic-bezier(.16, 1, .3, 1);
150
+ }
151
+
152
+ .seed-resizable-panel__backdrop[data-state="closed"] {
153
+ opacity: 0;
154
+ }
155
+
124
156
  .seed-resizable-panel__handle {
125
157
  z-index: 2;
126
158
  cursor: col-resize;
package/dist/styles.css CHANGED
@@ -4937,6 +4937,7 @@ tbody tr:last-child .seed-data-table__cell {
4937
4937
  align-items: center;
4938
4938
  gap: 6px;
4939
4939
  margin-inline-start: auto;
4940
+ transition: opacity .15s;
4940
4941
  display: flex;
4941
4942
  }
4942
4943
 
@@ -4956,8 +4957,9 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
4956
4957
  justify-content: center;
4957
4958
  align-items: center;
4958
4959
  margin: 0;
4959
- padding: 0;
4960
+ padding: 2px;
4960
4961
  font-family: inherit;
4962
+ transition: background-color .2s, color .2s, box-shadow .2s;
4961
4963
  display: inline-flex;
4962
4964
  }
4963
4965
 
@@ -10285,12 +10287,39 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
10285
10287
  display: flex;
10286
10288
  }
10287
10289
 
10290
+ .seed-record-preview__tabsRoot {
10291
+ flex-direction: column;
10292
+ flex: 1;
10293
+ min-height: 0;
10294
+ display: flex;
10295
+ overflow: hidden;
10296
+ }
10297
+
10298
+ .seed-record-preview__tabPanel {
10299
+ flex: 1;
10300
+ min-height: 0;
10301
+ padding: 8px 12px;
10302
+ overflow-y: auto;
10303
+ }
10304
+
10305
+ .seed-record-preview__tabBadge {
10306
+ margin-inline-start: 6px;
10307
+ }
10308
+
10288
10309
  .seed-resizable-panel__root {
10289
10310
  height: 100%;
10290
10311
  display: flex;
10291
10312
  position: relative;
10292
10313
  }
10293
10314
 
10315
+ .seed-resizable-panel__root[data-floating="true"] {
10316
+ pointer-events: none;
10317
+ height: auto;
10318
+ display: block;
10319
+ position: absolute;
10320
+ inset: 0;
10321
+ }
10322
+
10294
10323
  .seed-resizable-panel__spacer {
10295
10324
  flex: none;
10296
10325
  height: 100%;
@@ -10329,26 +10358,31 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
10329
10358
 
10330
10359
  .seed-resizable-panel__panel[data-floating="true"] {
10331
10360
  z-index: 20;
10361
+ pointer-events: auto;
10332
10362
  opacity: 1;
10333
10363
  border-inline: none;
10334
- border-radius: 12px;
10335
10364
  position: absolute;
10336
- top: 8px;
10337
- bottom: 8px;
10365
+ top: 0;
10366
+ bottom: 0;
10338
10367
  transform: none;
10339
- box-shadow: 0 0 0 1px #1c28400a, 0 4px 8px -4px #1c28401f, 0 4px 12px -2px #18294b29;
10340
10368
  }
10341
10369
 
10342
10370
  .seed-resizable-panel__panel[data-floating="true"][data-side="left"] {
10343
- left: 8px;
10371
+ border-top-right-radius: 12px;
10372
+ border-bottom-right-radius: 12px;
10373
+ left: 0;
10374
+ box-shadow: 1px 0 #1c28400a, 8px 0 16px -6px #1c28401f, 8px 0 24px -4px #18294b29;
10344
10375
  }
10345
10376
 
10346
10377
  .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
10347
- right: 8px;
10378
+ border-top-left-radius: 12px;
10379
+ border-bottom-left-radius: 12px;
10380
+ right: 0;
10381
+ box-shadow: -1px 0 #1c28400a, -8px 0 16px -6px #1c28401f, -8px 0 24px -4px #18294b29;
10348
10382
  }
10349
10383
 
10350
10384
  .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="open"] {
10351
- --seed-enter-translate-x: calc(-100% - 8px);
10385
+ --seed-enter-translate-x: -100%;
10352
10386
  --seed-enter-translate-y: 0;
10353
10387
  --seed-enter-opacity: 0;
10354
10388
  --seed-enter-scale: 1;
@@ -10362,7 +10396,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
10362
10396
  }
10363
10397
 
10364
10398
  .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="closed"] {
10365
- --seed-exit-translate-x: calc(-100% - 8px);
10399
+ --seed-exit-translate-x: -100%;
10366
10400
  --seed-exit-translate-y: 0;
10367
10401
  --seed-exit-opacity: 0;
10368
10402
  --seed-exit-scale: 1;
@@ -10376,7 +10410,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
10376
10410
  }
10377
10411
 
10378
10412
  .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="open"] {
10379
- --seed-enter-translate-x: calc(100% + 8px);
10413
+ --seed-enter-translate-x: 100%;
10380
10414
  --seed-enter-translate-y: 0;
10381
10415
  --seed-enter-opacity: 0;
10382
10416
  --seed-enter-scale: 1;
@@ -10390,7 +10424,7 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
10390
10424
  }
10391
10425
 
10392
10426
  .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="closed"] {
10393
- --seed-exit-translate-x: calc(100% + 8px);
10427
+ --seed-exit-translate-x: 100%;
10394
10428
  --seed-exit-translate-y: 0;
10395
10429
  --seed-exit-opacity: 0;
10396
10430
  --seed-exit-scale: 1;
@@ -10407,6 +10441,25 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
10407
10441
  height: 100%;
10408
10442
  }
10409
10443
 
10444
+ .seed-resizable-panel__backdrop {
10445
+ z-index: 19;
10446
+ pointer-events: auto;
10447
+ opacity: 0;
10448
+ background: #0f132052;
10449
+ transition: opacity .16s cubic-bezier(.4, 0, 1, 1);
10450
+ position: absolute;
10451
+ inset: 0;
10452
+ }
10453
+
10454
+ .seed-resizable-panel__backdrop[data-state="open"] {
10455
+ opacity: 1;
10456
+ transition-timing-function: cubic-bezier(.16, 1, .3, 1);
10457
+ }
10458
+
10459
+ .seed-resizable-panel__backdrop[data-state="closed"] {
10460
+ opacity: 0;
10461
+ }
10462
+
10410
10463
  .seed-resizable-panel__handle {
10411
10464
  z-index: 2;
10412
10465
  cursor: col-resize;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crispy-seed/data-table",
3
- "version": "0.8.0",
3
+ "version": "0.9.0",
4
4
  "description": "Self-contained, publishable build of seed-design's Attio-measured DataTable, ResizablePanel and RecordPreview — one install, one CSS import.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -37,7 +37,7 @@
37
37
  "NOTICE"
38
38
  ],
39
39
  "scripts": {
40
- "build": "bunchee --dts-bundle --external @seed-design/css/recipes/avatar,@seed-design/css/recipes/avatar-stack,@seed-design/css/recipes/badge,@seed-design/css/recipes/checkbox,@seed-design/css/recipes/checkbox-group,@seed-design/css/recipes/checkmark,@seed-design/css/recipes/menu,@seed-design/css/recipes/menu-item,@seed-design/css/recipes/segmented-control,@seed-design/css/recipes/select,@seed-design/css/recipes/select-item,@seed-design/css/recipes/select-trigger,@seed-design/css/recipes/switch,@seed-design/css/recipes/switchmark,@seed-design/css/recipes/text-input && node scripts/copy-css.mjs",
40
+ "build": "bunchee --dts-bundle --external @seed-design/css/recipes/avatar,@seed-design/css/recipes/avatar-stack,@seed-design/css/recipes/badge,@seed-design/css/recipes/checkbox,@seed-design/css/recipes/checkbox-group,@seed-design/css/recipes/checkmark,@seed-design/css/recipes/menu,@seed-design/css/recipes/menu-item,@seed-design/css/recipes/segmented-control,@seed-design/css/recipes/select,@seed-design/css/recipes/select-item,@seed-design/css/recipes/select-trigger,@seed-design/css/recipes/switch,@seed-design/css/recipes/switchmark,@seed-design/css/recipes/tabs,@seed-design/css/recipes/text-input && node scripts/copy-css.mjs",
41
41
  "clean": "rm -rf dist"
42
42
  },
43
43
  "peerDependencies": {
@@ -69,6 +69,7 @@
69
69
  "@seed-design/react-segmented-control": "^2.0.2",
70
70
  "@seed-design/react-select": "^1.0.1",
71
71
  "@seed-design/react-switch": "^2.0.1",
72
+ "@seed-design/react-tabs": "^2.0.1",
72
73
  "@seed-design/react-text-field": "^2.0.1",
73
74
  "@types/react": "^19.2.2",
74
75
  "@types/react-dom": "^19.2.1",