@asante-org/atlascopco-vt-litesitegenerator 3.0.18 → 3.0.19

package/dist/index.esm.js

@@ -871,7 +871,14 @@ var LsgHeader = function (_a) {
       })));
     }))));
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("header", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LsgSearchOverlay, {
+    id: SEARCH_OVERLAY_ID,
+    isOpen: searchOpen,
+    onClose: function () {
+      return setSearchOpen(false);
+    },
+    placeholder: searchPlaceholder
+  }), /*#__PURE__*/React.createElement("header", {
     ref: headerRef,
     className: ["lsg-header", "lsg-header--".concat(variant), menuOpen ? "lsg-header--menu-open" : "", "lsg-header--mobile-level-".concat(mobileLevel)].filter(Boolean).join(" ")
   }, /*#__PURE__*/React.createElement("div", {
@@ -917,14 +924,7 @@ var LsgHeader = function (_a) {
     "data-lsg-menu-trigger": true
   }, /*#__PURE__*/React.createElement(LsgHeaderIcon, {
     name: mobileOpen ? "close" : "bars"
-  })))), variant === "mega" && menuOpen && (children || renderMegaPanel()), mobileOpen && renderMobileMenu()), /*#__PURE__*/React.createElement(LsgSearchOverlay, {
-    id: SEARCH_OVERLAY_ID,
-    isOpen: searchOpen,
-    onClose: function () {
-      return setSearchOpen(false);
-    },
-    placeholder: searchPlaceholder
-  }));
+  })))), variant === "mega" && menuOpen && (children || renderMegaPanel()), mobileOpen && renderMobileMenu()));
 };
 
 var LsgQuickLinks = function (_a) {
@@ -3548,6 +3548,244 @@ var LsgHero = function (_a) {
   }))));
 };
 
+// Matches $lsg-tabs-accordion-breakpoint in LsgTabs.scss ($breakpoint-sm - 1px)
+// and MOBILE_MEDIA_QUERY in lsg-clientlib-runtime.ts.
+var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
+// Sub-pixel layout rounding when comparing scroll offsets against extents
+var SCROLL_EPSILON = 1;
+var CHEVRON_SVG = /*#__PURE__*/React.createElement("svg", {
+  className: "lsg-tabs__tab-icon-svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-hidden": "true",
+  focusable: "false"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M3 6L8 11L13 6",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));
+var LsgTabs = function (_a) {
+  var _b, _c;
+  var items = _a.items,
+    activeId = _a.activeId,
+    _d = _a.variant,
+    variant = _d === void 0 ? "default" : _d,
+    accessibilityLabel = _a.accessibilityLabel,
+    _e = _a.className,
+    className = _e === void 0 ? "" : _e;
+  var _f = useState((_c = activeId !== null && activeId !== void 0 ? activeId : (_b = items[0]) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : ""),
+    selectedId = _f[0],
+    setSelectedId = _f[1];
+  // Below the breakpoint the tabs render as a single-open accordion and the open
+  // header can be collapsed. Tracked separately from selection so exactly one tab
+  // stays selected at every width — resizing back to desktop just reveals it again.
+  var _g = useState(false),
+    collapsed = _g[0],
+    setCollapsed = _g[1];
+  var _h = useState(false),
+    isMobile = _h[0],
+    setIsMobile = _h[1];
+  // Scroll-arrow state. The arrows themselves are ::before / ::after on the root
+  // (see LsgTabs.scss) — these only say whether there is more to reveal.
+  var _j = useState(false),
+    scrollStart = _j[0],
+    setScrollStart = _j[1];
+  var _k = useState(false),
+    scrollEnd = _k[0],
+    setScrollEnd = _k[1];
+  var tabRefs = useRef({});
+  var stripRef = useRef(null);
+  var isVertical = variant === "vertical";
+  var selectedIndex = Math.max(0, items.findIndex(function (item) {
+    return item.id === selectedId;
+  }));
+  useEffect(function () {
+    var mql = window.matchMedia(MOBILE_MEDIA_QUERY);
+    var sync = function () {
+      return setIsMobile(mql.matches);
+    };
+    sync();
+    mql.addEventListener("change", sync);
+    return function () {
+      return mql.removeEventListener("change", sync);
+    };
+  }, []);
+  var updateArrows = function () {
+    var strip = stripRef.current;
+    // Below the breakpoint this is an accordion — nothing scrolls, so the arrows
+    // must not be offered.
+    if (!strip || isMobile) {
+      setScrollStart(false);
+      setScrollEnd(false);
+      return;
+    }
+    var offset = isVertical ? strip.scrollTop : strip.scrollLeft;
+    var visible = isVertical ? strip.clientHeight : strip.clientWidth;
+    var total = isVertical ? strip.scrollHeight : strip.scrollWidth;
+    setScrollStart(offset > SCROLL_EPSILON);
+    setScrollEnd(offset + visible < total - SCROLL_EPSILON);
+  };
+  useEffect(function () {
+    updateArrows();
+  }, [isMobile, isVertical, items, selectedIndex]);
+  useEffect(function () {
+    var strip = stripRef.current;
+    if (!strip || typeof ResizeObserver === "undefined") return;
+    // The strip can start overflowing because its container changed, with no
+    // viewport resize at all.
+    var observer = new ResizeObserver(function () {
+      return updateArrows();
+    });
+    observer.observe(strip);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [isMobile, isVertical]);
+  useEffect(function () {
+    var _a;
+    // A late web-font swap widens the labels, growing scrollWidth without changing
+    // the strip's own box — so ResizeObserver may never fire. Re-measure once the
+    // fonts have settled, otherwise the arrows can be stale on first paint.
+    var cancelled = false;
+    (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready.then(function () {
+      if (!cancelled) updateArrows();
+    });
+    return function () {
+      cancelled = true;
+    };
+  }, [isMobile, isVertical]);
+  var scrollStrip = function (direction) {
+    var strip = stripRef.current;
+    if (!strip) return;
+    // A step just under one viewport keeps a sliver of context in view
+    var visible = isVertical ? strip.clientHeight : strip.clientWidth;
+    var step = Math.max(visible * 0.8, 1);
+    if (isVertical) {
+      strip.scrollTop += direction * step;
+    } else {
+      strip.scrollLeft += direction * step;
+    }
+  };
+  // The arrows are pseudo-elements painted above the strip, so a click on one
+  // hit-tests to the root rather than to a tab or panel. Nothing else on the root
+  // is clickable, which is what makes this unambiguous.
+  var onRootClick = function (event) {
+    if (event.target !== event.currentTarget) return;
+    var strip = stripRef.current;
+    if (!strip) return;
+    var rect = strip.getBoundingClientRect();
+    var beforeMidpoint = isVertical ? event.clientY < rect.top + rect.height / 2 : event.clientX < rect.left + rect.width / 2;
+    scrollStrip(beforeMidpoint ? -1 : 1);
+  };
+  var select = function (index, moveFocus) {
+    var item = items[index];
+    if (!item) return;
+    setSelectedId(item.id);
+    setCollapsed(false);
+    var tab = tabRefs.current[item.id];
+    // Arrow-key navigation can land on a tab that is scrolled out of the strip
+    tab === null || tab === void 0 ? void 0 : tab.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
+    if (moveFocus) tab === null || tab === void 0 ? void 0 : tab.focus();
+  };
+  var press = function (index) {
+    if (isMobile && index === selectedIndex) {
+      setCollapsed(function (prev) {
+        return !prev;
+      });
+      return;
+    }
+    select(index, false);
+  };
+  // Roving tabindex keyboard model for role="tab" — see bootLsgTabs for the AEM twin.
+  var onKeyDown = function (event, index) {
+    var last = items.length - 1;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        select(selectedIndex === last ? 0 : selectedIndex + 1, true);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        select(selectedIndex === 0 ? last : selectedIndex - 1, true);
+        break;
+      case "Home":
+        event.preventDefault();
+        select(0, true);
+        break;
+      case "End":
+        event.preventDefault();
+        select(last, true);
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        press(index);
+        break;
+    }
+  };
+  var rootClass = ["lsg-tabs", isVertical ? "lsg-tabs--vertical" : "", scrollStart ? "lsg-tabs--scroll-start" : "", scrollEnd ? "lsg-tabs--scroll-end" : "", className].filter(Boolean).join(" ");
+  return /*#__PURE__*/React.createElement("div", {
+    className: rootClass,
+    onClick: onRootClick
+  }, /*#__PURE__*/React.createElement("ol", {
+    ref: stripRef,
+    className: "lsg-tabs__tablist",
+    role: "tablist",
+    "aria-label": accessibilityLabel,
+    "aria-multiselectable": "false",
+    onScroll: updateArrows
+  }, items.map(function (item, index) {
+    var isActive = index === selectedIndex;
+    return /*#__PURE__*/React.createElement("li", {
+      key: item.id,
+      ref: function (node) {
+        tabRefs.current[item.id] = node;
+      },
+      role: "tab",
+      id: "lsg-tab-".concat(item.id),
+      className: "lsg-tabs__tab".concat(isActive ? " lsg-tabs__tab--active" : ""),
+      "aria-controls": "lsg-tabpanel-".concat(item.id),
+      "aria-selected": isActive
+      // Desktop is a tab strip — aria-selected carries the state there, and
+      // the collapsed class has no styling, so aria-expanded would mislead.
+      ,
+      "aria-expanded": isMobile ? isActive && !collapsed : undefined,
+      tabIndex: isActive ? 0 : -1,
+      onClick: function () {
+        return press(index);
+      },
+      onKeyDown: function (event) {
+        return onKeyDown(event, index);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "lsg-tabs__tab-label"
+    }, item.title), /*#__PURE__*/React.createElement("span", {
+      className: "lsg-tabs__tab-icon",
+      "aria-hidden": "true"
+    }, CHEVRON_SVG));
+  })), items.map(function (item, index) {
+    var isActive = index === selectedIndex;
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      id: "lsg-tabpanel-".concat(item.id),
+      role: "tabpanel",
+      "aria-labelledby": "lsg-tab-".concat(item.id),
+      tabIndex: 0,
+      className: ["lsg-tabs__panel", isActive ? "lsg-tabs__panel--active" : "", isActive && collapsed ? "lsg-tabs__panel--collapsed" : ""].filter(Boolean).join(" ")
+    }, item.content);
+  }));
+};
+
 var LsgFormFieldText = function (_a) {
   var _b = _a.id,
     id = _b === void 0 ? "field-text" : _b,
@@ -4291,6 +4529,7 @@ var BASE_COMPONENTS = {
   LsgSocialMediaIcons: LsgSocialMediaIcons,
   LsgFooter: LsgFooter,
   LsgHero: LsgHero,
+  LsgTabs: LsgTabs,
   LsgFormContainer: LsgFormContainer,
   LsgFormFieldText: LsgFormFieldText,
   LsgFormFieldEmail: LsgFormFieldEmail,
@@ -4334,7 +4573,8 @@ function createThemeComponents(themeName) {
     LsgFormFieldCountry: createThemeComponent(themeName, "form-field-country", BASE_COMPONENTS.LsgFormFieldCountry),
     LsgFormFieldTextarea: createThemeComponent(themeName, "form-field-textarea", BASE_COMPONENTS.LsgFormFieldTextarea),
     LsgFormFieldConsent: createThemeComponent(themeName, "form-field-consent", BASE_COMPONENTS.LsgFormFieldConsent),
-    LsgFormStep: createThemeComponent(themeName, "form-step", BASE_COMPONENTS.LsgFormStep)
+    LsgFormStep: createThemeComponent(themeName, "form-step", BASE_COMPONENTS.LsgFormStep),
+    LsgTabs: createThemeComponent(themeName, "tabs", BASE_COMPONENTS.LsgTabs)
   };
 }
 
@@ -4353,6 +4593,7 @@ var Theme1LsgButton = theme1Components.LsgButton,
   Theme1LsgSocialMediaIcons = theme1Components.LsgSocialMediaIcons,
   Theme1LsgFooter = theme1Components.LsgFooter,
   Theme1LsgHero = theme1Components.LsgHero;
+  theme1Components.LsgTabs;
   // Form components
   theme1Components.LsgFormContainer;
   theme1Components.LsgFormFieldText;