@czi-sds/components 22.5.3 → 22.5.4

package/dist/index.cjs.d.ts

@@ -1634,6 +1634,7 @@ type IconButtonProps = SdsIconButtonProps & {
 };
 declare const NavigationHeader: React.ForwardRefExoticComponent<Omit<NavigationHeaderProps<string>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 interface NavigationJumpToExtraProps extends Omit<TabsProps, "onChange">, CommonThemeProps {
+    width?: CSSProperties["width"];
 }
 type Item = {
     title: string;
@@ -1643,6 +1644,7 @@ interface NavigationJumpToProps extends NavigationJumpToExtraProps {
     items: Array<Item>;
     offsetTop?: number;
     onChange?: (value: number, event?: React.SyntheticEvent, type?: "click" | "scroll") => void;
+    width?: CSSProperties["width"];
 }
 declare const NavigationJumpTo: React.ForwardRefExoticComponent<Omit<NavigationJumpToProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 type NotificationIntentType = "info" | "negative" | "positive" | "notice";

package/dist/index.cjs.js

@@ -15093,14 +15093,15 @@ var useScrollStopListener = function (callback, timeout) {
     }, [timeout]);
 };
 
-var doNotForwardProps$5 = ["items", "sdsIndicatorColor"];
+var doNotForwardProps$5 = ["items", "sdsIndicatorColor", "width"];
 var StyledTabs$1 = styled__default.default(material.Tabs, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
 })(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
+    var _c = props.width, width = _c === void 0 ? "180px" : _c;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      &:before {\n        background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        content: \"\";\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n\n      max-width: 180px;\n      top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      position: sticky;\n      overflow: visible;\n\n      .").concat(material.tabsClasses.indicator, " {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.borderSelected, " !important;\n        border-radius: 2px;\n        left: 0;\n        width: 2px;\n      }\n\n      .").concat(material.tabsClasses.scroller, " {\n        overflow: visible !important;\n      }\n    ");
+    return "\n      &:before {\n        background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        content: \"\";\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n\n      width: ").concat(width, ";\n      top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      position: sticky;\n      overflow: visible;\n\n      .").concat(material.tabsClasses.indicator, " {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.borderSelected, " !important;\n        border-radius: 2px;\n        left: 0;\n        width: 2px;\n      }\n\n      .").concat(material.tabsClasses.scroller, " {\n        overflow: visible !important;\n      }\n    ");
 });
 var StyledTab$1 = styled__default.default(material.Tab, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
@@ -15108,7 +15109,7 @@ var StyledTab$1 = styled__default.default(material.Tab, {
     var _a, _b, _c;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      ".concat(focusVisibleA11yStyle(props), "\n      box-sizing: border-box;\n      max-width: 180px;\n      padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      align-items: start;\n      min-height: unset;\n      max-height: unset;\n      text-transform: none;\n      &:last-child {\n        margin-bottom: 0;\n      }\n      &:before {\n        content: \"\";\n        position: absolute;\n        left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        height: 100%;\n        background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, ";\n        display: none;\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n        &:before {\n          display: block;\n        }\n      }\n      &.Mui-selected {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n        font-weight: 600;\n      }\n      &.MuiButtonBase-root {\n        white-space: nowrap;\n        padding: 0;\n        overflow: visible;\n      }\n    ");
+    return "\n      ".concat(focusVisibleA11yStyle(props), "\n      box-sizing: border-box;\n      padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      align-items: start;\n      min-height: unset;\n      max-height: unset;\n      text-transform: none;\n      &:last-child {\n        margin-bottom: 0;\n      }\n      &:before {\n        content: \"\";\n        position: absolute;\n        left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        height: 100%;\n        background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, ";\n        display: none;\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n        &:before {\n          display: block;\n        }\n      }\n      &.Mui-selected {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n        font-weight: 600;\n      }\n      &.MuiButtonBase-root {\n        text-align: left;\n        padding: 0;\n        overflow: visible;\n      }\n    ");
 });
 var templateObject_1$f, templateObject_2$8;
 
@@ -15116,9 +15117,12 @@ var templateObject_1$f, templateObject_2$8;
  * Custom hook that observes elements to determine if they are in the viewport.
  *
  * @param items - Array of items to observe.
+ * @param offsetTop - Offset from the top of the viewport to consider when
+ * determining if an element is in view. The default is 0.
  * @returns Object containing the visibility status of each observed item.
  */
-function useInView(items) {
+function useInView(items, offsetTop) {
+    if (offsetTop === void 0) { offsetTop = 0; }
     var _a = React.useState({}), elements = _a[0], setElements = _a[1];
     React.useEffect(function () {
         /**
@@ -15139,7 +15143,9 @@ function useInView(items) {
                 });
             });
         };
-        var observer = new IntersectionObserver(observerCallback);
+        var observer = new IntersectionObserver(observerCallback, {
+            rootMargin: "-".concat(offsetTop, "px 0px 0px 0px"),
+        });
         // Observe each item's element
         items.forEach(function (item) {
             if (item.elementRef.current) {
@@ -15150,7 +15156,7 @@ function useInView(items) {
         return function () {
             observer.disconnect();
         };
-    }, [items]);
+    }, [items, offsetTop]);
     // If the window object is not available (e.g., in a node environment) or
     // If the IntersectionObserver is not available (e.g., in a test environment),
     // return a default result indicating that all elements are not in view
@@ -15165,31 +15171,23 @@ function useInView(items) {
     return elements;
 }
 
+var scrollIntoViewWithOffset = function (selector, offset) {
+    var element = document.querySelector(selector);
+    if (!element)
+        return;
+    window.scrollTo({
+        behavior: "smooth",
+        top: element.getBoundingClientRect().top -
+            document.body.getBoundingClientRect().top -
+            offset,
+    });
+};
 var NavigationJumpTo = React.forwardRef(function (props, ref) {
-    var items = props.items, _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, onChange = props.onChange, rest = __rest(props, ["items", "offsetTop", "onChange"]);
+    var items = props.items, _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, onChange = props.onChange, width = props.width, rest = __rest(props, ["items", "offsetTop", "onChange", "width"]);
     var _b = React.useState(false), navItemClicked = _b[0], setNavItemClicked = _b[1];
     var _c = React.useState(0), firstTabIndexInview = _c[0], setFirstTabIndexInview = _c[1];
     var _d = React.useState(-1), emittedValue = _d[0], setEmittedValue = _d[1];
-    var sectionIsInView = useInView(items);
-    React.useEffect(function () {
-        items.forEach(function (item) {
-            var _a, _b;
-            if (offsetTop) {
-                var wrapper = document.createElement("div");
-                wrapper.style.position = "relative";
-                var hiddenDiv = document.createElement("div");
-                hiddenDiv.style.height = "".concat(offsetTop, "px");
-                hiddenDiv.style.top = "-".concat(offsetTop, "px");
-                hiddenDiv.style.position = "absolute";
-                hiddenDiv.style.pointerEvents = "none";
-                hiddenDiv.setAttribute("id", "".concat((_a = item.elementRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("id"), "-hiddenDiv"));
-                wrapper.appendChild(hiddenDiv);
-                (_b = item.elementRef.current) === null || _b === void 0 ? void 0 : _b.before(wrapper);
-                if (item.elementRef.current)
-                    wrapper.appendChild(item.elementRef.current);
-            }
-        });
-    }, [items, offsetTop]);
+    var sectionIsInView = useInView(items, offsetTop);
     var a11yProps = function (title, elementId) {
         return {
             "aria-controls": elementId,
@@ -15210,11 +15208,7 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
         setNavItemClicked(true);
         // Smoothly scroll to the section of the page referenced by the clicked nav item
         if (offsetTop) {
-            var hiddenDiv = document.getElementById("".concat((_c = (_b = (_a = items[newValue]) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.getAttribute("id"), "-hiddenDiv"));
-            hiddenDiv === null || hiddenDiv === void 0 ? void 0 : hiddenDiv.scrollIntoView({
-                behavior: "smooth",
-                block: "start",
-            });
+            scrollIntoViewWithOffset("#".concat((_c = (_b = (_a = items[newValue]) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.getAttribute("id")), offsetTop);
         }
         else {
             (_f = (_e = (_d = items[newValue]) === null || _d === void 0 ? void 0 : _d.elementRef) === null || _e === void 0 ? void 0 : _e.current) === null || _f === void 0 ? void 0 : _f.scrollIntoView({
@@ -15243,16 +15237,17 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
                 type: "scroll",
             }, "scroll");
         }
-    }, [handleOnChange, items, navItemClicked, sectionIsInView]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [handleOnChange, items, sectionIsInView]);
     // Set navItemClicked to false to re-enable the option
     // to update the tab value based on scroll.
     useScrollStopListener(function () {
         setNavItemClicked(false);
     });
-    return (jsxRuntime.jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to" }, rest, { children: items.map(function (_a, index) {
+    return (jsxRuntime.jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to", width: width }, rest, { children: items.map(function (_a, index) {
             var _b;
             var title = _a.title, elementRef = _a.elementRef;
-            return (jsxRuntime.jsx(StyledTab$1, __assign({ label: title, tabIndex: 0 }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
+            return (jsxRuntime.jsx(StyledTab$1, __assign({ label: title, tabIndex: 0, width: width }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
                 "navigation-panel-".concat(index + 1))), toKebabCase(title)));
         }) })));
 });

package/dist/index.esm.d.ts

@@ -1634,6 +1634,7 @@ type IconButtonProps = SdsIconButtonProps & {
 };
 declare const NavigationHeader: React.ForwardRefExoticComponent<Omit<NavigationHeaderProps<string>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 interface NavigationJumpToExtraProps extends Omit<TabsProps, "onChange">, CommonThemeProps {
+    width?: CSSProperties["width"];
 }
 type Item = {
     title: string;
@@ -1643,6 +1644,7 @@ interface NavigationJumpToProps extends NavigationJumpToExtraProps {
     items: Array<Item>;
     offsetTop?: number;
     onChange?: (value: number, event?: React.SyntheticEvent, type?: "click" | "scroll") => void;
+    width?: CSSProperties["width"];
 }
 declare const NavigationJumpTo: React.ForwardRefExoticComponent<Omit<NavigationJumpToProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 type NotificationIntentType = "info" | "negative" | "positive" | "notice";

package/dist/index.esm.js

@@ -15070,14 +15070,15 @@ var useScrollStopListener = function (callback, timeout) {
     }, [timeout]);
 };
 
-var doNotForwardProps$5 = ["items", "sdsIndicatorColor"];
+var doNotForwardProps$5 = ["items", "sdsIndicatorColor", "width"];
 var StyledTabs$1 = styled$2(Tabs$1, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
 })(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a, _b;
+    var _c = props.width, width = _c === void 0 ? "180px" : _c;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      &:before {\n        background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        content: \"\";\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n\n      max-width: 180px;\n      top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      position: sticky;\n      overflow: visible;\n\n      .").concat(tabsClasses.indicator, " {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.borderSelected, " !important;\n        border-radius: 2px;\n        left: 0;\n        width: 2px;\n      }\n\n      .").concat(tabsClasses.scroller, " {\n        overflow: visible !important;\n      }\n    ");
+    return "\n      &:before {\n        background-color: ".concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        content: \"\";\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n\n      width: ").concat(width, ";\n      top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      position: sticky;\n      overflow: visible;\n\n      .").concat(tabsClasses.indicator, " {\n        background-color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _b === void 0 ? void 0 : _b.borderSelected, " !important;\n        border-radius: 2px;\n        left: 0;\n        width: 2px;\n      }\n\n      .").concat(tabsClasses.scroller, " {\n        overflow: visible !important;\n      }\n    ");
 });
 var StyledTab$1 = styled$2(Tab$1, {
     shouldForwardProp: function (prop) { return !doNotForwardProps$5.includes(prop); },
@@ -15085,7 +15086,7 @@ var StyledTab$1 = styled$2(Tab$1, {
     var _a, _b, _c;
     var spaces = getSpaces(props);
     var semanticColors = getSemanticColors(props);
-    return "\n      ".concat(focusVisibleA11yStyle(props), "\n      box-sizing: border-box;\n      max-width: 180px;\n      padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      align-items: start;\n      min-height: unset;\n      max-height: unset;\n      text-transform: none;\n      &:last-child {\n        margin-bottom: 0;\n      }\n      &:before {\n        content: \"\";\n        position: absolute;\n        left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        height: 100%;\n        background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, ";\n        display: none;\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n        &:before {\n          display: block;\n        }\n      }\n      &.Mui-selected {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n        font-weight: 600;\n      }\n      &.MuiButtonBase-root {\n        white-space: nowrap;\n        padding: 0;\n        overflow: visible;\n      }\n    ");
+    return "\n      ".concat(focusVisibleA11yStyle(props), "\n      box-sizing: border-box;\n      padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      align-items: start;\n      min-height: unset;\n      max-height: unset;\n      text-transform: none;\n      &:last-child {\n        margin-bottom: 0;\n      }\n      &:before {\n        content: \"\";\n        position: absolute;\n        left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        height: 100%;\n        background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderPrimary, ";\n        display: none;\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      &:hover {\n        color: ").concat((_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, ";\n        &:before {\n          display: block;\n        }\n      }\n      &.Mui-selected {\n        color: ").concat((_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimary, ";\n        font-weight: 600;\n      }\n      &.MuiButtonBase-root {\n        text-align: left;\n        padding: 0;\n        overflow: visible;\n      }\n    ");
 });
 var templateObject_1$f, templateObject_2$8;
 
@@ -15093,9 +15094,12 @@ var templateObject_1$f, templateObject_2$8;
  * Custom hook that observes elements to determine if they are in the viewport.
  *
  * @param items - Array of items to observe.
+ * @param offsetTop - Offset from the top of the viewport to consider when
+ * determining if an element is in view. The default is 0.
  * @returns Object containing the visibility status of each observed item.
  */
-function useInView(items) {
+function useInView(items, offsetTop) {
+    if (offsetTop === void 0) { offsetTop = 0; }
     var _a = useState({}), elements = _a[0], setElements = _a[1];
     useEffect(function () {
         /**
@@ -15116,7 +15120,9 @@ function useInView(items) {
                 });
             });
         };
-        var observer = new IntersectionObserver(observerCallback);
+        var observer = new IntersectionObserver(observerCallback, {
+            rootMargin: "-".concat(offsetTop, "px 0px 0px 0px"),
+        });
         // Observe each item's element
         items.forEach(function (item) {
             if (item.elementRef.current) {
@@ -15127,7 +15133,7 @@ function useInView(items) {
         return function () {
             observer.disconnect();
         };
-    }, [items]);
+    }, [items, offsetTop]);
     // If the window object is not available (e.g., in a node environment) or
     // If the IntersectionObserver is not available (e.g., in a test environment),
     // return a default result indicating that all elements are not in view
@@ -15142,31 +15148,23 @@ function useInView(items) {
     return elements;
 }
 
+var scrollIntoViewWithOffset = function (selector, offset) {
+    var element = document.querySelector(selector);
+    if (!element)
+        return;
+    window.scrollTo({
+        behavior: "smooth",
+        top: element.getBoundingClientRect().top -
+            document.body.getBoundingClientRect().top -
+            offset,
+    });
+};
 var NavigationJumpTo = forwardRef(function (props, ref) {
-    var items = props.items, _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, onChange = props.onChange, rest = __rest(props, ["items", "offsetTop", "onChange"]);
+    var items = props.items, _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, onChange = props.onChange, width = props.width, rest = __rest(props, ["items", "offsetTop", "onChange", "width"]);
     var _b = useState(false), navItemClicked = _b[0], setNavItemClicked = _b[1];
     var _c = useState(0), firstTabIndexInview = _c[0], setFirstTabIndexInview = _c[1];
     var _d = useState(-1), emittedValue = _d[0], setEmittedValue = _d[1];
-    var sectionIsInView = useInView(items);
-    useEffect(function () {
-        items.forEach(function (item) {
-            var _a, _b;
-            if (offsetTop) {
-                var wrapper = document.createElement("div");
-                wrapper.style.position = "relative";
-                var hiddenDiv = document.createElement("div");
-                hiddenDiv.style.height = "".concat(offsetTop, "px");
-                hiddenDiv.style.top = "-".concat(offsetTop, "px");
-                hiddenDiv.style.position = "absolute";
-                hiddenDiv.style.pointerEvents = "none";
-                hiddenDiv.setAttribute("id", "".concat((_a = item.elementRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute("id"), "-hiddenDiv"));
-                wrapper.appendChild(hiddenDiv);
-                (_b = item.elementRef.current) === null || _b === void 0 ? void 0 : _b.before(wrapper);
-                if (item.elementRef.current)
-                    wrapper.appendChild(item.elementRef.current);
-            }
-        });
-    }, [items, offsetTop]);
+    var sectionIsInView = useInView(items, offsetTop);
     var a11yProps = function (title, elementId) {
         return {
             "aria-controls": elementId,
@@ -15187,11 +15185,7 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
         setNavItemClicked(true);
         // Smoothly scroll to the section of the page referenced by the clicked nav item
         if (offsetTop) {
-            var hiddenDiv = document.getElementById("".concat((_c = (_b = (_a = items[newValue]) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.getAttribute("id"), "-hiddenDiv"));
-            hiddenDiv === null || hiddenDiv === void 0 ? void 0 : hiddenDiv.scrollIntoView({
-                behavior: "smooth",
-                block: "start",
-            });
+            scrollIntoViewWithOffset("#".concat((_c = (_b = (_a = items[newValue]) === null || _a === void 0 ? void 0 : _a.elementRef) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.getAttribute("id")), offsetTop);
         }
         else {
             (_f = (_e = (_d = items[newValue]) === null || _d === void 0 ? void 0 : _d.elementRef) === null || _e === void 0 ? void 0 : _e.current) === null || _f === void 0 ? void 0 : _f.scrollIntoView({
@@ -15220,16 +15214,17 @@ var NavigationJumpTo = forwardRef(function (props, ref) {
                 type: "scroll",
             }, "scroll");
         }
-    }, [handleOnChange, items, navItemClicked, sectionIsInView]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [handleOnChange, items, sectionIsInView]);
     // Set navItemClicked to false to re-enable the option
     // to update the tab value based on scroll.
     useScrollStopListener(function () {
         setNavItemClicked(false);
     });
-    return (jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to" }, rest, { children: items.map(function (_a, index) {
+    return (jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to", width: width }, rest, { children: items.map(function (_a, index) {
             var _b;
             var title = _a.title, elementRef = _a.elementRef;
-            return (jsx(StyledTab$1, __assign({ label: title, tabIndex: 0 }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
+            return (jsx(StyledTab$1, __assign({ label: title, tabIndex: 0, width: width }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
                 "navigation-panel-".concat(index + 1))), toKebabCase(title)));
         }) })));
 });