npm - @backstage/ui - Versions diffs - 0.15.0 → 0.16.0 - Mend

@backstage/ui 0.15.0 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/dist/components/Tabs/TabsIndicators.esm.js CHANGED Viewed

@@ -9,133 +9,180 @@ const TabsIndicators = (props) => {
   const { classes, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = ownProps;
   const state = useContext(TabListStateContext);
   const prevSelectedKey = useRef(null);
-  const updateCSSVariables = useCallback(() => {
-    if (state == null) return;
-    if (!tabsRef.current) return;
-    const tabsRect = tabsRef.current.getBoundingClientRect();
-    if (state?.selectedKey != null && state.selectedKey !== "") {
-      const activeTab = tabRefs.current.get(state.selectedKey.toString());
-      if (activeTab) {
-        const activeRect = activeTab.getBoundingClientRect();
-        const relativeLeft = activeRect.left - tabsRect.left;
-        const relativeTop = activeRect.top - tabsRect.top;
-        const isFirstActiveTab = prevSelectedKey.current === null;
-        if (isFirstActiveTab) {
+  const updateCSSVariables = useCallback(
+    (animate = true) => {
+      if (state == null) return;
+      if (!tabsRef.current) return;
+      const tabsRect = tabsRef.current.getBoundingClientRect();
+      if (state?.selectedKey != null && state.selectedKey !== "") {
+        const activeTab = tabRefs.current.get(state.selectedKey.toString());
+        if (activeTab) {
+          const activeRect = activeTab.getBoundingClientRect();
+          const relativeLeft = activeRect.left - tabsRect.left;
+          const relativeTop = activeRect.top - tabsRect.top;
+          const isFirstActiveTab = prevSelectedKey.current === null;
+          if (isFirstActiveTab || !animate) {
+            tabsRef.current.style.setProperty(
+              "--active-transition-duration",
+              "0s"
+            );
+            if (animate) {
+              requestAnimationFrame(() => {
+                if (tabsRef.current) {
+                  tabsRef.current.style.setProperty(
+                    "--active-transition-duration",
+                    "0.25s"
+                  );
+                }
+              });
+            }
+          } else {
+            tabsRef.current.style.setProperty(
+              "--active-transition-duration",
+              "0.25s"
+            );
+          }
+          prevSelectedKey.current = state.selectedKey.toString();
           tabsRef.current.style.setProperty(
-            "--active-transition-duration",
-            "0s"
+            "--active-tab-left",
+            `${relativeLeft}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--active-tab-right",
+            `${relativeLeft + activeRect.width}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--active-tab-top",
+            `${relativeTop}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--active-tab-bottom",
+            `${relativeTop + activeRect.height}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--active-tab-width",
+            `${activeRect.width}px`
           );
-          requestAnimationFrame(() => {
-            if (tabsRef.current) {
-              tabsRef.current.style.setProperty(
-                "--active-transition-duration",
-                "0.25s"
-              );
-            }
-          });
-        } else {
           tabsRef.current.style.setProperty(
-            "--active-transition-duration",
-            "0.25s"
+            "--active-tab-height",
+            `${activeRect.height}px`
           );
+          tabsRef.current.style.setProperty("--active-tab-opacity", "1");
         }
-        prevSelectedKey.current = state.selectedKey.toString();
-        tabsRef.current.style.setProperty(
-          "--active-tab-left",
-          `${relativeLeft}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--active-tab-right",
-          `${relativeLeft + activeRect.width}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--active-tab-top",
-          `${relativeTop}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--active-tab-bottom",
-          `${relativeTop + activeRect.height}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--active-tab-width",
-          `${activeRect.width}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--active-tab-height",
-          `${activeRect.height}px`
-        );
-        tabsRef.current.style.setProperty("--active-tab-opacity", "1");
+      } else {
+        tabsRef.current.style.setProperty("--active-tab-opacity", "0");
+        prevSelectedKey.current = null;
       }
-    } else {
-      tabsRef.current.style.setProperty("--active-tab-opacity", "0");
-      prevSelectedKey.current = null;
-    }
-    if (hoveredKey) {
-      const hoveredTab = tabRefs.current.get(hoveredKey);
-      if (hoveredTab) {
-        const hoveredRect = hoveredTab.getBoundingClientRect();
-        const relativeLeft = hoveredRect.left - tabsRect.left;
-        const relativeTop = hoveredRect.top - tabsRect.top;
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-left",
-          `${relativeLeft}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-right",
-          `${relativeLeft + hoveredRect.width}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-top",
-          `${relativeTop}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-bottom",
-          `${relativeTop + hoveredRect.height}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-width",
-          `${hoveredRect.width}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-height",
-          `${hoveredRect.height}px`
-        );
-        const isNewHoverSession = prevHoveredKey.current === null;
-        if (isNewHoverSession) {
+      if (hoveredKey) {
+        const hoveredTab = tabRefs.current.get(hoveredKey);
+        if (hoveredTab) {
+          const hoveredRect = hoveredTab.getBoundingClientRect();
+          const relativeLeft = hoveredRect.left - tabsRect.left;
+          const relativeTop = hoveredRect.top - tabsRect.top;
           tabsRef.current.style.setProperty(
-            "--hovered-transition-duration",
-            "0s"
+            "--hovered-tab-left",
+            `${relativeLeft}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--hovered-tab-right",
+            `${relativeLeft + hoveredRect.width}px`
           );
-          requestAnimationFrame(() => {
-            if (tabsRef.current) {
-              tabsRef.current.style.setProperty(
-                "--hovered-transition-duration",
-                "0.2s"
-              );
-            }
-          });
-        } else {
           tabsRef.current.style.setProperty(
-            "--hovered-transition-duration",
-            "0.2s"
+            "--hovered-tab-top",
+            `${relativeTop}px`
           );
+          tabsRef.current.style.setProperty(
+            "--hovered-tab-bottom",
+            `${relativeTop + hoveredRect.height}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--hovered-tab-width",
+            `${hoveredRect.width}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--hovered-tab-height",
+            `${hoveredRect.height}px`
+          );
+          const isNewHoverSession = prevHoveredKey.current === null;
+          if (isNewHoverSession || !animate) {
+            tabsRef.current.style.setProperty(
+              "--hovered-transition-duration",
+              "0s"
+            );
+            if (animate) {
+              requestAnimationFrame(() => {
+                if (tabsRef.current) {
+                  tabsRef.current.style.setProperty(
+                    "--hovered-transition-duration",
+                    "0.2s"
+                  );
+                }
+              });
+            }
+          } else {
+            tabsRef.current.style.setProperty(
+              "--hovered-transition-duration",
+              "0.2s"
+            );
+          }
+          prevHoveredKey.current = hoveredKey;
+          tabsRef.current.style.setProperty("--hovered-tab-opacity", "1");
         }
-        prevHoveredKey.current = hoveredKey;
-        tabsRef.current.style.setProperty("--hovered-tab-opacity", "1");
+      } else {
+        tabsRef.current.style.setProperty("--hovered-tab-opacity", "0");
+        prevHoveredKey.current = null;
       }
-    } else {
-      tabsRef.current.style.setProperty("--hovered-tab-opacity", "0");
-      prevHoveredKey.current = null;
-    }
-  }, [state?.selectedKey, hoveredKey, tabRefs.current]);
+    },
+    [state?.selectedKey, hoveredKey, tabRefs.current]
+  );
   useEffect(() => {
     updateCSSVariables();
   }, [updateCSSVariables, tabRefs.current.size]);
   useEffect(() => {
-    const handleResize = () => updateCSSVariables();
+    const handleResize = () => updateCSSVariables(false);
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [updateCSSVariables]);
+  useEffect(() => {
+    if (typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    let frame = null;
+    const scheduleUpdate = () => {
+      if (frame !== null) {
+        return;
+      }
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        updateCSSVariables(false);
+      });
+    };
+    const resizeObserver = new ResizeObserver(scheduleUpdate);
+    const observeTabs = () => {
+      resizeObserver.disconnect();
+      for (const tab of tabRefs.current.values()) {
+        resizeObserver.observe(tab);
+      }
+    };
+    observeTabs();
+    const mutationObserver = new MutationObserver(() => {
+      observeTabs();
+      scheduleUpdate();
+    });
+    if (tabsRef.current) {
+      mutationObserver.observe(tabsRef.current, {
+        childList: true,
+        subtree: true
+      });
+    }
+    return () => {
+      if (frame !== null) {
+        cancelAnimationFrame(frame);
+      }
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [updateCSSVariables, tabRefs, tabsRef]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: classes.root }),
     /* @__PURE__ */ jsx("div", { className: classes.hovered })

package/dist/components/Tabs/TabsIndicators.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsIndicators.esm.js","sources":["../../../src/components/Tabs/TabsIndicators.tsx"],"sourcesContent":["/\n Copyright 2024 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport { TabListStateContext } from 'react-aria-components';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TabsIndicatorsDefinition } from './definition';\nimport { useContext, useEffect, useCallback, useRef } from 'react';\nimport type { TabsIndicatorsProps } from './types';\n\n/\n A component that renders the indicators for the toolbar.\n \n @internal\n */\nexport const TabsIndicators = (props: TabsIndicatorsProps) => {\n const { ownProps } = useDefinition(TabsIndicatorsDefinition, props);\n const { classes, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = ownProps;\n const state = useContext(TabListStateContext);\n const prevSelectedKey = useRef<string \| null>(null);\n\n const updateCSSVariables = useCallback(() => {\n // When rendered inside CollectionBuilder's hidden tree (for collection\n // building), there is no TabListStateContext provider, so state is null.\n // Bail out to avoid overwriting CSS variables on the shared tabsRef DOM\n // element that the real instance also writes to.\n if (state == null) return;\n\n if (!tabsRef.current) return;\n\n const tabsRect = tabsRef.current.getBoundingClientRect();\n\n // Set active tab variables\n if (state?.selectedKey != null && state.selectedKey !== '') {\n const activeTab = tabRefs.current.get(state.selectedKey.toString());\n\n if (activeTab) {\n const activeRect = activeTab.getBoundingClientRect();\n const relativeLeft = activeRect.left - tabsRect.left;\n const relativeTop = activeRect.top - tabsRect.top;\n\n // Control transition timing based on whether this is the first time setting active tab\n const isFirstActiveTab = prevSelectedKey.current === null;\n\n if (isFirstActiveTab) {\n // First time setting active tab: no transitions for position\n tabsRef.current.style.setProperty(\n '--active-transition-duration',\n '0s',\n );\n // Enable transitions on next frame for future tab switches\n requestAnimationFrame(() => {\n if (tabsRef.current) {\n tabsRef.current.style.setProperty(\n '--active-transition-duration',\n '0.25s',\n );\n }\n });\n } else {\n // Switching between tabs: full transitions\n tabsRef.current.style.setProperty(\n '--active-transition-duration',\n '0.25s',\n );\n }\n\n // Update previous selected key for next time\n prevSelectedKey.current = state.selectedKey.toString();\n\n tabsRef.current.style.setProperty(\n '--active-tab-left',\n `${relativeLeft}px`,\n );\n tabsRef.current.style.setProperty(\n '--active-tab-right',\n `${relativeLeft + activeRect.width}px`,\n );\n tabsRef.current.style.setProperty(\n '--active-tab-top',\n `${relativeTop}px`,\n );\n tabsRef.current.style.setProperty(\n '--active-tab-bottom',\n `${relativeTop + activeRect.height}px`,\n );\n tabsRef.current.style.setProperty(\n '--active-tab-width',\n `${activeRect.width}px`,\n );\n tabsRef.current.style.setProperty(\n '--active-tab-height',\n `${activeRect.height}px`,\n );\n tabsRef.current.style.setProperty('--active-tab-opacity', '1');\n }\n } else {\n tabsRef.current.style.setProperty('--active-tab-opacity', '0');\n prevSelectedKey.current = null;\n }\n\n // Set hovered tab variables\n if (hoveredKey) {\n const hoveredTab = tabRefs.current.get(hoveredKey);\n if (hoveredTab) {\n const hoveredRect = hoveredTab.getBoundingClientRect();\n const relativeLeft = hoveredRect.left - tabsRect.left;\n const relativeTop = hoveredRect.top - tabsRect.top;\n\n tabsRef.current.style.setProperty(\n '--hovered-tab-left',\n `${relativeLeft}px`,\n );\n tabsRef.current.style.setProperty(\n '--hovered-tab-right',\n `${relativeLeft + hoveredRect.width}px`,\n );\n tabsRef.current.style.setProperty(\n '--hovered-tab-top',\n `${relativeTop}px`,\n );\n tabsRef.current.style.setProperty(\n '--hovered-tab-bottom',\n `${relativeTop + hoveredRect.height}px`,\n );\n tabsRef.current.style.setProperty(\n '--hovered-tab-width',\n `${hoveredRect.width}px`,\n );\n tabsRef.current.style.setProperty(\n '--hovered-tab-height',\n `${hoveredRect.height}px`,\n );\n // Control transition timing based on whether this is a new hover session\n const isNewHoverSession = prevHoveredKey.current === null;\n\n if (isNewHoverSession) {\n // Starting new hover session: no transitions for position\n tabsRef.current.style.setProperty(\n '--hovered-transition-duration',\n '0s',\n );\n // Enable transitions on next frame for future tab switches\n requestAnimationFrame(() => {\n if (tabsRef.current) {\n tabsRef.current.style.setProperty(\n '--hovered-transition-duration',\n '0.2s',\n );\n }\n });\n } else {\n // Moving between tabs in same session: full transitions\n tabsRef.current.style.setProperty(\n '--hovered-transition-duration',\n '0.2s',\n );\n }\n\n // Update previous hover key for next time\n prevHoveredKey.current = hoveredKey;\n\n tabsRef.current.style.setProperty('--hovered-tab-opacity', '1');\n }\n } else {\n // When not hovering, hide with opacity and reset for next hover session\n tabsRef.current.style.setProperty('--hovered-tab-opacity', '0');\n\n // Reset previous hover key so next hover is treated as new session\n prevHoveredKey.current = null;\n }\n }, [state?.selectedKey, hoveredKey, tabRefs.current]);\n\n useEffect(() => {\n updateCSSVariables();\n }, [updateCSSVariables, tabRefs.current.size]);\n\n useEffect(() => {\n const handleResize = () => updateCSSVariables();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [updateCSSVariables]);\n\n return (\n <>\n <div className={classes.root} />\n <div className={classes.hovered} />\n </>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"TabsIndicators.esm.js","sources":["../../../src/components/Tabs/TabsIndicators.tsx"],"sourcesContent":["/\n Copyright 2024 The Backstage Authors\n \n Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n /\n\nimport { TabListStateContext } from 'react-aria-components';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TabsIndicatorsDefinition } from './definition';\nimport { useContext, useEffect, useCallback, useRef } from 'react';\nimport type { TabsIndicatorsProps } from './types';\n\n/\n A component that renders the indicators for the toolbar.\n \n @internal\n */\nexport const TabsIndicators = (props: TabsIndicatorsProps) => {\n const { ownProps } = useDefinition(TabsIndicatorsDefinition, props);\n const { classes, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = ownProps;\n const state = useContext(TabListStateContext);\n const prevSelectedKey = useRef<string \| null>(null);\n\n const updateCSSVariables = useCallback(\n (animate = true) => {\n // When rendered inside CollectionBuilder's hidden tree (for collection\n // building), there is no TabListStateContext provider, so state is null.\n // Bail out to avoid overwriting CSS variables on the shared tabsRef DOM\n // element that the real instance also writes to.\n if (state == null) return;\n\n if (!tabsRef.current) return;\n\n const tabsRect = tabsRef.current.getBoundingClientRect();\n\n // Set active tab variables\n if (state?.selectedKey != null && state.selectedKey !== '') {\n const activeTab = tabRefs.current.get(state.selectedKey.toString());\n\n if (activeTab) {\n const activeRect = activeTab.getBoundingClientRect();\n const relativeLeft = activeRect.left - tabsRect.left;\n const relativeTop = activeRect.top - tabsRect.top;\n\n // Control transition timing based on whether this is the first time setting active tab\n const isFirstActiveTab = prevSelectedKey.current === null;\n\n if (isFirstActiveTab \|\| !animate) {\n // First time setting active tab or non-animated reposition (e.g.\n // tab resize): no transitions for position\n tabsRef.current.style.setProperty(\n '--active-transition-duration',\n '0s',\n );\n // Enable transitions on next frame for future tab switches, unless\n // more non-animated updates may follow (e.g. a resize in progress)\n if (animate) {\n requestAnimationFrame(() => {\n if (tabsRef.current) {\n tabsRef.current.style.setProperty(\n '--active-transition-duration',\n '0.25s',\n );\n }\n });\n }\n } else {\n // Switching between tabs: full transitions\n tabsRef.current.style.setProperty(\n '--active-transition-duration',\n '0.25s',\n );\n }\n\n // Update previous selected key for next time\n prevSelectedKey.current = state.selectedKey.toString();\n\n tabsRef.current.style.setProperty(\n '--active-tab-left',\n `${relativeLeft}px`,\n );\n tabsRef.current.style.setProperty(\n '--active-tab-right',\n `${relativeLeft + activeRect.width}px`,\n );\n tabsRef.current.style.setProperty(\n '--active-tab-top',\n `${relativeTop}px`,\n );\n tabsRef.current.style.setProperty(\n '--active-tab-bottom',\n `${relativeTop + activeRect.height}px`,\n );\n tabsRef.current.style.setProperty(\n '--active-tab-width',\n `${activeRect.width}px`,\n );\n tabsRef.current.style.setProperty(\n '--active-tab-height',\n `${activeRect.height}px`,\n );\n tabsRef.current.style.setProperty('--active-tab-opacity', '1');\n }\n } else {\n tabsRef.current.style.setProperty('--active-tab-opacity', '0');\n prevSelectedKey.current = null;\n }\n\n // Set hovered tab variables\n if (hoveredKey) {\n const hoveredTab = tabRefs.current.get(hoveredKey);\n if (hoveredTab) {\n const hoveredRect = hoveredTab.getBoundingClientRect();\n const relativeLeft = hoveredRect.left - tabsRect.left;\n const relativeTop = hoveredRect.top - tabsRect.top;\n\n tabsRef.current.style.setProperty(\n '--hovered-tab-left',\n `${relativeLeft}px`,\n );\n tabsRef.current.style.setProperty(\n '--hovered-tab-right',\n `${relativeLeft + hoveredRect.width}px`,\n );\n tabsRef.current.style.setProperty(\n '--hovered-tab-top',\n `${relativeTop}px`,\n );\n tabsRef.current.style.setProperty(\n '--hovered-tab-bottom',\n `${relativeTop + hoveredRect.height}px`,\n );\n tabsRef.current.style.setProperty(\n '--hovered-tab-width',\n `${hoveredRect.width}px`,\n );\n tabsRef.current.style.setProperty(\n '--hovered-tab-height',\n `${hoveredRect.height}px`,\n );\n // Control transition timing based on whether this is a new hover session\n const isNewHoverSession = prevHoveredKey.current === null;\n\n if (isNewHoverSession \|\| !animate) {\n // Starting new hover session or non-animated reposition (e.g. tab\n // resize): no transitions for position\n tabsRef.current.style.setProperty(\n '--hovered-transition-duration',\n '0s',\n );\n // Enable transitions on next frame for future tab switches, unless\n // more non-animated updates may follow (e.g. a resize in progress)\n if (animate) {\n requestAnimationFrame(() => {\n if (tabsRef.current) {\n tabsRef.current.style.setProperty(\n '--hovered-transition-duration',\n '0.2s',\n );\n }\n });\n }\n } else {\n // Moving between tabs in same session: full transitions\n tabsRef.current.style.setProperty(\n '--hovered-transition-duration',\n '0.2s',\n );\n }\n\n // Update previous hover key for next time\n prevHoveredKey.current = hoveredKey;\n\n tabsRef.current.style.setProperty('--hovered-tab-opacity', '1');\n }\n } else {\n // When not hovering, hide with opacity and reset for next hover session\n tabsRef.current.style.setProperty('--hovered-tab-opacity', '0');\n\n // Reset previous hover key so next hover is treated as new session\n prevHoveredKey.current = null;\n }\n },\n [state?.selectedKey, hoveredKey, tabRefs.current],\n );\n\n useEffect(() => {\n updateCSSVariables();\n }, [updateCSSVariables, tabRefs.current.size]);\n\n useEffect(() => {\n const handleResize = () => updateCSSVariables(false);\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [updateCSSVariables]);\n\n useEffect(() => {\n // ResizeObserver is not available in some environments (e.g. Jest/jsdom)\n if (typeof ResizeObserver === 'undefined') {\n return undefined;\n }\n\n let frame: number \| null = null;\n const scheduleUpdate = () => {\n if (frame !== null) {\n return;\n }\n\n frame = requestAnimationFrame(() => {\n frame = null;\n updateCSSVariables(false);\n });\n };\n\n const resizeObserver = new ResizeObserver(scheduleUpdate);\n const observeTabs = () => {\n resizeObserver.disconnect();\n for (const tab of tabRefs.current.values()) {\n resizeObserver.observe(tab);\n }\n };\n observeTabs();\n\n // Tab elements can be added, removed, or replaced without this component\n // re-rendering, so watch the DOM to keep the observed set in sync.\n const mutationObserver = new MutationObserver(() => {\n observeTabs();\n scheduleUpdate();\n });\n\n if (tabsRef.current) {\n mutationObserver.observe(tabsRef.current, {\n childList: true,\n subtree: true,\n });\n }\n\n return () => {\n if (frame !== null) {\n cancelAnimationFrame(frame);\n }\n resizeObserver.disconnect();\n mutationObserver.disconnect();\n };\n }, [updateCSSVariables, tabRefs, tabsRef]);\n\n return (\n <>\n <div className={classes.root} />\n <div className={classes.hovered} />\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;AA2BO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA+B;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,0BAA0B,KAAK,CAAA;AAClE,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,OAAA,EAAS,UAAA,EAAY,gBAAe,GAAI,QAAA;AAClE,EAAA,MAAM,KAAA,GAAQ,WAAW,mBAAmB,CAAA;AAC5C,EAAA,MAAM,eAAA,GAAkB,OAAsB,IAAI,CAAA;AAElD,EAAA,MAAM,kBAAA,GAAqB,WAAA;AAAA,IACzB,CAAC,UAAU,IAAA,KAAS;AAKlB,MAAA,IAAI,SAAS,IAAA,EAAM;AAEnB,MAAA,IAAI,CAAC,QAAQ,OAAA,EAAS;AAEtB,MAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,OAAA,CAAQ,qBAAA,EAAsB;AAGvD,MAAA,IAAI,KAAA,EAAO,WAAA,IAAe,IAAA,IAAQ,KAAA,CAAM,gBAAgB,EAAA,EAAI;AAC1D,QAAA,MAAM,YAAY,OAAA,CAAQ,OAAA,CAAQ,IAAI,KAAA,CAAM,WAAA,CAAY,UAAU,CAAA;AAElE,QAAA,IAAI,SAAA,EAAW;AACb,UAAA,MAAM,UAAA,GAAa,UAAU,qBAAA,EAAsB;AACnD,UAAA,MAAM,YAAA,GAAe,UAAA,CAAW,IAAA,GAAO,QAAA,CAAS,IAAA;AAChD,UAAA,MAAM,WAAA,GAAc,UAAA,CAAW,GAAA,GAAM,QAAA,CAAS,GAAA;AAG9C,UAAA,MAAM,gBAAA,GAAmB,gBAAgB,OAAA,KAAY,IAAA;AAErD,UAAA,IAAI,gBAAA,IAAoB,CAAC,OAAA,EAAS;AAGhC,YAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,cACpB,8BAAA;AAAA,cACA;AAAA,aACF;AAGA,YAAA,IAAI,OAAA,EAAS;AACX,cAAA,qBAAA,CAAsB,MAAM;AAC1B,gBAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,kBAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,oBACpB,8BAAA;AAAA,oBACA;AAAA,mBACF;AAAA,gBACF;AAAA,cACF,CAAC,CAAA;AAAA,YACH;AAAA,UACF,CAAA,MAAO;AAEL,YAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,cACpB,8BAAA;AAAA,cACA;AAAA,aACF;AAAA,UACF;AAGA,UAAA,eAAA,CAAgB,OAAA,GAAU,KAAA,CAAM,WAAA,CAAY,QAAA,EAAS;AAErD,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,mBAAA;AAAA,YACA,GAAG,YAAY,CAAA,EAAA;AAAA,WACjB;AACA,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,oBAAA;AAAA,YACA,CAAA,EAAG,YAAA,GAAe,UAAA,CAAW,KAAK,CAAA,EAAA;AAAA,WACpC;AACA,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,kBAAA;AAAA,YACA,GAAG,WAAW,CAAA,EAAA;AAAA,WAChB;AACA,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,qBAAA;AAAA,YACA,CAAA,EAAG,WAAA,GAAc,UAAA,CAAW,MAAM,CAAA,EAAA;AAAA,WACpC;AACA,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,oBAAA;AAAA,YACA,CAAA,EAAG,WAAW,KAAK,CAAA,EAAA;AAAA,WACrB;AACA,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,qBAAA;AAAA,YACA,CAAA,EAAG,WAAW,MAAM,CAAA,EAAA;AAAA,WACtB;AACA,UAAA,OAAA,CAAQ,OAAA,CAAQ,KAAA,CAAM,WAAA,CAAY,sBAAA,EAAwB,GAAG,CAAA;AAAA,QAC/D;AAAA,MACF,CAAA,MAAO;AACL,QAAA,OAAA,CAAQ,OAAA,CAAQ,KAAA,CAAM,WAAA,CAAY,sBAAA,EAAwB,GAAG,CAAA;AAC7D,QAAA,eAAA,CAAgB,OAAA,GAAU,IAAA;AAAA,MAC5B;AAGA,MAAA,IAAI,UAAA,EAAY;AACd,QAAA,MAAM,UAAA,GAAa,OAAA,CAAQ,OAAA,CAAQ,GAAA,CAAI,UAAU,CAAA;AACjD,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,MAAM,WAAA,GAAc,WAAW,qBAAA,EAAsB;AACrD,UAAA,MAAM,YAAA,GAAe,WAAA,CAAY,IAAA,GAAO,QAAA,CAAS,IAAA;AACjD,UAAA,MAAM,WAAA,GAAc,WAAA,CAAY,GAAA,GAAM,QAAA,CAAS,GAAA;AAE/C,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,oBAAA;AAAA,YACA,GAAG,YAAY,CAAA,EAAA;AAAA,WACjB;AACA,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,qBAAA;AAAA,YACA,CAAA,EAAG,YAAA,GAAe,WAAA,CAAY,KAAK,CAAA,EAAA;AAAA,WACrC;AACA,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,mBAAA;AAAA,YACA,GAAG,WAAW,CAAA,EAAA;AAAA,WAChB;AACA,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,sBAAA;AAAA,YACA,CAAA,EAAG,WAAA,GAAc,WAAA,CAAY,MAAM,CAAA,EAAA;AAAA,WACrC;AACA,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,qBAAA;AAAA,YACA,CAAA,EAAG,YAAY,KAAK,CAAA,EAAA;AAAA,WACtB;AACA,UAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,YACpB,sBAAA;AAAA,YACA,CAAA,EAAG,YAAY,MAAM,CAAA,EAAA;AAAA,WACvB;AAEA,UAAA,MAAM,iBAAA,GAAoB,eAAe,OAAA,KAAY,IAAA;AAErD,UAAA,IAAI,iBAAA,IAAqB,CAAC,OAAA,EAAS;AAGjC,YAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,cACpB,+BAAA;AAAA,cACA;AAAA,aACF;AAGA,YAAA,IAAI,OAAA,EAAS;AACX,cAAA,qBAAA,CAAsB,MAAM;AAC1B,gBAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,kBAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,oBACpB,+BAAA;AAAA,oBACA;AAAA,mBACF;AAAA,gBACF;AAAA,cACF,CAAC,CAAA;AAAA,YACH;AAAA,UACF,CAAA,MAAO;AAEL,YAAA,OAAA,CAAQ,QAAQ,KAAA,CAAM,WAAA;AAAA,cACpB,+BAAA;AAAA,cACA;AAAA,aACF;AAAA,UACF;AAGA,UAAA,cAAA,CAAe,OAAA,GAAU,UAAA;AAEzB,UAAA,OAAA,CAAQ,OAAA,CAAQ,KAAA,CAAM,WAAA,CAAY,uBAAA,EAAyB,GAAG,CAAA;AAAA,QAChE;AAAA,MACF,CAAA,MAAO;AAEL,QAAA,OAAA,CAAQ,OAAA,CAAQ,KAAA,CAAM,WAAA,CAAY,uBAAA,EAAyB,GAAG,CAAA;AAG9D,QAAA,cAAA,CAAe,OAAA,GAAU,IAAA;AAAA,MAC3B;AAAA,IACF,CAAA;AAAA,IACA,CAAC,KAAA,EAAO,WAAA,EAAa,UAAA,EAAY,QAAQ,OAAO;AAAA,GAClD;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,kBAAA,EAAmB;AAAA,EACrB,GAAG,CAAC,kBAAA,EAAoB,OAAA,CAAQ,OAAA,CAAQ,IAAI,CAAC,CAAA;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,YAAA,GAAe,MAAM,kBAAA,CAAmB,KAAK,CAAA;AACnD,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAC9C,IAAA,OAAO,MAAM,MAAA,CAAO,mBAAA,CAAoB,QAAA,EAAU,YAAY,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,kBAAkB,CAAC,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,IAAI,OAAO,mBAAmB,WAAA,EAAa;AACzC,MAAA,OAAO,MAAA;AAAA,IACT;AAEA,IAAA,IAAI,KAAA,GAAuB,IAAA;AAC3B,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,IAAI,UAAU,IAAA,EAAM;AAClB,QAAA;AAAA,MACF;AAEA,MAAA,KAAA,GAAQ,sBAAsB,MAAM;AAClC,QAAA,KAAA,GAAQ,IAAA;AACR,QAAA,kBAAA,CAAmB,KAAK,CAAA;AAAA,MAC1B,CAAC,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,MAAM,cAAA,GAAiB,IAAI,cAAA,CAAe,cAAc,CAAA;AACxD,IAAA,MAAM,cAAc,MAAM;AACxB,MAAA,cAAA,CAAe,UAAA,EAAW;AAC1B,MAAA,KAAA,MAAW,GAAA,IAAO,OAAA,CAAQ,OAAA,CAAQ,MAAA,EAAO,EAAG;AAC1C,QAAA,cAAA,CAAe,QAAQ,GAAG,CAAA;AAAA,MAC5B;AAAA,IACF,CAAA;AACA,IAAA,WAAA,EAAY;AAIZ,IAAA,MAAM,gBAAA,GAAmB,IAAI,gBAAA,CAAiB,MAAM;AAClD,MAAA,WAAA,EAAY;AACZ,MAAA,cAAA,EAAe;AAAA,IACjB,CAAC,CAAA;AAED,IAAA,IAAI,QAAQ,OAAA,EAAS;AACnB,MAAA,gBAAA,CAAiB,OAAA,CAAQ,QAAQ,OAAA,EAAS;AAAA,QACxC,SAAA,EAAW,IAAA;AAAA,QACX,OAAA,EAAS;AAAA,OACV,CAAA;AAAA,IACH;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,UAAU,IAAA,EAAM;AAClB,QAAA,oBAAA,CAAqB,KAAK,CAAA;AAAA,MAC5B;AACA,MAAA,cAAA,CAAe,UAAA,EAAW;AAC1B,MAAA,gBAAA,CAAiB,UAAA,EAAW;AAAA,IAC9B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,kBAAA,EAAoB,OAAA,EAAS,OAAO,CAAC,CAAA;AAEzC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAM,CAAA;AAAA,oBAC9B,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,OAAA,EAAS;AAAA,GAAA,EACnC,CAAA;AAEJ;;;;"}