@stenajs-webui/grid 13.4.0 → 14.1.0

package/dist/features/standard-table/components/StandardTable.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from "react";
 import { StandardTableConfig } from "../config/StandardTableConfig";
 import { TableContext } from "../context/StandardTableStateContext";
 import { StandardTableOnKeyDown } from "../types/StandardTableOnKeyDown";
+import { ResultListBannerState } from "@stenajs-webui/elements";
 export interface StandardTableProps<TItem, TColumnKey extends string, TColumnGroupKey extends string> {
     /**
      * Variant of table
@@ -50,6 +51,10 @@ export interface StandardTableProps<TItem, TColumnKey extends string, TColumnGro
      * Message displayed when there are no items to display, and it is not loading or has error.
      */
     noItemsLabel?: string;
+    /**
+     * Data used to populate the ResultListBanner component.
+     */
+    bannerError?: ResultListBannerState;
     /**
      * Message displayed when there is an error.
      */

package/dist/features/standard-table/components/StandardTableContent.d.ts

@@ -3,5 +3,5 @@ import { StandardTableProps, StandardTableVariant } from "./StandardTable";
 interface Props<TItem, TColumnKey extends string, TColumnGroupKey extends string> extends Omit<StandardTableProps<TItem, TColumnKey, TColumnGroupKey>, "tableContext" | "config"> {
     variant: StandardTableVariant;
 }
-export declare const StandardTableContent: React.MemoExoticComponent<(<TItem, TColumnKey extends string, TColumnGroupKey extends string>({ error, errorLabel, loading, items, noItemsLabel, noItemsContentRight, noItemsContentBottom, noItemsHeader, colIndexOffset, rowIndexOffset, variant, }: Props<TItem, TColumnKey, TColumnGroupKey>) => JSX.Element)>;
+export declare const StandardTableContent: React.MemoExoticComponent<(<TItem, TColumnKey extends string, TColumnGroupKey extends string>({ error, bannerError, loading, items, noItemsLabel, noItemsContentRight, noItemsContentBottom, noItemsHeader, colIndexOffset, rowIndexOffset, variant, errorLabel, }: Props<TItem, TColumnKey, TColumnGroupKey>) => JSX.Element)>;
 export {};

package/dist/features/standard-table/config/StandardTableColumnConfig.d.ts

@@ -1,8 +1,10 @@
 import { ReactNode } from "react";
 import { UseGridCellOptions, UseGridCellResult } from "../../grid-cell/hooks/UseGridCell";
 import { SortOrderIconVariant } from "../../table-ui/components/table/SortOrderIcon";
-export declare type StandardTableColumnConfig<TItem, TItemValue> = StandardTableColumnOptions<TItem, TItemValue> & StandardTableColumnOptionsWithNoGroups & ItemValueResolver<TItem, TItemValue>;
-export declare type StandardTableColumnConfigWithGroups<TItem, TItemValue> = StandardTableColumnOptions<TItem, TItemValue> & ItemValueResolver<TItem, TItemValue>;
+import { StandardTableOnKeyDownArgs } from "./StandardTableConfig";
+import * as React from "react";
+export declare type StandardTableColumnConfig<TItem, TItemValue, TColumnKey extends string> = StandardTableColumnOptions<TItem, TItemValue, TColumnKey> & StandardTableColumnOptionsWithNoGroups & ItemValueResolver<TItem, TItemValue>;
+export declare type StandardTableColumnConfigWithGroups<TItem, TItemValue, TColumnKey extends string> = StandardTableColumnOptions<TItem, TItemValue, TColumnKey> & ItemValueResolver<TItem, TItemValue>;
 export interface StandardTableColumnOptionsWithNoGroups {
     /**
      * Enable sticky behaviour to the left make elements scroll in behind this column.
@@ -22,7 +24,7 @@ export interface StandardTableColumnOptionsWithNoGroups {
      */
     right?: string;
 }
-export interface StandardTableColumnOptions<TItem, TItemValue> {
+export interface StandardTableColumnOptions<TItem, TItemValue, TColumnKey extends string> {
     /**
      * The header label of the column.
      */
@@ -80,10 +82,24 @@ export interface StandardTableColumnOptions<TItem, TItemValue> {
      * @param value
      */
     onChange?: (item: TItem, value: string | undefined) => void;
+    /**
+     * The onKeyDown callback on the HTML element with focus.
+     * @param ev
+     * @param args
+     */
+    onKeyDown?: (ev: React.KeyboardEvent<HTMLDivElement>, args: StandardTableOnKeyDownArgs<TItem, TColumnKey>) => void;
     /**
      * Disables the grid cell functionality for this column.
+     * If enable, the user can no longer navigate to or from this column with arrow keys.
+     * Focus highlight on the cell is also disabled.
      */
     disableGridCell?: boolean;
+    /**
+     * Grid cell is enabled, but arrow key logic and focus highlight must be applied manually.
+     * This makes it possible to move focus to an element inside the cell, instead of on the cell itself.
+     * For example, if the cell contains a checkbox, we user can arrow key navigate to the checkbox.
+     */
+    disableGridCellFocus?: boolean;
     /**
      * Grid cell options, if you need custom behaviour.
      * Not all options are available, since it is controlled by StandardTable.
@@ -134,4 +150,4 @@ export declare type BackgroundResolver<TItem> = (item: TItem) => string | undefi
 export interface ItemValueResolver<TItem, TItemValue> {
     itemValueResolver: (item: TItem) => TItemValue;
 }
-export declare const createColumnConfig: <TItem, TItemValue>(itemValueResolver: (item: TItem) => TItemValue, options?: StandardTableColumnOptions<TItem, TItemValue> | undefined) => StandardTableColumnConfig<TItem, TItemValue>;
+export declare const createColumnConfig: <TItem, TItemValue, TColumnKey extends string>(itemValueResolver: (item: TItem) => TItemValue, options?: StandardTableColumnOptions<TItem, TItemValue, TColumnKey> | undefined) => StandardTableColumnConfig<TItem, TItemValue, TColumnKey>;

package/dist/features/standard-table/config/StandardTableConfig.d.ts

@@ -15,7 +15,7 @@ export interface StandardTableConfigWithGroups<TItem, TColumnKey extends string,
     /**
      * Configs for the columns available in the table.
      */
-    columns: Record<TColumnKey, StandardTableColumnConfigWithGroups<TItem, any>>;
+    columns: Record<TColumnKey, StandardTableColumnConfigWithGroups<TItem, any, TColumnKey>>;
     /**
      * Configs for the column groups available in the table.
      * If column groups are used, columnOrder will not be used.
@@ -35,7 +35,7 @@ export interface StandardTableConfigWithNoGroups<TItem, TColumnKey extends strin
     /**
      * Configs for the columns available in the table.
      */
-    columns: Record<TColumnKey, StandardTableColumnConfig<TItem, any>>;
+    columns: Record<TColumnKey, StandardTableColumnConfig<TItem, any, TColumnKey>>;
     /**
      * The order of the columns. This is a list of keys from `columns`.
      * If a column is not added, it is not displayed.

package/dist/features/standard-table/features/sticky-columns/StickyColumnGroupOffsetCalculator.d.ts

@@ -5,6 +5,6 @@ export declare type OffsetPerColumn<TColumnKey extends string> = Record<TColumnK
  * @param config
  */
 export declare const calculateOffsetForColumnInStickyColumnGroups: <TItem, TColumnKey extends string>(config: StandardTableConfigWithGroups<TItem, TColumnKey, string>) => Record<TColumnKey, string>;
-export declare const calculateOffsetForColumns: <TItem, TColumnKey extends string>(columnIds: TColumnKey[], columns: Record<TColumnKey, import("../../config/StandardTableColumnConfig").StandardTableColumnConfigWithGroups<TItem, any>> | Record<TColumnKey, import("../../config/StandardTableColumnConfig").StandardTableColumnConfig<TItem, any>>, includeOffsetForCheckboxAndExpand: boolean) => Record<TColumnKey, string>;
+export declare const calculateOffsetForColumns: <TItem, TColumnKey extends string>(columnIds: TColumnKey[], columns: Record<TColumnKey, import("../../config/StandardTableColumnConfig").StandardTableColumnConfigWithGroups<TItem, any, TColumnKey>> | Record<TColumnKey, import("../../config/StandardTableColumnConfig").StandardTableColumnConfig<TItem, any, TColumnKey>>, includeOffsetForCheckboxAndExpand: boolean) => Record<TColumnKey, string>;
 export declare const getColumnIdsForLeftSideStickyGroup: <TItem, TColumnKey extends string>(config: StandardTableConfigWithGroups<TItem, TColumnKey, string>) => TColumnKey[];
 export declare const getColumnIdsForRightSideStickyGroup: <TItem, TColumnKey extends string>(config: StandardTableConfigWithGroups<TItem, TColumnKey, string>) => TColumnKey[];

package/dist/features/standard-table/features/summary-row/SummaryRowVisibilityCalculator.d.ts

@@ -1,3 +1,3 @@
 import { StandardTableColumnOptions } from "../../config/StandardTableColumnConfig";
-export declare const isSummaryRowVisible: <TColumnKey extends string>(columns: Record<TColumnKey, StandardTableColumnOptions<unknown, unknown>>) => boolean;
-export declare const columnHasSummaryCell: (columnConfig: StandardTableColumnOptions<unknown, unknown>) => boolean;
+export declare const isSummaryRowVisible: <TColumnKey extends string>(columns: Record<TColumnKey, StandardTableColumnOptions<unknown, unknown, TColumnKey>>) => boolean;
+export declare const columnHasSummaryCell: <TColumnKey extends string>(columnConfig: StandardTableColumnOptions<unknown, unknown, TColumnKey>) => boolean;

package/dist/features/standard-table/hooks/UseCellBackground.d.ts

@@ -1,3 +1,3 @@
 import { StandardTableColumnConfig } from "../config/StandardTableColumnConfig";
 export declare const useCellBackgroundByColumnId: <T>(columnId: string, item: T) => string | undefined;
-export declare const useCellBackgroundByColumnConfig: <TItem, TItemValue>(columnConfig: StandardTableColumnConfig<TItem, TItemValue> | undefined, item: TItem) => string | undefined;
+export declare const useCellBackgroundByColumnConfig: <TItem, TItemValue, TColumnKey extends string>(columnConfig: StandardTableColumnConfig<TItem, TItemValue, TColumnKey> | undefined, item: TItem) => string | undefined;

package/dist/features/standard-table/hooks/UseColumnConfigById.d.ts

@@ -1,4 +1,4 @@
 import { StandardTableColumnConfig } from "../config/StandardTableColumnConfig";
-export declare const useColumnConfigById: <TItem, TItemValue>(columnId: string) => StandardTableColumnConfig<TItem, TItemValue>;
-export declare const useFirstColumnConfig: <TItem, TItemValue>() => StandardTableColumnConfig<TItem, TItemValue> | undefined;
-export declare const useLastColumnConfig: <TItem, TItemValue>() => StandardTableColumnConfig<TItem, TItemValue> | undefined;
+export declare const useColumnConfigById: <TItem, TItemValue, TColumnKey extends string>(columnId: string) => StandardTableColumnConfig<TItem, TItemValue, TColumnKey>;
+export declare const useFirstColumnConfig: <TItem, TItemValue, TColumnKey extends string>() => StandardTableColumnConfig<TItem, TItemValue, TColumnKey> | undefined;
+export declare const useLastColumnConfig: <TItem, TItemValue, TColumnKey extends string>() => StandardTableColumnConfig<TItem, TItemValue, TColumnKey> | undefined;

package/dist/features/standard-table/stories/StandardTable.stories.d.ts

@@ -6,6 +6,7 @@ export default _default;
 export declare const Overview: () => JSX.Element;
 export declare const Variants: () => JSX.Element;
 export declare const BackgroundResolver: () => JSX.Element;
+export declare const CellOnKeyDown: () => JSX.Element;
 export declare const NavigationBetweenTables: () => JSX.Element;
 export declare const OnKeyDown: () => JSX.Element;
 export declare const SummaryRow: () => JSX.Element;

package/dist/features/standard-table/stories/StandardTableStoryHelper.d.ts

@@ -13,5 +13,6 @@ export declare const standardTableConfigForStories: StandardTableConfig<ListItem
 export declare const mockedItems: ListItem[];
 export declare const useListState: (initialItems: Array<ListItem>) => {
     onChangeNumPassengers: (item: ListItem, numPassengers: string | undefined) => void;
+    onChangeActive: (item: ListItem, active: boolean) => void;
     items: ListItem[];
 };

package/dist/features/standard-table/stories/States.stories.d.ts

@@ -7,3 +7,4 @@ export declare const MissingItems: () => JSX.Element;
 export declare const MissingItemsCustomBanner: () => JSX.Element;
 export declare const Loading: () => JSX.Element;
 export declare const _Error: () => JSX.Element;
+export declare const BannerError: () => JSX.Element;

package/dist/features/table-ui/components/CrudStatusIndicator.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { CrudStatus } from "@stenajs-webui/redux";
+import * as React from "react";
 interface Props {
     crudStatus?: CrudStatus;
 }

package/dist/index.es.js

@@ -1,11 +1,11 @@
 import { createContext, useMemo, createElement, Fragment, memo, useRef, useState, useCallback, useEffect, useContext, useReducer } from 'react';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
-import { InputSpinner, Icon, stenaArrowRight, FlatButton, Banner } from '@stenajs-webui/elements';
+import { InputSpinner, Icon, stenaArrowRight, FlatButton, ResultListBanner, Banner } from '@stenajs-webui/elements';
+import { cssColor } from '@stenajs-webui/theme';
 import { Tooltip, Popover } from '@stenajs-webui/tooltip';
 import { Text, Indent, Space, Row, Box, exhaustSwitchCaseElseThrow, Heading, useArraySet, useOnScreen, Spacing, booleanOrNumberToNumber, useDomId } from '@stenajs-webui/core';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons/faInfoCircle';
-import { cssColor } from '@stenajs-webui/theme';
 import { faSortAlphaDown } from '@fortawesome/free-solid-svg-icons/faSortAlphaDown';
 import { faSortAlphaUp } from '@fortawesome/free-solid-svg-icons/faSortAlphaUp';
 import { faSortAmountDownAlt } from '@fortawesome/free-solid-svg-icons/faSortAmountDownAlt';
@@ -18,7 +18,7 @@ import { TextInput, Checkbox } from '@stenajs-webui/forms';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSortOrderActions, createSelectedIdsActions, createEntityActions, createSortOrderReducerInitialState, createSelectedIdsReducerInitialState, reducerIdGate, createSortOrderReducer, createSelectedIdsReducer, createEntityReducer, reducerIdGateAction } from '@stenajs-webui/redux';
 import { combineReducers } from 'redux';
-import { ErrorScreen, LoadingScreen } from '@stenajs-webui/panels';
+import { LoadingScreen, ErrorScreen } from '@stenajs-webui/panels';
 import { compact, upperFirst, lowerCase } from 'lodash';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
@@ -42,10 +42,10 @@ var CrudStatusIndicator = function (_a) {
     }
     var errorMessage = crudStatus.errorMessage, hasError = crudStatus.hasError, loading = crudStatus.loading, creating = crudStatus.creating, deleting = crudStatus.deleting, updating = crudStatus.updating;
     if (loading || creating || deleting || updating) {
-        return createElement(InputSpinner, { color: "var(--lhds-color-ui-500)" });
+        return createElement(InputSpinner, { color: cssColor("--lhds-color-ui-500") });
     }
     if (hasError) {
-        var icon = (createElement(Icon, { icon: faExclamationTriangle, color: "var(--lhds-color-orange-600)", size: 14 }));
+        var icon = (createElement(Icon, { icon: faExclamationTriangle, color: cssColor("--lhds-color-orange-600"), size: 14 }));
         return (createElement(Fragment, null, errorMessage ? (createElement(Tooltip, { label: errorMessage, zIndex: 100 }, icon)) : (icon)));
     }
     return null;
@@ -64,7 +64,7 @@ var ModifiedField = function (_a) {
             createElement(Text, { color: "var(--swui-primary-action-color)", variant: "bold" }, modifiedField.newValue))),
         hasRightIcon && createElement(Space, null),
         showEmptyFieldWarning ? (createElement(Tooltip, { label: warningOnEmpty, zIndex: 100 },
-            createElement(Icon, { icon: faExclamationTriangle, color: "var(--lhds-color-orange-600)", size: 14 }))) : (createElement(CrudStatusIndicator, { crudStatus: crudStatus }))));
+            createElement(Icon, { icon: faExclamationTriangle, color: cssColor("--lhds-color-orange-600"), size: 14 }))) : (createElement(CrudStatusIndicator, { crudStatus: crudStatus }))));
 };
 
 /*! *****************************************************************************
@@ -1248,7 +1248,8 @@ var useLocalStateTableContext = function (tableId, initialState) {
 };
 
 var getTotalNumColumns = function (config) {
-    return (config.enableExpandCollapse ? 1 : 0) +
+    return (config.rowIndent ? 2 : 0) +
+        (config.enableExpandCollapse ? 1 : 0) +
         (config.showRowCheckbox ? 1 : 0) +
         getNumUserColumns(config);
 };
@@ -1505,14 +1506,14 @@ var StandardTableCell = memo(function StandardTableCell(_a) {
     var _c = useStandardTableConfig(), keyResolver = _c.keyResolver, enableGridCell = _c.enableGridCell, gridCellOptionsForTable = _c.gridCellOptions;
     var selectedIds = useStandardTableState().selectedIds.selectedIds;
     var tableId = useStandardTableId();
-    var onKeyDown = useOnKeyDownContext();
+    var onKeyDownTable = useOnKeyDownContext();
     var numNavigableColumns = useColumnIndexPerColumnIdContext().numNavigableColumns;
     var stickyPropsPerColumnContext = useStickyPropsPerColumnContext();
     var isSelected = useMemo(function () {
         var itemId = keyResolver(item);
         return selectedIds.indexOf(itemId) >= 0;
     }, [item, keyResolver, selectedIds]);
-    var _d = useColumnConfigById(columnId), itemValueResolver = _d.itemValueResolver, itemLabelFormatter = _d.itemLabelFormatter, width = _d.width, minWidth = _d.minWidth, _e = _d.justifyContentCell, justifyContentCell = _e === void 0 ? "flex-start" : _e, borderLeft = _d.borderLeft, renderCell = _d.renderCell, gridCellOptionsForColumn = _d.gridCellOptions, isEditable = _d.isEditable, onChange = _d.onChange, disableGridCell = _d.disableGridCell, zIndex = _d.zIndex;
+    var _d = useColumnConfigById(columnId), itemValueResolver = _d.itemValueResolver, itemLabelFormatter = _d.itemLabelFormatter, width = _d.width, minWidth = _d.minWidth, _e = _d.justifyContentCell, justifyContentCell = _e === void 0 ? "flex-start" : _e, borderLeft = _d.borderLeft, renderCell = _d.renderCell, gridCellOptionsForColumn = _d.gridCellOptions, isEditable = _d.isEditable, onChange = _d.onChange, onKeyDownCell = _d.onKeyDown, disableGridCell = _d.disableGridCell, disableGridCellFocus = _d.disableGridCellFocus, zIndex = _d.zIndex;
     var itemValue = useMemo(function () {
         if (itemValueResolver) {
             return itemValueResolver(item);
@@ -1533,8 +1534,13 @@ var StandardTableCell = memo(function StandardTableCell(_a) {
             ? isEditable(item)
             : undefined;
     var onKeyDownHandler = useCallback(function (ev) {
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev, { columnId: columnId, item: item });
-    }, [onKeyDown, columnId, item]);
+        onKeyDownTable === null || onKeyDownTable === void 0 ? void 0 : onKeyDownTable(ev, { columnId: columnId, item: item });
+        onKeyDownCell === null || onKeyDownCell === void 0 ? void 0 : onKeyDownCell(ev, { columnId: columnId, item: item });
+        if (ev.key !== "Tab" && (onKeyDownTable || onKeyDownCell)) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    }, [onKeyDownTable, columnId, item, onKeyDownCell]);
     var gridCell = useGridCell(label, __assign(__assign({ colIndex: colIndex,
         rowIndex: rowIndex,
         numRows: numRows, numCols: numNavigableColumns, tableId: tableId, isEditable: editable, onChange: onChange
@@ -1584,7 +1590,7 @@ var StandardTableCell = memo(function StandardTableCell(_a) {
             height: "var(--current-row-height)",
             background: background,
         } },
-        createElement(StandardTableCellUi, { enableGridCell: enableGridCell && !disableGridCell, gridCellRequiredProps: gridCell.requiredProps, isEditing: gridCell.isEditing, width: width, minWidth: minWidth, justifyContent: justifyContentCell, onKeyDown: onKeyDownHandler }, content)));
+        createElement(StandardTableCellUi, { enableGridCell: enableGridCell && !disableGridCell && !disableGridCellFocus, gridCellRequiredProps: gridCell.requiredProps, isEditing: gridCell.isEditing, width: width, minWidth: minWidth, justifyContent: justifyContentCell, onKeyDown: onKeyDownHandler }, content)));
 });
 
 var StandardTableRowExpansion = function StandardTableRowExpansion(_a) {
@@ -1903,14 +1909,24 @@ var StandardTableRowList = memo(function StandardTableRowList(_a) {
 });
 
 var StandardTableContent = memo(function StandardTableContent(_a) {
-    var error = _a.error, errorLabel = _a.errorLabel, loading = _a.loading, items = _a.items, _b = _a.noItemsLabel, noItemsLabel = _b === void 0 ? "There is no data available." : _b, noItemsContentRight = _a.noItemsContentRight, noItemsContentBottom = _a.noItemsContentBottom, noItemsHeader = _a.noItemsHeader, colIndexOffset = _a.colIndexOffset, rowIndexOffset = _a.rowIndexOffset, variant = _a.variant;
+    var _b;
+    var error = _a.error, bannerError = _a.bannerError, loading = _a.loading, items = _a.items, _c = _a.noItemsLabel, noItemsLabel = _c === void 0 ? "There is no data available." : _c, noItemsContentRight = _a.noItemsContentRight, noItemsContentBottom = _a.noItemsContentBottom, noItemsHeader = _a.noItemsHeader, colIndexOffset = _a.colIndexOffset, rowIndexOffset = _a.rowIndexOffset, variant = _a.variant, errorLabel = _a.errorLabel;
     var totalNumColumns = useTotalNumColumns();
-    if (error) {
+    if (bannerError) {
         return (createElement("tbody", null,
             createElement("tr", null,
                 createElement("td", { colSpan: totalNumColumns },
-                    createElement(Spacing, { num: 4 },
-                        createElement(ErrorScreen, { text: errorLabel || error.message }))))));
+                    createElement(Spacing, { num: 4, justifyContent: "center" },
+                        createElement(Box, { alignItems: "center" },
+                            createElement(ResultListBanner, { bannerState: bannerError, variant: "error" })))))));
+    }
+    if (error || errorLabel) {
+        return (createElement("tbody", null,
+            createElement("tr", null,
+                createElement("td", { colSpan: totalNumColumns },
+                    createElement(Spacing, { num: 4, justifyContent: "center" },
+                        createElement(Box, { alignItems: "center" },
+                            createElement(Banner, { headerText: (_b = (error ? error.message : errorLabel)) !== null && _b !== void 0 ? _b : "Unknown error", variant: "error" })))))));
     }
     if (loading) {
         return (createElement("tbody", null,
@@ -2169,7 +2185,10 @@ var StandardTable = function StandardTable(_a) {
             return undefined;
         }
         catch (e) {
-            return e;
+            if (e instanceof Error) {
+                return e;
+            }
+            return new Error("Unknown error");
         }
     }, [config]);
     if (validationError) {