fix: Tab popovers no longer jump with around when clicked multiple times

do-ob-io · Jul 2, 2024 · d8f1eea · d8f1eea
1 parent 5919941
commit d8f1eea
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 28 deletions.
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
@@ -59,6 +59,7 @@ export function Button<
   startContent = null,
   endContent = null,
   iconify = false,
+  unstyled = false,
   href,
   dialog,
   ...props
@@ -94,7 +95,7 @@ export function Button<
 
   return (
     <Tag
-      className={cn(
+      className={unstyled ? className : cn(
         'inline-flex items-center justify-center rounded no-underline',
         interactiveStyles.focus,
         interactiveStyles.mouse,

diff --git a/packages/ui/src/components/Button/Button.types.ts b/packages/ui/src/components/Button/Button.types.ts
@@ -6,6 +6,7 @@ export type ButtonColor = 'background' | 'primary' | 'secondary' | 'success' | '
 
 export interface ButtonProps {
   variant?: ButtonVariant;
+  unstyled?: boolean;
   size?: ButtonSize;
   color?: ButtonColor;
   startContent?: React.ReactNode;

diff --git a/packages/ui/src/reducers/dialog.reducer.ts b/packages/ui/src/reducers/dialog.reducer.ts
@@ -23,8 +23,6 @@ export function reducer(
 
   const { type, payload } = action;
 
-  console.log({ type, payload });
-
   switch (type) {
     case 'dialog/register':
       return {

diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
@@ -57,7 +57,7 @@ export interface Link {
   /**
    * Subitems
    */
-  items?: Link[];
+  links?: Link[];
 }
 
 /**

diff --git a/packages/ui/src/widgets/Navigation/NavigationTabs.tsx b/packages/ui/src/widgets/Navigation/NavigationTabs.tsx
@@ -1,13 +1,14 @@
 'use client';
 
-import { createRef, use, useRef } from 'react';
+import { createRef, use, useMemo } from 'react';
 import { NavigationProps } from './Navigation.types';
 import { DialogDispatchContext, DoobUiContext } from '@do-ob/ui/context';
 import { Tab, TabList, Tabs } from 'react-aria-components';
 import { cn, interactiveStyles } from '@do-ob/ui/utility';
 import { nop } from '@do-ob/core';
 import { ChevronDownIcon } from '@do-ob/ui/icons';
 import { dialogActions } from '@do-ob/ui/reducer';
+import { useTreeData } from 'react-stately';
 
 export function NavigationTabs({
   base: {
@@ -25,7 +26,16 @@ export function NavigationTabs({
   onSelectionChange?: (key: string) => void;
 }) {
 
-  const tabRefs = useRef<Record<string, HTMLElement | null>>({});
+  const linkTree = useTreeData({
+    initialItems: links,
+    getKey: (item) => item.url,
+    getChildren: (item) => item.links ?? [],
+  });
+
+  const tabRefs = useMemo(() => (links.reduce((acc, { url }) => {
+    acc[url] = createRef<HTMLDivElement>();
+    return acc;
+  }, {} as Record<string, React.RefObject<HTMLDivElement | null>>)), [ links ]);
 
   const { pathname } = use(DoobUiContext);
   const dispatch = use(DialogDispatchContext);
@@ -60,37 +70,42 @@ export function NavigationTabs({
 
         // Only for horizontal navigation.
         if(orientation === 'horizontal') {
-          const selectedLink = links.find((link) => link.url === key);
+          const selectedLink = linkTree.getItem(key);
 
-          // If the selected link has sub-items, open a dialog.
-          if(selectedLink?.items?.length) {
-            const element = tabRefs.current[key] ?? null;
+          console.log({
+            selectedLink,
+            tabRefs,
+            ref: tabRefs[selectedLink.value.url].current
+          });
 
-            const ref = createRef<HTMLElement | null>();
-            ref.current = element;
+          console.log(selectedLink.value.url);
+
+          // If the selected link has sub-items, open a dialog.
+          if(selectedLink.children.length > 0) {
             dispatch(dialogActions.open(
-              `${id}-${selectedLink.url}`,
-              ref
+              `${id}-${selectedLink.value.url}`,
+              tabRefs[selectedLink.value.url],
             ));
           }
         }
       }}
     >
-      <TabList className="flex gap-1 orientation-horizontal:flex-row orientation-vertical:flex-col" aria-label={label}>
-        {links.length === 0 ? (
-          <div>&nbsp;</div>
-        ) : null}
-        {links.map((link) => (
+      <TabList
+        className="flex gap-1 orientation-horizontal:flex-row orientation-vertical:flex-col"
+        items={linkTree.items}
+        aria-label={label}
+      >
+        {({ value, children }) => (
           <Tab
             className={cn(
               interactiveStyles.focus,
               'cursor-pointer',
               'group relative inline-flex h-11 flex-row items-center gap-1 rounded px-3 active:text-primary hover:text-primary selected:font-bold dark:active:text-primary-dark dark:hover:text-primary-dark [&>*:first-child]:selected:bg-primary',
               orientation === 'horizontal' ? 'justify-center [&>*:first-child]:selected:h-[6px]' : 'justify-start [&>*:first-child]:selected:w-[6px]',
             )}
-            key={link.url}
-            id={link.url}
-            href={link.items?.length ? undefined : link.url}
+            key={value.url}
+            id={value.url}
+            href={children.length ? undefined : value.url}
           >
             <div
               className={cn(
@@ -100,21 +115,19 @@ export function NavigationTabs({
               aria-hidden="true"
             ></div>
             <div
-              ref={(el) => {
-                tabRefs.current[link.url] = el;
-              }}
+              ref={tabRefs[value.url]}
               className={cn(
                 'flex size-full flex-row gap-1',
                 orientation === 'horizontal' ? 'items-center justify-center' : 'items-center justify-start'
               )}
             >
-              {link.title}
-              {orientation === 'horizontal' && link.items?.length ? (
+              {value.title}
+              {orientation === 'horizontal' && children.length > 0 ? (
                 <ChevronDownIcon className="size-4" />
               ) : null}
             </div>
           </Tab>
-        ))}
+        )}
       </TabList>
     </Tabs>
   );