grep-components 1.20.0-grepf-1778.1 → 1.20.0

package/dist/components/GrepEditor/components/editor.d.ts

@@ -17,6 +17,7 @@ export interface Properties {
     disableNewlines?: boolean;
     stripPastedStyles?: boolean;
     blockPasting?: boolean;
+    lang?: string;
     /**
      * Undefined: allow all styles.
      * Empty array: disable all styles.

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { SelectProps } from '@mui/material';
+import { SelectProps, InputBaseComponentProps } from '@mui/material';
 export interface SelectItem {
     value: string | number;
     label?: string;
     disabled?: boolean;
+    lang?: string;
 }
 export interface GrepSelectProps extends SelectProps {
     label: string;
@@ -13,6 +14,7 @@ export interface GrepSelectProps extends SelectProps {
     selectItems: SelectItem[];
     unselectOption?: boolean;
     useCheckedSelect?: boolean;
+    inputProps?: InputBaseComponentProps | undefined;
 }
 declare const _default: React.ComponentType<GrepSelectProps>;
 export default _default;

package/dist/components/GrepTable/components/grep-table-header-cell.d.ts

@@ -4,6 +4,7 @@ import { TableColumn } from '..';
 interface Properties<T> extends TableSortLabelProps {
     column: TableColumn<T>;
     onSortBy?: (row: T) => void;
+    empty?: boolean;
 }
 declare type Component<T> = React.FunctionComponent<Properties<T>>;
 export declare const TableHeaderCell: Component<any>;

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

@@ -11,6 +11,7 @@ export interface TableColumn<T> extends Pick<TableCellProps, 'padding' | 'sx'> {
     getTooltip?: (row: T) => string;
     getCell: (row: T) => string | number | boolean | JSX.Element;
     lines?: (row: T) => number;
+    lang?: string | ((row: T) => string);
 }
 export interface GrepTableProps<T> extends Pick<TableProps, 'size' | 'stickyHeader' | 'padding'> {
     data: T[];
@@ -36,6 +37,7 @@ export interface GrepTableProps<T> extends Pick<TableProps, 'size' | 'stickyHead
     onContextIdChanged?: (row: T) => void;
     onSortBy?: (col: TableColumn<T>) => any;
     caption?: React.ReactNode;
+    menuButtonLabel?: string;
     /**
      * @deprecated No longer in use.
      */
@@ -65,6 +67,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, underlineOnFocus, ...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, ...props }: GrepTableProps<T>) => JSX.Element;
 export { GrepTableRow };
 export default GrepTable;

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

@@ -9,6 +9,8 @@ export interface SearchBarProps {
     onClear: () => void;
     onSearchAll?: () => void;
     onInputChange: (value: string) => void;
+    id?: string;
+    title?: string;
 }
 declare const _default: React.ComponentType<SearchBarProps>;
 export default _default;

package/dist/index.js

@@ -7,7 +7,7 @@ import * as React from 'react';
 import React__default, { useRef, useContext, createContext, createElement, Fragment, forwardRef, useMemo as useMemo$1, useState, useCallback as useCallback$1, useEffect, useLayoutEffect } from 'react';
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import ArrowDropdown from '@mui/icons-material/ArrowDropDown';
-import { Button, Box, Typography, IconButton, Menu, MenuItem, Tabs, Tab, Collapse, MenuList, Tooltip, Container, List, ListItem, ListItemText, ListItemIcon, Divider, styled, TableCell, TableRow, TableSortLabel, TableHead, TablePagination, TableContainer, Table, TableBody, TableFooter, CircularProgress, Link, TextField, FormControl, InputLabel, Select, OutlinedInput, Input, Checkbox, FormHelperText, Grid, ToggleButtonGroup, AppBar as AppBar$1, Toolbar as Toolbar$1, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
+import { Button, Box, Typography, IconButton, Menu, MenuItem, Tabs, Tab, Collapse, MenuList, Tooltip, Container, List, ListItem, ListItemText, ListItemIcon, Divider, ListItemButton, styled, TableCell, TableRow, TableSortLabel, TableHead, TablePagination, TableContainer, Table, TableBody, TableFooter, CircularProgress, Link, TextField, FormControl, InputLabel, Select, OutlinedInput, Input, Checkbox, FormHelperText, Grid, ToggleButtonGroup, AppBar as AppBar$1, Toolbar as Toolbar$1, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { useHistory, NavLink, Prompt } from 'react-router-dom';
 import MenuIcon from '@mui/icons-material/Menu';
@@ -3138,7 +3138,7 @@ var CollapsableMenuItem = function (_a) {
                     return window.dispatchEvent(new Event('resize'));
                 });
             } }, items)))); };
-    return tooltipText ? (React__default.createElement(TooltipMenuItem, { className: classes.root, tooltipText: tooltipText, onMouseOver: function (e) { return e.currentTarget.focus(); }, disabled: disabled, selected: open, onClick: handleClick, onKeyDown: handleKey }, renderInner())) : (React__default.createElement(MenuItem, __assign({ className: classes.root, ref: listItemRef, selected: open, onClick: handleClick, onKeyDown: handleKey }, props), renderInner()));
+    return tooltipText ? (React__default.createElement(TooltipMenuItem, { className: classes.root, tooltipText: tooltipText, onMouseOver: function (e) { return e.currentTarget.focus(); }, disabled: disabled, selected: open, onClick: handleClick, onKeyDown: handleKey }, renderInner())) : (React__default.createElement(MenuItem, __assign({ className: classes.root, ref: listItemRef, selected: open, disabled: disabled, onClick: handleClick, onKeyDown: handleKey }, props), renderInner()));
 };
 
 var useStyles$f = makeStyles()(function (_a) {
@@ -3273,9 +3273,11 @@ var useFooterStyles = makeStyles()(function (theme) {
             fontFamily: 'Montserrat',
             fontWeight: 400,
             fontSize: '14px',
+            color: Colors.white,
         },
         itemBtn: {
             textDecoration: 'underline',
+            textTransform: 'none',
             '&:hover': {
                 backgroundColor: 'unset',
             },
@@ -3286,9 +3288,11 @@ var useFooterStyles = makeStyles()(function (theme) {
 var Footer = function (_a) {
     var items = _a.items, serviceNameText = _a.serviceNameText, udirLink = _a.udirLink, udirLogo = _a.udirLogo;
     var classes = useFooterStyles().classes;
-    var renderItem = function (text) { return (React__default.createElement(ListItemText, { className: classes.itemText, primary: text, primaryTypographyProps: {
-            style: { fontSize: 14, fontFamily: 'Montserrat', fontWeight: 400 },
-        } })); };
+    var renderItem = function (item) {
+        return item.onClickItem ? (React__default.createElement(Button, { className: classes.itemBtn.concat(' ' + classes.itemText), onClick: item.onClickItem }, item.label)) : (React__default.createElement(ListItemText, { className: classes.itemText, primary: item.label, primaryTypographyProps: {
+                style: { fontSize: 14, fontFamily: 'Montserrat', fontWeight: 400 },
+            } }));
+    };
     return (React__default.createElement(Box, { className: classes.footer, role: "contentinfo" },
         React__default.createElement(Box, { className: classes.content },
             React__default.createElement("a", { href: udirLink },
@@ -3299,13 +3303,12 @@ var Footer = function (_a) {
                     paddingRight: '16px !important',
                 } },
                 React__default.createElement("span", { className: classes.serviceNameText }, serviceNameText),
-                React__default.createElement(List, { className: classes.list }, items.map(function (_a, i) {
-                    var label = _a.label, render = _a.render, onClickItem = _a.onClickItem;
-                    return (React__default.createElement(ListItem, { key: i, classes: {
-                            root: classes.item,
-                            button: onClickItem ? classes.itemBtn : undefined,
-                        }, onClick: onClickItem, button: !!onClickItem }, render ? render(function () { return renderItem(label); }) : renderItem(label)));
-                }))))));
+                React__default.createElement(List, { className: classes.list }, items.map(function (item, i) { return (React__default.createElement(ListItem, { key: i, classes: {
+                        root: classes.item,
+                        //button: onClickItem ? classes.itemBtn : undefined,
+                    } }, item.render
+                    ? item.render(function () { return renderItem(item); })
+                    : renderItem(item))); }))))));
 };
 
 var LinkList = function (props) { return (React.createElement(Box, { width: "100%", flexDirection: "column" },
@@ -3338,9 +3341,10 @@ var ContainedLinkList = function (props) {
     var classes = useStyles$e().classes;
     return (React.createElement(Box, { className: classes.container, style: props.style },
         React.createElement(Typography, { className: classes.title }, props.title),
-        React.createElement(List, { style: { padding: 0 } }, props.pages.map(function (page) { return (React.createElement(ListItem, { button: true, divider: true, key: page.id, onClick: function () { return props.onPageClick(page); } },
-            page.linkIcon && React.createElement(ListItemIcon$1, null, page.linkIcon),
-            React.createElement(ListItemText, { primary: page.label }))); }))));
+        React.createElement(List, { style: { padding: 0 } }, props.pages.map(function (page) { return (React.createElement(ListItem, { divider: true, key: page.id, disablePadding: true },
+            React.createElement(ListItemButton, { onClick: function () { return props.onPageClick(page); } },
+                page.linkIcon && React.createElement(ListItemIcon$1, null, page.linkIcon),
+                React.createElement(ListItemText, { primary: page.label })))); }))));
 };
 
 var OverflowTooltip = /** @class */ (function (_super) {
@@ -3378,9 +3382,9 @@ var CellValue = styled('span')({
 });
 var GrepTableRow$1 = function (_a) {
     var row = _a.row, column = _a.column, selected = _a.selected, props = __rest$1(_a, ["row", "column", "selected"]);
-    var forceTooltip = column.forceTooltip, getTooltip = column.getTooltip, getCell = column.getCell, _b = column.lines, lines = _b === void 0 ? function () { return (selected ? undefined : 1); } : _b;
+    var forceTooltip = column.forceTooltip, getTooltip = column.getTooltip, getCell = column.getCell, lang = column.lang, _b = column.lines, lines = _b === void 0 ? function () { return (selected ? undefined : 1); } : _b;
     var padding = column.padding;
-    var value = (React__default.createElement(CellValue, { style: { WebkitLineClamp: lines(row) } }, getCell(row)));
+    var value = (React__default.createElement(CellValue, { style: { WebkitLineClamp: lines(row) }, lang: typeof lang === 'string' ? lang : lang ? lang(row) : '' }, getCell(row)));
     if (forceTooltip || getTooltip) {
         return (React__default.createElement(TableCell, __assign({ padding: padding }, props),
             React__default.createElement(OverflowTooltip, { force: forceTooltip, title: getTooltip ? getTooltip(row) : value }, value)));
@@ -3450,14 +3454,14 @@ var useTableHeaderStyles = makeStyles()(function (_theme, _a) {
 });
 
 var TableHeaderCell = function (_a) {
-    var column = _a.column, onSortBy = _a.onSortBy, direction = _a.direction, active = _a.active, children = _a.children, props = __rest$1(_a, ["column", "onSortBy", "direction", "active", "children"]);
+    var column = _a.column, onSortBy = _a.onSortBy, direction = _a.direction, active = _a.active, children = _a.children, _b = _a.empty, empty = _b === void 0 ? false : _b, props = __rest$1(_a, ["column", "onSortBy", "direction", "active", "children", "empty"]);
     var classes = useTableHeaderStyles({ column: column }).classes;
     var sortable = !!(onSortBy && column.sortable);
-    if (sortable) {
-        return (React__default.createElement(TableCell, __assign({ variant: "head", className: classes.th }, props),
+    if (sortable && !empty) {
+        return (React__default.createElement(TableCell, __assign({ variant: empty ? 'body' : 'head', className: classes.th }, props),
             React__default.createElement(TableSortLabel, { active: active, direction: direction }, children)));
     }
-    return (React__default.createElement(TableCell, __assign({ variant: "head", className: classes.th }, props), children));
+    return empty ? (React__default.createElement("td", { className: classes.th }, children)) : (React__default.createElement(TableCell, __assign({ variant: empty ? 'body' : 'head', className: classes.th }, props), children));
 };
 
 var TableHeader = function (_a) {
@@ -3469,7 +3473,7 @@ var TableHeader = function (_a) {
         React__default.createElement(TableRow, null, headerColumns.map(function (column, index) {
             var sortable = !!(onSortBy && column.sortable);
             var label = column.label, colDef = column.colDef;
-            return (React__default.createElement(TableHeaderCell, { key: index, column: column, direction: sortDirection, active: sortable ? sortBy === colDef : undefined, onClick: function () { return sortable && onSortBy(column); }, onKeyDown: onActivation(function (e) {
+            return (React__default.createElement(TableHeaderCell, { key: index, empty: !label, column: column, direction: sortDirection, active: sortable ? sortBy === colDef : undefined, onClick: function () { return sortable && onSortBy(column); }, onKeyDown: onActivation(function (e) {
                     if (sortable) {
                         e.preventDefault();
                         onSortBy(column);
@@ -3512,6 +3516,9 @@ 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: {
+            inputProps: {
+                title: 'Velg antall elementer',
+            },
             style: {
                 gridArea: 'left',
                 justifySelf: 'start',
@@ -3558,7 +3565,7 @@ 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, underlineOnFocus = _a.underlineOnFocus, props = __rest$1(_a, ["placeholderText", "dropdownItems", "isRowDisabled", "pagination", "outlined", "columns", "header", "data", "onSelectedRowChange", "sortBy", "sortDirection", "onSortBy", "onRowClick", "size", "caption", "stickyHeader", "padding", "disableSelectOnClick", "underlineOnFocus"]);
+    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, props = __rest$1(_a, ["placeholderText", "dropdownItems", "isRowDisabled", "pagination", "outlined", "columns", "header", "data", "onSelectedRowChange", "sortBy", "sortDirection", "onSortBy", "onRowClick", "size", "caption", "stickyHeader", "padding", "disableSelectOnClick", "menuButtonLabel", "underlineOnFocus"]);
     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];
@@ -3637,7 +3644,7 @@ var GrepTable = function (_a) {
                                 e.preventDefault();
                                 break;
                         }
-                    }, tabIndex: 0, size: "large" },
+                    }, tabIndex: 0, size: "large", "aria-label": menuButtonLabel !== null && menuButtonLabel !== void 0 ? menuButtonLabel : 'Åpne meny' },
                     React__default.createElement(MoreVert, null)))));
     };
     var _renderRow = function (row, index) {
@@ -3745,7 +3752,7 @@ var LoadingOverlay = function (_a) {
                 opacity: show ? 1 : 0,
                 transition: "opacity ".concat(show ? 0 : minTime, "ms ease"),
             }, sx: sx }, box),
-            React__default.createElement(CircularProgress, null))));
+            React__default.createElement(CircularProgress, { "aria-label": "Laster inn" }))));
 };
 
 var useStyles$b = makeStyles()({
@@ -3848,7 +3855,13 @@ var SearchBar = function (props) {
             } },
             React.createElement(Box, { className: classes.icon },
                 React.createElement(Search, null)),
-            React.createElement(TextField, { role: "search", className: classes.input, value: value, variant: "standard", inputRef: inputRef, onChange: _handleChange, autoFocus: props.autoFocus, placeholder: props.placeholder, InputProps: { disableUnderline: true, fullWidth: true } }),
+            React.createElement(TextField, { id: props.id, role: "search", className: classes.input, value: value, variant: "standard", inputRef: inputRef, onChange: _handleChange, autoFocus: props.autoFocus, placeholder: props.placeholder, InputProps: {
+                    disableUnderline: true,
+                    fullWidth: true,
+                    inputProps: {
+                        title: props.title,
+                    },
+                } }),
             React.createElement(Box, { className: classes.icon, style: { cursor: 'pointer' } }, !!value.length && (React.createElement(Close, { "data-testid": "searchBarClearBtn", tabIndex: 0, onClick: _handleClear, onKeyPress: keyboard.onActivation(_handleClear) })))),
         React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
             props.helpText && (React.createElement(Typography, { className: classes.helptext }, props.helpText)),
@@ -3971,7 +3984,7 @@ var GrepSelect = function (props) {
     React.useEffect(function () {
         setLabelWidth(inputLabel.current.offsetWidth);
     }, []);
-    var _b = props.unselectOption, unselectOption = _b === void 0 ? true : _b, errorMessage = props.errorMessage, selectItems = props.selectItems, helperText = props.helperText, fullWidth = props.fullWidth, outlined = props.outlined, disabled = props.disabled, required = props.required, label = props.label, value = props.value, size = props.size, id = props.id, useCheckedSelect = props.useCheckedSelect, rest = __rest$1(props, ["unselectOption", "errorMessage", "selectItems", "helperText", "fullWidth", "outlined", "disabled", "required", "label", "value", "size", "id", "useCheckedSelect"]);
+    var _b = props.unselectOption, unselectOption = _b === void 0 ? true : _b, errorMessage = props.errorMessage, selectItems = props.selectItems, helperText = props.helperText, fullWidth = props.fullWidth, outlined = props.outlined, disabled = props.disabled, required = props.required, label = props.label, inputProps = props.inputProps, value = props.value, size = props.size, id = props.id, useCheckedSelect = props.useCheckedSelect, rest = __rest$1(props, ["unselectOption", "errorMessage", "selectItems", "helperText", "fullWidth", "outlined", "disabled", "required", "label", "inputProps", "value", "size", "id", "useCheckedSelect"]);
     var error = errorMessage ? errorMessage.length > 0 : false;
     var selected = value;
     return (React.createElement(FormControl, { variant: outlined ? 'outlined' : 'standard', className: props.className, fullWidth: fullWidth, required: required, style: props.style, error: error, size: size, disabled: disabled },
@@ -3979,7 +3992,7 @@ var GrepSelect = function (props) {
                 minWidth: 'max-content',
                 overflow: 'visible',
             } }, label),
-        React.createElement(Select, __assign({}, rest, { inputProps: { id: id }, disabled: !selectItems || disabled, value: value === null ? '' : value, style: { minWidth: labelWidth + (outlined ? 35 : 25) }, 
+        React.createElement(Select, __assign({}, rest, { inputProps: __assign({ id: id }, inputProps), disabled: !selectItems || disabled, value: value === null ? '' : value, style: { minWidth: labelWidth + (outlined ? 35 : 25) }, 
             // @todo: make input respect label length
             input: outlined ? React.createElement(OutlinedInput, { label: label }) : React.createElement(Input, null), MenuProps: {
                 anchorOrigin: {
@@ -3994,8 +4007,8 @@ var GrepSelect = function (props) {
             unselectOption && (React.createElement(MenuItem, { value: "" },
                 React.createElement("em", null, "Fjern valgt"))),
             selectItems.map(function (_a, i) {
-                var label = _a.label, value = _a.value, disabled = _a.disabled;
-                return (React.createElement(MenuItem, { key: i, value: value, disabled: disabled },
+                var label = _a.label, value = _a.value, disabled = _a.disabled, lang = _a.lang;
+                return (React.createElement(MenuItem, { key: i, value: value, disabled: disabled, lang: lang },
                     useCheckedSelect && (React.createElement(Checkbox, { checked: (selected === null || selected === void 0 ? void 0 : selected.indexOf(value)) > -1 })),
                     React.createElement(ListItemText, { sx: { margin: '0px', span: { lineHeight: '1.4375em' } }, primary: label ? label : value })));
             })),
@@ -20505,7 +20518,7 @@ var getCharCount = function (editorState) {
     return editorState.getCurrentContent().getPlainText('').length;
 };
 var EditorComponent = function (_a) {
-    var label = _a.label, classes = _a.classes, autoFocus = _a.autoFocus, helperText = _a.helperText, showCharCount = _a.showCharCount, allowedStyles = _a.allowedStyles, disableNewlines = _a.disableNewlines, onContentChange = _a.onContentChange, _b = _a.Toolbar, Toolbar = _b === void 0 ? FloatingToolbar : _b, blockPasting = _a.blockPasting, props = __rest$1(_a, ["label", "classes", "autoFocus", "helperText", "showCharCount", "allowedStyles", "disableNewlines", "onContentChange", "Toolbar", "blockPasting"]);
+    var label = _a.label, classes = _a.classes, autoFocus = _a.autoFocus, helperText = _a.helperText, showCharCount = _a.showCharCount, allowedStyles = _a.allowedStyles, disableNewlines = _a.disableNewlines, onContentChange = _a.onContentChange, _b = _a.Toolbar, Toolbar = _b === void 0 ? FloatingToolbar : _b, blockPasting = _a.blockPasting, lang = _a.lang, props = __rest$1(_a, ["label", "classes", "autoFocus", "helperText", "showCharCount", "allowedStyles", "disableNewlines", "onContentChange", "Toolbar", "blockPasting", "lang"]);
     var _c = useContext(EditorContext), state = _c.state, setState = _c.setState, setSelection = _c.setSelection;
     var ref = useRef();
     var canStyle = allowedStyles === undefined || allowedStyles.length > 0;
@@ -20574,7 +20587,7 @@ var EditorComponent = function (_a) {
             React__default.createElement("span", { dangerouslySetInnerHTML: { __html: '​' } })),
         label && (React__default.createElement("label", { className: clsx(styles.label, classes === null || classes === void 0 ? void 0 : classes.label) }, label)),
         canStyle && (React__default.createElement(Toolbar, { editor: ref, buttons: buttons })),
-        React__default.createElement(Box, { className: clsx(styles.editor, classes === null || classes === void 0 ? void 0 : classes.editor) },
+        React__default.createElement(Box, { className: clsx(styles.editor, classes === null || classes === void 0 ? void 0 : classes.editor), lang: lang },
             React__default.createElement(Editor, __assign({ ref: ref }, __assign({ editorState: state, onChange: onChange, onFocus: onFocus, onBlur: onBlur, blockStyleFn: blockStyleFn, handleKeyCommand: handleKeyCommand, keyBindingFn: keyBindingFn, handlePastedText: handlePastedText }, props)))),
         (showCharCount || helperText) && (React__default.createElement(Box, { margin: ".5rem" },
             showCharCount && (React__default.createElement(FormHelperText, { className: styles.charcount }, "Antall tegn: ".concat(charCount))),
@@ -20813,7 +20826,7 @@ var ToolbarMenuItem = styled(NavLink)(function (_a) {
             left: '50%',
             width: '32px',
             marginLeft: '-16px',
-            borderBottom: "2px solid ".concat(theme.palette.secondary.main),
+            borderBottom: "2px solid ".concat(theme.palette.secondary.light),
             opacity: 0,
             content: '""',
             transition: 'all 0.3s ease',