@salt-ds/data-grid 1.0.3 → 1.0.4-alpha.1

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

@@ -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":"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"}
+{"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

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

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

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

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

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

package/dist-types/internal/CellStatusIcons.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const CellWarningIcon: JSX.Element;
+export declare const CellErrorIcon: JSX.Element;
+export declare const CellSuccessIcon: JSX.Element;

package/dist-types/internal/LeftPart.d.ts

@@ -1,6 +1,7 @@
 import { RefObject } from "react";
 import "./LeftPart.css";
 import { GridColumnModel, GridRowModel } from "../Grid";
+import { CellValidationState } from "../GridColumn";
 export interface LeftPartProps<T> {
     leftRef: RefObject<HTMLDivElement>;
     onWheel: EventListener;
@@ -10,5 +11,6 @@ export interface LeftPartProps<T> {
     hoverOverRowKey?: string;
     setHoverOverRowKey: (key: string | undefined) => void;
     zebra?: boolean;
+    getRowValidationStatus?: (row: GridRowModel<T>) => CellValidationState | undefined;
 }
 export declare function LeftPart<T>(props: LeftPartProps<T>): JSX.Element | null;

package/dist-types/internal/MiddlePart.d.ts

@@ -1,6 +1,7 @@
 import { RefObject } from "react";
 import "./MiddlePart.css";
 import { GridColumnModel, GridRowModel } from "../Grid";
+import { CellValidationState } from "../GridColumn";
 export interface MiddlePartProps<T> {
     middleRef: RefObject<HTMLDivElement>;
     onWheel: EventListener;
@@ -10,5 +11,6 @@ export interface MiddlePartProps<T> {
     setHoverOverRowKey: (key: string | undefined) => void;
     midGap: number;
     zebra?: boolean;
+    getRowValidationStatus?: (row: GridRowModel<T>) => CellValidationState | undefined;
 }
 export declare function MiddlePart<T>(props: MiddlePartProps<T>): JSX.Element;

package/dist-types/internal/RightPart.d.ts

@@ -1,6 +1,7 @@
 import { RefObject } from "react";
 import "./RightPart.css";
 import { GridColumnModel, GridRowModel } from "../Grid";
+import { CellValidationState } from "../GridColumn";
 export interface RightPartProps<T> {
     rightRef: RefObject<HTMLDivElement>;
     onWheel: EventListener;
@@ -10,5 +11,6 @@ export interface RightPartProps<T> {
     hoverOverRowKey?: string;
     setHoverOverRowKey: (key: string | undefined) => void;
     zebra?: boolean;
+    getRowValidationStatus?: (row: GridRowModel<T>) => CellValidationState | undefined;
 }
 export declare function RightPart<T>(props: RightPartProps<T>): JSX.Element | null;

package/dist-types/internal/TableBody.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { GridColumnModel, GridRowModel } from "../Grid";
+import { CellValidationState } from "../GridColumn";
 export interface TableBodyProps<T> {
     columns: GridColumnModel<T>[];
     rows: GridRowModel<T>[];
@@ -7,5 +8,6 @@ export interface TableBodyProps<T> {
     setHoverRowKey: (key: string | undefined) => void;
     gap?: number;
     zebra?: boolean;
+    getRowValidationStatus?: (row: GridRowModel<T>) => CellValidationState | undefined;
 }
 export declare function TableBody<T>(props: TableBodyProps<T>): JSX.Element;

package/dist-types/internal/TableRow.d.ts

@@ -1,10 +1,10 @@
 import { MouseEventHandler } from "react";
 import "./TableRow.css";
 import { GridColumnModel, GridRowModel } from "../Grid";
+import { CellValidationState } from "../GridColumn";
 export interface TableRowProps<T> {
     row: GridRowModel<T>;
     isSelected?: boolean;
-    isFollowedBySelected?: boolean;
     isHoverOver?: boolean;
     zebra?: boolean;
     columns: GridColumnModel<T>[];
@@ -15,5 +15,6 @@ export interface TableRowProps<T> {
     editorColIdx?: number;
     isCellSelected?: (rowIdx: number, colIdx: number) => boolean;
     headerIsFocusable?: boolean;
+    validationStatus?: CellValidationState;
 }
 export declare function TableRow<T>(props: TableRowProps<T>): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/data-grid",
-  "version": "1.0.3",
+  "version": "1.0.4-alpha.1",
   "license": "Apache-2.0",
   "main": "dist-cjs/packages/grid/src/index.js",
   "sideEffects": [
@@ -18,14 +18,16 @@
     }
   },
   "publishConfig": {
-    "directory": "../../dist/salt-ds-data-grid"
+    "directory": "../../dist/salt-ds-data-grid",
+    "tag": "next"
   },
   "module": "dist-es/packages/grid/src/index.js",
   "typings": "dist-types/index.d.ts",
   "dependencies": {
     "clsx": "^1.2.1",
-    "@salt-ds/core": "1.4.0",
-    "@salt-ds/lab": "1.0.0-alpha.4"
+    "@salt-ds/core": "1.6.0",
+    "@salt-ds/icons": "1.3.0",
+    "@salt-ds/lab": "1.0.0-alpha.6"
   },
   "files": [
     "dist-cjs",