grep-components 2.2.0 → 2.3.0-GREPF-2280.1

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

@@ -12,7 +12,7 @@ export declare const dimensions: {
     toolbarMenuWidth: number;
     toolbarMenuHeight: number;
 };
-export declare const ToolbarTitle: import("@emotion/styled").StyledComponent<import("react-router-dom").NavLinkProps<unknown> & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ToolbarTitle: import("@emotion/styled").StyledComponent<import("react-router-dom").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>, {}>;
@@ -26,5 +26,5 @@ export declare const AccountName: import("@emotion/styled").StyledComponent<MUIS
 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-dom").NavLinkProps<unknown> & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const MobileToolbarMenuItem: import("@emotion/styled").StyledComponent<import("react-router-dom").NavLinkProps<unknown> & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ToolbarMenuItem: import("@emotion/styled").StyledComponent<import("react-router-dom").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const MobileToolbarMenuItem: import("@emotion/styled").StyledComponent<import("react-router-dom").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement> & MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/dist/build/components/ToC/stories/_scaffold.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const _default: ({ children }: {
+declare const scaffold: ({ children }: {
     children: React.ReactNode;
 }) => React.JSX.Element;
-export default _default;
+export default scaffold;

package/dist/index.js

@@ -9,7 +9,7 @@ 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, TableHead as TableHead$1, TableRow as TableRow$1, ToggleButtonGroup, 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 { useHistory, NavLink, Prompt } from 'react-router-dom';
+import { useNavigate, NavLink, useBlocker, useLocation } from 'react-router-dom';
 import MenuIcon from '@mui/icons-material/Menu';
 import Box$1 from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
@@ -47,7 +47,7 @@ import Collapse$1 from '@mui/material/Collapse';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import Warning from '@mui/icons-material/Warning';
 import { compose, bindActionCreators, createStore as createStore$1, applyMiddleware } from 'redux';
-import { connect, Provider as Provider$1, useSelector } from 'react-redux';
+import { connect, Provider as Provider$1 } from 'react-redux';
 import ReactDOM from 'react-dom';
 import DragIndicator from '@mui/icons-material/DragIndicator';
 import { ContentBlock, genKey, ContentState, CharacterMetadata, CompositeDecorator, EditorState, RichUtils, getVisibleSelectionRect, Editor, getDefaultKeyBinding, Modifier } from 'draft-js';
@@ -61,7 +61,6 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import { getHash, getLocation } from 'connected-react-router';
 
 dayjs.extend(isBetweenPlugin);
 dayjs.extend(LocalizedFormatPlugin);
@@ -1628,7 +1627,7 @@ const useMobileStyles = makeStyles()(({ palette, breakpoints }) => ({
 
 const MobileAppBarNavList = ({ pages, }) => {
     const { classes } = useMobileStyles();
-    const history = useHistory();
+    const navigate = useNavigate();
     const [anchorElNav, setAnchorElNav] = React.useState(null);
     const openNav = Boolean(anchorElNav);
     const handleClickNav = (event) => {
@@ -1644,8 +1643,8 @@ const MobileAppBarNavList = ({ pages, }) => {
                 'aria-labelledby': 'basic-button',
             } }, pages.map((page) => (React.createElement(MenuItem, { key: page.id, onClick: () => {
                 handleCloseNav();
-                history.push(page?.toUrl || '');
-            }, onKeyDown: keyboard.onActivation(() => history.push(page?.toUrl || '')) }, page.label))))));
+                navigate(page?.toUrl || '');
+            }, onKeyDown: keyboard.onActivation(() => navigate(page?.toUrl || '')) }, page.label))))));
 };
 
 const AppBarNavList = ({ selectedPage, pages, onChange, }) => {
@@ -2433,7 +2432,7 @@ const useStyles$b = makeStyles()({
 const isOverflowing = (e) => e.offsetWidth < e.scrollWidth;
 const GrepCrumbs = ({ style, onClick, breadcrumbs, }) => {
     const { classes } = useStyles$b();
-    const history = useHistory();
+    const navigate = useNavigate();
     const ref = React__default.useRef(null);
     const [showTooltip, setShowTooltip] = React__default.useState(false);
     React__default.useEffect(() => {
@@ -2445,7 +2444,7 @@ const GrepCrumbs = ({ style, onClick, breadcrumbs, }) => {
             onClick(crumb);
         }
         else {
-            crumb.path && history.push(crumb.path);
+            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" },
@@ -19577,7 +19576,7 @@ const NavGuard = ({ when, title, txt, txtSave, txtCancel, txtDiscard, onSave, on
     const [open, setOpen] = React.useState(false);
     const [leave, setLeave] = React.useState(false);
     const [lastLocation, setLastLocation] = React.useState();
-    const history = useHistory();
+    const navigate = useNavigate();
     const handleCancel = () => {
         setLeave(false);
         setOpen(false);
@@ -19587,31 +19586,32 @@ const NavGuard = ({ when, title, txt, txtSave, txtCancel, txtDiscard, onSave, on
         setLeave(true);
         setOpen(false);
         onDiscard && onDiscard();
-        lastLocation &&
-            window.requestAnimationFrame(() => history.push(lastLocation));
+        lastLocation && window.requestAnimationFrame(() => navigate(lastLocation));
     };
     const handleSave = () => {
         onSave && onSave();
         setLeave(true);
         setOpen(false);
-        lastLocation &&
-            window.requestAnimationFrame(() => history.push(lastLocation));
+        lastLocation && window.requestAnimationFrame(() => navigate(lastLocation));
     };
     const handleLeave = (location) => {
         setLastLocation(location);
         setOpen(!leave);
         return !!leave;
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Prompt, { when: when, message: handleLeave }),
-        React.createElement(Dialog, { open: open, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" },
-            React.createElement(DialogTitle, { id: "alert-dialog-title" }, title),
-            React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, { id: "alert-dialog-description" }, txt)),
-            React.createElement(DialogActions, null,
-                React.createElement(Button$1, { onClick: handleCancel, autoFocus: true, color: "inherit" }, txtCancel),
-                React.createElement(Button$1, { onClick: handleDiscard, color: "error" }, txtDiscard),
-                onSave && (React.createElement(Button$1, { onClick: handleSave, color: "primary" }, txtSave))))));
+    const blocker = useBlocker(({ currentLocation, nextLocation }) => {
+        if (when && currentLocation.pathname !== nextLocation.pathname)
+            handleLeave(nextLocation);
+        return currentLocation.pathname !== nextLocation.pathname;
+    });
+    return (React.createElement(React.Fragment, null, blocker.state === 'blocked' ? (React.createElement(Dialog, { open: open, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" },
+        React.createElement(DialogTitle, { id: "alert-dialog-title" }, title),
+        React.createElement(DialogContent, null,
+            React.createElement(DialogContentText, { id: "alert-dialog-description" }, txt)),
+        React.createElement(DialogActions, null,
+            React.createElement(Button$1, { onClick: handleCancel, autoFocus: true, color: "inherit" }, txtCancel),
+            React.createElement(Button$1, { onClick: handleDiscard, color: "error" }, txtDiscard),
+            onSave && (React.createElement(Button$1, { onClick: handleSave, color: "primary" }, txtSave))))) : null));
 };
 
 const useStyles$3 = makeStyles()(({ palette }) => ({
@@ -20159,7 +20159,7 @@ const GrepTableOfContentProvider = ({ ...props }) => {
     const { container, identifier, onSelected, classes, scrollTarget, children, offsetTop = -10, identifyElementFn = identifyElement, } = props;
     const [selected, _setSelected] = useState();
     const [initialized, setInitialized] = useState();
-    const hash = useSelector((s) => decodeURI(getHash(s))).substring(1);
+    const hash = useLocation().hash;
     const scrollToElement = useCallback$1((element) => {
         const target = scrollTarget || window;
         const elementBounds = element.getBoundingClientRect();
@@ -20265,7 +20265,7 @@ const GrepTableOfContentNavTreeNode = (props) => {
     const className = clsx('grep-toc__nav-tree-node', isSelected && 'grep-toc__nav-tree-node--selected', styles.root, classes?.node, props.className);
     const [awaitingRender, setAwaitingRender] = useState(false);
     const txt = el.innerText;
-    const location = useSelector((s) => getLocation(s));
+    const location = useLocation();
     const url = `${location.pathname}${location.search}#${node.id}`;
     useEffect(() => {
         const link = linkRef.current;