npm - @salt-ds/data-grid - Versions diffs - 1.0.4-alpha.0 → 1.0.4-alpha.1 - Mend

@salt-ds/data-grid 1.0.4-alpha.0 → 1.0.4-alpha.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 (79) hide show

package/dist-es/packages/grid/src/RowSelectionRadioColumn.js CHANGED Viewed

@@ -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/grid/src/RowSelectionRadioColumn.js.map CHANGED Viewed

	@@ -1 +1 @@
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 } 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 = (\n event: KeyboardEvent<HTMLDivElement~~>,\n~~ rowIndex: number\n ) => {\n if (event.key === \" \") {\n selectRows({ rowIndex });\n event.preventDefault();\n event.stopPropagation();\n }\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,~~EAAM~~,~~MAAA~~,~~SAAA~~,~~GAAY~~,~~CAChB~~,~~KAAA~~,~~EACA~~,~~QACG~~,KAAA;~~AACH~~,~~IAAI~~,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AACrB,~~MAAW~~,UAAA,CAAA,EAAE,UAAU,CAAA,CAAA;AACvB,~~MAAA~~,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,~~MAAA~~,KAAA,CAAM,eAAgB,EAAA,CAAA;AAAA,~~KACxB~~;AAAA,~~GACF~~,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;;;;"}
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/grid/src/RowValidationStatus.js ADDED Viewed

@@ -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/grid/src/RowValidationStatus.js.map ADDED Viewed

@@ -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/src/index.js CHANGED Viewed

@@ -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/grid/src/internal/Cell.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = ".saltGridCell {\n  box-sizing: border-box;\n  overflow: hidden;\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";
+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 };

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

@@ -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/grid/src/internal/CellStatusIcons.js.map ADDED Viewed

@@ -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/src/internal/LeftPart.js CHANGED Viewed

@@ -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/grid/src/internal/LeftPart.js.map CHANGED Viewed

	@@ -1 +1 @@
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\";\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}\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 } = 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 />\n </table>\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;~~AASA~~,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;~~AAa7C~~,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,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,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
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/src/internal/MiddlePart.js CHANGED Viewed

@@ -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/grid/src/internal/MiddlePart.js.map CHANGED Viewed

	@@ -1 +1 @@
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\";\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}\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 } = 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 />\n </table>\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;~~AAQA~~,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;~~AAa~~/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,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,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
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/src/internal/RightPart.js CHANGED Viewed

@@ -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/grid/src/internal/RightPart.js.map CHANGED Viewed

	@@ -1 +1 @@
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\";\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}\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 } = 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 />\n </table>\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":";;;;;;;;~~AASA~~,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;~~AAa9C~~,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,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,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
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/src/internal/TableBody.js CHANGED Viewed

@@ -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/grid/src/internal/TableBody.js.map CHANGED Viewed

	@@ -1 +1 @@
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\";\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}\n\nexport function TableBody<T>(props: TableBodyProps<T>) {\n const { columns, rows, hoverRowKey, setHoverRowKey, gap, zebra } = 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 ~~isFollowedBySelected = selRowIdxs.has(row.index + 1);\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 ~~isFollowedBySelected={isFollowedBySelected}\n~~ cursorColIdx={cursorIdx}\n gap={gap}\n zebra={zebra && row.index % 2 == 0}\n editorColIdx={editorColIdx}\n isCellSelected={isCellInSelectedRange}\n headerIsFocusable={headerIsFocusable}\n />\n );\n })}\n </tbody>\n );\n}\n"],"names":[],"mappings":";;;;;;;;~~AAiBO~~,SAAS,UAAa,KAA0B,EAAA;AACrD,~~EAAA~~,~~MAAM~~,~~EAAE~~,~~OAAS~~,~~EAAA~~,IAAA,~~EAAM~~,~~aAAa~~,~~cAAgB~~,~~EAAA~~,GAAA,~~EAAK~~,~~OAAU~~,GAAA,KAAA,CAAA;~~AACnE~~,EAAA,MAAM,EAAE,UAAA,EAAY,iBAAkB,EAAA,GAAI,mBAAoB,EAAA,CAAA;AAE9D,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,QAAgB,MAAmB,KAAA;AAClC,MAAA,IAAI,CAAC,iBAAmB,EAAA;AACtB,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AACA,MAAM,MAAA,EAAE,KAAO,EAAA,GAAA,EAAQ,GAAA,iBAAA,CAAA;AACvB,MAAA,MAAM,YAAY,IAAK,CAAA,GAAA,CAAI,KAAM,CAAA,MAAA,EAAQ,IAAI,MAAM,CAAA,CAAA;AACnD,MAAA,MAAM,YAAY,IAAK,CAAA,GAAA,CAAI,KAAM,CAAA,MAAA,EAAQ,IAAI,MAAM,CAAA,CAAA;AACnD,MAAA,MAAM,YAAY,IAAK,CAAA,GAAA,CAAI,KAAM,CAAA,MAAA,EAAQ,IAAI,MAAM,CAAA,CAAA;AACnD,MAAA,MAAM,YAAY,IAAK,CAAA,GAAA,CAAI,KAAM,CAAA,MAAA,EAAQ,IAAI,MAAM,CAAA,CAAA;AACnD,MAAA,OACE,UAAU,SACV,IAAA,MAAA,IAAU,SACV,IAAA,MAAA,IAAU,aACV,MAAU,IAAA,SAAA,CAAA;AAAA,KAEd;AAAA,IACA,CAAC,iBAAiB,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,MAAM,EAAE,YAAc,EAAA,YAAA,EAAc,WAAa,EAAA,iBAAA,KAC/C,gBAAiB,EAAA,CAAA;AAEnB,EAAA,MAAM,EAAE,QAAA,EAAU,aAAc,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAErD,EAAM,MAAA,eAAA,GAA0D,CAAC,KAAU,KAAA;AACzE,IAAA,MAAM,SAAS,KAAM,CAAA,MAAA,CAAA;AACrB,IAAM,MAAA,MAAA,GAAS,mBAAmB,MAAM,CAAA,CAAA;AACxC,IAAA,cAAA,CAAe,MAAM,CAAA,CAAA;AAAA,GACvB,CAAA;AAEA,EAAM,MAAA,YAAA,GAA2D,CAAC,KAAU,KAAA;AAC1E,IAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,GAC1B,CAAA;AAEA,EAAM,MAAA,aAAA,GAA4D,CAAC,KAAU,KAAA;AAC3E,IAAc,aAAA,EAAA,CAAA;AAAA,GAChB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,IAAM,YAAA;AAAA,IAA4B,aAAA;AAAA,IAChC,QAAA,EAAA,IAAA,CAAK,GAAI,CAAA,CAAC,GAAQ,KAAA;AACjB,MAAA,MAAM,UAAa,GAAA,UAAA,CAAW,GAAI,CAAA,GAAA,CAAI,KAAK,CAAA,CAAA;AAC3C,MAAA,MAAM,~~oBAAuB,GAAA,UAAA,CAAW,GAAI,CAAA,GAAA,CAAI,QAAQ,CAAC,CAAA,CAAA;AACzD,MAAA,MAAM,~~YACJ,WAAgB,KAAA,MAAA,IAAU,YAAiB,KAAA,GAAA,CAAI,QAC3C,YACA,GAAA,KAAA,CAAA,CAAA;AACN,MAAM,MAAA,YAAA,GAAe,WAAW,SAAY,GAAA,KAAA,CAAA,CAAA;AAC5C,MAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,QAEC,GAAA;AAAA,QACA,YAAc,EAAA,eAAA;AAAA,QACd,OAAA;AAAA,QACA,WAAA,EAAa,IAAI,GAAQ,KAAA,WAAA;AAAA,QACzB,UAAA;AAAA,QACA,~~oBAAA;AAAA,QACA,~~YAAc,EAAA,SAAA;AAAA,QACd,GAAA;AAAA,QACA,KAAO,EAAA,KAAA,IAAS,GAAI,CAAA,KAAA,GAAQ,CAAK,IAAA,CAAA;AAAA,QACjC,YAAA;AAAA,QACA,cAAgB,EAAA,qBAAA;AAAA,QAChB,iBAAA;AAAA,OAAA,~~EAZK~~,IAAI,~~GAaX~~,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
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/grid/src/internal/TableRow.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 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-followedBySelected {\n  --grid-row-borderColor: var(--grid-row-borderColor-selected);\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";
+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 };

package/dist-es/packages/grid/src/internal/TableRow.js CHANGED Viewed

@@ -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/grid/src/internal/TableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
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\";\n\nconst withBaseName = makePrefixer(\"saltGridTableRow\");\n\nexport interface TableRowProps<T> {\n row: GridRowModel<T>;\n isSelected?: boolean~~; // Render selected background and the bottom border. Top border is rendered by the previous row (it gets isFollowedBySelected = true)\~~n ~~isFollowedBySelected?: boolean; // Next row is selected. Render the bottom border.\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}\n\nexport function TableRow<T>(props: TableRowProps<T>) {\n const {\n row,\n isSelected,\n ~~isFollowedBySelected,\n~~ zebra,\n isHoverOver,\n columns,\n onMouseEnter,\n onMouseLeave,\n cursorColIdx,\n gap,\n editorColIdx,\n isCellSelected,\n headerIsFocusable,\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(\"~~followedBySelected\")]:\n isFollowedBySelected && !isSelected,\n [withBaseName(\"~~first\")]: row.index === 0,\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\n return (\n <Cell\n key={colKey}\n row={row}\n column={column}\n isFocused={isFocused}\n isSelected={isSelected}\n isEditable={isEditable}\n >\n <CellValue\n column={column}\n row={row}\n value={value}\n isFocused={isFocused}\n />\n </Cell>\n );\n })}\n {gap !== undefined && gap > 0 ? <FakeCell row={row} /> : null}\n </tr>\n );\n}\n"],"names":["isSelected"],"mappings":"~~;;;;;;;;;;AAeA~~,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAkB7C,SAAS,SAAY,KAAyB,EAAA;AACnD,EAAM,MAAA;AAAA,IACJ,GAAA;AAAA,IACA,UAAA;AAAA,IACA,~~oBAAA;AAAA,IACA,~~KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,iBAAA;AAAA,~~GACE~~,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,OAAO,cAAe,EAAA,CAAA;AAE5B,EAAI,IAAA,CAAC,IAAI,GAAK,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,CAAa,WAAA,CAAA,CAAA,CAAA;AAAA,GAC/B;AAEA,EAAA,MAAM,eAAe,iBAAoB,GAAA,GAAA,CAAI,KAAQ,GAAA,CAAA,GAAI,IAAI,KAAQ,GAAA,CAAA,CAAA;AAErE,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,eAAe,EAAA,YAAA;AAAA,IACf,eAAA,EAAe,aAAa,IAAO,GAAA,KAAA,CAAA;AAAA,IACnC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,MACzB,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,WAAA;AAAA,MACzB,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,MAC5B,CAAC,YAAA,CAAa,~~oBAAoB~~,CAAA,~~GAChC~~,~~wBAAwB~~,~~CAAC~~,~~UAAA~~;AAAA,~~MAC3B~~,CAAC,YAAA,CAAa,~~OAAO~~,CAAA,~~GAAI~~,~~IAAI~~,~~KAAU~~,~~KAAA,CAAA~~;AAAA,~~KACxC~~,CAAA;AAAA,IACD,YAAA;AAAA,IACA,YAAA;AAAA,IACA,kBAAgB,GAAI,CAAA,KAAA;AAAA,IACpB,gBAAc,GAAI,CAAA,GAAA;AAAA,IAClB,IAAK,EAAA,KAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,MAAQ,OAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,CAAM,KAAA;~~AAC1B~~,QAAM,MAAA,MAAA,GAAS,MAAO,CAAA,IAAA,CAAK,KAAM,CAAA,EAAA,CAAA;AACjC,QAAA,MAAM,aAAa,IAAK,CAAA,SAAA,CAAU,MAAO,CAAA,IAAA,CAAK,MAAM,EAAE,CAAA,CAAA;AACtD,QAAM,MAAA,UAAA,GAAa,CAAC,CAAC,UAAA,CAAA;AAErB,QAAI,IAAA,YAAA,KAAiB,OAAO,KAAO,EAAA;AACjC,UAAA,IAAI,UAAY,EAAA;AACd,YAAI,IAAA,cAAA,CAAe,UAAW,CAAA,QAAQ,CAAG,EAAA;AACvC,cAAA,MAAM,aAAgB,GAAA,QAAA,CAAS,IAAK,CAAA,UAAA,CAAW,QAAQ,CAAA,CAAA;AACvD,cAAA,OAAO,aAAa,aAAe,EAAA;AAAA,gBACjC,GAAK,EAAA,MAAA;AAAA,gBACL,GAAA;AAAA,gBACA,MAAA;AAAA,eACM,CAAA,CAAA;AAAA,aACV;AAAA,WACF;AAAA,SACF;AAEA,QAAA,MAAM,IAAO,GAAA,MAAA,CAAO,IAAK,CAAA,KAAA,CAAM,aAAiB,IAAA,QAAA,CAAA;AAChD,QAAA,MAAM,SACJ,GAAA,MAAA,CAAO,IAAK,CAAA,KAAA,CAAM,kBAAsB,IAAA,gBAAA,CAAA;AAC1C,QAAA,MAAM,KACJ,GAAA,MAAA,CAAO,IAAK,CAAA,KAAA,CAAM,QAAY,IAAA,GAAA,CAAI,IAC9B,GAAA,MAAA,CAAO,IAAK,CAAA,KAAA,CAAM,QAAS,CAAA,GAAA,CAAI,IAAI,CACnC,GAAA,IAAA,CAAA;AACN,QAAM,MAAA,SAAA,GAAY,iBAAiB,MAAO,CAAA,KAAA,CAAA;AAC1C,QAAA,MAAMA,cACJ,cAAkB,IAAA,cAAA,CAAe,GAAI,CAAA,KAAA,EAAO,OAAO,KAAK,CAAA,CAAA;~~AAE1D~~,QAAA,~~uBACG~~,GAAA,CAAA,IAAA,EAAA;AAAA,~~UAEC~~,GAAA;AAAA,~~UACA~~,MAAA;AAAA,~~UACA~~,SAAA;AAAA,~~UACA~~,UAAYA,EAAAA,WAAAA;AAAA,~~UACZ~~,UAAA;AAAA,~~UAEA~~,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,~~YACC~~,MAAA;AAAA,~~YACA~~,GAAA;AAAA,~~YACA~~,KAAA;AAAA,~~YACA~~,SAAA;AAAA,~~WACF~~,CAAA;AAAA,~~SAAA~~,~~EAZK~~,~~MAaP~~,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,MACA,GAAQ,KAAA,KAAA,CAAA,IAAa,GAAM,GAAA,CAAA,mBAAK,GAAA,CAAA,QAAA,EAAA;AAAA,QAAS,GAAA;AAAA,OAAU,CAAK,GAAA,IAAA;AAAA,KAAA;AAAA,GAC3D,CAAA,CAAA;AAEJ;;;;"}
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/src/internal/gridHooks.js CHANGED Viewed

@@ -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';

package/dist-types/ColumnSortContext.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import React from "react";
+import { SortOrder } from "./Grid";
+import { GridColumnProps } from "./GridColumn";
+export interface ColumnSortContext {
+    sortByColumnId?: GridColumnProps["id"];
+    setSortByColumnId: (c: React.SetStateAction<GridColumnProps["id"]>) => void;
+    sortOrder: SortOrder;
+    setSortOrder: (o: SortOrder) => void;
+    onClickSortColumn: (colHeaderId: GridColumnProps["id"]) => void;
+}
+export declare const ColumnSortContext: React.Context<ColumnSortContext | undefined>;
+export declare const useColumnSortContext: () => ColumnSortContext;

package/dist-types/Grid.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from "react";
-import { GridColumnInfo } from "./GridColumn";
+import { CellValidationState, GridColumnInfo } from "./GridColumn";
 import "./Grid.css";
 import { ColumnGroupProps } from "./ColumnGroup";
 export declare type ColumnSeparatorType = "regular" | "none" | "groupEdge" | "pinned";
@@ -7,6 +7,11 @@ export declare type ColumnGroupRowSeparatorType = "first" | "regular" | "last";
 export declare type ColumnGroupColumnSeparatorType = "regular" | "none" | "pinned";
 export declare type GridRowSelectionMode = "single" | "multi" | "none";
 export declare type GridCellSelectionMode = "range" | "none";
+export declare enum SortOrder {
+    ASC = "asc",
+    DESC = "desc",
+    NONE = "none"
+}
 export declare type RowKeyGetter<T> = (row: T, index: number) => string;
 export declare type GridColumnMoveHandler = (columnId: string, fromIndex: number, toIndex: number) => void;
 export interface GridProps<T = any> {
@@ -77,6 +82,7 @@ export interface GridProps<T = any> {
      * If `true`, keyboard navigation is enabled for the header.
      * */
     headerIsFocusable?: boolean;
+    getRowValidationStatus?: (row: GridRowModel<T>) => CellValidationState | undefined;
 }
 export interface GridRowModel<T> {
     key: string;

package/dist-types/GridColumn.d.ts CHANGED Viewed

@@ -1,7 +1,9 @@
 import { ComponentType, CSSProperties, KeyboardEvent, ReactNode } from "react";
-import { GridColumnModel, GridRowModel } from "./Grid";
+import { GridColumnModel, GridRowModel, SortOrder } from "./Grid";
 export declare type GridColumnPin = "left" | "right" | null;
-export interface GridCellProps<T> {
+export declare type CellValidationState = "error" | "warning" | "success";
+declare type CellValidationType = "strong" | "light";
+export interface GridCellProps<T, U = any> {
     row: GridRowModel<T>;
     column: GridColumnModel<T>;
     className?: string;
@@ -10,12 +12,20 @@ export interface GridCellProps<T> {
     isSelected?: boolean;
     isEditable?: boolean;
     children?: ReactNode;
+    align?: GridColumnProps["align"];
+    value?: U;
+    validationStatus?: CellValidationState;
+    validationMessage?: string;
+    validationType?: CellValidationType;
 }
 export interface GridCellValueProps<T, U = any> {
     row: GridRowModel<T>;
     column: GridColumnModel<T>;
     isFocused?: boolean;
     value?: U;
+    validationStatus?: CellValidationState;
+    validationMessage?: string;
+    validationType?: CellValidationType;
 }
 export interface HeaderCellProps<T> {
     column: GridColumnModel<T>;
@@ -35,6 +45,26 @@ export interface GridColumnProps<T = any> {
      * Unique identifier of the column.
      * */
     id: string;
+    /**
+     * Enables sorting (by sort order: `asc | desc | none`) for the column.
+     * To enable column header's keyboard navigation on sort,
+     * users need to set `headerIsFocusable` prop to `true` in Grid component.
+     * To customise how GridColumn data sorts, use also  `customSort` or `onSortOrderChanged`.
+     * */
+    sortable?: boolean;
+    /**
+     * Custom sorting function. Use for client side sorting.
+     * */
+    customSort?: (args: {
+        rowData: T[];
+        sortOrder: SortOrder;
+    }) => T[];
+    /**
+     * Exposes GridColumn sort order. Use for server side sorting.
+     * */
+    onSortOrderChange?: (args: {
+        sortOrder: SortOrder;
+    }) => void;
     /**
      * Name is displayed on the column header by default.
      * */
@@ -77,6 +107,23 @@ export interface GridColumnProps<T = any> {
      * for the given row data item.
      * */
     getValue?: (rowData: T) => any;
+    /**
+     * Cell validation status getter. Should return one of the known validation status names: "none" | "error" | "warning"
+     * If you require a custom validation status, you can achieve that by providing a custom cell component.
+     * */
+    getValidationStatus?: (value: GridCellValueProps<T>) => CellValidationState | undefined;
+    /**
+     * Cell validation status message getter. Should return a string description of the validation state that can be used for the screen reader.
+     * This prop is optional but if you don't provide a function a default message will be used.
+     * */
+    getValidationMessage?: (value: GridCellValueProps<T>) => string | undefined;
+    /**
+     * Cell validation type. Determines the visual style of the validation. The available values are "strong" and "light". Strong will display the icon
+     * along side the background and border. Light will only affect border and background. Use light if you are validation the whole row, and optionally
+     * strong on one of the columns, and strong if you are validating user input on a particular cell.
+     * The default value is "light".
+     * */
+    validationType?: GridCellProps<T>["validationType"];
     /**
      * CSS class to be applied to the column header.
      * Useful for minor customizations
@@ -104,6 +151,10 @@ export interface GridColumnProps<T = any> {
      * Children is optional, and accepts non-rendered elements i.e. `CellEditor`
      */
     children?: ReactNode;
+    /**
+     * aria-label is optional, and accepts any string value
+     */
+    "aria-label"?: string;
 }
 export interface GridColumnInfo<T> {
     width: number;
@@ -111,3 +162,4 @@ export interface GridColumnInfo<T> {
     props: GridColumnProps<T>;
 }
 export declare const GridColumn: <T = any>(props: GridColumnProps<T>) => JSX.Element;
+export {};

package/dist-types/RowValidationStatus.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CellValidationState, GridColumnProps } from "./GridColumn";
+export declare const RowValidationStatusContext: import("react").Context<{
+    status?: CellValidationState | undefined;
+}>;
+export declare type RowValidationStatusColumnProps<T> = Omit<GridColumnProps<T>, "width" | "name">;
+export declare function RowValidationStatusColumn<T>(props: RowValidationStatusColumnProps<T>): JSX.Element;