[♻️]: Refactor to cleanup unnecessary errors (#98)

* Refactor to move the aria-describedby attribute attachment logic to tooltip * Refactor to remove unnecessary error
styleless-ui · May 6, 2024 · b56ed40 · b56ed40
1 parent d424c4a
commit b56ed40
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 39 deletions.
diff --git a/lib/Popper/Popper.tsx b/lib/Popper/Popper.tsx
@@ -10,7 +10,6 @@ import {
   componentWithForwardedRef,
   useDeterministicId,
   useForkedRefs,
-  useIsomorphicLayoutEffect,
   useIsomorphicValue,
 } from "../utils";
 import * as Slots from "./slots";
@@ -227,14 +226,6 @@ const PopperBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     [open],
   );
 
-  useIsomorphicLayoutEffect(() => {
-    const anchor = resolveAnchor();
-
-    if (id && anchor instanceof HTMLElement) {
-      anchor.setAttribute("aria-describedby", id);
-    }
-  });
-
   const renderProps: RenderProps = {
     placement,
     open,

diff --git a/lib/TabGroup/TabGroup.tsx b/lib/TabGroup/TabGroup.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import { SystemError } from "../internals";
 import type { MergeElementProps } from "../types";
 import {
   componentWithForwardedRef,
@@ -86,29 +85,6 @@ const TabGroupBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     onActiveTabChange?.(tabValue);
   };
 
-  React.useEffect(() => {
-    if (!rootRef.current) return;
-
-    const tabs = Array.from(
-      rootRef.current.querySelectorAll<HTMLButtonElement>('[role="tab"]'),
-    );
-
-    const activeTabElement = tabs.find(
-      tab => tab.getAttribute("data-entity") === activeTab,
-    );
-
-    if (!activeTabElement) return;
-
-    const isActiveTabDisabled =
-      activeTabElement.hasAttribute("disabled") ||
-      activeTabElement.getAttribute("aria-disabled") === "true";
-
-    if (isActiveTabDisabled) {
-      throw new SystemError("The selected tab is `disabled`.", "TabGroup.Root");
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   React.useEffect(() => {
     if (!rootRef.current) return;
 

diff --git a/lib/Tooltip/Tooltip.tsx b/lib/Tooltip/Tooltip.tsx
@@ -55,8 +55,7 @@ type OwnProps = {
    */
   autoPlacement?: PopperProps["autoPlacement"];
   /**
-   * The tooltip will be triggered by this event.\
-   * **Note**: choosing `"follow-mouse"` will disable `autoPlacement` property.
+   * The tooltip will be triggered by this event.
    *
    * @default "open-on-click"
    */
@@ -137,6 +136,32 @@ const TooltipBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     onOpenChange?.(newOpenState);
   };
 
+  React.useEffect(() => {
+    if (!open && !keepMounted) return;
+
+    const anchor = resolveAnchor();
+
+    if (!anchor || !(anchor instanceof HTMLElement)) return;
+
+    let describedBy = anchor.getAttribute("aria-describedby");
+
+    if (describedBy) {
+      if (describedBy.includes(id)) return;
+
+      describedBy += ` ${id}`;
+    } else describedBy = id;
+
+    anchor.setAttribute("aria-describedby", describedBy);
+
+    return () => {
+      anchor.setAttribute(
+        "aria-describedby",
+        describedBy.replace(id, "").trim(),
+      );
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, open, keepMounted]);
+
   if (typeof document !== "undefined") {
     /* eslint-disable react-hooks/rules-of-hooks */
     const anchor = resolveAnchor();
@@ -165,8 +190,7 @@ const TooltipBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
           emitOpenChange(true);
         }),
       },
-      isHTMLElement(anchor) &&
-        ["open-on-hover", "follow-mouse"].includes(behavior),
+      isHTMLElement(anchor) && behavior === "open-on-hover",
     );
 
     useEventListener(
@@ -177,8 +201,7 @@ const TooltipBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
           emitOpenChange(false);
         }),
       },
-      isHTMLElement(anchor) &&
-        ["open-on-hover", "follow-mouse"].includes(behavior),
+      isHTMLElement(anchor) && behavior === "open-on-hover",
     );
 
     useEventListener(