grep-components 2.21.1 → 2.22.0-GREPF-2893.2

package/dist/components/AppBar/MainAppStyles.d.ts

@@ -11,19 +11,19 @@ export declare const dimensions: {
     toolbarMenuWidth: number;
     toolbarMenuHeight: number;
 };
-export declare const ToolbarTitle: import("@emotion/styled").StyledComponent<import("react-router").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const EnvironmentTitle: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Toolbar: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ToolbarFixer: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ToolbarInner: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+export declare const ToolbarTitle: import("@emotion/styled").StyledComponent<import("react-router").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const EnvironmentTitle: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Toolbar: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarFixer: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarInner: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme> & {
     colors: v0colors;
 } & MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ToolbarLeft: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ToolbarRight: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const UserContainer: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AccountName: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const ToolbarMenu: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const MobileToolbarMenu: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ToolbarMenuInner: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ToolbarMenuItem: import("@emotion/styled").StyledComponent<import("react-router").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const MobileToolbarMenuItem: import("@emotion/styled").StyledComponent<import("react-router").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ToolbarLeft: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarRight: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UserContainer: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AccountName: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ToolbarMenu: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MobileToolbarMenu: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarMenuInner: import("@emotion/styled").StyledComponent<MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ToolbarMenuItem: import("@emotion/styled").StyledComponent<import("react-router").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const MobileToolbarMenuItem: import("@emotion/styled").StyledComponent<import("react-router").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/components/DropdownMenu/stories/DropDownMenu.stories.d.ts

@@ -12,6 +12,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Standard: {
-    render: () => React.JSX.Element;
+    decorators: (() => React.JSX.Element)[];
     name: string;
 };

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

@@ -3,10 +3,11 @@ import { DatePickerProps } from '@mui/x-date-pickers';
 import { TextFieldProps } from '@mui/material';
 import '../../utils/dateHelper';
 import { ParseableDate } from '../../utils/dateHelper';
-type InputProps = Pick<TextFieldProps, 'id' | 'variant' | 'label' | 'fullWidth' | 'placeholder' | 'helperText' | 'required' | 'onFocus' | 'margin' | 'sx'>;
+type InputProps = Pick<TextFieldProps, 'id' | 'variant' | 'label' | 'fullWidth' | 'helperText' | 'required' | 'margin' | 'sx'>;
 export interface GrepDatePickerProps extends Omit<DatePickerProps, 'value' | 'renderInput'>, InputProps {
     value?: ParseableDate | null;
     errorMessage?: string;
+    clearable?: boolean;
 }
-export declare const DatePicker: React.FunctionComponent<GrepDatePickerProps>;
-export default DatePicker;
+export declare const GrepDatePicker: React.FunctionComponent<GrepDatePickerProps>;
+export default GrepDatePicker;

package/dist/components/GrepDatePicker/stories/DatePicker.stories.d.ts

@@ -1,9 +1,14 @@
 import * as React from 'react';
-declare const _default: {
+import { GrepDatePickerProps } from '..';
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: (args: Omit<GrepDatePickerProps, "value" | "onChange">) => React.JSX.Element;
     title: string;
+    render: ({ ...args }: Omit<GrepDatePickerProps, "value" | "onChange">) => React.JSX.Element;
     decorators: ((storyFn: () => React.ReactNode) => React.JSX.Element)[];
 };
-export default _default;
-export declare const Standard: () => React.JSX.Element;
-export declare const Test: () => React.JSX.Element;
-export declare const Outlined: () => React.JSX.Element;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithError: Story;
+export declare const WithHelperText: Story;
+export declare const WithMoreControls: Story;

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

@@ -4,7 +4,7 @@ import { GrepDatePickerProps } from '../GrepDatePicker';
 import { Dayjs } from 'dayjs';
 import { GridSpacing } from '@mui/material/Grid';
 type CommonProperties = Pick<GrepDatePickerProps, 'variant' | 'margin' | 'sx'>;
-interface Props extends CommonProperties {
+export interface GrepDateRangeProps extends CommonProperties {
     from: Omit<GrepDatePickerProps, 'onChange'>;
     to: Omit<GrepDatePickerProps, 'onChange'>;
     onChange: (date: DateRangeValue) => void;
@@ -16,5 +16,5 @@ interface Props extends CommonProperties {
     minDate?: Dayjs;
     maxDate?: Dayjs;
 }
-export declare const GrepDateRange: React.FunctionComponent<Props>;
+export declare const GrepDateRange: React.FunctionComponent<GrepDateRangeProps>;
 export default GrepDateRange;

package/dist/components/GrepDateRange/stories/GrepDateRange.stories.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import 'dayjs/locale/nb';
-declare const _default: {
+import { GrepDateRangeProps } from '..';
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    component: (args: Omit<GrepDateRangeProps, "from" | "to" | "onChange">) => React.JSX.Element;
     title: string;
-    decorators: ((storyFn: () => React.ReactNode) => React.JSX.Element)[];
 };
-export default _default;
-export declare const Standard: () => React.JSX.Element;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Standard: Story;

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

@@ -1,47 +1,23 @@
 import * as React from 'react';
-declare const _default: {
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
     title: string;
+    component: React.FunctionComponent<import("../entities").Properties>;
+    args: {
+        onContentChange: (editorState: import("lexical").EditorState, editor: import("lexical").LexicalEditor) => void;
+    };
     decorators: ((storyFn: () => React.ReactNode) => React.JSX.Element)[];
 };
-export default _default;
-export declare const Standard: () => React.JSX.Element;
-export declare const CustomStyles: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const CustomToolbar: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const CustomButtons: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const PasteStrippingAndBlockedInlineStyles: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const WithCharacterCount: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const DisableAndStripNewlines: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const DisablePasting: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const WithLabel: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const OnlyHeading: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const ReadOnly: {
-    render: () => React.JSX.Element;
-    name: string;
-};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Standard: Story;
+export declare const CustomStyles: Story;
+export declare const CustomToolbar: Story;
+export declare const CustomButtons: Story;
+export declare const PasteStrippingAndBlockedInlineStyles: Story;
+export declare const WithCharacterCount: Story;
+export declare const DisableAndStripNewlines: Story;
+export declare const DisablePasting: Story;
+export declare const WithLabel: Story;
+export declare const OnlyHeading: Story;
+export declare const ReadOnly: Story;

package/dist/components/LoadingOverlay/stories/LoadingOverlay.stories.d.ts

@@ -1,12 +1,18 @@
 import React from 'react';
-declare const _default: {
+import { LoadingOverlayProps } from '..';
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
     title: string;
+    args: {
+        zIndex: number;
+    };
+    render: ({ ...args }: Omit<LoadingOverlayProps, "show">) => React.JSX.Element;
 };
-export default _default;
-export declare const Standard: {
-    render: () => React.JSX.Element;
-    name: string;
-};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Standard: Story;
 export declare const CustomOverlay: {
-    render: () => React.JSX.Element;
+    args: {
+        overlay: string;
+    };
 };

package/dist/components/NavGuard/stories/NavGuard.stories.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { NavGuardProperties } from '..';
+import { StoryObj } from '@storybook/react-vite';
 export declare const v0colors: {
     primary: string;
     secondary: string;
@@ -14,20 +16,24 @@ export declare const v0colors: {
     white: string;
     lightGrey: string;
 };
-declare const _default: {
+type testType = 'button' | 'appBar';
+declare const meta: {
+    args: {
+        when: true;
+        txt: string;
+        txtDiscard: string;
+        txtCancel: string;
+        txtSave: string;
+        testType: "button";
+    };
+    render: ({ ...args }: Omit<NavGuardProperties, "title" | "onSave" | "onCancel" | "onDiscard"> & {
+        testType: testType;
+    }) => React.JSX.Element;
     title: string;
     excludeStories: string[];
 };
-export default _default;
-export declare const Default: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const WithAppBar: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const WithExclude: {
-    render: () => React.JSX.Element;
-    name: string;
-};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithAppBar: Story;
+export declare const WithExclude: Story;

package/dist/components/Sidebar/stories/Sidebar.stories.d.ts

@@ -1,16 +1,18 @@
 import React from 'react';
+import { SidebarProps } from '..';
 import { NavigationProps } from '../../AppBarNavList';
+import type { StoryObj } from '@storybook/react-vite';
 export declare const adminPages: NavigationProps[];
-declare const _default: {
+declare const meta: {
+    component: (args: Omit<SidebarProps, "currentPageId" | "onPageClick">) => React.JSX.Element;
     title: string;
     excludeStories: string[];
+    args: {
+        pages: NavigationProps[];
+    };
+    render: ({ ...args }: Omit<SidebarProps, "onPageClick" | "currentPageId">) => React.JSX.Element;
 };
-export default _default;
-export declare const Standard: {
-    render: () => React.JSX.Element;
-    name: string;
-};
-export declare const ExpandAndClick: {
-    render: () => React.JSX.Element;
-    name: string;
-};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Standard: Story;
+export declare const ExpandAndClick: Story;

package/dist/components/SortableTable/stories/SortableTable.stories.d.ts

@@ -4,6 +4,6 @@ declare const _default: {
 };
 export default _default;
 export declare const SortableTableStory: {
-    render: () => React.JSX.Element;
+    decorators: (() => React.JSX.Element)[];
     name: string;
 };

package/dist/components/index.d.ts

@@ -52,7 +52,6 @@ export { default as InfoContainer } from './InfoContainer';
 export { default as OverflowTooltip } from './OverflowTooltip';
 export { default as Sidebar } from './Sidebar';
 export { default as NavGuard } from './NavGuard';
-export { default as DatePicker } from './GrepDatePicker';
 export { default as GrepDatePicker } from './GrepDatePicker';
 export { default as GrepDateRange } from './GrepDateRange';
 export { default as ServiceMessage } from './ServiceMessage';

package/dist/index.js

@@ -7,8 +7,8 @@ import React__default, { useRef, useMemo, createContext, useContext, forwardRef,
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import ArrowDropdown from '@mui/icons-material/ArrowDropDown';
 import { Button, Box, Typography, Tabs, Tab, Collapse, MenuList, Tooltip, MenuItem as MenuItem$1, Menu as Menu$1, Container, List, ListItem, ListItemText, ListItemButton, CircularProgress, TextField, FormControl, InputLabel, Select, OutlinedInput, Input, Checkbox, FormHelperText, IconButton as IconButton$1, ToggleButtonGroup, ToggleButton, AppBar as AppBar$1, Toolbar as Toolbar$1, Divider as Divider$1, Dialog as Dialog$1, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogContentText as DialogContentText$1, DialogActions as DialogActions$1 } from '@mui/material';
-import { useTheme, styled } from '@mui/material/styles';
 import { __unsafe_useEmotionCache } from '@emotion/react';
+import { useTheme, styled } from '@mui/material/styles';
 import { useNavigate, NavLink, useBlocker, useLocation } from 'react-router';
 import MenuIcon from '@mui/icons-material/Menu';
 import Box$1 from '@mui/material/Box';
@@ -40,7 +40,8 @@ import Search from '@mui/icons-material/Search';
 import CircularProgress$1 from '@mui/material/CircularProgress';
 import Info from '@mui/icons-material/Info';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider, DesktopDatePicker } from '@mui/x-date-pickers';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import Grid from '@mui/material/Grid';
 import ListItem$1 from '@mui/material/ListItem';
 import Collapse$1 from '@mui/material/Collapse';
@@ -1462,15 +1463,11 @@ const { tss } = createTss({
 });
 tss.create({});
 
-const { makeStyles, withStyles } = createMakeAndWithStyles({
-    useTheme,
-    /*
-      OR, if you have extended the default mui theme adding your own custom properties:
-      Let's assume the myTheme object that you provide to the <ThemeProvider /> is of
-      type MyTheme then you'll write:
-      */
-    //"useTheme": useTheme as (()=> MyTheme)
+const tssStyles = createMakeAndWithStyles({
+    useTheme: useTheme,
 });
+const makeStyles = tssStyles.makeStyles;
+const withStyles = tssStyles.withStyles;
 
 const useStyles$h = makeStyles()(({ palette }) => ({
     user: {
@@ -1568,9 +1565,7 @@ const MobileAppBarNavList = ({ pages, }) => {
     return (React.createElement(Box$1, { style: { flexGrow: 1 }, className: classes.mobileNavList },
         React.createElement(IconButton, { size: "medium", edge: "start", color: "inherit", "aria-label": "menu", style: { marginRight: 2 }, onClick: handleClickNav },
             React.createElement(MenuIcon, { fontSize: "large" })),
-        React.createElement(Menu, { id: "basic-menu", anchorEl: anchorElNav, open: openNav, onClose: handleCloseNav, MenuListProps: {
-                'aria-labelledby': 'basic-button',
-            } }, pages.map((page) => (React.createElement(MenuItem, { key: page.id, onClick: () => {
+        React.createElement(Menu, { id: "basic-menu", anchorEl: anchorElNav, open: openNav, onClose: handleCloseNav }, pages.map((page) => (React.createElement(MenuItem, { key: page.id, onClick: () => {
                 handleCloseNav();
                 navigate(page?.toUrl || '');
             }, onKeyDown: keyboard.onActivation(() => navigate(page?.toUrl || '')) }, page.label))))));
@@ -1584,13 +1579,20 @@ const AppBarNavList = ({ selectedPage, pages, onChange, }) => {
         onChange(newValue);
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { classes: { root: classes.tabs, indicator: classes.indicator }, value: value, onChange: handleChange, TabIndicatorProps: { children: React.createElement("div", null) } }, pages.map((page) => (React.createElement(Tab, { disableTouchRipple: true, className: classes.tab, key: page.id, label: page.label })))),
+        React.createElement(Tabs, { classes: { root: classes.tabs, indicator: classes.indicator }, value: value, onChange: handleChange, slotProps: { indicator: { children: React.createElement("div", null) } } }, pages.map((page) => (React.createElement(Tab, { disableTouchRipple: true, className: classes.tab, key: page.id, label: page.label })))),
         React.createElement(MobileAppBarNavList, { pages: pages })));
 };
 
-const BodyLayout = (props) => (React.createElement(Box, { width: "100%", paddingTop: "20px", display: "flex", flexDirection: "row", marginBottom: "20px", justifyContent: "space-between" }, props.children));
+const BodyLayout = (props) => (React.createElement(Box, { sx: {
+        width: '100%',
+        paddingTop: '20px',
+        display: 'flex',
+        flexDirection: 'row',
+        marginBottom: '20px',
+        justifyContent: 'space-between',
+    } }, props.children));
 
-const MainLayout = (props) => (React.createElement(Box, { display: "flex", flex: "1", flexDirection: "column" }, props.children));
+const MainLayout = (props) => (React.createElement(Box, { sx: { display: 'flex', flex: '1', flexDirection: 'column' } }, props.children));
 
 const CollapsableMenu = ({ children, onMenuClose, ...collapseProps }) => {
     const onKeyDown = (e) => {
@@ -1702,15 +1704,21 @@ const CollapsableMenuItem = ({ items, onClick, children, onClose: _onclose, tool
         return () => document.removeEventListener('click', onScrimClick);
     }, [listItemRef, onScrimClick]);
     const { classes } = useStyles$f({ open });
-    const renderInner = () => (React__default.createElement(Box, { display: "flex", flexDirection: "column", width: "100%" },
-        React__default.createElement(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", minHeight: 48 },
+    const renderInner = () => (React__default.createElement(Box, { sx: { display: 'flex', flexDirection: 'column', width: '100%' } },
+        React__default.createElement(Box, { sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                minHeight: 48,
+            } },
             children,
             items && React__default.createElement(ExpandMore, { className: classes.expander })),
         items && (React__default.createElement(CollapsableMenu, { className: classes.subMenu, in: open, onMenuClose: collapse, onEntered: () => requestAnimationFrame(() => window.dispatchEvent(new Event('resize'))), ...props }, items))));
     return tooltipText ? (React__default.createElement(Tooltip, { title: tooltipText, placement: tooltipPlacement, describeChild: true, arrow: true, open: openTooltip },
         React__default.createElement(MenuItem$1, { role: "menuitem", sx: disabled && !items
                 ? { cursor: 'not-allowed', pointerEvents: 'inherit !important' }
-                : { pointerEvents: 'inherit !important' }, className: classes.root, onFocusVisible: handleOpenTooltip, onMouseOver: (e) => (e.currentTarget.focus(), handleOpenTooltip()), onMouseLeave: handleCloseTooltip, selected: open, ref: listItemRef, onClick: handleClick, onKeyDown: (e) => (handleKey(e), handleCloseTooltip()), ...props }, renderInner()))) : (React__default.createElement(MenuItem$1, { sx: disabled && !items ? { cursor: 'not-allowed' } : {}, className: classes.root, onMouseOver: (e) => e.currentTarget.focus(), ref: listItemRef, selected: open, onClick: handleClick, onKeyDown: handleKey, ...props }, renderInner()));
+                : { pointerEvents: 'inherit !important' }, className: classes.root, onFocusVisible: handleOpenTooltip, onMouseOver: (e) => (e.currentTarget.focus(),
+                handleOpenTooltip()), onMouseLeave: handleCloseTooltip, selected: open, ref: listItemRef, onClick: handleClick, onKeyDown: (e) => (handleKey(e), handleCloseTooltip()), ...props }, renderInner()))) : (React__default.createElement(MenuItem$1, { sx: disabled && !items ? { cursor: 'not-allowed' } : {}, className: classes.root, onMouseOver: (e) => e.currentTarget.focus(), ref: listItemRef, selected: open, onClick: handleClick, onKeyDown: handleKey, ...props }, renderInner()));
 };
 
 const useStyles$e = makeStyles()(({ palette }) => ({
@@ -1889,7 +1897,7 @@ const Footer = ({ items, serviceNameText, udirLink, udirLogo, }) => {
                     : renderItem(item)))))))));
 };
 
-const LinkList = (props) => (React__default.createElement(Box$1, { width: "100%", flexDirection: "column" },
+const LinkList = (props) => (React__default.createElement(Box$1, { sx: { width: '100%', flexDirection: 'column' } },
     React__default.createElement(Typography$1, { style: { fontSize: 24, color: Colors.black, marginBottom: 20 } }, props.title),
     React__default.createElement(List$1, null, props.pages.map((page) => (React__default.createElement(Box$1, { key: page.id },
         React__default.createElement(ListItemButton, { onMouseDown: (e) => {
@@ -2181,7 +2189,7 @@ const GrepTable = ({ placeholderText, dropdownItems, isRowDisabled, pagination,
             }
         }
     }, [tableRef, selectedRowIndex]);
-    React__default.useMemo(() => {
+    React__default.useEffect(() => {
         setCurrentPage(0);
     }, [data.length, setCurrentPage]);
     const _openDropdown = (e, row) => {
@@ -2343,19 +2351,35 @@ const GrepTableCard = (props) => {
         React.createElement(GrepTable, { ...props, header: true })));
 };
 
-const LoadingOverlay = ({ overlay = 'rgba(255,255,255, .5)', show, children, minTime, zIndex, sx, ...box }) => {
+const LoadingOverlay = ({ overlay = 'rgba(255,255,255, .5)', show, children, minTime, zIndex, minHeight, sx, ...box }) => {
     const [enabled, setEnabled] = useState(show);
     useEffect(() => {
         const timeout = setTimeout(() => setEnabled(show), show ? 0 : minTime);
         return () => clearTimeout(timeout);
     }, [show, minTime, setEnabled]);
-    return (React__default.createElement(Box, { position: "relative", display: "block", overflow: show ? 'hidden' : '' },
+    return (React__default.createElement(Box, { sx: {
+            position: 'relative',
+            display: 'block',
+            overflow: show ? 'hidden' : '',
+        } },
         children,
-        React__default.createElement(Box, { position: "absolute", display: "flex", alignItems: "center", justifyContent: "center", top: 0, left: 0, height: "100%", width: "100%", zIndex: enabled ? (zIndex ? zIndex : 999) : -999, style: {
+        React__default.createElement(Box, { sx: {
+                position: 'absolute',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                top: 0,
+                left: 0,
+                height: '100%',
+                width: '100%',
+                zIndex: enabled ? (zIndex ? zIndex : 999) : -999,
+                minHeight: minHeight,
+                ...sx,
+            }, style: {
                 backgroundColor: overlay,
                 opacity: show ? 1 : 0,
                 transition: `opacity ${show ? 0 : minTime}ms ease`,
-            }, sx: sx, ...box },
+            }, ...box },
             React__default.createElement(CircularProgress, { "aria-label": "Laster inn" }))));
 };
 
@@ -2405,9 +2429,9 @@ const GrepCrumbs = ({ style, onClick, breadcrumbs, }) => {
             crumb.path && navigate(crumb.path);
         }
     };
-    return (React__default.createElement("div", { className: classes.container, style: style }, breadcrumbs.map((crumb, index) => crumb.path ? (React__default.createElement(Box$1, { key: index, display: "flex" },
+    return (React__default.createElement("div", { className: classes.container, style: style }, breadcrumbs.map((crumb, index) => crumb.path ? (React__default.createElement(Box$1, { key: crumb.label, sx: { display: 'flex' } },
         React__default.createElement(Link, { className: classes.link, tabIndex: 0, component: "button", onClick: () => handleClick(crumb) }, crumb.label),
-        index !== breadcrumbs.length - 1 && (React__default.createElement(Box$1, { margin: "auto 8px", height: "fit-content" /*lineHeight="20px"*/ }, ">")))) : (React__default.createElement(Tooltip$1, { key: index, title: showTooltip ? crumb.label : '' },
+        index !== breadcrumbs.length - 1 && (React__default.createElement(Box$1, { sx: { margin: 'auto 8px', height: 'fit-content' } }, ">")))) : (React__default.createElement(Tooltip$1, { key: crumb.label, title: showTooltip ? crumb.label : '' },
         React__default.createElement("div", { className: classes.current, ref: ref }, crumb.label))))));
 };
 
@@ -2487,7 +2511,13 @@ const GreyCover = ({ elevation, children }) => {
     return React.createElement(Box, { className: classes.cover }, children);
 };
 
-const CircularLoading = ({ height, ...props }) => (React.createElement(Box, { height: height, width: "100%", display: "flex", alignItems: "center", justifyContent: "center" },
+const CircularLoading = ({ height, ...props }) => (React.createElement(Box, { sx: {
+        height: { height },
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    } },
     React.createElement(CircularProgress$1, { ...props })));
 
 const useStyles$7 = makeStyles()((theme) => ({
@@ -2622,6 +2652,7 @@ const useDate = (value = null, options) => {
         const nextDate = getDate(next);
         hasDateChanged(date, nextDate) && _setDate(nextDate);
     };
+    // eslint-disable-next-line @eslint-react/use-memo
     useMemo(() => setDate(value ? parseDate(value, { utc }) : null), [value, utc]);
     return [date, setDate];
 };
@@ -3092,12 +3123,12 @@ const useContentElements = (container, selector, options) => {
     return elements;
 };
 
-const DatePicker = ({ id, label, value, variant, errorMessage, placeholder, fullWidth, required, onFocus, margin, sx, ...props }) => {
+const GrepDatePicker = ({ id, label, value, variant, errorMessage, fullWidth, required, margin, clearable, sx, ...props }) => {
     const [date, setDate] = useDate(value);
     const [error, setError] = useState();
     const helperText = errorMessage || error || props.helperText;
     return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: 'nb' },
-        React__default.createElement(DesktopDatePicker
+        React__default.createElement(DatePicker
         // clearable @todo
         , { 
             // clearable @todo
@@ -3120,14 +3151,13 @@ const DatePicker = ({ id, label, value, variant, errorMessage, placeholder, full
                         setError(undefined);
                 }
             }, value: date, onChange: setDate, slotProps: {
+                field: { clearable: clearable },
                 textField: {
                     id: id,
                     label: label,
                     variant: variant,
-                    onFocus: onFocus,
                     required: required,
                     fullWidth: fullWidth,
-                    placeholder: placeholder,
                     sx: sx,
                     margin: margin,
                     error: !!error || !!errorMessage,
@@ -3140,20 +3170,20 @@ const GrepDateRange = ({ onChange, spacing = 3, style, fullWidth, from: fromProp
     const [from, setFrom] = useDate(fromProperties.value);
     const [to, setTo] = useDate(toProperties.value);
     const { minDate, maxDate, ...commonProperties } = properties;
-    useEffect(() => onChange(new DateRangeValue(from, to)), [String(from), String(to)]);
+    useCallback(() => onChange(new DateRangeValue(from ? String(from) : from, to ? String(to) : to)), [from, to, onChange]);
     return (React__default.createElement(Grid, { container: true, spacing: spacing, style: style },
         React__default.createElement(Grid, { size: { xs: 12, sm: fullWidth ? 12 : 6 } },
-            React__default.createElement(DatePicker, { id: String(fromProperties.label), fullWidth: true, minDate: minDate, ...commonProperties, ...fromProperties, value: from, maxDate: to?.subtract(1, 'day') || undefined, onChange: setFrom })),
+            React__default.createElement(GrepDatePicker, { id: String(fromProperties.label), fullWidth: true, minDate: minDate, ...commonProperties, ...fromProperties, value: from, maxDate: to?.subtract(1, 'day') || undefined, onChange: setFrom })),
         React__default.createElement(Grid, { size: { xs: 12, sm: fullWidth ? 12 : 6 } },
-            React__default.createElement(DatePicker, { id: String(toProperties.label), fullWidth: true, maxDate: maxDate, ...commonProperties, ...toProperties, value: to, minDate: from?.add(1, 'day') || undefined, onChange: setTo }))));
+            React__default.createElement(GrepDatePicker, { id: String(toProperties.label), fullWidth: true, maxDate: maxDate, ...commonProperties, ...toProperties, value: to, minDate: from?.add(1, 'day') || undefined, onChange: setTo }))));
 };
 
-const renderField = ({ key, value }) => (React.createElement(Box$1, { key: key, display: "flex", marginRight: "20px" },
+const renderField = ({ key, value }) => (React.createElement(Box$1, { key: key, sx: { display: 'flex', marginRight: '20px' } },
     React.createElement(Typography$1, { variant: "body1", style: { color: Colors.grey, marginRight: '2rem' } },
         key,
         ":"),
     React.createElement(Typography$1, { variant: "body1" }, value)));
-const renderHorizontal = (infoFields) => (React.createElement(Box$1, { display: "flex", flexWrap: "wrap", justifyContent: "space-between" }, infoFields.map(renderField)));
+const renderHorizontal = (infoFields) => (React.createElement(Box$1, { sx: { display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' } }, infoFields.map(renderField)));
 const renderVertical = (infoFields) => infoFields.map(renderField);
 const InfoContainer = (props) => (React.createElement(Box$1, { style: { paddingTop: 20, ...props.style } },
     props.header && (React.createElement(Typography$1, { variant: "h6", style: { paddingBottom: 10 } }, props.header)),
@@ -8394,7 +8424,7 @@ const SortableTable = ({ data, onChange, ...props }) => {
                         return (React__default.createElement(TableCell, { key: `header-${index}` }, label.toString().charAt(0).toUpperCase() +
                             label.toString().slice(1)));
                     })))),
-            React__default.createElement(SortableContext, { items: stateItems, strategy: verticalListSortingStrategy },
+            React__default.createElement(SortableContext, { items: stateItems, strategy: verticalListSortingStrategy, disabled: props.disabled },
                 React__default.createElement(TableBody, null, stateItems.map((item) => (React__default.createElement(SortableTableRow2, { key: item.id, id: item.id, item: item, columns: props.columns })))))),
         React__default.createElement(DragOverlay, null, activeId !== '' ? (React__default.createElement(Table, { size: size, className: classes.dragOverlayRow, sx: { cursor: cursor } },
             React__default.createElement(TableBody, null,
@@ -8609,7 +8639,7 @@ function StyleWrapperPlugin({ showCharcount, helperText, readOnly, classes, labe
         React__default.createElement("legend", { className: clsx(styles.legend, classes?.legend) }),
         label && (React__default.createElement("label", { className: clsx(styles.label, classes?.label) }, label)),
         React__default.createElement(Box, { className: clsx(styles.editor, classes?.editor) }, children),
-        (showCharcount || helperText) && (React__default.createElement(Box, { margin: ".5rem" },
+        (showCharcount || helperText) && (React__default.createElement(Box, { sx: { margin: '.5rem' } },
             showCharcount && (React__default.createElement(FormHelperText, { className: styles.charcount }, `Antall tegn: ${charCount}`)),
             helperText && (React__default.createElement(FormHelperText, { className: styles.helpertext }, helperText))))));
 }
@@ -9206,9 +9236,7 @@ function Editor({ html, label, classes, autoFocus, helperText, showCharCount, al
             setFloatingAnchorElem(_floatingAnchorElem);
         }
     };
-    if (!editorRef) {
-        editorRef = useRef(null);
-    }
+    editorRef = useRef(null);
     const canStyle = allowedStyles === undefined || allowedStyles.length > 0;
     const buttons = !allowedStyles
         ? createDefaultButtons()
@@ -9481,17 +9509,13 @@ const MobileAppBar = ({ userMenuItems, menuItems, }) => {
             React.createElement(Toolbar$1, { style: { minHeight: '50px' } },
                 React.createElement(IconButton$1, { size: "medium", edge: "start", color: "inherit", "aria-label": "menu", style: { marginRight: 2 }, onClick: handleClickNav },
                     React.createElement(MenuIcon, { sx: { color: 'white' } })),
-                React.createElement(Menu$1, { id: "basic-menu", anchorEl: anchorElNav, open: openNav, onClose: handleCloseNav, MenuListProps: {
-                        'aria-labelledby': 'basic-button',
-                    } }, menuItems.map((page) => (React.createElement(MobileToolbarMenuItem, { key: page.name, to: page.redirectUrl || '' },
+                React.createElement(Menu$1, { id: "basic-menu", anchorEl: anchorElNav, open: openNav, onClose: handleCloseNav }, menuItems.map((page) => (React.createElement(MobileToolbarMenuItem, { key: page.name, to: page.redirectUrl || '' },
                     React.createElement(MenuItem$1, { sx: {
                             width: '100%',
                         }, key: page.name }, page.translatedTextRef))))),
                 React.createElement(IconButton$1, { size: "medium", edge: "end", color: "inherit", "aria-label": "menu", style: { marginLeft: 'auto' }, onClick: handleClickMenu },
                     React.createElement(MoreVert, { sx: { color: 'white' } })),
-                React.createElement(Menu$1, { id: "basic-menu", anchorEl: anchorElMenu, open: openMenu, onClose: handleCloseMenu, MenuListProps: {
-                        'aria-labelledby': 'basic-button',
-                    } }, userMenuItems.map((i, index) => (React.createElement(Box, { key: i.id },
+                React.createElement(Menu$1, { id: "basic-menu", anchorEl: anchorElMenu, open: openMenu, onClose: handleCloseMenu }, userMenuItems.map((i, index) => (React.createElement(Box, { key: i.id },
                     React.createElement(MenuItem$1, { key: i.id, onClick: () => {
                             handleCloseMenu();
                             i.action && i.action();
@@ -10392,5 +10416,5 @@ const GrepTableOfContent = ({ style, className, setSelectedValue, percentageRend
 };
 GrepTableOfContent.displayName = 'Grep.ToC';
 
-export { AppBar, AppBarNavList, AppBarProfile, BodyLayout, CircularLoading, Colors, ConfirmationServiceProvider, ContainedLinkList, DatePicker, DropdownMenu, Footer, GDPR, GrepCrumbs, DatePicker as GrepDatePicker, GrepDateRange, GrepDialogServiceProvider, GrepEditor, GrepInput, GrepSelect, GrepTable, GrepTableCard, GrepTableOfContent, GrepTableRow, GreyCover, InfoContainer, LinkList, LoadingOverlay, MainLayout, NavGuard, OverflowTooltip, ProfileInfo, SearchBar, ServiceMessage, Sidebar, SortableTable, index as Utils, convertToRgba, filterElements as filterContentElements, hex2rgb, hex2rgba, makeStyles, useConfirmation, useContentElements, useDate, useDebounce, useGrepDialog, useStyles$c as useStyles, withStyles };
+export { AppBar, AppBarNavList, AppBarProfile, BodyLayout, CircularLoading, Colors, ConfirmationServiceProvider, ContainedLinkList, DropdownMenu, Footer, GDPR, GrepCrumbs, GrepDatePicker, GrepDateRange, GrepDialogServiceProvider, GrepEditor, GrepInput, GrepSelect, GrepTable, GrepTableCard, GrepTableOfContent, GrepTableRow, GreyCover, InfoContainer, LinkList, LoadingOverlay, MainLayout, NavGuard, OverflowTooltip, ProfileInfo, SearchBar, ServiceMessage, Sidebar, SortableTable, index as Utils, convertToRgba, filterElements as filterContentElements, hex2rgb, hex2rgba, makeStyles, useConfirmation, useContentElements, useDate, useDebounce, useGrepDialog, useStyles$c as useStyles, withStyles };
 //# sourceMappingURL=index.js.map