components: Small Tabs and FormSelect updates

packages/components/package.json

@@ -4,7 +4,7 @@
     "name": "DoltHub"
   },
   "description": "A collection of React components for common tasks",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dolthub/react-library.git"

packages/components/src/FormSelect/components/CustomOption.tsx

@@ -14,7 +14,10 @@ export default function CustomOption<T, OptionType extends Option<T>>(
   const label = `${props.labelPrefix}-${props.data.value}`;
   return (
     <div
-      className={cx({ [css.optionWithIconPath]: !!props.data.iconPath })}
+      className={cx({
+        [css.optionWithIconPath]: !!props.data.iconPath,
+        [css.optionWithDetails]: !!props.data.details,
+      })}
       aria-label={label}
       data-cy={label}
     >

packages/components/src/FormSelect/components/index.module.css

@@ -75,16 +75,20 @@
   }
 }
 
+.optionWithDetails {
+  @apply mt-1;
+}
+
 .optionDetails {
-  @apply text-stone-500 text-xs mt-1 mb-1;
+  @apply text-stone-500 text-xs my-1.5;
 }
 
 .menuList {
   @apply py-0;
 }
 
 .footer {
-  @apply border-t  flex justify-center text-sm py-2;
+  @apply border-t flex justify-center text-sm py-2;
 }
 
 .noOpts {

packages/components/src/Tabs/context.tsx

@@ -1,22 +1,37 @@
 import { createCustomContext } from "@dolthub/react-contexts";
 import { useContextWithError } from "@dolthub/react-hooks";
-import React, { ReactNode, useMemo, useState } from "react";
+import React, { ReactNode, useCallback, useMemo, useState } from "react";
 
 type TabsContextType = {
   activeTabIndex: number;
-  setActiveTabIndex: React.Dispatch<React.SetStateAction<number>>;
+  setActiveTabIndex: (i: number) => void;
 };
 
 export const TabsContext = createCustomContext<TabsContextType>("TabsContext");
 
 type Props = {
   children: ReactNode;
   initialActiveIndex?: number;
+  afterSetTabIndex?: (i: number) => void;
 };
 
-export function TabsProvider(props: Props) {
-  const [activeTabIndex, setActiveTabIndex] = useState(
-    props.initialActiveIndex ?? 0,
+export function TabsProvider({
+  children,
+  initialActiveIndex,
+  afterSetTabIndex,
+}: Props) {
+  const [activeTabIndex, _setActiveTabIndex] = useState(
+    initialActiveIndex ?? 0,
+  );
+
+  const setActiveTabIndex = useCallback(
+    (i: number) => {
+      _setActiveTabIndex(i);
+      if (afterSetTabIndex) {
+        afterSetTabIndex(i);
+      }
+    },
+    [afterSetTabIndex],
   );
 
   const value = useMemo(() => {
@@ -26,9 +41,7 @@ export function TabsProvider(props: Props) {
     };
   }, [activeTabIndex, setActiveTabIndex]);
 
-  return (
-    <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>
-  );
+  return <TabsContext.Provider value={value}>{children}</TabsContext.Provider>;
 }
 
 export function useTabsContext(): TabsContextType {

packages/components/src/Tabs/index.tsx

@@ -10,12 +10,13 @@ type Props = {
   children: ReactNode;
   initialActiveIndex?: number;
   className?: string;
+  afterSetTabIndex?: (i: number) => void;
 };
 
-function Tabs({ children, ...props }: Props) {
+function Tabs({ children, className, ...props }: Props) {
   return (
     <TabsProvider {...props}>
-      <div className={cx(css.tabs, props.className)}>{children}</div>
+      <div className={cx(css.tabs, className)}>{children}</div>
     </TabsProvider>
   );
 }

packages/components/src/__tests__/Tabs.test.tsx

@@ -26,8 +26,9 @@ const testingActiveTab = (
 
 describe("test Tabs", () => {
   it(`renders active tabs and panels correctly`, () => {
+    const afterSetTabIndex = jest.fn();
     render(
-      <Tabs>
+      <Tabs afterSetTabIndex={afterSetTabIndex}>
         <TabList>
           {mocks.map((mock, i) => (
             <Tab
@@ -58,6 +59,7 @@ describe("test Tabs", () => {
       } else {
         if (i !== 0) {
           fireEvent.click(buttons[i]);
+          expect(afterSetTabIndex).toHaveBeenCalledWith(i);
         }
 
         testingActiveTab(listItems, i);
@@ -76,6 +78,7 @@ describe("test Tabs", () => {
       }
     }
   });
+
   it(`renders initialActiveIndex correctly`, () => {
     render(
       <Tabs initialActiveIndex={2}>