grep-components 1.25.0 → 1.26.0-GREPF-2165.2

package/dist/components/GrepTable/index.d.ts

@@ -20,6 +20,7 @@ export interface GrepTableProps<T> extends Pick<TableProps, 'size' | 'stickyHead
     header?: boolean;
     outlined?: boolean;
     rowsPerPage?: number;
+    rowsPerPageOptions?: number[];
     pagination?: boolean;
     /**
      * @deprecated No longer in use.
@@ -42,6 +43,7 @@ export interface GrepTableProps<T> extends Pick<TableProps, 'size' | 'stickyHead
      * @deprecated No longer in use.
      */
     rowHeight?: number;
+    rowStyle?: React.CSSProperties | ((data: any, index: number) => React.CSSProperties);
     disableSelectOnClick?: boolean;
     underlineOnFocus?: boolean;
     rowTabIndex?: number;
@@ -68,6 +70,6 @@ export declare const useStyles: (params: StyleProps, styleOverrides?: {
  * @todo enhance page handling
  *
  */
-export declare const GrepTable: <T>({ placeholderText, dropdownItems, isRowDisabled, pagination, outlined, columns, header, data, onSelectedRowChange, sortBy, sortDirection, onSortBy, onRowClick, size, caption, stickyHeader, padding, disableSelectOnClick, menuButtonLabel, underlineOnFocus, rowTabIndex, ...props }: GrepTableProps<T>) => JSX.Element;
+export declare const GrepTable: <T>({ placeholderText, dropdownItems, isRowDisabled, pagination, outlined, columns, header, data, onSelectedRowChange, sortBy, sortDirection, onSortBy, onRowClick, size, caption, stickyHeader, padding, disableSelectOnClick, menuButtonLabel, underlineOnFocus, rowTabIndex, rowStyle, rowsPerPageOptions, ...props }: GrepTableProps<T>) => JSX.Element;
 export { GrepTableRow };
 export default GrepTable;

package/dist/index.js

@@ -3612,7 +3612,7 @@ var PaginationActions = function (_a) {
 
 var GrepTablePagination = function (props) {
     var classes = usePaginationStyles().classes;
-    return (React__default.createElement(TablePagination, __assign({ classes: classes, rowsPerPageOptions: props.rowsPerPageOptions || [5, 10, 25, 50], SelectProps: {
+    return (React__default.createElement(TablePagination, __assign({ classes: classes, rowsPerPageOptions: props.rowsPerPageOptions, SelectProps: {
             inputProps: {
                 title: 'Velg antall elementer',
             },
@@ -3662,13 +3662,13 @@ var getElementIndex = function (el) {
  *
  */
 var GrepTable = function (_a) {
-    var placeholderText = _a.placeholderText, dropdownItems = _a.dropdownItems, isRowDisabled = _a.isRowDisabled, pagination = _a.pagination, outlined = _a.outlined, columns = _a.columns, header = _a.header, data = _a.data, onSelectedRowChange = _a.onSelectedRowChange, sortBy = _a.sortBy, sortDirection = _a.sortDirection, onSortBy = _a.onSortBy, onRowClick = _a.onRowClick, size = _a.size, caption = _a.caption, stickyHeader = _a.stickyHeader, padding = _a.padding, _b = _a.disableSelectOnClick, disableSelectOnClick = _b === void 0 ? false : _b, menuButtonLabel = _a.menuButtonLabel, underlineOnFocus = _a.underlineOnFocus, rowTabIndex = _a.rowTabIndex, props = __rest$1(_a, ["placeholderText", "dropdownItems", "isRowDisabled", "pagination", "outlined", "columns", "header", "data", "onSelectedRowChange", "sortBy", "sortDirection", "onSortBy", "onRowClick", "size", "caption", "stickyHeader", "padding", "disableSelectOnClick", "menuButtonLabel", "underlineOnFocus", "rowTabIndex"]);
-    var _c = __read(React__default.useState(props.rowsPerPage || 10), 2), rowsPerPage = _c[0], setRowsPerPage = _c[1];
-    var _d = __read(React__default.useState(null), 2), menuAnchor = _d[0], setMenuAnchor = _d[1];
-    var _e = __read(React__default.useState(0), 2), currentPage = _e[0], _setCurrentPage = _e[1];
-    var _f = __read(React__default.useState(), 2), selectedRowIndex = _f[0], _setSelectedRowIndex = _f[1];
-    var _g = __read(React__default.useState(), 2), expandedRowIndex = _g[0], _setExpandedRowIndex = _g[1];
-    var _h = __read(React__default.useState(), 2), dropdownContext = _h[0], setDropdownContext = _h[1];
+    var placeholderText = _a.placeholderText, dropdownItems = _a.dropdownItems, isRowDisabled = _a.isRowDisabled, pagination = _a.pagination, outlined = _a.outlined, columns = _a.columns, header = _a.header, data = _a.data, onSelectedRowChange = _a.onSelectedRowChange, sortBy = _a.sortBy, sortDirection = _a.sortDirection, onSortBy = _a.onSortBy, onRowClick = _a.onRowClick, size = _a.size, caption = _a.caption, stickyHeader = _a.stickyHeader, padding = _a.padding, _b = _a.disableSelectOnClick, disableSelectOnClick = _b === void 0 ? false : _b, menuButtonLabel = _a.menuButtonLabel, underlineOnFocus = _a.underlineOnFocus, rowTabIndex = _a.rowTabIndex, rowStyle = _a.rowStyle, _c = _a.rowsPerPageOptions, rowsPerPageOptions = _c === void 0 ? [5, 10, 25, 50] : _c, props = __rest$1(_a, ["placeholderText", "dropdownItems", "isRowDisabled", "pagination", "outlined", "columns", "header", "data", "onSelectedRowChange", "sortBy", "sortDirection", "onSortBy", "onRowClick", "size", "caption", "stickyHeader", "padding", "disableSelectOnClick", "menuButtonLabel", "underlineOnFocus", "rowTabIndex", "rowStyle", "rowsPerPageOptions"]);
+    var _d = __read(React__default.useState(props.rowsPerPage || 10), 2), rowsPerPage = _d[0], setRowsPerPage = _d[1];
+    var _e = __read(React__default.useState(null), 2), menuAnchor = _e[0], setMenuAnchor = _e[1];
+    var _f = __read(React__default.useState(0), 2), currentPage = _f[0], _setCurrentPage = _f[1];
+    var _g = __read(React__default.useState(), 2), selectedRowIndex = _g[0], _setSelectedRowIndex = _g[1];
+    var _h = __read(React__default.useState(), 2), expandedRowIndex = _h[0], _setExpandedRowIndex = _h[1];
+    var _j = __read(React__default.useState(), 2), dropdownContext = _j[0], setDropdownContext = _j[1];
     var selectedRow = data[selectedRowIndex] || null;
     var setCurrentPage = useCallback$1(function (index, rowIndex, shouldExpand) {
         index = pagination && index >= 0 ? index : 0;
@@ -3756,6 +3756,16 @@ var GrepTable = function (_a) {
                     }, tabIndex: 0, size: "large", "aria-label": menuButtonLabel !== null && menuButtonLabel !== void 0 ? menuButtonLabel : 'Åpne meny' },
                     React__default.createElement(MoreVert, null)))));
     };
+    var getRowStyle = function (row, index, clickableRows, disabled) {
+        var style = { cursor: clickableRows && !disabled ? 'pointer' : '' };
+        if (typeof rowStyle === "function") {
+            style = __assign(__assign({}, style), rowStyle(row, index));
+        }
+        else if (rowStyle) {
+            style = __assign(__assign({}, style), rowStyle);
+        }
+        return style;
+    };
     var _renderRow = function (row, index) {
         var rowColumns = dropdownItems
             ? columns.concat([{ getCell: _renderCellButton, padding: 'none' }])
@@ -3775,7 +3785,7 @@ var GrepTable = function (_a) {
                         _handleRowClick(row);
                     }
                 }
-            }, columns: rowColumns, row: row, style: { cursor: clickableRows && !disabled ? 'pointer' : '' }, onFocus: function (e) {
+            }, columns: rowColumns, row: row, style: getRowStyle(row, index, clickableRows, disabled), onFocus: function (e) {
                 if (selectedRowIndex !== rowIndex) {
                     setSelectedElement(e.currentTarget);
                 }
@@ -3831,7 +3841,7 @@ var GrepTable = function (_a) {
             React__default.createElement(TableHeader, { className: classes.header, columns: columns, sortBy: sortBy, sortDirection: sortDirection, onSortBy: onSortBy, dropdownItems: dropdownItems }),
             React__default.createElement(TableBody, { ref: tableRef, className: classes.body, onKeyDown: onKey }, data.length ? (rows.map(_renderRow)) : (React__default.createElement(GrepTablePlaceholder, { padding: padding, columns: columns, text: placeholderText }))),
             React__default.createElement(TableFooter, null, pagination && (React__default.createElement(TableRow, null,
-                React__default.createElement(GrepTablePagination, { page: currentPage, count: data.length, rowsPerPage: rowsPerPage, onPageChange: _handlePageChange, onRowsPerPageChange: _handleChangeRowsPerPage, labelRowsPerPage: '', labelDisplayedRows: function (_a) {
+                React__default.createElement(GrepTablePagination, { page: currentPage, count: data.length, rowsPerPage: rowsPerPage, onPageChange: _handlePageChange, rowsPerPageOptions: rowsPerPageOptions, onRowsPerPageChange: _handleChangeRowsPerPage, labelRowsPerPage: '', labelDisplayedRows: function (_a) {
                         var from = _a.from, to = _a.to, count = _a.count;
                         return "Viser ".concat(from, "-").concat(to, " av ").concat(count);
                     } }))))),
@@ -4609,7 +4619,7 @@ var DatePicker = function (_a) {
     var _c = __read(useState(), 2), error = _c[0], setError = _c[1];
     var helperText = errorMessage || error || props.helperText;
     useEffect(function () { return onChange(date); }, [String(date)]);
-    return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, locale: 'nb' },
+    return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: 'nb' },
         React__default.createElement(DesktopDatePicker
         // clearable @todo
         , __assign({