@crispy-seed/data-table 0.10.2 → 0.10.4

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/data-table-recipe.css +37 -4
  2. package/dist/data-table-recipe.layered.css +43 -5
  3. package/dist/index.cjs +475 -97
  4. package/dist/index.d.ts +42 -42
  5. package/dist/index.js +475 -97
  6. package/dist/styles.css +43 -5
  7. package/package.json +1 -1
package/dist/data-table-recipe.css CHANGED
@@ -174,6 +174,9 @@
174
174
  text-overflow: ellipsis;
175
175
  white-space: nowrap;
176
176
  }
177
+ .seed-data-table__cell:not([data-editable]) {
178
+ user-select: none;
179
+ }
177
180
  .seed-data-table__cell:last-child {
178
181
  border-inline-end: none;
179
182
  }
@@ -189,6 +192,10 @@ tbody tr:last-child .seed-data-table__cell {
189
192
  z-index: 1;
190
193
  background-color: var(--seed-data-table-row-bg);
191
194
  }
195
+ .seed-data-table__cell[data-overlay-open] {
196
+ overflow: visible;
197
+ z-index: 20;
198
+ }
192
199
  .seed-data-table__cell[data-editable] {
193
200
  cursor: default;
194
201
  }
@@ -295,20 +302,45 @@ tr:hover .seed-data-table__entityActions {
295
302
  border-radius: 7px;
296
303
  font-size: 10px;
297
304
  font-weight: var(--seed-font-weight-regular);
298
- line-height: 22px;
305
+ line-height: 15px;
299
306
  overflow: clip;
300
307
  text-overflow: ellipsis;
301
308
  white-space: nowrap;
302
309
  }
303
310
  .seed-data-table__chipList {
311
+ position: relative;
304
312
  display: flex;
305
313
  align-items: center;
306
314
  flex-wrap: nowrap;
307
- gap: var(--seed-dimension-x1_5);
315
+ gap: 3px;
308
316
  overflow: hidden;
309
317
  min-width: 0;
310
318
  width: 100%;
311
319
  }
320
+ .seed-data-table__chipOverflow {
321
+ box-sizing: border-box;
322
+ display: inline-flex;
323
+ align-items: center;
324
+ justify-content: center;
325
+ flex-shrink: 0;
326
+ height: 20px;
327
+ padding: 0 4px;
328
+ border-radius: 6px;
329
+ background-color: #f6f7f7;
330
+ color: #000000;
331
+ font-size: 10px;
332
+ font-weight: var(--seed-font-weight-regular);
333
+ line-height: 15px;
334
+ white-space: nowrap;
335
+ }
336
+ .seed-data-table__chipListEditor {
337
+ display: flex;
338
+ align-items: center;
339
+ flex-wrap: wrap;
340
+ gap: 3px;
341
+ min-width: 0;
342
+ width: 100%;
343
+ }
312
344
  .seed-data-table__chipRemove {
313
345
  box-sizing: border-box;
314
346
  display: inline-flex;
@@ -359,8 +391,9 @@ tr:hover .seed-data-table__entityActions {
359
391
  padding-inline: var(--seed-dimension-x3);
360
392
  padding-block: var(--seed-dimension-x3);
361
393
  background-color: var(--seed-color-bg-layer-floating);
362
- border-radius: var(--seed-radius-r5);
363
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak), var(--seed-shadow-s3);
394
+ border-radius: 4px;
395
+ box-shadow: none;
396
+ border: 1px solid #266df0;
364
397
  color: var(--seed-color-fg-neutral);
365
398
  font-size: var(--seed-font-size-t4);
366
399
  line-height: var(--seed-line-height-t4);
package/dist/data-table-recipe.layered.css CHANGED
@@ -198,6 +198,11 @@
198
198
  overflow: clip;
199
199
  }
200
200
 
201
+ .seed-data-table__cell:not([data-editable]) {
202
+ -webkit-user-select: none;
203
+ user-select: none;
204
+ }
205
+
201
206
  .seed-data-table__cell:last-child {
202
207
  border-inline-end: none;
203
208
  }
@@ -217,6 +222,11 @@
217
222
  position: sticky;
218
223
  }
219
224
 
225
+ .seed-data-table__cell[data-overlay-open] {
226
+ z-index: 20;
227
+ overflow: visible;
228
+ }
229
+
220
230
  .seed-data-table__cell[data-editable] {
221
231
  cursor: default;
222
232
  }
@@ -334,21 +344,48 @@
334
344
  flex-shrink: 0;
335
345
  align-items: center;
336
346
  padding: 0 4px;
337
- line-height: 22px;
347
+ line-height: 15px;
338
348
  display: inline-flex;
339
349
  overflow: clip;
340
350
  }
341
351
 
342
352
  .seed-data-table__chipList {
343
- align-items: center;
344
- gap: var(--seed-dimension-x1_5);
345
353
  flex-wrap: nowrap;
354
+ align-items: center;
355
+ gap: 3px;
346
356
  width: 100%;
347
357
  min-width: 0;
348
358
  display: flex;
359
+ position: relative;
349
360
  overflow: hidden;
350
361
  }
351
362
 
363
+ .seed-data-table__chipOverflow {
364
+ box-sizing: border-box;
365
+ color: #000;
366
+ height: 20px;
367
+ font-size: 10px;
368
+ font-weight: var(--seed-font-weight-regular);
369
+ white-space: nowrap;
370
+ background-color: #f6f7f7;
371
+ border-radius: 6px;
372
+ flex-shrink: 0;
373
+ justify-content: center;
374
+ align-items: center;
375
+ padding: 0 4px;
376
+ line-height: 15px;
377
+ display: inline-flex;
378
+ }
379
+
380
+ .seed-data-table__chipListEditor {
381
+ flex-wrap: wrap;
382
+ align-items: center;
383
+ gap: 3px;
384
+ width: 100%;
385
+ min-width: 0;
386
+ display: flex;
387
+ }
388
+
352
389
  .seed-data-table__chipRemove {
353
390
  box-sizing: border-box;
354
391
  width: 12px;
@@ -397,13 +434,14 @@
397
434
  padding-inline: var(--seed-dimension-x3);
398
435
  padding-block: var(--seed-dimension-x3);
399
436
  background-color: var(--seed-color-bg-layer-floating);
400
- border-radius: var(--seed-radius-r5);
401
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak), var(--seed-shadow-s3);
437
+ box-shadow: none;
402
438
  color: var(--seed-color-fg-neutral);
403
439
  font-size: var(--seed-font-size-t4);
404
440
  line-height: var(--seed-line-height-t4);
405
441
  letter-spacing: -.14px;
406
442
  cursor: default;
443
+ border: 1px solid #266df0;
444
+ border-radius: 4px;
407
445
  align-items: flex-start;
408
446
  display: flex;
409
447
  position: absolute;