@crispy-seed/data-table 0.9.0 → 0.10.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.
Files changed (7) hide show
  1. package/dist/data-table-recipe.css +109 -0
  2. package/dist/data-table-recipe.layered.css +118 -0
  3. package/dist/index.cjs +497 -35
  4. package/dist/index.d.ts +9 -1
  5. package/dist/index.js +498 -36
  6. package/dist/styles.css +118 -0
  7. package/package.json +1 -1
package/dist/data-table-recipe.css CHANGED
@@ -284,6 +284,115 @@ tr:hover .seed-data-table__entityActions {
284
284
  .seed-data-table__link:is(:hover, [data-hover]) {
285
285
  text-decoration: underline;
286
286
  }
287
+ .seed-data-table__chip {
288
+ box-sizing: border-box;
289
+ display: inline-flex;
290
+ align-items: center;
291
+ flex-shrink: 0;
292
+ max-width: 100%;
293
+ height: 22px;
294
+ padding: 0 4px;
295
+ border-radius: 7px;
296
+ font-size: 10px;
297
+ font-weight: var(--seed-font-weight-regular);
298
+ line-height: 22px;
299
+ overflow: clip;
300
+ text-overflow: ellipsis;
301
+ white-space: nowrap;
302
+ }
303
+ .seed-data-table__chipList {
304
+ display: flex;
305
+ align-items: center;
306
+ flex-wrap: nowrap;
307
+ gap: var(--seed-dimension-x1_5);
308
+ overflow: hidden;
309
+ min-width: 0;
310
+ width: 100%;
311
+ }
312
+ .seed-data-table__chipRemove {
313
+ box-sizing: border-box;
314
+ display: inline-flex;
315
+ align-items: center;
316
+ justify-content: center;
317
+ flex-shrink: 0;
318
+ width: 12px;
319
+ height: 12px;
320
+ margin: 0;
321
+ margin-inline-start: 2px;
322
+ padding: 0;
323
+ border: none;
324
+ border-radius: 999px;
325
+ background: none;
326
+ color: inherit;
327
+ opacity: 0.6;
328
+ cursor: pointer;
329
+ transition: opacity .12s, background-color .12s;
330
+ }
331
+ .seed-data-table__chipRemove:hover {
332
+ opacity: 1;
333
+ background-color: rgba(0, 0, 0, 0.08);
334
+ }
335
+ .seed-data-table__chipInput {
336
+ flex: 1 1 auto;
337
+ min-width: 40px;
338
+ height: 22px;
339
+ margin: 0;
340
+ padding: 0;
341
+ border: none;
342
+ outline: none;
343
+ background: none;
344
+ font-family: inherit;
345
+ font-size: var(--seed-font-size-t4);
346
+ color: var(--seed-color-fg-neutral);
347
+ letter-spacing: -0.14px;
348
+ }
349
+ .seed-data-table__expandOverlay {
350
+ box-sizing: border-box;
351
+ position: absolute;
352
+ top: -1px;
353
+ inset-inline-start: -1px;
354
+ inset-inline-end: -1px;
355
+ z-index: 10;
356
+ min-height: calc(100% + 2px);
357
+ display: flex;
358
+ align-items: flex-start;
359
+ padding-inline: var(--seed-dimension-x3);
360
+ padding-block: var(--seed-dimension-x3);
361
+ 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);
364
+ color: var(--seed-color-fg-neutral);
365
+ font-size: var(--seed-font-size-t4);
366
+ line-height: var(--seed-line-height-t4);
367
+ letter-spacing: -0.14px;
368
+ cursor: default;
369
+ }
370
+ .seed-data-table__expandOverlayText {
371
+ width: 100%;
372
+ min-width: 0;
373
+ white-space: normal;
374
+ word-break: break-word;
375
+ }
376
+ .seed-data-table__cellSuffixRow {
377
+ display: flex;
378
+ align-items: center;
379
+ gap: 4px;
380
+ min-width: 0;
381
+ width: 100%;
382
+ }
383
+ .seed-data-table__cellSuffixText {
384
+ flex: 1 1 0%;
385
+ min-width: 0;
386
+ overflow: clip;
387
+ text-overflow: ellipsis;
388
+ white-space: nowrap;
389
+ }
390
+ .seed-data-table__cellSuffixIcon {
391
+ flex-shrink: 0;
392
+ display: inline-flex;
393
+ align-items: center;
394
+ color: color-mix(in srgb, var(--seed-color-fg-neutral) 55%, transparent);
395
+ }
287
396
  .seed-data-table__toolbar {
288
397
  box-sizing: border-box;
289
398
  display: flex;
package/dist/data-table-recipe.layered.css CHANGED
@@ -322,6 +322,124 @@
322
322
  text-decoration: underline;
323
323
  }
324
324
 
325
+ .seed-data-table__chip {
326
+ box-sizing: border-box;
327
+ max-width: 100%;
328
+ height: 22px;
329
+ font-size: 10px;
330
+ font-weight: var(--seed-font-weight-regular);
331
+ text-overflow: ellipsis;
332
+ white-space: nowrap;
333
+ border-radius: 7px;
334
+ flex-shrink: 0;
335
+ align-items: center;
336
+ padding: 0 4px;
337
+ line-height: 22px;
338
+ display: inline-flex;
339
+ overflow: clip;
340
+ }
341
+
342
+ .seed-data-table__chipList {
343
+ align-items: center;
344
+ gap: var(--seed-dimension-x1_5);
345
+ flex-wrap: nowrap;
346
+ width: 100%;
347
+ min-width: 0;
348
+ display: flex;
349
+ overflow: hidden;
350
+ }
351
+
352
+ .seed-data-table__chipRemove {
353
+ box-sizing: border-box;
354
+ width: 12px;
355
+ height: 12px;
356
+ color: inherit;
357
+ opacity: .6;
358
+ cursor: pointer;
359
+ background: none;
360
+ border: none;
361
+ border-radius: 999px;
362
+ flex-shrink: 0;
363
+ justify-content: center;
364
+ align-items: center;
365
+ margin: 0;
366
+ margin-inline-start: 2px;
367
+ padding: 0;
368
+ transition: opacity .12s, background-color .12s;
369
+ display: inline-flex;
370
+ }
371
+
372
+ .seed-data-table__chipRemove:hover {
373
+ opacity: 1;
374
+ background-color: #00000014;
375
+ }
376
+
377
+ .seed-data-table__chipInput {
378
+ min-width: 40px;
379
+ height: 22px;
380
+ font-family: inherit;
381
+ font-size: var(--seed-font-size-t4);
382
+ color: var(--seed-color-fg-neutral);
383
+ letter-spacing: -.14px;
384
+ background: none;
385
+ border: none;
386
+ outline: none;
387
+ flex: auto;
388
+ margin: 0;
389
+ padding: 0;
390
+ }
391
+
392
+ .seed-data-table__expandOverlay {
393
+ box-sizing: border-box;
394
+ top: -1px;
395
+ z-index: 10;
396
+ min-height: calc(100% + 2px);
397
+ padding-inline: var(--seed-dimension-x3);
398
+ padding-block: var(--seed-dimension-x3);
399
+ 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);
402
+ color: var(--seed-color-fg-neutral);
403
+ font-size: var(--seed-font-size-t4);
404
+ line-height: var(--seed-line-height-t4);
405
+ letter-spacing: -.14px;
406
+ cursor: default;
407
+ align-items: flex-start;
408
+ display: flex;
409
+ position: absolute;
410
+ inset-inline: -1px;
411
+ }
412
+
413
+ .seed-data-table__expandOverlayText {
414
+ white-space: normal;
415
+ word-break: break-word;
416
+ width: 100%;
417
+ min-width: 0;
418
+ }
419
+
420
+ .seed-data-table__cellSuffixRow {
421
+ align-items: center;
422
+ gap: 4px;
423
+ width: 100%;
424
+ min-width: 0;
425
+ display: flex;
426
+ }
427
+
428
+ .seed-data-table__cellSuffixText {
429
+ text-overflow: ellipsis;
430
+ white-space: nowrap;
431
+ flex: 1;
432
+ min-width: 0;
433
+ overflow: clip;
434
+ }
435
+
436
+ .seed-data-table__cellSuffixIcon {
437
+ color: color-mix(in srgb, var(--seed-color-fg-neutral) 55%, transparent);
438
+ flex-shrink: 0;
439
+ align-items: center;
440
+ display: inline-flex;
441
+ }
442
+
325
443
  .seed-data-table__toolbar {
326
444
  box-sizing: border-box;
327
445
  align-items: center;