npm - @atom-learning/components - Versions diffs - 5.8.0 → 6.0.0-beta.1 - Mend

@atom-learning/components 5.8.0 → 6.0.0-beta.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 (124) hide show

package/dist/components/data-table/DataTable.d.ts CHANGED Viewed

@@ -23,19 +23,10 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * Can be configured with alternating colours of rows. If you need more customisation options,
      * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.
      */
-    Body: ({ striped, rowAction, ...props }: Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
-        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
-    }, "css" | "striped"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-        striped?: boolean | "true" | "false" | undefined;
-    }, {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        reducedMotion: string;
-        allowMotion: string;
-        hover: string;
-    }> & {
+    Body: ({ striped, ...props }: {
+        color?: string | undefined;
+        content?: string | undefined;
+        translate?: "yes" | "no" | undefined;
         css?: import("@atom-learning/stitches-react/types/css-util").CSS<{
             sm: string;
             md: string;
@@ -397,8 +388,277 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-    }, "children"> & {
-        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
+        prefix?: string | undefined;
+        slot?: string | undefined;
+        style?: import("react").CSSProperties | undefined;
+        title?: string | undefined;
+        ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+        key?: import("react").Key | null | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoFocus?: boolean | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        placeholder?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        tabIndex?: number | undefined;
+        radioGroup?: string | undefined;
+        role?: import("react").AriaRole | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
+        onCopyCapture?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
+        onCut?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
+        onCutCapture?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
+        onPaste?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
+        onPasteCapture?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
+        onCompositionEnd?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
+        onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
+        onCompositionStart?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
+        onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
+        onCompositionUpdate?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
+        onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLTableSectionElement> | undefined;
+        onFocus?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
+        onFocusCapture?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
+        onBlur?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
+        onBlurCapture?: import("react").FocusEventHandler<HTMLTableSectionElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onChangeCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onBeforeInput?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onBeforeInputCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onInput?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onInputCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onReset?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onResetCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onSubmit?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onSubmitCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onInvalid?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onInvalidCapture?: import("react").FormEventHandler<HTMLTableSectionElement> | undefined;
+        onLoad?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onLoadCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onError?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onErrorCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onKeyDown?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
+        onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
+        onKeyPress?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
+        onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
+        onKeyUp?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
+        onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLTableSectionElement> | undefined;
+        onAbort?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onAbortCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onCanPlay?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onCanPlayCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onCanPlayThrough?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onDurationChange?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onDurationChangeCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onEmptied?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onEmptiedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onEncrypted?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onEncryptedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onEnded?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onEndedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onLoadedData?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onLoadedDataCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onLoadedMetadata?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onLoadStart?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onLoadStartCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onPause?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onPauseCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onPlay?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onPlayCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onPlaying?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onPlayingCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onProgress?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onProgressCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onRateChange?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onRateChangeCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onSeeked?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onSeekedCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onSeeking?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onSeekingCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onStalled?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onStalledCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onSuspend?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onSuspendCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onTimeUpdate?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onVolumeChange?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onWaiting?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onWaitingCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onAuxClick?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onAuxClickCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onClickCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onContextMenu?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onContextMenuCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onDoubleClick?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onDoubleClickCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onDrag?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragEnd?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragEndCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragEnter?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragEnterCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragExit?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragExitCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragLeave?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragLeaveCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragOver?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragOverCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragStart?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDragStartCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDrop?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onDropCapture?: import("react").DragEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseDown?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseDownCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseEnter?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseLeave?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseMove?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseMoveCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseOut?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseOutCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseOver?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseOverCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseUp?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onMouseUpCapture?: import("react").MouseEventHandler<HTMLTableSectionElement> | undefined;
+        onSelect?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onSelectCapture?: import("react").ReactEventHandler<HTMLTableSectionElement> | undefined;
+        onTouchCancel?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
+        onTouchCancelCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
+        onTouchEnd?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
+        onTouchEndCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
+        onTouchMove?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
+        onTouchMoveCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
+        onTouchStart?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
+        onTouchStartCapture?: import("react").TouchEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerDown?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerDownCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerMove?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerMoveCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerUp?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerUpCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerCancel?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerCancelCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerEnter?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerEnterCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerLeave?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerOver?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerOverCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerOut?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onPointerOutCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onGotPointerCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onLostPointerCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLTableSectionElement> | undefined;
+        onScroll?: import("react").UIEventHandler<HTMLTableSectionElement> | undefined;
+        onScrollCapture?: import("react").UIEventHandler<HTMLTableSectionElement> | undefined;
+        onWheel?: import("react").WheelEventHandler<HTMLTableSectionElement> | undefined;
+        onWheelCapture?: import("react").WheelEventHandler<HTMLTableSectionElement> | undefined;
+        onAnimationStart?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
+        onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
+        onAnimationEnd?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
+        onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
+        onAnimationIteration?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
+        onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLTableSectionElement> | undefined;
+        onTransitionEnd?: import("react").TransitionEventHandler<HTMLTableSectionElement> | undefined;
+        onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLTableSectionElement> | undefined;
+        striped?: boolean | "true" | "false" | ({
+            "@sm"?: boolean | "true" | "false" | undefined;
+            "@md"?: boolean | "true" | "false" | undefined;
+            "@lg"?: boolean | "true" | "false" | undefined;
+            "@xl"?: boolean | "true" | "false" | undefined;
+            "@reducedMotion"?: boolean | "true" | "false" | undefined;
+            "@allowMotion"?: boolean | "true" | "false" | undefined;
+            "@hover"?: boolean | "true" | "false" | undefined;
+            "@initial"?: boolean | "true" | "false" | undefined;
+        } & {
+            [x: string]: boolean | "true" | "false" | undefined;
+        }) | undefined;
     }) => import("react").JSX.Element;
     /** Default table data cell implementation for `DataTable`
      *
@@ -1550,7 +1810,6 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             numberOfStickyColumns?: number;
             scrollContainerCss?: import("../..").CSS;
         };
-        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
     } & {
         idColumn?: string;
         onDragAndDrop?: (onDragAndDropData: {
@@ -1939,7 +2198,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         size: import("react").ComponentProps<typeof import("..").Text>["size"];
         type?: "text" | "number" | "email" | "password" | "tel" | "url" | "search";
         as?: never;
-    }, "size" | "state"> & {
+    }, "appearance" | "size" | "state"> & {
         size?: "sm" | "md" | "lg" | "xl" | ({
             "@sm"?: "sm" | "md" | "lg" | "xl" | undefined;
             "@md"?: "sm" | "md" | "lg" | "xl" | undefined;
@@ -1964,6 +2223,18 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         } & {
             [x: string]: "error" | undefined;
         }) | undefined;
+        appearance?: "standard" | "modern" | ({
+            "@sm"?: "standard" | "modern" | undefined;
+            "@md"?: "standard" | "modern" | undefined;
+            "@lg"?: "standard" | "modern" | undefined;
+            "@xl"?: "standard" | "modern" | undefined;
+            "@reducedMotion"?: "standard" | "modern" | undefined;
+            "@allowMotion"?: "standard" | "modern" | undefined;
+            "@hover"?: "standard" | "modern" | undefined;
+            "@initial"?: "standard" | "modern" | undefined;
+        } & {
+            [x: string]: "standard" | "modern" | undefined;
+        }) | undefined;
     } & {
         size?: "sm" | "md" | "lg";
         css?: import("../..").CSS;
@@ -3144,7 +3415,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * Renders all visible cells as `Table.Cell`. If you need more customisation options,
      * you can build your own implementation with the UI-only `Table` components.
      */
-    Row: ({ row, rowAction }: import("./DataTableRow").DataTableRowProps) => import("react").JSX.Element;
+    Row: ({ row }: import("./DataTableRow").DataTableRowProps) => import("react").JSX.Element;
     /** Default table implementation for `DataTable`.
      *
      * Can be configured with sortable columns and different visual themes.
@@ -3154,7 +3425,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * scratch with `useDataTable` and the UI-only `Table` components.
      *
      */
-    Table: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: import("./DataTableTable").DataTableTableProps) => import("react").JSX.Element | null;
+    Table: ({ sortable, striped, theme, css, scrollOptions, ...props }: import("./DataTableTable").DataTableTableProps) => import("react").JSX.Element | null;
     /** Default loading implementation for remote data
      *
      * Renders a loading component while fetching the paginated data using `getAsyncData`.

package/dist/components/data-table/DataTableBody.d.ts CHANGED Viewed

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { Table } from '../table';
-type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'> & {
-    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
-};
-export declare const DataTableBody: ({ striped, rowAction, ...props }: DataTableBodyProps) => React.JSX.Element;
+type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'>;
+export declare const DataTableBody: ({ striped, ...props }: DataTableBodyProps) => React.JSX.Element;
 export {};

package/dist/components/data-table/DataTableBody.js CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+import*as r from"react";import{Table as m}from"../table/Table.js";import{useDataTable as p}from"./DataTableContext.js";import{DataTable as i}from"./DataTable.js";const l=({striped:t=!1,...o})=>{const{getRowModel:a}=p();return r.createElement(m.Body,{...o,striped:t},a().rows.map(e=>r.createElement(i.Row,{row:e,key:e.id})))};export{l as DataTableBody};
 //# sourceMappingURL=DataTableBody.js.map

package/dist/components/data-table/DataTableBody.js.map CHANGED Viewed

	@@ -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~~> & {\~~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	+ {"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\nexport const DataTableBody = ({\n striped = false,\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} />\n })}\n </Table.Body>\n )\n}\n"],"names":["DataTableBody","striped","props","getRowModel","useDataTable","React","Table","row","DataTable"],"mappings":"kKAWO,MAAMA,EAAgB,CAAC,CAC5B,QAAAC,EAAU,MACPC,CACL,IAA0B,CACxB,KAAM,CAAE,YAAAC,CAAY,EAAIC,IAExB,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASD,CAC7BE,EAAAA,EAAAA,EAAc,KAAK,IAAKI,GAChBF,EAAA,cAACG,EAAU,IAAV,CAAc,IAAKD,EAAK,IAAKA,EAAI,EAAA,CAAI,CAC9C,CACH,CAEJ"}

package/dist/components/data-table/DataTableHeaderCell.js CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+import{SortUp as a,SortDown as s}from"@atom-learning/icons";import{flexRender as m}from"@tanstack/react-table";import*as t from"react";import{Flex as l}from"../flex/Flex.js";import{Icon as p}from"../icon/Icon.js";import{Table as d}from"../table/Table.js";import{useDataTable as f}from"./DataTableContext.js";const u={asc:a,desc:s},S=({direction:e})=>t.createElement(p,{is:u[e],size:"sm",css:{position:"absolute",left:"$1"}}),g=({header:e,children:b,css:c,...i})=>{const o=e.column.getIsSorted(),{isSortable:r}=f(),n=e.column.getCanSort();return t.createElement(d.HeaderCell,{colSpan:e.colSpan,onClick:r&&n?e.column.getToggleSortingHandler():void 0,css:{cursor:r&&n?"pointer":"initial",...c},...i},t.createElement(l,{css:{alignItems:"center",...e.colSpan>1?{justifyContent:"center"}:{}}},m(e.column.columnDef.header,e.getContext()),o&&r&&t.createElement(l,{css:{position:"relative",alignItems:"center"}},t.createElement(S,{direction:o}))))};export{g as DataTableHeaderCell};
 //# sourceMappingURL=DataTableHeaderCell.js.map

package/dist/components/data-table/DataTableHeaderCell.js.map CHANGED Viewed

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { SortDown, SortUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\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 sortIcons = {\n asc: SortUp,\n desc: SortDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' \| 'desc' }) => (\n <Icon\n is={sortIcons[direction]}\n size=\"sm\"\n css={{ position: 'absolute', left: '$1' }}\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 return (\n <Table.HeaderCell\n colSpan={header.colSpan}\n onClick={\n isSortableTable && isDataColumn\n ? header.column.getToggleSortingHandler()\n : undefined\n }\n css={{\n cursor: isSortableTable && isDataColumn ? 'pointer' : 'initial',\n ...css\n }}\n {...props}\n >\n <Flex\n css={{\n alignItems: 'center',\n ...(header.colSpan > 1 ? { justifyContent: 'center' } : {})\n }}\n >\n {flexRender(header.column.columnDef.header, header.getContext())}\n {sortDirection && isSortableTable && (\n <Flex css={{ position: 'relative', alignItems: 'center' }}>\n <SortIcon direction={sortDirection} />\n </Flex>\n )}\n </Flex>\n </Table.HeaderCell>\n )\n}\n"],"names":["sortIcons","SortUp","SortDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","children","css","props","sortDirection","isSortableTable","useDataTable","isDataColumn","Table","Flex","flexRender"],"mappings":"oTAaA,MAAMA,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,IAAK,CAC1C,CAAA,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,SAAAC,EACA,IAAAC,KACGC,CACL,IAA4B,CAC1B,MAAMC,EAAgBJ,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYK,CAAgB,EAAIC,EAAa,EAE/CC,EAAeP,EAAO,OAAO,WAAW,EAE9C,OACEH,EAAA,cAACW,EAAM,WAAN,CACC,QAASR,EAAO,QAChB,QACEK,GAAmBE,EACfP,EAAO,OAAO,wBAAwB,EACtC,OAEN,IAAK,CACH,OAAQK,GAAmBE,EAAe,UAAY,UACtD,GAAGL,CACL,EACC,GAAGC,CAAAA,EAEJN,EAAA,cAACY,EAAA,CACC,IAAK,CACH,WAAY,SACZ,GAAIT,EAAO,QAAU,EAAI,CAAE,eAAgB,QAAS,EAAI,CAAA,CAC1D,CAAA,EAECU,EAAWV,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAY,CAAA,EAC9DI,GAAiBC,GAChBR,EAAA,cAACY,EAAA,CAAK,IAAK,CAAE,SAAU,WAAY,WAAY,QAAS,CAAA,EACtDZ,EAAA,cAACF,EAAA,CAAS,UAAWS,EAAe,CACtC,CAEJ,CACF,CAEJ"}

package/dist/components/data-table/DataTableRow.d.ts CHANGED Viewed

@@ -3,6 +3,5 @@ import * as React from 'react';
 import { Table } from '../table';
 export type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
     row: Row<Record<string, unknown>>;
-    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
 };
-export declare const DataTableRow: ({ row, rowAction }: DataTableRowProps) => React.JSX.Element;
+export declare const DataTableRow: ({ row }: DataTableRowProps) => React.JSX.Element;

package/dist/components/data-table/DataTableRow.js CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+import{ChevronDown as m,ChevronRight as p}from"@atom-learning/icons";import*as t from"react";import{styled as g}from"../../stitches.js";import{Icon as b}from"../icon/Icon.js";import{Table as a}from"../table/Table.js";import{useDataTable as C}from"./DataTableContext.js";import{DataTableDataCell as w}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as E}from"./DataTableRowSelectionCheckbox.js";const S=g(a.Row,{bg:"initial",variants:{isSelected:{true:{bg:"$primary100 !important"}},isDisabled:{true:{opacity:"30%"}}}}),f=({row:e})=>{const{enableRowSelection:r,disabledRows:o,getCanSomeRowsExpand:i}=C(),n=!!(o!=null&&o[e.id]),d=e.getToggleExpandedHandler(),s=e.getToggleSelectedHandler(),c=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected();return t.createElement(S,{isSelected:e.getIsSelected(),isDisabled:n},i()&&t.createElement(a.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:d},e.getCanExpand()&&t.createElement(b,{is:e.getIsExpanded()?m:p})),r&&t.createElement(a.Cell,{css:{width:"$4"}},t.createElement(E,{row:e,checked:c(),onCheckedChange:s})),e.getVisibleCells().map((l,h)=>t.createElement(w,{key:l.id,cell:l})))};export{f as DataTableRow};
 //# sourceMappingURL=DataTableRow.js.map

package/dist/components/data-table/DataTableRow.js.map CHANGED Viewed

	@@ -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 ~~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"}
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 isSelected={row.getIsSelected()} isDisabled={isDisabled}>\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","DataTableRow","row","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAgBA,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,CACF,CACF,CAAC,EAEYC,EAAe,CAAC,CAAE,IAAAC,CAAI,IAAyB,CAC1D,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeF,EAAI,KAElCM,EAAsBN,EAAI,yBAAA,EAC1BO,EAAsBP,EAAI,yBAAyB,EAEnDQ,EAAkB,IAClBR,EAAI,kBAAkB,EAAU,gBAC7BA,EAAI,gBAGb,OACES,EAAA,cAACb,EAAA,CAAU,WAAYI,EAAI,gBAAiB,WAAYK,CAAAA,EACrDF,KACCM,EAAA,cAACX,EAAM,KAAN,CACC,cAAa,eAAeE,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASM,CAERN,EAAAA,EAAI,aACHS,GAAAA,EAAA,cAACC,EAAA,CAAK,GAAIV,EAAI,cAAc,EAAIW,EAAcC,CAAc,CAAA,CAEhE,EAGDX,GACCQ,EAAA,cAACX,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAAA,EAC7BW,EAAA,cAACI,EAAA,CACC,IAAKb,EACL,QAASQ,IACT,gBAAiBD,EACnB,CACF,EAEDP,EAAI,kBAAkB,IAAI,CAACc,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAAA,CAAM,CACrD,CACH,CAEJ"}

package/dist/components/data-table/DataTableTable.d.ts CHANGED Viewed

@@ -10,6 +10,5 @@ export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'chil
         numberOfStickyColumns?: number;
         scrollContainerCss?: CSS;
     };
-    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
 };
-export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: DataTableTableProps) => React.JSX.Element | null;
+export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, ...props }: DataTableTableProps) => React.JSX.Element | null;

package/dist/components/data-table/DataTableTable.js CHANGED Viewed

@@ -1,2 +1,2 @@
-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};
+import*as e from"react";import{Table as f}from"../table/Table.js";import{DataTable as s}from"./DataTable.js";import{AsyncDataState as S}from"./DataTable.types.js";import{useDataTable as E}from"./DataTableContext.js";import{DataTableLoading as k}from"./DataTableLoading.js";const D=({sortable:l,striped:m,theme:c,css:i,scrollOptions:t={numberOfStickyColumns:0,hasStickyHeader:!1},...p})=>{const{asyncDataState:u,getTotalRows:b,getCanSomeRowsExpand:r,enableRowSelection:n,tableId:y}=E(),o=u===S.PENDING,C=!o&&b()===0,d=()=>{let a=0;return r()&&!!n?a=2:(r()||!!n)&&(a=1),`${y}_${a}_control_columns`};return C?null:e.createElement(e.Fragment,null,e.createElement(k,null),e.createElement(f,{...p,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:t.scrollContainerCss,scrollContainerkey:d(),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})))};export{D as DataTableTable};
 //# sourceMappingURL=DataTableTable.js.map

package/dist/components/data-table/DataTableTable.js.map CHANGED Viewed

	@@ -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 ~~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"}
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":"iRA4BO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,QAAAC,CACF,EAAIC,EAAa,EAEXC,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,EAAmB,IAAA,EAE3CQ,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAIR,EAAAA,GAA0B,CAAC,CAACC,EAC9BO,EAAqB,GACZR,EAAqB,GAAK,CAAC,CAACC,KACrCO,EAAqB,GAGhB,GAAGN,KAAWM,mBACvB,EAEA,OAAIF,EAAgB,KAGlBG,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGd,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBW,EAAwB,EAC5C,IAAK,CACH,GAAGZ,EACH,GAAIS,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAK,EAAA,cAACG,EAAU,KAAV,CACC,MAAOlB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAa,EAAA,cAACG,EAAU,KAAV,CAAe,QAASnB,CAAS,CAAA,CACpC,CACF,CAEJ"}

package/dist/components/date-field/DateField.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { DateInputProps } from '../../components/date-input';
 import { FieldElementWrapperProps } from '../../components/field-wrapper';
 type DateFieldProps = DateInputProps & FieldElementWrapperProps;
 export declare const DateField: {
-    ({ css, hideLabel, label, name, validation, prompt, description, ...remainingProps }: DateFieldProps): React.JSX.Element;
+    ({ css, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: DateFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/date-field/DateField.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as i from"react";import{useFormContext as u}from"react-hook-form";import{DateInput as F}from"../date-input/DateInput.js";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as g}from"../form/useFieldError.js";const a=({css:m,hideLabel:l,label:p,name:e,validation:r,prompt:d,description:n,...s})=>{const{register:t,trigger:c}=u(),{error:o}=g(e),f=r?t(r):t;return i.createElement(b,{css:m,description:n,error:o,fieldId:e,hideLabel:l,label:p,prompt:d,required:Boolean(r==null?void 0:r.required)},i.createElement(F,{id:e,name:e,ref:f,...o&&{state:"error"},...s,revalidate:c}))};a.displayName="DateField";export{a as DateField};
+import*as i from"react";import{useFormContext as F}from"react-hook-form";import{DateInput as b}from"../date-input/DateInput.js";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as v}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";const p=({css:m,hideLabel:l,label:d,name:e,validation:r,prompt:n,description:s,appearance:t,...c})=>{const{register:o,trigger:f}=F(),{error:a}=v(e),u=r?o(r):o;return i.createElement(g,{css:m,description:s,error:a,fieldId:e,hideLabel:l,label:d,prompt:n,required:Boolean(r==null?void 0:r.required),appearance:t},i.createElement(b,{id:e,name:e,ref:u,appearance:t,...a&&{state:"error"},...c,revalidate:f}))};p.displayName="DateField";export{p as DateField};
 //# sourceMappingURL=DateField.js.map

package/dist/components/date-field/DateField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n css,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n ...remainingProps\n}: DateFieldProps) => {\n const { register, trigger } = useFormContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n >\n <DateInput\n id={name}\n name={name}\n ref={ref}\n {...(error && { state: 'error' })}\n {...remainingProps}\n revalidate={trigger}\n />\n </FieldWrapper>\n )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","css","hideLabel","label","name","validation","prompt","description","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"~~gUAYO~~,~~MAAMA~~,EAAY,CAAC,CACxB,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,~~EACxB~~,~~EAAA~~,CAAE,MAAAC,CAAM,EAAIC,~~EAAcT~~,CAAI,~~EAC9BU~~,~~EAAMT~~,~~EAAaI~~,~~EAASJ~~,CAAU,~~EAAII~~,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,~~IAAKf~~,EACL,YAAaM,EACb,~~MAAOK~~,EACP,~~QAASR~~,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,~~CAAA~~,~~EAEtCU~~,EAAA,cAACE,EAAA,CACC,~~GAAIb~~,EACJ,KAAMA,EACN,~~IAAKU~~,~~EACJ~~,~~GAAIF~~,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,~~EAEAV~~,EAAU,YAAc"}
1	+ {"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n css,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n appearance,\n ...remainingProps\n}: DateFieldProps) => {\n const { register, trigger } = useFormContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={appearance}\n >\n <DateInput\n id={name}\n name={name}\n ref={ref}\n appearance={appearance}\n {...(error && { state: 'error' })}\n {...remainingProps}\n revalidate={trigger}\n />\n </FieldWrapper>\n )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","css","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"wWAYa,MAAAA,EAAY,CAAC,CACxB,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EAAe,EACvC,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9BW,EAAMV,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,IAAKhB,EACL,YAAaM,EACb,MAAOM,EACP,QAAST,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYG,CAAAA,EAEZQ,EAAA,cAACE,EAAA,CACC,GAAId,EACJ,KAAMA,EACN,IAAKW,EACL,WAAYP,EACX,GAAIK,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAX,EAAU,YAAc"}

package/dist/components/field-wrapper/FieldWrapper.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ValidationOptions } from '../../components/form';
 import type { CSS } from '../../stitches';
+import { type LabelProps } from '../label/Label';
 export type FieldWrapperProps = {
     css?: CSS;
     error?: string;
@@ -14,12 +15,13 @@ export type FieldWrapperProps = {
     description?: string;
     required?: boolean;
     hideLabel?: boolean;
+    appearance?: LabelProps['appearance'];
 };
 export type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {
     name: string;
     validation?: ValidationOptions;
 };
 export declare const FieldWrapper: {
-    ({ css, children, error, fieldId, label, prompt, description, required, hideLabel }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
+    ({ css, children, error, fieldId, label, prompt, description, required, hideLabel, appearance }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
     displayName: string;
 };