width: 0,
height: '2.7rem',
padding: 0,
- paddingRight: '-1rem',
margin: "1rem auto auto 0.5rem",
transition: `width ${WIDTH_TRANSITION}ms`,
overflow: 'hidden',
transition: {
display: "flex",
flexDirection: "row",
- width: 0,
height: '2.7rem',
padding: 0,
margin: "1rem auto auto 0.5rem",
<React.Fragment>
<Toolbar
className={isTransitioning ? classes.transition: classes.root}
- style={{ width: `${(actions.length * 2.5) + 5}rem` }}
+ style={{ width: `${(actions.length * 2.5) + 4}rem`}}
data-cy='multiselect-toolbar'
>
{actions.length ? (
toolbarWrapper: {
display: 'flex',
overflow: 'hidden',
- padding: '0 20px',
+ padding: '0 0px 0 20px',
width: '100%',
},
overflowStyle: {
order: 99,
position: 'sticky',
right: '-2rem',
+ width: 0,
},
});
const { classes, children, menuLength } = props;
const lastEntryId = (children[menuLength - 1] as any).props['data-targetid'];
const navRef = useRef<any>(null);
- const [visibilityMap, setVisibilityMap] = useState({});
+ const [visibilityMap, setVisibilityMap] = useState<Record<string, boolean>>({});
+ const [numHidden, setNumHidden] = useState(() => findNumHidden(visibilityMap));
+
+ const prevNumHidden = useRef(numHidden);
const handleIntersection = (entries) => {
- const updatedEntries = {};
+ const updatedEntries: Record<string, boolean> = {};
entries.forEach((entry) => {
- const targetid = entry.target.dataset.targetid;
+ const targetid = entry.target.dataset.targetid as string;
if (entry.isIntersecting) {
updatedEntries[targetid] = true;
} else {
});
setVisibilityMap((prev) => ({
- ...prev,
- ...updatedEntries,
- [lastEntryId]: Object.keys(updatedEntries)[0] === lastEntryId,
- })
- );
+ ...prev,
+ ...updatedEntries,
+ [lastEntryId]: Object.keys(updatedEntries)[0] === lastEntryId,
+ }));
};
+ useEffect(() => {
+ if (prevNumHidden.current === 2 && numHidden === 1) {
+ setVisibilityMap((prev) => ({
+ ...prev,
+ [lastEntryId]: true,
+ }));
+ }
+ prevNumHidden.current = numHidden;
+ }, [numHidden, lastEntryId]);
+
+ useEffect(() => {
+ setNumHidden(findNumHidden(visibilityMap));
+ }, [visibilityMap]);
+
useEffect((): any => {
- setVisibilityMap({})
+ setVisibilityMap({});
const observer = new IntersectionObserver(handleIntersection, {
root: navRef.current,
rootMargin: '0px -30px 0px 0px',
return () => {
observer.disconnect();
};
- // eslint-disable-next-line
+ // eslint-disable-next-line
}, [menuLength]);
- const numHidden = (visMap: {}) => {
+ function findNumHidden(visMap: {}) {
return Object.values(visMap).filter((x) => x === false).length;
- };
+ }
return (
<div
}),
});
})}
- {numHidden(visibilityMap) >= 2 && (
+ {numHidden >= 2 && (
<OverflowMenu
visibilityMap={visibilityMap}
className={classes.overflowStyle}