@stenajs-webui/grid 13.4.0 → 14.1.0

package/dist/index.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var faExclamationTriangle = require('@fortawesome/free-solid-svg-icons/faExclamationTriangle');
 var elements = require('@stenajs-webui/elements');
+var theme = require('@stenajs-webui/theme');
 var tooltip = require('@stenajs-webui/tooltip');
 var core = require('@stenajs-webui/core');
 var faEllipsisV = require('@fortawesome/free-solid-svg-icons/faEllipsisV');
 var faInfoCircle = require('@fortawesome/free-solid-svg-icons/faInfoCircle');
-var theme = require('@stenajs-webui/theme');
 var faSortAlphaDown = require('@fortawesome/free-solid-svg-icons/faSortAlphaDown');
 var faSortAlphaUp = require('@fortawesome/free-solid-svg-icons/faSortAlphaUp');
 var faSortAmountDownAlt = require('@fortawesome/free-solid-svg-icons/faSortAmountDownAlt');
@@ -51,10 +51,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 React.createElement(elements.InputSpinner, { color: "var(--lhds-color-ui-500)" });
+        return React.createElement(elements.InputSpinner, { color: theme.cssColor("--lhds-color-ui-500") });
     }
     if (hasError) {
-        var icon = (React.createElement(elements.Icon, { icon: faExclamationTriangle.faExclamationTriangle, color: "var(--lhds-color-orange-600)", size: 14 }));
+        var icon = (React.createElement(elements.Icon, { icon: faExclamationTriangle.faExclamationTriangle, color: theme.cssColor("--lhds-color-orange-600"), size: 14 }));
         return (React.createElement(React.Fragment, null, errorMessage ? (React.createElement(tooltip.Tooltip, { label: errorMessage, zIndex: 100 }, icon)) : (icon)));
     }
     return null;
@@ -73,7 +73,7 @@ var ModifiedField = function (_a) {
             React.createElement(core.Text, { color: "var(--swui-primary-action-color)", variant: "bold" }, modifiedField.newValue))),
         hasRightIcon && React.createElement(core.Space, null),
         showEmptyFieldWarning ? (React.createElement(tooltip.Tooltip, { label: warningOnEmpty, zIndex: 100 },
-            React.createElement(elements.Icon, { icon: faExclamationTriangle.faExclamationTriangle, color: "var(--lhds-color-orange-600)", size: 14 }))) : (React.createElement(CrudStatusIndicator, { crudStatus: crudStatus }))));
+            React.createElement(elements.Icon, { icon: faExclamationTriangle.faExclamationTriangle, color: theme.cssColor("--lhds-color-orange-600"), size: 14 }))) : (React.createElement(CrudStatusIndicator, { crudStatus: crudStatus }))));
 };
 
 /*! *****************************************************************************
@@ -1257,7 +1257,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);
 };
@@ -1514,14 +1515,14 @@ var StandardTableCell = React.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 = React.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 = React.useMemo(function () {
         if (itemValueResolver) {
             return itemValueResolver(item);
@@ -1542,8 +1543,13 @@ var StandardTableCell = React.memo(function StandardTableCell(_a) {
             ? isEditable(item)
             : undefined;
     var onKeyDownHandler = React.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
@@ -1593,7 +1599,7 @@ var StandardTableCell = React.memo(function StandardTableCell(_a) {
             height: "var(--current-row-height)",
             background: background,
         } },
-        React.createElement(StandardTableCellUi, { enableGridCell: enableGridCell && !disableGridCell, gridCellRequiredProps: gridCell.requiredProps, isEditing: gridCell.isEditing, width: width, minWidth: minWidth, justifyContent: justifyContentCell, onKeyDown: onKeyDownHandler }, content)));
+        React.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) {
@@ -1912,14 +1918,24 @@ var StandardTableRowList = React.memo(function StandardTableRowList(_a) {
 });
 
 var StandardTableContent = React.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 (React.createElement("tbody", null,
             React.createElement("tr", null,
                 React.createElement("td", { colSpan: totalNumColumns },
-                    React.createElement(core.Spacing, { num: 4 },
-                        React.createElement(panels.ErrorScreen, { text: errorLabel || error.message }))))));
+                    React.createElement(core.Spacing, { num: 4, justifyContent: "center" },
+                        React.createElement(core.Box, { alignItems: "center" },
+                            React.createElement(elements.ResultListBanner, { bannerState: bannerError, variant: "error" })))))));
+    }
+    if (error || errorLabel) {
+        return (React.createElement("tbody", null,
+            React.createElement("tr", null,
+                React.createElement("td", { colSpan: totalNumColumns },
+                    React.createElement(core.Spacing, { num: 4, justifyContent: "center" },
+                        React.createElement(core.Box, { alignItems: "center" },
+                            React.createElement(elements.Banner, { headerText: (_b = (error ? error.message : errorLabel)) !== null && _b !== void 0 ? _b : "Unknown error", variant: "error" })))))));
     }
     if (loading) {
         return (React.createElement("tbody", null,
@@ -2178,7 +2194,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) {