@salt-ds/data-grid 1.0.4-alpha.0 → 1.0.4-alpha.2

package/dist-es/packages/data-grid/src/GridColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridColumn.js","sources":["../src/GridColumn.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  ComponentType,\n  CSSProperties,\n  isValidElement,\n  KeyboardEvent,\n  ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useGridContext } from \"./GridContext\";\nimport { GridColumnModel, GridRowModel, SortOrder } from \"./Grid\";\n\nexport type GridColumnPin = \"left\" | \"right\" | null;\n\nexport type CellValidationState = \"error\" | \"warning\" | \"success\";\ntype CellValidationType = \"strong\" | \"light\";\n\nexport interface GridCellProps<T, U = any> {\n  row: GridRowModel<T>;\n  column: GridColumnModel<T>;\n  className?: string;\n  style?: CSSProperties;\n  isFocused?: boolean;\n  isSelected?: boolean;\n  isEditable?: boolean;\n  children?: ReactNode;\n  align?: GridColumnProps[\"align\"];\n  value?: U;\n  validationStatus?: CellValidationState;\n  validationMessage?: string;\n  validationType?: CellValidationType;\n}\n\nexport interface GridCellValueProps<T, U = any> {\n  row: GridRowModel<T>;\n  column: GridColumnModel<T>;\n  isFocused?: boolean;\n  value?: U;\n  validationStatus?: CellValidationState;\n  validationMessage?: string;\n  validationType?: CellValidationType;\n}\n\nexport interface HeaderCellProps<T> {\n  column: GridColumnModel<T>;\n  children: ReactNode;\n  isFocused?: boolean;\n}\n\nexport interface GridHeaderValueProps<T> {\n  column: GridColumnModel<T>;\n  isFocused?: boolean;\n}\n\nexport interface GridEditorProps<T> {\n  row: GridRowModel<T>;\n  column: GridColumnModel<T>;\n}\n\nexport interface GridColumnProps<T = any> {\n  /**\n   * Unique identifier of the column.\n   * */\n  id: string; // TODO make optional\n  /**\n   * Enables sorting (by sort order: `asc | desc | none`) for the column.\n   * To enable column header's keyboard navigation on sort,\n   * users need to set `headerIsFocusable` prop to `true` in Grid component.\n   * To customise how GridColumn data sorts, use also  `customSort` or `onSortOrderChanged`.\n   * */\n  sortable?: boolean;\n  /**\n   * Custom sorting function. Use for client side sorting.\n   * */\n  customSort?: (args: { rowData: T[]; sortOrder: SortOrder }) => T[];\n  /**\n   * Exposes GridColumn sort order. Use for server side sorting.\n   * */\n  onSortOrderChange?: (args: { sortOrder: SortOrder }) => void;\n  /**\n   * Name is displayed on the column header by default.\n   * */\n  name?: string;\n  /**\n   * Default width of the column in `px`.\n   * */\n  defaultWidth?: number;\n  /**\n   * Min width of the column.\n   * */\n  minWidth?: number;\n  /**\n   * Callback invoked when the user resizes the column.\n   * */\n  onWidthChanged?: (width: number) => void;\n  /**\n   * Whether the column should be pinned `left` or `right`. By default columns\n   * are unpinned. Accepts `\"left\" | \"right\" | null`.\n   * */\n  pinned?: GridColumnPin;\n  /**\n   * Text align for the header and cells.\n   * */\n  align?: \"left\" | \"right\";\n  /**\n   * Component to render for every cell in the column. Useful when major\n   * customization is needed. Use this only if `cellValueComponent` is not\n   * sufficient. Default implementation of cell component takes care of\n   * selection, hover, focus and other basic grid features.\n   * */\n  cellComponent?: ComponentType<GridCellProps<T>>;\n  /**\n   * Component to render inside every cell. This is the preferred way of\n   * customizing grid cells.\n   * */\n  cellValueComponent?: ComponentType<GridCellValueProps<T>>;\n  /**\n   * Cell value getter. Should return the value to be displayed in the cell\n   * for the given row data item.\n   * */\n  getValue?: (rowData: T) => any;\n  /**\n   * Cell validation status getter. Should return one of the known validation status names: \"none\" | \"error\" | \"warning\"\n   * If you require a custom validation status, you can achieve that by providing a custom cell component.\n   * */\n  getValidationStatus?: (\n    value: GridCellValueProps<T>\n  ) => CellValidationState | undefined;\n  /**\n   * Cell validation status message getter. Should return a string description of the validation state that can be used for the screen reader.\n   * This prop is optional but if you don't provide a function a default message will be used.\n   * */\n  getValidationMessage?: (value: GridCellValueProps<T>) => string | undefined;\n  /**\n   * Cell validation type. Determines the visual style of the validation. The available values are \"strong\" and \"light\". Strong will display the icon\n   * along side the background and border. Light will only affect border and background. Use light if you are validation the whole row, and optionally\n   * strong on one of the columns, and strong if you are validating user input on a particular cell.\n   * The default value is \"light\".\n   * */\n  validationType?: GridCellProps<T>[\"validationType\"];\n  /**\n   * CSS class to be applied to the column header.\n   * Useful for minor customizations\n   * */\n  headerClassName?: string;\n  /**\n   * Custom header component. Use this when `headerValueComponent` doesn't\n   * provide enough flexibility.\n   * */\n  headerComponent?: ComponentType<HeaderCellProps<T>>;\n  /**\n   * Renders the content of the column header. This is the preferred way of\n   * customizing column headers.\n   * */\n  headerValueComponent?: ComponentType<GridHeaderValueProps<T>>;\n  /**\n   * A callback to be invoked when the user modifies a cell value.\n   * */\n  onChange?: (row: T, rowIndex: number, value: string) => void;\n  /**\n   * A callback to be invoked on key down when the focus is in this column.\n   */\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>, rowIndex: number) => void;\n  /**\n   * Children is optional, and accepts non-rendered elements i.e. `CellEditor`\n   */\n  children?: ReactNode;\n  /**\n   * aria-label is optional, and accepts any string value\n   */\n  \"aria-label\"?: string;\n}\n\nexport interface GridColumnInfo<T> {\n  width: number;\n  onWidthChanged: (width: number) => void;\n  props: GridColumnProps<T>;\n}\n\nexport const GridColumn = function GridColumn<T = any>(\n  props: GridColumnProps<T>\n) {\n  const { defaultWidth } = props;\n  const indexRef = useRef<number>();\n  const [width, setWidth] = useState<number>(\n    defaultWidth !== undefined ? defaultWidth : 100\n  );\n\n  const grid = useGridContext();\n\n  const onWidthChanged = (w: number) => {\n    setWidth(w);\n    if (props.onWidthChanged) {\n      props.onWidthChanged(w);\n    }\n  };\n\n  const info: GridColumnInfo<T> = {\n    width,\n    onWidthChanged,\n    props,\n  };\n\n  useEffect(() => {\n    indexRef.current = grid.getChildIndex(props.id);\n    grid.onColumnAdded(info);\n    return () => {\n      grid.onColumnRemoved(indexRef.current!, info);\n    };\n  });\n\n  return (\n    <>\n      {Children.map(props.children, (ch) =>\n        isValidElement(ch)\n          ? cloneElement(ch, { columnId: props.id } as any)\n          : ch\n      )}\n    </>\n  );\n};\n"],"names":["GridColumn"],"mappings":";;;;AAsLa,MAAA,UAAA,GAAa,SAASA,WAAAA,CACjC,KACA,EAAA;AACA,EAAM,MAAA,EAAE,cAAiB,GAAA,KAAA,CAAA;AACzB,EAAA,MAAM,WAAW,MAAe,EAAA,CAAA;AAChC,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,IACxB,YAAA,KAAiB,SAAY,YAAe,GAAA,GAAA;AAAA,GAC9C,CAAA;AAEA,EAAA,MAAM,OAAO,cAAe,EAAA,CAAA;AAE5B,EAAM,MAAA,cAAA,GAAiB,CAAC,CAAc,KAAA;AACpC,IAAA,QAAA,CAAS,CAAC,CAAA,CAAA;AACV,IAAA,IAAI,MAAM,cAAgB,EAAA;AACxB,MAAA,KAAA,CAAM,eAAe,CAAC,CAAA,CAAA;AAAA,KACxB;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,IAA0B,GAAA;AAAA,IAC9B,KAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,GACF,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAU,GAAA,IAAA,CAAK,aAAc,CAAA,KAAA,CAAM,EAAE,CAAA,CAAA;AAC9C,IAAA,IAAA,CAAK,cAAc,IAAI,CAAA,CAAA;AACvB,IAAA,OAAO,MAAM;AACX,MAAK,IAAA,CAAA,eAAA,CAAgB,QAAS,CAAA,OAAA,EAAU,IAAI,CAAA,CAAA;AAAA,KAC9C,CAAA;AAAA,GACD,CAAA,CAAA;AAED,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,IACG,QAAS,EAAA,QAAA,CAAA,GAAA;AAAA,MAAI,KAAM,CAAA,QAAA;AAAA,MAAU,CAAC,EAAA,KAC7B,cAAe,CAAA,EAAE,CACb,GAAA,YAAA,CAAa,EAAI,EAAA,EAAE,QAAU,EAAA,KAAA,CAAM,EAAG,EAAQ,CAC9C,GAAA,EAAA;AAAA,KACN;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/data-grid/src/HeaderCell.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltGridHeaderCell {\n  text-align: left;\n  font-size: var(--grid-header-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  line-height: var(--grid-row-height);\n  position: relative;\n  box-sizing: border-box;\n  color: var(--grid-header-color);\n  white-space: nowrap;\n  outline: 0;\n}\n\n.saltGridHeaderCell-valueContainer {\n  line-height: var(--grid-row-height);\n  padding: var(--grid-cell-padding);\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltGridHeaderCell-alignRight {\n  text-align: right;\n}\n\n.saltGridHeaderCell-alignRightWithSortOrder {\n  margin-left: calc(var(--salt-size-unit) * 2);\n}\n\n.saltGridHeaderCell-alignLeftWithSortOrder {\n  margin-right: calc(var(--salt-size-unit) * 2);\n}\n\n.saltGridHeaderCell-autosizeContainer {\n  line-height: var(--grid-row-height);\n  padding: 0;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n}\n\n.saltGridHeaderCell-measuredContent {\n  height: 100%;\n  display: inline-block;\n  padding: var(--grid-cell-padding);\n}\n\n.saltGridHeaderCell-text {\n  color: var(--grid-header-color);\n  overflow: hidden;\n}\n\n.saltGridHeaderCell-regularSeparator {\n  background: var(--grid-headerColumnSeparator-color);\n  width: 1px;\n  height: auto;\n  position: absolute;\n  right: 0;\n  top: var(--grid-separatorGap);\n  bottom: var(--grid-separatorGap);\n}\n\n.saltGridHeaderCell-groupEdgeSeparator,\n.saltGridHeaderCell-pinnedSeparator {\n  background: var(--grid-headerColumnSeparator-color);\n  width: 1px;\n  height: auto;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: var(--grid-separatorGap);\n}\n\n.saltGrid-pinnedSeparators .saltGridHeaderCell-pinnedSeparator {\n  background: var(--grid-pinnedSeparator-color);\n  width: 1px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  bottom: 0;\n}\n\n.saltGridHeaderCell-resizeHandle {\n  position: absolute;\n  right: -8px;\n  top: 0;\n  bottom: 0;\n  width: 16px;\n  background: transparent;\n  cursor: col-resize;\n  z-index: 2;\n}\n\n.saltGridHeaderCell-sortable {\n  cursor: pointer;\n}\n\n.saltGridHeaderCell-sortingIcon {\n  display: flex;\n  margin: 0 var(--salt-size-unit);\n}\n\n.saltGridHeaderCell-sortingIconStart {\n  justify-content: start;\n}\n\n.saltGridHeaderCell-sortingIconEnd {\n  justify-content: end;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=HeaderCell.css.js.map

package/dist-es/packages/{grid → data-grid}/src/HeaderCell.js

@@ -3,6 +3,7 @@ import './HeaderCell.css.js';
 import { useRef } from 'react';
 import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
 import { clsx } from 'clsx';
+import { SortOrder } from './Grid.js';
 import { useSizingContext } from './SizingContext.js';
 import { useColumnDragContext } from './ColumnDragContext.js';
 import './internal/Cell.js';
@@ -24,6 +25,8 @@ import './internal/TopPart.js';
 import './internal/TopRightPart.js';
 import './internal/FakeCell.css.js';
 import './internal/DefaultCellValue.js';
+import { useColumnSortContext } from './ColumnSortContext.js';
+import { ArrowUpIcon, ArrowDownIcon } from '@salt-ds/icons';
 
 const withBaseName = makePrefixer("saltGridHeaderCell");
 function HeaderCellSeparator(props) {
@@ -35,27 +38,88 @@ function HeaderCellSeparator(props) {
 function HeaderCell(props) {
   const { column, children, isFocused } = props;
   const { separator } = column;
+  const { align, id, headerClassName, sortable, onSortOrderChange } = column.info.props;
   const { onResizeHandleMouseDown } = useSizingContext();
   const { columnMove, onColumnMoveHandleMouseDown } = useColumnDragContext();
   const onMouseDown = columnMove ? onColumnMoveHandleMouseDown : void 0;
   const { ref, isFocusableContent, onFocus } = useFocusableContent();
+  const {
+    onClickSortColumn,
+    setSortByColumnId,
+    sortOrder,
+    sortByColumnId,
+    setSortOrder
+  } = useColumnSortContext();
+  const valueAlignRight = align === "right";
+  const HeaderCellSortingIcon = ({ justify }) => {
+    const className = withBaseName("sortingIcon");
+    const icon = /* @__PURE__ */ jsxs("div", {
+      className: clsx(className, {
+        [withBaseName("sortingIconStart")]: justify === "start",
+        [withBaseName("sortingIconEnd")]: justify === "end"
+      }),
+      "aria-hidden": true,
+      children: [
+        sortOrder === SortOrder.ASC && /* @__PURE__ */ jsx(ArrowUpIcon, {}),
+        sortOrder === SortOrder.DESC && /* @__PURE__ */ jsx(ArrowDownIcon, {})
+      ]
+    });
+    return icon;
+  };
+  const ariaSortMap = {
+    asc: "ascending",
+    desc: "descending",
+    none: "none"
+  };
+  const ariaSort = ariaSortMap[sortOrder];
+  const order = sortOrder === SortOrder.ASC ? SortOrder.DESC : sortOrder === SortOrder.DESC ? SortOrder.NONE : SortOrder.ASC;
+  const withSortOrder = sortOrder !== SortOrder.NONE && sortByColumnId === id;
+  const onClick = () => {
+    if (onSortOrderChange) {
+      setSortByColumnId(id);
+      setSortOrder(order);
+      onSortOrderChange({ sortOrder: order });
+      return;
+    }
+    setSortByColumnId(id);
+    onClickSortColumn(id);
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      onClick();
+    }
+  };
   return /* @__PURE__ */ jsxs("th", {
     ref,
     "aria-colindex": column.index + 1,
     "data-column-index": column.index,
-    className: clsx(withBaseName(), column.info.props.headerClassName),
+    className: clsx(withBaseName(), headerClassName, {
+      [withBaseName("sortable")]: sortable
+    }),
     role: "columnheader",
     "data-testid": "column-header",
     tabIndex: isFocused && !isFocusableContent ? 0 : -1,
     onFocus,
+    onClick: sortable ? onClick : void 0,
+    onKeyDown: sortable ? onKeyDown : void 0,
+    "aria-sort": sortByColumnId === id && sortable ? ariaSort : void 0,
+    "aria-label": column.info.props["aria-label"],
     children: [
+      sortByColumnId === id && sortable && valueAlignRight && /* @__PURE__ */ jsx(HeaderCellSortingIcon, {
+        justify: "start"
+      }),
       /* @__PURE__ */ jsx("div", {
         className: clsx(withBaseName("valueContainer"), {
-          [withBaseName("alignRight")]: column.info.props.align === "right"
+          [withBaseName("alignRight")]: valueAlignRight,
+          [withBaseName("alignRightWithSortOrder")]: valueAlignRight && withSortOrder,
+          [withBaseName("alignLeftWithSortOrder")]: !valueAlignRight && withSortOrder
         }),
         onMouseDown,
         children
       }),
+      sortByColumnId === id && sortable && !valueAlignRight && /* @__PURE__ */ jsx(HeaderCellSortingIcon, {
+        justify: "end"
+      }),
       /* @__PURE__ */ jsx(HeaderCellSeparator, {
         separatorType: separator
       }),

package/dist-es/packages/data-grid/src/HeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderCell.js","sources":["../src/HeaderCell.tsx"],"sourcesContent":["import \"./HeaderCell.css\";\nimport { KeyboardEventHandler, useRef } from \"react\";\nimport {\n  FlexContentAlignment,\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ColumnSeparatorType, SortOrder } from \"./Grid\";\nimport { useSizingContext } from \"./SizingContext\";\nimport { useColumnDragContext } from \"./ColumnDragContext\";\nimport { Cursor, useFocusableContent } from \"./internal\";\nimport { HeaderCellProps } from \"./GridColumn\";\nimport { useColumnSortContext } from \"./ColumnSortContext\";\nimport { ArrowDownIcon, ArrowUpIcon } from \"@salt-ds/icons\";\n\nconst withBaseName = makePrefixer(\"saltGridHeaderCell\");\n\nexport interface HeaderCellSeparatorProps {\n  separatorType: ColumnSeparatorType;\n}\n\nexport function HeaderCellSeparator(props: HeaderCellSeparatorProps) {\n  const className = withBaseName([props.separatorType, \"Separator\"].join(\"\"));\n  return <div className={className} />;\n}\n\ntype AriaSortProps = \"none\" | \"ascending\" | \"descending\";\n\nexport function HeaderCell<T>(props: HeaderCellProps<T>) {\n  const { column, children, isFocused } = props;\n  const { separator } = column;\n  const { align, id, headerClassName, sortable, onSortOrderChange } =\n    column.info.props;\n  const { onResizeHandleMouseDown } = useSizingContext();\n\n  const { columnMove, onColumnMoveHandleMouseDown } = useColumnDragContext();\n  const onMouseDown = columnMove ? onColumnMoveHandleMouseDown : undefined;\n\n  const { ref, isFocusableContent, onFocus } =\n    useFocusableContent<HTMLTableHeaderCellElement>();\n\n  const {\n    onClickSortColumn,\n    setSortByColumnId,\n    sortOrder,\n    sortByColumnId,\n    setSortOrder,\n  } = useColumnSortContext();\n\n  const valueAlignRight = align === \"right\";\n\n  interface HeaderCellSortingIconProps {\n    justify: FlexContentAlignment;\n  }\n\n  const HeaderCellSortingIcon = ({ justify }: HeaderCellSortingIconProps) => {\n    const className = withBaseName(\"sortingIcon\");\n    const icon = (\n      <div\n        className={clsx(className, {\n          [withBaseName(\"sortingIconStart\")]: justify === \"start\",\n          [withBaseName(\"sortingIconEnd\")]: justify === \"end\",\n        })}\n        aria-hidden\n      >\n        {sortOrder === SortOrder.ASC && <ArrowUpIcon />}\n        {sortOrder === SortOrder.DESC && <ArrowDownIcon />}\n      </div>\n    );\n\n    return icon;\n  };\n\n  const ariaSortMap = {\n    asc: \"ascending\",\n    desc: \"descending\",\n    none: \"none\",\n  };\n\n  const ariaSort = ariaSortMap[sortOrder] as AriaSortProps;\n\n  const order =\n    sortOrder === SortOrder.ASC\n      ? SortOrder.DESC\n      : sortOrder === SortOrder.DESC\n      ? SortOrder.NONE\n      : SortOrder.ASC;\n\n  const withSortOrder = sortOrder !== SortOrder.NONE && sortByColumnId === id;\n\n  const onClick = () => {\n    if (onSortOrderChange) {\n      setSortByColumnId(id);\n      setSortOrder(order);\n      onSortOrderChange({ sortOrder: order });\n      return;\n    }\n    setSortByColumnId(id);\n    onClickSortColumn(id);\n  };\n\n  const onKeyDown: KeyboardEventHandler<HTMLTableHeaderCellElement> = (\n    event\n  ) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      onClick();\n    }\n  };\n\n  return (\n    <th\n      ref={ref}\n      aria-colindex={column.index + 1}\n      data-column-index={column.index}\n      className={clsx(withBaseName(), headerClassName, {\n        [withBaseName(\"sortable\")]: sortable,\n      })}\n      role=\"columnheader\"\n      data-testid=\"column-header\"\n      tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n      onFocus={onFocus}\n      onClick={sortable ? onClick : undefined}\n      onKeyDown={sortable ? onKeyDown : undefined}\n      aria-sort={sortByColumnId === id && sortable ? ariaSort : undefined}\n      aria-label={column.info.props[\"aria-label\"]}\n    >\n      {sortByColumnId === id && sortable && valueAlignRight && (\n        <HeaderCellSortingIcon justify=\"start\" />\n      )}\n      <div\n        className={clsx(withBaseName(\"valueContainer\"), {\n          [withBaseName(\"alignRight\")]: valueAlignRight,\n          // both classNames below needed to ensure header cell title & sort icon do not overlap when column resized to be smaller\n          [withBaseName(\"alignRightWithSortOrder\")]:\n            valueAlignRight && withSortOrder,\n          [withBaseName(\"alignLeftWithSortOrder\")]:\n            !valueAlignRight && withSortOrder,\n        })}\n        onMouseDown={onMouseDown}\n      >\n        {children}\n      </div>\n      {sortByColumnId === id && sortable && !valueAlignRight && (\n        <HeaderCellSortingIcon justify=\"end\" />\n      )}\n      <HeaderCellSeparator separatorType={separator} />\n      <div\n        data-testid={`column-${column.index}-resize-handle`}\n        className={withBaseName(\"resizeHandle\")}\n        onMouseDown={onResizeHandleMouseDown}\n      />\n      {isFocused && !isFocusableContent && <Cursor />}\n    </th>\n  );\n}\n\nexport function AutoSizeHeaderCell<T>(props: HeaderCellProps<T>) {\n  const { column, children, isFocused } = props;\n  const { separator } = column;\n  const valueContainerRef = useRef<HTMLDivElement>(null);\n  const { resizeColumn } = useSizingContext();\n\n  const { ref, isFocusableContent, onFocus } =\n    useFocusableContent<HTMLTableHeaderCellElement>();\n\n  useIsomorphicLayoutEffect(() => {\n    const width = valueContainerRef.current\n      ? valueContainerRef.current.offsetWidth\n      : undefined;\n    if (width != undefined && width !== column.info.width) {\n      resizeColumn(column.index, width);\n    }\n  });\n\n  return (\n    <th\n      ref={ref}\n      aria-colindex={column.index + 1}\n      data-column-index={column.index}\n      className={withBaseName()}\n      role=\"columnheader\"\n      data-testid=\"column-header\"\n      tabIndex={isFocused && !isFocusableContent ? 0 : -1}\n      onFocus={onFocus}\n    >\n      <div className={withBaseName(\"autosizeContainer\")}>\n        <div\n          ref={valueContainerRef}\n          className={withBaseName(\"measuredContent\")}\n        >\n          {children}\n        </div>\n      </div>\n      <HeaderCellSeparator separatorType={separator} />\n      {isFocused && !isFocusableContent && <Cursor />}\n    </th>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAM/C,SAAS,oBAAoB,KAAiC,EAAA;AACnE,EAAM,MAAA,SAAA,GAAY,aAAa,CAAC,KAAA,CAAM,eAAe,WAAW,CAAA,CAAE,IAAK,CAAA,EAAE,CAAC,CAAA,CAAA;AAC1E,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA;AAAA,GAAsB,CAAA,CAAA;AACpC,CAAA;AAIO,SAAS,WAAc,KAA2B,EAAA;AACvD,EAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACxC,EAAM,MAAA,EAAE,WAAc,GAAA,MAAA,CAAA;AACtB,EAAM,MAAA,EAAE,OAAO,EAAI,EAAA,eAAA,EAAiB,UAAU,iBAAkB,EAAA,GAC9D,OAAO,IAAK,CAAA,KAAA,CAAA;AACd,EAAM,MAAA,EAAE,uBAAwB,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAErD,EAAA,MAAM,EAAE,UAAA,EAAY,2BAA4B,EAAA,GAAI,oBAAqB,EAAA,CAAA;AACzE,EAAM,MAAA,WAAA,GAAc,aAAa,2BAA8B,GAAA,KAAA,CAAA,CAAA;AAE/D,EAAA,MAAM,EAAE,GAAA,EAAK,kBAAoB,EAAA,OAAA,KAC/B,mBAAgD,EAAA,CAAA;AAElD,EAAM,MAAA;AAAA,IACJ,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,YAAA;AAAA,MACE,oBAAqB,EAAA,CAAA;AAEzB,EAAA,MAAM,kBAAkB,KAAU,KAAA,OAAA,CAAA;AAMlC,EAAA,MAAM,qBAAwB,GAAA,CAAC,EAAE,OAAA,EAA0C,KAAA;AACzE,IAAM,MAAA,SAAA,GAAY,aAAa,aAAa,CAAA,CAAA;AAC5C,IAAA,MAAM,uBACH,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,KAAK,SAAW,EAAA;AAAA,QACzB,CAAC,YAAA,CAAa,kBAAkB,CAAA,GAAI,OAAY,KAAA,OAAA;AAAA,QAChD,CAAC,YAAA,CAAa,gBAAgB,CAAA,GAAI,OAAY,KAAA,KAAA;AAAA,OAC/C,CAAA;AAAA,MACD,aAAW,EAAA,IAAA;AAAA,MAEV,QAAA,EAAA;AAAA,QAAc,SAAA,KAAA,SAAA,CAAU,GAAO,oBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,CAAA;AAAA,QAC5C,SAAc,KAAA,SAAA,CAAU,IAAQ,oBAAA,GAAA,CAAC,aAAc,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAClD,CAAA,CAAA;AAGF,IAAO,OAAA,IAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAA,MAAM,WAAc,GAAA;AAAA,IAClB,GAAK,EAAA,WAAA;AAAA,IACL,IAAM,EAAA,YAAA;AAAA,IACN,IAAM,EAAA,MAAA;AAAA,GACR,CAAA;AAEA,EAAA,MAAM,WAAW,WAAY,CAAA,SAAA,CAAA,CAAA;AAE7B,EAAM,MAAA,KAAA,GACJ,SAAc,KAAA,SAAA,CAAU,GACpB,GAAA,SAAA,CAAU,IACV,GAAA,SAAA,KAAc,SAAU,CAAA,IAAA,GACxB,SAAU,CAAA,IAAA,GACV,SAAU,CAAA,GAAA,CAAA;AAEhB,EAAA,MAAM,aAAgB,GAAA,SAAA,KAAc,SAAU,CAAA,IAAA,IAAQ,cAAmB,KAAA,EAAA,CAAA;AAEzE,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,IAAI,iBAAmB,EAAA;AACrB,MAAA,iBAAA,CAAkB,EAAE,CAAA,CAAA;AACpB,MAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,MAAkB,iBAAA,CAAA,EAAE,SAAW,EAAA,KAAA,EAAO,CAAA,CAAA;AACtC,MAAA,OAAA;AAAA,KACF;AACA,IAAA,iBAAA,CAAkB,EAAE,CAAA,CAAA;AACpB,IAAA,iBAAA,CAAkB,EAAE,CAAA,CAAA;AAAA,GACtB,CAAA;AAEA,EAAM,MAAA,SAAA,GAA8D,CAClE,KACG,KAAA;AACH,IAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AAC9C,MAAQ,OAAA,EAAA,CAAA;AAAA,KACV;AAAA,GACF,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,eAAA,EAAe,OAAO,KAAQ,GAAA,CAAA;AAAA,IAC9B,qBAAmB,MAAO,CAAA,KAAA;AAAA,IAC1B,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,eAAiB,EAAA;AAAA,MAC/C,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,KAC7B,CAAA;AAAA,IACD,IAAK,EAAA,cAAA;AAAA,IACL,aAAY,EAAA,eAAA;AAAA,IACZ,QAAU,EAAA,SAAA,IAAa,CAAC,kBAAA,GAAqB,CAAI,GAAA,CAAA,CAAA;AAAA,IACjD,OAAA;AAAA,IACA,OAAA,EAAS,WAAW,OAAU,GAAA,KAAA,CAAA;AAAA,IAC9B,SAAA,EAAW,WAAW,SAAY,GAAA,KAAA,CAAA;AAAA,IAClC,WAAW,EAAA,cAAA,KAAmB,EAAM,IAAA,QAAA,GAAW,QAAW,GAAA,KAAA,CAAA;AAAA,IAC1D,YAAA,EAAY,MAAO,CAAA,IAAA,CAAK,KAAM,CAAA,YAAA,CAAA;AAAA,IAE7B,QAAA,EAAA;AAAA,MAAmB,cAAA,KAAA,EAAA,IAAM,QAAY,IAAA,eAAA,oBACnC,GAAA,CAAA,qBAAA,EAAA;AAAA,QAAsB,OAAQ,EAAA,OAAA;AAAA,OAAQ,CAAA;AAAA,sBAExC,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,gBAAgB,CAAG,EAAA;AAAA,UAC9C,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,eAAA;AAAA,UAE9B,CAAC,YAAA,CAAa,yBAAyB,CAAA,GACrC,eAAmB,IAAA,aAAA;AAAA,UACrB,CAAC,YAAA,CAAa,wBAAwB,CAAA,GACpC,CAAC,eAAmB,IAAA,aAAA;AAAA,SACvB,CAAA;AAAA,QACD,WAAA;AAAA,QAEC,QAAA;AAAA,OACH,CAAA;AAAA,MACC,cAAmB,KAAA,EAAA,IAAM,QAAY,IAAA,CAAC,mCACpC,GAAA,CAAA,qBAAA,EAAA;AAAA,QAAsB,OAAQ,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,sBAEtC,GAAA,CAAA,mBAAA,EAAA;AAAA,QAAoB,aAAe,EAAA,SAAA;AAAA,OAAW,CAAA;AAAA,sBAC9C,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,aAAA,EAAa,UAAU,MAAO,CAAA,KAAA,CAAA,cAAA,CAAA;AAAA,QAC9B,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,QACtC,WAAa,EAAA,uBAAA;AAAA,OACf,CAAA;AAAA,MACC,SAAa,IAAA,CAAC,kBAAsB,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAC/C,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,mBAAsB,KAA2B,EAAA;AAC/D,EAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACxC,EAAM,MAAA,EAAE,WAAc,GAAA,MAAA,CAAA;AACtB,EAAM,MAAA,iBAAA,GAAoB,OAAuB,IAAI,CAAA,CAAA;AACrD,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAE1C,EAAA,MAAM,EAAE,GAAA,EAAK,kBAAoB,EAAA,OAAA,KAC/B,mBAAgD,EAAA,CAAA;AAElD,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,KAAQ,GAAA,iBAAA,CAAkB,OAC5B,GAAA,iBAAA,CAAkB,QAAQ,WAC1B,GAAA,KAAA,CAAA,CAAA;AACJ,IAAA,IAAI,KAAS,IAAA,KAAA,CAAA,IAAa,KAAU,KAAA,MAAA,CAAO,KAAK,KAAO,EAAA;AACrD,MAAa,YAAA,CAAA,MAAA,CAAO,OAAO,KAAK,CAAA,CAAA;AAAA,KAClC;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,eAAA,EAAe,OAAO,KAAQ,GAAA,CAAA;AAAA,IAC9B,qBAAmB,MAAO,CAAA,KAAA;AAAA,IAC1B,WAAW,YAAa,EAAA;AAAA,IACxB,IAAK,EAAA,cAAA;AAAA,IACL,aAAY,EAAA,eAAA;AAAA,IACZ,QAAU,EAAA,SAAA,IAAa,CAAC,kBAAA,GAAqB,CAAI,GAAA,CAAA,CAAA;AAAA,IACjD,OAAA;AAAA,IAEA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,mBAAmB,CAAA;AAAA,QAC9C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,GAAK,EAAA,iBAAA;AAAA,UACL,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UAExC,QAAA;AAAA,SACH,CAAA;AAAA,OACF,CAAA;AAAA,sBACC,GAAA,CAAA,mBAAA,EAAA;AAAA,QAAoB,aAAe,EAAA,SAAA;AAAA,OAAW,CAAA;AAAA,MAC9C,SAAa,IAAA,CAAC,kBAAsB,oBAAA,GAAA,CAAC,MAAO,EAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAC/C,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/{grid → data-grid}/src/RowSelectionCheckboxColumn.js

@@ -1,4 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
 import { RowSelectionCheckboxHeaderCellValue } from './RowSelectionCheckboxHeaderCellValue.js';
 import { RowSelectionCheckboxCellValue } from './RowSelectionCheckboxCellValue.js';
 import { GridColumn } from './GridColumn.js';
@@ -7,13 +8,19 @@ import { AutoSizeHeaderCell } from './HeaderCell.js';
 
 function RowSelectionCheckboxColumn(props) {
   const { selectRows } = useSelectionContext();
-  const onKeyDown = (event, rowIndex) => {
-    if (event.key === " ") {
-      selectRows({ rowIndex, incremental: true });
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  };
+  const onKeyDown = useCallback(
+    (event, rowIndex) => {
+      if (event.key === " ") {
+        selectRows({
+          rowIndex,
+          incremental: true
+        });
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [selectRows]
+  );
   return /* @__PURE__ */ jsx(GridColumn, {
     ...props,
     defaultWidth: 100,

package/dist-es/packages/data-grid/src/RowSelectionCheckboxColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowSelectionCheckboxColumn.js","sources":["../src/RowSelectionCheckboxColumn.tsx"],"sourcesContent":["import { KeyboardEvent, useCallback } from \"react\";\nimport { RowSelectionCheckboxHeaderCellValue } from \"./RowSelectionCheckboxHeaderCellValue\";\nimport { RowSelectionCheckboxCellValue } from \"./RowSelectionCheckboxCellValue\";\nimport { GridColumn, GridColumnProps } from \"./GridColumn\";\nimport { useSelectionContext } from \"./SelectionContext\";\nimport { AutoSizeHeaderCell } from \"./HeaderCell\";\n\nexport type RowSelectionCheckboxColumnProps<T> = Omit<\n  GridColumnProps<T>,\n  \"width\" | \"name\"\n>;\n\nexport function RowSelectionCheckboxColumn<T>(\n  props: RowSelectionCheckboxColumnProps<T>\n) {\n  const { selectRows } = useSelectionContext();\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>, rowIndex: number) => {\n      if (event.key === \" \") {\n        selectRows({\n          rowIndex,\n          incremental: true,\n        });\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [selectRows]\n  );\n\n  return (\n    <GridColumn\n      {...props}\n      defaultWidth={100}\n      headerComponent={AutoSizeHeaderCell}\n      headerValueComponent={RowSelectionCheckboxHeaderCellValue}\n      cellValueComponent={RowSelectionCheckboxCellValue}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAYO,SAAS,2BACd,KACA,EAAA;AACA,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,mBAAoB,EAAA,CAAA;AAE3C,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,OAAsC,QAAqB,KAAA;AAC1D,MAAI,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AACrB,QAAW,UAAA,CAAA;AAAA,UACT,QAAA;AAAA,UACA,WAAa,EAAA,IAAA;AAAA,SACd,CAAA,CAAA;AACD,QAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,OACxB;AAAA,KACF;AAAA,IACA,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,YAAc,EAAA,GAAA;AAAA,IACd,eAAiB,EAAA,kBAAA;AAAA,IACjB,oBAAsB,EAAA,mCAAA;AAAA,IACtB,kBAAoB,EAAA,6BAAA;AAAA,IACpB,SAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/{grid → data-grid}/src/RowSelectionRadioColumn.js

@@ -3,16 +3,20 @@ import { RowSelectionRadioCellValue } from './RowSelectionRadioCellValue.js';
 import { GridColumn } from './GridColumn.js';
 import { RowSelectionRadioHeaderCell } from './RowSelectionRadioHeaderCell.js';
 import { useSelectionContext } from './SelectionContext.js';
+import { useCallback } from 'react';
 
 function RowSelectionRadioColumn(props) {
   const { selectRows } = useSelectionContext();
-  const onKeyDown = (event, rowIndex) => {
-    if (event.key === " ") {
-      selectRows({ rowIndex });
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  };
+  const onKeyDown = useCallback(
+    (event, rowIndex) => {
+      if (event.key === " ") {
+        selectRows({ rowIndex });
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [selectRows]
+  );
   return /* @__PURE__ */ jsx(GridColumn, {
     ...props,
     defaultWidth: 100,

package/dist-es/packages/data-grid/src/RowSelectionRadioColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowSelectionRadioColumn.js","sources":["../src/RowSelectionRadioColumn.tsx"],"sourcesContent":["import { RowSelectionRadioCellValue } from \"./RowSelectionRadioCellValue\";\nimport { GridColumn, GridColumnProps } from \"./GridColumn\";\nimport { RowSelectionRadioHeaderCell } from \"./RowSelectionRadioHeaderCell\";\nimport { useSelectionContext } from \"./SelectionContext\";\nimport { KeyboardEvent, useCallback } from \"react\";\n\nexport type RowSelectionRadioColumnProps<T> = Omit<\n  GridColumnProps<T>,\n  \"width\" | \"name\"\n>;\n\nexport function RowSelectionRadioColumn<T>(\n  props: RowSelectionRadioColumnProps<T>\n) {\n  const { selectRows } = useSelectionContext();\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>, rowIndex: number) => {\n      if (event.key === \" \") {\n        selectRows({ rowIndex });\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [selectRows]\n  );\n\n  return (\n    <GridColumn\n      {...props}\n      defaultWidth={100}\n      headerComponent={RowSelectionRadioHeaderCell}\n      cellValueComponent={RowSelectionRadioCellValue}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAWO,SAAS,wBACd,KACA,EAAA;AACA,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,mBAAoB,EAAA,CAAA;AAE3C,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,OAAsC,QAAqB,KAAA;AAC1D,MAAI,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AACrB,QAAW,UAAA,CAAA,EAAE,UAAU,CAAA,CAAA;AACvB,QAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,OACxB;AAAA,KACF;AAAA,IACA,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,YAAc,EAAA,GAAA;AAAA,IACd,eAAiB,EAAA,2BAAA;AAAA,IACjB,kBAAoB,EAAA,0BAAA;AAAA,IACpB,SAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/data-grid/src/RowValidationStatus.js

@@ -0,0 +1,9 @@
+import 'react/jsx-runtime';
+import '@salt-ds/core';
+import { createContext } from 'react';
+import './GridContext.js';
+
+const RowValidationStatusContext = createContext({});
+
+export { RowValidationStatusContext };
+//# sourceMappingURL=RowValidationStatus.js.map

package/dist-es/packages/data-grid/src/RowValidationStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowValidationStatus.js","sources":["../src/RowValidationStatus.tsx"],"sourcesContent":["import { StatusIndicator } from \"@salt-ds/core\";\nimport { createContext, useContext } from \"react\";\nimport { CellValidationState, GridColumn, GridColumnProps } from \"./GridColumn\";\n\nexport const RowValidationStatusContext = createContext<{\n  status?: CellValidationState;\n}>({});\n\nexport type RowValidationStatusColumnProps<T> = Omit<\n  GridColumnProps<T>,\n  \"width\" | \"name\"\n>;\n\nexport function RowValidationStatusColumn<T>(\n  props: RowValidationStatusColumnProps<T>\n) {\n  return (\n    <GridColumn\n      aria-label=\"Row status\"\n      defaultWidth={30}\n      cellValueComponent={RowValidationCell}\n      {...props}\n    />\n  );\n}\n\nconst knownStatus = new Set([\"error\", \"warning\", \"success\"]);\n\nfunction RowValidationCell() {\n  const rowValidationContext = useContext(RowValidationStatusContext);\n  if (\n    !rowValidationContext?.status ||\n    !knownStatus.has(rowValidationContext.status)\n  )\n    return null;\n\n  const validationStatus = rowValidationContext.status;\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        height: \"100%\",\n        width: \"100%\",\n      }}\n    >\n      <StatusIndicator\n        aria-label={`Row ${validationStatus}`}\n        status={validationStatus}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAIa,MAAA,0BAAA,GAA6B,aAEvC,CAAA,EAAE;;;;"}

package/dist-es/packages/{grid → data-grid}/src/index.js

@@ -12,7 +12,7 @@ export { RowSelectionCheckboxCellValue } from './RowSelectionCheckboxCellValue.j
 export { RowSelectionRadioColumn } from './RowSelectionRadioColumn.js';
 export { SelectionContext, useSelectionContext } from './SelectionContext.js';
 export { SizingContext, useSizingContext } from './SizingContext.js';
-export { Grid } from './Grid.js';
+export { Grid, SortOrder } from './Grid.js';
 export { GridColumn } from './GridColumn.js';
 export { GridContext, useGridContext } from './GridContext.js';
 export { RowSelectionCheckboxColumn } from './RowSelectionCheckboxColumn.js';

package/dist-es/packages/data-grid/src/internal/Cell.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltGridCell {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n\n  white-space: nowrap;\n  position: relative;\n  font-size: var(--grid-fontSize);\n  font-weight: normal;\n\n  outline: 0;\n}\n\n.saltGridCell-selected {\n  background: var(--grid-cell-background-selected);\n}\n\n.saltGridCell-rowSeparator {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: 1px;\n  background-color: var(--grid-row-borderColor);\n}\n\n.saltGridCell-topSeparator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  height: 1px;\n  background-color: transparent;\n  display: none;\n}\n\n.saltGridTableRow-first .saltGridCell-topSeparator {\n  display: unset;\n}\n\n.saltGridCell-columnSeparator {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 1px;\n  background-color: var(--grid-row-background);\n}\n\n.saltGrid-columnSeparators .saltGridCell-regularSeparator .saltGridCell-columnSeparator {\n  background-color: var(--grid-columnSeparator-color);\n}\n\n.saltGrid-columnSeparators .saltGridCell-pinnedSeparator .saltGridCell-columnSeparator {\n  background-color: var(--grid-columnSeparator-color);\n}\n\n.saltGrid-pinnedSeparators .saltGridCell-pinnedSeparator .saltGridCell-columnSeparator {\n  background-color: var(--grid-pinnedSeparator-color);\n}\n\n.saltGridTableRow-selected.saltGridTableRow-first .saltGridCell-topSeparator {\n  background-color: var(--grid-row-borderColor);\n}\n\n.saltGridCell-body {\n  box-sizing: border-box;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 1px;\n  left: 0;\n  background: var(--grid-row-background);\n  border-right: solid 1px transparent;\n}\n\n.saltGridTableRow-first .saltGridCell-body {\n  top: 1px;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Cell.css.js.map

package/dist-es/packages/data-grid/src/internal/CellStatusIcons.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+
+const CellWarningIcon = /* @__PURE__ */ jsx("svg", {
+  "aria-hidden": true,
+  height: "1em",
+  viewBox: "0 0 10 8",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /* @__PURE__ */ jsx("path", {
+    d: "M4.6188 0L9.2376 8H0L4.6188 0Z"
+  })
+});
+const CellErrorIcon = /* @__PURE__ */ jsx("svg", {
+  "aria-hidden": true,
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 8 8",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /* @__PURE__ */ jsx("circle", {
+    cx: "4",
+    cy: "4",
+    r: "4"
+  })
+});
+const CellSuccessIcon = /* @__PURE__ */ jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  viewBox: "0 0 14 14",
+  fill: "none",
+  children: /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.7668 2.63645L5.06034 12.0309L0.277532 7.56074L1.47248 6.28223L4.97136 9.55242L12.4832 1.4469L13.7668 2.63645Z",
+    fill: "#24874B"
+  })
+});
+
+export { CellErrorIcon, CellSuccessIcon, CellWarningIcon };
+//# sourceMappingURL=CellStatusIcons.js.map

package/dist-es/packages/data-grid/src/internal/CellStatusIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellStatusIcons.js","sources":["../src/internal/CellStatusIcons.tsx"],"sourcesContent":["export const CellWarningIcon = (\n  <svg\n    aria-hidden\n    height=\"1em\"\n    viewBox=\"0 0 10 8\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M4.6188 0L9.2376 8H0L4.6188 0Z\" />\n  </svg>\n);\n\nexport const CellErrorIcon = (\n  <svg\n    aria-hidden\n    width=\"1em\"\n    height=\"1em\"\n    viewBox=\"0 0 8 8\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <circle cx=\"4\" cy=\"4\" r=\"4\" />\n  </svg>\n);\n\nexport const CellSuccessIcon = (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"1em\"\n    viewBox=\"0 0 14 14\"\n    fill=\"none\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M13.7668 2.63645L5.06034 12.0309L0.277532 7.56074L1.47248 6.28223L4.97136 9.55242L12.4832 1.4469L13.7668 2.63645Z\"\n      fill=\"#24874B\"\n    />\n  </svg>\n);\n"],"names":[],"mappings":";;AAAO,MAAM,kCACV,GAAA,CAAA,KAAA,EAAA;AAAA,EACC,aAAW,EAAA,IAAA;AAAA,EACX,MAAO,EAAA,KAAA;AAAA,EACP,OAAQ,EAAA,UAAA;AAAA,EACR,IAAK,EAAA,MAAA;AAAA,EACL,KAAM,EAAA,4BAAA;AAAA,EAEN,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,gCAAA;AAAA,GAAiC,CAAA;AAAA,CAC3C,EAAA;AAGK,MAAM,gCACV,GAAA,CAAA,KAAA,EAAA;AAAA,EACC,aAAW,EAAA,IAAA;AAAA,EACX,KAAM,EAAA,KAAA;AAAA,EACN,MAAO,EAAA,KAAA;AAAA,EACP,OAAQ,EAAA,SAAA;AAAA,EACR,IAAK,EAAA,MAAA;AAAA,EACL,KAAM,EAAA,4BAAA;AAAA,EAEN,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,IAAO,EAAG,EAAA,GAAA;AAAA,IAAI,EAAG,EAAA,GAAA;AAAA,IAAI,CAAE,EAAA,GAAA;AAAA,GAAI,CAAA;AAAA,CAC9B,EAAA;AAGK,MAAM,kCACV,GAAA,CAAA,KAAA,EAAA;AAAA,EACC,KAAM,EAAA,4BAAA;AAAA,EACN,KAAM,EAAA,KAAA;AAAA,EACN,OAAQ,EAAA,WAAA;AAAA,EACR,IAAK,EAAA,MAAA;AAAA,EAEL,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,QAAS,EAAA,SAAA;AAAA,IACT,QAAS,EAAA,SAAA;AAAA,IACT,CAAE,EAAA,mHAAA;AAAA,IACF,IAAK,EAAA,SAAA;AAAA,GACP,CAAA;AAAA,CACF;;;;"}

package/dist-es/packages/{grid → data-grid}/src/internal/LeftPart.js

@@ -16,7 +16,8 @@ function LeftPart(props) {
     rows,
     hoverOverRowKey,
     setHoverOverRowKey,
-    zebra
+    zebra,
+    getRowValidationStatus
   } = props;
   const tableRef = useActiveOnWheel(onWheel);
   if (columns.length === 0) {
@@ -42,7 +43,8 @@ function LeftPart(props) {
             rows,
             hoverRowKey: hoverOverRowKey,
             setHoverRowKey: setHoverOverRowKey,
-            zebra
+            zebra,
+            getRowValidationStatus
           })
         ]
       })

package/dist-es/packages/data-grid/src/internal/LeftPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftPart.js","sources":["../src/internal/LeftPart.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport { TableBody } from \"./TableBody\";\nimport { RefObject } from \"react\";\nimport \"./LeftPart.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { useActiveOnWheel } from \"./gridHooks\";\nimport { CellValidationState } from \"../GridColumn\";\n\nconst withBaseName = makePrefixer(\"saltGridLeftPart\");\n\nexport interface LeftPartProps<T> {\n  leftRef: RefObject<HTMLDivElement>;\n  onWheel: EventListener;\n  rightShadow?: boolean;\n  columns: GridColumnModel<T>[];\n  rows: GridRowModel<T>[];\n  hoverOverRowKey?: string;\n  setHoverOverRowKey: (key: string | undefined) => void;\n  zebra?: boolean;\n  getRowValidationStatus?: (\n    row: GridRowModel<T>\n  ) => CellValidationState | undefined;\n}\n\nexport function LeftPart<T>(props: LeftPartProps<T>) {\n  const {\n    leftRef,\n    onWheel,\n    rightShadow,\n    columns,\n    rows,\n    hoverOverRowKey,\n    setHoverOverRowKey,\n    zebra,\n    getRowValidationStatus,\n  } = props;\n\n  const tableRef = useActiveOnWheel(onWheel);\n\n  if (columns.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={leftRef}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"rightShadow\")]: rightShadow,\n      })}\n    >\n      <div className={withBaseName(\"space\")} data-testid=\"grid-left-part\">\n        <table ref={tableRef} role=\"presentation\">\n          <TableColGroup columns={columns} />\n          <TableBody\n            columns={columns}\n            rows={rows}\n            hoverRowKey={hoverOverRowKey}\n            setHoverRowKey={setHoverOverRowKey}\n            zebra={zebra}\n            getRowValidationStatus={getRowValidationStatus}\n          />\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAgB7C,SAAS,SAAY,KAAyB,EAAA;AACnD,EAAM,MAAA;AAAA,IACJ,OAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA;AAAA,IACA,sBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,QAAA,GAAW,iBAAiB,OAAO,CAAA,CAAA;AAEzC,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,OAAA;AAAA,IACL,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,KAChC,CAAA;AAAA,IAED,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAAG,aAAY,EAAA,gBAAA;AAAA,MACjD,QAAC,kBAAA,IAAA,CAAA,OAAA,EAAA;AAAA,QAAM,GAAK,EAAA,QAAA;AAAA,QAAU,IAAK,EAAA,cAAA;AAAA,QACzB,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,OAAA;AAAA,WAAkB,CAAA;AAAA,0BAChC,GAAA,CAAA,SAAA,EAAA;AAAA,YACC,OAAA;AAAA,YACA,IAAA;AAAA,YACA,WAAa,EAAA,eAAA;AAAA,YACb,cAAgB,EAAA,kBAAA;AAAA,YAChB,KAAA;AAAA,YACA,sBAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/{grid → data-grid}/src/internal/MiddlePart.js

@@ -15,7 +15,8 @@ function MiddlePart(props) {
     hoverOverRowKey,
     setHoverOverRowKey,
     midGap,
-    zebra
+    zebra,
+    getRowValidationStatus
   } = props;
   const tableRef = useActiveOnWheel(onWheel);
   return /* @__PURE__ */ jsx("div", {
@@ -38,7 +39,8 @@ function MiddlePart(props) {
             hoverRowKey: hoverOverRowKey,
             setHoverRowKey: setHoverOverRowKey,
             gap: midGap,
-            zebra
+            zebra,
+            getRowValidationStatus
           })
         ]
       })

package/dist-es/packages/data-grid/src/internal/MiddlePart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiddlePart.js","sources":["../src/internal/MiddlePart.tsx"],"sourcesContent":["import { RefObject } from \"react\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport { TableBody } from \"./TableBody\";\nimport \"./MiddlePart.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { useActiveOnWheel } from \"./gridHooks\";\nimport { CellValidationState } from \"../GridColumn\";\n\nconst withBaseName = makePrefixer(\"saltGridMiddlePart\");\n\nexport interface MiddlePartProps<T> {\n  middleRef: RefObject<HTMLDivElement>;\n  onWheel: EventListener;\n  columns: GridColumnModel<T>[];\n  rows: GridRowModel<T>[];\n  hoverOverRowKey?: string;\n  setHoverOverRowKey: (key: string | undefined) => void;\n  midGap: number;\n  zebra?: boolean;\n  getRowValidationStatus?: (\n    row: GridRowModel<T>\n  ) => CellValidationState | undefined;\n}\n\nexport function MiddlePart<T>(props: MiddlePartProps<T>) {\n  const {\n    middleRef,\n    onWheel,\n    columns,\n    rows,\n    hoverOverRowKey,\n    setHoverOverRowKey,\n    midGap,\n    zebra,\n    getRowValidationStatus,\n  } = props;\n\n  const tableRef = useActiveOnWheel(onWheel);\n\n  return (\n    <div\n      ref={middleRef}\n      className={withBaseName()}\n      data-testid=\"grid-middle-part\"\n    >\n      <div className={withBaseName(\"space\")}>\n        <table ref={tableRef} role=\"presentation\">\n          <TableColGroup columns={columns} gap={midGap} />\n          <TableBody\n            columns={columns}\n            rows={rows}\n            hoverRowKey={hoverOverRowKey}\n            setHoverRowKey={setHoverOverRowKey}\n            gap={midGap}\n            zebra={zebra}\n            getRowValidationStatus={getRowValidationStatus}\n          />\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAgB/C,SAAS,WAAc,KAA2B,EAAA;AACvD,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,sBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,QAAA,GAAW,iBAAiB,OAAO,CAAA,CAAA;AAEzC,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,SAAA;AAAA,IACL,WAAW,YAAa,EAAA;AAAA,IACxB,aAAY,EAAA,kBAAA;AAAA,IAEZ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAClC,QAAC,kBAAA,IAAA,CAAA,OAAA,EAAA;AAAA,QAAM,GAAK,EAAA,QAAA;AAAA,QAAU,IAAK,EAAA,cAAA;AAAA,QACzB,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,OAAA;AAAA,YAAkB,GAAK,EAAA,MAAA;AAAA,WAAQ,CAAA;AAAA,0BAC7C,GAAA,CAAA,SAAA,EAAA;AAAA,YACC,OAAA;AAAA,YACA,IAAA;AAAA,YACA,WAAa,EAAA,eAAA;AAAA,YACb,cAAgB,EAAA,kBAAA;AAAA,YAChB,GAAK,EAAA,MAAA;AAAA,YACL,KAAA;AAAA,YACA,sBAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/{grid → data-grid}/src/internal/RightPart.js

@@ -16,7 +16,8 @@ function RightPart(props) {
     rows,
     hoverOverRowKey,
     setHoverOverRowKey,
-    zebra
+    zebra,
+    getRowValidationStatus
   } = props;
   const tableRef = useActiveOnWheel(onWheel);
   if (columns.length === 0) {
@@ -42,7 +43,8 @@ function RightPart(props) {
             rows,
             hoverRowKey: hoverOverRowKey,
             setHoverRowKey: setHoverOverRowKey,
-            zebra
+            zebra,
+            getRowValidationStatus
           })
         ]
       })

package/dist-es/packages/data-grid/src/internal/RightPart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightPart.js","sources":["../src/internal/RightPart.tsx"],"sourcesContent":["import { RefObject } from \"react\";\nimport { clsx } from \"clsx\";\nimport { TableColGroup } from \"./TableColGroup\";\nimport { TableBody } from \"./TableBody\";\nimport \"./RightPart.css\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { useActiveOnWheel } from \"./gridHooks\";\nimport { CellValidationState } from \"../GridColumn\";\n\nconst withBaseName = makePrefixer(\"saltGridRightPart\");\n\nexport interface RightPartProps<T> {\n  rightRef: RefObject<HTMLDivElement>;\n  onWheel: EventListener;\n  leftShadow?: boolean;\n  columns: GridColumnModel<T>[];\n  rows: GridRowModel<T>[];\n  hoverOverRowKey?: string;\n  setHoverOverRowKey: (key: string | undefined) => void;\n  zebra?: boolean;\n  getRowValidationStatus?: (\n    row: GridRowModel<T>\n  ) => CellValidationState | undefined;\n}\n\nexport function RightPart<T>(props: RightPartProps<T>) {\n  const {\n    rightRef,\n    onWheel,\n    columns,\n    leftShadow,\n    rows,\n    hoverOverRowKey,\n    setHoverOverRowKey,\n    zebra,\n    getRowValidationStatus,\n  } = props;\n\n  const tableRef = useActiveOnWheel(onWheel);\n\n  if (columns.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={rightRef}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"leftShadow\")]: leftShadow,\n      })}\n      data-testid=\"grid-right-part\"\n    >\n      <div className={withBaseName(\"space\")}>\n        <table ref={tableRef} role=\"presentation\">\n          <TableColGroup columns={columns} />\n          <TableBody\n            columns={columns}\n            rows={rows}\n            hoverRowKey={hoverOverRowKey}\n            setHoverRowKey={setHoverOverRowKey}\n            zebra={zebra}\n            getRowValidationStatus={getRowValidationStatus}\n          />\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAgB9C,SAAS,UAAa,KAA0B,EAAA;AACrD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,KAAA;AAAA,IACA,sBAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,QAAA,GAAW,iBAAiB,OAAO,CAAA,CAAA;AAEzC,EAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAK,EAAA,QAAA;AAAA,IACL,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,KAC/B,CAAA;AAAA,IACD,aAAY,EAAA,iBAAA;AAAA,IAEZ,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAClC,QAAC,kBAAA,IAAA,CAAA,OAAA,EAAA;AAAA,QAAM,GAAK,EAAA,QAAA;AAAA,QAAU,IAAK,EAAA,cAAA;AAAA,QACzB,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,aAAA,EAAA;AAAA,YAAc,OAAA;AAAA,WAAkB,CAAA;AAAA,0BAChC,GAAA,CAAA,SAAA,EAAA;AAAA,YACC,OAAA;AAAA,YACA,IAAA;AAAA,YACA,WAAa,EAAA,eAAA;AAAA,YACb,cAAgB,EAAA,kBAAA;AAAA,YAChB,KAAA;AAAA,YACA,sBAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/{grid → data-grid}/src/internal/TableBody.js

@@ -7,7 +7,15 @@ import { useEditorContext } from '../EditorContext.js';
 import { useCursorContext } from '../CursorContext.js';
 
 function TableBody(props) {
-  const { columns, rows, hoverRowKey, setHoverRowKey, gap, zebra } = props;
+  const {
+    columns,
+    rows,
+    hoverRowKey,
+    setHoverRowKey,
+    gap,
+    zebra,
+    getRowValidationStatus
+  } = props;
   const { selRowIdxs, selectedCellRange } = useSelectionContext();
   const isCellInSelectedRange = useCallback(
     (rowIdx, colIdx) => {
@@ -41,7 +49,6 @@ function TableBody(props) {
     onDoubleClick,
     children: rows.map((row) => {
       const isSelected = selRowIdxs.has(row.index);
-      const isFollowedBySelected = selRowIdxs.has(row.index + 1);
       const cursorIdx = focusedPart === "body" && cursorRowIdx === row.index ? cursorColIdx : void 0;
       const editorColIdx = editMode ? cursorIdx : void 0;
       return /* @__PURE__ */ jsx(TableRow, {
@@ -50,13 +57,13 @@ function TableBody(props) {
         columns,
         isHoverOver: row.key === hoverRowKey,
         isSelected,
-        isFollowedBySelected,
         cursorColIdx: cursorIdx,
         gap,
         zebra: zebra && row.index % 2 == 0,
         editorColIdx,
         isCellSelected: isCellInSelectedRange,
-        headerIsFocusable
+        headerIsFocusable,
+        validationStatus: getRowValidationStatus ? getRowValidationStatus(row) : void 0
       }, row.key);
     })
   });

package/dist-es/packages/data-grid/src/internal/TableBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.js","sources":["../src/internal/TableBody.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useMemo } from \"react\";\nimport { TableRow } from \"./TableRow\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { getRowKeyAttribute } from \"./utils\";\nimport { useSelectionContext } from \"../SelectionContext\";\nimport { useEditorContext } from \"../EditorContext\";\nimport { useCursorContext } from \"../CursorContext\";\nimport { CellValidationState } from \"../GridColumn\";\n\nexport interface TableBodyProps<T> {\n  columns: GridColumnModel<T>[];\n  rows: GridRowModel<T>[];\n  hoverRowKey?: string;\n  setHoverRowKey: (key: string | undefined) => void;\n  gap?: number;\n  zebra?: boolean;\n  getRowValidationStatus?: (\n    row: GridRowModel<T>\n  ) => CellValidationState | undefined;\n}\n\nexport function TableBody<T>(props: TableBodyProps<T>) {\n  const {\n    columns,\n    rows,\n    hoverRowKey,\n    setHoverRowKey,\n    gap,\n    zebra,\n    getRowValidationStatus,\n  } = props;\n  const { selRowIdxs, selectedCellRange } = useSelectionContext();\n\n  const isCellInSelectedRange = useCallback(\n    (rowIdx: number, colIdx: number) => {\n      if (!selectedCellRange) {\n        return false;\n      }\n      const { start, end } = selectedCellRange;\n      const minRowIdx = Math.min(start.rowIdx, end.rowIdx);\n      const maxRowIdx = Math.max(start.rowIdx, end.rowIdx);\n      const minColIdx = Math.min(start.colIdx, end.colIdx);\n      const maxColIdx = Math.max(start.colIdx, end.colIdx);\n      return (\n        rowIdx >= minRowIdx &&\n        rowIdx <= maxRowIdx &&\n        colIdx >= minColIdx &&\n        colIdx <= maxColIdx\n      );\n    },\n    [selectedCellRange]\n  );\n\n  const { cursorRowIdx, cursorColIdx, focusedPart, headerIsFocusable } =\n    useCursorContext();\n\n  const { editMode, startEditMode } = useEditorContext();\n\n  const onRowMouseEnter: MouseEventHandler<HTMLTableRowElement> = (event) => {\n    const target = event.target as HTMLElement;\n    const rowKey = getRowKeyAttribute(target);\n    setHoverRowKey(rowKey);\n  };\n\n  const onMouseLeave: MouseEventHandler<HTMLTableSectionElement> = (event) => {\n    setHoverRowKey(undefined);\n  };\n\n  const onDoubleClick: MouseEventHandler<HTMLTableSectionElement> = (event) => {\n    startEditMode();\n  };\n\n  return (\n    <tbody onMouseLeave={onMouseLeave} onDoubleClick={onDoubleClick}>\n      {rows.map((row) => {\n        const isSelected = selRowIdxs.has(row.index);\n        const cursorIdx =\n          focusedPart === \"body\" && cursorRowIdx === row.index\n            ? cursorColIdx\n            : undefined;\n        const editorColIdx = editMode ? cursorIdx : undefined;\n        return (\n          <TableRow\n            key={row.key}\n            row={row}\n            onMouseEnter={onRowMouseEnter}\n            columns={columns}\n            isHoverOver={row.key === hoverRowKey}\n            isSelected={isSelected}\n            cursorColIdx={cursorIdx}\n            gap={gap}\n            zebra={zebra && row.index % 2 == 0}\n            editorColIdx={editorColIdx}\n            isCellSelected={isCellInSelectedRange}\n            headerIsFocusable={headerIsFocusable}\n            validationStatus={\n              getRowValidationStatus ? getRowValidationStatus(row) : undefined\n            }\n          />\n        );\n      })}\n    </tbody>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist-es/packages/data-grid/src/internal/TableRow.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltGridTableRow {\n  height: var(--grid-row-height);\n  /* Row border doesn't render properly in Chrome on Windows. Applying borders to cells */\n  --grid-row-borderColor: var(--grid-rowSeparator-color);\n  --grid-row-background: var(--grid-background);\n}\n\n.saltGridTableRow-first {\n  height: calc(var(--grid-row-height) + 1px);\n}\n\n.saltGridTableRow th {\n  border-style: solid;\n  border-color: var(--grid-row-borderColor);\n  border-width: var(--grid-rowSeparator-width) 0 0 0;\n}\n\n.saltGridTableRow-divided {\n  --grid-row-borderColor: var(--grid-rowSeparator-color-divided);\n}\n\n.saltGridTableRow-zebra {\n  --grid-row-background: var(--grid-zebraColor);\n}\n\n.saltGridTableRow-hover {\n  --grid-row-background: var(--grid-row-background-hover);\n}\n\n.saltGridTableRow-selected {\n  --grid-row-borderColor: var(--grid-row-borderColor-selected);\n  --grid-row-background: var(--grid-row-background-selected);\n}\n\n.saltGridTableRow-selected .saltGridCell:before {\n  content: \"\";\n  position: absolute;\n  top: -1px;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: var(--grid-row-borderColor);\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltGridTableRow-zebra.saltGridTableRow-selected {\n  --grid-row-background: var(--grid-row-background-selected);\n}\n\n.saltGridTableRow-zebra.saltGridTableRow-hover {\n  --grid-row-background: var(--grid-row-background-hover);\n}\n\n.saltGridTableRow-zebra.saltGridTableRow-selected.saltGridTableRow-hover {\n  --grid-row-background: var(--grid-row-background-hover);\n}\n\n.saltGridTableRow-selected.saltGridTableRow-hover {\n  --grid-row-background: var(--grid-row-background-hover);\n}\n\n.saltGridTableRow-validationStatus-error,\n.saltGridTableRow-validationStatus-error.saltGridTableRow-hover {\n  --grid-row-background: var(--salt-status-error-background-emphasize);\n}\n.saltGridTableRow-validationStatus-warning,\n.saltGridTableRow-validationStatus-warning.saltGridTableRow-hover {\n  --grid-row-background: var(--salt-status-warning-background-emphasize);\n}\n.saltGridTableRow-validationStatus-success,\n.saltGridTableRow-validationStatus-success.saltGridTableRow-hover {\n  --grid-row-background: var(--salt-status-success-background-emphasize);\n}\n\n.saltGridTableRow-validationStatus-error.saltGridTableRow-selected {\n  --grid-row-background: var(--salt-status-error-background-selected);\n  --grid-row-borderColor: var(--salt-status-error-borderColor);\n}\n.saltGridTableRow-validationStatus-warning.saltGridTableRow-selected {\n  --grid-row-background: var(--salt-status-warning-background-selected);\n  --grid-row-borderColor: var(--salt-status-warning-borderColor);\n}\n.saltGridTableRow-validationStatus-success.saltGridTableRow-selected {\n  --grid-row-background: var(--salt-status-success-background-selected);\n  --grid-row-borderColor: var(--salt-status-success-borderColor);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=TableRow.css.js.map

package/dist-es/packages/{grid → data-grid}/src/internal/TableRow.js

@@ -7,13 +7,13 @@ import { clsx } from 'clsx';
 import { FakeCell } from './FakeCell.js';
 import { DefaultCellValue } from './DefaultCellValue.js';
 import { useGridContext } from '../GridContext.js';
+import { RowValidationStatusContext } from '../RowValidationStatus.js';
 
 const withBaseName = makePrefixer("saltGridTableRow");
 function TableRow(props) {
   const {
     row,
     isSelected,
-    isFollowedBySelected,
     zebra,
     isHoverOver,
     columns,
@@ -23,7 +23,8 @@ function TableRow(props) {
     gap,
     editorColIdx,
     isCellSelected,
-    headerIsFocusable
+    headerIsFocusable,
+    validationStatus: rowValidationStatus
   } = props;
   const grid = useGridContext();
   if (!row.key) {
@@ -37,8 +38,8 @@ function TableRow(props) {
       [withBaseName("zebra")]: zebra,
       [withBaseName("hover")]: isHoverOver,
       [withBaseName("selected")]: isSelected,
-      [withBaseName("followedBySelected")]: isFollowedBySelected && !isSelected,
-      [withBaseName("first")]: row.index === 0
+      [withBaseName("first")]: row.index === 0,
+      [withBaseName(`validationStatus-${rowValidationStatus}`)]: rowValidationStatus
     }),
     onMouseEnter,
     onMouseLeave,
@@ -47,6 +48,7 @@ function TableRow(props) {
     role: "row",
     children: [
       columns.map((column, i) => {
+        var _a, _b, _c, _d;
         const colKey = column.info.props.id;
         const editorInfo = grid.getEditor(column.info.props.id);
         const isEditable = !!editorInfo;
@@ -67,19 +69,38 @@ function TableRow(props) {
         const value = column.info.props.getValue && row.data ? column.info.props.getValue(row.data) : null;
         const isFocused = cursorColIdx === column.index;
         const isSelected2 = isCellSelected && isCellSelected(row.index, column.index);
-        return /* @__PURE__ */ jsx(Cell, {
+        const validationFnArg = {
           row,
           column,
           isFocused,
-          isSelected: isSelected2,
-          isEditable,
-          children: /* @__PURE__ */ jsx(CellValue, {
-            column,
+          value
+        };
+        const validationStatus = (_b = (_a = column.info.props).getValidationStatus) == null ? void 0 : _b.call(_a, validationFnArg);
+        const validationMessage = validationStatus && ((_d = (_c = column.info.props).getValidationMessage) == null ? void 0 : _d.call(_c, validationFnArg));
+        return /* @__PURE__ */ jsx(RowValidationStatusContext.Provider, {
+          value: { status: rowValidationStatus },
+          children: /* @__PURE__ */ jsx(Cell, {
             row,
+            column,
+            isFocused,
+            isSelected: isSelected2,
+            isEditable,
+            validationStatus,
+            validationMessage,
+            validationType: column.info.props.validationType,
             value,
-            isFocused
-          })
-        }, colKey);
+            align: column.info.props.align,
+            children: /* @__PURE__ */ jsx(CellValue, {
+              column,
+              row,
+              value,
+              isFocused,
+              validationStatus,
+              validationMessage,
+              validationType: column.info.props.validationType
+            })
+          }, colKey)
+        });
       }),
       gap !== void 0 && gap > 0 ? /* @__PURE__ */ jsx(FakeCell, {
         row

package/dist-es/packages/data-grid/src/internal/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sources":["../src/internal/TableRow.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  MouseEventHandler,\n} from \"react\";\nimport \"./TableRow.css\";\nimport { BaseCell } from \"../BaseCell\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { GridColumnModel, GridRowModel } from \"../Grid\";\nimport { FakeCell } from \"./FakeCell\";\nimport { DefaultCellValue } from \"./DefaultCellValue\";\nimport { useGridContext } from \"../GridContext\";\nimport { CellValidationState } from \"../GridColumn\";\nimport { RowValidationStatusContext } from \"../RowValidationStatus\";\n\nconst withBaseName = makePrefixer(\"saltGridTableRow\");\n\nexport interface TableRowProps<T> {\n  row: GridRowModel<T>;\n  isSelected?: boolean;\n  isHoverOver?: boolean;\n  zebra?: boolean;\n  columns: GridColumnModel<T>[];\n  cursorColIdx?: number;\n  onMouseEnter?: MouseEventHandler<HTMLTableRowElement>;\n  onMouseLeave?: MouseEventHandler<HTMLTableRowElement>;\n  gap?: number;\n  editorColIdx?: number;\n  isCellSelected?: (rowIdx: number, colIdx: number) => boolean;\n  headerIsFocusable?: boolean;\n  validationStatus?: CellValidationState;\n}\n\nexport function TableRow<T>(props: TableRowProps<T>) {\n  const {\n    row,\n    isSelected,\n    zebra,\n    isHoverOver,\n    columns,\n    onMouseEnter,\n    onMouseLeave,\n    cursorColIdx,\n    gap,\n    editorColIdx,\n    isCellSelected,\n    headerIsFocusable,\n    validationStatus: rowValidationStatus,\n  } = props;\n\n  const grid = useGridContext();\n\n  if (!row.key) {\n    throw new Error(`Invalid row`);\n  }\n\n  const ariaRowIndex = headerIsFocusable ? row.index + 2 : row.index + 1;\n\n  return (\n    <tr\n      aria-rowindex={ariaRowIndex}\n      aria-selected={isSelected ? true : undefined}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"zebra\")]: zebra,\n        [withBaseName(\"hover\")]: isHoverOver,\n        [withBaseName(\"selected\")]: isSelected,\n        [withBaseName(\"first\")]: row.index === 0,\n        [withBaseName(`validationStatus-${rowValidationStatus}`)]:\n          rowValidationStatus,\n      })}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      data-row-index={row.index}\n      data-row-key={row.key}\n      role=\"row\"\n    >\n      {columns.map((column, i) => {\n        const colKey = column.info.props.id;\n        const editorInfo = grid.getEditor(column.info.props.id);\n        const isEditable = !!editorInfo;\n\n        if (editorColIdx === column.index) {\n          if (isEditable) {\n            if (isValidElement(editorInfo.children)) {\n              const editorElement = Children.only(editorInfo.children);\n              return cloneElement(editorElement, {\n                key: colKey,\n                row,\n                column,\n              } as any);\n            }\n          }\n        }\n\n        const Cell = column.info.props.cellComponent || BaseCell;\n        const CellValue =\n          column.info.props.cellValueComponent || DefaultCellValue;\n        const value =\n          column.info.props.getValue && row.data\n            ? column.info.props.getValue(row.data)\n            : null;\n        const isFocused = cursorColIdx === column.index;\n        const isSelected =\n          isCellSelected && isCellSelected(row.index, column.index);\n        const validationFnArg = {\n          row,\n          column,\n          isFocused,\n          value,\n        };\n        const validationStatus =\n          column.info.props.getValidationStatus?.(validationFnArg);\n        const validationMessage =\n          validationStatus &&\n          column.info.props.getValidationMessage?.(validationFnArg);\n\n        return (\n          <RowValidationStatusContext.Provider\n            value={{ status: rowValidationStatus }}\n          >\n            <Cell\n              key={colKey}\n              row={row}\n              column={column}\n              isFocused={isFocused}\n              isSelected={isSelected}\n              isEditable={isEditable}\n              validationStatus={validationStatus}\n              validationMessage={validationMessage}\n              validationType={column.info.props.validationType}\n              value={value}\n              align={column.info.props.align}\n            >\n              <CellValue\n                column={column}\n                row={row}\n                value={value}\n                isFocused={isFocused}\n                validationStatus={validationStatus}\n                validationMessage={validationMessage}\n                validationType={column.info.props.validationType}\n              />\n            </Cell>\n          </RowValidationStatusContext.Provider>\n        );\n      })}\n      {gap !== undefined && gap > 0 ? <FakeCell row={row} /> : null}\n    </tr>\n  );\n}\n"],"names":["isSelected"],"mappings":"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"}

package/dist-es/packages/{grid → data-grid}/src/internal/gridHooks.js

@@ -1,4 +1,4 @@
-import { useRef, useState, useMemo, useCallback, useEffect, Children, isValidElement } from 'react';
+import { useMemo, useCallback, useRef, useState, useEffect, Children, isValidElement } from 'react';
 import { NumberRange } from '../NumberRange.js';
 import { getAttribute, makeMapAdder, makeMapDeleter, getCellPosition } from './utils.js';
 import { useControlled } from '@salt-ds/core';