grep-components 2.3.0-GREPF-2406.1 → 2.3.0-GREPF-2280.2

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/NavGuard/stories/NavGuard.stories.d.ts

@@ -1,10 +1,29 @@
-import React from 'react';
+import * as React from 'react';
+export declare const v0colors: {
+    primary: string;
+    secondary: string;
+    body: string;
+    headerBackgroundColor: string;
+    borderColor: string;
+    primaryFade: string;
+    greyText: string;
+    placeholderText: string;
+    textColor: string;
+    textColorFade: string;
+    textColorMoreFade: string;
+    white: string;
+    lightGrey: string;
+};
 declare const _default: {
     title: string;
-    render: () => React.JSX.Element;
+    excludeStories: string[];
 };
 export default _default;
 export declare const Default: {
     (): React.JSX.Element;
     storyName: string;
 };
+export declare const WithAppBar: {
+    (): React.JSX.Element;
+    storyName: string;
+};

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" },
@@ -3340,24 +3339,33 @@ const ServiceMessage = ({ id, message, isPublic, onDismiss }) => {
             React.createElement(Close, { className: classes.close })))));
 };
 
-function _setPrototypeOf(t, e) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-    return t.__proto__ = e, t;
-  }, _setPrototypeOf(t, e);
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
 }
 
-function _inheritsLoose(t, o) {
-  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
 }
 
 function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-    return n;
-  }, _extends.apply(null, arguments);
+    return target;
+  };
+  return _extends.apply(this, arguments);
 }
 
 function areInputsEqual$1(newInputs, lastInputs) {
@@ -19566,43 +19574,34 @@ const AppBar = ({ username, currentPath, isProd, appTitle, userMenuItems, menuIt
 
 const NavGuard = ({ when, title, txt, txtSave, txtCancel, txtDiscard, onSave, onCancel, onDiscard, }) => {
     const [open, setOpen] = React.useState(false);
-    const [leave, setLeave] = React.useState(false);
-    const [lastLocation, setLastLocation] = React.useState();
-    const history = useHistory();
     const handleCancel = () => {
-        setLeave(false);
         setOpen(false);
         onCancel && onCancel();
     };
     const handleDiscard = () => {
-        setLeave(true);
         setOpen(false);
         onDiscard && onDiscard();
-        lastLocation &&
-            window.requestAnimationFrame(() => history.push(lastLocation));
+        blocker.proceed ? blocker.proceed() : null;
     };
     const handleSave = () => {
         onSave && onSave();
-        setLeave(true);
         setOpen(false);
-        lastLocation &&
-            window.requestAnimationFrame(() => history.push(lastLocation));
+        blocker.proceed ? blocker.proceed() : null;
     };
-    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 }) => when && currentLocation.pathname !== nextLocation.pathname);
+    React.useEffect(() => {
+        if (blocker.state === 'blocked') {
+            setOpen(true);
+        }
+    }, [blocker]);
+    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 }) => ({
@@ -20150,7 +20149,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();
@@ -20256,7 +20255,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;