grep-components 1.17.0-grepf-1778.1 → 1.17.0-grepf-1779.1

package/dist/components/GrepTable/components/grep-table-row.d.ts

@@ -7,7 +7,6 @@ interface Properties<T> extends TableRowProps, Pick<TableCellProperties<T>, 'var
     columns: Array<TableColumn<T>>;
     clickable?: boolean;
     height?: number;
-    underlineOnFocus?: boolean;
 }
 declare type Component<T> = React.FunctionComponent<Properties<T>>;
 export declare const GrepTableRow: Component<any>;

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

@@ -41,7 +41,6 @@ export interface GrepTableProps<T> extends Pick<TableProps, 'size' | 'stickyHead
      */
     rowHeight?: number;
     disableSelectOnClick?: boolean;
-    underlineOnFocus?: boolean;
 }
 interface StyleProps {
     outlined?: boolean;
@@ -65,6 +64,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, ...props }: GrepTableProps<T>) => JSX.Element;
 export { GrepTableRow };
 export default GrepTable;

package/dist/index.js

@@ -39,6 +39,7 @@ export { ContentState } from 'draft-js';
 import ToggleButton from '@mui/material/ToggleButton';
 import FormatBold from '@mui/icons-material/FormatBold';
 import FormatItalic from '@mui/icons-material/FormatItalic';
+import Divider$1 from '@mui/material/Divider';
 import Menu$2 from '@mui/material/Menu';
 import MenuItem$1 from '@mui/material/MenuItem';
 import Button$1 from '@mui/material/Button';
@@ -4390,13 +4391,7 @@ var useFooterStyles = makeStyles()(function (theme) {
             _a),
         content: (_b = {
                 display: 'flex',
-                width: '100%',
-                a: {
-                    ':focus': {
-                        outlineColor: 'white',
-                        outlineOffset: '8px',
-                    },
-                }
+                width: '100%'
             },
             _b[theme.breakpoints.down('md')] = {
                 flexDirection: 'column',
@@ -4449,11 +4444,6 @@ var useFooterStyles = makeStyles()(function (theme) {
             _e['&:last-child'] = {
                 border: '0 !important',
             },
-            _e[':focus'] = {
-                background: 'inherit',
-                boxShadow: '0px 0px 0px 1px white',
-                borderRadius: '2px',
-            },
             _e),
         itemText: {
             padding: 0,
@@ -4477,7 +4467,7 @@ var Footer = function (_a) {
     var renderItem = function (text) { return (React__default.createElement(ListItemText, { className: classes.itemText, primary: text, primaryTypographyProps: {
             style: { fontSize: 14, fontFamily: 'Montserrat', fontWeight: 400 },
         } })); };
-    return (React__default.createElement(Box, { className: classes.footer },
+    return (React__default.createElement(Box, { className: classes.footer, role: "contentinfo" },
         React__default.createElement(Box, { className: classes.content },
             React__default.createElement("a", { href: udirLink },
                 React__default.createElement("img", { src: udirLogo, alt: "Utdanningsdirektoratet logo", style: { height: '43px', width: '150px' } })),
@@ -4577,11 +4567,9 @@ var GrepTableRow$1 = function (_a) {
 };
 
 var GrepTableRow = function (_a) {
-    var row = _a.row, columns = _a.columns, selected = _a.selected, variant = _a.variant; _a.clickable; _a.height; var underlineOnFocus = _a.underlineOnFocus, props = __rest$1(_a, ["row", "columns", "selected", "variant", "clickable", "height", "underlineOnFocus"]);
+    var row = _a.row, columns = _a.columns, selected = _a.selected, variant = _a.variant; _a.clickable; _a.height; var props = __rest$1(_a, ["row", "columns", "selected", "variant", "clickable", "height"]);
     var render = function (column, index) { return (React__default.createElement(GrepTableRow$1, __assign({ key: index }, { column: column, row: row, variant: variant, selected: selected }))); };
-    return (React__default.createElement(TableRow, __assign({ sx: {
-            ':focus': { textDecoration: underlineOnFocus ? 'underline' : 'none' },
-        } }, __assign({ selected: selected }, props)), columns.map(render)));
+    return React__default.createElement(TableRow, __assign({}, __assign({ selected: selected }, props)), columns.map(render));
 };
 
 var usePaginationActionStyles = makeStyles()(function (_a) {
@@ -4746,7 +4734,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, props = __rest$1(_a, ["placeholderText", "dropdownItems", "isRowDisabled", "pagination", "outlined", "columns", "header", "data", "onSelectedRowChange", "sortBy", "sortDirection", "onSortBy", "onRowClick", "size", "caption", "stickyHeader", "padding", "disableSelectOnClick"]);
     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];
@@ -4844,7 +4832,7 @@ var GrepTable = function (_a) {
             }, columns: rowColumns, row: row, style: { cursor: clickableRows && !disabled ? 'pointer' : '' }, onFocus: function (_a) {
                 var currentTarget = _a.currentTarget;
                 return setSelectedElement(currentTarget);
-            }, underlineOnFocus: underlineOnFocus }));
+            } }));
     };
     var onKey = function (e) {
         var maxIndex = data.length - 1;
@@ -4956,10 +4944,6 @@ var useStyles$b = makeStyles()({
         '&:hover': {
             textDecoration: 'underline',
         },
-        '&:focus': {
-            textDecoration: 'underline',
-            outlineOffset: '2px',
-        },
     },
 });
 
@@ -5035,7 +5019,7 @@ var SearchBar = function (props) {
             } },
             React.createElement(Box, { className: classes.icon },
                 React.createElement(Search, null)),
-            React.createElement(TextField, { 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, { 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(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)),
@@ -21788,11 +21772,7 @@ var ToolbarTitle = styled(NavLink)(function () { return ({
     fontWeight: 500,
     textDecoration: 'none',
     ':hover': {
-        textDecoration: 'underline',
-    },
-    ':focus': {
-        outline: 'none',
-        textDecoration: 'underline',
+        textDecoration: 'none',
     },
 }); });
 var EnvironmentTitle = styled('div')(function () { return ({
@@ -22003,21 +21983,12 @@ var ToolbarMenuItem = styled(NavLink)(function (_a) {
         },
         ':focus': {
             outline: 'none',
-            color: menuItemHoverGreen,
-            ':after': {
-                bottom: '-4px',
-                opacity: '1',
-            },
         },
         ':hover': {
             textDecoration: 'none',
             color: menuItemHoverGreen,
-            ':after': {
-                bottom: '-4px',
-                opacity: '1',
-            },
         },
-        '.active:after': {
+        '.active:after, :hover:after, focus:after': {
             bottom: '-4px',
             opacity: '1',
         },
@@ -22054,7 +22025,7 @@ var MobileAppBar = function (_a) {
         setAnchorElMenu(null);
     };
     return (React.createElement(MobileToolbarMenu, { style: { flexGrow: 1 } },
-        React.createElement(AppBar$1, { position: "static" },
+        React.createElement(AppBar$1, { position: "static", role: "nav" },
             React.createElement(Toolbar$1, { style: { minHeight: '50px' } },
                 React.createElement(IconButton, { size: "medium", edge: "start", color: "inherit", "aria-label": "menu", style: { marginRight: 2 }, onClick: handleClickNav },
                     React.createElement(Menu$1, { sx: { color: 'white' } })),
@@ -22097,13 +22068,13 @@ var AppBar = function (_a) {
     };
     return (React.createElement(Toolbar, null,
         React.createElement(ToolbarFixer, null,
-            React.createElement(ToolbarInner, { colors: colors },
+            React.createElement(ToolbarInner, { colors: colors, role: "header" },
                 React.createElement(ToolbarLeft, null,
                     React.createElement(ToolbarTitle, { to: '/' },
                         appTitle,
                         !isProd && (React.createElement(EnvironmentTitle, null, process.env.REACT_APP_HOST)))),
                 React.createElement(ToolbarRight, null,
-                    React.createElement(Button$1, { "aria-controls": userMenuAnchor ? 'basic-menu' : undefined, "aria-haspopup": "true", "aria-expanded": userMenuAnchor ? 'true' : undefined, onClick: _handleIconButtonClick },
+                    React.createElement(Button$1, { onClick: _handleIconButtonClick },
                         React.createElement(AccountCircle, { color: "primary", fontSize: "large" }),
                         React.createElement(UserContainer, null,
                             React.createElement(AccountName, null, username),
@@ -22116,19 +22087,17 @@ var AppBar = function (_a) {
                             vertical: 'top',
                             horizontal: 'center',
                         } }, userMenuItems.map(function (i, index) {
-                        return (React.createElement(MenuItem$1, { key: i.id, onClick: function () {
-                                setUserMenuAnchor(null);
-                                i.action && i.action();
-                            }, divider: userMenuItems.length > index + 1, sx: {
-                                ':focus': {
-                                    textDecoration: 'underline',
-                                },
-                            } }, i.isAnchor ? (React.createElement("a", { style: {
-                                textDecoration: 'inherit',
-                                color: 'inherit',
-                            }, rel: "noreferrer", href: i.href }, i.label)) : (i.label)));
+                        return (React.createElement(Box, { key: i.id },
+                            React.createElement(MenuItem$1, { key: i.id, onClick: function () {
+                                    setUserMenuAnchor(null);
+                                    i.action && i.action();
+                                } }, i.isAnchor ? (React.createElement("a", { style: {
+                                    textDecoration: 'inherit',
+                                    color: 'inherit',
+                                }, rel: "noreferrer", href: i.href }, i.label)) : (i.label)),
+                            userMenuItems.length > index + 1 && React.createElement(Divider$1, null)));
                     })))),
-            React.createElement(ToolbarMenu, null,
+            React.createElement(ToolbarMenu, { role: "nav" },
                 React.createElement(ToolbarMenuInner, null, menuItems.map(function (page) { return _renderToolbarMenuItem(page); }))),
             React.createElement(MobileAppBar, { menuItems: menuItems, userMenuItems: userMenuItems, colors: colors }))));
 };