@mond-design-system/react 6.3.0 → 6.4.0

package/dist/index.d.cts

@@ -976,6 +976,8 @@ interface DataColumn<Row> {
     width?: string;
     cell: (row: Row) => ReactNode;
 }
+/** A row's standing, read across the whole row. */
+type DataTableRowTone = "danger" | "warning" | "success";
 interface DataTableSelectionLabels {
     /** Names one row's box — "Select Ada Lovelace". The row's own label is
         handed in, so the sentence is the app's to build. */
@@ -1016,6 +1018,9 @@ type DataTableProps<Row> = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
     actionsHeader?: ReactNode;
     /** A row the table still lists but no longer counts — suspended, hidden. */
     rowMuted?: (row: Row) => boolean;
+    /** A row that needs a hand on it — tinted across every cell. The tint is
+        colour only, so say why in a cell as well. */
+    rowTone?: (row: Row) => DataTableRowTone | undefined;
     /** Shown in place of the rows when there are none. */
     empty?: ReactNode;
     ref?: Ref<HTMLDivElement>;
@@ -1042,7 +1047,7 @@ type DataTableProps<Row> = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
  * />
  * ```
  */
-declare function DataTable<Row>({ label, columns, rows, rowKey, rowLabel, rowActions, actionsHeader, rowMuted, empty, ref, selected, onSelectedChange, selectionLabels, bulkActions, className, ...rest }: DataTableProps<Row>): ReactElement;
+declare function DataTable<Row>({ label, columns, rows, rowKey, rowLabel, rowActions, actionsHeader, rowMuted, rowTone, empty, ref, selected, onSelectedChange, selectionLabels, bulkActions, className, ...rest }: DataTableProps<Row>): ReactElement;
 
 interface EmptyStateProps {
     title: string;
@@ -2171,4 +2176,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyClip, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Menu, MenuItem, type MenuItemProps, type MenuPlacement, type MenuProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, Popover, PopoverBody, PopoverFooter, PopoverHeader, type PopoverHeaderProps, type PopoverPlacement, type PopoverProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, Tooltip, type TooltipPlacement, type TooltipProps, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyClip, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableRowTone, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Menu, MenuItem, type MenuItemProps, type MenuPlacement, type MenuProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, Popover, PopoverBody, PopoverFooter, PopoverHeader, type PopoverHeaderProps, type PopoverPlacement, type PopoverProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, Tooltip, type TooltipPlacement, type TooltipProps, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };

package/dist/index.d.ts

@@ -976,6 +976,8 @@ interface DataColumn<Row> {
     width?: string;
     cell: (row: Row) => ReactNode;
 }
+/** A row's standing, read across the whole row. */
+type DataTableRowTone = "danger" | "warning" | "success";
 interface DataTableSelectionLabels {
     /** Names one row's box — "Select Ada Lovelace". The row's own label is
         handed in, so the sentence is the app's to build. */
@@ -1016,6 +1018,9 @@ type DataTableProps<Row> = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
     actionsHeader?: ReactNode;
     /** A row the table still lists but no longer counts — suspended, hidden. */
     rowMuted?: (row: Row) => boolean;
+    /** A row that needs a hand on it — tinted across every cell. The tint is
+        colour only, so say why in a cell as well. */
+    rowTone?: (row: Row) => DataTableRowTone | undefined;
     /** Shown in place of the rows when there are none. */
     empty?: ReactNode;
     ref?: Ref<HTMLDivElement>;
@@ -1042,7 +1047,7 @@ type DataTableProps<Row> = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
  * />
  * ```
  */
-declare function DataTable<Row>({ label, columns, rows, rowKey, rowLabel, rowActions, actionsHeader, rowMuted, empty, ref, selected, onSelectedChange, selectionLabels, bulkActions, className, ...rest }: DataTableProps<Row>): ReactElement;
+declare function DataTable<Row>({ label, columns, rows, rowKey, rowLabel, rowActions, actionsHeader, rowMuted, rowTone, empty, ref, selected, onSelectedChange, selectionLabels, bulkActions, className, ...rest }: DataTableProps<Row>): ReactElement;
 
 interface EmptyStateProps {
     title: string;
@@ -2171,4 +2176,4 @@ interface RovingGroupOptions {
  */
 declare function useRovingGroup(ref: RefObject<HTMLElement | null>, { selector, orientation }: RovingGroupOptions): (event: KeyboardEvent<HTMLElement>) => void;
 
-export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyClip, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Menu, MenuItem, type MenuItemProps, type MenuPlacement, type MenuProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, Popover, PopoverBody, PopoverFooter, PopoverHeader, type PopoverHeaderProps, type PopoverPlacement, type PopoverProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, Tooltip, type TooltipPlacement, type TooltipProps, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };
+export { AppBar, type AppBarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, type CSSVars, Card, CardBody, type CardBodyClip, type CardBodyProps, CardFooter, CardHeader, type CardProps, type CardSectionProps, type CardVariant, type CarouselPager, type CarouselSlide, Checkbox, type CheckboxProps, Chip, ChipBar, type ChipBarGap, type ChipBarProps, ChipGroup, type ChipGroupGap, type ChipGroupProps, type ChipProps, type ChipVariant, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogTone, Container, type ContainerProps, type ContainerWidth, CountButton, type CountButtonProps, type CountButtonTone, type Crumb, type DataColumn, DataTable, type DataTableProps, type DataTableRowTone, type DataTableSelectionLabels, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, Field, type FieldContextValue, type FieldProps, FileDrop, type FileDropProps, Heading, type HeadingLevel, type HeadingProps, type HeadingTone, Icon, type IconProps, IconProvider, type IconProviderProps, type IconRender, type IconRenderProps, type IconSize, ImageCarousel, type ImageCarouselLabels, type ImageCarouselProps, Inline, type InlineAlign, type InlineGap, type InlineJustify, type InlineProps, Input, type InputProps, type InputSize, Lightbox, type LightboxLabels, type LightboxProps, Link, type LinkProps, type LinkVariant, ListGroup, type ListGroupProps, ListItem, type ListItemProps, MediaPlaceholder, type MediaPlaceholderProps, Menu, MenuItem, type MenuItemProps, type MenuPlacement, type MenuProps, Modal, ModalBody, ModalFooter, ModalHeader, type ModalProps, type OverlayHistory, OverlayHistoryContext, PasswordInput, type PasswordInputProps, Popover, PopoverBody, PopoverFooter, PopoverHeader, type PopoverHeaderProps, type PopoverPlacement, type PopoverProps, type Presence, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RovingGroupOptions, Screen, ScreenContent, type ScreenContentProps, Scroller, type ScrollerLabels, type ScrollerProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectProps, type SelectSize, Sheet, SheetBody, SheetFooter, SheetHeader, type SheetProps, SideNav, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackProps, Switch, type SwitchProps, Tab, TabBar, TabBarAction, type TabBarActionProps, TabBarItem, type TabBarItemProps, type TabBarProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagTone, Text, type TextProps, type TextTone, type TextVariant, Textarea, type TextareaProps, type ToastAction, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastTone, Tooltip, type TooltipPlacement, type TooltipProps, UploadProgress, type UploadProgressLabels, type UploadProgressProps, type UploadStatus, type UseOverlayOptions, type VideoCaptions, type VideoChapter, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, VisuallyHidden, type VisuallyHiddenProps, cx, useFieldContext, useOverlay, usePresence, useRovingGroup, useToast };

package/dist/index.js

@@ -1540,7 +1540,7 @@ function ListItem({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/DataTable/DataTable.module.css?mds-scoped
-var DataTable_module_default = { "root": "mds-DataTable__root", "scroll": "mds-DataTable__scroll", "table": "mds-DataTable__table", "row": "mds-DataTable__row", "body": "mds-DataTable__body", "selected": "mds-DataTable__selected", "cell": "mds-DataTable__cell", "select": "mds-DataTable__select", "actions": "mds-DataTable__actions", "muted": "mds-DataTable__muted", "empty": "mds-DataTable__empty", "bulk": "mds-DataTable__bulk", "bulkActions": "mds-DataTable__bulkActions" };
+var DataTable_module_default = { "root": "mds-DataTable__root", "scroll": "mds-DataTable__scroll", "table": "mds-DataTable__table", "row": "mds-DataTable__row", "body": "mds-DataTable__body", "selected": "mds-DataTable__selected", "danger": "mds-DataTable__danger", "warning": "mds-DataTable__warning", "success": "mds-DataTable__success", "cell": "mds-DataTable__cell", "select": "mds-DataTable__select", "actions": "mds-DataTable__actions", "muted": "mds-DataTable__muted", "empty": "mds-DataTable__empty", "bulk": "mds-DataTable__bulk", "bulkActions": "mds-DataTable__bulkActions" };
 function DataTable({
   label,
   columns,
@@ -1550,6 +1550,7 @@ function DataTable({
   rowActions,
   actionsHeader,
   rowMuted,
+  rowTone,
   empty,
   ref,
   selected,
@@ -1604,13 +1605,15 @@ function DataTable({
       /* @__PURE__ */ jsx("tbody", { className: DataTable_module_default.body, children: rows.length > 0 ? rows.map((row) => {
         const key = rowKey(row);
         const taken = selected?.includes(key) ?? false;
+        const tone = rowTone?.(row);
         return /* @__PURE__ */ jsxs(
           "tr",
           {
             className: cx(
               DataTable_module_default.row,
               taken && DataTable_module_default.selected,
-              rowMuted?.(row) === true && DataTable_module_default.muted
+              rowMuted?.(row) === true && DataTable_module_default.muted,
+              tone !== void 0 && DataTable_module_default[tone]
             ),
             children: [
               selectable && /* @__PURE__ */ jsx("td", { className: DataTable_module_default.select, children: /* @__PURE__ */ jsx(