@visns-studio/visns-components 6.32.2 → 6.32.3

package/README.md

@@ -9,6 +9,40 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
+## Recent Updates (v6.32.3)
+
+### The nav dropdowns open where the pointer left them
+
+A group in the header bar — Reports, say — opened its sub-menu and then shut
+it again the instant the pointer arrived, and on a strip scrolled to its end
+the item visibly jumped left as it happened. The bar (`.navwrap`) is
+`overflow-x: auto` so it can scroll on narrow screens, and a scroll container
+clips on BOTH axes however `visible` the other one is written, so the panel
+hanging below the bar was being cut off at the bar's bottom edge. The library
+had been working around that by flipping the strip to `overflow-x: visible`
+on hover — which destroys the scroll container: the browser resets
+`scrollLeft` to 0, the item slides out from under the pointer, and the menu
+loses the hover that opened it.
+
+The panel is now `position: fixed`, placed per item from coordinates the
+component measures (`--nav-sub-top` / `--nav-sub-left`, set on the `<li>` from
+its own bounding rect and clamped into the viewport so the last group does not
+open off the right edge). A fixed panel is outside the scroller's flow, so the
+clip never applies and the strip's scroll position is never touched. Pinning
+happens on `mouseenter` and on `focus` — and since React's `onFocus` bubbles,
+tabbing to a group heading now opens and places its menu too, where keyboard
+users previously got a menu that `:focus-within` opened inside the clip and
+nothing un-clipped. Scrolling the strip re-pins whatever is open, so a wheeled
+bar keeps its menu under its item. A group that ALSO has a `url` renders its
+button (and its real `aria-expanded`) on a coarse pointer instead of a plain
+link, so a tap opens the menu rather than only navigating; on a fine pointer
+the heading stays a clickable link.
+
+One caveat comes with `position: fixed`: an ancestor carrying `transform`,
+`filter` or `contain: paint` becomes the containing block for fixed
+descendants and would trap the panel inside the bar again. Nothing in the
+shipped layouts does that.
+
 ## Recent Updates (v6.32.2)
 
 ### Boxed overview: no panel around the cards

package/package.json

@@ -93,7 +93,7 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.32.2",
+    "version": "6.32.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Navigation.jsx

@@ -767,26 +767,65 @@ function Navigation({
      * point of declaration (`const [, setActiveDropdown]`): it re-rendered the
      * whole bar on every hover to change nothing, because the only thing it
      * did was toggle the scroll container's overflow, which is a DOM poke.
-     * That poke is `liftNavClipping` now, and it is called from the tap path
-     * as well — the dropdown was clipped by the strip's `overflow-x: auto`
-     * everywhere the pointer had not been.
+     * That poke is `pinDropdown` now, and it is called from the tap path as
+     * well — the dropdown has to be placed before it is shown, wherever the
+     * pointer has or has not been.
      */
     const [openGroup, setOpenGroup] = useState(null);
     const navWrapRef = useRef(null);
 
     /**
-     * Let an open dropdown out of the horizontally-scrolling nav strip.
+     * Put an item's dropdown directly underneath the item.
      *
-     * The strip is `overflow-x: auto`, and a scroll container clips on BOTH
-     * axes however `visible` the other one is written — so a menu hanging
-     * below the bar is cut off at the bar's own bottom edge.
+     * The panel is `position: fixed` (the stylesheet carries the long note):
+     * that is what keeps it out of the strip's `overflow-x: auto` clip, since
+     * a scroll container clips on BOTH axes and the alternative — flipping
+     * the strip to `overflow-x: visible` — destroyed the scroll container,
+     * reset `scrollLeft` to 0 and slid the item out from under the pointer
+     * while the menu was opening. The price of fixed is that the panel no
+     * longer inherits the item's position, so measure the <li> and hand the
+     * two coordinates down as custom properties. The scroller is never
+     * touched.
+     *
+     * The left edge is clamped into the viewport, so the last group in the
+     * strip opens its 220px panel on screen rather than off the right edge.
      */
-    const liftNavClipping = (lift) => {
-        if (navWrapRef.current) {
-            navWrapRef.current.style.overflowX = lift ? 'visible' : 'auto';
+    const pinDropdown = (li) => {
+        if (!li) {
+            return;
         }
+
+        const rect = li.getBoundingClientRect();
+        li.style.setProperty('--nav-sub-top', `${rect.bottom}px`);
+        li.style.setProperty(
+            '--nav-sub-left',
+            `${Math.max(8, Math.min(rect.left, window.innerWidth - 220 - 8))}px`
+        );
     };
 
+    // A scrolled strip moves its items but not a fixed panel, so a menu that
+    // is already open would sail away from the group it belongs to. Re-pin
+    // whatever is open as the strip scrolls — `:hover` is the mouse, and
+    // `:focus-within` covers both the keyboard and the group a touch reader
+    // has tapped open. Passive: this only reads geometry and writes two
+    // custom properties, it never cancels the scroll.
+    useEffect(() => {
+        const strip = navWrapRef.current;
+
+        if (!strip) {
+            return undefined;
+        }
+
+        const onScroll = () => {
+            strip
+                .querySelectorAll('li:hover, li:focus-within')
+                .forEach(pinDropdown);
+        };
+
+        strip.addEventListener('scroll', onScroll, { passive: true });
+        return () => strip.removeEventListener('scroll', onScroll);
+    }, []);
+
     // A tap anywhere else closes the group a touch reader opened. Without it
     // the only way to dismiss the menu is to tap the heading again, which is
     // not how any other menu on the device behaves. Mouse users never get
@@ -799,7 +838,6 @@ function Navigation({
         const onDown = (event) => {
             if (!navWrapRef.current?.contains(event.target)) {
                 setOpenGroup(null);
-                liftNavClipping(false);
             }
         };
 
@@ -828,15 +866,14 @@ function Navigation({
 
         const hasChildren = n.children && n.children.length > 0;
 
-        const handleMouseEnter = () => {
-            if (hasChildren) {
-                liftNavClipping(true);
-            }
-        };
-
-        const handleMouseLeave = () => {
+        // Place the panel before it is shown. Hover is the mouse; focus is
+        // the keyboard, and React's onFocus bubbles, so focus landing on the
+        // group heading OR on any row inside the open menu pins it just the
+        // same. Nothing to undo on the way out: an unopened panel is
+        // `display: none` wherever its coordinates happen to say.
+        const handlePin = (event) => {
             if (hasChildren) {
-                liftNavClipping(false);
+                pinDropdown(event.currentTarget);
             }
         };
 
@@ -880,7 +917,6 @@ function Navigation({
                                         onClick={() => {
                                             setOpen(false);
                                             setOpenGroup(null);
-                                            liftNavClipping(false);
                                         }}
                                     >
                                         {child.label}
@@ -914,12 +950,23 @@ function Navigation({
         return (
             <li
                 className={navItemClasses}
-                onMouseEnter={handleMouseEnter}
-                onMouseLeave={handleMouseLeave}
+                onMouseEnter={handlePin}
+                onFocus={handlePin}
             >
-                {n.url ? (
+                {n.url && !(hasChildren && isCoarsePointer) ? (
                     // Close the mobile drawer when navigating; no-op for the
                     // header layout where the drawer state is never opened.
+                    //
+                    // A GROUP THAT ALSO HAS A URL goes the other way on a
+                    // coarse pointer. A <Link> carries no `aria-expanded`, and
+                    // the touch stylesheet opens the panel off that attribute
+                    // alone — so on a touch screen the only thing a tap on
+                    // such a heading could ever do was navigate, and the pages
+                    // inside the group were unreachable. There the button
+                    // branch below wins and the parent page is reached from
+                    // the menu instead (its first row, by convention). On a
+                    // fine pointer the link stays: hover opens the panel, so
+                    // nothing is lost by keeping the heading clickable.
                     <Link
                         to={n.url}
                         aria-label={ariaLabel}
@@ -929,8 +976,8 @@ function Navigation({
                     </Link>
                 ) : hasChildren ? (
                     /*
-                     * A group heading — no page of its own, so there is
-                     * nothing to link to, but it still has to be REACHABLE.
+                     * A group heading — usually no page of its own, so there
+                     * is nothing to link to, but it still has to be REACHABLE.
                      * As a <span> it was not focusable and the menu opened on
                      * :hover alone, which left every page inside a group
                      * unreachable by keyboard and untappable on a touch
@@ -969,14 +1016,18 @@ function Navigation({
                            what made the menu impossible to open by tapping,
                            since the tap that opened it removed the focus
                            holding it open in the same gesture. Toggle instead,
-                           and lift the strip's clipping the way a hover does,
-                           or the menu opens inside a scroll container that
-                           cuts it off at the bar's bottom edge. */
+                           and pin the panel to the item the way a hover does,
+                           since a fixed panel has no position of its own until
+                           somebody measures the item for it. */
                         onClick={(e) => {
                             if (isCoarsePointer) {
                                 const next = openGroup === n.id ? null : n.id;
                                 setOpenGroup(next);
-                                liftNavClipping(next !== null);
+
+                                if (next !== null) {
+                                    pinDropdown(e.currentTarget.closest('li'));
+                                }
+
                                 return;
                             }
 

package/src/components/styles/Navigation.module.scss

@@ -363,13 +363,29 @@
 
             > ul {
                 width: 220px;
-                position: absolute;
-                /* Anchored explicitly rather than left wherever its static
-                   position lands: the item is now a full-height flex box, so
-                   an un-anchored absolute child is at the mercy of the flex
-                   line. */
-                top: 100%;
-                left: 0;
+                /* FIXED, not absolute, and the strip above is the reason.
+                   `.navwrap` is `overflow-x: auto`, and a scroll container
+                   clips on BOTH axes however `visible` the other one is
+                   written — so an absolutely-positioned panel hanging below
+                   the bar was cut off at the bar's own bottom edge. The old
+                   way out was to flip the strip to `overflow-x: visible`
+                   while a group was hovered, which destroys the scroll
+                   container: the browser resets `scrollLeft` to 0, the item
+                   slides out from under the pointer, and the menu closes
+                   itself in the same gesture. A fixed panel is outside the
+                   scroller's flow altogether, so the clip never applies and
+                   the scroller is never touched — Navigation.jsx measures the
+                   item and hands its two coordinates down as custom
+                   properties. The fallbacks below are the old anchoring, for
+                   the frame before a measurement lands.
+
+                   ONE TRADE-OFF: an ancestor carrying `transform`, `filter`
+                   or `contain: paint` becomes the containing block for its
+                   fixed descendants, and would trap the panel inside the bar
+                   again. */
+                position: fixed;
+                top: var(--nav-sub-top, 100%);
+                left: var(--nav-sub-left, 0);
                 height: auto;
                 margin: 0;
                 /* The rows used to sit flush against the panel edge, which is
@@ -552,9 +568,15 @@
 
             > ul {
                 width: 220px;
-                position: absolute;
-                top: 100%;
-                left: 0;
+                /* Fixed for the same reason as `.nav-item` above — the strip
+                   is a scroll container and clips on both axes, and flipping
+                   its overflow to escape the clip reset `scrollLeft` out from
+                   under the pointer. Coordinates come from Navigation.jsx per
+                   item; see the long note there for the transform/filter
+                   caveat. */
+                position: fixed;
+                top: var(--nav-sub-top, 100%);
+                left: var(--nav-sub-left, 0);
                 height: auto;
                 margin: 0;
                 padding: 4px;