@stenajs-webui/grid 16.0.0 → 17.1.0

package/dist/index.js

@@ -157,10 +157,10 @@ var tableBorderColor = "var(--lhds-color-ui-300)";
 var tableBorderColorExpanded = "var(--lhds-color-blue-500)";
 var tableBackgroundColorExpanded = "var(--lhds-color-blue-50)";
 var tableBackgroundHoverColorExpanded = "var(--lhds-color-blue-100)";
-var tableBorder = "1px solid " + tableBorderColor;
+var tableBorder = "1px solid ".concat(tableBorderColor);
 var tableBorderHidden = "1px solid transparent";
 var tableBorderLeft = "var(--swui-expand-highlight-border-width) solid transparent";
-var tableBorderLeftExpanded = "var(--swui-expand-highlight-border-width) solid " + tableBorderColorExpanded;
+var tableBorderLeftExpanded = "var(--swui-expand-highlight-border-width) solid ".concat(tableBorderColorExpanded);
 var defaultTableRowHeight = "40px";
 var defaultTableHeadRowHeight = "40px";
 var smallTableRowWidth = "40px";
@@ -400,32 +400,34 @@ var isCharacter = function (key) { return !!key.match(/^[-+*<>]$/); };
 var isLetter = function (key) { return !!key.match(/^[a-zA-Z0-9]$/); };
 var isNumeric = function (key) { return !isNaN(parseInt(key, 10)); };
 var createKeyDownHandler$1 = function (_, // isEditing
-isEditable, startEditing, setLastKeyEvent, allowedInputType, transformEnteredValue, revertableValue) { return function (e) {
-    if (e.ctrlKey || e.metaKey || e.shiftKey) {
-        return;
-    }
-    if (e.key === "Enter" && isEditable) {
-        setLastKeyEvent(undefined);
-        startEditing();
-        revertableValue.commit();
-        e.preventDefault();
-        e.stopPropagation();
-    }
-    else if (isEditable) {
-        // TODO Find nice way to allow full user control, while also providing simplicity.
-        var lastKeyEvent = createKeyDownEvent(e);
-        if ((isNumeric(e.key) && allowsNumerics(allowedInputType)) ||
-            (isLetter(e.key) && allowsLetters(allowedInputType)) ||
-            isCharacter(e.key)) {
-            startEditing(lastKeyEvent);
-            setLastKeyEvent(lastKeyEvent);
+isEditable, startEditing, setLastKeyEvent, allowedInputType, transformEnteredValue, revertableValue) {
+    return function (e) {
+        if (e.ctrlKey || e.metaKey || e.shiftKey) {
+            return;
+        }
+        if (e.key === "Enter" && isEditable) {
+            setLastKeyEvent(undefined);
+            startEditing();
             revertableValue.commit();
-            revertableValue.setValue(transformEnteredValue(lastKeyEvent.key));
             e.preventDefault();
             e.stopPropagation();
         }
-    }
-}; };
+        else if (isEditable) {
+            // TODO Find nice way to allow full user control, while also providing simplicity.
+            var lastKeyEvent = createKeyDownEvent(e);
+            if ((isNumeric(e.key) && allowsNumerics(allowedInputType)) ||
+                (isLetter(e.key) && allowsLetters(allowedInputType)) ||
+                isCharacter(e.key)) {
+                startEditing(lastKeyEvent);
+                setLastKeyEvent(lastKeyEvent);
+                revertableValue.commit();
+                revertableValue.setValue(transformEnteredValue(lastKeyEvent.key));
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+    };
+};
 
 var wrapBounds = function (x, y, maxX, maxY) {
     var realX = x;
@@ -545,14 +547,8 @@ var useGridNavigation = function (options) {
         onCellMove,
         onCellNavigation,
     ]);
-    var onKeyDown = React.useMemo(function () { return createKeyDownHandler(moveHandler); }, [
-        moveHandler,
-    ]);
-    var id = React.useMemo(function () { return createCellId(tableId, rowIndex, colIndex); }, [
-        tableId,
-        rowIndex,
-        colIndex,
-    ]);
+    var onKeyDown = React.useMemo(function () { return createKeyDownHandler(moveHandler); }, [moveHandler]);
+    var id = React.useMemo(function () { return createCellId(tableId, rowIndex, colIndex); }, [tableId, rowIndex, colIndex]);
     var requiredProps = React.useMemo(function () { return ({
         tabIndex: 0,
         onKeyDown: onKeyDown,
@@ -564,13 +560,27 @@ var useGridNavigation = function (options) {
         requiredProps: requiredProps,
     };
 };
-var createMoveHandler = function (tableId, rowIndex, colIndex, numRows, numCols, edgeMode, onCellMove, onCellNavigation) { return function (direction) {
-    var pos = getNextPositionWrappedOrClamped(rowIndex, colIndex, numRows, numCols, direction, edgeMode);
-    var colDidChange = colIndex !== pos.colIndex;
-    var rowDidChange = rowIndex !== pos.rowIndex;
-    if (colDidChange || rowDidChange) {
-        if (onCellMove) {
-            onCellMove({
+var createMoveHandler = function (tableId, rowIndex, colIndex, numRows, numCols, edgeMode, onCellMove, onCellNavigation) {
+    return function (direction) {
+        var pos = getNextPositionWrappedOrClamped(rowIndex, colIndex, numRows, numCols, direction, edgeMode);
+        var colDidChange = colIndex !== pos.colIndex;
+        var rowDidChange = rowIndex !== pos.rowIndex;
+        if (colDidChange || rowDidChange) {
+            if (onCellMove) {
+                onCellMove({
+                    direction: direction,
+                    fromRowIndex: rowIndex,
+                    fromColIndex: colIndex,
+                    rowIndex: pos.rowIndex,
+                    colIndex: pos.colIndex,
+                    colDidChange: colDidChange,
+                    rowDidChange: rowDidChange,
+                });
+            }
+            focusOnCell(tableId, pos);
+        }
+        if (onCellNavigation) {
+            onCellNavigation({
                 direction: direction,
                 fromRowIndex: rowIndex,
                 fromColIndex: colIndex,
@@ -578,56 +588,46 @@ var createMoveHandler = function (tableId, rowIndex, colIndex, numRows, numCols,
                 colIndex: pos.colIndex,
                 colDidChange: colDidChange,
                 rowDidChange: rowDidChange,
+                cellDidChange: colDidChange || rowDidChange,
             });
         }
-        focusOnCell(tableId, pos);
-    }
-    if (onCellNavigation) {
-        onCellNavigation({
-            direction: direction,
-            fromRowIndex: rowIndex,
-            fromColIndex: colIndex,
-            rowIndex: pos.rowIndex,
-            colIndex: pos.colIndex,
-            colDidChange: colDidChange,
-            rowDidChange: rowDidChange,
-            cellDidChange: colDidChange || rowDidChange,
-        });
-    }
-}; };
-var createCellId = function (tableId, rowIndex, colIndex) { return ensureDomIdIsCorrect("table-" + tableId + "-" + rowIndex + "-" + colIndex); };
-var createKeyDownHandler = function (moveHandler) { return function (e) {
-    if (e.key === "ArrowLeft") {
-        moveHandler("left");
-        e.preventDefault();
-        e.stopPropagation();
-        return true;
-    }
-    else if (e.key === "ArrowUp") {
-        moveHandler("up");
-        e.preventDefault();
-        e.stopPropagation();
-        return true;
-    }
-    else if (e.key === "ArrowRight") {
-        moveHandler("right");
-        e.preventDefault();
-        e.stopPropagation();
-        return true;
-    }
-    else if (e.key === "ArrowDown") {
-        moveHandler("down");
-        e.preventDefault();
-        e.stopPropagation();
-        return true;
-    }
-    else {
-        return false;
-    }
-}; };
+    };
+};
+var createCellId = function (tableId, rowIndex, colIndex) { return ensureDomIdIsCorrect("table-".concat(tableId, "-").concat(rowIndex, "-").concat(colIndex)); };
+var createKeyDownHandler = function (moveHandler) {
+    return function (e) {
+        if (e.key === "ArrowLeft") {
+            moveHandler("left");
+            e.preventDefault();
+            e.stopPropagation();
+            return true;
+        }
+        else if (e.key === "ArrowUp") {
+            moveHandler("up");
+            e.preventDefault();
+            e.stopPropagation();
+            return true;
+        }
+        else if (e.key === "ArrowRight") {
+            moveHandler("right");
+            e.preventDefault();
+            e.stopPropagation();
+            return true;
+        }
+        else if (e.key === "ArrowDown") {
+            moveHandler("down");
+            e.preventDefault();
+            e.stopPropagation();
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+};
 var focusOnCell = function (tableId, pos) {
-    var el = (document.querySelector("#" + createCellId(tableId, pos.rowIndex, pos.colIndex)) ||
-        document.querySelector("#" + createCellId(tableId, pos.rowIndex, pos.colIndex)));
+    var el = (document.querySelector("#".concat(createCellId(tableId, pos.rowIndex, pos.colIndex))) ||
+        document.querySelector("#".concat(createCellId(tableId, pos.rowIndex, pos.colIndex))));
     if (el) {
         el.focus();
     }
@@ -770,7 +770,7 @@ var createInternalStandardTableActions = function () { return ({
     fields: redux.createEntityActions(),
 }); };
 
-var getReducerIdFor = function (reducerId, reducerIdSuffix) { return reducerId + "." + reducerIdSuffix; };
+var getReducerIdFor = function (reducerId, reducerIdSuffix) { return "".concat(reducerId, ".").concat(reducerIdSuffix); };
 
 var createStandardTableInitialState = function (sortBy, desc, selectedIds, expandedRows) {
     if (sortBy === void 0) { sortBy = undefined; }
@@ -1196,7 +1196,7 @@ var getStickyPropsPerColumnWithNoGroups = function (config) {
         sum[columnId] = {
             sticky: sticky,
             left: sticky
-                ? "calc(var(--current-left-offset) + " + ((_a = columnConfig.left) !== null && _a !== void 0 ? _a : "0px") + ")"
+                ? "calc(var(--current-left-offset) + ".concat((_a = columnConfig.left) !== null && _a !== void 0 ? _a : "0px", ")")
                 : undefined,
             right: sticky ? columnConfig.right : undefined,
             type: "column",
@@ -1385,10 +1385,7 @@ var useRowCheckbox = function (item, idListForEnabledItems) {
     var _a = useStandardTableState(), selectedIds = _a.selectedIds.selectedIds, lastSelectedId = _a.fields.lastSelectedId;
     var _b = useStandardTableActions(), _c = _b.actions, setSelectedIds = _c.setSelectedIds, setLastSelectedId = _c.setLastSelectedId, dispatch = _b.dispatch;
     var itemKey = React.useMemo(function () { return keyResolver(item); }, [keyResolver, item]);
-    var isSelected = React.useMemo(function () { return selectedIds.includes(itemKey); }, [
-        selectedIds,
-        itemKey,
-    ]);
+    var isSelected = React.useMemo(function () { return selectedIds.includes(itemKey); }, [selectedIds, itemKey]);
     var _d = core.useArraySet(selectedIds, function (ids) { return dispatch(setSelectedIds(ids)); }), toggle = _d.toggle, addMultiple = _d.addMultiple, removeMultiple = _d.removeMultiple;
     var shiftAndToggleSelected = React.useCallback(function () {
         if (idListForEnabledItems && lastSelectedId) {
@@ -1436,10 +1433,7 @@ var useExpandCollapseActions = function (item) {
     var selectedIds = useStandardTableState().expandedRows.selectedIds;
     var _a = useStandardTableActions(), expandByIds = _a.actions.expandByIds, dispatch = _a.dispatch;
     var itemKey = React.useMemo(function () { return keyResolver(item); }, [keyResolver, item]);
-    var isExpanded = React.useMemo(function () { return selectedIds.includes(itemKey); }, [
-        selectedIds,
-        itemKey,
-    ]);
+    var isExpanded = React.useMemo(function () { return selectedIds.includes(itemKey); }, [selectedIds, itemKey]);
     var toggle = core.useArraySet(selectedIds, function (ids) {
         return dispatch(expandByIds(ids));
     }).toggle;
@@ -1479,11 +1473,7 @@ var getBackgroundColor$1 = function (backgroundResolver, item, background) {
     return backgroundResolver ? backgroundResolver(item) : background;
 };
 var useBackground = function (backgroundResolver, item, background) {
-    return React.useMemo(function () { return getBackgroundColor$1(backgroundResolver, item, background); }, [
-        backgroundResolver,
-        item,
-        background,
-    ]);
+    return React.useMemo(function () { return getBackgroundColor$1(backgroundResolver, item, background); }, [backgroundResolver, item, background]);
 };
 var useCellBackgroundByColumnId = function (columnId, item) {
     var _a = useColumnConfigById(columnId), background = _a.background, backgroundResolver = _a.backgroundResolver;
@@ -1640,20 +1630,20 @@ var StandardTableRowExpansion = function StandardTableRowExpansion(_a) {
 
 var TrWithHoverBackground = styled__default["default"].tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"], ["\n  ", "\n  ", ";\n  ", ";\n  ", ";\n  ", "\n"])), function (_a) {
     var focusBackground = _a.focusBackground;
-    return focusBackground ? "--focus-within-background: " + focusBackground + ";" : "";
+    return focusBackground ? "--focus-within-background: ".concat(focusBackground, ";") : "";
 }, function (_a) {
     var borderLeft = _a.borderLeft;
-    return (borderLeft ? "border-left: " + borderLeft + ";" : "");
+    return (borderLeft ? "border-left: ".concat(borderLeft, ";") : "");
 }, function (_a) {
     var background = _a.background;
-    return (background ? "background: " + background + ";" : "");
+    return (background ? "background: ".concat(background, ";") : "");
 }, function (_a) {
     var height = _a.height;
-    return (height ? "height: " + height + ";" : "");
+    return (height ? "height: ".concat(height, ";") : "");
 }, function (_a) {
     var hoverBackground = _a.hoverBackground;
     return hoverBackground
-        ? "  &:hover {\n    background: " + hoverBackground + ";\n  }\n"
+        ? "  &:hover {\n    background: ".concat(hoverBackground, ";\n  }\n")
         : "";
 });
 var templateObject_1;
@@ -1676,10 +1666,7 @@ var StandardTableRow = React__namespace.memo(function StandardTableRow(_a) {
     var background = getBackgroundColor(resolvedBackgroundResult, isSelected, isExpanded);
     var hoverBackground = getHoverBackgroundColor(resolvedBackgroundResult, isSelected, isExpanded);
     var focusBackground = getFocusBackgroundColor(resolvedBackgroundResult, isSelected, hoverBackground);
-    var disabled = React.useMemo(function () { return checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item); }, [
-        item,
-        checkboxDisabledResolver,
-    ]);
+    var disabled = React.useMemo(function () { return checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item); }, [item, checkboxDisabledResolver]);
     var firstColumn = useFirstColumnConfig();
     var firstColumnBackground = useCellBackgroundByColumnConfig(firstColumn, item);
     var lastColumn = useLastColumnConfig();
@@ -1821,11 +1808,7 @@ var SummaryCell = React__namespace.memo(function SummaryCell(_a) {
                 ? "var(--swui-sticky-column-shadow-right)"
                 : undefined;
     var text = React.useMemo(function () { return summaryText === null || summaryText === void 0 ? void 0 : summaryText({ items: items }); }, [items, summaryText]);
-    var renderResult = React.useMemo(function () { return renderSummaryCell === null || renderSummaryCell === void 0 ? void 0 : renderSummaryCell({ items: items, text: text }); }, [
-        items,
-        renderSummaryCell,
-        text,
-    ]);
+    var renderResult = React.useMemo(function () { return renderSummaryCell === null || renderSummaryCell === void 0 ? void 0 : renderSummaryCell({ items: items, text: text }); }, [items, renderSummaryCell, text]);
     return (React__namespace.createElement("td", { colSpan: colSpan, style: {
             borderLeft: activeBorderLeft,
             position: stickyProps.sticky ? "sticky" : undefined,
@@ -1884,9 +1867,11 @@ var SummaryRowSwitcher = function SummaryRowSwitcher(_a) {
     return React__namespace.createElement(StandardTableSummaryRow, { items: items });
 };
 
-var filterItemsOnEnabledCheckboxes = function (checkboxDisabledResolver) { return function (item) {
-    return (checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item)) ? false : true ;
-}; };
+var filterItemsOnEnabledCheckboxes = function (checkboxDisabledResolver) {
+    return function (item) {
+        return (checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item)) ? false : true ;
+    };
+};
 
 var StandardTableRowList = React__namespace.memo(function StandardTableRowList(_a) {
     var items = _a.items, _b = _a.colIndexOffset, colIndexOffset = _b === void 0 ? 0 : _b, _c = _a.rowIndexOffset, rowIndexOffset = _c === void 0 ? 0 : _c;
@@ -2112,10 +2097,10 @@ var StandardTableHeadItem = React__namespace.memo(function StandardTableHeaderIt
 
 var getTopPosition = function (headerRowOffsetTop, columnGroupOrder, height, stickyHeader) {
     if (headerRowOffsetTop && columnGroupOrder !== undefined) {
-        return "calc(" + headerRowOffsetTop + " + " + height + ")";
+        return "calc(".concat(headerRowOffsetTop, " + ").concat(height, ")");
     }
     else if (stickyHeader && columnGroupOrder) {
-        return "calc(0px + " + height + ")";
+        return "calc(0px + ".concat(height, ")");
     }
     else if (headerRowOffsetTop) {
         return headerRowOffsetTop;
@@ -2182,7 +2167,7 @@ var ColGroups = function () {
     var rowIndent = core.booleanOrNumberToNumber(config.rowIndent);
     return (React__namespace.createElement(React__namespace.Fragment, null,
         rowIndent ? (React__namespace.createElement("colgroup", null,
-            React__namespace.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * " + rowIndent + ")" } }))) : null,
+            React__namespace.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * ".concat(rowIndent, ")") } }))) : null,
         hasExtraColGroup && (React__namespace.createElement("colgroup", null,
             config.enableExpandCollapse && (React__namespace.createElement("col", { style: { width: "var(--swui-expand-cell-width)" } })),
             config.showRowCheckbox && (React__namespace.createElement("col", { style: { width: "var(--swui-checkbox-cell-width)" } })))),
@@ -2194,7 +2179,7 @@ var ColGroups = function () {
                 } })); })));
         }),
         rowIndent ? (React__namespace.createElement("colgroup", null,
-            React__namespace.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * " + rowIndent + ")" } }))) : null));
+            React__namespace.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * ".concat(rowIndent, ")") } }))) : null));
 };
 
 var StandardTable = function StandardTable(_a) {
@@ -2270,24 +2255,30 @@ var createColumnConfig = function (itemValueResolver, options) {
     return __assign(__assign({}, options), { itemValueResolver: itemValueResolver });
 };
 
-var createStandardEditableTextCell = function () { return function (_a) {
-    var label = _a.label, _b = _a.gridCell, editorValue = _b.editorValue, isEditing = _b.isEditing, setEditorValue = _b.setEditorValue, stopEditingAndRevert = _b.stopEditingAndRevert, lastKeyEvent = _b.lastKeyEvent, stopEditing = _b.stopEditing, stopEditingAndMove = _b.stopEditingAndMove;
-    return isEditing ? (React__namespace.createElement(forms.TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React__namespace.createElement(core.Indent, null,
-        React__namespace.createElement(core.Text, { color: "var(--swui-primary-action-color)" }, label)));
-}; };
-
-var createEditableTextCellWithStatus = function (warningOnEmpty, crudStatusProvider, modifiedFieldProvider) { return function (_a) {
-    var label = _a.label, item = _a.item, _b = _a.gridCell, editorValue = _b.editorValue, isEditing = _b.isEditing, setEditorValue = _b.setEditorValue, stopEditingAndRevert = _b.stopEditingAndRevert, lastKeyEvent = _b.lastKeyEvent, stopEditing = _b.stopEditing, stopEditingAndMove = _b.stopEditingAndMove, isEditable = _a.isEditable;
-    var warnOnEmpty = typeof warningOnEmpty === "function"
-        ? warningOnEmpty(item)
-        : warningOnEmpty;
-    var crudStatus = crudStatusProvider ? crudStatusProvider(item) : undefined;
-    var modifiedField = modifiedFieldProvider
-        ? modifiedFieldProvider(item)
-        : undefined;
-    return isEditable && isEditing ? (React__namespace.createElement(forms.TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React__namespace.createElement(core.Indent, { row: true, alignItems: "center" },
-        React__namespace.createElement(ModifiedField, { value: label, modifiedField: modifiedField, crudStatus: crudStatus, isEditable: isEditable, warningOnEmpty: warnOnEmpty })));
-}; };
+var createStandardEditableTextCell = function () {
+    return function (_a) {
+        var label = _a.label, _b = _a.gridCell, editorValue = _b.editorValue, isEditing = _b.isEditing, setEditorValue = _b.setEditorValue, stopEditingAndRevert = _b.stopEditingAndRevert, lastKeyEvent = _b.lastKeyEvent, stopEditing = _b.stopEditing, stopEditingAndMove = _b.stopEditingAndMove;
+        return isEditing ? (React__namespace.createElement(forms.TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React__namespace.createElement(core.Indent, null,
+            React__namespace.createElement(core.Text, { color: "var(--swui-primary-action-color)" }, label)));
+    };
+};
+
+var createEditableTextCellWithStatus = function (warningOnEmpty, crudStatusProvider, modifiedFieldProvider) {
+    return function (_a) {
+        var label = _a.label, item = _a.item, _b = _a.gridCell, editorValue = _b.editorValue, isEditing = _b.isEditing, setEditorValue = _b.setEditorValue, stopEditingAndRevert = _b.stopEditingAndRevert, lastKeyEvent = _b.lastKeyEvent, stopEditing = _b.stopEditing, stopEditingAndMove = _b.stopEditingAndMove, isEditable = _a.isEditable;
+        var warnOnEmpty = typeof warningOnEmpty === "function"
+            ? warningOnEmpty(item)
+            : warningOnEmpty;
+        var crudStatus = crudStatusProvider
+            ? crudStatusProvider(item)
+            : undefined;
+        var modifiedField = modifiedFieldProvider
+            ? modifiedFieldProvider(item)
+            : undefined;
+        return isEditable && isEditing ? (React__namespace.createElement(forms.TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React__namespace.createElement(core.Indent, { row: true, alignItems: "center" },
+            React__namespace.createElement(ModifiedField, { value: label, modifiedField: modifiedField, crudStatus: crudStatus, isEditable: isEditable, warningOnEmpty: warnOnEmpty })));
+    };
+};
 
 exports.CrudStatusIndicator = CrudStatusIndicator;
 exports.EditableTextCellWithCrudAndModified = EditableTextCellWithCrudAndModified;