@crispy-seed/data-table 0.7.0 → 0.8.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.
Files changed (7) hide show
  1. package/dist/index.cjs +467 -116
  2. package/dist/index.d.ts +84 -25
  3. package/dist/index.js +467 -116
  4. package/dist/resizable-panel-recipe.css +62 -22
  5. package/dist/resizable-panel-recipe.layered.css +55 -21
  6. package/dist/styles.css +55 -21
  7. package/package.json +2 -1
package/dist/resizable-panel-recipe.css CHANGED
@@ -33,43 +33,83 @@
33
33
  border-inline-start: 1px solid var(--seed-color-stroke-neutral-muted);
34
34
  }
35
35
  .seed-resizable-panel__panel[data-floating='true'] {
36
- position: fixed;
36
+ position: absolute;
37
37
  top: 8px;
38
38
  bottom: 8px;
39
+ z-index: 20;
39
40
  border-inline-end: none;
40
41
  border-inline-start: none;
41
- border-radius: 10px;
42
- box-shadow: inset 0 0 0 1px rgba(0,0,0,0), 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);
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);
43
44
  transform: none;
44
- transition: transform 0.14s, padding 0.14s;
45
+ opacity: 1;
45
46
  }
46
47
  .seed-resizable-panel__panel[data-floating='true'][data-side='left'] {
47
- padding: 8px 0 8px 8px;
48
+ left: 8px;
48
49
  }
49
- @starting-style {
50
- .seed-resizable-panel__panel[data-floating='true'][data-side='left'] {
51
- transform: translateX(calc(-100% - 8px));
50
+ .seed-resizable-panel__panel[data-floating='true'][data-side='right'] {
51
+ right: 8px;
52
+ }
53
+ .seed-resizable-panel__panel[data-floating='true'][data-side='left'][data-state='open'] {
54
+ animation: seed-enter;
55
+ animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
56
+ animation-duration: 0.18s;
57
+ --seed-enter-translate-x: calc(-100% - 8px);
58
+ --seed-enter-translate-y: 0;
59
+ --seed-enter-opacity: 0;
60
+ --seed-enter-scale: 1;
61
+ }
62
+ @media (prefers-reduced-motion: reduce) {
63
+ .seed-resizable-panel__panel[data-floating='true'][data-side='left'][data-state='open'] {
64
+ --seed-enter-translate-x: 0;
52
65
  }
53
66
  }
54
- .seed-resizable-panel__panel[data-floating='true'][data-side='right'] {
55
- padding: 8px 8px 8px 0;
67
+ .seed-resizable-panel__panel[data-floating='true'][data-side='left'][data-state='closed'] {
68
+ animation: seed-exit;
69
+ animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
70
+ animation-duration: 0.14s;
71
+ animation-fill-mode: forwards;
72
+ --seed-exit-translate-x: calc(-100% - 8px);
73
+ --seed-exit-translate-y: 0;
74
+ --seed-exit-opacity: 0;
75
+ --seed-exit-scale: 1;
76
+ }
77
+ @media (prefers-reduced-motion: reduce) {
78
+ .seed-resizable-panel__panel[data-floating='true'][data-side='left'][data-state='closed'] {
79
+ --seed-exit-translate-x: 0;
80
+ }
56
81
  }
57
- @starting-style {
58
- .seed-resizable-panel__panel[data-floating='true'][data-side='right'] {
59
- transform: translateX(calc(100% + 8px));
82
+ .seed-resizable-panel__panel[data-floating='true'][data-side='right'][data-state='open'] {
83
+ animation: seed-enter;
84
+ animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
85
+ animation-duration: 0.18s;
86
+ --seed-enter-translate-x: calc(100% + 8px);
87
+ --seed-enter-translate-y: 0;
88
+ --seed-enter-opacity: 0;
89
+ --seed-enter-scale: 1;
90
+ }
91
+ @media (prefers-reduced-motion: reduce) {
92
+ .seed-resizable-panel__panel[data-floating='true'][data-side='right'][data-state='open'] {
93
+ --seed-enter-translate-x: 0;
94
+ }
95
+ }
96
+ .seed-resizable-panel__panel[data-floating='true'][data-side='right'][data-state='closed'] {
97
+ animation: seed-exit;
98
+ animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
99
+ animation-duration: 0.14s;
100
+ animation-fill-mode: forwards;
101
+ --seed-exit-translate-x: calc(100% + 8px);
102
+ --seed-exit-translate-y: 0;
103
+ --seed-exit-opacity: 0;
104
+ --seed-exit-scale: 1;
105
+ }
106
+ @media (prefers-reduced-motion: reduce) {
107
+ .seed-resizable-panel__panel[data-floating='true'][data-side='right'][data-state='closed'] {
108
+ --seed-exit-translate-x: 0;
60
109
  }
61
110
  }
62
111
  .seed-resizable-panel__inner {
63
112
  height: 100%;
64
- opacity: 1;
65
- }
66
- [data-floating='true'] > .seed-resizable-panel__inner {
67
- transition: opacity 0.14s;
68
- }
69
- @starting-style {
70
- [data-floating='true'] > .seed-resizable-panel__inner {
71
- opacity: 0;
72
- }
73
113
  }
74
114
  .seed-resizable-panel__handle {
75
115
  position: absolute;
package/dist/resizable-panel-recipe.layered.css CHANGED
@@ -42,51 +42,85 @@
42
42
  }
43
43
 
44
44
  .seed-resizable-panel__panel[data-floating="true"] {
45
+ z-index: 20;
46
+ opacity: 1;
45
47
  border-inline: none;
46
- border-radius: 10px;
47
- transition: transform .14s, padding .14s;
48
- position: fixed;
48
+ border-radius: 12px;
49
+ position: absolute;
49
50
  top: 8px;
50
51
  bottom: 8px;
51
52
  transform: none;
52
- box-shadow: inset 0 0 0 1px #0000, 0 0 0 1px #1c28400a, 0 4px 8px -4px #1c28401f, 0 4px 12px -2px #18294b29;
53
+ box-shadow: 0 0 0 1px #1c28400a, 0 4px 8px -4px #1c28401f, 0 4px 12px -2px #18294b29;
53
54
  }
54
55
 
55
56
  .seed-resizable-panel__panel[data-floating="true"][data-side="left"] {
56
- padding: 8px 0 8px 8px;
57
+ left: 8px;
58
+ }
59
+
60
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
61
+ right: 8px;
57
62
  }
58
63
 
59
- @starting-style {
60
- .seed-resizable-panel__panel[data-floating="true"][data-side="left"] {
61
- transform: translateX(calc(-100% - 8px));
64
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="open"] {
65
+ --seed-enter-translate-x: calc(-100% - 8px);
66
+ --seed-enter-translate-y: 0;
67
+ --seed-enter-opacity: 0;
68
+ --seed-enter-scale: 1;
69
+ animation: .18s cubic-bezier(.16, 1, .3, 1) seed-enter;
70
+ }
71
+
72
+ @media (prefers-reduced-motion: reduce) {
73
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="open"] {
74
+ --seed-enter-translate-x: 0;
62
75
  }
63
76
  }
64
77
 
65
- .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
66
- padding: 8px 8px 8px 0;
78
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="closed"] {
79
+ --seed-exit-translate-x: calc(-100% - 8px);
80
+ --seed-exit-translate-y: 0;
81
+ --seed-exit-opacity: 0;
82
+ --seed-exit-scale: 1;
83
+ animation: .14s cubic-bezier(.4, 0, 1, 1) forwards seed-exit;
67
84
  }
68
85
 
69
- @starting-style {
70
- .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
71
- transform: translateX(calc(100% + 8px));
86
+ @media (prefers-reduced-motion: reduce) {
87
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="closed"] {
88
+ --seed-exit-translate-x: 0;
72
89
  }
73
90
  }
74
91
 
75
- .seed-resizable-panel__inner {
76
- opacity: 1;
77
- height: 100%;
92
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="open"] {
93
+ --seed-enter-translate-x: calc(100% + 8px);
94
+ --seed-enter-translate-y: 0;
95
+ --seed-enter-opacity: 0;
96
+ --seed-enter-scale: 1;
97
+ animation: .18s cubic-bezier(.16, 1, .3, 1) seed-enter;
98
+ }
99
+
100
+ @media (prefers-reduced-motion: reduce) {
101
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="open"] {
102
+ --seed-enter-translate-x: 0;
103
+ }
78
104
  }
79
105
 
80
- [data-floating="true"] > .seed-resizable-panel__inner {
81
- transition: opacity .14s;
106
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="closed"] {
107
+ --seed-exit-translate-x: calc(100% + 8px);
108
+ --seed-exit-translate-y: 0;
109
+ --seed-exit-opacity: 0;
110
+ --seed-exit-scale: 1;
111
+ animation: .14s cubic-bezier(.4, 0, 1, 1) forwards seed-exit;
82
112
  }
83
113
 
84
- @starting-style {
85
- [data-floating="true"] > .seed-resizable-panel__inner {
86
- opacity: 0;
114
+ @media (prefers-reduced-motion: reduce) {
115
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="closed"] {
116
+ --seed-exit-translate-x: 0;
87
117
  }
88
118
  }
89
119
 
120
+ .seed-resizable-panel__inner {
121
+ height: 100%;
122
+ }
123
+
90
124
  .seed-resizable-panel__handle {
91
125
  z-index: 2;
92
126
  cursor: col-resize;
package/dist/styles.css CHANGED
@@ -10328,51 +10328,85 @@ tr:hover .seed-data-table__entityActions, .seed-data-table__entityActions:focus-
10328
10328
  }
10329
10329
 
10330
10330
  .seed-resizable-panel__panel[data-floating="true"] {
10331
+ z-index: 20;
10332
+ opacity: 1;
10331
10333
  border-inline: none;
10332
- border-radius: 10px;
10333
- transition: transform .14s, padding .14s;
10334
- position: fixed;
10334
+ border-radius: 12px;
10335
+ position: absolute;
10335
10336
  top: 8px;
10336
10337
  bottom: 8px;
10337
10338
  transform: none;
10338
- box-shadow: inset 0 0 0 1px #0000, 0 0 0 1px #1c28400a, 0 4px 8px -4px #1c28401f, 0 4px 12px -2px #18294b29;
10339
+ box-shadow: 0 0 0 1px #1c28400a, 0 4px 8px -4px #1c28401f, 0 4px 12px -2px #18294b29;
10339
10340
  }
10340
10341
 
10341
10342
  .seed-resizable-panel__panel[data-floating="true"][data-side="left"] {
10342
- padding: 8px 0 8px 8px;
10343
+ left: 8px;
10344
+ }
10345
+
10346
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
10347
+ right: 8px;
10343
10348
  }
10344
10349
 
10345
- @starting-style {
10346
- .seed-resizable-panel__panel[data-floating="true"][data-side="left"] {
10347
- transform: translateX(calc(-100% - 8px));
10350
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="open"] {
10351
+ --seed-enter-translate-x: calc(-100% - 8px);
10352
+ --seed-enter-translate-y: 0;
10353
+ --seed-enter-opacity: 0;
10354
+ --seed-enter-scale: 1;
10355
+ animation: .18s cubic-bezier(.16, 1, .3, 1) seed-enter;
10356
+ }
10357
+
10358
+ @media (prefers-reduced-motion: reduce) {
10359
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="open"] {
10360
+ --seed-enter-translate-x: 0;
10348
10361
  }
10349
10362
  }
10350
10363
 
10351
- .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
10352
- padding: 8px 8px 8px 0;
10364
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="closed"] {
10365
+ --seed-exit-translate-x: calc(-100% - 8px);
10366
+ --seed-exit-translate-y: 0;
10367
+ --seed-exit-opacity: 0;
10368
+ --seed-exit-scale: 1;
10369
+ animation: .14s cubic-bezier(.4, 0, 1, 1) forwards seed-exit;
10353
10370
  }
10354
10371
 
10355
- @starting-style {
10356
- .seed-resizable-panel__panel[data-floating="true"][data-side="right"] {
10357
- transform: translateX(calc(100% + 8px));
10372
+ @media (prefers-reduced-motion: reduce) {
10373
+ .seed-resizable-panel__panel[data-floating="true"][data-side="left"][data-state="closed"] {
10374
+ --seed-exit-translate-x: 0;
10358
10375
  }
10359
10376
  }
10360
10377
 
10361
- .seed-resizable-panel__inner {
10362
- opacity: 1;
10363
- height: 100%;
10378
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="open"] {
10379
+ --seed-enter-translate-x: calc(100% + 8px);
10380
+ --seed-enter-translate-y: 0;
10381
+ --seed-enter-opacity: 0;
10382
+ --seed-enter-scale: 1;
10383
+ animation: .18s cubic-bezier(.16, 1, .3, 1) seed-enter;
10364
10384
  }
10365
10385
 
10366
- [data-floating="true"] > .seed-resizable-panel__inner {
10367
- transition: opacity .14s;
10386
+ @media (prefers-reduced-motion: reduce) {
10387
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="open"] {
10388
+ --seed-enter-translate-x: 0;
10389
+ }
10368
10390
  }
10369
10391
 
10370
- @starting-style {
10371
- [data-floating="true"] > .seed-resizable-panel__inner {
10372
- opacity: 0;
10392
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="closed"] {
10393
+ --seed-exit-translate-x: calc(100% + 8px);
10394
+ --seed-exit-translate-y: 0;
10395
+ --seed-exit-opacity: 0;
10396
+ --seed-exit-scale: 1;
10397
+ animation: .14s cubic-bezier(.4, 0, 1, 1) forwards seed-exit;
10398
+ }
10399
+
10400
+ @media (prefers-reduced-motion: reduce) {
10401
+ .seed-resizable-panel__panel[data-floating="true"][data-side="right"][data-state="closed"] {
10402
+ --seed-exit-translate-x: 0;
10373
10403
  }
10374
10404
  }
10375
10405
 
10406
+ .seed-resizable-panel__inner {
10407
+ height: 100%;
10408
+ }
10409
+
10376
10410
  .seed-resizable-panel__handle {
10377
10411
  z-index: 2;
10378
10412
  cursor: col-resize;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crispy-seed/data-table",
3
- "version": "0.7.0",
3
+ "version": "0.8.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",
@@ -62,6 +62,7 @@
62
62
  "@seed-design/react-field": "^2.0.1",
63
63
  "@seed-design/react-image": "^1.1.0",
64
64
  "@seed-design/react-menu": "^2.0.2",
65
+ "@seed-design/react-presence": "^1.0.1",
65
66
  "@seed-design/react-primitive": "^2.0.1",
66
67
  "@seed-design/react-resizable-panel": "^0.1.0",
67
68
  "@seed-design/react-scale-feedback": "^1.0.0",