@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.2
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/dist/components/data-table/DataTable.d.ts +18 -277
- package/dist/components/data-table/DataTableBody.d.ts +4 -2
- package/dist/components/data-table/DataTableBody.js +1 -1
- package/dist/components/data-table/DataTableBody.js.map +1 -1
- package/dist/components/data-table/DataTableHeaderCell.js +1 -1
- package/dist/components/data-table/DataTableHeaderCell.js.map +1 -1
- package/dist/components/data-table/DataTableRow.d.ts +2 -1
- package/dist/components/data-table/DataTableRow.js +1 -1
- package/dist/components/data-table/DataTableRow.js.map +1 -1
- package/dist/components/data-table/DataTableTable.d.ts +2 -1
- package/dist/components/data-table/DataTableTable.js +1 -1
- package/dist/components/data-table/DataTableTable.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +2 -2
|
@@ -23,10 +23,19 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
23
23
|
* Can be configured with alternating colours of rows. If you need more customisation options,
|
|
24
24
|
* you can build your own implementation with `useDataTable()` and the UI-only `Table` components.
|
|
25
25
|
*/
|
|
26
|
-
Body: ({ striped, ...props }: {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
Body: ({ striped, rowAction, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
|
|
27
|
+
ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
|
|
28
|
+
}, "css" | "striped"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
|
|
29
|
+
striped?: boolean | "true" | "false" | undefined;
|
|
30
|
+
}, {
|
|
31
|
+
sm: string;
|
|
32
|
+
md: string;
|
|
33
|
+
lg: string;
|
|
34
|
+
xl: string;
|
|
35
|
+
reducedMotion: string;
|
|
36
|
+
allowMotion: string;
|
|
37
|
+
hover: string;
|
|
38
|
+
}> & {
|
|
30
39
|
css?: import("@atom-learning/stitches-react/types/css-util").CSS<{
|
|
31
40
|
sm: string;
|
|
32
41
|
md: string;
|
|
@@ -388,277 +397,8 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
388
397
|
marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
|
|
389
398
|
};
|
|
390
399
|
}> | undefined;
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
style?: import("react").CSSProperties | undefined;
|
|
394
|
-
title?: string | undefined;
|
|
395
|
-
ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
|
|
396
|
-
key?: import("react").Key | null | undefined;
|
|
397
|
-
defaultChecked?: boolean | undefined;
|
|
398
|
-
defaultValue?: string | number | readonly string[] | undefined;
|
|
399
|
-
suppressContentEditableWarning?: boolean | undefined;
|
|
400
|
-
suppressHydrationWarning?: boolean | undefined;
|
|
401
|
-
accessKey?: string | undefined;
|
|
402
|
-
autoFocus?: boolean | undefined;
|
|
403
|
-
className?: string | undefined;
|
|
404
|
-
contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
|
|
405
|
-
contextMenu?: string | undefined;
|
|
406
|
-
dir?: string | undefined;
|
|
407
|
-
draggable?: (boolean | "true" | "false") | undefined;
|
|
408
|
-
hidden?: boolean | undefined;
|
|
409
|
-
id?: string | undefined;
|
|
410
|
-
lang?: string | undefined;
|
|
411
|
-
nonce?: string | undefined;
|
|
412
|
-
placeholder?: string | undefined;
|
|
413
|
-
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
414
|
-
tabIndex?: number | undefined;
|
|
415
|
-
radioGroup?: string | undefined;
|
|
416
|
-
role?: import("react").AriaRole | undefined;
|
|
417
|
-
about?: string | undefined;
|
|
418
|
-
datatype?: string | undefined;
|
|
419
|
-
inlist?: any;
|
|
420
|
-
property?: string | undefined;
|
|
421
|
-
rel?: string | undefined;
|
|
422
|
-
resource?: string | undefined;
|
|
423
|
-
rev?: string | undefined;
|
|
424
|
-
typeof?: string | undefined;
|
|
425
|
-
vocab?: string | undefined;
|
|
426
|
-
autoCapitalize?: string | undefined;
|
|
427
|
-
autoCorrect?: string | undefined;
|
|
428
|
-
autoSave?: string | undefined;
|
|
429
|
-
itemProp?: string | undefined;
|
|
430
|
-
itemScope?: boolean | undefined;
|
|
431
|
-
itemType?: string | undefined;
|
|
432
|
-
itemID?: string | undefined;
|
|
433
|
-
itemRef?: string | undefined;
|
|
434
|
-
results?: number | undefined;
|
|
435
|
-
security?: string | undefined;
|
|
436
|
-
unselectable?: "on" | "off" | undefined;
|
|
437
|
-
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
|
|
438
|
-
is?: string | undefined;
|
|
439
|
-
"aria-activedescendant"?: string | undefined;
|
|
440
|
-
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
441
|
-
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
|
|
442
|
-
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
443
|
-
"aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
|
|
444
|
-
"aria-colcount"?: number | undefined;
|
|
445
|
-
"aria-colindex"?: number | undefined;
|
|
446
|
-
"aria-colspan"?: number | undefined;
|
|
447
|
-
"aria-controls"?: string | undefined;
|
|
448
|
-
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
|
|
449
|
-
"aria-describedby"?: string | undefined;
|
|
450
|
-
"aria-details"?: string | undefined;
|
|
451
|
-
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
452
|
-
"aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
|
|
453
|
-
"aria-errormessage"?: string | undefined;
|
|
454
|
-
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
455
|
-
"aria-flowto"?: string | undefined;
|
|
456
|
-
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
457
|
-
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
|
|
458
|
-
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
459
|
-
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
|
|
460
|
-
"aria-keyshortcuts"?: string | undefined;
|
|
461
|
-
"aria-label"?: string | undefined;
|
|
462
|
-
"aria-labelledby"?: string | undefined;
|
|
463
|
-
"aria-level"?: number | undefined;
|
|
464
|
-
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
465
|
-
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
466
|
-
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
467
|
-
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
468
|
-
"aria-orientation"?: "horizontal" | "vertical" | undefined;
|
|
469
|
-
"aria-owns"?: string | undefined;
|
|
470
|
-
"aria-placeholder"?: string | undefined;
|
|
471
|
-
"aria-posinset"?: number | undefined;
|
|
472
|
-
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
|
|
473
|
-
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
474
|
-
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
|
|
475
|
-
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
476
|
-
"aria-roledescription"?: string | undefined;
|
|
477
|
-
"aria-rowcount"?: number | undefined;
|
|
478
|
-
"aria-rowindex"?: number | undefined;
|
|
479
|
-
"aria-rowspan"?: number | undefined;
|
|
480
|
-
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
481
|
-
"aria-setsize"?: number | undefined;
|
|
482
|
-
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
483
|
-
"aria-valuemax"?: number | undefined;
|
|
484
|
-
"aria-valuemin"?: number | undefined;
|
|
485
|
-
"aria-valuenow"?: number | undefined;
|
|
486
|
-
"aria-valuetext"?: string | undefined;
|
|
487
|
-
dangerouslySetInnerHTML?: {
|
|
488
|
-
__html: string | TrustedHTML;
|
|
489
|
-
} | undefined;
|
|
490
|
-
onCopy?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
491
|
-
onCopyCapture?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
492
|
-
onCut?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
493
|
-
onCutCapture?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
494
|
-
onPaste?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
495
|
-
onPasteCapture?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
496
|
-
onCompositionEnd?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
|
|
497
|
-
onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
|
|
498
|
-
onCompositionStart?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
|
|
499
|
-
onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
|
|
500
|
-
onCompositionUpdate?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
|
|
501
|
-
onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
|
|
502
|
-
onFocus?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
|
|
503
|
-
onFocusCapture?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
|
|
504
|
-
onBlur?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
|
|
505
|
-
onBlurCapture?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
|
|
506
|
-
onChange?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
507
|
-
onChangeCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
508
|
-
onBeforeInput?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
509
|
-
onBeforeInputCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
510
|
-
onInput?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
511
|
-
onInputCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
512
|
-
onReset?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
513
|
-
onResetCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
514
|
-
onSubmit?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
515
|
-
onSubmitCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
516
|
-
onInvalid?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
517
|
-
onInvalidCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
|
|
518
|
-
onLoad?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
519
|
-
onLoadCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
520
|
-
onError?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
521
|
-
onErrorCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
522
|
-
onKeyDown?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
523
|
-
onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
524
|
-
onKeyPress?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
525
|
-
onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
526
|
-
onKeyUp?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
527
|
-
onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
|
|
528
|
-
onAbort?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
529
|
-
onAbortCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
530
|
-
onCanPlay?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
531
|
-
onCanPlayCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
532
|
-
onCanPlayThrough?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
533
|
-
onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
534
|
-
onDurationChange?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
535
|
-
onDurationChangeCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
536
|
-
onEmptied?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
537
|
-
onEmptiedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
538
|
-
onEncrypted?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
539
|
-
onEncryptedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
540
|
-
onEnded?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
541
|
-
onEndedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
542
|
-
onLoadedData?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
543
|
-
onLoadedDataCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
544
|
-
onLoadedMetadata?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
545
|
-
onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
546
|
-
onLoadStart?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
547
|
-
onLoadStartCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
548
|
-
onPause?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
549
|
-
onPauseCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
550
|
-
onPlay?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
551
|
-
onPlayCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
552
|
-
onPlaying?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
553
|
-
onPlayingCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
554
|
-
onProgress?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
555
|
-
onProgressCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
556
|
-
onRateChange?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
557
|
-
onRateChangeCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
558
|
-
onSeeked?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
559
|
-
onSeekedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
560
|
-
onSeeking?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
561
|
-
onSeekingCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
562
|
-
onStalled?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
563
|
-
onStalledCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
564
|
-
onSuspend?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
565
|
-
onSuspendCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
566
|
-
onTimeUpdate?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
567
|
-
onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
568
|
-
onVolumeChange?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
569
|
-
onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
570
|
-
onWaiting?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
571
|
-
onWaitingCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
572
|
-
onAuxClick?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
573
|
-
onAuxClickCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
574
|
-
onClick?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
575
|
-
onClickCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
576
|
-
onContextMenu?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
577
|
-
onContextMenuCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
578
|
-
onDoubleClick?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
579
|
-
onDoubleClickCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
580
|
-
onDrag?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
581
|
-
onDragCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
582
|
-
onDragEnd?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
583
|
-
onDragEndCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
584
|
-
onDragEnter?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
585
|
-
onDragEnterCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
586
|
-
onDragExit?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
587
|
-
onDragExitCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
588
|
-
onDragLeave?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
589
|
-
onDragLeaveCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
590
|
-
onDragOver?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
591
|
-
onDragOverCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
592
|
-
onDragStart?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
593
|
-
onDragStartCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
594
|
-
onDrop?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
595
|
-
onDropCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
|
|
596
|
-
onMouseDown?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
597
|
-
onMouseDownCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
598
|
-
onMouseEnter?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
599
|
-
onMouseLeave?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
600
|
-
onMouseMove?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
601
|
-
onMouseMoveCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
602
|
-
onMouseOut?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
603
|
-
onMouseOutCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
604
|
-
onMouseOver?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
605
|
-
onMouseOverCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
606
|
-
onMouseUp?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
607
|
-
onMouseUpCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
|
|
608
|
-
onSelect?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
609
|
-
onSelectCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
|
|
610
|
-
onTouchCancel?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
|
|
611
|
-
onTouchCancelCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
|
|
612
|
-
onTouchEnd?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
|
|
613
|
-
onTouchEndCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
|
|
614
|
-
onTouchMove?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
|
|
615
|
-
onTouchMoveCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
|
|
616
|
-
onTouchStart?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
|
|
617
|
-
onTouchStartCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
|
|
618
|
-
onPointerDown?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
619
|
-
onPointerDownCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
620
|
-
onPointerMove?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
621
|
-
onPointerMoveCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
622
|
-
onPointerUp?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
623
|
-
onPointerUpCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
624
|
-
onPointerCancel?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
625
|
-
onPointerCancelCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
626
|
-
onPointerEnter?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
627
|
-
onPointerEnterCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
628
|
-
onPointerLeave?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
629
|
-
onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
630
|
-
onPointerOver?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
631
|
-
onPointerOverCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
632
|
-
onPointerOut?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
633
|
-
onPointerOutCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
634
|
-
onGotPointerCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
635
|
-
onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
636
|
-
onLostPointerCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
637
|
-
onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
|
|
638
|
-
onScroll?: import("react").UIEventHandler<HTMLTableSectionElement> | undefined;
|
|
639
|
-
onScrollCapture?: import("react").UIEventHandler<HTMLTableSectionElement> | undefined;
|
|
640
|
-
onWheel?: import("react").WheelEventHandler<HTMLTableSectionElement> | undefined;
|
|
641
|
-
onWheelCapture?: import("react").WheelEventHandler<HTMLTableSectionElement> | undefined;
|
|
642
|
-
onAnimationStart?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
|
|
643
|
-
onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
|
|
644
|
-
onAnimationEnd?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
|
|
645
|
-
onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
|
|
646
|
-
onAnimationIteration?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
|
|
647
|
-
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
|
|
648
|
-
onTransitionEnd?: import("react").TransitionEventHandler<HTMLTableSectionElement> | undefined;
|
|
649
|
-
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLTableSectionElement> | undefined;
|
|
650
|
-
striped?: boolean | "true" | "false" | ({
|
|
651
|
-
"@sm"?: boolean | "true" | "false" | undefined;
|
|
652
|
-
"@md"?: boolean | "true" | "false" | undefined;
|
|
653
|
-
"@lg"?: boolean | "true" | "false" | undefined;
|
|
654
|
-
"@xl"?: boolean | "true" | "false" | undefined;
|
|
655
|
-
"@reducedMotion"?: boolean | "true" | "false" | undefined;
|
|
656
|
-
"@allowMotion"?: boolean | "true" | "false" | undefined;
|
|
657
|
-
"@hover"?: boolean | "true" | "false" | undefined;
|
|
658
|
-
"@initial"?: boolean | "true" | "false" | undefined;
|
|
659
|
-
} & {
|
|
660
|
-
[x: string]: boolean | "true" | "false" | undefined;
|
|
661
|
-
}) | undefined;
|
|
400
|
+
}, "children"> & {
|
|
401
|
+
rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
|
|
662
402
|
}) => import("react").JSX.Element;
|
|
663
403
|
/** Default table data cell implementation for `DataTable`
|
|
664
404
|
*
|
|
@@ -1810,6 +1550,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
1810
1550
|
numberOfStickyColumns?: number;
|
|
1811
1551
|
scrollContainerCss?: import("../..").CSS;
|
|
1812
1552
|
};
|
|
1553
|
+
rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
|
|
1813
1554
|
} & {
|
|
1814
1555
|
idColumn?: string;
|
|
1815
1556
|
onDragAndDrop?: (onDragAndDropData: {
|
|
@@ -3415,7 +3156,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
3415
3156
|
* Renders all visible cells as `Table.Cell`. If you need more customisation options,
|
|
3416
3157
|
* you can build your own implementation with the UI-only `Table` components.
|
|
3417
3158
|
*/
|
|
3418
|
-
Row: ({ row }: import("./DataTableRow").DataTableRowProps) => import("react").JSX.Element;
|
|
3159
|
+
Row: ({ row, rowAction }: import("./DataTableRow").DataTableRowProps) => import("react").JSX.Element;
|
|
3419
3160
|
/** Default table implementation for `DataTable`.
|
|
3420
3161
|
*
|
|
3421
3162
|
* Can be configured with sortable columns and different visual themes.
|
|
@@ -3425,7 +3166,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
3425
3166
|
* scratch with `useDataTable` and the UI-only `Table` components.
|
|
3426
3167
|
*
|
|
3427
3168
|
*/
|
|
3428
|
-
Table: ({ sortable, striped, theme, css, scrollOptions, ...props }: import("./DataTableTable").DataTableTableProps) => import("react").JSX.Element | null;
|
|
3169
|
+
Table: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: import("./DataTableTable").DataTableTableProps) => import("react").JSX.Element | null;
|
|
3429
3170
|
/** Default loading implementation for remote data
|
|
3430
3171
|
*
|
|
3431
3172
|
* Renders a loading component while fetching the paginated data using `getAsyncData`.
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Table } from '../table';
|
|
3
|
-
type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'
|
|
4
|
-
|
|
3
|
+
type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'> & {
|
|
4
|
+
rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const DataTableBody: ({ striped, rowAction, ...props }: DataTableBodyProps) => React.JSX.Element;
|
|
5
7
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as o from"react";import{Table as i}from"../table/Table.js";import{useDataTable as n}from"./DataTableContext.js";import{DataTable as p}from"./DataTable.js";const l=({striped:t=!1,rowAction:r,...a})=>{const{getRowModel:m}=n();return o.createElement(i.Body,{...a,striped:t},m().rows.map(e=>o.createElement(p.Row,{row:e,key:e.id,rowAction:r})))};export{l as DataTableBody};
|
|
2
2
|
//# sourceMappingURL=DataTableBody.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableBody.js","sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableBodyProps = Omit<\n React.ComponentProps<typeof Table.Body>,\n 'children'\n
|
|
1
|
+
{"version":3,"file":"DataTableBody.js","sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableBodyProps = Omit<\n React.ComponentProps<typeof Table.Body>,\n 'children'\n> & {\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nexport const DataTableBody = ({\n striped = false,\n rowAction,\n ...props\n}: DataTableBodyProps) => {\n const { getRowModel } = useDataTable()\n\n return (\n <Table.Body {...props} striped={striped}>\n {getRowModel().rows.map((row) => {\n return <DataTable.Row row={row} key={row.id} rowAction={rowAction} />\n })}\n </Table.Body>\n )\n}\n"],"names":["DataTableBody","striped","rowAction","props","getRowModel","useDataTable","React","Table","row","DataTable"],"mappings":"kKAaa,MAAAA,EAAgB,CAAC,CAC5B,QAAAC,EAAU,GACV,UAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,YAAAC,CAAY,EAAIC,EAAa,EAErC,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASF,CAAAA,EAC7BG,EAAY,EAAE,KAAK,IAAKI,GAChBF,EAAA,cAACG,EAAU,IAAV,CAAc,IAAKD,EAAK,IAAKA,EAAI,GAAI,UAAWN,CAAW,CAAA,CACpE,CACH,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{ArrowUp as u,ArrowDown as b}from"@atom-learning/icons";import{styled as g}from"@atom-learning/stitches-react";import{flexRender as y}from"@tanstack/react-table";import*as t from"react";import{useHover as v}from"react-aria";import{Flex as s}from"../flex/Flex.js";import{Icon as x}from"../icon/Icon.js";import{Table as S}from"../table/Table.js";import{useDataTable as h}from"./DataTableContext.js";const D=g(S.HeaderCell,{variants:{isSortable:{true:{cursor:"pointer",position:"relative","& > *":{position:"relative"},"&:before":{content:"",position:"absolute",inset:0,opacity:0,backgroundColor:"$primary100",transition:"opacity 0.2s ease"},"&:hover:before":{opacity:.5}}}}}),k={asc:u,desc:b},w=({direction:e})=>t.createElement(x,{is:k[e],size:"sm",css:{position:"absolute",left:"$1",stroke:"$primary900"}}),C=({header:e,children:E,css:l,...c})=>{const a=e.column.getIsSorted(),{isSortable:o}=h(),i=e.column.getCanSort(),{hoverProps:m,isHovered:p}=v({}),d=(r,f)=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),f(r))},n=e.column.getToggleSortingHandler();return t.createElement(D,{isSortable:o&&i,colSpan:e.colSpan,onClick:o&&i&&n?n:void 0,onKeyDown:r=>o&&i&&n&&d(r,n),tabIndex:o&&i?0:-1,...m,css:l,...c},t.createElement(s,{align:"center",justify:e.colSpan>1?"center":"flex-start"},y(e.column.columnDef.header,e.getContext()),a&&o&&t.createElement(s,{align:"center",css:{position:"relative",width:"24px",height:"24px",ml:"$2",bg:p?"$primary200":"$primary100",borderRadius:"$0"}},t.createElement(w,{direction:a}))))};export{C as DataTableHeaderCell};
|
|
2
2
|
//# sourceMappingURL=DataTableHeaderCell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport { styled } from '@atom-learning/stitches-react'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n header: Header<Record<string, unknown>, unknown>\n}\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n variants: {\n isSortable: {\n true: {\n cursor: 'pointer',\n position: 'relative',\n '& > *': {\n position: 'relative'\n },\n '&:before': {\n content: '',\n position: 'absolute',\n inset: 0,\n opacity: 0,\n backgroundColor: '$primary100',\n transition: 'opacity 0.2s ease'\n },\n '&:hover:before': {\n opacity: 0.5\n }\n }\n }\n }\n})\n\nconst sortIcons = {\n asc: ArrowUp,\n desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n <Icon\n is={sortIcons[direction]}\n size=\"sm\"\n css={{ position: 'absolute', left: '$1', stroke: '$primary900' }}\n />\n)\n\nexport const DataTableHeaderCell = ({\n header,\n children,\n css,\n ...props\n}: DataTableHeaderProps) => {\n const sortDirection = header.column.getIsSorted()\n const { isSortable: isSortableTable } = useDataTable()\n // false for display columns, e.g. \"Actions\"\n const isDataColumn = header.column.getCanSort()\n\n const { hoverProps, isHovered } = useHover({})\n\n const handleKeyDown = (\n event: React.KeyboardEvent<HTMLTableCellElement>,\n callback: (event: unknown) => void | undefined\n ) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault()\n callback(event as unknown)\n }\n }\n\n const headerSortingHandler = header.column.getToggleSortingHandler()\n\n return (\n <StyledTableHeaderCell\n isSortable={isSortableTable && isDataColumn}\n colSpan={header.colSpan}\n onClick={\n isSortableTable && isDataColumn && headerSortingHandler\n ? headerSortingHandler\n : undefined\n }\n onKeyDown={(event) =>\n isSortableTable &&\n isDataColumn &&\n headerSortingHandler &&\n handleKeyDown(event, headerSortingHandler)\n }\n tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n {...hoverProps}\n css={css}\n {...props}\n >\n <Flex\n align=\"center\"\n justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {sortDirection && isSortableTable && (\n <Flex\n align=\"center\"\n css={{\n position: 'relative',\n width: '24px',\n height: '24px',\n ml: '$2',\n bg: isHovered ? '$primary200' : '$primary100',\n borderRadius: '$0'\n }}\n >\n <SortIcon direction={sortDirection} />\n </Flex>\n )}\n </Flex>\n </StyledTableHeaderCell>\n )\n}\n"],"names":["StyledTableHeaderCell","styled","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","children","css","props","sortDirection","isSortableTable","useDataTable","isDataColumn","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender"],"mappings":"mZAeA,MAAMA,EAAwBC,EAAOC,EAAM,WAAY,CACrD,SAAU,CACR,WAAY,CACV,KAAM,CACJ,OAAQ,UACR,SAAU,WACV,QAAS,CACP,SAAU,UACZ,EACA,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,QAAS,EACT,gBAAiB,cACjB,WAAY,mBACd,EACA,iBAAkB,CAChB,QAAS,EACX,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,GACd,KAAK,KACL,IAAK,CAAE,SAAU,WAAY,KAAM,KAAM,OAAQ,aAAc,CACjE,CAAA,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,SAAAC,EACA,IAAAC,KACGC,CACL,IAA4B,CAC1B,MAAMC,EAAgBJ,EAAO,OAAO,cAC9B,CAAE,WAAYK,CAAgB,EAAIC,EAElCC,EAAAA,EAAeP,EAAO,OAAO,aAE7B,CAAE,WAAAQ,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAE,CAAA,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAASD,CAAgB,EAE7B,EAEME,EAAuBd,EAAO,OAAO,wBAAA,EAE3C,OACEH,EAAA,cAACR,EAAA,CACC,WAAYgB,GAAmBE,EAC/B,QAASP,EAAO,QAChB,QACEK,GAAmBE,GAAgBO,EAC/BA,EACA,OAEN,UAAYF,GACVP,GACAE,GACAO,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUT,GAAmBE,EAAe,EAAI,GAC/C,GAAGC,EACJ,IAAKN,EACJ,GAAGC,CAAAA,EAEJN,EAAA,cAACkB,EAAA,CACC,MAAM,SACN,QAASf,EAAO,QAAU,EAAI,SAAW,YAExCgB,EAAAA,EAAWhB,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAA,CAAY,EAC9DI,GAAiBC,GAChBR,EAAA,cAACkB,EAAA,CACC,MAAM,SACN,IAAK,CACH,SAAU,WACV,MAAO,OACP,OAAQ,OACR,GAAI,KACJ,GAAIN,EAAY,cAAgB,cAChC,aAAc,IAChB,GAEAZ,EAAA,cAACF,EAAA,CAAS,UAAWS,CAAAA,CAAe,CACtC,CAEJ,CACF,CAEJ"}
|
|
@@ -3,5 +3,6 @@ import * as React from 'react';
|
|
|
3
3
|
import { Table } from '../table';
|
|
4
4
|
export type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
|
|
5
5
|
row: Row<Record<string, unknown>>;
|
|
6
|
+
rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
|
|
6
7
|
};
|
|
7
|
-
export declare const DataTableRow: ({ row }: DataTableRowProps) => React.JSX.Element;
|
|
8
|
+
export declare const DataTableRow: ({ row, rowAction }: DataTableRowProps) => React.JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ChevronDown as
|
|
1
|
+
import{ChevronDown as w,ChevronRight as C}from"@atom-learning/icons";import*as a from"react";import{styled as D}from"../../stitches.js";import{Icon as E}from"../icon/Icon.js";import{Table as i}from"../table/Table.js";import{useDataTable as x}from"./DataTableContext.js";import{DataTableDataCell as S}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as k}from"./DataTableRowSelectionCheckbox.js";const y=D(i.Row,{bg:"initial",variants:{isSelected:{true:{bg:"$primary100 !important"}},isDisabled:{true:{opacity:"30%"}},isFocusable:{true:{"&:focus":{outline:"2px solid $primary500",outlineOffset:"-4px","& td":{bg:"transparent"}}}}}}),d=e=>e?!!(e.closest("button, a, input, select, textarea")||e.getAttribute("role")==="button"):!1,h=({row:e,rowAction:n})=>{const{enableRowSelection:m,disabledRows:l,getCanSomeRowsExpand:p}=x(),s=!!(l!=null&&l[e.id]),g=e.getToggleExpandedHandler(),u=e.getToggleSelectedHandler(),b=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!n||!o.target.closest("tr")||d(o.target)||n(t.original,o)},f=t=>{if(t.key==="Enter"||t.key===" "){if(d(t.target))return;t.preventDefault(),c(e,t)}if(t.key==="ArrowDown"){t.preventDefault();const o=t.target.closest("tr"),r=o==null?void 0:o.nextElementSibling;r&&r.tagName==="TR"&&r.focus()}if(t.key==="ArrowUp"){t.preventDefault();const o=t.target.closest("tr"),r=o==null?void 0:o.previousElementSibling;r&&r.tagName==="TR"&&r.focus()}};return a.createElement(y,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!n&&!s,...n&&{onClick:t=>c(e,t),tabIndex:0,css:{cursor:"pointer"},onKeyDown:f}},p()&&a.createElement(i.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:g},e.getCanExpand()&&a.createElement(E,{is:e.getIsExpanded()?w:C})),m&&a.createElement(i.Cell,{css:{width:"$4"}},a.createElement(k,{row:e,checked:b(),onCheckedChange:u})),e.getVisibleCells().map((t,o)=>a.createElement(S,{key:t.id,cell:t})))};export{h as DataTableRow};
|
|
2
2
|
//# sourceMappingURL=DataTableRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n row: Row<Record<string, unknown>>\n}\n\nconst StyledRow = styled(Table.Row, {\n bg: 'initial',\n variants: {\n isSelected: {\n true: {\n // the !important rule is needed because the bg property is set elsewhere and it's more specific than this one would be without the !important modifier.\n bg: '$primary100 !important'\n }\n },\n isDisabled: {\n true: {\n opacity: '30%'\n }\n }\n }\n})\n\nexport const DataTableRow = ({ row }: DataTableRowProps) => {\n const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n useDataTable()\n\n const isDisabled = !!disabledRows?.[row.id]\n\n const toggleExpandHandler = row.getToggleExpandedHandler()\n const toggleSelectHandler = row.getToggleSelectedHandler()\n\n const getCheckedState = (): boolean | 'indeterminate' => {\n if (row.getIsSomeSelected()) return 'indeterminate'\n return row.getIsSelected()\n }\n\n return (\n <StyledRow
|
|
1
|
+
{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n row: Row<Record<string, unknown>>\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n bg: 'initial',\n variants: {\n isSelected: {\n true: {\n // the !important rule is needed because the bg property is set elsewhere and it's more specific than this one would be without the !important modifier.\n bg: '$primary100 !important'\n }\n },\n isDisabled: {\n true: {\n opacity: '30%'\n }\n },\n isFocusable: {\n true: {\n '&:focus': {\n outline: '2px solid $primary500',\n outlineOffset: '-4px',\n '& td': {\n bg: 'transparent'\n }\n }\n }\n }\n }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n if (!element) return false\n if (element.closest('button, a, input, select, textarea')) return true\n if (element.getAttribute('role') === 'button') return true\n return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n useDataTable()\n\n const isDisabled = !!disabledRows?.[row.id]\n\n const toggleExpandHandler = row.getToggleExpandedHandler()\n const toggleSelectHandler = row.getToggleSelectedHandler()\n\n const getCheckedState = (): boolean | 'indeterminate' => {\n if (row.getIsSomeSelected()) return 'indeterminate'\n return row.getIsSelected()\n }\n\n const handleRowClick = (\n rowData: Row<Record<string, unknown>>,\n event: React.MouseEvent<HTMLTableRowElement>\n ) => {\n if (!rowAction) return\n\n // Skip if clicking on an interactive element\n const rowElement = (event.target as Element).closest('tr')\n if (!rowElement || isElementInteractive(event.target as Element)) {\n return\n }\n\n rowAction(rowData.original, event)\n }\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n if (isElementInteractive(event.target as Element)) {\n return\n }\n event.preventDefault()\n handleRowClick(\n row,\n event as unknown as React.MouseEvent<HTMLTableRowElement>\n )\n }\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n const currentRow = (event.target as HTMLElement).closest('tr')\n const nextRow = currentRow?.nextElementSibling as HTMLElement\n if (nextRow && nextRow.tagName === 'TR') {\n nextRow.focus()\n }\n }\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n const currentRow = (event.target as HTMLElement).closest('tr')\n const previousRow = currentRow?.previousElementSibling as HTMLElement\n if (previousRow && previousRow.tagName === 'TR') {\n previousRow.focus()\n }\n }\n }\n\n return (\n <StyledRow\n isSelected={row.getIsSelected()}\n isDisabled={isDisabled}\n isFocusable={!!rowAction && !isDisabled}\n {...(rowAction && {\n onClick: (event) => handleRowClick(row, event),\n tabIndex: 0,\n css: { cursor: 'pointer' },\n onKeyDown: handleKeyDown\n })}\n >\n {getCanSomeRowsExpand() && (\n <Table.Cell\n data-testid={`expand-icon-${row.id}`}\n css={{ width: '$4', cursor: row.getCanExpand() ? 'pointer' : 'auto' }}\n onClick={toggleExpandHandler}\n >\n {row.getCanExpand() && (\n <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n )}\n </Table.Cell>\n )}\n\n {enableRowSelection && (\n <Table.Cell css={{ width: '$4' }}>\n <DataTableRowSelectionCheckbox\n row={row}\n checked={getCheckedState()}\n onCheckedChange={toggleSelectHandler}\n />\n </Table.Cell>\n )}\n {row.getVisibleCells().map((cell, i) => {\n return <DataTableDataCell key={cell.id} cell={cell} />\n })}\n </StyledRow>\n )\n}\n"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAiBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,CACR,WAAY,CACV,KAAM,CAEJ,GAAI,wBACN,CACF,EACA,WAAY,CACV,KAAM,CACJ,QAAS,KACX,CACF,EACA,YAAa,CACX,KAAM,CACJ,UAAW,CACT,QAAS,wBACT,cAAe,OACf,OAAQ,CACN,GAAI,aACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAA,EAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,EAAAA,EAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,KAElCO,EAAsBP,EAAI,yBAAA,EAC1BQ,EAAsBR,EAAI,2BAE1BS,EAAkB,IAClBT,EAAI,kBAA4B,EAAA,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,eAAe,EACrBF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,YAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAEZ,CAAA,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,eAAA,EACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAAM,CAEtB,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAAc,EAC9B,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,IAAK,CAAE,OAAQ,SAAU,EACzB,UAAWC,CACb,GAECT,EAAqB,GACpBa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASO,CAERP,EAAAA,EAAI,aACHiB,GAAAA,EAAA,cAACC,EAAA,CAAK,GAAIlB,EAAI,cAAA,EAAkBmB,EAAcC,CAAAA,CAAc,CAEhE,EAGDlB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAC7BqB,EAAAA,EAAA,cAACI,EAAA,CACC,IAAKrB,EACL,QAASS,IACT,gBAAiBD,CACnB,CAAA,CACF,EAEDR,EAAI,kBAAkB,IAAI,CAACsB,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}
|
|
@@ -10,5 +10,6 @@ export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'chil
|
|
|
10
10
|
numberOfStickyColumns?: number;
|
|
11
11
|
scrollContainerCss?: CSS;
|
|
12
12
|
};
|
|
13
|
+
rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
|
|
13
14
|
};
|
|
14
|
-
export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, ...props }: DataTableTableProps) => React.JSX.Element | null;
|
|
15
|
+
export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: DataTableTableProps) => React.JSX.Element | null;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{Table as
|
|
1
|
+
import*as e from"react";import{Table as S}from"../table/Table.js";import{DataTable as s}from"./DataTable.js";import{AsyncDataState as E}from"./DataTable.types.js";import{useDataTable as k}from"./DataTableContext.js";import{DataTableLoading as D}from"./DataTableLoading.js";const T=({sortable:l,striped:m,theme:c,css:i,scrollOptions:t={numberOfStickyColumns:0,hasStickyHeader:!1},rowAction:p,...u})=>{const{asyncDataState:b,getTotalRows:y,getCanSomeRowsExpand:r,enableRowSelection:n,tableId:d}=k(),o=b===E.PENDING,C=!o&&y()===0,f=()=>{let a=0;return r()&&!!n?a=2:(r()||!!n)&&(a=1),`${d}_${a}_control_columns`};return C?null:e.createElement(e.Fragment,null,e.createElement(D,null),e.createElement(S,{...u,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:t.scrollContainerCss,scrollContainerkey:f(),css:{...i,...o&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(s.Head,{theme:c,sortable:l,isSticky:t.hasStickyHeader,css:t.headerCss}),e.createElement(s.Body,{striped:m,rowAction:p})))};export{T as DataTableTable};
|
|
2
2
|
//# sourceMappingURL=DataTableTable.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' | 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n headerCss?: CSS\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n }\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme,\n css,\n scrollOptions = {\n numberOfStickyColumns: 0,\n hasStickyHeader: false\n },\n ...props\n}: DataTableTableProps) => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n enableRowSelection,\n tableId\n } = useDataTable()\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n return (\n <>\n <DataTableLoading />\n\n <Table\n {...props}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCss={scrollOptions.scrollContainerCss}\n scrollContainerkey={buildScrollContainerKey()}\n css={{\n ...css,\n ...(isPending && {\n opacity: 0.5,\n pointerEvents: 'none',\n transition: 'opacity 250ms linear 150ms'\n })\n }}\n >\n <DataTable.Head\n theme={theme}\n sortable={sortable}\n isSticky={scrollOptions.hasStickyHeader}\n css={scrollOptions.headerCss}\n />\n <DataTable.Body striped={striped} />\n </Table>\n </>\n )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","React","DataTableLoading","Table","DataTable"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' | 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n headerCss?: CSS\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme,\n css,\n scrollOptions = {\n numberOfStickyColumns: 0,\n hasStickyHeader: false\n },\n rowAction,\n ...props\n}: DataTableTableProps) => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n enableRowSelection,\n tableId\n } = useDataTable()\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n return (\n <>\n <DataTableLoading />\n\n <Table\n {...props}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCss={scrollOptions.scrollContainerCss}\n scrollContainerkey={buildScrollContainerKey()}\n css={{\n ...css,\n ...(isPending && {\n opacity: 0.5,\n pointerEvents: 'none',\n transition: 'opacity 250ms linear 150ms'\n })\n }}\n >\n <DataTable.Head\n theme={theme}\n sortable={sortable}\n isSticky={scrollOptions.hasStickyHeader}\n css={scrollOptions.headerCss}\n />\n <DataTable.Body striped={striped} rowAction={rowAction} />\n </Table>\n </>\n )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","React","DataTableLoading","Table","DataTable"],"mappings":"iRA6Ba,MAAAA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,EACA,UAAAC,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,QAAAC,CACF,EAAIC,EAEEC,EAAAA,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,EAAmB,IAAA,EAE3CQ,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAIR,KAA0B,CAAC,CAACC,EAC9BO,EAAqB,GACZR,EAAqB,GAAK,CAAC,CAACC,KACrCO,EAAqB,GAGhB,GAAGN,KAAWM,mBACvB,EAEA,OAAIF,EAAgB,KAGlBG,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGd,EACJ,sBAAuBF,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBY,EACpB,EAAA,IAAK,CACH,GAAGb,EACH,GAAIU,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAEAK,EAAAA,EAAA,cAACG,EAAU,KAAV,CACC,MAAOnB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SAAA,CACrB,EACAc,EAAA,cAACG,EAAU,KAAV,CAAe,QAASpB,EAAS,UAAWI,CAAW,CAAA,CAC1D,CACF,CAEJ"}
|