graphen 2.0.8 → 2.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphen",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "description": "Graphen is a small library, that keeps reusable blocks of UI and helps making application design consistent across multiple projects.",
   "main": "src/index.ts",
   "files": [

package/src/components/Dropdown/integration/dropdown.spec.js

@@ -1,6 +1,6 @@
 describe("dropdown menu", () => {
   it("should open dropdown and pick a value", () => {
-    cy.visit("http://localhost:3000");
+    cy.visit("/");
 
     cy.get("#dropdown").scrollIntoView();
 

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

@@ -1,6 +1,6 @@
 .gc-submenu {
   display: none;
-  position: absolute;
+  position: fixed;
   background-color: transparent;
   z-index: $zlayer-top;
 

package/src/components/NavigationOption/index.tsx

@@ -1,6 +1,8 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
 import classNames from "classnames";
 
+const SUBMENU_VIEWPORT_MARGIN = 10;
+
 type Props = {
   className?: string;
   label: React.ReactNode;
@@ -17,11 +19,52 @@ function NavigationOption({
   children = null,
 }: Props) {
   const [isOpened, setIsOpened] = useState(false);
+  const [submenuPosition, setSubmenuPosition] = useState({ top: 0, left: 0 });
+  const triggerReference = useRef<HTMLButtonElement>(null);
+  const submenuReference = useRef<HTMLDivElement>(null);
 
   const toggleSubmenu = useCallback(() => {
     setIsOpened((previousIsOpened) => !previousIsOpened);
   }, [setIsOpened]);
 
+  const updateSubmenuPosition = useCallback(() => {
+    const trigger = triggerReference.current;
+    const submenu = submenuReference.current;
+
+    if (!trigger || !submenu) {
+      return;
+    }
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const maximumLeft =
+      window.innerWidth - submenu.offsetWidth - SUBMENU_VIEWPORT_MARGIN;
+
+    setSubmenuPosition({
+      top: triggerRect.bottom,
+      left: Math.max(
+        SUBMENU_VIEWPORT_MARGIN,
+        Math.min(triggerRect.left, maximumLeft)
+      ),
+    });
+  }, [setSubmenuPosition]);
+
+  useLayoutEffect(() => {
+    if (!isOpened) {
+      return undefined;
+    }
+
+    updateSubmenuPosition();
+
+    // capture phase catches scrolling inside consumer overflow containers
+    window.addEventListener("scroll", updateSubmenuPosition, true);
+    window.addEventListener("resize", updateSubmenuPosition);
+
+    return () => {
+      window.removeEventListener("scroll", updateSubmenuPosition, true);
+      window.removeEventListener("resize", updateSubmenuPosition);
+    };
+  }, [isOpened, updateSubmenuPosition]);
+
   const closeSubmenuOnBlur = useCallback(
     (event: React.FocusEvent<HTMLLIElement>) => {
       if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
@@ -65,6 +108,7 @@ function NavigationOption({
       onKeyDown={closeSubmenuOnEscape}
     >
       <button
+        ref={triggerReference}
         type="button"
         className="gc-navigation__link"
         aria-haspopup="true"
@@ -73,7 +117,11 @@ function NavigationOption({
       >
         {label}
       </button>
-      <div className={submenuClasses}>
+      <div
+        ref={submenuReference}
+        className={submenuClasses}
+        style={{ top: submenuPosition.top, left: submenuPosition.left }}
+      >
         <div className="gc-submenu__content">{children}</div>
       </div>
     </li>

package/src/components/NavigationOption/integration/navigation-option.spec.js

@@ -0,0 +1,30 @@
+describe("navigation submenu", () => {
+  it("should anchor submenu to its parent option in a scrolled navigation", () => {
+    cy.visit("/");
+
+    cy.get("#navigation").scrollIntoView();
+
+    cy.get("#navigation .gc-navigation")
+      .eq(1)
+      .parent()
+      .scrollTo("right")
+      .within(() => {
+        cy.contains("button.gc-navigation__link", "Platform").click();
+      });
+
+    cy.window().then((win) => {
+      cy.contains("button.gc-navigation__link", "Platform").then(($trigger) => {
+        const triggerRect = $trigger[0].getBoundingClientRect();
+
+        cy.get(".gc-submenu--opened").then(($submenu) => {
+          const submenuRect = $submenu[0].getBoundingClientRect();
+
+          expect(submenuRect.top).to.be.closeTo(triggerRect.bottom, 1);
+          expect(submenuRect.left).to.be.at.most(triggerRect.left + 1);
+          expect(submenuRect.left).to.be.at.least(0);
+          expect(submenuRect.right).to.be.at.most(win.innerWidth);
+        });
+      });
+    });
+  });
+});

package/src/example.tsx

@@ -1190,6 +1190,43 @@ function App() {
                 <NavigationOption label="Resources" href="#" />
               </Navigation>
             </Demo>
+            <p className="docs-section-desc">
+              Inside a narrow container the navigation scrolls horizontally. The
+              submenu follows its scrolled parent option and stays within the
+              viewport.
+            </p>
+            <Demo
+              stageClass="column"
+              code={`<div style={{ maxWidth: 280, overflowX: "auto" }}>
+  <Navigation>
+    <NavigationOption label="Overview" href="#" isActive />
+    <NavigationOption label="Admin" href="#" />
+    <NavigationOption label="Platform">
+      <a className="gc-submenu__item" href="#">Users</a>
+      <a className="gc-submenu__item" href="#">Events</a>
+    </NavigationOption>
+    <NavigationOption label="e-Shop" href="#" />
+    <NavigationOption label="Account" href="#" />
+  </Navigation>
+</div>`}
+            >
+              <div style={{ maxWidth: 280, overflowX: "auto" }}>
+                <Navigation>
+                  <NavigationOption label="Overview" href="#" isActive />
+                  <NavigationOption label="Admin" href="#" />
+                  <NavigationOption label="Platform">
+                    <a className="gc-submenu__item" href="#">
+                      Users
+                    </a>
+                    <a className="gc-submenu__item" href="#">
+                      Events
+                    </a>
+                  </NavigationOption>
+                  <NavigationOption label="e-Shop" href="#" />
+                  <NavigationOption label="Account" href="#" />
+                </Navigation>
+              </div>
+            </Demo>
           </section>
 
           <section className="docs-section" id="segmented-control">

package/src/variables/integration/colors.spec.js

@@ -1,6 +1,6 @@
 describe("Colors", () => {
   before(() => {
-    cy.visit("http://localhost:3000");
+    cy.visit("/");
   });
 
   it("should make a screenshot", () => {